+ + + onChange({ ...cookie, name })} + /> + + + onChange({ ...cookie, value })} + /> + + + onChange(cookieWithDomain(cookie, domain))} + /> + + + onChange({ ...cookie, path })} + /> + + +

+ { + if (checked) { + onChange({ ...cookie, expires: "SessionEnd" }); + return; + } + + const expiresInput = + cookieExpiresFromInput(expiresInputValue) == null + ? defaultCookieExpiresInputValue() + : expiresInputValue; + + onExpiresInputChange(expiresInput); + onChange({ + ...cookie, + expires: cookieExpiresFromInput(expiresInput)!, + }); + }} + /> + { + onExpiresInputChange(value); + + const expires = cookieExpiresFromInput(value); + if (expires != null) { + onChange({ ...cookie, expires }); + } + }} + /> +

+ + {cookieSize(cookie)} + + onChange({ ...cookie, httpOnly })} + /> + + + onChange({ ...cookie, secure })} + /> + + + onChange(event.target.value)} + pattern={pattern} + placeholder={placeholder} + required={required} + type="text" + value={value} + /> + ); +} + +function CookieTextarea({ onChange, value }: { onChange: (value: string) => void; value: string }) { + return ( +

onChange(event.target.value)}
+      value={value}
+    />
+  );
+}
+
+const NEW_COOKIE_KEY = "__new-cookie__";
+const NON_EMPTY_INPUT_PATTERN = ".*\\S.*";
+const cookieInputClassName = classNames(
+  "x-theme-input w-full min-w-0 min-h-sm rounded-md bg-transparent",
+  "border border-border-subtle outline-hidden",
+  "px-2 text-xs font-mono cursor-text placeholder:text-placeholder",
+  "focus:border-border-focus invalid:border-danger",
+  "disabled:opacity-disabled disabled:border-dotted",
+);
+
+function cookieSize(cookie: Cookie) {
+  const encoder = new TextEncoder();
+  return encoder.encode(cookie.name).length + encoder.encode(cookie.value).length;
+}
+
+function newCookieDraft(): Cookie {
+  return {
+    name: "",
+    value: "",
+    domain: "NotPresent",
+    expires: "SessionEnd",
+    path: "/",
+    secure: false,
+    httpOnly: false,
+    sameSite: null,
+  };
+}
+
+function normalizeCookie(cookie: Cookie): Cookie {
+  return {
+    ...cookie,
+    domain: normalizeCookieDomain(cookie.domain),
+    name: cookie.name.trim(),
+    path: cookie.path.trim() || "/",
+  };
+}
+
+function normalizeCookieDomain(domain: Cookie["domain"]): Cookie["domain"] {
+  if (domain === "NotPresent" || domain === "Empty") {
+    return domain;
+  }
+
+  if ("Suffix" in domain) {
+    return { Suffix: domain.Suffix.trim() };
+  }
+
+  return { HostOnly: domain.HostOnly.trim() };
+}
+
+function cookieDomainInputValue(cookie: Cookie) {
+  const domain = cookieDomain(cookie);
+  return domain === "n/a" ? "" : domain;
+}
+
+function cookieWithDomain(cookie: Cookie, domain: string): Cookie {
+  const trimmedDomain = domain.trim();
+  if (trimmedDomain.length === 0) {
+    return { ...cookie, domain: "NotPresent" };
+  }
+
+  if (cookie.domain !== "NotPresent" && cookie.domain !== "Empty" && "Suffix" in cookie.domain) {
+    return { ...cookie, domain: { Suffix: trimmedDomain } };
+  }
+
+  return { ...cookie, domain: { HostOnly: trimmedDomain } };
+}
+
+function cookieExpires(cookie: Cookie) {
+  if (cookie.expires === "SessionEnd") {
+    return "Session";
+  }
+
+  const expiresSeconds = Number(cookie.expires.AtUtc);
+  if (!Number.isFinite(expiresSeconds)) {
+    return cookie.expires.AtUtc;
+  }
+
+  const date = new Date(expiresSeconds * 1000);
+  return formatDate(date, "MMM d, yyyy, h:mm:ss a");
+}
+
+function cookieExpiresInputValue(cookie: Cookie) {
+  if (cookie.expires === "SessionEnd") {
+    return "";
+  }
+
+  const expiresSeconds = Number(cookie.expires.AtUtc);
+  if (!Number.isFinite(expiresSeconds)) {
+    return "";
+  }
+
+  return new Date(expiresSeconds * 1000).toISOString();
+}
+
+function defaultCookieExpiresInputValue() {
+  return new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString();
+}
+
+function cookieExpiresFromInput(value: string): Cookie["expires"] | null {
+  const time = new Date(value).getTime();
+  if (!Number.isFinite(time)) {
+    return null;
+  }
+
+  return { AtUtc: `${Math.floor(time / 1000)}` };
+}
+
+function cookieMatchesFilter(cookie: Cookie, filter: string) {
+  const query = filter.trim().toLowerCase();
+  if (query.length === 0) {
+    return true;
+  }
+
+  return [cookie.name, cookie.value, cookieDomain(cookie)].some((value) =>
+    value.toLowerCase().includes(query),
+  );
+}
+
+function cookieKey(cookie: Cookie) {
+  return [cookie.name, cookieDomainKey(cookie.domain), cookie.path].join("|");
+}
+
+function cookieDomainKey(domain: Cookie["domain"]) {
+  if (typeof domain !== "string" && "HostOnly" in domain) {
+    return `HostOnly:${domain.HostOnly}`;
+  }
+
+  if (typeof domain !== "string" && "Suffix" in domain) {
+    return `Suffix:${domain.Suffix}`;
+  }
+
+  return domain;
+}
diff --git a/apps/yaak-client/components/CookieDropdown.tsx b/apps/yaak-client/components/CookieDropdown.tsx
new file mode 100644
index 0000000..1e926e2
--- /dev/null
+++ b/apps/yaak-client/components/CookieDropdown.tsx
@@ -0,0 +1,92 @@
+import { cookieJarsAtom, patchModel } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { memo, useMemo } from "react";
+import { useActiveCookieJar } from "../hooks/useActiveCookieJar";
+import { useCreateCookieJar } from "../hooks/useCreateCookieJar";
+import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
+import { showPrompt } from "../lib/prompt";
+import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";
+import { CookieDialog } from "./CookieDialog";
+import { Dropdown, type DropdownItem } from "./core/Dropdown";
+import { Icon, InlineCode } from "@yaakapp-internal/ui";
+import { IconButton } from "./core/IconButton";
+
+export const CookieDropdown = memo(function CookieDropdown() {
+  const activeCookieJar = useActiveCookieJar();
+  const createCookieJar = useCreateCookieJar();
+  const cookieJars = useAtomValue(cookieJarsAtom);
+
+  const items = useMemo((): DropdownItem[] => {
+    return [
+      ...(cookieJars ?? []).map((j) => ({
+        key: j.id,
+        label: j.name,
+        leftSlot: <Icon icon={j.id === activeCookieJar?.id ? "check" : "empty"} />,
+        onSelect: () => {
+          setWorkspaceSearchParams({ cookie_jar_id: j.id });
+        },
+      })),
+      ...(((cookieJars ?? []).length > 0 && activeCookieJar != null
+        ? [
+            { type: "separator", label: activeCookieJar.name },
+            {
+              key: "manage",
+              label: "Manage Cookies",
+              leftSlot: <Icon icon="cookie" />,
+              onSelect: () => {
+                if (activeCookieJar == null) return;
+                CookieDialog.show(activeCookieJar.id);
+              },
+            },
+            {
+              key: "rename",
+              label: "Rename",
+              leftSlot: <Icon icon="pencil" />,
+              onSelect: async () => {
+                const name = await showPrompt({
+                  id: "rename-cookie-jar",
+                  title: "Rename Cookie Jar",
+                  description: (
+                    <>
+                      Enter a new name for <InlineCode>{activeCookieJar?.name}</InlineCode>
+                    </>
+                  ),
+                  label: "Name",
+                  confirmText: "Save",
+                  placeholder: "New name",
+                  defaultValue: activeCookieJar?.name,
+                });
+                if (name == null) return;
+                await patchModel(activeCookieJar, { name });
+              },
+            },
+            ...(((cookieJars ?? []).length > 1 // Never delete the last one
+              ? [
+                  {
+                    label: "Delete",
+                    leftSlot: <Icon icon="trash" />,
+                    color: "danger",
+                    onSelect: async () => {
+                      await deleteModelWithConfirm(activeCookieJar);
+                    },
+                  },
+                ]
+              : []) as DropdownItem[]),
+          ]
+        : []) as DropdownItem[]),
+      { type: "separator" },
+      {
+        key: "create-cookie-jar",
+        label: "New Cookie Jar",
+        leftSlot: <Icon icon="plus" />,
+        onSelect: () => createCookieJar.mutate(),
+      },
+    ];
+  }, [activeCookieJar, cookieJars, createCookieJar]);
+
+  return (
+    <Dropdown items={items}>
+      <IconButton size="sm" icon="cookie" iconColor="secondary" title="Cookie Jar" />
+    </Dropdown>
+  );
+});
diff --git a/apps/yaak-client/components/CopyButton.tsx b/apps/yaak-client/components/CopyButton.tsx
new file mode 100644
index 0000000..2a0da48
--- /dev/null
+++ b/apps/yaak-client/components/CopyButton.tsx
@@ -0,0 +1,33 @@
+import { useTimedBoolean } from "@yaakapp-internal/ui";
+import { copyToClipboard } from "../lib/copy";
+import { showToast } from "../lib/toast";
+import type { ButtonProps } from "./core/Button";
+import { Button } from "./core/Button";
+
+interface Props extends Omit<ButtonProps, "onClick"> {
+  text: string | (() => Promise<string | null>);
+}
+
+export function CopyButton({ text, ...props }: Props) {
+  const [copied, setCopied] = useTimedBoolean();
+  return (
+    <Button
+      {...props}
+      onClick={async () => {
+        const content = typeof text === "function" ? await text() : text;
+        if (content == null) {
+          showToast({
+            id: "failed-to-copy",
+            color: "danger",
+            message: "Failed to copy",
+          });
+        } else {
+          copyToClipboard(content, { disableToast: true });
+          setCopied();
+        }
+      }}
+    >
+      {copied ? "Copied" : "Copy"}
+    </Button>
+  );
+}
diff --git a/apps/yaak-client/components/CopyIconButton.tsx b/apps/yaak-client/components/CopyIconButton.tsx
new file mode 100644
index 0000000..a97a032
--- /dev/null
+++ b/apps/yaak-client/components/CopyIconButton.tsx
@@ -0,0 +1,31 @@
+import { IconButton, type IconButtonProps, useTimedBoolean } from "@yaakapp-internal/ui";
+import { copyToClipboard } from "../lib/copy";
+import { showToast } from "../lib/toast";
+
+interface Props extends Omit<IconButtonProps, "onClick" | "icon"> {
+  text: string | (() => Promise<string | null>);
+}
+
+export function CopyIconButton({ text, ...props }: Props) {
+  const [copied, setCopied] = useTimedBoolean();
+  return (
+    <IconButton
+      {...props}
+      icon={copied ? "check" : "copy"}
+      showConfirm
+      onClick={async () => {
+        const content = typeof text === "function" ? await text() : text;
+        if (content == null) {
+          showToast({
+            id: "failed-to-copy",
+            color: "danger",
+            message: "Failed to copy",
+          });
+        } else {
+          copyToClipboard(content, { disableToast: true });
+          setCopied();
+        }
+      }}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/CreateDropdown.tsx b/apps/yaak-client/components/CreateDropdown.tsx
new file mode 100644
index 0000000..9fa8237
--- /dev/null
+++ b/apps/yaak-client/components/CreateDropdown.tsx
@@ -0,0 +1,21 @@
+import { useCreateDropdownItems } from "../hooks/useCreateDropdownItems";
+import type { DropdownProps } from "./core/Dropdown";
+import { Dropdown } from "./core/Dropdown";
+
+interface Props extends Omit<DropdownProps, "items"> {
+  hideFolder?: boolean;
+}
+
+export function CreateDropdown({ hideFolder, children, ...props }: Props) {
+  const getItems = useCreateDropdownItems({
+    hideFolder,
+    hideIcons: true,
+    folderId: "active-folder",
+  });
+
+  return (
+    <Dropdown items={getItems} {...props}>
+      {children}
+    </Dropdown>
+  );
+}
diff --git a/apps/yaak-client/components/CreateEnvironmentDialog.tsx b/apps/yaak-client/components/CreateEnvironmentDialog.tsx
new file mode 100644
index 0000000..1436617
--- /dev/null
+++ b/apps/yaak-client/components/CreateEnvironmentDialog.tsx
@@ -0,0 +1,68 @@
+import { createWorkspaceModel } from "@yaakapp-internal/models";
+import { useState } from "react";
+import { useToggle } from "../hooks/useToggle";
+import { ColorIndicator } from "./ColorIndicator";
+import { Button } from "./core/Button";
+import { Checkbox } from "./core/Checkbox";
+import { ColorPickerWithThemeColors } from "./core/ColorPicker";
+import { Label } from "./core/Label";
+import { PlainInput } from "./core/PlainInput";
+
+interface Props {
+  onCreate: (id: string) => void;
+  hide: () => void;
+  workspaceId: string;
+}
+
+export function CreateEnvironmentDialog({ workspaceId, hide, onCreate }: Props) {
+  const [name, setName] = useState<string>("");
+  const [color, setColor] = useState<string | null>(null);
+  const [sharable, toggleSharable] = useToggle(false);
+  return (
+    <form
+      className="pb-3 flex flex-col gap-3"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        const id = await createWorkspaceModel({
+          model: "environment",
+          name,
+          color,
+          variables: [],
+          public: sharable,
+          workspaceId,
+          parentModel: "environment",
+        });
+        hide();
+        onCreate(id);
+      }}
+    >
+      <PlainInput
+        label="Name"
+        required
+        defaultValue={name}
+        onChange={setName}
+        placeholder="Production"
+      />
+      <Checkbox
+        checked={sharable}
+        title="Share this environment"
+        help="Sharable environments are included in data export and directory sync."
+        onChange={toggleSharable}
+      />
+      <div>
+        <Label
+          htmlFor="color"
+          className="mb-1.5"
+          help="Select a color to be displayed when this environment is active, to help identify it."
+        >
+          Color
+        </Label>
+        <ColorPickerWithThemeColors onChange={setColor} color={color} />
+      </div>
+      <Button type="submit" color="secondary" className="mt-3">
+        {color != null && <ColorIndicator color={color} />}
+        Create Environment
+      </Button>
+    </form>
+  );
+}
diff --git a/apps/yaak-client/components/CreateWorkspaceDialog.tsx b/apps/yaak-client/components/CreateWorkspaceDialog.tsx
new file mode 100644
index 0000000..25e7361
--- /dev/null
+++ b/apps/yaak-client/components/CreateWorkspaceDialog.tsx
@@ -0,0 +1,97 @@
+import { gitMutations } from "@yaakapp-internal/git";
+import type { WorkspaceMeta } from "@yaakapp-internal/models";
+import { createGlobalModel, updateModel } from "@yaakapp-internal/models";
+import { VStack } from "@yaakapp-internal/ui";
+import { useState } from "react";
+import { router } from "../lib/router";
+import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
+import { rpc } from "../lib/rpc";
+import { showErrorToast } from "../lib/toast";
+import { Button } from "./core/Button";
+import { Checkbox } from "./core/Checkbox";
+import { Label } from "./core/Label";
+import { PlainInput } from "./core/PlainInput";
+import { EncryptionHelp } from "./EncryptionHelp";
+import { gitCallbacks } from "./git/callbacks";
+import { SyncToFilesystemSetting } from "./SyncToFilesystemSetting";
+
+interface Props {
+  hide: () => void;
+}
+
+export function CreateWorkspaceDialog({ hide }: Props) {
+  const [name, setName] = useState<string>("");
+  const [syncConfig, setSyncConfig] = useState<{
+    filePath: string | null;
+    initGit?: boolean;
+  }>({ filePath: null, initGit: false });
+  const [setupEncryption, setSetupEncryption] = useState<boolean>(false);
+  return (
+    <VStack
+      as="form"
+      space={3}
+      alignItems="start"
+      className="pb-3"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        const workspaceId = await createGlobalModel({ model: "workspace", name });
+        if (workspaceId == null) return;
+
+        // Do getWorkspaceMeta instead of naively creating one because it might have
+        // been created already when the store refreshes the workspace meta after
+        const workspaceMeta = await rpc<WorkspaceMeta>("cmd_get_workspace_meta", {
+          workspaceId,
+        });
+        await updateModel({
+          ...workspaceMeta,
+          settingSyncDir: syncConfig.filePath,
+        });
+
+        if (syncConfig.initGit && syncConfig.filePath) {
+          gitMutations(syncConfig.filePath, gitCallbacks(syncConfig.filePath))
+            .init.mutateAsync()
+            .catch((err) => {
+              showErrorToast({
+                id: "git-init-error",
+                title: "Error initializing Git",
+                message: String(err),
+              });
+            });
+        }
+
+        // Navigate to workspace
+        await router.navigate({
+          to: "/workspaces/$workspaceId",
+          params: { workspaceId },
+        });
+
+        hide();
+
+        if (setupEncryption) {
+          setupOrConfigureEncryption();
+        }
+      }}
+    >
+      <PlainInput required label="Name" defaultValue={name} onChange={setName} />
+
+      <SyncToFilesystemSetting
+        onChange={setSyncConfig}
+        onCreateNewWorkspace={hide}
+        value={syncConfig}
+      />
+      <div>
+        <Label htmlFor={null} help={<EncryptionHelp />}>
+          Workspace encryption
+        </Label>
+        <Checkbox
+          checked={setupEncryption}
+          onChange={setSetupEncryption}
+          title="Enable Encryption"
+        />
+      </div>
+      <Button type="submit" color="primary" className="w-full mt-3">
+        Create Workspace
+      </Button>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/Dialogs.tsx b/apps/yaak-client/components/Dialogs.tsx
new file mode 100644
index 0000000..297cf2f
--- /dev/null
+++ b/apps/yaak-client/components/Dialogs.tsx
@@ -0,0 +1,41 @@
+import { useAtomValue } from "jotai";
+import type { ComponentType } from "react";
+import { useCallback } from "react";
+import { dialogsAtom, hideDialog } from "../lib/dialog";
+import { Dialog, type DialogProps } from "./core/Dialog";
+import { ErrorBoundary } from "./ErrorBoundary";
+
+export type DialogInstance = {
+  id: string;
+  render: ComponentType<{ hide: () => void }>;
+} & Omit<DialogProps, "open" | "children">;
+
+export function Dialogs() {
+  const dialogs = useAtomValue(dialogsAtom);
+  return (
+    <>
+      {dialogs.map(({ id, ...props }) => (
+        <DialogInstance key={id} id={id} {...props} />
+      ))}
+    </>
+  );
+}
+
+function DialogInstance({ render: Component, onClose, id, ...props }: DialogInstance) {
+  const hide = useCallback(() => {
+    hideDialog(id);
+  }, [id]);
+
+  const handleClose = useCallback(() => {
+    onClose?.();
+    hideDialog(id);
+  }, [id, onClose]);
+
+  return (
+    <Dialog open onClose={handleClose} {...props}>
+      <ErrorBoundary name={`Dialog ${id}`}>
+        <Component hide={hide} {...props} />
+      </ErrorBoundary>
+    </Dialog>
+  );
+}
diff --git a/apps/yaak-client/components/DnsOverridesEditor.tsx b/apps/yaak-client/components/DnsOverridesEditor.tsx
new file mode 100644
index 0000000..a44b74d
--- /dev/null
+++ b/apps/yaak-client/components/DnsOverridesEditor.tsx
@@ -0,0 +1,190 @@
+import type { DnsOverride, Workspace } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import { fireAndForget } from "../lib/fireAndForget";
+import {
+  HStack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  VStack,
+} from "@yaakapp-internal/ui";
+import { useCallback, useId, useMemo } from "react";
+import { Button } from "./core/Button";
+import { Checkbox } from "./core/Checkbox";
+import { IconButton } from "./core/IconButton";
+import { PlainInput } from "./core/PlainInput";
+
+interface Props {
+  workspace: Workspace;
+}
+
+interface DnsOverrideWithId extends DnsOverride {
+  _id: string;
+}
+
+export function DnsOverridesEditor({ workspace }: Props) {
+  const reactId = useId();
+
+  // Ensure each override has an internal ID for React keys
+  const overridesWithIds = useMemo<DnsOverrideWithId[]>(() => {
+    return workspace.settingDnsOverrides.map((override, index) => ({
+      ...override,
+      _id: `${reactId}-${index}`,
+    }));
+  }, [workspace.settingDnsOverrides, reactId]);
+
+  const handleChange = useCallback(
+    (overrides: DnsOverride[]) => {
+      fireAndForget(patchModel(workspace, { settingDnsOverrides: overrides }));
+    },
+    [workspace],
+  );
+
+  const handleAdd = useCallback(() => {
+    const newOverride: DnsOverride = {
+      hostname: "",
+      ipv4: [""],
+      ipv6: [],
+      enabled: true,
+    };
+    handleChange([...workspace.settingDnsOverrides, newOverride]);
+  }, [workspace.settingDnsOverrides, handleChange]);
+
+  const handleUpdate = useCallback(
+    (index: number, update: Partial<DnsOverride>) => {
+      const updated = workspace.settingDnsOverrides.map((o, i) =>
+        i === index ? { ...o, ...update } : o,
+      );
+      handleChange(updated);
+    },
+    [workspace.settingDnsOverrides, handleChange],
+  );
+
+  const handleDelete = useCallback(
+    (index: number) => {
+      const updated = workspace.settingDnsOverrides.filter((_, i) => i !== index);
+      handleChange(updated);
+    },
+    [workspace.settingDnsOverrides, handleChange],
+  );
+
+  return (
+    <VStack space={3} className="pb-3">
+      <div className="text-text-subtle text-sm">
+        Override DNS resolution for specific hostnames. This works like{" "}
+        <code className="text-text-subtlest bg-surface-highlight px-1 rounded-sm">/etc/hosts</code> but
+        only for requests made from this workspace.
+      </div>
+
+      {overridesWithIds.length > 0 && (
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeaderCell className="w-8" />
+              <TableHeaderCell>Hostname</TableHeaderCell>
+              <TableHeaderCell>IPv4 Address</TableHeaderCell>
+              <TableHeaderCell>IPv6 Address</TableHeaderCell>
+              <TableHeaderCell className="w-10" />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {overridesWithIds.map((override, index) => (
+              <DnsOverrideRow
+                key={override._id}
+                override={override}
+                onUpdate={(update) => handleUpdate(index, update)}
+                onDelete={() => handleDelete(index)}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      )}
+
+      <HStack>
+        <Button size="xs" color="secondary" variant="border" onClick={handleAdd}>
+          Add DNS Override
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}
+
+interface DnsOverrideRowProps {
+  override: DnsOverride;
+  onUpdate: (update: Partial<DnsOverride>) => void;
+  onDelete: () => void;
+}
+
+function DnsOverrideRow({ override, onUpdate, onDelete }: DnsOverrideRowProps) {
+  const ipv4Value = override.ipv4.join(", ");
+  const ipv6Value = override.ipv6.join(", ");
+
+  return (
+    <TableRow>
+      <TableCell>
+        <Checkbox
+          hideLabel
+          title={override.enabled ? "Disable override" : "Enable override"}
+          checked={override.enabled ?? true}
+          onChange={(enabled) => onUpdate({ enabled })}
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="Hostname"
+          placeholder="api.example.com"
+          defaultValue={override.hostname}
+          onChange={(hostname) => onUpdate({ hostname })}
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="IPv4 addresses"
+          placeholder="127.0.0.1"
+          defaultValue={ipv4Value}
+          onChange={(value) =>
+            onUpdate({
+              ipv4: value
+                .split(",")
+                .map((s) => s.trim())
+                .filter(Boolean),
+            })
+          }
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="IPv6 addresses"
+          placeholder="::1"
+          defaultValue={ipv6Value}
+          onChange={(value) =>
+            onUpdate({
+              ipv6: value
+                .split(",")
+                .map((s) => s.trim())
+                .filter(Boolean),
+            })
+          }
+        />
+      </TableCell>
+      <TableCell>
+        <IconButton
+          size="xs"
+          iconSize="sm"
+          icon="trash"
+          title="Delete override"
+          onClick={onDelete}
+        />
+      </TableCell>
+    </TableRow>
+  );
+}
diff --git a/apps/yaak-client/components/DropMarker.tsx b/apps/yaak-client/components/DropMarker.tsx
new file mode 100644
index 0000000..8f8866d
--- /dev/null
+++ b/apps/yaak-client/components/DropMarker.tsx
@@ -0,0 +1,34 @@
+import classNames from "classnames";
+import type { CSSProperties } from "react";
+import { memo } from "react";
+
+interface Props {
+  className?: string;
+  style?: CSSProperties;
+  orientation?: "horizontal" | "vertical";
+}
+
+export const DropMarker = memo(
+  function DropMarker({ className, style, orientation = "horizontal" }: Props) {
+    return (
+      <div
+        style={style}
+        className={classNames(
+          className,
+          "absolute pointer-events-none z-50",
+          orientation === "horizontal" && "w-full",
+          orientation === "vertical" && "w-0 top-0 bottom-0",
+        )}
+      >
+        <div
+          className={classNames(
+            "absolute bg-primary rounded-full",
+            orientation === "horizontal" && "left-2 right-2 bottom-[-0.1rem] h-[0.2rem]",
+            orientation === "vertical" && "left-[-0.1rem] top-0 bottom-0 w-[0.2rem]",
+          )}
+        />
+      </div>
+    );
+  },
+  () => true,
+);
diff --git a/apps/yaak-client/components/DynamicForm.tsx b/apps/yaak-client/components/DynamicForm.tsx
new file mode 100644
index 0000000..adb3141
--- /dev/null
+++ b/apps/yaak-client/components/DynamicForm.tsx
@@ -0,0 +1,628 @@
+import type { Folder, HttpRequest } from "@yaakapp-internal/models";
+import { foldersAtom, httpRequestsAtom } from "@yaakapp-internal/models";
+import type {
+  FormInput,
+  FormInputCheckbox,
+  FormInputEditor,
+  FormInputFile,
+  FormInputHttpRequest,
+  FormInputKeyValue,
+  FormInputSelect,
+  FormInputText,
+  JsonPrimitive,
+} from "@yaakapp-internal/plugins";
+import { Banner, VStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useMemo } from "react";
+import { useActiveRequest } from "../hooks/useActiveRequest";
+import { useRandomKey } from "../hooks/useRandomKey";
+import { capitalize } from "../lib/capitalize";
+import { showDialog } from "../lib/dialog";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { Checkbox } from "./core/Checkbox";
+import { DetailsBanner } from "./core/DetailsBanner";
+import { Editor } from "./core/Editor/LazyEditor";
+import { IconButton } from "./core/IconButton";
+import type { InputProps } from "./core/Input";
+import { Input } from "./core/Input";
+import { Label } from "./core/Label";
+import type { Pair } from "./core/PairEditor";
+import { PairEditor } from "./core/PairEditor";
+import { PlainInput } from "./core/PlainInput";
+import { Select } from "./core/Select";
+import { Markdown } from "./Markdown";
+import { SelectFile } from "./SelectFile";
+
+export const DYNAMIC_FORM_NULL_ARG = "__NULL__";
+const INPUT_SIZE = "sm";
+
+interface Props<T> {
+  inputs: FormInput[] | undefined | null;
+  onChange: (value: T) => void;
+  data: T;
+  autocompleteFunctions?: boolean;
+  autocompleteVariables?: boolean;
+  stateKey: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function DynamicForm<T extends Record<string, JsonPrimitive>>({
+  inputs,
+  data,
+  onChange,
+  autocompleteVariables,
+  autocompleteFunctions,
+  stateKey,
+  className,
+  disabled,
+}: Props<T>) {
+  const setDataAttr = useCallback(
+    (name: string, value: JsonPrimitive) => {
+      onChange({ ...data, [name]: value === DYNAMIC_FORM_NULL_ARG ? undefined : value });
+    },
+    [data, onChange],
+  );
+
+  return (
+    <FormInputsStack
+      disabled={disabled}
+      inputs={inputs}
+      setDataAttr={setDataAttr}
+      stateKey={stateKey}
+      autocompleteFunctions={autocompleteFunctions}
+      autocompleteVariables={autocompleteVariables}
+      data={data}
+      className={classNames(className, "pb-4")} // Pad the bottom to look nice
+    />
+  );
+}
+
+function FormInputsStack<T extends Record<string, JsonPrimitive>>({
+  className,
+  ...props
+}: FormInputsProps<T> & { className?: string }) {
+  return (
+    <VStack
+      space={3}
+      className={classNames(
+        className,
+        "h-full overflow-auto",
+        "pr-1", // A bit of space between inputs and scrollbar
+      )}
+    >
+      <FormInputs {...props} />
+    </VStack>
+  );
+}
+
+type FormInputsProps<T> = Pick<
+  Props<T>,
+  "inputs" | "autocompleteFunctions" | "autocompleteVariables" | "stateKey" | "data"
+> & {
+  setDataAttr: (name: string, value: JsonPrimitive) => void;
+  disabled?: boolean;
+};
+
+function FormInputs<T extends Record<string, JsonPrimitive>>({
+  inputs,
+  autocompleteFunctions,
+  autocompleteVariables,
+  stateKey,
+  setDataAttr,
+  data,
+  disabled,
+}: FormInputsProps<T>) {
+  return (
+    <>
+      {inputs?.map((input, i) => {
+        if ("hidden" in input && input.hidden) {
+          return null;
+        }
+
+        if ("disabled" in input && disabled != null) {
+          input.disabled = disabled;
+        }
+
+        switch (input.type) {
+          case "select":
+            return (
+              <SelectArg
+                key={i + stateKey}
+                arg={input}
+                onChange={(v) => setDataAttr(input.name, v)}
+                value={
+                  data[input.name]
+                    ? String(data[input.name])
+                    : (input.defaultValue ?? DYNAMIC_FORM_NULL_ARG)
+                }
+              />
+            );
+          case "text":
+            return (
+              <TextArg
+                key={i + stateKey}
+                stateKey={stateKey}
+                arg={input}
+                autocompleteFunctions={autocompleteFunctions || false}
+                autocompleteVariables={autocompleteVariables || false}
+                onChange={(v) => setDataAttr(input.name, v)}
+                value={
+                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? "")
+                }
+              />
+            );
+          case "editor":
+            return (
+              <EditorArg
+                key={i + stateKey}
+                stateKey={stateKey}
+                arg={input}
+                autocompleteFunctions={autocompleteFunctions || false}
+                autocompleteVariables={autocompleteVariables || false}
+                onChange={(v) => setDataAttr(input.name, v)}
+                value={
+                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? "")
+                }
+              />
+            );
+          case "checkbox":
+            return (
+              <CheckboxArg
+                key={i + stateKey}
+                arg={input}
+                onChange={(v) => setDataAttr(input.name, v)}
+                value={data[input.name] != null ? data[input.name] === true : false}
+              />
+            );
+          case "http_request":
+            return (
+              <HttpRequestArg
+                key={i + stateKey}
+                arg={input}
+                onChange={(v) => setDataAttr(input.name, v)}
+                value={data[input.name] != null ? String(data[input.name]) : DYNAMIC_FORM_NULL_ARG}
+              />
+            );
+          case "file":
+            return (
+              <FileArg
+                key={i + stateKey}
+                arg={input}
+                onChange={(v) => setDataAttr(input.name, v)}
+                filePath={
+                  data[input.name] != null ? String(data[input.name]) : DYNAMIC_FORM_NULL_ARG
+                }
+              />
+            );
+          case "accordion":
+            if (!hasVisibleInputs(input.inputs)) {
+              return null;
+            }
+            return (
+              <div key={i + stateKey}>
+                <DetailsBanner
+                  summary={input.label}
+                  className={classNames("mb-auto!", disabled && "opacity-disabled")}
+                >
+                  <div className="mt-3">
+                    <FormInputsStack
+                      data={data}
+                      disabled={disabled}
+                      inputs={input.inputs}
+                      setDataAttr={setDataAttr}
+                      stateKey={stateKey}
+                      autocompleteFunctions={autocompleteFunctions || false}
+                      autocompleteVariables={autocompleteVariables}
+                    />
+                  </div>
+                </DetailsBanner>
+              </div>
+            );
+          case "h_stack":
+            if (!hasVisibleInputs(input.inputs)) {
+              return null;
+            }
+            return (
+              <div className="flex flex-wrap sm:flex-nowrap gap-3 items-end" key={i + stateKey}>
+                <FormInputs
+                  data={data}
+                  disabled={disabled}
+                  inputs={input.inputs}
+                  setDataAttr={setDataAttr}
+                  stateKey={stateKey}
+                  autocompleteFunctions={autocompleteFunctions || false}
+                  autocompleteVariables={autocompleteVariables}
+                />
+              </div>
+            );
+          case "banner":
+            if (!hasVisibleInputs(input.inputs)) {
+              return null;
+            }
+            return (
+              <Banner
+                key={i + stateKey}
+                color={input.color}
+                className={classNames(disabled && "opacity-disabled")}
+              >
+                <FormInputsStack
+                  data={data}
+                  disabled={disabled}
+                  inputs={input.inputs}
+                  setDataAttr={setDataAttr}
+                  stateKey={stateKey}
+                  autocompleteFunctions={autocompleteFunctions || false}
+                  autocompleteVariables={autocompleteVariables}
+                />
+              </Banner>
+            );
+          case "markdown":
+            return <Markdown key={i + stateKey}>{input.content}</Markdown>;
+          case "key_value":
+            return (
+              <KeyValueArg
+                key={i + stateKey}
+                arg={input}
+                stateKey={stateKey}
+                onChange={(v) => setDataAttr(input.name, v)}
+                value={
+                  data[input.name] != null ? String(data[input.name]) : (input.defaultValue ?? "[]")
+                }
+              />
+            );
+          default:
+            // @ts-expect-error
+            throw new Error(`Invalid input type: ${input.type}`);
+        }
+      })}
+    </>
+  );
+}
+
+function TextArg({
+  arg,
+  onChange,
+  value,
+  autocompleteFunctions,
+  autocompleteVariables,
+  stateKey,
+}: {
+  arg: FormInputText;
+  value: string;
+  onChange: (v: string) => void;
+  autocompleteFunctions: boolean;
+  autocompleteVariables: boolean;
+  stateKey: string;
+}) {
+  const props: InputProps = {
+    onChange,
+    name: arg.name,
+    multiLine: arg.multiLine,
+    className: arg.multiLine ? "min-h-16" : undefined,
+    defaultValue: value === DYNAMIC_FORM_NULL_ARG ? arg.defaultValue : value,
+    required: !arg.optional,
+    disabled: arg.disabled,
+    help: arg.description,
+    type: arg.password ? "password" : "text",
+    label: arg.label ?? arg.name,
+    size: INPUT_SIZE,
+    hideLabel: arg.hideLabel ?? arg.label == null,
+    placeholder: arg.placeholder ?? undefined,
+    forceUpdateKey: stateKey,
+    autocomplete: arg.completionOptions ? { options: arg.completionOptions } : undefined,
+    stateKey,
+    autocompleteFunctions,
+    autocompleteVariables,
+  };
+  if (autocompleteVariables || autocompleteFunctions || arg.completionOptions) {
+    return <Input {...props} />;
+  }
+  return <PlainInput {...props} />;
+}
+
+function EditorArg({
+  arg,
+  onChange,
+  value,
+  autocompleteFunctions,
+  autocompleteVariables,
+  stateKey,
+}: {
+  arg: FormInputEditor;
+  value: string;
+  onChange: (v: string) => void;
+  autocompleteFunctions: boolean;
+  autocompleteVariables: boolean;
+  stateKey: string;
+}) {
+  const id = `input-${arg.name}`;
+
+  // Read-only editor force refresh for every defaultValue change
+  // Should this be built into the <Editor/> component?
+  const [popoutKey, regeneratePopoutKey] = useRandomKey();
+  const forceUpdateKey = popoutKey + (arg.readOnly ? arg.defaultValue + stateKey : stateKey);
+
+  return (
+    <div className="w-full grid grid-cols-1 grid-rows-[auto_minmax(0,1fr)]">
+      <Label
+        htmlFor={id}
+        required={!arg.optional}
+        visuallyHidden={arg.hideLabel}
+        help={arg.description}
+        tags={arg.language ? [capitalize(arg.language)] : undefined}
+      >
+        {arg.label}
+      </Label>
+      <div
+        className={classNames(
+          "border border-border rounded-md overflow-hidden px-2 py-1",
+          "focus-within:border-border-focus",
+          !arg.rows && "max-h-40", // So it doesn't take up too much space
+        )}
+        style={arg.rows ? { height: `${arg.rows * 1.4 + 0.75}rem` } : undefined}
+      >
+        <Editor
+          id={id}
+          autocomplete={arg.completionOptions ? { options: arg.completionOptions } : undefined}
+          disabled={arg.disabled}
+          language={arg.language}
+          readOnly={arg.readOnly}
+          onChange={onChange}
+          hideGutter
+          heightMode="auto"
+          className="min-h-12"
+          defaultValue={value === DYNAMIC_FORM_NULL_ARG ? arg.defaultValue : value}
+          placeholder={arg.placeholder ?? undefined}
+          autocompleteFunctions={autocompleteFunctions}
+          autocompleteVariables={autocompleteVariables}
+          stateKey={stateKey}
+          forceUpdateKey={forceUpdateKey}
+          actions={
+            <div>
+              <IconButton
+                variant="border"
+                size="sm"
+                className="my-0.5 opacity-60 group-hover:opacity-100"
+                icon="expand"
+                title="Pop out to large editor"
+                onClick={() => {
+                  showDialog({
+                    id: "id",
+                    size: "full",
+                    title: arg.readOnly ? "View Value" : "Edit Value",
+                    className: "max-w-200! max-h-240!",
+                    description: arg.label && (
+                      <Label
+                        htmlFor={id}
+                        required={!arg.optional}
+                        visuallyHidden={arg.hideLabel}
+                        help={arg.description}
+                        tags={arg.language ? [capitalize(arg.language)] : undefined}
+                      >
+                        {arg.label}
+                      </Label>
+                    ),
+                    onClose() {
+                      // Force the main editor to update on close
+                      regeneratePopoutKey();
+                    },
+                    render() {
+                      return (
+                        <Editor
+                          id={id}
+                          autocomplete={
+                            arg.completionOptions ? { options: arg.completionOptions } : undefined
+                          }
+                          disabled={arg.disabled}
+                          language={arg.language}
+                          readOnly={arg.readOnly}
+                          onChange={onChange}
+                          defaultValue={value === DYNAMIC_FORM_NULL_ARG ? arg.defaultValue : value}
+                          placeholder={arg.placeholder ?? undefined}
+                          autocompleteFunctions={autocompleteFunctions}
+                          autocompleteVariables={autocompleteVariables}
+                          stateKey={stateKey}
+                          forceUpdateKey={forceUpdateKey}
+                        />
+                      );
+                    },
+                  });
+                }}
+              />
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+function SelectArg({
+  arg,
+  value,
+  onChange,
+}: {
+  arg: FormInputSelect;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <Select
+      label={arg.label ?? arg.name}
+      name={arg.name}
+      help={arg.description}
+      onChange={onChange}
+      defaultValue={arg.defaultValue}
+      hideLabel={arg.hideLabel}
+      value={value}
+      size={INPUT_SIZE}
+      disabled={arg.disabled}
+      options={arg.options}
+    />
+  );
+}
+
+function FileArg({
+  arg,
+  filePath,
+  onChange,
+}: {
+  arg: FormInputFile;
+  filePath: string;
+  onChange: (v: string | null) => void;
+}) {
+  return (
+    <SelectFile
+      disabled={arg.disabled}
+      help={arg.description}
+      onChange={({ filePath }) => onChange(filePath)}
+      filePath={filePath === DYNAMIC_FORM_NULL_ARG ? null : filePath}
+      directory={!!arg.directory}
+    />
+  );
+}
+
+function HttpRequestArg({
+  arg,
+  value,
+  onChange,
+}: {
+  arg: FormInputHttpRequest;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const folders = useAtomValue(foldersAtom);
+  const httpRequests = useAtomValue(httpRequestsAtom);
+  const activeHttpRequest = useActiveRequest("http_request");
+
+  useEffect(() => {
+    if (value === DYNAMIC_FORM_NULL_ARG && activeHttpRequest) {
+      onChange(activeHttpRequest.id);
+    }
+  }, [activeHttpRequest, onChange, value]);
+
+  return (
+    <Select
+      label={arg.label ?? arg.name}
+      name={arg.name}
+      onChange={onChange}
+      help={arg.description}
+      value={value}
+      disabled={arg.disabled}
+      options={httpRequests.map((r) => {
+        return {
+          label:
+            buildRequestBreadcrumbs(r, folders).join(" / ") +
+            (r.id === activeHttpRequest?.id ? " (current)" : ""),
+          value: r.id,
+        };
+      })}
+    />
+  );
+}
+
+function buildRequestBreadcrumbs(request: HttpRequest, folders: Folder[]): string[] {
+  const ancestors: (HttpRequest | Folder)[] = [request];
+
+  const next = () => {
+    const latest = ancestors[0];
+    if (latest == null) return [];
+
+    const parent = folders.find((f) => f.id === latest.folderId);
+    if (parent == null) return;
+
+    ancestors.unshift(parent);
+    next();
+  };
+  next();
+
+  return ancestors.map((a) => (a.model === "folder" ? a.name : resolvedModelName(a)));
+}
+
+function CheckboxArg({
+  arg,
+  onChange,
+  value,
+}: {
+  arg: FormInputCheckbox;
+  value: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <Checkbox
+      onChange={onChange}
+      checked={value}
+      help={arg.description}
+      disabled={arg.disabled}
+      title={arg.label ?? arg.name}
+      hideLabel={arg.label == null}
+    />
+  );
+}
+
+function KeyValueArg({
+  arg,
+  onChange,
+  value,
+  stateKey,
+}: {
+  arg: FormInputKeyValue;
+  value: string;
+  onChange: (v: string) => void;
+  stateKey: string;
+}) {
+  const pairs: Pair[] = useMemo(() => {
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }, [value]);
+
+  const handleChange = useCallback(
+    (newPairs: Pair[]) => {
+      onChange(JSON.stringify(newPairs));
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="w-full grid grid-cols-1 grid-rows-[auto_minmax(0,1fr)] overflow-hidden">
+      <Label
+        htmlFor={`input-${arg.name}`}
+        required={!arg.optional}
+        visuallyHidden={arg.hideLabel}
+        help={arg.description}
+      >
+        {arg.label ?? arg.name}
+      </Label>
+      <PairEditor
+        pairs={pairs}
+        onChange={handleChange}
+        stateKey={stateKey}
+        namePlaceholder="name"
+        valuePlaceholder="value"
+        noScroll
+      />
+    </div>
+  );
+}
+
+function hasVisibleInputs(inputs: FormInput[] | undefined): boolean {
+  if (!inputs) return false;
+
+  for (const input of inputs) {
+    if ("inputs" in input && !hasVisibleInputs(input.inputs)) {
+      // Has children, but none are visible
+      return false;
+    }
+    if (!input.hidden) {
+      return true;
+    }
+  }
+
+  return false;
+}
diff --git a/apps/yaak-client/components/EmptyStateText.tsx b/apps/yaak-client/components/EmptyStateText.tsx
new file mode 100644
index 0000000..30f75bb
--- /dev/null
+++ b/apps/yaak-client/components/EmptyStateText.tsx
@@ -0,0 +1,24 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+}
+
+export function EmptyStateText({ children, className, wrapperClassName }: Props) {
+  return (
+    <div className={classNames("w-full h-full pb-2", wrapperClassName)}>
+      <div
+        className={classNames(
+          className,
+          "rounded-lg border border-dashed border-border-subtle",
+          "h-full py-2 text-text-subtlest flex items-center justify-center italic",
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/EncryptionHelp.tsx b/apps/yaak-client/components/EncryptionHelp.tsx
new file mode 100644
index 0000000..96985ab
--- /dev/null
+++ b/apps/yaak-client/components/EncryptionHelp.tsx
@@ -0,0 +1,13 @@
+import { VStack } from "@yaakapp-internal/ui";
+
+export function EncryptionHelp() {
+  return (
+    <VStack space={3}>
+      <p>Encrypt passwords, tokens, and other sensitive info when encryption is enabled.</p>
+      <p>
+        Encrypted data remains secure when syncing to the filesystem or Git, and when exporting or
+        sharing with others.
+      </p>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/EnvironmentActionsDropdown.tsx b/apps/yaak-client/components/EnvironmentActionsDropdown.tsx
new file mode 100644
index 0000000..37e640e
--- /dev/null
+++ b/apps/yaak-client/components/EnvironmentActionsDropdown.tsx
@@ -0,0 +1,85 @@
+import classNames from "classnames";
+import { memo, useMemo } from "react";
+import { useActiveEnvironment } from "../hooks/useActiveEnvironment";
+import { useEnvironmentsBreakdown } from "../hooks/useEnvironmentsBreakdown";
+import { editEnvironment } from "../lib/editEnvironment";
+import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";
+import type { ButtonProps } from "./core/Button";
+import { Button } from "./core/Button";
+import type { DropdownItem } from "./core/Dropdown";
+import { Dropdown } from "./core/Dropdown";
+import { Icon } from "@yaakapp-internal/ui";
+import { EnvironmentColorIndicator } from "./EnvironmentColorIndicator";
+
+type Props = {
+  className?: string;
+} & Pick<ButtonProps, "forDropdown" | "leftSlot">;
+
+export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdown({
+  className,
+  ...buttonProps
+}: Props) {
+  const { subEnvironments, baseEnvironment } = useEnvironmentsBreakdown();
+  const activeEnvironment = useActiveEnvironment();
+
+  const items: DropdownItem[] = useMemo(
+    () => [
+      ...subEnvironments.map(
+        (e) => ({
+          key: e.id,
+          label: e.name,
+          rightSlot: <EnvironmentColorIndicator environment={e} />,
+          leftSlot: e.id === activeEnvironment?.id ? <Icon icon="check" /> : <Icon icon="empty" />,
+          onSelect: async () => {
+            if (e.id !== activeEnvironment?.id) {
+              setWorkspaceSearchParams({ environment_id: e.id });
+            } else {
+              setWorkspaceSearchParams({ environment_id: null });
+            }
+          },
+        }),
+        [activeEnvironment?.id],
+      ),
+      ...((subEnvironments.length > 0
+        ? [{ type: "separator", label: "Environments" }]
+        : []) as DropdownItem[]),
+      {
+        label: "Manage Environments",
+        hotKeyAction: "environment_editor.toggle",
+        leftSlot: <Icon icon="box" />,
+        onSelect: () => editEnvironment(activeEnvironment),
+      },
+    ],
+    [subEnvironments, activeEnvironment],
+  );
+
+  const hasBaseVars =
+    (baseEnvironment?.variables ?? []).filter((v) => v.enabled && (v.name || v.value)).length > 0;
+
+  return (
+    <Dropdown items={items}>
+      <Button
+        size="sm"
+        className={classNames(
+          className,
+          "text px-2! truncate",
+          !activeEnvironment && !hasBaseVars && "text-text-subtlest italic",
+        )}
+        // If no environments, the button simply opens the dialog.
+        // NOTE: We don't create a new button because we want to reuse the hotkey from the menu items
+        onClick={
+          subEnvironments.length === 0
+            ? (event) => {
+                event.preventDefault();
+                editEnvironment(null);
+              }
+            : undefined
+        }
+        {...buttonProps}
+      >
+        <EnvironmentColorIndicator environment={activeEnvironment ?? null} />
+        {activeEnvironment?.name ?? (hasBaseVars ? "Environment" : "No Environment")}
+      </Button>
+    </Dropdown>
+  );
+});
diff --git a/apps/yaak-client/components/EnvironmentColorIndicator.tsx b/apps/yaak-client/components/EnvironmentColorIndicator.tsx
new file mode 100644
index 0000000..082d19e
--- /dev/null
+++ b/apps/yaak-client/components/EnvironmentColorIndicator.tsx
@@ -0,0 +1,23 @@
+import type { Environment } from "@yaakapp-internal/models";
+import { showColorPicker } from "../lib/showColorPicker";
+import { ColorIndicator } from "./ColorIndicator";
+
+export function EnvironmentColorIndicator({
+  environment,
+  clickToEdit,
+  className,
+}: {
+  environment: Environment | null;
+  clickToEdit?: boolean;
+  className?: string;
+}) {
+  if (environment?.color == null) return null;
+
+  return (
+    <ColorIndicator
+      className={className}
+      color={environment?.color ?? null}
+      onClick={clickToEdit ? () => showColorPicker(environment) : undefined}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/EnvironmentColorPicker.tsx b/apps/yaak-client/components/EnvironmentColorPicker.tsx
new file mode 100644
index 0000000..2b5310c
--- /dev/null
+++ b/apps/yaak-client/components/EnvironmentColorPicker.tsx
@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { ColorIndicator } from "./ColorIndicator";
+import { Banner } from "@yaakapp-internal/ui";
+import { Button } from "./core/Button";
+import { ColorPickerWithThemeColors } from "./core/ColorPicker";
+
+export function EnvironmentColorPicker({
+  color: defaultColor,
+  onChange,
+}: {
+  color: string | null;
+  onChange: (color: string | null) => void;
+}) {
+  const [color, setColor] = useState<string | null>(defaultColor);
+  return (
+    <form
+      className="flex flex-col items-stretch gap-5 pb-2 w-full"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onChange(color);
+      }}
+    >
+      <Banner color="secondary">
+        This color will be used to color the interface when this environment is active
+      </Banner>
+      <ColorPickerWithThemeColors color={color} onChange={setColor} />
+      <Button type="submit" color="secondary">
+        {color != null && <ColorIndicator color={color} />}
+        Save
+      </Button>
+    </form>
+  );
+}
diff --git a/apps/yaak-client/components/EnvironmentEditDialog.tsx b/apps/yaak-client/components/EnvironmentEditDialog.tsx
new file mode 100644
index 0000000..aecf1d8
--- /dev/null
+++ b/apps/yaak-client/components/EnvironmentEditDialog.tsx
@@ -0,0 +1,444 @@
+import type { Environment, Workspace } from "@yaakapp-internal/models";
+import { duplicateModel, patchModel } from "@yaakapp-internal/models";
+import type { TreeHandle, TreeNode, TreeProps } from "@yaakapp-internal/ui";
+import { Banner, Icon, InlineCode, SplitLayout, Tree } from "@yaakapp-internal/ui";
+import { atom, useAtomValue } from "jotai";
+import { atomFamily } from "jotai-family";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { createSubEnvironmentAndActivate } from "../commands/createEnvironment";
+import { activeWorkspaceAtom, activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import {
+  environmentsBreakdownAtom,
+  useEnvironmentsBreakdown,
+} from "../hooks/useEnvironmentsBreakdown";
+import { useHotKey } from "../hooks/useHotKey";
+import { atomWithKVStorage } from "../lib/atoms/atomWithKVStorage";
+import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
+import { fireAndForget } from "../lib/fireAndForget";
+import { jotaiStore } from "../lib/jotai";
+import { isBaseEnvironment, isSubEnvironment } from "../lib/model_util";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { showColorPicker } from "../lib/showColorPicker";
+import type { ContextMenuProps, DropdownItem } from "./core/Dropdown";
+import { ContextMenu } from "./core/Dropdown";
+import { IconButton } from "./core/IconButton";
+import { IconTooltip } from "./core/IconTooltip";
+import type { PairEditorHandle } from "./core/PairEditor";
+import { EnvironmentColorIndicator } from "./EnvironmentColorIndicator";
+import { EnvironmentEditor } from "./EnvironmentEditor";
+import { EnvironmentSharableTooltip } from "./EnvironmentSharableTooltip";
+
+const collapsedFamily = atomFamily((treeId: string) => {
+  const key = ["env_collapsed", treeId ?? "n/a"];
+  return atomWithKVStorage<Record<string, boolean>>(key, {});
+});
+
+interface Props {
+  initialEnvironmentId: string | null;
+  setRef?: (ref: PairEditorHandle | null) => void;
+}
+
+type TreeModel = Environment | Workspace;
+
+export function EnvironmentEditDialog({ initialEnvironmentId, setRef }: Props) {
+  const { allEnvironments, baseEnvironment, baseEnvironments } = useEnvironmentsBreakdown();
+  const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<string | null>(
+    initialEnvironmentId ?? null,
+  );
+
+  const selectedEnvironment =
+    selectedEnvironmentId != null
+      ? allEnvironments.find((e) => e.id === selectedEnvironmentId)
+      : baseEnvironment;
+
+  return (
+    <SplitLayout
+      storageKey="env_editor"
+      defaultRatio={0.75}
+      layout="horizontal"
+      className="gap-0"
+      resizeHandleClassName="-translate-x-px"
+      firstSlot={() => (
+        <EnvironmentEditDialogSidebar
+          selectedEnvironmentId={selectedEnvironment?.id ?? null}
+          setSelectedEnvironmentId={setSelectedEnvironmentId}
+        />
+      )}
+      secondSlot={() => (
+        <div className="grid grid-rows-[auto_minmax(0,1fr)]">
+          {baseEnvironments.length > 1 ? (
+            <div className="p-3">
+              <Banner color="notice">
+                There are multiple base environments for this workspace. Please delete the
+                environments you no longer need.
+              </Banner>
+            </div>
+          ) : (
+            <span />
+          )}
+          {selectedEnvironment == null ? (
+            <div className="p-3 mt-10">
+              <Banner color="danger">
+                Failed to find selected environment <InlineCode>{selectedEnvironmentId}</InlineCode>
+              </Banner>
+            </div>
+          ) : (
+            <EnvironmentEditor
+              key={selectedEnvironment.id}
+              setRef={setRef}
+              className="pl-4 pt-3"
+              environment={selectedEnvironment}
+            />
+          )}
+        </div>
+      )}
+    />
+  );
+}
+
+const sharableTooltip = (
+  <IconTooltip
+    tabIndex={-1}
+    icon="eye"
+    iconSize="sm"
+    content="This environment will be included in Directory Sync and data exports"
+  />
+);
+
+function EnvironmentEditDialogSidebar({
+  selectedEnvironmentId,
+  setSelectedEnvironmentId,
+}: {
+  selectedEnvironmentId: string | null;
+  setSelectedEnvironmentId: (id: string | null) => void;
+}) {
+  const activeWorkspaceId = useAtomValue(activeWorkspaceIdAtom) ?? "";
+  const treeId = `environment.${activeWorkspaceId}.sidebar`;
+  const treeRef = useRef<TreeHandle>(null);
+  const { baseEnvironment, baseEnvironments } = useEnvironmentsBreakdown();
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- none
+  useLayoutEffect(() => {
+    if (selectedEnvironmentId == null) return;
+    treeRef.current?.selectItem(selectedEnvironmentId);
+    treeRef.current?.focus();
+  }, []);
+
+  const handleDeleteEnvironment = useCallback(
+    async (environment: Environment) => {
+      await deleteModelWithConfirm(environment);
+      if (selectedEnvironmentId === environment.id) {
+        setSelectedEnvironmentId(baseEnvironment?.id ?? null);
+      }
+    },
+    [baseEnvironment?.id, selectedEnvironmentId, setSelectedEnvironmentId],
+  );
+
+  const treeHasFocus = useCallback(() => treeRef.current?.hasFocus() ?? false, []);
+
+  const getSelectedTreeModels = useCallback(
+    () => treeRef.current?.getSelectedItems() as TreeModel[] | undefined,
+    [],
+  );
+
+  const handleRenameSelected = useCallback(() => {
+    const items = getSelectedTreeModels();
+    if (items?.length === 1 && items[0] != null) {
+      treeRef.current?.renameItem(items[0].id);
+    }
+  }, [getSelectedTreeModels]);
+
+  const handleDeleteSelected = useCallback(
+    (items: TreeModel[]) => deleteModelWithConfirm(items),
+    [],
+  );
+
+  const handleDuplicateSelected = useCallback(
+    async (items: TreeModel[]) => {
+      if (items.length === 1 && items[0]) {
+        const newId = await duplicateModel(items[0]);
+        setSelectedEnvironmentId(newId);
+      } else {
+        await Promise.all(items.map(duplicateModel));
+      }
+    },
+    [setSelectedEnvironmentId],
+  );
+
+  useHotKey("sidebar.selected.rename", handleRenameSelected, {
+    enable: treeHasFocus,
+    allowDefault: true,
+    priority: 100,
+  });
+  useHotKey(
+    "sidebar.selected.delete",
+    useCallback(() => {
+      const items = getSelectedTreeModels();
+      if (items) {
+        fireAndForget(handleDeleteSelected(items));
+      }
+    }, [getSelectedTreeModels, handleDeleteSelected]),
+    { enable: treeHasFocus, priority: 100 },
+  );
+  useHotKey(
+    "sidebar.selected.duplicate",
+    useCallback(async () => {
+      const items = getSelectedTreeModels();
+      if (items) await handleDuplicateSelected(items);
+    }, [getSelectedTreeModels, handleDuplicateSelected]),
+    { enable: treeHasFocus, priority: 100 },
+  );
+
+  const getContextMenu = useCallback(
+    (items: TreeModel[]): ContextMenuProps["items"] => {
+      const environment = items[0];
+      const addEnvironmentItem: DropdownItem = {
+        label: "Create Sub Environment",
+        leftSlot: <Icon icon="plus" />,
+        onSelect: async () => {
+          await createSubEnvironment();
+        },
+      };
+
+      if (environment == null || environment.model !== "environment") {
+        return [addEnvironmentItem];
+      }
+
+      const singleEnvironment = items.length === 1;
+      const canDeleteEnvironment =
+        isSubEnvironment(environment) ||
+        (isBaseEnvironment(environment) && baseEnvironments.length > 1);
+
+      const menuItems: DropdownItem[] = [
+        {
+          label: "Rename",
+          leftSlot: <Icon icon="pencil" />,
+          hidden: isBaseEnvironment(environment) || !singleEnvironment,
+          hotKeyAction: "sidebar.selected.rename",
+          hotKeyLabelOnly: true,
+          onSelect: () => {
+            // Not sure why this is needed, but without it the
+            // edit input blurs immediately after opening.
+            requestAnimationFrame(() => handleRenameSelected());
+          },
+        },
+        {
+          label: "Duplicate",
+          leftSlot: <Icon icon="copy" />,
+          hidden: isBaseEnvironment(environment),
+          hotKeyAction: "sidebar.selected.duplicate",
+          hotKeyLabelOnly: true,
+          onSelect: () => handleDuplicateSelected(items),
+        },
+        {
+          label: environment.color ? "Change Color" : "Assign Color",
+          leftSlot: <Icon icon="palette" />,
+          hidden: isBaseEnvironment(environment) || !singleEnvironment,
+          onSelect: async () => showColorPicker(environment),
+        },
+        {
+          label: `Make ${environment.public ? "Private" : "Sharable"}`,
+          leftSlot: <Icon icon={environment.public ? "eye_closed" : "eye"} />,
+          rightSlot: <EnvironmentSharableTooltip />,
+          hidden: items.length > 1,
+          onSelect: async () => {
+            await patchModel(environment, { public: !environment.public });
+          },
+        },
+        {
+          color: "danger",
+          label: "Delete",
+          hotKeyAction: "sidebar.selected.delete",
+          hotKeyLabelOnly: true,
+          hidden: !canDeleteEnvironment,
+          leftSlot: <Icon icon="trash" />,
+          onSelect: () => handleDeleteEnvironment(environment),
+        },
+      ];
+
+      // Add sub environment to base environment
+      if (isBaseEnvironment(environment) && singleEnvironment) {
+        menuItems.push({ type: "separator" });
+        menuItems.push(addEnvironmentItem);
+      }
+
+      return menuItems;
+    },
+    [
+      baseEnvironments.length,
+      handleDeleteEnvironment,
+      handleDuplicateSelected,
+      handleRenameSelected,
+    ],
+  );
+
+  const handleDragEnd = useCallback(async function handleDragEnd({
+    items,
+    children,
+    insertAt,
+  }: {
+    items: TreeModel[];
+    children: TreeModel[];
+    insertAt: number;
+  }) {
+    const prev = children[insertAt - 1] as Exclude<TreeModel, Workspace>;
+    const next = children[insertAt] as Exclude<TreeModel, Workspace>;
+
+    const beforePriority = prev?.sortPriority ?? 0;
+    const afterPriority = next?.sortPriority ?? 0;
+    const shouldUpdateAll = afterPriority - beforePriority < 1;
+
+    try {
+      if (shouldUpdateAll) {
+        // Add items to children at insertAt
+        children.splice(insertAt, 0, ...items);
+        await Promise.all(children.map((m, i) => patchModel(m, { sortPriority: i * 1000 })));
+      } else {
+        const range = afterPriority - beforePriority;
+        const increment = range / (items.length + 2);
+        await Promise.all(
+          items.map((m, i) => {
+            const sortPriority = beforePriority + (i + 1) * increment;
+            // Spread item sortPriority out over before/after range
+            return patchModel(m, { sortPriority });
+          }),
+        );
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  const handleActivate = useCallback(
+    (item: TreeModel) => {
+      setSelectedEnvironmentId(item.id);
+    },
+    [setSelectedEnvironmentId],
+  );
+
+  const renderContextMenuFn = useCallback<NonNullable<TreeProps<TreeModel>["renderContextMenu"]>>(
+    ({ items, position, onClose }) => (
+      <ContextMenu items={items as DropdownItem[]} triggerPosition={position} onClose={onClose} />
+    ),
+    [],
+  );
+
+  const tree = useAtomValue(treeAtom);
+  return (
+    <aside className="x-theme-sidebar h-full w-full min-w-0 grid overflow-y-auto border-r border-border-subtle ">
+      {tree != null && (
+        <div className="pt-2">
+          <Tree
+            ref={treeRef}
+            treeId={treeId}
+            collapsedAtom={collapsedFamily(treeId)}
+            className="px-2 pb-10"
+            root={tree}
+            getContextMenu={getContextMenu}
+            renderContextMenu={renderContextMenuFn}
+            onDragEnd={handleDragEnd}
+            getItemKey={(i) => `${i.id}::${i.name}`}
+            ItemLeftSlotInner={ItemLeftSlotInner}
+            ItemRightSlot={ItemRightSlot}
+            ItemInner={ItemInner}
+            onActivate={handleActivate}
+            getEditOptions={getEditOptions}
+          />
+        </div>
+      )}
+    </aside>
+  );
+}
+
+const treeAtom = atom<TreeNode<TreeModel> | null>((get) => {
+  const activeWorkspace = get(activeWorkspaceAtom);
+  const { baseEnvironment, baseEnvironments, subEnvironments } = get(environmentsBreakdownAtom);
+  if (activeWorkspace == null || baseEnvironment == null) return null;
+
+  const root: TreeNode<TreeModel> = {
+    item: activeWorkspace,
+    parent: null,
+    children: [],
+    depth: 0,
+  };
+
+  for (const item of baseEnvironments) {
+    root.children?.push({
+      item,
+      parent: root,
+      depth: 0,
+      draggable: false,
+    });
+  }
+
+  const parent = root.children?.[0];
+  if (baseEnvironments.length <= 1 && parent != null) {
+    parent.children = subEnvironments.map((item) => ({
+      item,
+      parent,
+      depth: 1,
+      localDrag: true,
+    }));
+  }
+
+  return root;
+});
+
+function ItemLeftSlotInner({ item }: { item: TreeModel }) {
+  const { baseEnvironments } = useEnvironmentsBreakdown();
+  return baseEnvironments.length > 1 ? (
+    <Icon icon="alert_triangle" color="notice" />
+  ) : (
+    item.model === "environment" && item.color && <EnvironmentColorIndicator environment={item} />
+  );
+}
+
+function ItemRightSlot({ item }: { item: TreeModel }) {
+  const { baseEnvironments } = useEnvironmentsBreakdown();
+  return (
+    <>
+      {item.model === "environment" && baseEnvironments.length <= 1 && isBaseEnvironment(item) && (
+        <IconButton
+          size="sm"
+          color="custom"
+          iconSize="sm"
+          icon="plus_circle"
+          className="opacity-50 hover:opacity-100"
+          title="Add Sub-Environment"
+          onClick={createSubEnvironment}
+        />
+      )}
+    </>
+  );
+}
+
+function ItemInner({ item }: { item: TreeModel }) {
+  return (
+    <div className="grid grid-cols-[auto_minmax(0,1fr)] w-full items-center">
+      {item.model === "environment" && item.public ? (
+        <div className="mr-2 flex items-center">{sharableTooltip}</div>
+      ) : (
+        <span aria-hidden />
+      )}
+      <div className="truncate min-w-0 text-left">{resolvedModelName(item)}</div>
+    </div>
+  );
+}
+
+async function createSubEnvironment() {
+  const { baseEnvironment } = jotaiStore.get(environmentsBreakdownAtom);
+  if (baseEnvironment == null) return;
+  const id = await createSubEnvironmentAndActivate.mutateAsync(baseEnvironment);
+  return id;
+}
+
+function getEditOptions(item: TreeModel) {
+  const options: ReturnType<NonNullable<TreeProps<TreeModel>["getEditOptions"]>> = {
+    defaultValue: item.name,
+    placeholder: "Name",
+    async onChange(item, name) {
+      await patchModel(item, { name });
+    },
+  };
+  return options;
+}
diff --git a/apps/yaak-client/components/EnvironmentEditor.tsx b/apps/yaak-client/components/EnvironmentEditor.tsx
new file mode 100644
index 0000000..d22a989
--- /dev/null
+++ b/apps/yaak-client/components/EnvironmentEditor.tsx
@@ -0,0 +1,175 @@
+import type { Environment } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import { Heading } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useCallback, useMemo } from "react";
+import { useEnvironmentsBreakdown } from "../hooks/useEnvironmentsBreakdown";
+import { useIsEncryptionEnabled } from "../hooks/useIsEncryptionEnabled";
+import { useKeyValue } from "../hooks/useKeyValue";
+import { useRandomKey } from "../hooks/useRandomKey";
+import { analyzeTemplate, convertTemplateToSecure } from "../lib/encryption";
+import { isBaseEnvironment } from "../lib/model_util";
+import {
+  setupOrConfigureEncryption,
+  withEncryptionEnabled,
+} from "../lib/setupOrConfigureEncryption";
+import { DismissibleBanner } from "./core/DismissibleBanner";
+import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
+import type { PairEditorHandle, PairWithId } from "./core/PairEditor";
+import { ensurePairId } from "./core/PairEditor.util";
+import { PairOrBulkEditor } from "./core/PairOrBulkEditor";
+import { PillButton } from "./core/PillButton";
+import { EnvironmentColorIndicator } from "./EnvironmentColorIndicator";
+import { EnvironmentSharableTooltip } from "./EnvironmentSharableTooltip";
+
+interface Props {
+  environment: Environment;
+  hideName?: boolean;
+  className?: string;
+  setRef?: (n: PairEditorHandle | null) => void;
+}
+
+export function EnvironmentEditor({ environment, hideName, className, setRef }: Props) {
+  const workspaceId = environment.workspaceId;
+  const isEncryptionEnabled = useIsEncryptionEnabled();
+  const valueVisibility = useKeyValue<boolean>({
+    namespace: "global",
+    key: ["environmentValueVisibility", workspaceId],
+    fallback: false,
+  });
+  const { allEnvironments } = useEnvironmentsBreakdown();
+  const handleChange = useCallback(
+    (variables: PairWithId[]) => patchModel(environment, { variables }),
+    [environment],
+  );
+  const [forceUpdateKey, regenerateForceUpdateKey] = useRandomKey();
+
+  // Gather a list of env names from other environments to help the user get them aligned
+  const nameAutocomplete = useMemo<GenericCompletionConfig>(() => {
+    const options: GenericCompletionOption[] = [];
+    if (isBaseEnvironment(environment)) {
+      return { options };
+    }
+
+    const allVariables = allEnvironments.flatMap((e) => e?.variables);
+    const allVariableNames = new Set(allVariables.map((v) => v?.name));
+    for (const name of allVariableNames) {
+      const containingEnvs = allEnvironments.filter((e) =>
+        e.variables.some((v) => v.name === name),
+      );
+      const isAlreadyInActive = containingEnvs.find((e) => e.id === environment.id);
+      if (isAlreadyInActive) {
+        continue;
+      }
+      options.push({
+        label: name,
+        type: "constant",
+        detail: containingEnvs.map((e) => e.name).join(", "),
+      });
+    }
+    return { options };
+  }, [environment, allEnvironments]);
+
+  const validateName = useCallback((name: string) => {
+    // Empty just means the variable doesn't have a name yet and is unusable
+    if (name === "") return true;
+    return name.match(/^[a-z_][a-z0-9_.-]*$/i) != null;
+  }, []);
+
+  const valueType = !isEncryptionEnabled && valueVisibility.value ? "text" : "password";
+  const allVariableAreEncrypted = useMemo(
+    () =>
+      environment.variables.every((v) => v.value === "" || analyzeTemplate(v.value) !== "insecure"),
+    [environment.variables],
+  );
+
+  const encryptEnvironment = (environment: Environment) => {
+    withEncryptionEnabled(async () => {
+      const encryptedVariables: PairWithId[] = [];
+      for (const variable of environment.variables) {
+        const value = variable.value ? await convertTemplateToSecure(variable.value) : "";
+        encryptedVariables.push(ensurePairId({ ...variable, value }));
+      }
+      await handleChange(encryptedVariables);
+      regenerateForceUpdateKey();
+    });
+  };
+
+  return (
+    <div
+      className={classNames(
+        className,
+        "h-full grid grid-rows-[auto_minmax(0,1fr)] gap-2 pr-3 pb-3",
+      )}
+    >
+      <div className="flex flex-col gap-4">
+        <Heading className="w-full flex items-center gap-0.5">
+          <EnvironmentColorIndicator
+            className="mr-2"
+            clickToEdit
+            environment={environment ?? null}
+          />
+          {!hideName && <div className="mr-2">{environment?.name}</div>}
+          {isEncryptionEnabled ? (
+            !allVariableAreEncrypted ? (
+              <PillButton color="notice" onClick={() => encryptEnvironment(environment)}>
+                Encrypt All Variables
+              </PillButton>
+            ) : (
+              <PillButton color="secondary" onClick={setupOrConfigureEncryption}>
+                Encryption Settings
+              </PillButton>
+            )
+          ) : (
+            <PillButton color="secondary" onClick={() => valueVisibility.set((v) => !v)}>
+              {valueVisibility.value ? "Hide Values" : "Show Values"}
+            </PillButton>
+          )}
+          <PillButton
+            color="secondary"
+            rightSlot={<EnvironmentSharableTooltip />}
+            onClick={async () => {
+              await patchModel(environment, { public: !environment.public });
+            }}
+          >
+            {environment.public ? "Sharable" : "Private"}
+          </PillButton>
+        </Heading>
+        {environment.public && (!isEncryptionEnabled || !allVariableAreEncrypted) && (
+          <DismissibleBanner
+            id={`warn-unencrypted-${environment.id}`}
+            color="notice"
+            className="mr-3"
+            actions={[
+              {
+                label: "Encrypt Variables",
+                onClick: () => encryptEnvironment(environment),
+                color: "success",
+              },
+            ]}
+          >
+            This sharable environment contains plain-text secrets
+          </DismissibleBanner>
+        )}
+      </div>
+      <PairOrBulkEditor
+        setRef={setRef}
+        className="h-full"
+        allowMultilineValues
+        preferenceName="environment"
+        nameAutocomplete={nameAutocomplete}
+        namePlaceholder="VAR_NAME"
+        nameValidate={validateName}
+        valueType={valueType}
+        valueAutocompleteVariables="environment"
+        valueAutocompleteFunctions
+        forceUpdateKey={`${environment.id}::${forceUpdateKey}`}
+        pairs={environment.variables}
+        onChange={handleChange}
+        stateKey={`environment.${environment.id}`}
+        forcedEnvironmentId={environment.id}
+      />
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/EnvironmentSharableTooltip.tsx b/apps/yaak-client/components/EnvironmentSharableTooltip.tsx
new file mode 100644
index 0000000..642d76e
--- /dev/null
+++ b/apps/yaak-client/components/EnvironmentSharableTooltip.tsx
@@ -0,0 +1,7 @@
+import { IconTooltip } from "./core/IconTooltip";
+
+export function EnvironmentSharableTooltip() {
+  return (
+    <IconTooltip content="Sharable environments are included in Directory Sync and data export." />
+  );
+}
diff --git a/apps/yaak-client/components/ErrorBoundary.tsx b/apps/yaak-client/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..a764bfe
--- /dev/null
+++ b/apps/yaak-client/components/ErrorBoundary.tsx
@@ -0,0 +1,66 @@
+import { Banner, Button, InlineCode } from "@yaakapp-internal/ui";
+import type { ErrorInfo, ReactNode } from "react";
+import { Component, useEffect } from "react";
+import { showDialog } from "../lib/dialog";
+import RouteError from "./RouteError";
+
+interface ErrorBoundaryProps {
+  name: string;
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.warn("Error caught by ErrorBoundary:", error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Banner color="danger" className="flex items-center gap-2 overflow-auto">
+          <div>
+            Error rendering <InlineCode>{this.props.name}</InlineCode> component
+          </div>
+          <Button
+            className="inline-flex"
+            variant="border"
+            color="danger"
+            size="2xs"
+            onClick={() => {
+              showDialog({
+                id: "error-boundary",
+                render: () => <RouteError error={this.state.error} />,
+              });
+            }}
+          >
+            Show
+          </Button>
+        </Banner>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export function ErrorBoundaryTestThrow() {
+  useEffect(() => {
+    throw new Error("test error");
+  });
+
+  return <div>Hello</div>;
+}
diff --git a/apps/yaak-client/components/ExportDataDialog.tsx b/apps/yaak-client/components/ExportDataDialog.tsx
new file mode 100644
index 0000000..11f4bd2
--- /dev/null
+++ b/apps/yaak-client/components/ExportDataDialog.tsx
@@ -0,0 +1,169 @@
+import type { Workspace } from "@yaakapp-internal/models";
+import { workspacesAtom } from "@yaakapp-internal/models";
+import { HStack, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useCallback, useMemo, useState } from "react";
+import slugify from "slugify";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { pluralizeCount } from "../lib/pluralize";
+import { rpc } from "../lib/rpc";
+import { CommercialUseBanner } from "./CommercialUseBanner";
+import { Button } from "./core/Button";
+import { Checkbox } from "./core/Checkbox";
+import { DetailsBanner } from "./core/DetailsBanner";
+import { Link } from "./core/Link";
+import { platform } from "@yaakapp-internal/platform";
+
+interface Props {
+  onHide: () => void;
+  onSuccess: (path: string) => void;
+}
+
+export function ExportDataDialog({ onHide, onSuccess }: Props) {
+  const allWorkspaces = useAtomValue(workspacesAtom);
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  if (activeWorkspace == null || allWorkspaces.length === 0) return null;
+
+  return (
+    <ExportDataDialogContent
+      onHide={onHide}
+      onSuccess={onSuccess}
+      allWorkspaces={allWorkspaces}
+      activeWorkspace={activeWorkspace}
+    />
+  );
+}
+
+function ExportDataDialogContent({
+  onHide,
+  onSuccess,
+  activeWorkspace,
+  allWorkspaces,
+}: Props & {
+  allWorkspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) {
+  const [includePrivateEnvironments, setIncludePrivateEnvironments] = useState<boolean>(false);
+  const [selectedWorkspaces, setSelectedWorkspaces] = useState<Record<string, boolean>>({
+    [activeWorkspace.id]: true,
+  });
+
+  // Put the active workspace first
+  const workspaces = useMemo(
+    () => [activeWorkspace, ...allWorkspaces.filter((w) => w.id !== activeWorkspace.id)],
+    [activeWorkspace, allWorkspaces],
+  );
+
+  const handleToggleAll = () => {
+    setSelectedWorkspaces(
+      // oxlint-disable-next-line no-accumulating-spread
+      allSelected ? {} : workspaces.reduce((acc, w) => ({ ...acc, [w.id]: true }), {}),
+    );
+  };
+
+  const handleExport = useCallback(async () => {
+    const ids = Object.keys(selectedWorkspaces).filter((k) => selectedWorkspaces[k]);
+    const workspace = ids.length === 1 ? workspaces.find((w) => w.id === ids[0]) : undefined;
+    const slug = workspace ? slugify(workspace.name, { lower: true }) : "workspaces";
+    const document = await rpc<string>("cmd_export_data", {
+      workspaceIds: ids,
+      includePrivateEnvironments: includePrivateEnvironments,
+    });
+
+    const savedTo = await platform.files.save(
+      `yaak.${slug}.json`,
+      new TextEncoder().encode(document),
+      [{ name: "JSON", extensions: ["json"] }],
+    );
+    if (savedTo == null) {
+      return; // Cancelled
+    }
+
+    onHide();
+    onSuccess(savedTo);
+  }, [includePrivateEnvironments, onHide, onSuccess, selectedWorkspaces, workspaces]);
+
+  const allSelected = workspaces.every((w) => selectedWorkspaces[w.id]);
+  const numSelected = Object.values(selectedWorkspaces).filter(Boolean).length;
+  const noneSelected = numSelected === 0;
+  return (
+    <div className="h-full w-full grid grid-rows-[minmax(0,1fr)_auto] overflow-hidden rounded-b-lg">
+      <VStack space={3} className="overflow-auto px-5 pb-6">
+        <CommercialUseBanner source="data-export" title="Exporting work data?" />
+
+        <table className="w-full mb-auto min-w-full max-w-full divide-y divide-surface-highlight">
+          <thead>
+            <tr>
+              <th className="w-6 min-w-0 py-2 text-left pl-1">
+                <Checkbox
+                  checked={!allSelected && !noneSelected ? "indeterminate" : allSelected}
+                  hideLabel
+                  title="All workspaces"
+                  onChange={handleToggleAll}
+                />
+              </th>
+              <th className="py-2 text-left pl-4" onClick={handleToggleAll}>
+                Workspace
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-surface-highlight">
+            {workspaces.map((w) => (
+              <tr key={w.id}>
+                <td className="min-w-0 py-1 pl-1">
+                  <Checkbox
+                    checked={selectedWorkspaces[w.id] ?? false}
+                    title={w.name}
+                    hideLabel
+                    onChange={() =>
+                      setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }))
+                    }
+                  />
+                </td>
+                <td
+                  className="py-1 pl-4 text whitespace-nowrap overflow-x-auto hide-scrollbars"
+                  onClick={() =>
+                    setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }))
+                  }
+                >
+                  {w.name} {w.id === activeWorkspace.id ? "(current workspace)" : ""}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <DetailsBanner color="secondary" defaultOpen summary="Extra Settings">
+          <Checkbox
+            checked={includePrivateEnvironments}
+            onChange={setIncludePrivateEnvironments}
+            title="Include private environments"
+            help='Environments marked as "sharable" will be exported by default'
+          />
+        </DetailsBanner>
+      </VStack>
+      <footer className="px-5 grid grid-cols-[1fr_auto] items-center bg-surface py-3 border-t border-border-subtle">
+        <div>
+          <Link href="https://yaak.app/button/new" noUnderline className="text-text-subtlest">
+            Create Run Button
+          </Link>
+        </div>
+        <HStack space={2} justifyContent="end">
+          <Button size="sm" className="focus" variant="border" onClick={onHide}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            type="submit"
+            className="focus"
+            color="primary"
+            disabled={noneSelected}
+            onClick={() => handleExport()}
+          >
+            Export{" "}
+            {pluralizeCount("Workspace", numSelected, { omitSingle: true, noneWord: "Nothing" })}
+          </Button>
+        </HStack>
+      </footer>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/FeedbackToast.tsx b/apps/yaak-client/components/FeedbackToast.tsx
new file mode 100644
index 0000000..bdd770c
--- /dev/null
+++ b/apps/yaak-client/components/FeedbackToast.tsx
@@ -0,0 +1,76 @@
+import { HStack, VStack } from "@yaakapp-internal/ui";
+import { useRef, useState } from "react";
+import type { FeedbackFeature } from "../lib/featureFeedbackConstants";
+import { FEEDBACK_FEATURES } from "../lib/featureFeedbackConstants";
+import { rpc } from "../lib/rpc";
+import { hideToastById, showToast } from "../lib/toast";
+import { Button } from "./core/Button";
+import { Input } from "./core/Input";
+
+interface Props {
+  feature: FeedbackFeature;
+  onDone: () => void;
+}
+
+export function FeedbackToast({ feature, onDone }: Props) {
+  const [text, setText] = useState<string>("");
+  const [sent, setSent] = useState(false);
+  const sentRef = useRef(false);
+
+  const handleDismiss = () => {
+    onDone();
+    hideToastById(`feature-feedback-${feature}`);
+  };
+
+  const handleSend = () => {
+    const trimmedText = text.trim();
+    if (sentRef.current || trimmedText.length === 0) return;
+
+    sentRef.current = true;
+    setSent(true);
+    onDone();
+
+    // Fire-and-forget; failures are intentionally ignored
+    rpc("cmd_send_feedback", { feature, text: trimmedText }).catch(() => {});
+    showToast({
+      id: `feature-feedback-${feature}`,
+      timeout: 3000,
+      color: "success",
+      message: "Thanks for the feedback!",
+    });
+  };
+
+  return (
+    <VStack space={2}>
+      <p className="text-sm font-semibold">{FEEDBACK_FEATURES[feature]}</p>
+      <div className="h-20">
+        <Input
+          size="xs"
+          // The editor forces its mono font on the scroller, so the override
+          // has to target it directly
+          className="[&_.cm-scroller]:font-sans! [&_.cm-scroller]:text-sm!"
+          label="Feedback"
+          hideLabel
+          stateKey={null}
+          multiLine
+          fullHeight
+          placeholder="Your thoughts..."
+          onChange={setText}
+        />
+      </div>
+      <HStack space={1.5} justifyContent="end">
+        <Button size="xs" color="secondary" variant="border" onClick={handleDismiss}>
+          Dismiss
+        </Button>
+        <Button
+          size="xs"
+          color="primary"
+          disabled={sent || text.trim().length === 0}
+          onClick={handleSend}
+        >
+          Send
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/FolderLayout.tsx b/apps/yaak-client/components/FolderLayout.tsx
new file mode 100644
index 0000000..a693080
--- /dev/null
+++ b/apps/yaak-client/components/FolderLayout.tsx
@@ -0,0 +1,212 @@
+import type { Folder, GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import { foldersAtom } from "@yaakapp-internal/models";
+import { Heading, HStack, Icon, LoadingIcon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { CSSProperties, ReactNode } from "react";
+import { useCallback, useMemo } from "react";
+import { allRequestsAtom } from "../hooks/useAllRequests";
+import { useFolderActions } from "../hooks/useFolderActions";
+import { useLatestHttpResponse } from "../hooks/useLatestHttpResponse";
+import { sendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
+import { showDialog } from "../lib/dialog";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { router } from "../lib/router";
+import { Button } from "./core/Button";
+import { HttpResponseDurationTag } from "./core/HttpResponseDurationTag";
+import { HttpStatusTag } from "./core/HttpStatusTag";
+import { IconButton } from "./core/IconButton";
+import { Separator } from "./core/Separator";
+import { SizeTag } from "./core/SizeTag";
+import { HttpResponsePane } from "./HttpResponsePane";
+
+interface Props {
+  folder: Folder;
+  style: CSSProperties;
+}
+
+export function FolderLayout({ folder, style }: Props) {
+  const folders = useAtomValue(foldersAtom);
+  const requests = useAtomValue(allRequestsAtom);
+  const folderActions = useFolderActions();
+  const sendAllAction = useMemo(
+    () => folderActions.find((a) => a.label === "Send All"),
+    [folderActions],
+  );
+
+  const children = useMemo(() => {
+    return [
+      ...folders.filter((f) => f.folderId === folder.id),
+      ...requests.filter((r) => r.folderId === folder.id),
+    ];
+  }, [folder.id, folders, requests]);
+
+  const handleSendAll = useCallback(() => {
+    void sendAllAction?.call(folder);
+  }, [sendAllAction, folder]);
+
+  return (
+    <div style={style} className="p-6 pt-4 overflow-y-auto @container">
+      <HStack space={2} alignItems="center">
+        <Icon icon="folder" size="xl" color="secondary" />
+        <Heading level={1}>{resolvedModelName(folder)}</Heading>
+        <HStack className="ml-auto" alignItems="center">
+          <Button
+            rightSlot={<Icon icon="send_horizontal" />}
+            color="secondary"
+            size="sm"
+            variant="border"
+            onClick={handleSendAll}
+            disabled={sendAllAction == null}
+          >
+            Send All
+          </Button>
+        </HStack>
+      </HStack>
+      <Separator className="mt-3 mb-8" />
+      <div className="grid grid-cols-1 @lg:grid-cols-2 @4xl:grid-cols-3 gap-4 min-w-0">
+        {children.map((child) => (
+          <ChildCard key={child.id} child={child} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ChildCard({ child }: { child: Folder | HttpRequest | GrpcRequest | WebsocketRequest }) {
+  let card: ReactNode;
+  if (child.model === "folder") {
+    card = <FolderCard folder={child} />;
+  } else if (child.model === "http_request") {
+    card = <HttpRequestCard request={child} />;
+  } else if (child.model === "grpc_request") {
+    card = <RequestCard request={child} />;
+  } else if (child.model === "websocket_request") {
+    card = <RequestCard request={child} />;
+  } else {
+    card = <div>Unknown model</div>;
+  }
+
+  const navigate = useCallback(async () => {
+    await router.navigate({
+      to: "/workspaces/$workspaceId",
+      params: { workspaceId: child.workspaceId },
+      search: (prev) => ({ ...prev, request_id: child.id }),
+    });
+  }, [child.id, child.workspaceId]);
+
+  return (
+    <div
+      className={classNames(
+        "rounded-lg bg-surface-highlight p-3 pt-1 border border-border",
+        "flex flex-col gap-3",
+      )}
+    >
+      <HStack space={2}>
+        {child.model === "folder" && <Icon icon="folder" size="lg" />}
+        <Heading className="truncate" level={2}>
+          {resolvedModelName(child)}
+        </Heading>
+        <HStack space={0.5} className="ml-auto -mr-1.5">
+          <IconButton
+            color="custom"
+            title="Send Request"
+            size="sm"
+            icon="external_link"
+            className="opacity-70 hover:opacity-100"
+            onClick={navigate}
+          />
+          <IconButton
+            color="custom"
+            title="Send Request"
+            size="sm"
+            icon="send_horizontal"
+            className="opacity-70 hover:opacity-100"
+            onClick={() => {
+              sendAnyHttpRequest.mutate(child.id);
+            }}
+          />
+        </HStack>
+      </HStack>
+      <div className="text-text-subtle">{card}</div>
+    </div>
+  );
+}
+
+function FolderCard({ folder }: { folder: Folder }) {
+  return (
+    <div>
+      <Button
+        color="primary"
+        onClick={async () => {
+          await router.navigate({
+            to: "/workspaces/$workspaceId",
+            params: { workspaceId: folder.workspaceId },
+            search: (prev) => {
+              return { ...prev, request_id: null, folder_id: folder.id };
+            },
+          });
+        }}
+      >
+        Open
+      </Button>
+    </div>
+  );
+}
+
+function RequestCard({ request }: { request: HttpRequest | GrpcRequest | WebsocketRequest }) {
+  return <div>TODO {request.id}</div>;
+}
+
+function HttpRequestCard({ request }: { request: HttpRequest }) {
+  const latestResponse = useLatestHttpResponse(request.id);
+
+  return (
+    <div className="grid grid-rows-2 grid-cols-[minmax(0,1fr)] gap-2 overflow-hidden">
+      <code className="font-mono text-editor text-info border border-info rounded-sm px-2.5 py-0.5 truncate w-full min-w-0">
+        {request.method} {request.url}
+      </code>
+      {latestResponse ? (
+        <button
+          className="block mr-auto"
+          type="button"
+          tabIndex={-1}
+          onClick={(e) => {
+            e.stopPropagation();
+            showDialog({
+              id: "response-preview",
+              title: "Response Preview",
+              size: "md",
+              className: "h-full",
+              render: () => {
+                return <HttpResponsePane activeRequestId={request.id} />;
+              },
+            });
+          }}
+        >
+          <HStack
+            space={2}
+            alignItems="center"
+            className={classNames(
+              "cursor-default select-none",
+              "whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm hide-scrollbars",
+              "font-mono text-editor border rounded-sm px-1.5 py-0.5 truncate w-full",
+            )}
+          >
+            {latestResponse.state !== "closed" && <LoadingIcon size="sm" />}
+            <HttpStatusTag showReason response={latestResponse} />
+            <span>•</span>
+            <HttpResponseDurationTag response={latestResponse} />
+            <span>•</span>
+            <SizeTag
+              contentLength={latestResponse.contentLength ?? 0}
+              contentLengthCompressed={latestResponse.contentLength}
+            />
+          </HStack>
+        </button>
+      ) : (
+        <div>No Responses</div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/FolderSettingsDialog.tsx b/apps/yaak-client/components/FolderSettingsDialog.tsx
new file mode 100644
index 0000000..7b0a3e4
--- /dev/null
+++ b/apps/yaak-client/components/FolderSettingsDialog.tsx
@@ -0,0 +1,209 @@
+import { createWorkspaceModel, foldersAtom, patchModel } from "@yaakapp-internal/models";
+import { HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { Fragment, useMemo } from "react";
+import { useAuthTab } from "../hooks/useAuthTab";
+import { useEnvironmentsBreakdown } from "../hooks/useEnvironmentsBreakdown";
+import { useHeadersTab } from "../hooks/useHeadersTab";
+import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
+import { useModelAncestors } from "../hooks/useModelAncestors";
+import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
+import { hideDialog } from "../lib/dialog";
+import { CopyIconButton } from "./CopyIconButton";
+import { Button } from "./core/Button";
+import { CountBadge } from "./core/CountBadge";
+import { Input } from "./core/Input";
+import { Link } from "./core/Link";
+import type { TabItem } from "./core/Tabs/Tabs";
+import { TabContent, Tabs } from "./core/Tabs/Tabs";
+import { EmptyStateText } from "./EmptyStateText";
+import { EnvironmentEditor } from "./EnvironmentEditor";
+import { HeadersEditor } from "./HeadersEditor";
+import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
+
+interface Props {
+  folderId: string | null;
+  tab?: FolderSettingsTab;
+}
+
+const TAB_AUTH = "auth";
+const TAB_HEADERS = "headers";
+const TAB_SETTINGS = "settings";
+const TAB_VARIABLES = "variables";
+const TAB_GENERAL = "general";
+
+export type FolderSettingsTab =
+  | typeof TAB_AUTH
+  | typeof TAB_HEADERS
+  | typeof TAB_GENERAL
+  | typeof TAB_SETTINGS
+  | typeof TAB_VARIABLES;
+
+export function FolderSettingsDialog({ folderId, tab }: Props) {
+  const folders = useAtomValue(foldersAtom);
+  const folder = folders.find((f) => f.id === folderId) ?? null;
+  const ancestors = useModelAncestors(folder);
+  const breadcrumbs = useMemo(() => ancestors.toReversed(), [ancestors]);
+  const authTab = useAuthTab(TAB_AUTH, folder);
+  const headersTab = useHeadersTab(TAB_HEADERS, folder);
+  const inheritedHeaders = useInheritedHeaders(folder);
+  const environments = useEnvironmentsBreakdown();
+  const folderEnvironment = environments.allEnvironments.find(
+    (e) => e.parentModel === "folder" && e.parentId === folderId,
+  );
+  const numVars = (folderEnvironment?.variables ?? []).filter((v) => v.name).length;
+  const numSettingsOverrides = folder == null ? 0 : countOverriddenSettings(folder);
+
+  const tabs = useMemo<TabItem[]>(() => {
+    if (folder == null) return [];
+
+    return [
+      {
+        value: TAB_GENERAL,
+        label: "General",
+      },
+      {
+        value: TAB_SETTINGS,
+        label: "Settings",
+        rightSlot: <CountBadge count={numSettingsOverrides} />,
+      },
+      ...headersTab,
+      ...authTab,
+      {
+        value: TAB_VARIABLES,
+        label: "Variables",
+        rightSlot: numVars > 0 ? <CountBadge count={numVars} /> : null,
+      },
+    ];
+  }, [authTab, folder, headersTab, numSettingsOverrides, numVars]);
+
+  if (folder == null) return null;
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex items-center gap-3 px-6 pr-10 mt-4 mb-2 min-w-0 text-xl">
+        <Icon icon="folder_cog" size="lg" color="secondary" className="shrink-0" />
+        <div className="flex items-center gap-1.5 font-semibold text-text min-w-0 overflow-hidden flex-1">
+          {breadcrumbs.map((item, index) => (
+            <Fragment key={item.id}>
+              {index > 0 && (
+                <Icon icon="chevron_right" size="lg" className="opacity-50 shrink-0" />
+              )}
+              <span className="text-text-subtle truncate min-w-0" title={item.name}>
+                {item.name}
+              </span>
+            </Fragment>
+          ))}
+          {breadcrumbs.length > 0 && (
+            <Icon icon="chevron_right" size="lg" className="opacity-50 shrink-0" />
+          )}
+          <span className="whitespace-nowrap" title={folder.name}>
+            {folder.name}
+          </span>
+        </div>
+      </div>
+
+      <Tabs
+        defaultValue={tab ?? TAB_GENERAL}
+        label="Folder Settings"
+        className="pt-2 pb-2 pl-3 pr-1 flex-1"
+        layout="horizontal"
+        addBorders
+        tabs={tabs}
+      >
+        <TabContent value={TAB_AUTH} className="overflow-y-auto h-full px-4">
+          <HttpAuthenticationEditor model={folder} />
+        </TabContent>
+        <TabContent value={TAB_GENERAL} className="overflow-y-auto h-full px-4">
+          <div className="grid grid-rows-[auto_minmax(0,1fr)_auto] gap-3 pb-3 h-full">
+            <Input
+              label="Folder Name"
+              defaultValue={folder.name}
+              onChange={(name) => patchModel(folder, { name })}
+              stateKey={`name.${folder.id}`}
+            />
+            <MarkdownEditor
+              name="folder-description"
+              placeholder="Folder description"
+              className="border border-border px-2"
+              defaultValue={folder.description}
+              stateKey={`description.${folder.id}`}
+              onChange={(description) => patchModel(folder, { description })}
+            />
+            <HStack alignItems="center" justifyContent="between" className="w-full">
+              <Button
+                onClick={async () => {
+                  const didDelete = await deleteModelWithConfirm(folder);
+                  if (didDelete) {
+                    hideDialog("folder-settings");
+                  }
+                }}
+                color="danger"
+                variant="border"
+                size="xs"
+              >
+                Delete Folder
+              </Button>
+              <InlineCode className="flex gap-1 items-center text-primary pl-2.5">
+                {folder.id}
+                <CopyIconButton
+                  className="opacity-70 text-primary!"
+                  size="2xs"
+                  iconSize="sm"
+                  title="Copy folder ID"
+                  text={folder.id}
+                />
+              </InlineCode>
+            </HStack>
+          </div>
+        </TabContent>
+        <TabContent value={TAB_HEADERS} className="overflow-y-auto h-full px-4">
+          <HeadersEditor
+            inheritedHeaders={inheritedHeaders}
+            forceUpdateKey={folder.id}
+            headers={folder.headers}
+            onChange={(headers) => patchModel(folder, { headers })}
+            stateKey={`headers.${folder.id}`}
+          />
+        </TabContent>
+        <TabContent value={TAB_SETTINGS} className="overflow-y-auto h-full px-4">
+          <ModelSettingsEditor model={folder} />
+        </TabContent>
+        <TabContent value={TAB_VARIABLES} className="overflow-y-auto h-full px-4">
+          {folderEnvironment == null ? (
+            <EmptyStateText>
+              <VStack alignItems="center" space={1.5}>
+                <p>
+                  Override{" "}
+                  <Link href="https://yaak.app/docs/using-yaak/environments-and-variables">
+                    Variables
+                  </Link>{" "}
+                  for requests within this folder.
+                </p>
+                <Button
+                  variant="border"
+                  size="sm"
+                  onClick={async () => {
+                    await createWorkspaceModel({
+                      workspaceId: folder.workspaceId,
+                      parentModel: "folder",
+                      parentId: folder.id,
+                      model: "environment",
+                      name: "Folder Environment",
+                    });
+                  }}
+                >
+                  Create Folder Environment
+                </Button>
+              </VStack>
+            </EmptyStateText>
+          ) : (
+            <EnvironmentEditor hideName environment={folderEnvironment} />
+          )}
+        </TabContent>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/FormMultipartEditor.tsx b/apps/yaak-client/components/FormMultipartEditor.tsx
new file mode 100644
index 0000000..4a93f9f
--- /dev/null
+++ b/apps/yaak-client/components/FormMultipartEditor.tsx
@@ -0,0 +1,57 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { useCallback, useMemo } from "react";
+import type { Pair, PairEditorProps } from "./core/PairEditor";
+import { PairEditor } from "./core/PairEditor";
+
+type Props = {
+  forceUpdateKey: string;
+  request: HttpRequest;
+  onChange: (body: HttpRequest["body"]) => void;
+};
+
+export function FormMultipartEditor({ request, forceUpdateKey, onChange }: Props) {
+  const pairs = useMemo<Pair[]>(
+    () =>
+      (Array.isArray(request.body.form) ? request.body.form : []).map((p) => ({
+        enabled: p.enabled,
+        name: p.name,
+        value: p.file ?? p.value,
+        contentType: p.contentType,
+        filename: p.filename,
+        isFile: !!p.file,
+        id: p.id,
+      })),
+    [request.body.form],
+  );
+
+  const handleChange = useCallback<PairEditorProps["onChange"]>(
+    (pairs) =>
+      onChange({
+        form: pairs.map((p) => ({
+          enabled: p.enabled,
+          name: p.name,
+          contentType: p.contentType,
+          filename: p.filename,
+          file: p.isFile ? p.value : undefined,
+          value: p.isFile ? undefined : p.value,
+          id: p.id,
+        })),
+      }),
+    [onChange],
+  );
+
+  return (
+    <PairEditor
+      valueAutocompleteFunctions
+      valueAutocompleteVariables
+      nameAutocompleteVariables
+      nameAutocompleteFunctions
+      allowFileValues
+      allowMultilineValues
+      pairs={pairs}
+      onChange={handleChange}
+      forceUpdateKey={forceUpdateKey}
+      stateKey={`multipart.${request.id}`}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/FormUrlencodedEditor.tsx b/apps/yaak-client/components/FormUrlencodedEditor.tsx
new file mode 100644
index 0000000..94a0aa0
--- /dev/null
+++ b/apps/yaak-client/components/FormUrlencodedEditor.tsx
@@ -0,0 +1,46 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { useCallback, useMemo } from "react";
+import type { Pair, PairEditorProps } from "./core/PairEditor";
+import { PairOrBulkEditor } from "./core/PairOrBulkEditor";
+
+type Props = {
+  forceUpdateKey: string;
+  request: HttpRequest;
+  onChange: (headers: HttpRequest["body"]) => void;
+};
+
+export function FormUrlencodedEditor({ request, forceUpdateKey, onChange }: Props) {
+  const pairs = useMemo<Pair[]>(
+    () =>
+      (Array.isArray(request.body.form) ? request.body.form : []).map((p) => ({
+        enabled: !!p.enabled,
+        name: p.name || "",
+        value: p.value || "",
+        id: p.id,
+      })),
+    [request.body.form],
+  );
+
+  const handleChange = useCallback<PairEditorProps["onChange"]>(
+    (pairs) =>
+      onChange({ form: pairs.map((p) => ({ enabled: p.enabled, name: p.name, value: p.value })) }),
+    [onChange],
+  );
+
+  return (
+    <PairOrBulkEditor
+      allowMultilineValues
+      preferenceName="form_urlencoded"
+      valueAutocompleteFunctions
+      valueAutocompleteVariables
+      nameAutocompleteFunctions
+      nameAutocompleteVariables
+      namePlaceholder="entry_name"
+      valuePlaceholder="Value"
+      pairs={pairs}
+      onChange={handleChange}
+      forceUpdateKey={forceUpdateKey}
+      stateKey={`urlencoded.${request.id}`}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/GlobalHooks.tsx b/apps/yaak-client/components/GlobalHooks.tsx
new file mode 100644
index 0000000..44744fe
--- /dev/null
+++ b/apps/yaak-client/components/GlobalHooks.tsx
@@ -0,0 +1,45 @@
+import { activeRequestAtom } from "../hooks/useActiveRequest";
+import { useSubscribeActiveWorkspaceId } from "../hooks/useActiveWorkspace";
+import { useActiveWorkspaceChangedToast } from "../hooks/useActiveWorkspaceChangedToast";
+import { useHotKey, useSubscribeHotKeys } from "../hooks/useHotKey";
+import { useSubscribeHttpAuthentication } from "../hooks/useHttpAuthentication";
+import { useSyncFontSizeSetting } from "../hooks/useSyncFontSizeSetting";
+import { useSyncWorkspaceChildModels } from "../hooks/useSyncWorkspaceChildModels";
+import { usePlatformEvent } from "../hooks/usePlatformEvent";
+import { useSyncZoomSetting } from "../hooks/useSyncZoomSetting";
+import { useSubscribeTemplateFunctions } from "../hooks/useTemplateFunctions";
+import { fireAndForget } from "../lib/fireAndForget";
+import { jotaiStore } from "../lib/jotai";
+import { renameModelWithPrompt } from "../lib/renameModelWithPrompt";
+import { router } from "../lib/router";
+
+export function GlobalHooks() {
+  useSyncZoomSetting();
+  useSyncFontSizeSetting();
+
+  useSubscribeActiveWorkspaceId();
+
+  useSyncWorkspaceChildModels();
+  useSubscribeTemplateFunctions();
+  useSubscribeHttpAuthentication();
+
+  // Other useful things
+  useActiveWorkspaceChangedToast();
+  useSubscribeHotKeys();
+
+  usePlatformEvent("show_home", () => {
+    fireAndForget(router.navigate({ to: "/", search: { home: true } }));
+  });
+
+  useHotKey(
+    "request.rename",
+    async () => {
+      const model = jotaiStore.get(activeRequestAtom);
+      if (model == null) return;
+      await renameModelWithPrompt(model);
+    },
+    { allowDefault: true },
+  );
+
+  return null;
+}
diff --git a/apps/yaak-client/components/GrpcConnectionLayout.tsx b/apps/yaak-client/components/GrpcConnectionLayout.tsx
new file mode 100644
index 0000000..49b25dc
--- /dev/null
+++ b/apps/yaak-client/components/GrpcConnectionLayout.tsx
@@ -0,0 +1,129 @@
+import { patchModel } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { CSSProperties } from "react";
+import { useEffect, useMemo } from "react";
+import { useActiveRequest } from "../hooks/useActiveRequest";
+import { useGrpc } from "../hooks/useGrpc";
+import { useGrpcProtoFiles } from "../hooks/useGrpcProtoFiles";
+import { activeGrpcConnectionAtom, useGrpcEvents } from "../hooks/usePinnedGrpcConnection";
+import { Banner, SplitLayout } from "@yaakapp-internal/ui";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { workspaceLayoutAtom } from "../lib/atoms";
+import { HotkeyList } from "./core/HotkeyList";
+import { GrpcRequestPane } from "./GrpcRequestPane";
+import { GrpcResponsePane } from "./GrpcResponsePane";
+
+interface Props {
+  style: CSSProperties;
+}
+
+const emptyArray: string[] = [];
+
+export function GrpcConnectionLayout({ style }: Props) {
+  const workspaceLayout = useAtomValue(workspaceLayoutAtom);
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  const wsId = activeWorkspace?.id ?? "n/a";
+  const activeRequest = useActiveRequest("grpc_request");
+  const activeConnection = useAtomValue(activeGrpcConnectionAtom);
+  const grpcEvents = useGrpcEvents(activeConnection?.id ?? null);
+  const protoFilesKv = useGrpcProtoFiles(activeRequest?.id ?? null);
+  const protoFiles = protoFilesKv.value ?? emptyArray;
+  const grpc = useGrpc(activeRequest, activeConnection, protoFiles);
+
+  const services = grpc.reflect.data ?? null;
+  useEffect(() => {
+    if (services == null || activeRequest == null) return;
+    const s = services.find((s) => s.name === activeRequest.service);
+    if (s == null) {
+      patchModel(activeRequest, {
+        service: services[0]?.name ?? null,
+        method: services[0]?.methods[0]?.name ?? null,
+      }).catch(console.error);
+      return;
+    }
+
+    const m = s.methods.find((m) => m.name === activeRequest.method);
+    if (m == null) {
+      patchModel(activeRequest, {
+        method: s.methods[0]?.name ?? null,
+      }).catch(console.error);
+      return;
+    }
+  }, [activeRequest, services]);
+
+  const activeMethod = useMemo(() => {
+    if (services == null || activeRequest == null) return null;
+
+    const s = services.find((s) => s.name === activeRequest.service);
+    if (s == null) return null;
+    return s.methods.find((m) => m.name === activeRequest.method);
+  }, [activeRequest, services]);
+
+  const methodType:
+    | "unary"
+    | "server_streaming"
+    | "client_streaming"
+    | "streaming"
+    | "no-schema"
+    | "no-method" = useMemo(() => {
+    if (services == null) return "no-schema";
+    if (activeMethod == null) return "no-method";
+    if (activeMethod.clientStreaming && activeMethod.serverStreaming) return "streaming";
+    if (activeMethod.clientStreaming) return "client_streaming";
+    if (activeMethod.serverStreaming) return "server_streaming";
+    return "unary";
+  }, [activeMethod, services]);
+
+  if (activeRequest == null) {
+    return null;
+  }
+
+  return (
+    <SplitLayout
+      storageKey={`grpc_layout::${wsId}`}
+      className="p-3 gap-1.5"
+      style={style}
+      layout={workspaceLayout}
+      firstSlot={({ style }) => (
+        <GrpcRequestPane
+          style={style}
+          activeRequest={activeRequest}
+          protoFiles={protoFiles}
+          methodType={methodType}
+          isStreaming={grpc.isStreaming}
+          onGo={grpc.go.mutate}
+          onCommit={grpc.commit.mutate}
+          onCancel={grpc.cancel.mutate}
+          onSend={grpc.send.mutate}
+          services={services ?? null}
+          reflectionError={grpc.reflect.error as string | undefined}
+          reflectionLoading={grpc.reflect.isFetching}
+        />
+      )}
+      secondSlot={({ style }) =>
+        !grpc.go.isPending && (
+          <div
+            style={style}
+            className={classNames(
+              "x-theme-responsePane",
+              "max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1",
+              "bg-surface rounded-md border border-border-subtle",
+              "shadow relative",
+            )}
+          >
+            {grpc.go.error ? (
+              <Banner color="danger" className="m-2">
+                {grpc.go.error}
+              </Banner>
+            ) : grpcEvents.length >= 0 ? (
+              <GrpcResponsePane activeRequest={activeRequest} methodType={methodType} />
+            ) : (
+              <HotkeyList hotkeys={["request.send", "sidebar.focus", "url_bar.focus"]} />
+            )}
+          </div>
+        )
+      }
+    />
+  );
+}
diff --git a/apps/yaak-client/components/GrpcEditor.tsx b/apps/yaak-client/components/GrpcEditor.tsx
new file mode 100644
index 0000000..e44fc1f
--- /dev/null
+++ b/apps/yaak-client/components/GrpcEditor.tsx
@@ -0,0 +1,302 @@
+import { linter } from "@codemirror/lint";
+import type { EditorView } from "@codemirror/view";
+import { jsoncLanguage } from "@shopify/lang-jsonc";
+import { type GrpcRequest, patchModel } from "@yaakapp-internal/models";
+import { Banner, FormattedError, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import {
+  handleRefresh,
+  jsonCompletion,
+  jsonSchemaLinter,
+  stateExtensions,
+  updateSchema,
+} from "codemirror-json-schema";
+import type { JSONSchema7 } from "json-schema";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ReflectResponseService } from "../hooks/useGrpc";
+import { wasUpdatedExternally } from "../hooks/useRequestUpdateKey";
+import { showAlert } from "../lib/alert";
+import { showConfirm } from "../lib/confirm";
+import { showDialog } from "../lib/dialog";
+import type { JsonSchema } from "../lib/jsonSchemaExample";
+import { buildExampleFromSchema } from "../lib/jsonSchemaExample";
+import { pluralizeCount } from "../lib/pluralize";
+import { queryClient } from "../lib/queryClient";
+import { Button } from "./core/Button";
+import { Dropdown } from "./core/Dropdown";
+import type { EditorProps } from "./core/Editor/Editor";
+import { Editor } from "./core/Editor/LazyEditor";
+import { GrpcProtoSelectionDialog } from "./GrpcProtoSelectionDialog";
+
+type Props = Pick<EditorProps, "heightMode" | "onChange" | "className" | "forceUpdateKey"> & {
+  services: ReflectResponseService[] | null;
+  reflectionError?: string;
+  reflectionLoading?: boolean;
+  request: GrpcRequest;
+  protoFiles: string[];
+};
+
+type MethodSchema =
+  | { type: "none" }
+  | { type: "schema"; schema: JsonSchema }
+  | { type: "error"; id: string; title: string; body: ReactNode; log: unknown[] };
+
+export function GrpcEditor({
+  services,
+  reflectionError,
+  reflectionLoading,
+  request,
+  protoFiles,
+  ...extraEditorProps
+}: Props) {
+  const [editorView, setEditorView] = useState<EditorView | null>(null);
+  const handleInitEditorViewRef = useCallback((h: EditorView | null) => {
+    setEditorView(h);
+  }, []);
+
+  // Find the schema for the selected service and method
+  const methodSchema = useMemo<MethodSchema>(() => {
+    if (services === null || request.service === null || request.method === null) {
+      return { type: "none" };
+    }
+
+    const s = services.find((s) => s.name === request.service);
+    if (s == null) {
+      return {
+        type: "error",
+        id: "grpc-find-service-error",
+        title: "Couldn't Find Service",
+        body: (
+          <>
+            Failed to find service <InlineCode>{request.service}</InlineCode> in schema
+          </>
+        ),
+        log: ["Failed to find service", { service: request.service, services }],
+      };
+    }
+
+    const schema = s.methods.find((m) => m.name === request.method)?.schema;
+    if (schema == null) {
+      return {
+        type: "error",
+        id: "grpc-find-schema-error",
+        title: "Couldn't Find Method",
+        body: (
+          <>
+            Failed to find method <InlineCode>{request.method}</InlineCode> for{" "}
+            <InlineCode>{request.service}</InlineCode> in schema
+          </>
+        ),
+        log: ["Failed to find method", { method: request.method, methods: s.methods }],
+      };
+    }
+
+    try {
+      return { type: "schema", schema: JSON.parse(schema) as JsonSchema };
+    } catch (err) {
+      return {
+        type: "error",
+        id: "grpc-parse-schema-error",
+        title: "Failed to Parse Schema",
+        body: (
+          <VStack space={4}>
+            <p>
+              For service <InlineCode>{request.service}</InlineCode> and method{" "}
+              <InlineCode>{request.method}</InlineCode>
+            </p>
+            <FormattedError>{String(err)}</FormattedError>
+          </VStack>
+        ),
+        log: ["Failed to parse schema", err],
+      };
+    }
+  }, [services, request.method, request.service]);
+
+  useEffect(() => {
+    if (methodSchema.type !== "error") return;
+    console.log(...methodSchema.log);
+    showAlert({ id: methodSchema.id, title: methodSchema.title, body: methodSchema.body });
+  }, [methodSchema]);
+
+  // Update the editor whenever the schema changes
+  useEffect(() => {
+    if (editorView == null || methodSchema.type !== "schema") return;
+    updateSchema(editorView, methodSchema.schema as JSONSchema7);
+  }, [editorView, methodSchema]);
+
+  const extraExtensions = useMemo(
+    () => [
+      linter(jsonSchemaLinter(), {
+        delay: 200,
+        needsRefresh: handleRefresh,
+      }),
+      jsoncLanguage.data.of({
+        autocomplete: jsonCompletion(),
+      }),
+      stateExtensions({}),
+    ],
+    [],
+  );
+
+  const reflectionUnavailable = reflectionError?.match(/unimplemented/i);
+  reflectionError = reflectionUnavailable ? undefined : reflectionError;
+
+  const handleGenerateExample = useCallback(async () => {
+    if (methodSchema.type !== "schema") return;
+
+    if (request.message.trim() !== "") {
+      const confirmed = await showConfirm({
+        id: "grpc-generate-example",
+        title: "Generate Example",
+        description: "The current message will be replaced with an example.",
+        confirmText: "Generate",
+      });
+      if (!confirmed) return;
+    }
+
+    const message = JSON.stringify(buildExampleFromSchema(methodSchema.schema), null, 2);
+    await patchModel(request, { message });
+
+    // Force the editor to pick up the new message
+    wasUpdatedExternally(request.id);
+  }, [methodSchema, request]);
+
+  // The reflect query is keyed by request, url and proto files, so a prefix invalidate
+  // reaches it without threading a refetch down from the connection layout.
+  const handleReloadSchema = useCallback(
+    () => queryClient.invalidateQueries({ queryKey: ["grpc_reflect", request.id] }),
+    [request.id],
+  );
+
+  const handleShowReflectionError = useCallback(() => {
+    showDialog({
+      id: "grpc-reflection-error",
+      title: "Reflection Failed",
+      size: "sm",
+      render: ({ hide }) => (
+        <>
+          <FormattedError>{reflectionError ?? "unknown"}</FormattedError>
+          <div className="w-full my-4">
+            <Button
+              className="ml-auto"
+              color="primary"
+              size="sm"
+              onClick={async () => {
+                hide();
+                await handleReloadSchema();
+              }}
+            >
+              Retry
+            </Button>
+          </div>
+        </>
+      ),
+    });
+  }, [handleReloadSchema, reflectionError]);
+
+  const actions = useMemo(
+    () => [
+      // Matches the GraphQL editor: one always-visible control labelled by schema state,
+      // with everything schema-related behind it.
+      <div key="schema" className="opacity-100!">
+        <Dropdown
+          items={[
+            {
+              // Hidden for servers without reflection, which isn't an error
+              hidden: !reflectionError,
+              type: "content",
+              label: (
+                <Banner color="danger">
+                  <p className="mb-1">Reflection failed</p>
+                  <Button
+                    size="xs"
+                    color="danger"
+                    variant="border"
+                    onClick={handleShowReflectionError}
+                  >
+                    View Error
+                  </Button>
+                </Banner>
+              ),
+            },
+            {
+              label: "Generate Example Message",
+              leftSlot: <Icon icon="magic_wand" />,
+              disabled: methodSchema.type !== "schema",
+              onSelect: handleGenerateExample,
+            },
+            { type: "separator" },
+            {
+              label: "Reload Schema",
+              leftSlot: <Icon icon="refresh" spin={reflectionLoading} />,
+              keepOpenOnSelect: true,
+              onSelect: handleReloadSchema,
+            },
+            {
+              label: protoFiles.length > 0 ? "Select Proto Files\u2026" : "Configure Schema\u2026",
+              leftSlot: <Icon icon="settings" />,
+              onSelect: () => {
+                showDialog({
+                  title: "Configure Schema",
+                  size: "md",
+                  id: "grpc-configure-schema",
+                  render: ({ hide }) => <GrpcProtoSelectionDialog onDone={hide} />,
+                });
+              },
+            },
+          ]}
+        >
+          <Button
+            size="sm"
+            variant="border"
+            title="Schema"
+            forDropdown
+            isLoading={reflectionLoading}
+            color={reflectionUnavailable ? "info" : reflectionError ? "danger" : "default"}
+          >
+            {reflectionLoading
+              ? "Inspecting Schema"
+              : reflectionUnavailable
+                ? "Select Proto Files"
+                : reflectionError
+                  ? "Server Error"
+                  : protoFiles.length > 0
+                    ? pluralizeCount("File", protoFiles.length)
+                    : services != null
+                      ? "Schema Detected"
+                      : "Select Schema"}
+          </Button>
+        </Dropdown>
+      </div>,
+    ],
+    [
+      handleGenerateExample,
+      handleReloadSchema,
+      handleShowReflectionError,
+      methodSchema.type,
+      protoFiles.length,
+      reflectionError,
+      reflectionLoading,
+      reflectionUnavailable,
+      services,
+    ],
+  );
+
+  return (
+    <div className="h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto_auto_minmax(0,auto)]">
+      <Editor
+        setRef={handleInitEditorViewRef}
+        language="json"
+        autocompleteFunctions
+        autocompleteVariables
+        defaultValue={request.message}
+        heightMode="auto"
+        placeholder="..."
+        extraExtensions={extraExtensions}
+        actions={actions}
+        stateKey={`grpc_message.${request.id}`}
+        {...extraEditorProps}
+      />
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/GrpcProtoSelectionDialog.tsx b/apps/yaak-client/components/GrpcProtoSelectionDialog.tsx
new file mode 100644
index 0000000..cafa422
--- /dev/null
+++ b/apps/yaak-client/components/GrpcProtoSelectionDialog.tsx
@@ -0,0 +1,183 @@
+import type { GrpcRequest } from "@yaakapp-internal/models";
+import { Banner, HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { useActiveRequest } from "../hooks/useActiveRequest";
+import { useGrpc } from "../hooks/useGrpc";
+import { useGrpcProtoFiles } from "../hooks/useGrpcProtoFiles";
+import { pluralizeCount } from "../lib/pluralize";
+import { Button } from "./core/Button";
+import { IconButton } from "./core/IconButton";
+import { Link } from "./core/Link";
+import { platform } from "@yaakapp-internal/platform";
+
+interface Props {
+  onDone: () => void;
+}
+
+export function GrpcProtoSelectionDialog(props: Props) {
+  const request = useActiveRequest();
+  if (request?.model !== "grpc_request") return null;
+
+  return <GrpcProtoSelectionDialogWithRequest request={request} {...props} />;
+}
+
+function GrpcProtoSelectionDialogWithRequest({ request }: Props & { request: GrpcRequest }) {
+  const protoFilesKv = useGrpcProtoFiles(request.id);
+  const protoFiles = protoFilesKv.value ?? [];
+  const grpc = useGrpc(request, null, protoFiles);
+  const services = grpc.reflect.data;
+  const serverReflection = protoFiles.length === 0 && services != null;
+  let reflectError = grpc.reflect.error ?? null;
+  const reflectionUnimplemented = String(reflectError).match(/unimplemented/i);
+
+  if (reflectionUnimplemented) {
+    reflectError = null;
+  }
+
+  if (request == null) {
+    return null;
+  }
+
+  return (
+    <VStack className="flex-col-reverse mb-3" space={3}>
+      {/* Buttons on top so they get focus first */}
+      <HStack space={2} justifyContent="start" className="flex-row-reverse mt-3">
+        <Button
+          color="primary"
+          variant="border"
+          onClick={async () => {
+            const selected = await platform.dialog.open({
+              title: "Select Proto Files",
+              multiple: true,
+              filters: [{ name: "Proto Files", extensions: ["proto"] }],
+            });
+            if (selected == null) return;
+
+            const newFiles = selected.filter((p) => !protoFiles.includes(p));
+            await protoFilesKv.set([...protoFiles, ...newFiles]);
+            await grpc.reflect.refetch();
+          }}
+        >
+          Add Proto Files
+        </Button>
+        <Button
+          variant="border"
+          color="primary"
+          onClick={async () => {
+            const selected = await platform.dialog.open({
+              title: "Select Proto Directory",
+              directory: true,
+            });
+            if (selected == null) return;
+
+            await protoFilesKv.set([...protoFiles.filter((f) => f !== selected), selected]);
+            await grpc.reflect.refetch();
+          }}
+        >
+          Add Import Folders
+        </Button>
+        <Button
+          isLoading={grpc.reflect.isFetching}
+          disabled={grpc.reflect.isFetching}
+          variant="border"
+          color="secondary"
+          onClick={() => grpc.reflect.refetch()}
+        >
+          Refresh Schema
+        </Button>
+      </HStack>
+      <VStack space={5}>
+        {reflectError && (
+          <Banner color="warning">
+            <h1 className="font-bold">
+              Reflection failed on URL <InlineCode>{request.url || "n/a"}</InlineCode>
+            </h1>
+            <p>{reflectError.trim()}</p>
+          </Banner>
+        )}
+        {!serverReflection && services != null && services.length > 0 && (
+          <Banner className="flex flex-col gap-2">
+            <p>
+              Found services{" "}
+              {services?.slice(0, 5).map((s, i) => {
+                return (
+                  <span key={s.name + s.methods.map((m) => m.name).join(",")}>
+                    <InlineCode>{s.name}</InlineCode>
+                    {i === services.length - 1 ? "" : i === services.length - 2 ? " and " : ", "}
+                  </span>
+                );
+              })}
+              {services?.length > 5 && pluralizeCount("other", services?.length - 5)}
+            </p>
+          </Banner>
+        )}
+        {serverReflection && services != null && services.length > 0 && (
+          <Banner className="flex flex-col gap-2">
+            <p>
+              Server reflection found services
+              {services?.map((s, i) => {
+                return (
+                  <span key={s.name + s.methods.map((m) => m.name).join(",")}>
+                    <InlineCode>{s.name}</InlineCode>
+                    {i === services.length - 1 ? "" : i === services.length - 2 ? " and " : ", "}
+                  </span>
+                );
+              })}
+              . You can override this schema by manually selecting <InlineCode>*.proto</InlineCode>{" "}
+              files.
+            </p>
+          </Banner>
+        )}
+
+        {protoFiles.length > 0 && (
+          <table className="w-full divide-y divide-surface-highlight">
+            <thead>
+              <tr>
+                <th className="text-text-subtlest" colSpan={3}>
+                  Added File Paths
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-surface-highlight">
+              {protoFiles.map((f, i) => {
+                const parts = f.split("/");
+                // oxlint-disable-next-line no-array-index-key -- none
+                return (
+                  <tr key={f + i} className="group">
+                    <td>
+                      <Icon icon={f.endsWith(".proto") ? "file_code" : "folder_code"} />
+                    </td>
+                    <td className="pl-1 font-mono text-sm" title={f}>
+                      {parts.length > 3 && ".../"}
+                      {parts.slice(-3).join("/")}
+                    </td>
+                    <td className="w-0 py-0.5">
+                      <IconButton
+                        title="Remove file"
+                        variant="border"
+                        size="xs"
+                        icon="trash"
+                        className="my-0.5 ml-auto opacity-50 transition-opacity group-hover:opacity-100"
+                        onClick={async () => {
+                          await protoFilesKv.set(protoFiles.filter((p) => p !== f));
+                        }}
+                      />
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+        {reflectionUnimplemented && protoFiles.length === 0 && (
+          <Banner>
+            <InlineCode>{request.url}</InlineCode> doesn't implement{" "}
+            <Link href="https://github.com/grpc/grpc/blob/9aa3c5835a4ed6afae9455b63ed45c761d695bca/doc/server-reflection.md">
+              Server Reflection
+            </Link>{" "}
+            . Please manually add the <InlineCode>.proto</InlineCode> file to get started.
+          </Banner>
+        )}
+      </VStack>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/GrpcRequestPane.tsx b/apps/yaak-client/components/GrpcRequestPane.tsx
new file mode 100644
index 0000000..0c3b913
--- /dev/null
+++ b/apps/yaak-client/components/GrpcRequestPane.tsx
@@ -0,0 +1,318 @@
+import {
+  type GrpcRequest,
+  type HttpRequestHeader,
+  patchModel,
+  patchModelDebounced,
+} from "@yaakapp-internal/models";
+import { HStack, Icon, useContainerSize, VStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { CSSProperties } from "react";
+import { useCallback, useMemo, useRef } from "react";
+import { useAuthTab } from "../hooks/useAuthTab";
+import type { ReflectResponseService } from "../hooks/useGrpc";
+import { useHeadersTab } from "../hooks/useHeadersTab";
+import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
+import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { Button } from "./core/Button";
+import { CountBadge } from "./core/CountBadge";
+import { IconButton } from "./core/IconButton";
+import { PlainInput } from "./core/PlainInput";
+import { RadioDropdown } from "./core/RadioDropdown";
+import type { TabItem } from "./core/Tabs/Tabs";
+import { TabContent, Tabs } from "./core/Tabs/Tabs";
+import { GrpcEditor } from "./GrpcEditor";
+import { HeadersEditor } from "./HeadersEditor";
+import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
+import { UrlBar } from "./UrlBar";
+
+interface Props {
+  style?: CSSProperties;
+  className?: string;
+  activeRequest: GrpcRequest;
+  protoFiles: string[];
+  reflectionError?: string;
+  reflectionLoading?: boolean;
+  methodType:
+    | "unary"
+    | "client_streaming"
+    | "server_streaming"
+    | "streaming"
+    | "no-schema"
+    | "no-method";
+  isStreaming: boolean;
+  onCommit: () => void;
+  onCancel: () => void;
+  onSend: (v: { message: string }) => void;
+  onGo: () => void;
+  services: ReflectResponseService[] | null;
+}
+
+const TAB_MESSAGE = "message";
+const TAB_METADATA = "metadata";
+const TAB_AUTH = "auth";
+const TAB_SETTINGS = "settings";
+const TAB_DESCRIPTION = "description";
+
+export function GrpcRequestPane({
+  style,
+  services,
+  methodType,
+  activeRequest,
+  protoFiles,
+  reflectionError,
+  reflectionLoading,
+  isStreaming,
+  onGo,
+  onCommit,
+  onCancel,
+  onSend,
+}: Props) {
+  const authTab = useAuthTab(TAB_AUTH, activeRequest);
+  const metadataTab = useHeadersTab(TAB_METADATA, activeRequest, "Metadata");
+  const inheritedHeaders = useInheritedHeaders(activeRequest);
+  const numSettingsOverrides = countOverriddenSettings(activeRequest);
+  const forceUpdateKey = useRequestUpdateKey(activeRequest.id ?? null);
+
+  const urlContainerEl = useRef<HTMLDivElement>(null);
+  const { width: paneWidth } = useContainerSize(urlContainerEl);
+
+  const handleChangeUrl = useCallback(
+    (url: string) => patchModelDebounced(activeRequest, { url }),
+    [activeRequest],
+  );
+
+  const handleChangeMessage = useCallback(
+    // Not debounced: handleSend reads message from the store, so a pending
+    // debounced patch would send stale text
+    (message: string) => patchModel(activeRequest, { message }),
+    [activeRequest],
+  );
+
+  const select = useMemo(() => {
+    const options =
+      services?.flatMap((s) =>
+        s.methods.map((m) => ({
+          label: `${s.name.split(".").pop() ?? s.name}/${m.name}`,
+          value: `${s.name}/${m.name}`,
+        })),
+      ) ?? [];
+    const value = `${activeRequest?.service ?? ""}/${activeRequest?.method ?? ""}`;
+    return { value, options };
+  }, [activeRequest?.method, activeRequest?.service, services]);
+
+  const handleChangeService = useCallback(
+    async (v: string) => {
+      const [serviceName, methodName] = v.split("/", 2);
+      if (serviceName == null || methodName == null) throw new Error("Should never happen");
+      await patchModel(activeRequest, {
+        service: serviceName,
+        method: methodName,
+      });
+    },
+    [activeRequest],
+  );
+
+  const handleConnect = useCallback(async () => {
+    if (activeRequest == null) return;
+
+    if (activeRequest.service == null || activeRequest.method == null) {
+      alert({
+        id: "grpc-invalid-service-method",
+        title: "Error",
+        body: "Service or method not selected",
+      });
+    }
+    onGo();
+  }, [activeRequest, onGo]);
+
+  const handleSend = useCallback(async () => {
+    if (activeRequest == null) return;
+    onSend({ message: activeRequest.message });
+  }, [activeRequest, onSend]);
+
+  const hasDescription = activeRequest.description.trim().length > 0;
+
+  const tabs: TabItem[] = useMemo(
+    () => [
+      { value: TAB_MESSAGE, label: "Message" },
+      ...metadataTab,
+      ...authTab,
+      {
+        value: TAB_SETTINGS,
+        label: "Settings",
+        rightSlot: <CountBadge count={numSettingsOverrides} />,
+      },
+      {
+        value: TAB_DESCRIPTION,
+        label: "Info",
+        rightSlot: hasDescription && <CountBadge count={true} />,
+      },
+    ],
+    [authTab, hasDescription, metadataTab, numSettingsOverrides],
+  );
+
+  const handleMetadataChange = useCallback(
+    (metadata: HttpRequestHeader[]) => patchModelDebounced(activeRequest, { metadata }),
+    [activeRequest],
+  );
+
+  const handleDescriptionChange = useCallback(
+    (description: string) => patchModelDebounced(activeRequest, { description }),
+    [activeRequest],
+  );
+
+  return (
+    <VStack style={style}>
+      <div
+        ref={urlContainerEl}
+        className={classNames(
+          "grid grid-cols-[minmax(0,1fr)_auto] gap-1.5",
+          paneWidth === 0 && "opacity-0",
+          paneWidth > 0 && paneWidth < 400 && "grid-cols-1!",
+        )}
+      >
+        <UrlBar
+          key={forceUpdateKey}
+          url={activeRequest.url ?? ""}
+          submitIcon={null}
+          forceUpdateKey={forceUpdateKey}
+          placeholder="localhost:50051"
+          onSend={handleConnect}
+          onUrlChange={handleChangeUrl}
+          onCancel={onCancel}
+          isLoading={isStreaming}
+          stateKey={`grpc_url.${activeRequest.id}`}
+        />
+        <HStack space={1.5}>
+          <RadioDropdown
+            value={select.value}
+            onChange={handleChangeService}
+            items={select.options.map((o) => ({
+              label: o.label,
+              value: o.value,
+              type: "default",
+              shortLabel: o.label,
+            }))}
+          >
+            <Button
+              size="sm"
+              variant="border"
+              rightSlot={<Icon size="sm" icon="chevron_down" />}
+              disabled={isStreaming || services == null}
+              className={classNames(
+                "font-mono text-editor min-w-20 ring-0!",
+                paneWidth < 400 && "flex-1",
+              )}
+            >
+              {select.options.find((o) => o.value === select.value)?.label ?? "No Schema"}
+            </Button>
+          </RadioDropdown>
+          {methodType === "client_streaming" || methodType === "streaming" ? (
+            <>
+              {isStreaming && (
+                <>
+                  <IconButton
+                    variant="border"
+                    size="sm"
+                    title="Cancel"
+                    onClick={onCancel}
+                    icon="x"
+                  />
+                  <IconButton
+                    variant="border"
+                    size="sm"
+                    title="Commit"
+                    onClick={onCommit}
+                    icon="check"
+                  />
+                </>
+              )}
+              <IconButton
+                size="sm"
+                variant="border"
+                title={isStreaming ? "Connect" : "Send"}
+                hotkeyAction="request.send"
+                onClick={isStreaming ? handleSend : handleConnect}
+                icon={isStreaming ? "send_horizontal" : "arrow_up_down"}
+              />
+            </>
+          ) : (
+            <IconButton
+              size="sm"
+              variant="border"
+              title={methodType === "unary" ? "Send" : "Connect"}
+              hotkeyAction="request.send"
+              onClick={isStreaming ? onCancel : handleConnect}
+              disabled={methodType === "no-schema" || methodType === "no-method"}
+              icon={
+                isStreaming
+                  ? "x"
+                  : methodType.includes("streaming")
+                    ? "arrow_up_down"
+                    : "send_horizontal"
+              }
+            />
+          )}
+        </HStack>
+      </div>
+      <Tabs
+        label="Request"
+        tabs={tabs}
+        tabListClassName="mt-1 mb-1.5!"
+        storageKey="grpc_request_tabs"
+        activeTabKey={activeRequest.id}
+      >
+        <TabContent value="message">
+          <GrpcEditor
+            onChange={handleChangeMessage}
+            forceUpdateKey={forceUpdateKey}
+            services={services}
+            reflectionError={reflectionError}
+            reflectionLoading={reflectionLoading}
+            request={activeRequest}
+            protoFiles={protoFiles}
+          />
+        </TabContent>
+        <TabContent value={TAB_AUTH}>
+          <HttpAuthenticationEditor model={activeRequest} />
+        </TabContent>
+        <TabContent value={TAB_METADATA}>
+          <HeadersEditor
+            inheritedHeaders={inheritedHeaders}
+            forceUpdateKey={forceUpdateKey}
+            headers={activeRequest.metadata}
+            stateKey={`headers.${activeRequest.id}`}
+            onChange={handleMetadataChange}
+          />
+        </TabContent>
+        <TabContent value={TAB_SETTINGS}>
+          <ModelSettingsEditor model={activeRequest} />
+        </TabContent>
+        <TabContent value={TAB_DESCRIPTION}>
+          <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
+            <PlainInput
+              label="Request Name"
+              hideLabel
+              forceUpdateKey={forceUpdateKey}
+              defaultValue={activeRequest.name}
+              className="font-sans text-xl! px-0!"
+              containerClassName="border-0"
+              placeholder={resolvedModelName(activeRequest)}
+              onChange={(name) => patchModelDebounced(activeRequest, { name })}
+            />
+            <MarkdownEditor
+              name="request-description"
+              placeholder="Request description"
+              defaultValue={activeRequest.description}
+              stateKey={`description.${activeRequest.id}`}
+              onChange={handleDescriptionChange}
+            />
+          </div>
+        </TabContent>
+      </Tabs>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/GrpcResponsePane.tsx b/apps/yaak-client/components/GrpcResponsePane.tsx
new file mode 100644
index 0000000..601b3e1
--- /dev/null
+++ b/apps/yaak-client/components/GrpcResponsePane.tsx
@@ -0,0 +1,248 @@
+import type { GrpcEvent, GrpcRequest } from "@yaakapp-internal/models";
+import { HStack, Icon, type IconProps, LoadingIcon, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue, useSetAtom } from "jotai";
+import type { CSSProperties } from "react";
+import { useEffect, useMemo, useState } from "react";
+import {
+  activeGrpcConnectionAtom,
+  activeGrpcConnections,
+  pinnedGrpcConnectionIdAtom,
+  useGrpcEvents,
+} from "../hooks/usePinnedGrpcConnection";
+import { useStateWithDeps } from "../hooks/useStateWithDeps";
+import { Button } from "./core/Button";
+import { Editor } from "./core/Editor/LazyEditor";
+import { EventDetailHeader, EventViewer } from "./core/EventViewer";
+import { EventViewerRow } from "./core/EventViewerRow";
+import { HotkeyList } from "./core/HotkeyList";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { EmptyStateText } from "./EmptyStateText";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { RecentGrpcConnectionsDropdown } from "./RecentGrpcConnectionsDropdown";
+
+interface Props {
+  style?: CSSProperties;
+  className?: string;
+  activeRequest: GrpcRequest;
+  methodType:
+    | "unary"
+    | "client_streaming"
+    | "server_streaming"
+    | "streaming"
+    | "no-schema"
+    | "no-method";
+}
+
+export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
+  const [activeEventIndex, setActiveEventIndex] = useState<number | null>(null);
+  const [showLarge, setShowLarge] = useStateWithDeps<boolean>(false, [activeRequest.id]);
+  const [showingLarge, setShowingLarge] = useState<boolean>(false);
+  const connections = useAtomValue(activeGrpcConnections);
+  const activeConnection = useAtomValue(activeGrpcConnectionAtom);
+  const events = useGrpcEvents(activeConnection?.id ?? null);
+  const setPinnedGrpcConnectionId = useSetAtom(pinnedGrpcConnectionIdAtom);
+
+  const activeEvent = useMemo(
+    () => (activeEventIndex != null ? events[activeEventIndex] : null),
+    [activeEventIndex, events],
+  );
+
+  // Set the active message to the first message received if unary
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (events.length === 0 || activeEvent != null || methodType !== "unary") {
+      return;
+    }
+    const firstServerMessageIndex = events.findIndex((m) => m.eventType === "server_message");
+    if (firstServerMessageIndex !== -1) {
+      setActiveEventIndex(firstServerMessageIndex);
+    }
+  }, [events.length]);
+
+  if (activeConnection == null) {
+    return (
+      <HotkeyList hotkeys={["request.send", "model.create", "sidebar.focus", "url_bar.focus"]} />
+    );
+  }
+
+  const header = (
+    <HStack className="pl-3 mb-1 font-mono text-sm text-text-subtle overflow-x-auto hide-scrollbars">
+      <HStack space={2}>
+        <span className="whitespace-nowrap">{events.length} Messages</span>
+        {activeConnection.state !== "closed" && (
+          <LoadingIcon size="sm" className="text-text-subtlest" />
+        )}
+      </HStack>
+      <div className="ml-auto">
+        <RecentGrpcConnectionsDropdown
+          connections={connections}
+          activeConnection={activeConnection}
+          onPinnedConnectionId={setPinnedGrpcConnectionId}
+        />
+      </div>
+    </HStack>
+  );
+
+  return (
+    <div style={style} className="h-full">
+      <ErrorBoundary name="GRPC Events">
+        <EventViewer
+          events={events}
+          getEventKey={(event) => event.id}
+          error={activeConnection.error}
+          header={header}
+          splitLayoutStorageKey="grpc_events"
+          defaultRatio={0.4}
+          renderRow={({ event, isActive, onClick }) => (
+            <GrpcEventRow event={event} isActive={isActive} onClick={onClick} />
+          )}
+          renderDetail={({ event, onClose }) => (
+            <GrpcEventDetail
+              event={event}
+              showLarge={showLarge}
+              showingLarge={showingLarge}
+              setShowLarge={setShowLarge}
+              setShowingLarge={setShowingLarge}
+              onClose={onClose}
+            />
+          )}
+        />
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+function GrpcEventRow({
+  event,
+  isActive,
+  onClick,
+}: {
+  event: GrpcEvent;
+  isActive: boolean;
+  onClick: () => void;
+}) {
+  const { eventType, status, content, error } = event;
+  const display = getEventDisplay(eventType, status);
+
+  return (
+    <EventViewerRow
+      isActive={isActive}
+      onClick={onClick}
+      icon={<Icon color={display.color} title={display.title} icon={display.icon} />}
+      content={
+        <span className="text-xs">
+          {content.slice(0, 1000)}
+          {error && <span className="text-warning"> ({error})</span>}
+        </span>
+      }
+      timestamp={event.createdAt}
+    />
+  );
+}
+
+function GrpcEventDetail({
+  event,
+  showLarge,
+  showingLarge,
+  setShowLarge,
+  setShowingLarge,
+  onClose,
+}: {
+  event: GrpcEvent;
+  showLarge: boolean;
+  showingLarge: boolean;
+  setShowLarge: (v: boolean) => void;
+  setShowingLarge: (v: boolean) => void;
+  onClose: () => void;
+}) {
+  if (event.eventType === "client_message" || event.eventType === "server_message") {
+    const title = `Message ${event.eventType === "client_message" ? "Sent" : "Received"}`;
+
+    return (
+      <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
+        <EventDetailHeader
+          title={title}
+          timestamp={event.createdAt}
+          copyText={event.content}
+          onClose={onClose}
+        />
+        {!showLarge && event.content.length > 1000 * 1000 ? (
+          <VStack space={2} className="italic text-text-subtlest">
+            Message previews larger than 1MB are hidden
+            <div>
+              <Button
+                onClick={() => {
+                  setShowingLarge(true);
+                  setTimeout(() => {
+                    setShowLarge(true);
+                    setShowingLarge(false);
+                  }, 500);
+                }}
+                isLoading={showingLarge}
+                color="secondary"
+                variant="border"
+                size="xs"
+              >
+                Try Showing
+              </Button>
+            </div>
+          </VStack>
+        ) : (
+          <Editor
+            language="json"
+            defaultValue={event.content ?? ""}
+            wrapLines={false}
+            readOnly={true}
+            stateKey={null}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // Error or connection_end - show metadata/trailers
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
+      <EventDetailHeader title={event.content} timestamp={event.createdAt} onClose={onClose} />
+      {event.error && (
+        <div className="select-text cursor-text text-sm font-mono py-1 text-warning">
+          {event.error}
+        </div>
+      )}
+      <div className="py-2 h-full">
+        {Object.keys(event.metadata).length === 0 ? (
+          <EmptyStateText>
+            No {event.eventType === "connection_end" ? "trailers" : "metadata"}
+          </EmptyStateText>
+        ) : (
+          <KeyValueRows>
+            {Object.entries(event.metadata).map(([key, value]) => (
+              <KeyValueRow key={key} label={key}>
+                {value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function getEventDisplay(
+  eventType: GrpcEvent["eventType"],
+  status: GrpcEvent["status"],
+): { icon: IconProps["icon"]; color: IconProps["color"]; title: string } {
+  if (eventType === "server_message") {
+    return { icon: "arrow_big_down_dash", color: "info", title: "Server message" };
+  }
+  if (eventType === "client_message") {
+    return { icon: "arrow_big_up_dash", color: "primary", title: "Client message" };
+  }
+  if (eventType === "error" || (status != null && status > 0)) {
+    return { icon: "alert_triangle", color: "danger", title: "Error" };
+  }
+  if (eventType === "connection_end") {
+    return { icon: "check", color: "success", title: "Connection response" };
+  }
+  return { icon: "info", color: undefined, title: "Event" };
+}
diff --git a/apps/yaak-client/components/HeadersEditor.tsx b/apps/yaak-client/components/HeadersEditor.tsx
new file mode 100644
index 0000000..fa1d801
--- /dev/null
+++ b/apps/yaak-client/components/HeadersEditor.tsx
@@ -0,0 +1,190 @@
+import type { HttpRequestHeader } from "@yaakapp-internal/models";
+import { HStack } from "@yaakapp-internal/ui";
+import { acceptLanguages } from "../lib/data/acceptLanguages";
+import { cacheControlDirectives } from "../lib/data/cacheControl";
+import { charsets } from "../lib/data/charsets";
+import { connections } from "../lib/data/connections";
+import { encodings } from "../lib/data/encodings";
+import type { HeaderValuePreset } from "../lib/data/headerValuePresets";
+import { headerNames } from "../lib/data/headerNames";
+import { mimeTypes } from "../lib/data/mimetypes";
+import { userAgents } from "../lib/data/userAgents";
+import { CountBadge } from "./core/CountBadge";
+import { DetailsBanner } from "./core/DetailsBanner";
+import type { GenericCompletion, GenericCompletionConfig } from "./core/Editor/genericCompletion";
+import type { InputProps } from "./core/Input";
+import type { Pair, PairEditorProps } from "./core/PairEditor";
+import { PairEditorRow } from "./core/PairEditor";
+import { ensurePairId } from "./core/PairEditor.util";
+import { PairOrBulkEditor } from "./core/PairOrBulkEditor";
+
+type Props = {
+  forceUpdateKey: string;
+  headers: HttpRequestHeader[];
+  inheritedHeaders?: HttpRequestHeader[];
+  inheritedHeadersLabel?: string;
+  stateKey: string;
+  onChange: (headers: HttpRequestHeader[]) => void;
+  label?: string;
+};
+
+export function HeadersEditor({
+  stateKey,
+  headers,
+  inheritedHeaders,
+  inheritedHeadersLabel = "Inherited",
+  onChange,
+  forceUpdateKey,
+}: Props) {
+  // Get header names defined at current level (case-insensitive)
+  const currentHeaderNames = new Set(
+    headers.filter((h) => h.name).map((h) => h.name.toLowerCase()),
+  );
+  // Filter inherited headers: must be enabled, have content, and not be overridden by current level
+  const validInheritedHeaders =
+    inheritedHeaders?.filter(
+      (pair) =>
+        pair.enabled &&
+        (pair.name || pair.value) &&
+        !currentHeaderNames.has(pair.name.toLowerCase()),
+    ) ?? [];
+  const hasInheritedHeaders = validInheritedHeaders.length > 0;
+  return (
+    <div
+      className={
+        hasInheritedHeaders
+          ? "@container w-full h-full grid grid-rows-[auto_minmax(0,1fr)] gap-y-1.5"
+          : "@container w-full h-full"
+      }
+    >
+      {hasInheritedHeaders && (
+        <DetailsBanner
+          color="secondary"
+          className="text-sm"
+          summary={
+            <HStack>
+              {inheritedHeadersLabel} <CountBadge count={validInheritedHeaders.length} />
+            </HStack>
+          }
+        >
+          <div className="pb-2">
+            {validInheritedHeaders?.map((pair, i) => (
+              <PairEditorRow
+                key={`${pair.id}.${i}`}
+                index={i}
+                disabled
+                disableDrag
+                className="py-1"
+                pair={ensurePairId(pair)}
+                stateKey={null}
+                nameAutocompleteFunctions
+                nameAutocompleteVariables
+                valueAutocompleteFunctions
+                valueAutocompleteVariables
+              />
+            ))}
+          </div>
+        </DetailsBanner>
+      )}
+      <PairOrBulkEditor
+        forceUpdateKey={forceUpdateKey}
+        nameAutocomplete={nameAutocomplete}
+        nameAutocompleteFunctions
+        nameAutocompleteVariables
+        namePlaceholder="Header-Name"
+        nameValidate={validateHttpHeader}
+        onChange={onChange}
+        pairs={headers}
+        preferenceName="headers"
+        stateKey={stateKey}
+        valueType={valueType}
+        valueAutocomplete={valueAutocomplete}
+        valueAutocompleteFunctions
+        valueAutocompleteVariables
+      />
+    </div>
+  );
+}
+
+const MIN_MATCH = 3;
+
+const headerOptionsMap: Record<string, HeaderValuePreset[]> = {
+  "content-type": mimeTypes,
+  accept: ["*/*", ...mimeTypes],
+  "accept-encoding": encodings,
+  "content-encoding": encodings,
+  connection: connections,
+  "accept-charset": charsets,
+  "accept-language": acceptLanguages,
+  "cache-control": cacheControlDirectives,
+  "user-agent": userAgents,
+  pragma: ["no-cache"],
+  te: ["trailers", "compress", "deflate", "gzip"],
+  dnt: ["1", "0"],
+  "upgrade-insecure-requests": ["1"],
+  "x-requested-with": ["XMLHttpRequest"],
+};
+
+const valueType = (pair: Pair): InputProps["type"] => {
+  const name = pair.name.toLowerCase().trim();
+  if (
+    name.includes("authorization") ||
+    name.includes("api-key") ||
+    name.includes("access-token") ||
+    name.includes("auth") ||
+    name.includes("secret") ||
+    name.includes("token") ||
+    name === "cookie" ||
+    name === "set-cookie"
+  ) {
+    return "password";
+  }
+  return "text";
+};
+
+const valueAutocomplete = (headerName: string): GenericCompletionConfig | undefined => {
+  const name = headerName.toLowerCase().trim();
+  const options: GenericCompletion[] =
+    headerOptionsMap[name]?.map((o) =>
+      typeof o === "string"
+        ? {
+            label: o,
+            type: "constant",
+            boost: 1, // Put above other completions
+          }
+        : {
+            // Show the short label but insert the full value (e.g. User-Agent)
+            label: o.label,
+            apply: o.value,
+            type: "constant",
+            boost: 1,
+          },
+    ) ?? [];
+  return { minMatch: MIN_MATCH, options };
+};
+
+const nameAutocomplete: PairEditorProps["nameAutocomplete"] = {
+  minMatch: MIN_MATCH,
+  options: headerNames.map((t) =>
+    typeof t === "string"
+      ? {
+          label: t,
+          type: "constant",
+          boost: 1, // Put above other completions
+        }
+      : {
+          ...t,
+          boost: 1, // Put above other completions
+        },
+  ),
+};
+
+const validateHttpHeader = (v: string) => {
+  if (v === "") {
+    return true;
+  }
+
+  // Template strings are not allowed so we replace them with a valid example string
+  const withoutTemplateStrings = v.replace(/\$\{\[\s*[^\]\s]+\s*]}/gi, "123");
+  return withoutTemplateStrings.match(/^[a-zA-Z0-9-_]+$/) !== null;
+};
diff --git a/apps/yaak-client/components/HttpAuthenticationEditor.tsx b/apps/yaak-client/components/HttpAuthenticationEditor.tsx
new file mode 100644
index 0000000..0da989b
--- /dev/null
+++ b/apps/yaak-client/components/HttpAuthenticationEditor.tsx
@@ -0,0 +1,260 @@
+import type {
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+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";
+
+interface Props {
+  model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace;
+}
+
+export function HttpAuthenticationEditor({ model }: Props) {
+  const inheritedAuth = useInheritedAuthentication(model);
+  const authConfig = useHttpAuthenticationConfig(
+    model.authenticationType,
+    model.authentication,
+    model,
+  );
+
+  const handleChange = useCallback(
+    async (authentication: Record<string, unknown>) =>
+      await patchModel(model, { authentication }),
+    [model],
+  );
+
+  if (model.authenticationType === "none") {
+    return <EmptyStateText>No authentication</EmptyStateText>;
+  }
+
+  if (model.authenticationType != null && authConfig.data == null) {
+    return (
+      <EmptyStateText>
+        <p>
+          Auth plugin not found for{" "}
+          <InlineCode>{model.authenticationType}</InlineCode>
+        </p>
+      </EmptyStateText>
+    );
+  }
+
+  if (inheritedAuth == null) {
+    if (model.model === "workspace" || model.model === "folder") {
+      return (
+        <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>
+      );
+    }
+    return <EmptyStateText>No authentication</EmptyStateText>;
+  }
+
+  if (inheritedAuth.authenticationType === "none") {
+    return <EmptyStateText>No authentication</EmptyStateText>;
+  }
+
+  const wasAuthInherited = inheritedAuth?.id !== model.id;
+  if (wasAuthInherited) {
+    const name = resolvedModelName(inheritedAuth);
+    const cta = inheritedAuth.model === "workspace" ? "Workspace" : name;
+    return (
+      <EmptyStateText>
+        <p>
+          Inherited from{" "}
+          <button
+            type="submit"
+            className="underline hover:text-text"
+            onClick={() => {
+              if (inheritedAuth.model === "folder")
+                openFolderSettings(inheritedAuth.id, "auth");
+              else openWorkspaceSettings("auth");
+            }}
+          >
+            {cta}
+          </button>
+        </p>
+      </EmptyStateText>
+    );
+  }
+
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)] gap-y-3">
+      <div>
+        <HStack space={2} alignItems="start">
+          <SegmentedControl
+            label="Enabled"
+            hideLabel
+            name="enabled"
+            value={
+              model.authentication.disabled === false ||
+              model.authentication.disabled == null
+                ? "__TRUE__"
+                : model.authentication.disabled === true
+                  ? "__FALSE__"
+                  : "__DYNAMIC__"
+            }
+            options={[
+              { label: "Enabled", value: "__TRUE__" },
+              { label: "Disabled", value: "__FALSE__" },
+              { label: "Enabled when...", value: "__DYNAMIC__" },
+            ]}
+            onChange={async (enabled) => {
+              let disabled: boolean | string;
+              if (enabled === "__TRUE__") {
+                disabled = false;
+              } else if (enabled === "__FALSE__") {
+                disabled = true;
+              } else {
+                disabled = "";
+              }
+              await handleChange({ ...model.authentication, disabled });
+            }}
+          />
+          {authConfig.data?.actions && authConfig.data.actions.length > 0 && (
+            <Dropdown
+              items={authConfig.data.actions.map(
+                (a): DropdownItem => ({
+                  label: a.label,
+                  leftSlot: a.icon ? <Icon icon={a.icon} /> : null,
+                  onSelect: () => a.call(model),
+                }),
+              )}
+            >
+              <IconButton
+                title="Authentication Actions"
+                icon="settings"
+                size="xs"
+                className="text-secondary!"
+              />
+            </Dropdown>
+          )}
+        </HStack>
+        {typeof model.authentication.disabled === "string" && (
+          <div className="mt-3">
+            <AuthenticationDisabledInput
+              className="w-full"
+              stateKey={`auth.${model.id}.dynamic`}
+              value={model.authentication.disabled}
+              onChange={(v) =>
+                handleChange({ ...model.authentication, disabled: v })
+              }
+            />
+          </div>
+        )}
+      </div>
+      <DynamicForm
+        disabled={model.authentication.disabled === true}
+        autocompleteVariables
+        autocompleteFunctions
+        stateKey={`auth.${model.id}.${model.authenticationType}`}
+        inputs={authConfig.data?.args ?? []}
+        data={model.authentication}
+        onChange={handleChange}
+      />
+    </div>
+  );
+}
+
+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,
+  stateKey,
+  className,
+}: {
+  value: string;
+  onChange: InputProps["onChange"];
+  stateKey: string;
+  className?: string;
+}) {
+  const rendered = useRenderTemplate({
+    template: value,
+    enabled: true,
+    purpose: "preview",
+    refreshKey: value,
+  });
+
+  return (
+    <Input
+      size="sm"
+      className={className}
+      label="Dynamic Disabled"
+      hideLabel
+      defaultValue={value}
+      placeholder="Enabled when this renders a non-empty value"
+      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"}
+          </div>
+        </div>
+      }
+      autocompleteFunctions
+      autocompleteVariables
+      onChange={onChange}
+      stateKey={stateKey}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/HttpRequestLayout.tsx b/apps/yaak-client/components/HttpRequestLayout.tsx
new file mode 100644
index 0000000..251b0d1
--- /dev/null
+++ b/apps/yaak-client/components/HttpRequestLayout.tsx
@@ -0,0 +1,69 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import type { SlotProps } from "@yaakapp-internal/ui";
+import { SplitLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { CSSProperties } from "react";
+import { useCurrentGraphQLSchema } from "../hooks/useIntrospectGraphQL";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { workspaceLayoutAtom } from "../lib/atoms";
+import { GraphQLDocsExplorer } from "./graphql/GraphQLDocsExplorer";
+import { showGraphQLDocExplorerAtom } from "./graphql/graphqlAtoms";
+import { HttpRequestPane } from "./HttpRequestPane";
+import { HttpResponsePane } from "./HttpResponsePane";
+
+interface Props {
+  activeRequest: HttpRequest;
+  style: CSSProperties;
+}
+
+export function HttpRequestLayout({ activeRequest, style }: Props) {
+  const showGraphQLDocExplorer = useAtomValue(showGraphQLDocExplorerAtom);
+  const graphQLSchema = useCurrentGraphQLSchema(activeRequest);
+  const workspaceLayout = useAtomValue(workspaceLayoutAtom);
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  const wsId = activeWorkspace?.id ?? "n/a";
+
+  const requestResponseSplit = ({ style }: Pick<SlotProps, "style">) => (
+    <SplitLayout
+      storageKey={`http_layout::${wsId}`}
+      className="p-3 gap-1.5"
+      style={style}
+      layout={workspaceLayout}
+      firstSlot={({ orientation, style }) => (
+        <HttpRequestPane
+          style={style}
+          activeRequest={activeRequest}
+          fullHeight={orientation === "horizontal"}
+        />
+      )}
+      secondSlot={({ style }) => (
+        <HttpResponsePane activeRequestId={activeRequest.id} style={style} />
+      )}
+    />
+  );
+
+  if (
+    activeRequest.bodyType === "graphql" &&
+    showGraphQLDocExplorer[activeRequest.id] !== undefined &&
+    graphQLSchema != null
+  ) {
+    return (
+      <SplitLayout
+        storageKey={`graphql_layout::${wsId}`}
+        defaultRatio={1 / 3}
+        firstSlot={requestResponseSplit}
+        secondSlot={({ style, orientation }) => (
+          <GraphQLDocsExplorer
+            requestId={activeRequest.id}
+            schema={graphQLSchema}
+            className={classNames(orientation === "horizontal" && "ml-0!")}
+            style={style}
+          />
+        )}
+      />
+    );
+  }
+
+  return requestResponseSplit({ style });
+}
diff --git a/apps/yaak-client/components/HttpRequestPane.tsx b/apps/yaak-client/components/HttpRequestPane.tsx
new file mode 100644
index 0000000..494b469
--- /dev/null
+++ b/apps/yaak-client/components/HttpRequestPane.tsx
@@ -0,0 +1,497 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { getModel, patchModel, patchModelDebounced } from "@yaakapp-internal/models";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import classNames from "classnames";
+import { atom, useAtomValue } from "jotai";
+import type { CSSProperties } from "react";
+import { lazy, Suspense, useCallback, useMemo, useRef, useState } from "react";
+import { importCurl, looksLikeCurl } from "../commands/importCurl";
+import { allRequestUrlsAtom } from "../hooks/useAllRequests";
+import { useAuthTab } from "../hooks/useAuthTab";
+import { useCancelHttpResponse } from "../hooks/useCancelHttpResponse";
+import { useHeadersTab } from "../hooks/useHeadersTab";
+import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
+import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
+import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
+import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
+import { useSendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
+import { languageFromContentType } from "../lib/contentType";
+import { generateId } from "../lib/generateId";
+import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
+import { convertRequestBody } from "../lib/requestBodyConversion";
+import {
+  BODY_TYPE_BINARY,
+  BODY_TYPE_FORM_MULTIPART,
+  BODY_TYPE_FORM_URLENCODED,
+  BODY_TYPE_GRAPHQL,
+  BODY_TYPE_JSON,
+  BODY_TYPE_NONE,
+  BODY_TYPE_OTHER,
+  BODY_TYPE_XML,
+  getContentTypeFromHeaders,
+} from "../lib/model_util";
+import { prepareImportQuerystring } from "../lib/prepareImportQuerystring";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { showToast } from "../lib/toast";
+import { BinaryFileEditor } from "./BinaryFileEditor";
+import { ConfirmLargeRequestBody } from "./ConfirmLargeRequestBody";
+import { CountBadge } from "./core/CountBadge";
+import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
+import { getUrlCompletionConfig } from "./core/Editor/url/completion";
+import { Editor } from "./core/Editor/LazyEditor";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { PlainInput } from "./core/PlainInput";
+import type { TabItem, TabsRef } from "./core/Tabs/Tabs";
+import { setActiveTab, TabContent, Tabs } from "./core/Tabs/Tabs";
+import { EmptyStateText } from "./EmptyStateText";
+import { FormMultipartEditor } from "./FormMultipartEditor";
+import { FormUrlencodedEditor } from "./FormUrlencodedEditor";
+import { HeadersEditor } from "./HeadersEditor";
+import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
+import { JsonBodyEditor } from "./JsonBodyEditor";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { RequestMethodDropdown } from "./RequestMethodDropdown";
+import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
+import { UrlBar } from "./UrlBar";
+import { UrlParametersEditor } from "./UrlParameterEditor";
+
+const GraphQLEditor = lazy(() =>
+  import("./graphql/GraphQLEditor").then((m) => ({ default: m.GraphQLEditor })),
+);
+
+interface Props {
+  style: CSSProperties;
+  fullHeight: boolean;
+  className?: string;
+  activeRequest: HttpRequest;
+}
+
+const TAB_BODY = "body";
+const TAB_PARAMS = "params";
+const TAB_HEADERS = "headers";
+const TAB_AUTH = "auth";
+const TAB_SETTINGS = "settings";
+const TAB_DESCRIPTION = "description";
+const TABS_STORAGE_KEY = "http_request_tabs";
+
+// Derived from the identity-stable URL list so this only recomputes when a URL
+// actually changes. The active request's own URL is included, but exact matches
+// are filtered out at completion time by genericCompletion.
+const requestUrlOptionsAtom = atom((get): GenericCompletionOption[] =>
+  get(allRequestUrlsAtom).map((url) => ({ type: "constant", label: url })),
+);
+
+export function HttpRequestPane({ style, fullHeight, className, activeRequest }: Props) {
+  const activeRequestId = activeRequest.id;
+  const tabsRef = useRef<TabsRef>(null);
+  const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
+  const forceUpdateKey = useRequestUpdateKey(activeRequest.id ?? null);
+  const [{ urlKey }, { forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
+  const contentType = getContentTypeFromHeaders(activeRequest.headers);
+  const authTab = useAuthTab(TAB_AUTH, activeRequest);
+  const headersTab = useHeadersTab(TAB_HEADERS, activeRequest);
+  const inheritedHeaders = useInheritedHeaders(activeRequest);
+  const numSettingsOverrides = countOverriddenSettings(activeRequest);
+
+  // Listen for event to focus the params tab (e.g., when clicking a :param in the URL)
+  useRequestEditorEvent(
+    "request_pane.focus_tab",
+    () => {
+      tabsRef.current?.setActiveTab(TAB_PARAMS);
+    },
+    [],
+  );
+
+  const handleContentTypeChange = useCallback(
+    async (contentType: string | null, patch: Partial<Omit<HttpRequest, "headers">> = {}) => {
+      if (activeRequest == null) {
+        console.error("Failed to get active request to update", activeRequest);
+        return;
+      }
+
+      const headers = activeRequest.headers.filter((h) => h.name.toLowerCase() !== "content-type");
+
+      if (contentType != null) {
+        headers.push({
+          name: "Content-Type",
+          value: contentType,
+          enabled: true,
+          id: generateId(),
+        });
+      }
+      await patchModel(activeRequest, { ...patch, headers });
+
+      // Force update header editor so any changed headers are reflected
+      setTimeout(() => setForceUpdateHeaderEditorKey((u) => u + 1), 100);
+    },
+    [activeRequest],
+  );
+
+  // Renaming a path placeholder has to rewrite the URL and rename the parameter together, or the
+  // value detaches from the placeholder.
+  // NOTE: Reads the request fresh rather than closing over `activeRequest`. The row that calls this
+  //  holds onto it until the URL's placeholders change, so a captured request would go stale and
+  //  patch its parameter list back over newer edits.
+  const handleRenamePathPlaceholder = useCallback(
+    (oldName: string, newName: string) => {
+      const request = getModel("http_request", activeRequestId);
+      if (request == null) return false;
+
+      const patch = renamePathPlaceholder(request, oldName, newName);
+      if (patch == null) return false; // Unusable name, so the editor reverts the field
+      void patchModel(request, patch);
+      return true;
+    },
+    [activeRequestId],
+  );
+
+  const { urlParameterPairs, urlParametersKey } = useMemo(
+    () =>
+      derivePathPlaceholderPairs(
+        activeRequest.url,
+        activeRequest.urlParameters,
+        handleRenamePathPlaceholder,
+      ),
+    [activeRequest.url, activeRequest.urlParameters, handleRenamePathPlaceholder],
+  );
+
+  let numParams = 0;
+  if (
+    activeRequest.bodyType === BODY_TYPE_FORM_URLENCODED ||
+    activeRequest.bodyType === BODY_TYPE_FORM_MULTIPART
+  ) {
+    numParams = Array.isArray(activeRequest.body?.form)
+      ? activeRequest.body.form.filter((p) => p.name).length
+      : 0;
+  }
+
+  const hasDescription = activeRequest.description.trim().length > 0;
+
+  const tabs = useMemo<TabItem[]>(
+    () => [
+      {
+        value: TAB_BODY,
+        rightSlot: numParams > 0 ? <CountBadge count={numParams} /> : null,
+        options: {
+          value: activeRequest.bodyType,
+          items: [
+            { type: "separator", label: "Form Data" },
+            { label: "Url Encoded", value: BODY_TYPE_FORM_URLENCODED },
+            { label: "Multi-Part", value: BODY_TYPE_FORM_MULTIPART },
+            { type: "separator", label: "Text Content" },
+            { label: "GraphQL", value: BODY_TYPE_GRAPHQL },
+            { label: "JSON", value: BODY_TYPE_JSON },
+            { label: "XML", value: BODY_TYPE_XML },
+            {
+              label: "Other",
+              value: BODY_TYPE_OTHER,
+              shortLabel: nameOfContentTypeOr(contentType, "Other"),
+            },
+            { type: "separator", label: "Other" },
+            { label: "Binary File", value: BODY_TYPE_BINARY },
+            { label: "No Body", shortLabel: "Body", value: BODY_TYPE_NONE },
+          ],
+          onChange: async (bodyType) => {
+            if (bodyType === activeRequest.bodyType) return;
+
+            const showMethodToast = (newMethod: string) => {
+              if (activeRequest.method.toLowerCase() === newMethod.toLowerCase()) return;
+              showToast({
+                id: "switched-method",
+                message: (
+                  <>
+                    Request method switched to <InlineCode>POST</InlineCode>
+                  </>
+                ),
+              });
+            };
+
+            const patch: Partial<HttpRequest> = {
+              bodyType,
+              body: convertRequestBody({
+                body: activeRequest.body,
+                fromBodyType: activeRequest.bodyType,
+                toBodyType: bodyType,
+              }),
+            };
+            let newContentType: string | null | undefined;
+            if (bodyType === BODY_TYPE_NONE) {
+              newContentType = null;
+            } else if (
+              bodyType === BODY_TYPE_FORM_URLENCODED ||
+              bodyType === BODY_TYPE_FORM_MULTIPART ||
+              bodyType === BODY_TYPE_JSON ||
+              bodyType === BODY_TYPE_OTHER ||
+              bodyType === BODY_TYPE_XML
+            ) {
+              const isDefaultishRequest =
+                activeRequest.bodyType === BODY_TYPE_NONE &&
+                activeRequest.method.toLowerCase() === "get";
+              const requiresPost = bodyType === BODY_TYPE_FORM_MULTIPART;
+              if (isDefaultishRequest || requiresPost) {
+                patch.method = "POST";
+                showMethodToast(patch.method);
+              }
+              newContentType = bodyType === BODY_TYPE_OTHER ? "text/plain" : bodyType;
+            } else if (bodyType === BODY_TYPE_GRAPHQL) {
+              patch.method = "POST";
+              newContentType = "application/json";
+              showMethodToast(patch.method);
+            }
+
+            if (newContentType !== undefined) {
+              await handleContentTypeChange(newContentType, patch);
+            } else {
+              await patchModel(activeRequest, patch);
+            }
+          },
+        },
+      },
+      {
+        value: TAB_PARAMS,
+        rightSlot: <CountBadge count={urlParameterPairs.length} />,
+        label: "Params",
+      },
+      ...headersTab,
+      ...authTab,
+      {
+        value: TAB_SETTINGS,
+        label: "Settings",
+        rightSlot: <CountBadge count={numSettingsOverrides} />,
+      },
+      {
+        value: TAB_DESCRIPTION,
+        label: "Info",
+        rightSlot: hasDescription && <CountBadge count={true} />,
+      },
+    ],
+    [
+      activeRequest,
+      authTab,
+      contentType,
+      handleContentTypeChange,
+      hasDescription,
+      headersTab,
+      numParams,
+      numSettingsOverrides,
+      urlParameterPairs.length,
+    ],
+  );
+
+  const { mutate: sendRequest } = useSendAnyHttpRequest();
+  const { activeResponse } = usePinnedHttpResponse(activeRequestId);
+  const { mutate: cancelResponse } = useCancelHttpResponse(activeResponse?.id ?? null);
+  const updateKey = useRequestUpdateKey(activeRequestId);
+
+  const handleBodyChange = useCallback(
+    (body: HttpRequest["body"]) => patchModelDebounced(activeRequest, { body }),
+    [activeRequest],
+  );
+
+  const handleBodyTextChange = useCallback(
+    (text: string) => patchModelDebounced(activeRequest, { body: { ...activeRequest.body, text } }),
+    [activeRequest],
+  );
+
+  const autocompleteUrls = useAtomValue(requestUrlOptionsAtom);
+
+  const autocomplete: GenericCompletionConfig = useMemo(
+    () => getUrlCompletionConfig(autocompleteUrls),
+    [autocompleteUrls],
+  );
+
+  const handlePaste = useCallback(
+    async (e: ClipboardEvent, text: string) => {
+      if (looksLikeCurl(text)) {
+        importCurl.mutate({ overwriteRequestId: activeRequestId, command: text });
+      } else {
+        const patch = prepareImportQuerystring(text);
+        if (patch != null) {
+          e.preventDefault(); // Prevent input onChange
+
+          await patchModel(activeRequest, patch);
+          await setActiveTab({
+            storageKey: TABS_STORAGE_KEY,
+            activeTabKey: activeRequestId,
+            value: TAB_PARAMS,
+          });
+
+          // Wait for request to update, then refresh the UI
+          // TODO: Somehow make this deterministic
+          setTimeout(() => {
+            forceUrlRefresh();
+            forceParamsRefresh();
+          }, 100);
+        }
+      }
+    },
+    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh],
+  );
+  const handleSend = useCallback(
+    () => sendRequest(activeRequest.id ?? null),
+    [activeRequest.id, sendRequest],
+  );
+
+  const handleUrlChange = useCallback(
+    (url: string) => patchModelDebounced(activeRequest, { url }),
+    [activeRequest],
+  );
+
+  return (
+    <div
+      style={style}
+      className={classNames(className, "h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1")}
+    >
+      {activeRequest && (
+        <>
+          <UrlBar
+            stateKey={`url.${activeRequest.id}`}
+            key={forceUpdateKey + urlKey}
+            url={activeRequest.url}
+            placeholder="https://example.com"
+            onPasteOverwrite={handlePaste}
+            autocomplete={autocomplete}
+            onSend={handleSend}
+            onCancel={cancelResponse}
+            onUrlChange={handleUrlChange}
+            leftSlot={
+              <div className="py-0.5">
+                <RequestMethodDropdown request={activeRequest} className="ml-0.5 h-full!" />
+              </div>
+            }
+            forceUpdateKey={updateKey}
+            isLoading={activeResponse != null && activeResponse.state !== "closed"}
+          />
+          <Tabs
+            ref={tabsRef}
+            label="Request"
+            tabs={tabs}
+            tabListClassName="mt-1 -mb-1.5"
+            storageKey={TABS_STORAGE_KEY}
+            activeTabKey={activeRequestId}
+          >
+            <TabContent value={TAB_AUTH}>
+              <HttpAuthenticationEditor model={activeRequest} />
+            </TabContent>
+            <TabContent value={TAB_HEADERS}>
+              <HeadersEditor
+                inheritedHeaders={inheritedHeaders}
+                forceUpdateKey={`${forceUpdateHeaderEditorKey}::${forceUpdateKey}`}
+                headers={activeRequest.headers}
+                stateKey={`headers.${activeRequest.id}`}
+                onChange={(headers) => patchModelDebounced(activeRequest, { headers })}
+              />
+            </TabContent>
+            <TabContent value={TAB_PARAMS}>
+              <UrlParametersEditor
+                stateKey={`params.${activeRequest.id}`}
+                forceUpdateKey={forceUpdateKey + urlParametersKey}
+                pairs={urlParameterPairs}
+                onChange={(urlParameters) => patchModelDebounced(activeRequest, { urlParameters })}
+              />
+            </TabContent>
+            <TabContent value={TAB_SETTINGS}>
+              <ModelSettingsEditor model={activeRequest} />
+            </TabContent>
+            <TabContent value={TAB_BODY}>
+              <ConfirmLargeRequestBody request={activeRequest}>
+                {activeRequest.bodyType === BODY_TYPE_JSON ? (
+                  <JsonBodyEditor
+                    forceUpdateKey={forceUpdateKey}
+                    heightMode={fullHeight ? "full" : "auto"}
+                    request={activeRequest}
+                  />
+                ) : activeRequest.bodyType === BODY_TYPE_XML ? (
+                  <Editor
+                    forceUpdateKey={forceUpdateKey}
+                    autocompleteFunctions
+                    autocompleteVariables
+                    placeholder="..."
+                    heightMode={fullHeight ? "full" : "auto"}
+                    defaultValue={`${activeRequest.body?.text ?? ""}`}
+                    language="xml"
+                    onChange={handleBodyTextChange}
+                    stateKey={`xml.${activeRequest.id}`}
+                  />
+                ) : activeRequest.bodyType === BODY_TYPE_GRAPHQL ? (
+                  <Suspense>
+                    <GraphQLEditor
+                      forceUpdateKey={forceUpdateKey}
+                      baseRequest={activeRequest}
+                      request={activeRequest}
+                      onChange={handleBodyChange}
+                    />
+                  </Suspense>
+                ) : activeRequest.bodyType === BODY_TYPE_FORM_URLENCODED ? (
+                  <FormUrlencodedEditor
+                    forceUpdateKey={forceUpdateKey}
+                    request={activeRequest}
+                    onChange={handleBodyChange}
+                  />
+                ) : activeRequest.bodyType === BODY_TYPE_FORM_MULTIPART ? (
+                  <FormMultipartEditor
+                    forceUpdateKey={forceUpdateKey}
+                    request={activeRequest}
+                    onChange={handleBodyChange}
+                  />
+                ) : activeRequest.bodyType === BODY_TYPE_BINARY ? (
+                  <BinaryFileEditor
+                    requestId={activeRequest.id}
+                    contentType={contentType}
+                    body={activeRequest.body}
+                    onChange={(body) => patchModelDebounced(activeRequest, { body })}
+                    onChangeContentType={handleContentTypeChange}
+                  />
+                ) : typeof activeRequest.bodyType === "string" ? (
+                  <Editor
+                    forceUpdateKey={forceUpdateKey}
+                    autocompleteFunctions
+                    autocompleteVariables
+                    language={languageFromContentType(contentType)}
+                    placeholder="..."
+                    heightMode={fullHeight ? "full" : "auto"}
+                    defaultValue={`${activeRequest.body?.text ?? ""}`}
+                    onChange={handleBodyTextChange}
+                    stateKey={`other.${activeRequest.id}`}
+                  />
+                ) : (
+                  <EmptyStateText>No Body</EmptyStateText>
+                )}
+              </ConfirmLargeRequestBody>
+            </TabContent>
+            <TabContent value={TAB_DESCRIPTION}>
+              <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
+                <PlainInput
+                  label="Request Name"
+                  hideLabel
+                  forceUpdateKey={updateKey}
+                  defaultValue={activeRequest.name}
+                  className="font-sans text-xl! px-0!"
+                  containerClassName="border-0"
+                  placeholder={resolvedModelName(activeRequest)}
+                  onChange={(name) => patchModel(activeRequest, { name })}
+                />
+                <MarkdownEditor
+                  name="request-description"
+                  placeholder="Request description"
+                  defaultValue={activeRequest.description}
+                  stateKey={`description.${activeRequest.id}`}
+                  forceUpdateKey={updateKey}
+                  onChange={(description) => patchModel(activeRequest, { description })}
+                />
+              </div>
+            </TabContent>
+          </Tabs>
+        </>
+      )}
+    </div>
+  );
+}
+
+function nameOfContentTypeOr(contentType: string | null, fallback: string) {
+  const language = languageFromContentType(contentType);
+  if (language === "markdown") {
+    return "Markdown";
+  }
+  return fallback;
+}
diff --git a/apps/yaak-client/components/HttpResponsePane.tsx b/apps/yaak-client/components/HttpResponsePane.tsx
new file mode 100644
index 0000000..8d0697d
--- /dev/null
+++ b/apps/yaak-client/components/HttpResponsePane.tsx
@@ -0,0 +1,461 @@
+import type { HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
+import { Banner, HStack, Icon, LoadingIcon, VStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { ComponentType, CSSProperties } from "react";
+import { lazy, Suspense, useMemo } from "react";
+import { useCancelHttpResponse } from "../hooks/useCancelHttpResponse";
+import { useCopyHttpResponse } from "../hooks/useCopyHttpResponse";
+import { useHttpResponseEvents } from "../hooks/useHttpResponseEvents";
+import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
+import { useResponseBodyBytes, useResponseBodyText } from "../hooks/useResponseBodyText";
+import { useResponseBodyUrl } from "../hooks/useResponseBodyUrl";
+import { useResponseViewMode } from "../hooks/useResponseViewMode";
+import { useSaveResponse } from "../hooks/useSaveResponse";
+import { useTimelineViewMode } from "../hooks/useTimelineViewMode";
+import { getMimeTypeFromContentType } from "../lib/contentType";
+import { getContentTypeFromHeaders, getCookieCounts } from "../lib/model_util";
+import { ConfirmLargeResponse } from "./ConfirmLargeResponse";
+import { ConfirmLargeResponseRequest } from "./ConfirmLargeResponseRequest";
+import { Button } from "./core/Button";
+import { CountBadge } from "./core/CountBadge";
+import { HotkeyList } from "./core/HotkeyList";
+import { HttpResponseDurationTag } from "./core/HttpResponseDurationTag";
+import { HttpStatusTag } from "./core/HttpStatusTag";
+import { PillButton } from "./core/PillButton";
+import { SizeTag } from "./core/SizeTag";
+import type { TabItem } from "./core/Tabs/Tabs";
+import { TabContent, Tabs } from "./core/Tabs/Tabs";
+import { Tooltip } from "./core/Tooltip";
+import { EmptyStateText } from "./EmptyStateText";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { HttpResponseTimeline } from "./HttpResponseTimeline";
+import { RecentHttpResponsesDropdown } from "./RecentHttpResponsesDropdown";
+import { RequestBodyViewer } from "./RequestBodyViewer";
+import { ResponseCookies } from "./ResponseCookies";
+import { ResponseHeaders } from "./ResponseHeaders";
+import { AudioViewer } from "./responseViewers/AudioViewer";
+import { CsvViewer } from "./responseViewers/CsvViewer";
+import { EventStreamViewer } from "./responseViewers/EventStreamViewer";
+import { HTMLOrTextViewer } from "./responseViewers/HTMLOrTextViewer";
+import { ImageViewer } from "./responseViewers/ImageViewer";
+import { MultipartViewer } from "./responseViewers/MultipartViewer";
+import { SvgViewer } from "./responseViewers/SvgViewer";
+import { VideoViewer } from "./responseViewers/VideoViewer";
+
+const PdfViewer = lazy(() =>
+  import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),
+);
+
+interface Props {
+  style?: CSSProperties;
+  className?: string;
+  activeRequestId: string;
+}
+
+const TAB_BODY = "body";
+const TAB_REQUEST = "request";
+const TAB_HEADERS = "headers";
+const TAB_COOKIES = "cookies";
+const TAB_TIMELINE = "timeline";
+
+export type TimelineViewMode = "timeline" | "text";
+
+interface RedirectDropWarning {
+  droppedBodyCount: number;
+  droppedHeaders: string[];
+}
+
+export function HttpResponsePane({ style, className, activeRequestId }: Props) {
+  const { activeResponse, setPinnedResponseId, responses } = usePinnedHttpResponse(activeRequestId);
+  const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
+  const [timelineViewMode, setTimelineViewMode] = useTimelineViewMode();
+  const contentType = getContentTypeFromHeaders(activeResponse?.headers ?? null);
+  const mimeType = contentType == null ? null : getMimeTypeFromContentType(contentType).essence;
+
+  const responseEvents = useHttpResponseEvents(activeResponse);
+  const redirectDropWarning = useMemo(
+    () => getRedirectDropWarning(responseEvents.data),
+    [responseEvents.data],
+  );
+  const shouldShowRedirectDropWarning =
+    activeResponse?.state === "closed" && redirectDropWarning != null;
+
+  const cookieCounts = useMemo(() => getCookieCounts(responseEvents.data), [responseEvents.data]);
+  const saveResponse = useSaveResponse(activeResponse ?? null);
+  const copyResponse = useCopyHttpResponse(activeResponse ?? null);
+
+  const tabs = useMemo<TabItem[]>(
+    () => [
+      {
+        value: TAB_BODY,
+        label: "Response",
+        options: {
+          value: viewMode,
+          onChange: setViewMode,
+          items: [
+            { label: "Response", value: "pretty" },
+            ...(mimeType?.startsWith("image")
+              ? []
+              : [{ label: "Response (Raw)", shortLabel: "Raw", value: "raw" }]),
+          ],
+          itemsAfter: [
+            {
+              label: "Save to File",
+              onSelect: saveResponse.mutate,
+              leftSlot: <Icon icon="save" />,
+              hidden: activeResponse == null || !!activeResponse.error,
+              disabled: activeResponse?.state !== "closed" && (activeResponse?.status ?? 0) >= 100,
+            },
+            {
+              label: "Copy Body",
+              onSelect: copyResponse.mutate,
+              leftSlot: <Icon icon="copy" />,
+              hidden: activeResponse == null || !!activeResponse.error,
+              disabled: activeResponse?.state !== "closed" && (activeResponse?.status ?? 0) >= 100,
+            },
+          ],
+        },
+      },
+      {
+        value: TAB_REQUEST,
+        label: "Request",
+        rightSlot:
+          (activeResponse?.requestContentLength ?? 0) > 0 ? <CountBadge count={true} /> : null,
+      },
+      {
+        value: TAB_HEADERS,
+        label: "Headers",
+        rightSlot: (
+          <CountBadge
+            count={activeResponse?.requestHeaders.length ?? 0}
+            count2={activeResponse?.headers.length ?? 0}
+            showZero
+          />
+        ),
+      },
+      {
+        value: TAB_COOKIES,
+        label: "Cookies",
+        rightSlot:
+          cookieCounts.sent > 0 || cookieCounts.received > 0 ? (
+            <CountBadge count={cookieCounts.sent} count2={cookieCounts.received} showZero />
+          ) : null,
+      },
+      {
+        value: TAB_TIMELINE,
+        rightSlot: <CountBadge count={responseEvents.data?.length ?? 0} />,
+        options: {
+          value: timelineViewMode,
+          onChange: (v) => setTimelineViewMode((v as TimelineViewMode) ?? "timeline"),
+          items: [
+            { label: "Timeline", value: "timeline" },
+            { label: "Timeline (Text)", shortLabel: "Timeline", value: "text" },
+          ],
+        },
+      },
+    ],
+    [
+      activeResponse?.headers,
+      activeResponse,
+      activeResponse?.error,
+      activeResponse?.requestContentLength,
+      activeResponse?.requestHeaders.length,
+      activeResponse?.state,
+      activeResponse?.status,
+      cookieCounts.sent,
+      cookieCounts.received,
+      copyResponse.mutate,
+      mimeType,
+      responseEvents.data?.length,
+      saveResponse.mutate,
+      setViewMode,
+      viewMode,
+      timelineViewMode,
+      setTimelineViewMode,
+    ],
+  );
+
+  const cancel = useCancelHttpResponse(activeResponse?.id ?? null);
+
+  return (
+    <div
+      style={style}
+      className={classNames(
+        className,
+        "x-theme-responsePane",
+        "max-h-full h-full",
+        "bg-surface rounded-md border border-border-subtle overflow-hidden",
+        "relative",
+      )}
+    >
+      {activeResponse == null ? (
+        <HotkeyList hotkeys={["request.send", "model.create", "sidebar.focus", "url_bar.focus"]} />
+      ) : (
+        <div className="h-full w-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1">
+          <HStack
+            className={classNames(
+              "text-text-subtle w-full shrink-0",
+              // Remove a bit of space because the tabs have lots too
+              "-mb-1.5",
+            )}
+          >
+            {activeResponse && (
+              <div
+                className={classNames(
+                  "grid grid-cols-[auto_minmax(4rem,1fr)_auto]",
+                  "cursor-default select-none",
+                  "whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm hide-scrollbars",
+                )}
+              >
+                <HStack space={2} className="w-full shrink-0">
+                  {activeResponse.state !== "closed" && <LoadingIcon size="sm" />}
+                  <HttpStatusTag showReason response={activeResponse} />
+                  <span>•</span>
+                  <HttpResponseDurationTag response={activeResponse} />
+                  <span>•</span>
+                  <SizeTag
+                    contentLength={activeResponse.contentLength ?? 0}
+                    contentLengthCompressed={activeResponse.contentLengthCompressed}
+                  />
+                </HStack>
+                {shouldShowRedirectDropWarning ? (
+                  <Tooltip
+                    tabIndex={0}
+                    className="my-auto pl-3 shrink-0 max-w-full justify-self-end overflow-hidden"
+                    content={
+                      <VStack alignItems="start" space={1} className="text-xs">
+                        <span className="font-medium text-warning">
+                          Redirect changed this request
+                        </span>
+                        {redirectDropWarning.droppedBodyCount > 0 && (
+                          <span>
+                            Body dropped on {redirectDropWarning.droppedBodyCount}{" "}
+                            {redirectDropWarning.droppedBodyCount === 1
+                              ? "redirect hop"
+                              : "redirect hops"}
+                          </span>
+                        )}
+                        {redirectDropWarning.droppedHeaders.length > 0 && (
+                          <span>
+                            Headers dropped:{" "}
+                            <span className="font-mono">
+                              {redirectDropWarning.droppedHeaders.join(", ")}
+                            </span>
+                          </span>
+                        )}
+                        <span className="text-text-subtle">See Timeline for details.</span>
+                      </VStack>
+                    }
+                  >
+                    <span className="inline-flex min-w-0">
+                      <PillButton
+                        color="warning"
+                        className="font-sans text-sm shrink! max-w-full"
+                        innerClassName="flex items-center"
+                        leftSlot={<Icon icon="alert_triangle" size="xs" color="warning" />}
+                      >
+                        <span className="truncate">
+                          {getRedirectWarningLabel(redirectDropWarning)}
+                        </span>
+                      </PillButton>
+                    </span>
+                  </Tooltip>
+                ) : (
+                  <span />
+                )}
+                <div className="justify-self-end shrink-0">
+                  <RecentHttpResponsesDropdown
+                    responses={responses}
+                    activeResponse={activeResponse}
+                    onPinnedResponseId={setPinnedResponseId}
+                  />
+                </div>
+              </div>
+            )}
+          </HStack>
+
+          <div className="overflow-hidden flex flex-col min-h-0">
+            {activeResponse?.error && (
+              <Banner color="danger" className="mx-3 mt-1 shrink-0">
+                {activeResponse.error}
+              </Banner>
+            )}
+            {/* Show tabs if we have any data (headers, body, etc.) even if there's an error */}
+            <Tabs
+              tabs={tabs}
+              label="Response"
+              className="ml-3 mr-3 mb-3 min-h-0 flex-1"
+              tabListClassName="mt-0.5 -mb-1.5"
+              storageKey="http_response_tabs"
+              activeTabKey={activeRequestId}
+            >
+              <TabContent value={TAB_BODY}>
+                <ErrorBoundary name="Http Response Viewer">
+                  <Suspense>
+                    <ConfirmLargeResponse response={activeResponse}>
+                      {activeResponse.state === "initialized" ? (
+                        <EmptyStateText>
+                          <VStack space={3}>
+                            <HStack space={3}>
+                              <LoadingIcon className="text-text-subtlest" />
+                              Sending Request
+                            </HStack>
+                            <Button size="sm" variant="border" onClick={() => cancel.mutate()}>
+                              Cancel
+                            </Button>
+                          </VStack>
+                        </EmptyStateText>
+                      ) : activeResponse.state === "closed" &&
+                        (activeResponse.contentLength ?? 0) === 0 ? (
+                        <EmptyStateText>Empty</EmptyStateText>
+                      ) : mimeType?.match(/^text\/event-stream/i) && viewMode === "pretty" ? (
+                        <EventStreamViewer response={activeResponse} />
+                      ) : mimeType?.match(/^image\/svg/) ? (
+                        <HttpSvgViewer response={activeResponse} />
+                      ) : mimeType?.match(/^image/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={ImageViewer} />
+                      ) : mimeType?.match(/^audio/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={AudioViewer} />
+                      ) : mimeType?.match(/^video/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={VideoViewer} />
+                      ) : mimeType?.match(/^multipart/i) && viewMode === "pretty" ? (
+                        <HttpMultipartViewer response={activeResponse} />
+                      ) : mimeType?.match(/pdf/i) ? (
+                        <EnsureCompleteResponse response={activeResponse} Component={PdfViewer} />
+                      ) : mimeType?.match(/csv|tab-separated/i) && viewMode === "pretty" ? (
+                        <HttpCsvViewer className="pb-2" response={activeResponse} />
+                      ) : (
+                        <HTMLOrTextViewer
+                          textViewerClassName="-mr-2 bg-surface" // Pull to the right
+                          response={activeResponse}
+                          pretty={viewMode === "pretty"}
+                        />
+                      )}
+                    </ConfirmLargeResponse>
+                  </Suspense>
+                </ErrorBoundary>
+              </TabContent>
+              <TabContent value={TAB_REQUEST}>
+                <ConfirmLargeResponseRequest response={activeResponse}>
+                  <RequestBodyViewer response={activeResponse} />
+                </ConfirmLargeResponseRequest>
+              </TabContent>
+              <TabContent value={TAB_HEADERS}>
+                <ResponseHeaders response={activeResponse} />
+              </TabContent>
+              <TabContent value={TAB_COOKIES}>
+                <ResponseCookies response={activeResponse} />
+              </TabContent>
+              <TabContent value={TAB_TIMELINE}>
+                <HttpResponseTimeline response={activeResponse} viewMode={timelineViewMode} />
+              </TabContent>
+            </Tabs>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getRedirectDropWarning(
+  events: HttpResponseEvent[] | undefined,
+): RedirectDropWarning | null {
+  if (events == null || events.length === 0) return null;
+
+  let droppedBodyCount = 0;
+  const droppedHeaders = new Set<string>();
+  for (const e of events) {
+    const event = e.event;
+    if (event.type !== "redirect") {
+      continue;
+    }
+
+    if (event.dropped_body) {
+      droppedBodyCount += 1;
+    }
+    for (const headerName of event.dropped_headers ?? []) {
+      pushHeaderName(droppedHeaders, headerName);
+    }
+  }
+
+  if (droppedBodyCount === 0 && droppedHeaders.size === 0) {
+    return null;
+  }
+
+  return {
+    droppedBodyCount,
+    droppedHeaders: Array.from(droppedHeaders).sort(),
+  };
+}
+
+function pushHeaderName(headers: Set<string>, headerName: string): void {
+  const existing = Array.from(headers).find((h) => h.toLowerCase() === headerName.toLowerCase());
+  if (existing == null) {
+    headers.add(headerName);
+  }
+}
+
+function getRedirectWarningLabel(warning: RedirectDropWarning): string {
+  if (warning.droppedBodyCount > 0 && warning.droppedHeaders.length > 0) {
+    return "Dropped body and headers";
+  }
+  if (warning.droppedBodyCount > 0) {
+    return "Dropped body";
+  }
+  return "Dropped headers";
+}
+
+function EnsureCompleteResponse({
+  response,
+  Component,
+}: {
+  response: HttpResponse;
+  Component: ComponentType<{ bodyUrl: string }>;
+}) {
+  // Wait until the response has been fully-downloaded before asking for it
+  const complete = response.state === "closed";
+  const bodyUrl = useResponseBodyUrl(complete ? response : null);
+
+  if (!complete || bodyUrl.isPending) {
+    return (
+      <EmptyStateText>
+        <LoadingIcon />
+      </EmptyStateText>
+    );
+  }
+
+  if (bodyUrl.error) {
+    return <Banner color="danger">{String(bodyUrl.error)}</Banner>;
+  }
+
+  if (bodyUrl.data == null) {
+    return <div>Empty response body</div>;
+  }
+
+  return <Component bodyUrl={bodyUrl.data} />;
+}
+
+function HttpSvgViewer({ response }: { response: HttpResponse }) {
+  const body = useResponseBodyText({ response, filter: null });
+
+  if (!body.data) return null;
+
+  return <SvgViewer text={body.data} />;
+}
+
+function HttpCsvViewer({ response, className }: { response: HttpResponse; className?: string }) {
+  const body = useResponseBodyText({ response, filter: null });
+
+  return <CsvViewer text={body.data ?? null} className={className} />;
+}
+
+function HttpMultipartViewer({ response }: { response: HttpResponse }) {
+  const body = useResponseBodyBytes({ response });
+
+  if (body.data == null) return null;
+
+  const contentTypeHeader = getContentTypeFromHeaders(response.headers);
+  const boundary = contentTypeHeader?.split("boundary=")[1] ?? "unknown";
+
+  return <MultipartViewer data={body.data} boundary={boundary} idPrefix={response.id} />;
+}
diff --git a/apps/yaak-client/components/HttpResponseTimeline.tsx b/apps/yaak-client/components/HttpResponseTimeline.tsx
new file mode 100644
index 0000000..4475b4a
--- /dev/null
+++ b/apps/yaak-client/components/HttpResponseTimeline.tsx
@@ -0,0 +1,466 @@
+import type {
+  AnyModel,
+  HttpResponse,
+  HttpResponseEvent,
+  HttpResponseEventData,
+} from "@yaakapp-internal/models";
+import { foldersAtom, workspacesAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { type ReactNode, useMemo, useState } from "react";
+import { useHttpResponseEvents } from "../hooks/useHttpResponseEvents";
+import { useAllRequests } from "../hooks/useAllRequests";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { Editor } from "./core/Editor/LazyEditor";
+import { type EventDetailAction, EventDetailHeader, EventViewer } from "./core/EventViewer";
+import { EventViewerRow } from "./core/EventViewerRow";
+import { HttpStatusTagRaw } from "./core/HttpStatusTag";
+import { Icon, type IconProps } from "@yaakapp-internal/ui";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import type { TimelineViewMode } from "./HttpResponsePane";
+
+interface Props {
+  response: HttpResponse;
+  viewMode: TimelineViewMode;
+}
+
+export function HttpResponseTimeline({ response, viewMode }: Props) {
+  return <Inner key={response.id} response={response} viewMode={viewMode} />;
+}
+
+function Inner({ response, viewMode }: Props) {
+  const [showRaw, setShowRaw] = useState(false);
+  const { data: events, error, isLoading } = useHttpResponseEvents(response);
+
+  // Generate plain text representation of all events (with prefixes for timeline view)
+  const plainText = useMemo(() => {
+    if (!events || events.length === 0) return "";
+    return events.map((event) => formatEventText(event.event, true)).join("\n");
+  }, [events]);
+
+  // Plain text view - show all events as text in an editor
+  if (viewMode === "text") {
+    if (isLoading) {
+      return <div className="p-4 text-text-subtlest">Loading events...</div>;
+    } else if (error) {
+      return <div className="p-4 text-danger">{String(error)}</div>;
+    } else if (!events || events.length === 0) {
+      return <div className="p-4 text-text-subtlest">No events recorded</div>;
+    } else {
+      return (
+        <Editor language="timeline" defaultValue={plainText} readOnly stateKey={null} hideGutter />
+      );
+    }
+  }
+
+  return (
+    <EventViewer
+      events={events ?? []}
+      getEventKey={(event) => event.id}
+      error={error ? String(error) : null}
+      isLoading={isLoading}
+      loadingMessage="Loading events..."
+      emptyMessage="No events recorded"
+      splitLayoutStorageKey="http_response_events"
+      defaultRatio={0.25}
+      renderRow={({ event, isActive, onClick }) => {
+        const display = getEventDisplay(event.event);
+        return (
+          <EventViewerRow
+            isActive={isActive}
+            onClick={onClick}
+            icon={<Icon color={display.color} icon={display.icon} size="sm" />}
+            content={display.summary}
+            timestamp={event.createdAt}
+          />
+        );
+      }}
+      renderDetail={({ event, onClose }) => (
+        <EventDetails event={event} showRaw={showRaw} setShowRaw={setShowRaw} onClose={onClose} />
+      )}
+    />
+  );
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function EventDetails({
+  event,
+  showRaw,
+  setShowRaw,
+  onClose,
+}: {
+  event: HttpResponseEvent;
+  showRaw: boolean;
+  setShowRaw: (v: boolean) => void;
+  onClose: () => void;
+}) {
+  const { label } = getEventDisplay(event.event);
+  const e = event.event;
+  const settingSourceModels = useSettingSourceModels();
+
+  const actions: EventDetailAction[] = [
+    {
+      key: "toggle-raw",
+      label: showRaw ? "Formatted" : "Text",
+      onClick: () => setShowRaw(!showRaw),
+    },
+  ];
+
+  // Determine the title based on event type
+  const title = (() => {
+    switch (e.type) {
+      case "header_up":
+        return "Header Sent";
+      case "header_down":
+        return "Header Received";
+      case "send_url":
+        return "Request";
+      case "receive_url":
+        return "Response";
+      case "redirect":
+        return "Redirect";
+      case "setting":
+        return "Apply Setting";
+      case "chunk_sent":
+        return "Data Sent";
+      case "chunk_received":
+        return "Data Received";
+      case "dns_resolved":
+        return e.overridden ? "DNS Override" : "DNS Resolution";
+      default:
+        return label;
+    }
+  })();
+
+  // Render content based on view mode and event type
+  const renderContent = () => {
+    // Raw view - show plaintext representation (without prefix)
+    if (showRaw) {
+      const rawText = formatEventText(event.event, false);
+      return <Editor language="text" defaultValue={rawText} readOnly stateKey={null} hideGutter />;
+    }
+
+    // Headers - show name and value
+    if (e.type === "header_up" || e.type === "header_down") {
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="Header">{e.name}</KeyValueRow>
+          <KeyValueRow label="Value">{e.value}</KeyValueRow>
+        </KeyValueRows>
+      );
+    }
+
+    // Request URL - show all URL parts separately
+    if (e.type === "send_url") {
+      const auth = e.username || e.password ? `${e.username}:${e.password}@` : "";
+      const isDefaultPort =
+        (e.scheme === "http" && e.port === 80) || (e.scheme === "https" && e.port === 443);
+      const portStr = isDefaultPort ? "" : `:${e.port}`;
+      const query = e.query ? `?${e.query}` : "";
+      const fragment = e.fragment ? `#${e.fragment}` : "";
+      const fullUrl = `${e.scheme}://${auth}${e.host}${portStr}${e.path}${query}${fragment}`;
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="URL">{fullUrl}</KeyValueRow>
+          <KeyValueRow label="Method">{e.method}</KeyValueRow>
+          <KeyValueRow label="Scheme">{e.scheme}</KeyValueRow>
+          {e.username ? <KeyValueRow label="Username">{e.username}</KeyValueRow> : null}
+          {e.password ? <KeyValueRow label="Password">{e.password}</KeyValueRow> : null}
+          <KeyValueRow label="Host">{e.host}</KeyValueRow>
+          {!isDefaultPort ? <KeyValueRow label="Port">{e.port}</KeyValueRow> : null}
+          <KeyValueRow label="Path">{e.path}</KeyValueRow>
+          {e.query ? <KeyValueRow label="Query">{e.query}</KeyValueRow> : null}
+          {e.fragment ? <KeyValueRow label="Fragment">{e.fragment}</KeyValueRow> : null}
+        </KeyValueRows>
+      );
+    }
+
+    // Response status - show version and status separately
+    if (e.type === "receive_url") {
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="HTTP Version">{e.version}</KeyValueRow>
+          <KeyValueRow label="Status">
+            <HttpStatusTagRaw status={e.status} />
+          </KeyValueRow>
+        </KeyValueRows>
+      );
+    }
+
+    // Redirect - show status, URL, and behavior
+    if (e.type === "redirect") {
+      const droppedHeaders = e.dropped_headers ?? [];
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="Status">
+            <HttpStatusTagRaw status={e.status} />
+          </KeyValueRow>
+          <KeyValueRow label="Location">{e.url}</KeyValueRow>
+          <KeyValueRow label="Behavior">
+            {e.behavior === "drop_body" ? "Drop body, change to GET" : "Preserve method and body"}
+          </KeyValueRow>
+          <KeyValueRow label="Body Dropped">{e.dropped_body ? "Yes" : "No"}</KeyValueRow>
+          <KeyValueRow label="Headers Dropped">
+            {droppedHeaders.length > 0 ? droppedHeaders.join(", ") : "--"}
+          </KeyValueRow>
+        </KeyValueRows>
+      );
+    }
+
+    // Settings - show as key/value
+    if (e.type === "setting") {
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="Setting">{e.name}</KeyValueRow>
+          <KeyValueRow label="Value">{e.value}</KeyValueRow>
+          {e.source_model != null ? (
+            <KeyValueRow label="Source">{formatSettingSource(e, settingSourceModels)}</KeyValueRow>
+          ) : null}
+        </KeyValueRows>
+      );
+    }
+
+    // Chunks - show formatted bytes
+    if (e.type === "chunk_sent" || e.type === "chunk_received") {
+      return <div className="font-mono text-editor">{formatBytes(e.bytes)}</div>;
+    }
+
+    // DNS Resolution - show hostname, addresses, and timing
+    if (e.type === "dns_resolved") {
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="Hostname">{e.hostname}</KeyValueRow>
+          <KeyValueRow label="Addresses">{e.addresses.join(", ")}</KeyValueRow>
+          <KeyValueRow label="Duration">
+            {e.overridden ? (
+              <span className="text-text-subtlest">--</span>
+            ) : (
+              `${String(e.duration)}ms`
+            )}
+          </KeyValueRow>
+          {e.overridden ? <KeyValueRow label="Source">Workspace Override</KeyValueRow> : null}
+        </KeyValueRows>
+      );
+    }
+
+    // Default - use summary
+    const { summary } = getEventDisplay(event.event);
+    return <div className="font-mono text-editor">{summary}</div>;
+  };
+  return (
+    <div className="flex flex-col gap-2 h-full">
+      <EventDetailHeader
+        title={title}
+        timestamp={event.createdAt}
+        actions={actions}
+        onClose={onClose}
+      />
+      {renderContent()}
+    </div>
+  );
+}
+
+type EventTextParts = { prefix: ">" | "<" | "*"; text: string };
+
+/** Get the prefix and text for an event */
+function getEventTextParts(event: HttpResponseEventData): EventTextParts {
+  switch (event.type) {
+    case "send_url":
+      return {
+        prefix: ">",
+        text: `${event.method} ${event.path}${event.query ? `?${event.query}` : ""}${event.fragment ? `#${event.fragment}` : ""}`,
+      };
+    case "receive_url":
+      return { prefix: "<", text: `${event.version} ${event.status}` };
+    case "header_up":
+      return { prefix: ">", text: `${event.name}: ${event.value}` };
+    case "header_down":
+      return { prefix: "<", text: `${event.name}: ${event.value}` };
+    case "redirect": {
+      const behavior = event.behavior === "drop_body" ? "drop body" : "preserve";
+      const droppedHeaders = event.dropped_headers ?? [];
+      const dropped = [
+        event.dropped_body ? "body dropped" : null,
+        droppedHeaders.length > 0 ? `headers dropped: ${droppedHeaders.join(", ")}` : null,
+      ]
+        .filter(Boolean)
+        .join(", ");
+      return {
+        prefix: "*",
+        text: `Redirect ${event.status} -> ${event.url} (${behavior}${dropped ? `, ${dropped}` : ""})`,
+      };
+    }
+    case "setting":
+      return { prefix: "*", text: `Setting ${event.name}=${event.value}` };
+    case "info":
+      return { prefix: "*", text: event.message };
+    case "chunk_sent":
+      return { prefix: "*", text: `[${formatBytes(event.bytes)} sent]` };
+    case "chunk_received":
+      return { prefix: "*", text: `[${formatBytes(event.bytes)} received]` };
+    case "dns_resolved":
+      if (event.overridden) {
+        return {
+          prefix: "*",
+          text: `DNS override ${event.hostname} -> ${event.addresses.join(", ")}`,
+        };
+      }
+      return {
+        prefix: "*",
+        text: `DNS resolved ${event.hostname} to ${event.addresses.join(", ")} (${event.duration}ms)`,
+      };
+    default:
+      return { prefix: "*", text: "[unknown event]" };
+  }
+}
+
+/** Format event as plaintext, optionally with curl-style prefix (> outgoing, < incoming, * info) */
+function formatEventText(event: HttpResponseEventData, includePrefix: boolean): string {
+  const { prefix, text } = getEventTextParts(event);
+  return includePrefix ? `${prefix} ${text}` : text;
+}
+
+function useSettingSourceModels() {
+  const requests = useAllRequests();
+  const folders = useAtomValue(foldersAtom);
+  const workspaces = useAtomValue(workspacesAtom);
+
+  return useMemo<AnyModel[]>(
+    () => [...requests, ...folders, ...workspaces],
+    [requests, folders, workspaces],
+  );
+}
+
+function formatSettingSource(
+  event: Extract<HttpResponseEventData, { type: "setting" }>,
+  models: AnyModel[],
+): string {
+  const sourceModel = event.source_model;
+  if (sourceModel == null || sourceModel === "default") {
+    return "Default";
+  }
+
+  const model =
+    event.source_id == null
+      ? null
+      : (models.find((m) => m.model === sourceModel && m.id === event.source_id) ?? null);
+  const name = model == null ? event.source_name : resolvedModelName(model);
+  const label = sourceModel.replaceAll("_", " ");
+  return name == null || name.length === 0 ? label : `${name} (${label})`;
+}
+
+function formatSettingSourceModel(event: Extract<HttpResponseEventData, { type: "setting" }>) {
+  const sourceModel = event.source_model;
+  if (sourceModel == null || sourceModel === "default" || sourceModel === "workspace") {
+    return null;
+  }
+
+  return sourceModel;
+}
+
+type EventDisplay = {
+  icon: IconProps["icon"];
+  color: IconProps["color"];
+  label: string;
+  summary: ReactNode;
+};
+
+function getEventDisplay(event: HttpResponseEventData): EventDisplay {
+  switch (event.type) {
+    case "setting":
+      const sourceModel = formatSettingSourceModel(event);
+      return {
+        icon: "settings",
+        color: "secondary",
+        label: "Setting",
+        summary: `${event.name} = ${event.value}${sourceModel == null ? "" : ` (${sourceModel})`}`,
+      };
+    case "info":
+      return {
+        icon: "info",
+        color: "secondary",
+        label: "Info",
+        summary: event.message,
+      };
+    case "redirect": {
+      const droppedHeaders = event.dropped_headers ?? [];
+      const dropped = [
+        event.dropped_body ? "drop body" : null,
+        droppedHeaders.length > 0
+          ? `drop ${droppedHeaders.length} ${droppedHeaders.length === 1 ? "header" : "headers"}`
+          : null,
+      ]
+        .filter(Boolean)
+        .join(", ");
+      return {
+        icon: "arrow_big_right_dash",
+        color: "success",
+        label: "Redirect",
+        summary: `Redirecting ${event.status} ${event.url}${dropped ? ` (${dropped})` : ""}`,
+      };
+    }
+    case "send_url":
+      return {
+        icon: "arrow_big_up_dash",
+        color: "primary",
+        label: "Request",
+        summary: `${event.method} ${event.path}${event.query ? `?${event.query}` : ""}${event.fragment ? `#${event.fragment}` : ""}`,
+      };
+    case "receive_url":
+      return {
+        icon: "arrow_big_down_dash",
+        color: "info",
+        label: "Response",
+        summary: `${event.version} ${event.status}`,
+      };
+    case "header_up":
+      return {
+        icon: "arrow_big_up_dash",
+        color: "primary",
+        label: "Header",
+        summary: `${event.name}: ${event.value}`,
+      };
+    case "header_down":
+      return {
+        icon: "arrow_big_down_dash",
+        color: "info",
+        label: "Header",
+        summary: `${event.name}: ${event.value}`,
+      };
+
+    case "chunk_sent":
+      return {
+        icon: "info",
+        color: "secondary",
+        label: "Chunk",
+        summary: `${formatBytes(event.bytes)} chunk sent`,
+      };
+    case "chunk_received":
+      return {
+        icon: "info",
+        color: "secondary",
+        label: "Chunk",
+        summary: `${formatBytes(event.bytes)} chunk received`,
+      };
+    case "dns_resolved":
+      return {
+        icon: "globe",
+        color: event.overridden ? "success" : "secondary",
+        label: event.overridden ? "DNS Override" : "DNS",
+        summary: event.overridden
+          ? `${event.hostname} → ${event.addresses.join(", ")} (overridden)`
+          : `${event.hostname} → ${event.addresses.join(", ")} (${event.duration}ms)`,
+      };
+    default:
+      return {
+        icon: "info",
+        color: "secondary",
+        label: "Unknown",
+        summary: "Unknown event",
+      };
+  }
+}
diff --git a/apps/yaak-client/components/ImportCurl.tsx b/apps/yaak-client/components/ImportCurl.tsx
new file mode 100644
index 0000000..49e43a9
--- /dev/null
+++ b/apps/yaak-client/components/ImportCurl.tsx
@@ -0,0 +1,112 @@
+import { platform, useCapability } from "@yaakapp-internal/platform";
+import { Icon } from "@yaakapp-internal/ui";
+import * as m from "motion/react-m";
+import { useEffect, useState } from "react";
+import { importCurl, looksLikeCurl } from "../commands/importCurl";
+import { useWindowFocus } from "../hooks/useWindowFocus";
+import { showToast } from "../lib/toast";
+import { Button } from "./core/Button";
+
+/**
+ * Offers to create a request from a Curl command on the clipboard. A host that can read
+ * the clipboard on its own offers it whenever the window is focused; one that would have
+ * to prompt for permission first waits for the user to paste instead.
+ */
+export function ImportCurl() {
+  return useCapability("clipboardRead") ? <ImportCurlButton /> : <ImportCurlOnPaste />;
+}
+
+function ImportCurlButton() {
+  const focused = useWindowFocus();
+  const [clipboardText, setClipboardText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- none
+  useEffect(() => {
+    void platform.clipboard.readText().then(setClipboardText);
+  }, [focused]);
+
+  if (!looksLikeCurl(clipboardText)) {
+    return null;
+  }
+
+  return (
+    <m.div
+      initial={{ opacity: 0, scale: 0 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ delay: 0.5 }}
+    >
+      <Button
+        size="2xs"
+        variant="border"
+        color="success"
+        className="rounded-full"
+        rightSlot={<Icon icon="import" size="sm" />}
+        isLoading={isLoading}
+        title="Import Curl command from clipboard"
+        onClick={async () => {
+          setIsLoading(true);
+          try {
+            await importCurl.mutateAsync({ command: clipboardText });
+            setClipboardText(""); // Hide the button until the clipboard changes
+          } catch (e) {
+            console.log("Failed to import curl", e);
+          } finally {
+            setIsLoading(false);
+          }
+        }}
+      >
+        Import Curl
+      </Button>
+    </m.div>
+  );
+}
+
+function ImportCurlOnPaste() {
+  useEffect(() => {
+    const handlePaste = (e: ClipboardEvent) => {
+      const command = e.clipboardData?.getData("text/plain") ?? "";
+      if (!looksLikeCurl(command)) return;
+
+      // Editable targets keep the text as text. The URL editor imports it itself.
+      if (isEditable(e.target)) return;
+
+      showToast({
+        id: "curl-paste",
+        color: "success",
+        message: (
+          <div>
+            <h2 className="font-semibold">Curl command detected</h2>
+            <p className="text-text-subtle text-sm">Create a request from the pasted command?</p>
+          </div>
+        ),
+        action: ({ hide }) => (
+          <Button
+            size="xs"
+            color="success"
+            className="mr-auto min-w-20"
+            rightSlot={<Icon icon="import" size="sm" />}
+            onClick={() => {
+              hide();
+              importCurl.mutate({ command });
+            }}
+          >
+            Create Request
+          </Button>
+        ),
+      });
+    };
+
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, []);
+
+  return null;
+}
+
+function isEditable(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  if (target.closest(".cm-editor") != null) return true;
+  return ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+}
diff --git a/apps/yaak-client/components/ImportDataDialog.tsx b/apps/yaak-client/components/ImportDataDialog.tsx
new file mode 100644
index 0000000..1d755a0
--- /dev/null
+++ b/apps/yaak-client/components/ImportDataDialog.tsx
@@ -0,0 +1,795 @@
+import {
+  type Folder,
+  type ImportDestination,
+  type ImportPlan,
+  type ImportPlanItem,
+  type ImportSource,
+  type Workspace,
+} from "@yaakapp-internal/models";
+import { Banner, HStack, Icon, type IconProps, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { platform } from "@yaakapp-internal/platform";
+import classNames from "classnames";
+import { formatDistanceToNowStrict } from "date-fns";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { pluralize } from "../lib/pluralize";
+import { CommercialUseBanner } from "./CommercialUseBanner";
+import { Button } from "./core/Button";
+import { Checkbox } from "./core/Checkbox";
+import type { CheckboxTreeNode } from "./core/CheckboxTree";
+import { CheckboxTree } from "./core/CheckboxTree";
+import { IconTooltip } from "./core/IconTooltip";
+import { PlainInput } from "./core/PlainInput";
+import { Select } from "./core/Select";
+import { SegmentedControl } from "./core/SegmentedControl";
+
+interface Props {
+  currentWorkspace: Workspace | null;
+  workspaces: Workspace[];
+  selectedFolder: Folder | null;
+  planFile: (filePath: string, destination: ImportDestination) => Promise<ImportPlan>;
+  planUrl: (url: string, destination: ImportDestination) => Promise<ImportPlan>;
+  listSources: (workspaceId: string) => Promise<ImportSource[]>;
+  findSourcesForOrigin: (args: { filePath?: string; url?: string }) => Promise<ImportSource[]>;
+  commit: (plan: ImportPlan) => Promise<void>;
+  cancel: () => void;
+  onError: (err: unknown) => void;
+}
+
+/**
+ * An absolute or relative path is unambiguously a file. Everything else is treated as a URL, so a
+ * bare host like `example.com/openapi.json` still works (the backend defaults it to https).
+ */
+function isFilePath(value: string): boolean {
+  return (
+    value.startsWith("/") ||
+    value.startsWith("./") ||
+    value.startsWith("../") ||
+    value.startsWith("~/") ||
+    value.startsWith("\\\\") ||
+    /^[a-zA-Z]:[\\/]/.test(value)
+  );
+}
+
+function fileName(path: string): string {
+  return path.split(/[/\\]/).at(-1) || path;
+}
+
+/**
+ * Loads the current workspace's linked sources before rendering the dialog, so the inner
+ * component can construct its initial state (prefilled path, destination) in one pass instead of
+ * patching it in with effects after the first paint.
+ */
+export function ImportDataDialog(props: Props) {
+  const [initialSources, setInitialSources] = useState<ImportSource[] | null>(null);
+  const { currentWorkspace, listSources } = props;
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = currentWorkspace == null ? Promise.resolve([]) : listSources(currentWorkspace.id);
+    load
+      .then((sources) => {
+        if (!cancelled) setInitialSources(sources);
+      })
+      .catch(() => {
+        if (!cancelled) setInitialSources([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [currentWorkspace, listSources]);
+
+  if (initialSources == null) return null;
+  return <LoadedImportDataDialog {...props} initialSources={initialSources} />;
+}
+
+function latestSource(sources: ImportSource[]): ImportSource | null {
+  return sources.reduce<ImportSource | null>(
+    (latest, s) => (latest == null || s.lastImportedAt > latest.lastImportedAt ? s : latest),
+    null,
+  );
+}
+
+function LoadedImportDataDialog({
+  currentWorkspace,
+  workspaces,
+  selectedFolder,
+  planFile,
+  planUrl,
+  listSources,
+  findSourcesForOrigin,
+  commit,
+  cancel,
+  onError,
+  initialSources,
+}: Props & { initialSources: ImportSource[] }) {
+  // A workspace with a linked source is probably being re-imported, so start from that source
+  const prefill = latestSource(initialSources);
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [plan, setPlan] = useState<ImportPlan | null>(null);
+  const [items, setItems] = useState<ImportPlanItem[]>([]);
+  // null means no explicit choice yet, so the default below applies
+  const [destinationChoice, setDestinationChoice] = useState<"new" | "current" | "other" | null>(
+    null,
+  );
+  const [otherWorkspaceId, setOtherWorkspaceId] = useState<string | null>(null);
+  const [targetSelectedFolder, setTargetSelectedFolder] = useState(selectedFolder != null);
+  const [linkedSources, setLinkedSources] = useState<ImportSource[]>(
+    prefill != null ? initialSources : [],
+  );
+  const [originSources, setOriginSources] = useState<ImportSource[]>(
+    prefill != null ? [prefill] : [],
+  );
+  // A file path or a URL. Both inputs write here, so there is only ever one thing to import
+  const [source, setSource] = useState<string | null>(prefill?.origin ?? null);
+  const [forceUpdateKey, setForceUpdateKey] = useState<number>(0);
+  const [isHovering, setIsHovering] = useState<boolean>(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const trimmedSource = source?.trim() ?? "";
+  const filePath = isFilePath(trimmedSource) ? trimmedSource : null;
+
+  const selectSource = (value: string) => {
+    setSource(value);
+    // Remount the input so it shows the path of the newly-picked file
+    setForceUpdateKey((k) => k + 1);
+  };
+
+  // Accept a file dropped anywhere on the dialog, the way SelectFile does for its button
+  useEffect(() => {
+    return platform.window.onDragDrop((event) => {
+      if (event.type === "over") {
+        const p = event.position;
+        const r = ref.current?.getBoundingClientRect();
+        if (r == null) return;
+        setIsHovering(p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom);
+      } else if (event.type === "drop" && isHovering) {
+        const p = event.paths[0];
+        if (p) selectSource(p);
+        setIsHovering(false);
+      } else {
+        setIsHovering(false);
+      }
+    });
+  }, [isHovering, setSource]);
+
+  useEffect(() => {
+    if (trimmedSource === "") {
+      setOriginSources([]);
+      return;
+    }
+    let cancelled = false;
+    const timeout = setTimeout(() => {
+      findSourcesForOrigin(filePath != null ? { filePath } : { url: trimmedSource })
+        .then((sources) => {
+          if (!cancelled) setOriginSources(sources);
+        })
+        .catch(() => setOriginSources([]));
+    }, 300);
+    return () => {
+      cancelled = true;
+      clearTimeout(timeout);
+    };
+  }, [trimmedSource, filePath, findSourcesForOrigin]);
+
+  // The one workspace this file is linked to, if there is exactly one.
+  const linkedWorkspace = useMemo(() => {
+    const ids = [...new Set(originSources.map((s) => s.workspaceId))];
+    if (ids.length !== 1) return null;
+    return workspaces.find((w) => w.id === ids[0]) ?? null;
+  }, [originSources, workspaces]);
+
+  // A file linked to the current workspace defaults back into it, so re-importing doesn't
+  // accidentally create a duplicate workspace. A file linked elsewhere only gets a suggestion —
+  // silently targeting a workspace that is neither new nor current is too surprising. An
+  // explicit choice always wins.
+  const destinationKind =
+    destinationChoice ??
+    (linkedWorkspace != null && linkedWorkspace.id === currentWorkspace?.id ? "current" : "new");
+
+  const destinationWorkspaceId =
+    destinationKind === "current"
+      ? (currentWorkspace?.id ?? null)
+      : destinationKind === "other"
+        ? otherWorkspaceId
+        : null;
+
+  useEffect(() => {
+    if (destinationWorkspaceId == null) {
+      setLinkedSources([]);
+      return;
+    }
+    let cancelled = false;
+    listSources(destinationWorkspaceId)
+      .then((sources) => {
+        if (!cancelled) setLinkedSources(sources);
+      })
+      .catch(() => setLinkedSources([]));
+    return () => {
+      cancelled = true;
+    };
+  }, [destinationWorkspaceId, listSources]);
+
+  const handleSelectFile = async () => {
+    const selected = await platform.dialog.open({ title: "Select File", multiple: false });
+    if (selected == null) return;
+    selectSource(selected);
+  };
+
+  // The selected folder belongs to the workspace being viewed, so it is only offerable when that
+  // is also the destination.
+  const canTargetSelectedFolder = selectedFolder != null && destinationKind === "current";
+
+  const destination = (): ImportDestination => {
+    if (destinationWorkspaceId == null) {
+      return { type: "new_workspace" };
+    }
+    return {
+      type: "existing_workspace",
+      workspaceId: destinationWorkspaceId,
+      folderId: canTargetSelectedFolder && targetSelectedFolder ? selectedFolder.id : undefined,
+    };
+  };
+
+  const handlePreview = async () => {
+    setIsLoading(true);
+    try {
+      const nextPlan =
+        filePath != null
+          ? await planFile(filePath, destination())
+          : await planUrl(trimmedSource, destination());
+      setPlan(nextPlan);
+      setItems(nextPlan.items);
+    } catch (err) {
+      onError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCommit = async () => {
+    if (plan == null) return;
+    setIsLoading(true);
+    try {
+      await commit({ ...plan, items });
+    } catch (err) {
+      onError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const itemTree = useMemo(() => buildItemTree(items), [items]);
+
+  // A folder row's checkbox carries everything beneath it, deletions included — the row labels
+  // say which of those are destructive. Checking anything also brings back the folders it needs
+  // to live in.
+  const toggleNode = (node: CheckboxTreeNode<TreeRow>, checked: boolean) => {
+    const targets = new Set(togglableItems(node).map((i) => i.modelId));
+    if (checked && node.data.kind === "item") {
+      const byId = new Map(items.map((i) => [i.modelId, i]));
+      for (const ancestor of ancestorsOf(node.data.item, byId)) {
+        if (isMissingFolder(ancestor)) targets.add(ancestor.modelId);
+      }
+    }
+    setItems((prev) => prev.map((i) => (targets.has(i.modelId) ? { ...i, selected: checked } : i)));
+  };
+
+  const resolveConflict = (modelId: string, resolution: "keep_mine" | "take_source") => {
+    setItems((prev) =>
+      prev.map((item) => (item.modelId === modelId ? { ...item, resolution } : item)),
+    );
+  };
+
+  // Deleting a folder takes its contents with it, so those rows have nothing left to decide.
+  const disabledIds = useMemo(() => {
+    const disabled = new Set<string>();
+    const byId = new Map(items.map((i) => [i.modelId, i]));
+    for (const item of items) {
+      if (item.action !== "delete") continue;
+      for (const parent of ancestorsOf(item, byId)) {
+        if (parent.action === "delete" && parent.selected) {
+          disabled.add(item.modelId);
+        }
+      }
+    }
+    return disabled;
+  }, [items]);
+
+  if (plan != null) {
+    const unchanged = items.filter((i) => i.action === "unchanged");
+    const footerNote =
+      unchanged.length > 0
+        ? `${unchanged.length} ${pluralize("resource", unchanged.length)} unchanged`
+        : "";
+    const changeCount = items.filter((item) => {
+      if (disabledIds.has(item.modelId)) return false;
+      if (item.action === "conflict") return item.resolution === "take_source";
+      if (item.action === "unchanged") return false;
+      return item.selected;
+    }).length;
+
+    // The row's label carries what kind of destination it is, so the value can just be its name
+    const [destinationLabel, destinationValue] = ((): [string, string] => {
+      if (plan.destination.type === "new_workspace") {
+        const names = plan.resources.workspaces.map((w) => w.name).filter((n) => n !== "");
+        if (names.length === 0) return ["New workspace", "Untitled"];
+        return [pluralize("New workspace", names.length), names.join(", ")];
+      }
+      const { workspaceId, folderId } = plan.destination;
+      const name = workspaces.find((w) => w.id === workspaceId)?.name ?? "Unknown workspace";
+      return [
+        "Destination",
+        folderId != null && folderId === selectedFolder?.id
+          ? `${name} / ${selectedFolder.name}`
+          : name,
+      ];
+    })();
+
+    // The destination workspace roots the tree. It is not a plan item — commit always applies
+    // it — so its checkbox only aggregates the subtree.
+    const workspaceRoot: CheckboxTreeNode<TreeRow> = (() => {
+      const planned = plan.resources.workspaces[0];
+      const planDestination = plan.destination;
+      const existing =
+        planDestination.type === "existing_workspace"
+          ? workspaces.find((w) => w.id === planDestination.workspaceId)
+          : null;
+      return {
+        key: existing?.id ?? planned?.id ?? "workspace",
+        data: {
+          kind: "destination",
+          label: existing?.name ?? planned?.name ?? "New workspace",
+          isNew: planDestination.type === "new_workspace",
+        },
+        children: itemTree,
+      };
+    })();
+
+    return (
+      <VStack space={4} className="pb-4">
+        <div className="rounded-lg border border-border-subtle divide-y divide-border-subtle">
+          <PreviewRow label="Detected format" value={plan.importer} />
+          <PreviewRow label={destinationLabel} value={destinationValue} />
+        </div>
+
+        {plan.warnings.map((warning) => (
+          <Banner
+            key={`${warning.title}:${warning.detail}`}
+            color={warning.level === "warning" ? "warning" : "info"}
+            className="flex items-start gap-2.5"
+          >
+            <Icon
+              icon={warning.level === "warning" ? "alert_triangle" : "info"}
+              size="sm"
+              className="mt-0.5"
+            />
+            <div className="min-w-0">
+              <div className="text-sm font-medium">{warning.title}</div>
+              <div className="text-xs text-text-subtle mt-0.5">{warning.detail}</div>
+            </div>
+          </Banner>
+        ))}
+
+        <div className="rounded-lg border border-border-subtle px-3 py-2 overflow-y-auto max-h-[40vh]">
+          <CheckboxTree
+            node={workspaceRoot}
+            checked={nodeCheckedStatus}
+            onCheck={toggleNode}
+            isCheckboxDisabled={(n) => disabledIds.has(n.key)}
+            isCollapsedByDefault={(n) => n.data.kind === "item" && n.data.item.action === "ignored"}
+            isRelevant={(n) =>
+              n.data.kind === "destination" ||
+              (n.data.kind === "item" && n.data.item.action !== "unchanged")
+            }
+            renderRow={(n) => <ImportTreeRow row={n.data} onResolveConflict={resolveConflict} />}
+          />
+        </div>
+
+        <HStack space={2} alignItems="center" className="mt-3">
+          {footerNote !== "" && <div className="text-xs text-text-subtle">{footerNote}</div>}
+          <Button
+            className="ml-auto"
+            color="secondary"
+            variant="border"
+            disabled={isLoading}
+            onClick={() => {
+              setPlan(null);
+              setItems([]);
+            }}
+          >
+            Back
+          </Button>
+          <Button color="primary" isLoading={isLoading} onClick={handleCommit}>
+            {isLoading
+              ? "Importing"
+              : changeCount > 0
+                ? `Apply ${changeCount} ${changeCount === 1 ? "Change" : "Changes"}`
+                : "Done"}
+          </Button>
+        </HStack>
+      </VStack>
+    );
+  }
+
+  const lastImported =
+    originSources.find((s) => s.workspaceId === destinationWorkspaceId) ??
+    linkedSources.reduce<ImportSource | null>(
+      (latest, s) => (latest == null || s.lastImportedAt > latest.lastImportedAt ? s : latest),
+      null,
+    );
+
+  return (
+    <VStack ref={ref} space={4} className="pb-4">
+      <CommercialUseBanner source="data-import" title="Importing work data?" />
+
+      <button
+        type="button"
+        onClick={handleSelectFile}
+        className={classNames(
+          "w-full rounded-lg border border-dashed px-4 py-6",
+          "flex flex-col items-center gap-1 text-center",
+          isHovering
+            ? "border-notice bg-surface-highlight"
+            : "border-border hover:border-text-subtle",
+        )}
+      >
+        <Icon icon="folder_input" className="text-text-subtlest w-8! h-8! mb-2" />
+        {/* Fixed height so the region doesn't resize between the empty and selected states */}
+        <div className="h-6 w-full flex items-center justify-center">
+          {filePath == null ? (
+            <div className="text-text">
+              <strong className="font-semibold">Choose a file</strong> or drag it here
+            </div>
+          ) : (
+            <div className="text-text font-mono text-xs max-w-full truncate" title={filePath}>
+              {fileName(filePath)}
+            </div>
+          )}
+        </div>
+        <div className="text-xs text-text-subtlest">
+          Supports OpenAPI, Swagger, Postman, Insomnia, curl, and Yaak exports
+        </div>
+      </button>
+
+      <PlainInput
+        label="Or enter a file path or URL"
+        size="sm"
+        placeholder="https://example.com/openapi.json"
+        defaultValue={source ?? ""}
+        forceUpdateKey={String(forceUpdateKey)}
+        onChange={setSource}
+      />
+
+      <VStack space={2} className={classNames(workspaces.length === 0 && "hidden")}>
+        <Select
+          name="import-destination-kind"
+          label="Import location"
+          size="sm"
+          value={destinationKind}
+          onChange={setDestinationChoice}
+          options={[
+            { value: "new", label: "New Workspace" },
+            ...(currentWorkspace != null
+              ? [{ value: "current" as const, label: "Current Workspace" }]
+              : []),
+            { value: "other", label: "Other Workspace" },
+          ]}
+        />
+        {destinationKind === "other" && (
+          <Select
+            name="import-destination-workspace"
+            label="Workspace"
+            hideLabel
+            size="sm"
+            value={otherWorkspaceId ?? ""}
+            onChange={(id) => setOtherWorkspaceId(id === "" ? null : id)}
+            filterable
+            options={[
+              { value: "", label: "Select a workspace" },
+              ...workspaces
+                .filter((w) => w.id !== currentWorkspace?.id)
+                .map((w) => ({ value: w.id, label: w.name })),
+            ]}
+          />
+        )}
+        {lastImported != null && destinationWorkspaceId != null ? (
+          <div className="text-xs text-text-subtle">
+            Last imported from {lastImported.originLabel} ·{" "}
+            {formatDistanceToNowStrict(`${lastImported.lastImportedAt}Z`, { addSuffix: true })}
+          </div>
+        ) : linkedWorkspace != null && linkedWorkspace.id !== destinationWorkspaceId ? (
+          <div className="text-xs text-text-subtle">
+            This file was last imported into{" "}
+            <button
+              type="button"
+              className="underline hocus:text-text"
+              onClick={() => {
+                if (linkedWorkspace.id === currentWorkspace?.id) {
+                  setDestinationChoice("current");
+                } else {
+                  setDestinationChoice("other");
+                  setOtherWorkspaceId(linkedWorkspace.id);
+                }
+              }}
+            >
+              {linkedWorkspace.name}
+            </button>
+          </div>
+        ) : null}
+        {canTargetSelectedFolder && (
+          <Checkbox
+            checked={targetSelectedFolder}
+            title={`Place root resources in selected folder “${selectedFolder.name}”`}
+            onChange={setTargetSelectedFolder}
+          />
+        )}
+      </VStack>
+
+      <HStack space={2} justifyContent="end">
+        <Button color="secondary" variant="border" disabled={isLoading} onClick={cancel}>
+          Cancel
+        </Button>
+        <Button
+          color="primary"
+          disabled={
+            trimmedSource === "" ||
+            isLoading ||
+            (destinationKind === "other" && otherWorkspaceId == null)
+          }
+          isLoading={isLoading}
+          onClick={handlePreview}
+        >
+          {isLoading ? "Analyzing" : "Preview Import"}
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}
+
+function ImportTreeRow({
+  row,
+  onResolveConflict,
+}: {
+  row: TreeRow;
+  onResolveConflict: (modelId: string, resolution: "keep_mine" | "take_source") => void;
+}) {
+  if (row.kind !== "item") {
+    return (
+      <>
+        <Icon color="secondary" icon={row.kind === "destination" ? "house" : row.icon} />
+        <div className="truncate flex-1">{row.label}</div>
+        {row.kind === "destination" && row.isNew && (
+          <ActionChip label="new" help="Created by this import" className="text-success" />
+        )}
+      </>
+    );
+  }
+
+  const { item } = row;
+  const label = actionLabel(item);
+  return (
+    <>
+      {item.model === "folder" || item.model === "environment" ? (
+        <Icon color="secondary" icon={item.model === "folder" ? "folder" : "variable"} />
+      ) : (
+        <span aria-hidden className="w-4" />
+      )}
+      <div className="truncate flex-1">{item.name}</div>
+      {item.action === "conflict" ? (
+        <div className="shrink-0">
+          <SegmentedControl
+            name={`conflict-${item.modelId}`}
+            label={`Resolve conflict for ${item.name}`}
+            hideLabel
+            size="2xs"
+            help={actionHelp(item)}
+            value={item.resolution ?? "keep_mine"}
+            onChange={(v) => onResolveConflict(item.modelId, v)}
+            options={[
+              { value: "keep_mine", label: "Keep mine" },
+              { value: "take_source", label: "Take source" },
+            ]}
+          />
+        </div>
+      ) : (
+        label != null && (
+          <ActionChip
+            label={label}
+            help={actionHelp(item)}
+            className={classNames(
+              item.action === "create" && "text-success",
+              item.action === "update" && "text-info",
+              item.action === "delete" && "text-danger",
+              item.action === "keep_local" && item.selected && "text-warning",
+              item.action === "ignored" && "text-text-subtlest",
+            )}
+          />
+        )
+      )}
+    </>
+  );
+}
+
+function ActionChip({
+  label,
+  help,
+  className,
+}: {
+  label: string;
+  help: string | null;
+  className?: string;
+}) {
+  return (
+    <InlineCode
+      className={classNames(
+        "py-0 bg-transparent w-32 shrink-0 whitespace-nowrap text-xs",
+        "inline-flex items-center justify-center gap-1.5",
+        className,
+      )}
+    >
+      {label}
+      {help != null && <IconTooltip content={help} iconSize="xs" />}
+    </InlineCode>
+  );
+}
+
+function actionLabel(item: ImportPlanItem): string | null {
+  switch (item.action) {
+    case "create":
+      return "new";
+    case "update":
+      return "updated";
+    case "delete":
+      return "removed";
+    case "keep_local":
+      return "edited";
+    case "ignored":
+      return "ignored";
+    default:
+      return null;
+  }
+}
+
+function actionHelp(item: ImportPlanItem): string | null {
+  const help = (text: string) =>
+    item.changedFields.length > 0
+      ? `${text} · ${item.changedFields.map(fieldLabel).join(", ")}`
+      : text;
+  switch (item.action) {
+    case "create":
+      return "Not in this workspace yet";
+    case "update":
+      return item.reason === "moved_into_ignored_folder"
+        ? "Moved into a folder that isn't imported. Importing that folder brings it along"
+        : help("Changed in the source since the last import");
+    case "delete":
+      return "Gone from the source since the last import. Checking it deletes it here";
+    case "keep_local":
+      return help("Changed here since the last import. Checking it reverts to the source");
+    case "conflict":
+      return help("Changed here and in the source since the last import");
+    case "ignored":
+      return "Not in this workspace. Imports leave it alone until you check it";
+    default:
+      return null;
+  }
+}
+
+function fieldLabel(field: string): string {
+  return field.replace(/([A-Z])/g, " $1").toLowerCase();
+}
+
+/** Every plan item above `item`, nearest first. */
+function ancestorsOf(item: ImportPlanItem, byId: Map<string, ImportPlanItem>): ImportPlanItem[] {
+  const ancestors: ImportPlanItem[] = [];
+  const seen = new Set<string>();
+  let parentId = item.parentId;
+  while (parentId != null && !seen.has(parentId)) {
+    seen.add(parentId);
+    const parent = byId.get(parentId);
+    if (parent == null) break;
+    ancestors.push(parent);
+    parentId = parent.parentId;
+  }
+  return ancestors;
+}
+
+/**
+ * A row of the preview tree. Most are plan items, but the destination workspace and the group the
+ * workspace's environments sit in are headings: they aggregate their children and decide nothing
+ * themselves.
+ */
+type TreeRow =
+  | { kind: "destination"; label: string; isNew: boolean }
+  | { kind: "group"; label: string; icon: IconProps["icon"] }
+  | { kind: "item"; item: ImportPlanItem };
+
+function buildItemTree(items: ImportPlanItem[]): CheckboxTreeNode<TreeRow>[] {
+  const byId = new Map(items.map((i) => [i.modelId, i]));
+  const childrenOf = new Map<string, ImportPlanItem[]>();
+  const roots: ImportPlanItem[] = [];
+  for (const item of items) {
+    if (item.parentId != null && byId.has(item.parentId)) {
+      const siblings = childrenOf.get(item.parentId) ?? [];
+      siblings.push(item);
+      childrenOf.set(item.parentId, siblings);
+    } else {
+      roots.push(item);
+    }
+  }
+
+  const byKind = (list: ImportPlanItem[]) => [
+    ...list.filter((i) => i.model === "environment"),
+    ...list.filter((i) => i.model === "folder"),
+    ...list.filter((i) => i.model !== "environment" && i.model !== "folder"),
+  ];
+
+  const toNode = (item: ImportPlanItem, seen: Set<string>): CheckboxTreeNode<TreeRow> => ({
+    key: item.modelId,
+    data: { kind: "item", item },
+    children: seen.has(item.modelId)
+      ? []
+      : byKind(childrenOf.get(item.modelId) ?? []).map((c) =>
+          toNode(c, new Set([...seen, item.modelId])),
+        ),
+  });
+
+  // The workspace's environments have nothing to sit under — a sub-environment is a sibling of
+  // the base one, not its child — so a heading groups them into one thing to turn on and off.
+  const environments = roots.filter((i) => i.model === "environment");
+  const others = byKind(roots.filter((i) => i.model !== "environment"));
+  const nodes = others.map((r) => toNode(r, new Set()));
+  if (environments.length === 0) return nodes;
+  return [
+    {
+      key: "group:environments",
+      data: { kind: "group", label: "Variables", icon: "variable" },
+      children: environments.map((e) => toNode(e, new Set())),
+    },
+    ...nodes,
+  ];
+}
+
+function collectRows(node: CheckboxTreeNode<TreeRow>): TreeRow[] {
+  return [node.data, ...node.children.flatMap(collectRows)];
+}
+
+/** A folder that isn't there yet, so anything inside it needs it brought in first. */
+function isMissingFolder(item: ImportPlanItem): boolean {
+  return item.model === "folder" && (item.action === "create" || item.action === "ignored");
+}
+
+/**
+ * The plan item a row's checkbox decides, if it decides one. An unchanged resource has nothing to
+ * decide and a conflict is decided by its own control, so neither takes a checkbox — nor rides
+ * along with a parent's.
+ */
+function togglableItem(row: TreeRow): ImportPlanItem | null {
+  if (row.kind !== "item") return null;
+  const { item } = row;
+  return item.action === "unchanged" || item.action === "conflict" ? null : item;
+}
+
+function togglableItems(node: CheckboxTreeNode<TreeRow>): ImportPlanItem[] {
+  return collectRows(node)
+    .map(togglableItem)
+    .filter((i) => i != null);
+}
+
+function nodeCheckedStatus(node: CheckboxTreeNode<TreeRow>): boolean | "indeterminate" | "hidden" {
+  const covered = togglableItems(node);
+  if (covered.length === 0) return "hidden";
+  const selected = covered.filter((i) => i.selected).length;
+  if (selected === covered.length) return true;
+  if (selected === 0) return false;
+  return "indeterminate";
+}
+
+function PreviewRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-start justify-between gap-4 px-3 py-2 text-sm">
+      <span className="text-text-subtle">{label}</span>
+      <span className="text-right font-medium">{value}</span>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/IsDev.tsx b/apps/yaak-client/components/IsDev.tsx
new file mode 100644
index 0000000..6cc9ad6
--- /dev/null
+++ b/apps/yaak-client/components/IsDev.tsx
@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { appInfo } from "../lib/appInfo";
+
+interface Props {
+  children: ReactNode;
+}
+
+export function IsDev({ children }: Props) {
+  if (!appInfo.isDev) {
+    return null;
+  }
+
+  return <>{children}</>;
+}
diff --git a/apps/yaak-client/components/JsonBodyEditor.tsx b/apps/yaak-client/components/JsonBodyEditor.tsx
new file mode 100644
index 0000000..209fbac
--- /dev/null
+++ b/apps/yaak-client/components/JsonBodyEditor.tsx
@@ -0,0 +1,122 @@
+import { linter } from "@codemirror/lint";
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import { Banner, Icon } from "@yaakapp-internal/ui";
+import { useCallback, useMemo } from "react";
+import { useKeyValue } from "../hooks/useKeyValue";
+import { fireAndForget } from "../lib/fireAndForget";
+import { textLikelyContainsJsonComments } from "../lib/jsonComments";
+import type { DropdownItem } from "./core/Dropdown";
+import { Dropdown } from "./core/Dropdown";
+import type { EditorProps } from "./core/Editor/Editor";
+import { jsonParseLinter } from "./core/Editor/json-lint";
+import { Editor } from "./core/Editor/LazyEditor";
+import { IconButton } from "./core/IconButton";
+import { IconTooltip } from "./core/IconTooltip";
+
+interface Props {
+  forceUpdateKey: string;
+  heightMode: EditorProps["heightMode"];
+  request: HttpRequest;
+}
+
+export function JsonBodyEditor({ forceUpdateKey, heightMode, request }: Props) {
+  const handleChange = useCallback(
+    (text: string) => patchModel(request, { body: { ...request.body, text } }),
+    [request],
+  );
+
+  const autoFix = request.body?.sendJsonComments !== true;
+
+  const lintExtension = useMemo(
+    () =>
+      linter(
+        jsonParseLinter(
+          autoFix
+            ? { allowComments: true, allowTrailingCommas: true }
+            : { allowComments: false, allowTrailingCommas: false },
+        ),
+      ),
+    [autoFix],
+  );
+
+  const hasComments = useMemo(
+    () => textLikelyContainsJsonComments(request.body?.text ?? ""),
+    [request.body?.text],
+  );
+
+  const { value: bannerDismissed, set: setBannerDismissed } = useKeyValue<boolean>({
+    namespace: "no_sync",
+    key: ["json-fix-3", request.workspaceId],
+    fallback: false,
+  });
+
+  const handleToggleAutoFix = useCallback(() => {
+    const newBody = { ...request.body };
+    if (autoFix) {
+      newBody.sendJsonComments = true;
+    } else {
+      delete newBody.sendJsonComments;
+    }
+    fireAndForget(patchModel(request, { body: newBody }));
+  }, [request, autoFix]);
+
+  const handleDropdownOpen = useCallback(() => {
+    if (!bannerDismissed) {
+      fireAndForget(setBannerDismissed(true));
+    }
+  }, [bannerDismissed, setBannerDismissed]);
+
+  const showBanner = hasComments && autoFix && !bannerDismissed;
+
+  const stripMessage = "Automatically strip comments and trailing commas before sending";
+  const actions = useMemo<EditorProps["actions"]>(
+    () => [
+      showBanner && (
+        <Banner color="notice" className="opacity-100! h-sm py-0! px-2! flex items-center text-xs">
+          <p className="inline-flex items-center gap-1 min-w-0">
+            <span className="truncate">Auto-fix enabled</span>
+            <Icon icon="arrow_right" size="sm" className="opacity-disabled" />
+          </p>
+        </Banner>
+      ),
+      <div key="settings" className="opacity-100! shadow!">
+        <Dropdown
+          onOpen={handleDropdownOpen}
+          items={
+            [
+              {
+                label: "Automatically Fix JSON",
+                keepOpenOnSelect: true,
+                onSelect: handleToggleAutoFix,
+                rightSlot: <IconTooltip content={stripMessage} />,
+                leftSlot: (
+                  <Icon icon={autoFix ? "check_square_checked" : "check_square_unchecked"} />
+                ),
+              },
+            ] satisfies DropdownItem[]
+          }
+        >
+          <IconButton size="sm" variant="border" icon="settings" title="JSON Settings" />
+        </Dropdown>
+      </div>,
+    ],
+    [handleDropdownOpen, handleToggleAutoFix, autoFix, showBanner],
+  );
+
+  return (
+    <Editor
+      forceUpdateKey={forceUpdateKey}
+      autocompleteFunctions
+      autocompleteVariables
+      placeholder="..."
+      heightMode={heightMode}
+      defaultValue={`${request.body?.text ?? ""}`}
+      language="json"
+      onChange={handleChange}
+      stateKey={`json.${request.id}`}
+      actions={actions}
+      lintExtension={lintExtension}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/KeyboardShortcutsDialog.tsx b/apps/yaak-client/components/KeyboardShortcutsDialog.tsx
new file mode 100644
index 0000000..194437e
--- /dev/null
+++ b/apps/yaak-client/components/KeyboardShortcutsDialog.tsx
@@ -0,0 +1,10 @@
+import { hotkeyActions } from "../hooks/useHotKey";
+import { HotkeyList } from "./core/HotkeyList";
+
+export function KeyboardShortcutsDialog() {
+  return (
+    <div className="grid h-full">
+      <HotkeyList hotkeys={hotkeyActions} className="pb-6" />
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/LargeValueDialog.tsx b/apps/yaak-client/components/LargeValueDialog.tsx
new file mode 100644
index 0000000..ecafea0
--- /dev/null
+++ b/apps/yaak-client/components/LargeValueDialog.tsx
@@ -0,0 +1,274 @@
+import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import { Banner, Button, HStack, LoadingIcon } from "@yaakapp-internal/ui";
+import type { ReactNode } from "react";
+import { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import type { SniffedValue } from "./core/Editor/sniffValue";
+import { showDialog } from "../lib/dialog";
+import { decodeValue, largeValueActions } from "../lib/largeValue";
+import { Dropdown } from "./core/Dropdown";
+import { AudioViewer } from "./responseViewers/AudioViewer";
+import { ImageViewer } from "./responseViewers/ImageViewer";
+import { SvgViewer } from "./responseViewers/SvgViewer";
+import { VideoViewer } from "./responseViewers/VideoViewer";
+
+const PdfViewer = lazy(() =>
+  import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),
+);
+
+interface Props {
+  /** The whole value, exactly as it reads in the document */
+  text: string;
+  sniffed: SniffedValue | null;
+}
+
+/**
+ * Shows a value the editor collapsed, in whatever viewer its type calls for.
+ *
+ * The editor only ever read the value's head, so this is where it is decoded in full — on an
+ * explicit click, behind a spinner, rather than during layout.
+ */
+export function LargeValueDialog({ text, sniffed }: Props) {
+  const viewer = sniffed == null ? null : viewerFor(sniffed.mime);
+  const decoded = useDecoded(text, viewer == null ? null : sniffed);
+
+  // Nothing recognised it, so there is nothing to decode it into
+  if (sniffed == null || viewer == null) {
+    return (
+      <PagedText text={text}>
+        {sniffed != null && (
+          <Banner color="info" className="mb-3">
+            {sniffed.label} content cannot be previewed, so it is shown as it appears in the
+            response.
+          </Banner>
+        )}
+      </PagedText>
+    );
+  }
+
+  if (decoded == null) {
+    return (
+      <HStack className="h-full" alignItems="center" justifyContent="center">
+        <LoadingIcon />
+      </HStack>
+    );
+  }
+
+  if ("error" in decoded) {
+    return (
+      <PagedText text={text}>
+        <Banner color="danger" className="mb-3">
+          Failed to decode this {sniffed.label} value: {decoded.error}
+        </Banner>
+      </PagedText>
+    );
+  }
+
+  const { bytes } = decoded;
+
+  switch (viewer) {
+    case "svg":
+      return <DecodedSvg bytes={bytes} />;
+    case "image":
+      return (
+        <div className="h-full overflow-auto flex items-center justify-center">
+          <ImageViewer data={toArrayBuffer(bytes)} mimeType={sniffed.mime} />
+        </div>
+      );
+    case "audio":
+      return <AudioViewer data={bytes} mimeType={sniffed.mime} />;
+    case "video":
+      return <VideoViewer data={bytes} mimeType={sniffed.mime} />;
+    case "pdf":
+      return (
+        <Suspense fallback={<LoadingIcon />}>
+          <PdfViewer data={bytes} />
+        </Suspense>
+      );
+    case "text":
+      return <DecodedText bytes={bytes} />;
+  }
+}
+
+/**
+ * Decoding megabytes is worth doing once, not on every render — and the viewers below key their
+ * blob URLs off the string, so a fresh one each time would rebuild them for nothing.
+ */
+function DecodedSvg({ bytes }: { bytes: Uint8Array }) {
+  const text = useMemo(() => new TextDecoder().decode(bytes), [bytes]);
+  return <SvgViewer text={text} />;
+}
+
+function DecodedText({ bytes }: { bytes: Uint8Array }) {
+  const text = useMemo(() => new TextDecoder().decode(bytes), [bytes]);
+  return <PagedText text={text} />;
+}
+
+/**
+ * The same menu the tag in the editor carries, minus the one entry that would only reopen this.
+ *
+ * It lives in the dialog's title rather than above the content, which would cost a band of
+ * whitespace the width of the dialog to hold one small button.
+ */
+function LargeValueActions({ text, sniffed }: Props) {
+  const items = useMemo(
+    () =>
+      largeValueActions({
+        value: () => text,
+        sniffed,
+        // The tag copies only what it hides; in here, what you see is the whole value
+        copyText: () => text,
+      }),
+    [text, sniffed],
+  );
+
+  return (
+    <Dropdown items={items}>
+      <Button size="xs" variant="border" forDropdown>
+        Actions
+      </Button>
+    </Dropdown>
+  );
+}
+
+type Viewer = "image" | "svg" | "audio" | "video" | "pdf" | "text";
+
+/** Which viewer a media type calls for, or null if none of them can show it. */
+function viewerFor(mime: string): Viewer | null {
+  if (mime.startsWith("image/svg")) return "svg";
+  if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("audio/")) return "audio";
+  if (mime.startsWith("video/")) return "video";
+  if (mime === "application/pdf") return "pdf";
+  if (mime.startsWith("text/") || /\b(json|xml|javascript|csv)\b/.test(mime)) return "text";
+  return null;
+}
+
+type Decoded = { bytes: Uint8Array } | { error: string };
+
+/**
+ * The value's bytes, once they exist.
+ *
+ * Decoding a few megabytes takes long enough to be seen, so it happens in an effect rather than
+ * during render — the dialog paints with a spinner first, instead of opening late.
+ */
+function useDecoded(text: string, sniffed: SniffedValue | null): Decoded | null {
+  const [decoded, setDecoded] = useState<Decoded | null>(null);
+
+  useEffect(() => {
+    if (sniffed == null) return;
+
+    setDecoded(null);
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      let result: Decoded;
+      try {
+        result = { bytes: decodeValue(text, sniffed) };
+      } catch (err) {
+        result = { error: err instanceof Error ? err.message : String(err) };
+      }
+      if (!cancelled) setDecoded(result);
+    });
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [text, sniffed]);
+
+  return decoded;
+}
+
+/** A copy, since a `Uint8Array` may be a view onto a larger buffer */
+function toArrayBuffer(bytes: Uint8Array): ArrayBuffer {
+  return bytes.slice().buffer;
+}
+
+/** Characters shown at once. A page this size lays out instantly once its lines are short. */
+const PAGE_CHARS = 50_000;
+
+/** Where a line is broken. The long-line cost this whole feature avoids is per line. */
+const WRAP_CHARS = 120;
+
+/**
+ * The raw text, in pages of short lines.
+ *
+ * What is left when nothing can render the value. Handing it to an editor whole would walk
+ * straight back into the layout stall that collapsed it in the first place, so it is paged and
+ * hard-wrapped instead: no line is ever long, and no page is ever big.
+ */
+function PagedText({ text, children }: { text: string; children?: ReactNode }) {
+  const [page, setPage] = useState(0);
+  const pages = Math.max(1, Math.ceil(text.length / PAGE_CHARS));
+  const from = page * PAGE_CHARS;
+  const to = Math.min(from + PAGE_CHARS, text.length);
+  const body = useMemo(() => wrap(text.slice(from, to)), [text, from, to]);
+
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)_auto] gap-3">
+      <div>{children}</div>
+      <pre className="overflow-auto font-mono text-sm text-text-subtle select-text">{body}</pre>
+      <HStack space={2} alignItems="center" className="text-sm text-text-subtle">
+        <span>
+          {(to - from).toLocaleString()} of {text.length.toLocaleString()} characters
+        </span>
+        {pages > 1 && (
+          <HStack space={2} alignItems="center" className="ml-auto">
+            <Button
+              size="xs"
+              variant="border"
+              disabled={page === 0}
+              onClick={() => setPage((p) => p - 1)}
+            >
+              Previous
+            </Button>
+            <span>
+              Page {page + 1} of {pages.toLocaleString()}
+            </span>
+            <Button
+              size="xs"
+              variant="border"
+              disabled={page >= pages - 1}
+              onClick={() => setPage((p) => p + 1)}
+            >
+              Next
+            </Button>
+          </HStack>
+        )}
+      </HStack>
+    </div>
+  );
+}
+
+/** Breaks every line at {@link WRAP_CHARS}, leaving the ones already shorter alone. */
+function wrap(text: string): string {
+  const lines: string[] = [];
+  for (const line of text.split("\n")) {
+    if (line.length <= WRAP_CHARS) {
+      lines.push(line);
+      continue;
+    }
+    for (let i = 0; i < line.length; i += WRAP_CHARS) {
+      lines.push(line.slice(i, i + WRAP_CHARS));
+    }
+  }
+  return lines.join("\n");
+}
+
+export function showLargeValueDialog({ text, sniffed }: Props) {
+  showDialog({
+    id: "large-value",
+    size: "lg",
+    className: "h-[calc(100vh-10rem)]",
+    // Everything in one line: the same words the tag uses, and the same menu it carries. A
+    // separate description and a row of its own for the button cost three bands to say this.
+    title: (
+      <HStack space={3} alignItems="center">
+        <span>
+          {sniffed == null ? "Hidden Value" : sniffed.label} · {formatSize(text.length)}
+        </span>
+        <LargeValueActions text={text} sniffed={sniffed} />
+      </HStack>
+    ),
+    render: () => <LargeValueDialog text={text} sniffed={sniffed} />,
+  });
+}
diff --git a/apps/yaak-client/components/LicenseBadge.tsx b/apps/yaak-client/components/LicenseBadge.tsx
new file mode 100644
index 0000000..a0cf9da
--- /dev/null
+++ b/apps/yaak-client/components/LicenseBadge.tsx
@@ -0,0 +1,139 @@
+import type { LicenseCheckStatus } from "@yaakapp-internal/license";
+import { useLicense } from "@yaakapp-internal/license";
+import { settingsAtom } from "@yaakapp-internal/models";
+import { differenceInCalendarDays } from "date-fns";
+import { formatDate } from "date-fns/format";
+import { useAtomValue } from "jotai";
+import type { ReactNode } from "react";
+import { openSettings } from "../commands/openSettings";
+import { atomWithKVStorage } from "../lib/atoms/atomWithKVStorage";
+import { jotaiStore } from "../lib/jotai";
+import { CargoFeature } from "./CargoFeature";
+import type { ButtonProps } from "./core/Button";
+import { Dropdown, type DropdownItem } from "./core/Dropdown";
+import { Icon } from "@yaakapp-internal/ui";
+import { PillButton } from "./core/PillButton";
+import { platform } from "@yaakapp-internal/platform";
+
+const dismissedAtom = atomWithKVStorage<string | null>("dismissed_license_expired", null);
+
+function getDetail(
+  data: LicenseCheckStatus,
+  dismissedExpired: string | null,
+): { label: ReactNode; color: ButtonProps["color"]; options?: DropdownItem[] } | null | undefined {
+  const dismissedAt = dismissedExpired ? new Date(dismissedExpired).getTime() : null;
+
+  switch (data.status) {
+    case "active":
+      return null;
+    case "personal_use":
+      return { label: "Personal Use", color: "notice" };
+    case "trialing":
+      return { label: "Commercial Trial", color: "secondary" };
+    case "error":
+      return { label: "Error", color: "danger" };
+    case "inactive":
+      return { label: "Personal Use", color: "notice" };
+    case "past_due":
+      return { label: "Past Due", color: "danger" };
+    case "expired":
+      // Don't show the expired message if it's been less than 14 days since the last dismissal
+      if (dismissedAt && differenceInCalendarDays(new Date(), dismissedAt) < 14) {
+        return null;
+      }
+
+      return {
+        color: "notice",
+        label: data.data.changes > 0 ? "Updates Paused" : "License Expired",
+        options: [
+          {
+            label: `${data.data.changes} New Updates`,
+            color: "success",
+            leftSlot: <Icon icon="gift" />,
+            rightSlot: <Icon icon="external_link" size="sm" className="opacity-disabled" />,
+            hidden: data.data.changes === 0 || data.data.changesUrl == null,
+            onSelect: () => platform.openUrl(data.data.changesUrl ?? ""),
+          },
+          {
+            type: "separator",
+            label: `License expired ${formatDate(data.data.periodEnd, "MMM dd, yyyy")}`,
+          },
+          {
+            label: <div className="min-w-48">Renew License</div>,
+            leftSlot: <Icon icon="refresh" />,
+            rightSlot: <Icon icon="external_link" size="sm" className="opacity-disabled" />,
+            hidden: data.data.changesUrl == null,
+            onSelect: () => platform.openUrl(data.data.billingUrl),
+          },
+          {
+            label: "Enter License Key",
+            leftSlot: <Icon icon="key_round" />,
+            hidden: data.data.changesUrl == null,
+            onSelect: openLicenseDialog,
+          },
+          { type: "separator" },
+          {
+            label: <span className="text-text-subtle">Remind me Later</span>,
+            leftSlot: <Icon icon="alarm_clock" className="text-text-subtle" />,
+            onSelect: () => jotaiStore.set(dismissedAtom, new Date().toISOString()),
+          },
+        ],
+      };
+  }
+}
+
+export function LicenseBadge() {
+  return (
+    <CargoFeature feature="license">
+      <LicenseBadgeCmp />
+    </CargoFeature>
+  );
+}
+
+function LicenseBadgeCmp() {
+  const { check } = useLicense();
+  const settings = useAtomValue(settingsAtom);
+  const dismissed = useAtomValue(dismissedAtom);
+
+  // Dismissed license badge
+  if (settings.hideLicenseBadge) {
+    return null;
+  }
+
+  if (check.error) {
+    // Failed to check for license. Probably a network or server error, so just don't show anything.
+    return null;
+  }
+
+  // Hasn't loaded yet
+  if (check.data == null) {
+    return null;
+  }
+
+  const detail = getDetail(check.data, dismissed);
+  if (detail == null) {
+    return null;
+  }
+
+  if (detail.options && detail.options.length > 0) {
+    return (
+      <Dropdown items={detail.options}>
+        <PillButton color={detail.color}>
+          <div className="flex items-center gap-0.5">
+            {detail.label} <Icon icon="chevron_down" className="opacity-60" />
+          </div>
+        </PillButton>
+      </Dropdown>
+    );
+  }
+
+  return (
+    <PillButton color={detail.color} onClick={openLicenseDialog}>
+      {detail.label}
+    </PillButton>
+  );
+}
+
+function openLicenseDialog() {
+  openSettings.mutate("license");
+}
diff --git a/apps/yaak-client/components/LocalImage.tsx b/apps/yaak-client/components/LocalImage.tsx
new file mode 100644
index 0000000..498b060
--- /dev/null
+++ b/apps/yaak-client/components/LocalImage.tsx
@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import classNames from "classnames";
+import { platform } from "@yaakapp-internal/platform";
+
+interface Props {
+  src: string;
+  className?: string;
+}
+
+export function LocalImage({ src: srcPath, className }: Props) {
+  const src = useQuery({
+    queryKey: ["local-image", srcPath],
+    queryFn: async () => {
+      const p = await platform.files.resolveResource(srcPath);
+      return platform.files.url(p);
+    },
+  });
+
+  return (
+    <img
+      src={src.data}
+      alt="Response preview"
+      className={classNames(
+        className,
+        "transition-opacity",
+        src.data == null ? "opacity-0" : "opacity-100",
+      )}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/Markdown.tsx b/apps/yaak-client/components/Markdown.tsx
new file mode 100644
index 0000000..1bc0834
--- /dev/null
+++ b/apps/yaak-client/components/Markdown.tsx
@@ -0,0 +1,113 @@
+import type { CSSProperties } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
+import remarkGfm from "remark-gfm";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { Prose } from "./Prose";
+
+interface Props {
+  children: string | null;
+  className?: string;
+}
+
+export function Markdown({ children, className }: Props) {
+  if (children == null) return null;
+
+  return (
+    <Prose className={className}>
+      <ErrorBoundary name="Markdown">
+        <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+          {children}
+        </ReactMarkdown>
+      </ErrorBoundary>
+    </Prose>
+  );
+}
+
+const prismTheme = {
+  'pre[class*="language-"]': {
+    // Needs to be here, so the lib doesn't add its own
+  },
+
+  // Syntax tokens
+  comment: { color: "var(--textSubtle)" },
+  prolog: { color: "var(--textSubtle)" },
+  doctype: { color: "var(--textSubtle)" },
+  cdata: { color: "var(--textSubtle)" },
+
+  punctuation: { color: "var(--textSubtle)" },
+
+  property: { color: "var(--primary)" },
+  "attr-name": { color: "var(--primary)" },
+
+  string: { color: "var(--notice)" },
+  char: { color: "var(--notice)" },
+
+  number: { color: "var(--info)" },
+  constant: { color: "var(--info)" },
+  symbol: { color: "var(--info)" },
+
+  boolean: { color: "var(--warning)" },
+  "attr-value": { color: "var(--warning)" },
+
+  variable: { color: "var(--success)" },
+
+  tag: { color: "var(--info)" },
+  operator: { color: "var(--danger)" },
+  keyword: { color: "var(--danger)" },
+  function: { color: "var(--success)" },
+  "class-name": { color: "var(--primary)" },
+  builtin: { color: "var(--danger)" },
+  selector: { color: "var(--danger)" },
+  inserted: { color: "var(--success)" },
+  deleted: { color: "var(--danger)" },
+  regex: { color: "var(--warning)" },
+
+  important: { color: "var(--danger)", fontWeight: "bold" },
+  italic: { fontStyle: "italic" },
+  bold: { fontWeight: "bold" },
+  entity: { cursor: "help" },
+};
+
+const lineStyle: CSSProperties = {
+  paddingRight: "1.5em",
+  paddingLeft: "0",
+  opacity: 0.5,
+};
+
+const markdownComponents: Partial<Components> = {
+  // Ensure links open in external browser by adding target="_blank"
+  a: ({ href, children, ...rest }) => {
+    if (href && !href.match(/https?:\/\//)) {
+      href = `http://${href}`;
+    }
+    return (
+      <a target="_blank" rel="noreferrer noopener" href={href} {...rest}>
+        {children}
+      </a>
+    );
+  },
+  code(props) {
+    const { children, className, ref, ...extraProps } = props;
+    extraProps.node = undefined;
+
+    const match = /language-(\w+)/.exec(className || "");
+    return match ? (
+      <SyntaxHighlighter
+        {...extraProps}
+        CodeTag="code"
+        showLineNumbers
+        PreTag="div"
+        lineNumberStyle={lineStyle}
+        language={match[1]}
+        style={prismTheme}
+      >
+        {String(children as string).replace(/\n$/, "")}
+      </SyntaxHighlighter>
+    ) : (
+      <code {...extraProps} ref={ref} className={className}>
+        {children}
+      </code>
+    );
+  },
+};
diff --git a/apps/yaak-client/components/MarkdownEditor.tsx b/apps/yaak-client/components/MarkdownEditor.tsx
new file mode 100644
index 0000000..be31570
--- /dev/null
+++ b/apps/yaak-client/components/MarkdownEditor.tsx
@@ -0,0 +1,83 @@
+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";
+
+interface Props extends Pick<EditorProps, "heightMode" | "stateKey" | "forceUpdateKey"> {
+  placeholder: string;
+  className?: string;
+  editorClassName?: string;
+  defaultValue: string;
+  onChange: (value: string) => void;
+  name: string;
+}
+
+export function MarkdownEditor({
+  className,
+  editorClassName,
+  defaultValue,
+  onChange,
+  name,
+  forceUpdateKey,
+  ...editorProps
+}: Props) {
+  const [viewMode, setViewMode] = useState<ViewMode>(defaultValue ? "preview" : "edit");
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const editor = (
+    <Editor
+      hideGutter
+      wrapLines
+      className={classNames(editorClassName, "[&_.cm-line]:max-w-lg! max-h-full")}
+      language="markdown"
+      defaultValue={defaultValue}
+      onChange={onChange}
+      forceUpdateKey={forceUpdateKey}
+      {...editorProps}
+    />
+  );
+
+  const preview =
+    defaultValue.length === 0 ? (
+      <p className="text-text-subtlest">No description</p>
+    ) : (
+      <div className="pr-1.5 overflow-y-auto max-h-full **:cursor-auto **:select-auto">
+        <Markdown className="max-w-lg select-auto cursor-auto">{defaultValue}</Markdown>
+      </div>
+    );
+
+  const contents = viewMode === "preview" ? preview : editor;
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(
+        "group/markdown",
+        "relative w-full h-full pt-1.5 rounded-md gap-x-1.5",
+        "min-w-0", // Not sure why this is needed
+        className,
+      )}
+    >
+      <div className="h-full w-full">{contents}</div>
+      <div className="absolute top-0 right-0 pt-1.5 pr-1.5">
+        <SegmentedControl
+          name={name}
+          label="View mode"
+          hideLabel
+          onChange={setViewMode}
+          value={viewMode}
+          className="opacity-0 group-focus-within/markdown:opacity-100 group-hover/markdown:opacity-100"
+          options={[
+            { icon: "eye", label: "Preview mode", value: "preview" },
+            { icon: "pencil", label: "Edit mode", value: "edit" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/ModelSettingsEditor.tsx b/apps/yaak-client/components/ModelSettingsEditor.tsx
new file mode 100644
index 0000000..f720fe4
--- /dev/null
+++ b/apps/yaak-client/components/ModelSettingsEditor.tsx
@@ -0,0 +1,660 @@
+import type {
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  HttpVersion,
+  InheritedBoolSetting,
+  InheritedHttpVersionSetting,
+  InheritedIntSetting,
+  WebsocketRequest,
+  Workspace,
+} from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import { useModelAncestors } from "../hooks/useModelAncestors";
+import {
+  modelSupportsSetting,
+  type RequestSettingDefinition,
+  SETTING_FOLLOW_REDIRECTS,
+  SETTING_HTTP_VERSION,
+  SETTING_REQUEST_MESSAGE_SIZE,
+  SETTING_REQUEST_TIMEOUT,
+  SETTING_SEND_COOKIES,
+  SETTING_STORE_COOKIES,
+  SETTING_VALIDATE_CERTIFICATES,
+} from "../lib/requestSettings";
+import { Checkbox } from "./core/Checkbox";
+import { PlainInput } from "./core/PlainInput";
+import { Select } from "./core/Select";
+import {
+  SettingOverrideRow,
+  SettingRow,
+  SettingRowBoolean,
+  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 ModelWithHttpSettings = Workspace | Folder | HttpRequest;
+type ModelWithTlsSettings = Workspace | Folder | HttpRequest | WebsocketRequest | GrpcRequest;
+type ModelWithCookieSettings = Workspace | Folder | HttpRequest | WebsocketRequest;
+type ModelWithMessageSizeSettings = Workspace | Folder | WebsocketRequest | GrpcRequest;
+type BooleanSetting = boolean | InheritedBoolSetting;
+type IntegerSetting = number | InheritedIntSetting;
+type HttpVersionSetting = HttpVersion | InheritedHttpVersionSetting;
+type CookieSettingsPatch = {
+  settingSendCookies?: ModelWithCookieSettings["settingSendCookies"];
+  settingStoreCookies?: ModelWithCookieSettings["settingStoreCookies"];
+};
+type HttpSettingsPatch = {
+  settingFollowRedirects?: ModelWithHttpSettings["settingFollowRedirects"];
+  settingHttpVersion?: ModelWithHttpSettings["settingHttpVersion"];
+  settingRequestTimeout?: ModelWithHttpSettings["settingRequestTimeout"];
+};
+type TlsSettingsPatch = {
+  settingValidateCertificates?: ModelWithTlsSettings["settingValidateCertificates"];
+};
+type MessageSizeSettingsPatch = {
+  settingRequestMessageSize?: ModelWithMessageSizeSettings["settingRequestMessageSize"];
+};
+
+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">
+      {supportsTlsSettings && (
+        <SettingsSection title={showSectionTitles ? "Requests" : null}>
+          {supportsHttpSettings && (
+            <IntegerSettingRow
+              settingDefinition={SETTING_REQUEST_TIMEOUT}
+              setting={model.settingRequestTimeout}
+              inheritedValue={resolveInheritedValue(
+                ancestors,
+                SETTING_REQUEST_TIMEOUT.modelKey,
+                model.settingRequestTimeout,
+              )}
+              onChange={(settingRequestTimeout) =>
+                patchHttpSettings(model, {
+                  settingRequestTimeout,
+                })
+              }
+            />
+          )}
+          {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}
+            inheritedValue={resolveInheritedValue(
+              ancestors,
+              SETTING_VALIDATE_CERTIFICATES.modelKey,
+              model.settingValidateCertificates,
+            )}
+            onChange={(settingValidateCertificates) =>
+              patchTlsSettings(model, {
+                settingValidateCertificates,
+              })
+            }
+          />
+          {supportsHttpSettings && (
+            <BooleanSettingRow
+              settingDefinition={SETTING_FOLLOW_REDIRECTS}
+              setting={model.settingFollowRedirects}
+              inheritedValue={resolveInheritedValue(
+                ancestors,
+                SETTING_FOLLOW_REDIRECTS.modelKey,
+                model.settingFollowRedirects,
+              )}
+              onChange={(settingFollowRedirects) =>
+                patchHttpSettings(model, {
+                  settingFollowRedirects,
+                })
+              }
+            />
+          )}
+          {supportsHttpSettings && (
+            <HttpVersionSettingRow
+              settingDefinition={SETTING_HTTP_VERSION}
+              setting={model.settingHttpVersion}
+              inheritedValue={resolveInheritedValue(
+                ancestors,
+                SETTING_HTTP_VERSION.modelKey,
+                model.settingHttpVersion,
+              )}
+              onChange={(settingHttpVersion) =>
+                patchHttpSettings(model, {
+                  settingHttpVersion,
+                })
+              }
+            />
+          )}
+        </SettingsSection>
+      )}
+      {supportsCookieSettings && (
+        <SettingsSection title={supportsTlsSettings || showSectionTitles ? "Cookies" : null}>
+          <BooleanSettingRow
+            settingDefinition={SETTING_SEND_COOKIES}
+            setting={model.settingSendCookies}
+            inheritedValue={resolveInheritedValue(
+              ancestors,
+              SETTING_SEND_COOKIES.modelKey,
+              model.settingSendCookies,
+            )}
+            onChange={(settingSendCookies) =>
+              patchCookieSettings(model, {
+                settingSendCookies,
+              })
+            }
+          />
+          <BooleanSettingRow
+            settingDefinition={SETTING_STORE_COOKIES}
+            setting={model.settingStoreCookies}
+            inheritedValue={resolveInheritedValue(
+              ancestors,
+              SETTING_STORE_COOKIES.modelKey,
+              model.settingStoreCookies,
+            )}
+            onChange={(settingStoreCookies) =>
+              patchCookieSettings(model, {
+                settingStoreCookies,
+              })
+            }
+          />
+        </SettingsSection>
+      )}
+    </SettingsList>
+  );
+}
+
+export function countOverriddenSettings(model: ModelWithSettings) {
+  const settings: (BooleanSetting | IntegerSetting | HttpVersionSetting)[] = [];
+
+  if (modelSupportsCookieSettings(model)) {
+    settings.push(model.settingSendCookies, model.settingStoreCookies);
+  }
+
+  settings.push(model.settingValidateCertificates);
+
+  if (modelSupportsHttpSettings(model)) {
+    settings.push(
+      model.settingFollowRedirects,
+      model.settingRequestTimeout,
+      model.settingHttpVersion,
+    );
+  }
+
+  if (modelSupportsMessageSizeSettings(model)) {
+    settings.push(model.settingRequestMessageSize);
+  }
+
+  return settings.filter((setting) => isInheritedSetting(setting) && setting.enabled === true)
+    .length;
+}
+
+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>) {
+  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>) {
+  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 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 {
+  return modelSupportsSetting(model, SETTING_SEND_COOKIES);
+}
+
+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,
+  settingDefinition,
+  onChange,
+}: {
+  inheritedValue: boolean;
+  setting: BooleanSetting;
+  settingDefinition: RequestSettingDefinition;
+  onChange: (setting: BooleanSetting) => void;
+}) {
+  const inherited = isInheritedSetting(setting);
+  const overridden = inherited ? setting.enabled === true : false;
+  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
+
+  if (!inherited) {
+    return (
+      <SettingRowBoolean
+        checked={value}
+        title={settingDefinition.title}
+        description={settingDefinition.description}
+        onChange={(value) => onChange(value)}
+      />
+    );
+  }
+
+  return (
+    <SettingOverrideRow
+      title={settingDefinition.title}
+      description={settingDefinition.description}
+      overridden={overridden}
+      onResetOverride={() => onChange({ ...setting, enabled: false })}
+    >
+      <Checkbox
+        hideLabel
+        size="md"
+        title={settingDefinition.title}
+        checked={value}
+        onChange={(value) => onChange({ ...setting, enabled: true, value })}
+      />
+    </SettingOverrideRow>
+  );
+}
+
+const HTTP_VERSION_OPTIONS: { label: string; value: HttpVersion }[] = [
+  { label: "Automatic", value: "auto" },
+  { label: "HTTP/1.1", value: "http1" },
+  { label: "HTTP/2", value: "http2" },
+];
+
+function HttpVersionSettingRow({
+  inheritedValue,
+  setting,
+  settingDefinition,
+  onChange,
+}: {
+  inheritedValue: HttpVersion;
+  setting: HttpVersionSetting;
+  settingDefinition: RequestSettingDefinition<"settingHttpVersion">;
+  onChange: (setting: HttpVersionSetting) => void;
+}) {
+  const inherited = isInheritedSetting(setting);
+  const overridden = inherited ? setting.enabled === true : false;
+  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
+
+  if (!inherited) {
+    return (
+      <SettingRow title={settingDefinition.title} description={settingDefinition.description}>
+        <Select
+          hideLabel
+          name={settingDefinition.modelKey}
+          label={settingDefinition.title}
+          size="sm"
+          value={value}
+          options={HTTP_VERSION_OPTIONS}
+          onChange={(value) => onChange(value)}
+        />
+      </SettingRow>
+    );
+  }
+
+  return (
+    <SettingOverrideRow
+      title={settingDefinition.title}
+      description={settingDefinition.description}
+      overridden={overridden}
+      onResetOverride={() => onChange({ ...setting, enabled: false })}
+    >
+      <Select
+        hideLabel
+        name={settingDefinition.modelKey}
+        label={settingDefinition.title}
+        size="sm"
+        value={value}
+        options={HTTP_VERSION_OPTIONS}
+        onChange={(value) => onChange({ ...setting, enabled: true, value })}
+      />
+    </SettingOverrideRow>
+  );
+}
+
+function IntegerSettingRow({
+  inheritedValue,
+  setting,
+  settingDefinition,
+  onChange,
+}: {
+  inheritedValue: number;
+  setting: IntegerSetting;
+  settingDefinition: RequestSettingDefinition<"settingRequestTimeout">;
+  onChange: (setting: IntegerSetting) => void;
+}) {
+  const inherited = isInheritedSetting(setting);
+  const overridden = inherited ? setting.enabled === true : false;
+  const value = inherited ? (overridden ? setting.value : inheritedValue) : setting;
+
+  if (!inherited) {
+    return (
+      <SettingRow title={settingDefinition.title} description={settingDefinition.description}>
+        <NumberUnitInput
+          name={settingDefinition.modelKey}
+          label={settingDefinition.title}
+          unit="ms"
+          value={`${value}`}
+          placeholder={`${settingDefinition.defaultValue}`}
+          validate={isValidInteger}
+          onChange={(value) => onChange(parseInteger(value))}
+        />
+      </SettingRow>
+    );
+  }
+
+  return (
+    <SettingOverrideRow
+      title={settingDefinition.title}
+      description={settingDefinition.description}
+      overridden={overridden}
+      onResetOverride={() => onChange({ ...setting, enabled: false })}
+    >
+      <NumberUnitInput
+        name={settingDefinition.modelKey}
+        label={settingDefinition.title}
+        unit="ms"
+        value={`${value}`}
+        placeholder={`${settingDefinition.defaultValue}`}
+        validate={isValidInteger}
+        onChange={(value) =>
+          onChange({
+            ...setting,
+            enabled: true,
+            value: parseInteger(value),
+          })
+        }
+      />
+    </SettingOverrideRow>
+  );
+}
+
+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 = "0";
+
+  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 } {
+  return typeof setting === "object" && setting != null && "value" in setting;
+}
+
+function resolveInheritedValue(
+  ancestors: (Folder | Workspace)[],
+  key: "settingRequestTimeout" | "settingRequestMessageSize",
+  fallback: IntegerSetting,
+): number;
+function resolveInheritedValue(
+  ancestors: (Folder | Workspace)[],
+  key: BooleanWorkspaceSettingKey,
+  fallback: BooleanSetting,
+): boolean;
+function resolveInheritedValue(
+  ancestors: (Folder | Workspace)[],
+  key: "settingHttpVersion",
+  fallback: HttpVersionSetting,
+): HttpVersion;
+function resolveInheritedValue(
+  ancestors: (Folder | Workspace)[],
+  key: keyof WorkspaceSettings,
+  fallback: BooleanSetting | IntegerSetting | HttpVersionSetting,
+) {
+  for (const ancestor of ancestors) {
+    const setting = ancestor[key] as BooleanSetting | IntegerSetting | HttpVersionSetting;
+    if (isInheritedSetting(setting)) {
+      if (setting.enabled === true) {
+        return setting.value;
+      }
+      continue;
+    }
+    return setting;
+  }
+
+  return isInheritedSetting(fallback) ? fallback.value : fallback;
+}
+
+type WorkspaceSettings = Pick<
+  Workspace,
+  | "settingFollowRedirects"
+  | "settingHttpVersion"
+  | "settingRequestMessageSize"
+  | "settingRequestTimeout"
+  | "settingSendCookies"
+  | "settingStoreCookies"
+  | "settingValidateCertificates"
+>;
+
+type BooleanWorkspaceSettingKey = Exclude<
+  keyof WorkspaceSettings,
+  "settingRequestTimeout" | "settingRequestMessageSize" | "settingHttpVersion"
+>;
+
+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;
+}
diff --git a/apps/yaak-client/components/MoveToWorkspaceDialog.tsx b/apps/yaak-client/components/MoveToWorkspaceDialog.tsx
new file mode 100644
index 0000000..564e641
--- /dev/null
+++ b/apps/yaak-client/components/MoveToWorkspaceDialog.tsx
@@ -0,0 +1,88 @@
+import type { GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import { patchModel, workspacesAtom } from "@yaakapp-internal/models";
+import { InlineCode, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { pluralizeCount } from "../lib/pluralize";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { router } from "../lib/router";
+import { showToast } from "../lib/toast";
+import { Button } from "./core/Button";
+import { Select } from "./core/Select";
+
+interface Props {
+  activeWorkspaceId: string;
+  requests: (HttpRequest | GrpcRequest | WebsocketRequest)[];
+  onDone: () => void;
+}
+
+export function MoveToWorkspaceDialog({ onDone, requests, activeWorkspaceId }: Props) {
+  const workspaces = useAtomValue(workspacesAtom);
+  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string>(activeWorkspaceId);
+
+  const targetWorkspace = workspaces.find((w) => w.id === selectedWorkspaceId);
+  const isSameWorkspace = selectedWorkspaceId === activeWorkspaceId;
+
+  return (
+    <VStack space={4} className="mb-4">
+      <Select
+        label="Target Workspace"
+        name="workspace"
+        value={selectedWorkspaceId}
+        onChange={setSelectedWorkspaceId}
+        options={workspaces.map((w) => ({
+          label: w.id === activeWorkspaceId ? `${w.name} (current)` : w.name,
+          value: w.id,
+        }))}
+      />
+      <Button
+        color="primary"
+        disabled={isSameWorkspace}
+        onClick={async () => {
+          const patch = {
+            workspaceId: selectedWorkspaceId,
+            folderId: null,
+          };
+
+          await Promise.all(requests.map((r) => patchModel(r, patch)));
+
+          // Hide after a moment, to give time for requests to disappear
+          setTimeout(onDone, 100);
+          showToast({
+            id: "workspace-moved",
+            message:
+              requests.length === 1 && requests[0] != null ? (
+                <>
+                  <InlineCode>{resolvedModelName(requests[0])}</InlineCode> moved to{" "}
+                  <InlineCode>{targetWorkspace?.name ?? "unknown"}</InlineCode>
+                </>
+              ) : (
+                <>
+                  {pluralizeCount("request", requests.length)} moved to{" "}
+                  <InlineCode>{targetWorkspace?.name ?? "unknown"}</InlineCode>
+                </>
+              ),
+            action: ({ hide }) => (
+              <Button
+                size="xs"
+                color="secondary"
+                className="mr-auto min-w-20"
+                onClick={async () => {
+                  await router.navigate({
+                    to: "/workspaces/$workspaceId",
+                    params: { workspaceId: selectedWorkspaceId },
+                  });
+                  hide();
+                }}
+              >
+                Switch to Workspace
+              </Button>
+            ),
+          });
+        }}
+      >
+        {requests.length === 1 ? "Move" : `Move ${pluralizeCount("Request", requests.length)}`}
+      </Button>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/Onboarding.tsx b/apps/yaak-client/components/Onboarding.tsx
new file mode 100644
index 0000000..c5574dc
--- /dev/null
+++ b/apps/yaak-client/components/Onboarding.tsx
@@ -0,0 +1,212 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import { platform } from "@yaakapp-internal/platform";
+import { settingsAtom } from "@yaakapp-internal/models";
+import { HeaderSize, Heading, Icon, type IconProps, LoadingIcon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
+import { showDialog } from "../lib/dialog";
+import { importData } from "../lib/importData";
+import {
+  createExampleWorkspace,
+  createFreshWorkspace,
+  type OnboardingChoice,
+  recordOnboardingChoice,
+} from "../lib/onboarding";
+import { showErrorToast } from "../lib/toast";
+import { CloneGitRepositoryDialog } from "./CloneGitRepositoryDialog";
+import { Button } from "./core/Button";
+
+/** Shown instead of a workspace when there are none. */
+export function Onboarding() {
+  const settings = useAtomValue(settingsAtom);
+  const { capabilities } = platform;
+  const canImport = capabilities.plugins;
+  const showAlreadyUsing = capabilities.localFiles || capabilities.git || canImport;
+  const [busy, setBusy] = useState<OnboardingChoice | null>(null);
+
+  const choose = (choice: OnboardingChoice, run: () => Promise<void> | void) => async () => {
+    recordOnboardingChoice(choice);
+    setBusy(choice);
+    try {
+      await run();
+    } catch (err) {
+      showErrorToast({
+        id: "onboarding-failed",
+        title: "Something went wrong",
+        message: String(err),
+      });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full w-full">
+      <HeaderSize
+        data-tauri-drag-region
+        size="lg"
+        className="x-theme-appHeader bg-surface"
+        osType={platform.osType()}
+        hideWindowControls={settings.hideWindowControls}
+        useNativeTitlebar={settings.useNativeTitlebar}
+        interfaceScale={settings.interfaceScale}
+      />
+      <div className="overflow-auto px-6 py-10 grid">
+        <div className="m-auto w-full max-w-lg flex flex-col gap-7">
+          <div className="flex flex-col gap-1.5">
+            <Heading>How would you like to get started?</Heading>
+            <p className="text-text-subtle">
+              {canImport
+                ? "Bring over existing work, try a real API, or start fresh."
+                : "Try a real API, or start fresh."}
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            {canImport && (
+              <StartOption
+                color="primary"
+                icon="folder_input"
+                title="Migrate from another tool"
+                description="Postman, Insomnia, OpenAPI, or curl"
+                busy={busy === "import"}
+                disabled={busy != null}
+                onClick={choose("import", () => importData.mutateAsync())}
+              />
+            )}
+            <StartOption
+              color="info"
+              icon="flask"
+              title="Try Yaak with a real API"
+              description="Ready-made requests you can send right away"
+              busy={busy === "example"}
+              disabled={busy != null}
+              onClick={choose("example", createExampleWorkspace)}
+            />
+            <StartOption
+              color="success"
+              icon="plus"
+              title="Start fresh"
+              description="An empty workspace for your first request"
+              busy={busy === "fresh"}
+              disabled={busy != null}
+              onClick={choose("fresh", createFreshWorkspace)}
+            />
+          </div>
+
+          {showAlreadyUsing && (
+            <div className="pt-5 border-t border-dashed border-border-subtle flex flex-col items-start gap-2.5">
+              <span className="text-sm text-text-subtle">Already using Yaak?</span>
+              <div className="flex flex-wrap gap-2">
+                {capabilities.localFiles && (
+                  <Button
+                    size="xs"
+                    variant="border"
+                    color="secondary"
+                    leftSlot={<Icon icon="folder_open" size="sm" />}
+                    disabled={busy != null}
+                    onClick={choose("open_folder", async () => {
+                      const dir = await platform.dialog.open({
+                        title: "Select Workspace Directory",
+                        directory: true,
+                        multiple: false,
+                      });
+                      if (dir == null) return;
+                      await openWorkspaceFromSyncDir.mutateAsync(dir);
+                    })}
+                  >
+                    Open folder
+                  </Button>
+                )}
+                {capabilities.git && (
+                  <Button
+                    size="xs"
+                    variant="border"
+                    color="secondary"
+                    leftSlot={<Icon icon="git_branch" size="sm" />}
+                    disabled={busy != null}
+                    onClick={choose("clone_git", () => {
+                      showDialog({
+                        id: "clone-git-repository",
+                        size: "md",
+                        title: "Clone Git Repository",
+                        render: ({ hide }) => <CloneGitRepositoryDialog hide={hide} />,
+                      });
+                    })}
+                  >
+                    Clone repository
+                  </Button>
+                )}
+                {canImport && (
+                  <Button
+                    size="xs"
+                    variant="border"
+                    color="secondary"
+                    leftSlot={<Icon icon="import" size="sm" />}
+                    disabled={busy != null}
+                    onClick={choose("import_yaak", () => importData.mutateAsync())}
+                  >
+                    Import
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StartOption({
+  color,
+  icon,
+  title,
+  description,
+  onClick,
+  busy,
+  disabled,
+}: {
+  color: Color;
+  icon: IconProps["icon"];
+  title: string;
+  description: string;
+  onClick: () => void;
+  busy: boolean;
+  disabled: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={classNames(
+        "group w-full text-left rounded-lg px-3 py-2.5 border border-border-subtle",
+        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3.5",
+        "enabled:hocus:bg-surface-highlight/50 enabled:hocus:border-border",
+        "outline-border-focus focus-visible:outline-2",
+        disabled && !busy && "opacity-disabled",
+      )}
+    >
+      {/* The banner theme tints this tile from the theme's own color for each option */}
+      <div
+        className={classNames(
+          `x-theme-banner--${color}`,
+          "size-10 rounded-md bg-surface-highlight grid place-items-center",
+        )}
+      >
+        {busy ? <LoadingIcon size="sm" /> : <Icon icon={icon} color={color} size="md" />}
+      </div>
+      <div className="min-w-0">
+        <div className="font-semibold text-text">{title}</div>
+        <div className="text-sm text-text-subtle">{description}</div>
+      </div>
+      <Icon
+        icon="chevron_right"
+        className="text-text-subtlest group-enabled:group-hover:text-text-subtle group-enabled:group-focus-visible:text-text-subtle"
+      />
+    </button>
+  );
+}
diff --git a/apps/yaak-client/components/Prose.css b/apps/yaak-client/components/Prose.css
new file mode 100644
index 0000000..6101afe
--- /dev/null
+++ b/apps/yaak-client/components/Prose.css
@@ -0,0 +1,212 @@
+@reference "../main.css";
+
+.prose {
+  @apply text-text;
+
+  & > :first-child {
+    @apply mt-0;
+  }
+
+  & > :last-child {
+    @apply mb-0;
+  }
+
+  img,
+  video,
+  p,
+  ul,
+  ol,
+  table,
+  blockquote,
+  hr,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply my-5;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply mt-10 leading-tight text-balance;
+  }
+
+  p {
+    @apply text-pretty;
+  }
+
+  h1 {
+    @apply text-4xl font-bold;
+  }
+
+  h2 {
+    @apply text-2xl font-bold;
+  }
+
+  h3 {
+    @apply text-xl font-bold;
+  }
+
+  em {
+    @apply italic;
+  }
+
+  strong {
+    @apply font-bold;
+  }
+
+  ul {
+    @apply list-disc;
+
+    ul,
+    ol {
+      @apply my-0;
+    }
+  }
+
+  ol {
+    @apply list-decimal;
+
+    ol,
+    ul {
+      @apply my-0;
+    }
+  }
+
+  ol,
+  ul {
+    @apply pl-6;
+
+    li p {
+      @apply inline-block my-0;
+    }
+
+    li {
+      @apply pl-2;
+    }
+
+    li::marker {
+      @apply text-success;
+    }
+  }
+
+  a {
+    @apply text-notice hover:underline;
+
+    * {
+      @apply text-notice!;
+    }
+  }
+
+  img,
+  video {
+    @apply max-h-[65vh];
+    @apply w-auto mx-auto rounded-md;
+  }
+
+  table code,
+  p code,
+  ol code,
+  ul code {
+    @apply text-xs bg-surface-active text-info font-normal whitespace-nowrap;
+    @apply px-1.5 py-0.5 rounded-sm not-italic;
+    @apply select-text;
+  }
+
+  pre {
+    @apply bg-surface-highlight! text-text!;
+    @apply px-4 py-3 rounded-md;
+    @apply overflow-auto whitespace-pre;
+    @apply text-editor font-mono;
+
+    code {
+      @apply font-normal;
+    }
+  }
+
+  .banner {
+    @apply border border-dashed;
+    @apply border-border bg-surface-highlight text-text px-4 py-3 rounded-sm text-base;
+
+    &::before {
+      @apply block font-bold mb-1;
+      @apply text-text-subtlest;
+
+      content: "Note";
+    }
+
+    &.x-theme-banner--secondary::before {
+      content: "Info";
+    }
+
+    &.x-theme-banner--success::before {
+      content: "Tip";
+    }
+
+    &.x-theme-banner--notice::before {
+      content: "Important";
+    }
+
+    &.x-theme-banner--warning::before {
+      content: "Warning";
+    }
+
+    &.x-theme-banner--danger::before {
+      content: "Caution";
+    }
+  }
+
+  blockquote {
+    @apply italic py-3 pl-5 pr-3 border-l-8 border-surface-active text-lg text-text bg-surface-highlight rounded-sm shadow-lg;
+
+    p {
+      @apply m-0;
+    }
+  }
+
+  h2[id] > a .icon.icon-link {
+    @apply hidden w-4 h-4 bg-success ml-2;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+
+    &:hover {
+      @apply bg-notice;
+    }
+  }
+
+  h2[id]:hover {
+    .icon.icon-link {
+      @apply inline-block;
+    }
+  }
+
+  hr {
+    @apply border-secondary border-dashed md:mx-[25%] my-10;
+  }
+
+  figure {
+    img {
+      @apply mb-0;
+    }
+
+    figcaption {
+      @apply relative pl-9 text-success text-sm pt-1;
+
+      p {
+        @apply m-0;
+      }
+    }
+
+    figcaption::before {
+      @apply border-info absolute left-2 top-0 h-3.5 w-6 rounded-bl border-l border-b border-dotted;
+      content: "";
+    }
+  }
+}
diff --git a/apps/yaak-client/components/Prose.tsx b/apps/yaak-client/components/Prose.tsx
new file mode 100644
index 0000000..883aef4
--- /dev/null
+++ b/apps/yaak-client/components/Prose.tsx
@@ -0,0 +1,12 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import "./Prose.css";
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Prose({ className, ...props }: Props) {
+  return <div className={classNames("prose", className)} {...props} />;
+}
diff --git a/apps/yaak-client/components/RecentGrpcConnectionsDropdown.tsx b/apps/yaak-client/components/RecentGrpcConnectionsDropdown.tsx
new file mode 100644
index 0000000..224731f
--- /dev/null
+++ b/apps/yaak-client/components/RecentGrpcConnectionsDropdown.tsx
@@ -0,0 +1,115 @@
+import type { GrpcConnection } from "@yaakapp-internal/models";
+import { deleteModel } from "@yaakapp-internal/models";
+import { HStack, Icon } from "@yaakapp-internal/ui";
+import {
+  differenceInHours,
+  differenceInMinutes,
+  format,
+  isToday,
+  isYesterday,
+} from "date-fns";
+import { useDeleteGrpcConnections } from "../hooks/useDeleteGrpcConnections";
+import { pluralizeCount } from "../lib/pluralize";
+import { Dropdown, type DropdownItem } from "./core/Dropdown";
+import { formatMillis } from "./core/HttpResponseDurationTag";
+import { IconButton } from "./core/IconButton";
+
+interface Props {
+  connections: GrpcConnection[];
+  activeConnection: GrpcConnection;
+  onPinnedConnectionId: (id: string) => void;
+}
+
+export function RecentGrpcConnectionsDropdown({
+  activeConnection,
+  connections,
+  onPinnedConnectionId,
+}: Props) {
+  const deleteAllConnections = useDeleteGrpcConnections(activeConnection?.requestId);
+  const latestConnectionId = connections[0]?.id ?? "n/a";
+  const connectionHistoryItems: DropdownItem[] = [];
+  let lastHistoryGroup: string | null = null;
+  let hasRecentConnections = false;
+  let hasShownRecentEmptyState = false;
+  const now = new Date();
+
+  for (const c of connections) {
+    const createdAt = `${c.createdAt}Z`;
+    const createdAtDate = new Date(createdAt);
+    const minutesAgo = differenceInMinutes(now, createdAtDate);
+    const hoursAgo = differenceInHours(now, createdAtDate);
+    let historyGroup = format(createdAtDate, "MMM d, yyyy");
+    if (minutesAgo < 5) historyGroup = "Just now";
+    else if (minutesAgo < 15) historyGroup = "5 minutes ago";
+    else if (minutesAgo < 60) historyGroup = "15 minutes ago";
+    else if (hoursAgo < 3) historyGroup = "1 hour ago";
+    else if (hoursAgo < 6) historyGroup = "3 hours ago";
+    else if (isToday(createdAtDate)) historyGroup = "Today";
+    else if (isYesterday(createdAtDate)) historyGroup = "Yesterday";
+    else if (createdAtDate.getFullYear() === now.getFullYear()) historyGroup = format(createdAtDate, "MMM d");
+    const absoluteTime = format(createdAt, "MMM d, yyyy, h:mm:ss a O");
+
+    if (historyGroup === "Just now") {
+      hasRecentConnections = true;
+    } else if (!hasRecentConnections && !hasShownRecentEmptyState) {
+      connectionHistoryItems.push({
+        type: "content",
+        label: <span className="block px-4 py-1 text-sm text-text-subtle">No recent connections</span>,
+      });
+      hasShownRecentEmptyState = true;
+    }
+
+    if (historyGroup !== "Just now" && historyGroup !== lastHistoryGroup) {
+      connectionHistoryItems.push({
+        type: "separator",
+        label: <span title={absoluteTime}>{historyGroup}</span>,
+      });
+      lastHistoryGroup = historyGroup;
+    }
+
+    connectionHistoryItems.push({
+      label: (
+        <HStack space={2} className="text-sm" title={absoluteTime}>
+          <span className="font-mono">{formatMillis(c.elapsed)}</span>
+        </HStack>
+      ),
+      leftSlot: activeConnection?.id === c.id ? <Icon icon="check" /> : <Icon icon="empty" />,
+      onSelect: () => onPinnedConnectionId(c.id),
+    });
+  }
+
+  if (!hasRecentConnections && !hasShownRecentEmptyState) {
+    connectionHistoryItems.push({
+      type: "content",
+      label: <span className="block px-4 py-1 text-sm text-text-subtle">No recent connections</span>,
+    });
+  }
+
+  return (
+    <Dropdown
+      items={[
+        {
+          label: "Clear Connection",
+          onSelect: () => deleteModel(activeConnection),
+          disabled: connections.length === 0,
+        },
+        {
+          label: `Clear ${pluralizeCount("Connection", connections.length)}`,
+          onSelect: deleteAllConnections.mutate,
+          hidden: connections.length <= 1,
+          disabled: connections.length === 0,
+        },
+        { type: "separator", label: "History" },
+        ...connectionHistoryItems,
+      ]}
+    >
+      <IconButton
+        title="Show connection history"
+        icon={activeConnection?.id === latestConnectionId ? "history" : "pin"}
+        className="m-0.5 text-text-subtle"
+        size="sm"
+        iconSize="md"
+      />
+    </Dropdown>
+  );
+}
diff --git a/apps/yaak-client/components/RecentHttpResponsesDropdown.tsx b/apps/yaak-client/components/RecentHttpResponsesDropdown.tsx
new file mode 100644
index 0000000..4db7a0f
--- /dev/null
+++ b/apps/yaak-client/components/RecentHttpResponsesDropdown.tsx
@@ -0,0 +1,159 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { deleteModel } from "@yaakapp-internal/models";
+import { HStack, Icon } from "@yaakapp-internal/ui";
+import {
+  differenceInHours,
+  differenceInMinutes,
+  format,
+  isToday,
+  isYesterday,
+} from "date-fns";
+import { useDeleteHttpResponses } from "../hooks/useDeleteHttpResponses";
+import { useKeyValue } from "../hooks/useKeyValue";
+import { DismissibleBanner } from "./core/DismissibleBanner";
+import { Dropdown, type DropdownItem } from "./core/Dropdown";
+import { formatMillis } from "./core/HttpResponseDurationTag";
+import { HttpStatusTag } from "./core/HttpStatusTag";
+import { IconButton } from "./core/IconButton";
+import { SizeTag } from "./core/SizeTag";
+
+interface Props {
+  responses: HttpResponse[];
+  activeResponse: HttpResponse;
+  onPinnedResponseId: (id: string) => void;
+  className?: string;
+}
+
+export const RecentHttpResponsesDropdown = function ResponsePane({
+  activeResponse,
+  responses,
+  onPinnedResponseId,
+}: Props) {
+  const deleteAllResponses = useDeleteHttpResponses(activeResponse?.requestId);
+  const movedActionsBannerId = "response-actions-moved-to-response-menu-2026-07-02-v2";
+  const { value: dismissedMovedActions } = useKeyValue<boolean>({
+    namespace: "global",
+    key: ["dismiss-banner", movedActionsBannerId],
+    fallback: false,
+  });
+  const latestResponseId = responses[0]?.id ?? "n/a";
+  const responseHistoryItems: DropdownItem[] = [];
+  let lastHistoryGroup: string | null = null;
+  let hasRecentResponses = false;
+  let hasShownRecentEmptyState = false;
+  const now = new Date();
+
+  for (const r of responses) {
+    const createdAt = `${r.createdAt}Z`;
+    const createdAtDate = new Date(createdAt);
+    const minutesAgo = differenceInMinutes(now, createdAtDate);
+    const hoursAgo = differenceInHours(now, createdAtDate);
+    let historyGroup = format(createdAtDate, "MMM d, yyyy");
+    if (minutesAgo < 5) historyGroup = "Just now";
+    else if (minutesAgo < 15) historyGroup = "5 minutes ago";
+    else if (minutesAgo < 60) historyGroup = "15 minutes ago";
+    else if (hoursAgo < 3) historyGroup = "1 hour ago";
+    else if (hoursAgo < 6) historyGroup = "3 hours ago";
+    else if (isToday(createdAtDate)) historyGroup = "Today";
+    else if (isYesterday(createdAtDate)) historyGroup = "Yesterday";
+    else if (createdAtDate.getFullYear() === now.getFullYear()) historyGroup = format(createdAtDate, "MMM d");
+    const absoluteTime = format(createdAt, "MMM d, yyyy, h:mm:ss a O");
+
+    if (historyGroup === "Just now") {
+      hasRecentResponses = true;
+    } else if (!hasRecentResponses && !hasShownRecentEmptyState) {
+      responseHistoryItems.push({
+        type: "content",
+        label: <span className="block px-4 py-1 text-sm text-text-subtle">No recent requests</span>,
+      });
+      hasShownRecentEmptyState = true;
+    }
+
+    if (historyGroup !== "Just now" && historyGroup !== lastHistoryGroup) {
+      responseHistoryItems.push({
+        type: "separator",
+        label: <span title={absoluteTime}>{historyGroup}</span>,
+      });
+      lastHistoryGroup = historyGroup;
+    }
+
+    responseHistoryItems.push({
+      label: (
+        <HStack space={2} className="text-sm" title={absoluteTime}>
+          <HttpStatusTag short className="text-xs" response={r} />
+          <span className="text-text-subtlest">•</span>
+          <span className="font-mono">{r.elapsed >= 0 ? formatMillis(r.elapsed) : "n/a"}</span>
+          <span className="text-text-subtlest">•</span>
+          <SizeTag
+            className="text-xs"
+            contentLength={r.contentLength ?? 0}
+            contentLengthCompressed={r.contentLengthCompressed}
+          />
+        </HStack>
+      ),
+      leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <Icon icon="empty" />,
+      onSelect: () => {
+        onPinnedResponseId(r.id);
+      },
+    });
+  }
+
+  if (!hasRecentResponses && !hasShownRecentEmptyState) {
+    responseHistoryItems.push({
+      type: "content",
+      label: <span className="block px-4 py-1 text-sm text-text-subtle">No recent requests</span>,
+    });
+  }
+
+  return (
+    <Dropdown
+      items={[
+        {
+          label: "Delete",
+          leftSlot: <Icon icon="trash" />,
+          onSelect: () => deleteModel(activeResponse),
+        },
+        {
+          label: "Delete all",
+          leftSlot: <Icon icon="trash" />,
+          onSelect: deleteAllResponses.mutate,
+          disabled: responses.length === 0,
+        },
+        {
+          label: "Unpin Response",
+          onSelect: () => onPinnedResponseId(activeResponse.id),
+          leftSlot: <Icon icon="unpin" />,
+          hidden: latestResponseId === activeResponse.id,
+          disabled: responses.length === 0,
+        },
+        {
+          type: "content",
+          hidden: dismissedMovedActions === true,
+          label: (
+            <DismissibleBanner
+              id={movedActionsBannerId}
+              color="info"
+              size="xs"
+              className="max-w-72"
+            >
+              <p>Copy and save actions moved to the Response tab menu.</p>
+            </DismissibleBanner>
+          ),
+        },
+        {
+          type: "separator",
+          label: "Recent",
+        },
+        ...responseHistoryItems,
+      ]}
+    >
+      <IconButton
+        title="Show response history"
+        icon={activeResponse?.id === latestResponseId ? "history" : "pin"}
+        className="m-0.5 text-text-subtle"
+        size="sm"
+        iconSize="md"
+      />
+    </Dropdown>
+  );
+};
diff --git a/apps/yaak-client/components/RecentRequestsDropdown.tsx b/apps/yaak-client/components/RecentRequestsDropdown.tsx
new file mode 100644
index 0000000..12b150e
--- /dev/null
+++ b/apps/yaak-client/components/RecentRequestsDropdown.tsx
@@ -0,0 +1,101 @@
+import classNames from "classnames";
+import { useMemo, useRef } from "react";
+import { useActiveRequest } from "../hooks/useActiveRequest";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { allRequestsAtom } from "../hooks/useAllRequests";
+import { useHotKey } from "../hooks/useHotKey";
+import { useKeyboardEvent } from "../hooks/useKeyboardEvent";
+import { useRecentRequests } from "../hooks/useRecentRequests";
+import { jotaiStore } from "../lib/jotai";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { router } from "../lib/router";
+import { Button } from "./core/Button";
+import type { DropdownItem, DropdownRef } from "./core/Dropdown";
+import { Dropdown } from "./core/Dropdown";
+import { HttpMethodTag } from "./core/HttpMethodTag";
+
+interface Props {
+  className?: string;
+}
+
+export function RecentRequestsDropdown({ className }: Props) {
+  const activeRequest = useActiveRequest();
+  const dropdownRef = useRef<DropdownRef>(null);
+  const [recentRequestIds] = useRecentRequests();
+
+  // Handle key-up
+  // TODO: Somehow make useHotKey have this functionality. Note: e.key does not work
+  //  on Linux, for example, when Control is mapped to CAPS. This will never fire.
+  useKeyboardEvent("keyup", "Control", () => {
+    if (dropdownRef.current?.isOpen) {
+      dropdownRef.current?.select?.();
+    }
+  });
+
+  useHotKey("switcher.prev", () => {
+    if (!dropdownRef.current?.isOpen) {
+      // Select the second because the first is the current request
+      dropdownRef.current?.open(1);
+    } else {
+      dropdownRef.current?.next?.();
+    }
+  });
+
+  useHotKey("switcher.next", () => {
+    if (!dropdownRef.current?.isOpen) dropdownRef.current?.open();
+    dropdownRef.current?.prev?.();
+  });
+
+  const items = useMemo(() => {
+    const activeWorkspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+    if (activeWorkspaceId === null) return [];
+
+    const requests = jotaiStore.get(allRequestsAtom);
+    const recentRequestItems: DropdownItem[] = [];
+    for (const id of recentRequestIds) {
+      const request = requests.find((r) => r.id === id);
+      if (request === undefined) continue;
+
+      recentRequestItems.push({
+        label: resolvedModelName(request),
+        leftSlot: <HttpMethodTag short className="text-xs" request={request} />,
+        onSelect: async () => {
+          await router.navigate({
+            to: "/workspaces/$workspaceId",
+            params: { workspaceId: activeWorkspaceId },
+            search: (prev) => ({ ...prev, request_id: request.id }),
+          });
+        },
+      });
+    }
+
+    // No recent requests to show
+    if (recentRequestItems.length === 0) {
+      return [
+        {
+          key: "no-recent-requests",
+          label: "No recent requests",
+          disabled: true,
+        },
+      ];
+    }
+
+    return recentRequestItems.slice(0, 20);
+  }, [recentRequestIds]);
+
+  return (
+    <Dropdown ref={dropdownRef} items={items}>
+      <Button
+        size="sm"
+        hotkeyAction="switcher.toggle"
+        className={classNames(
+          className,
+          "truncate pointer-events-auto",
+          activeRequest == null && "text-text-subtlest italic",
+        )}
+      >
+        {resolvedModelName(activeRequest)}
+      </Button>
+    </Dropdown>
+  );
+}
diff --git a/apps/yaak-client/components/RecentWebsocketConnectionsDropdown.tsx b/apps/yaak-client/components/RecentWebsocketConnectionsDropdown.tsx
new file mode 100644
index 0000000..5b6aa14
--- /dev/null
+++ b/apps/yaak-client/components/RecentWebsocketConnectionsDropdown.tsx
@@ -0,0 +1,119 @@
+import type { WebsocketConnection } from "@yaakapp-internal/models";
+import { deleteModel, getModel } from "@yaakapp-internal/models";
+import { HStack, Icon } from "@yaakapp-internal/ui";
+import {
+  differenceInHours,
+  differenceInMinutes,
+  format,
+  isToday,
+  isYesterday,
+} from "date-fns";
+import { deleteWebsocketConnections } from "../commands/deleteWebsocketConnections";
+import { pluralizeCount } from "../lib/pluralize";
+import { Dropdown, type DropdownItem } from "./core/Dropdown";
+import { formatMillis } from "./core/HttpResponseDurationTag";
+import { IconButton } from "./core/IconButton";
+
+interface Props {
+  connections: WebsocketConnection[];
+  activeConnection: WebsocketConnection;
+  onPinnedConnectionId: (id: string) => void;
+}
+
+export function RecentWebsocketConnectionsDropdown({
+  activeConnection,
+  connections,
+  onPinnedConnectionId,
+}: Props) {
+  const latestConnectionId = connections[0]?.id ?? "n/a";
+  const connectionHistoryItems: DropdownItem[] = [];
+  let lastHistoryGroup: string | null = null;
+  let hasRecentConnections = false;
+  let hasShownRecentEmptyState = false;
+  const now = new Date();
+
+  for (const c of connections) {
+    const createdAt = `${c.createdAt}Z`;
+    const createdAtDate = new Date(createdAt);
+    const minutesAgo = differenceInMinutes(now, createdAtDate);
+    const hoursAgo = differenceInHours(now, createdAtDate);
+    let historyGroup = format(createdAtDate, "MMM d, yyyy");
+    if (minutesAgo < 5) historyGroup = "Just now";
+    else if (minutesAgo < 15) historyGroup = "5 minutes ago";
+    else if (minutesAgo < 60) historyGroup = "15 minutes ago";
+    else if (hoursAgo < 3) historyGroup = "1 hour ago";
+    else if (hoursAgo < 6) historyGroup = "3 hours ago";
+    else if (isToday(createdAtDate)) historyGroup = "Today";
+    else if (isYesterday(createdAtDate)) historyGroup = "Yesterday";
+    else if (createdAtDate.getFullYear() === now.getFullYear()) historyGroup = format(createdAtDate, "MMM d");
+    const absoluteTime = format(createdAt, "MMM d, yyyy, h:mm:ss a O");
+
+    if (historyGroup === "Just now") {
+      hasRecentConnections = true;
+    } else if (!hasRecentConnections && !hasShownRecentEmptyState) {
+      connectionHistoryItems.push({
+        type: "content",
+        label: <span className="block px-4 py-1 text-sm text-text-subtle">No recent connections</span>,
+      });
+      hasShownRecentEmptyState = true;
+    }
+
+    if (historyGroup !== "Just now" && historyGroup !== lastHistoryGroup) {
+      connectionHistoryItems.push({
+        type: "separator",
+        label: <span title={absoluteTime}>{historyGroup}</span>,
+      });
+      lastHistoryGroup = historyGroup;
+    }
+
+    connectionHistoryItems.push({
+      label: (
+        <HStack space={2} className="text-sm" title={absoluteTime}>
+          <span className="font-mono">{formatMillis(c.elapsed)}</span>
+        </HStack>
+      ),
+      leftSlot: activeConnection?.id === c.id ? <Icon icon="check" /> : <Icon icon="empty" />,
+      onSelect: () => onPinnedConnectionId(c.id),
+    });
+  }
+
+  if (!hasRecentConnections && !hasShownRecentEmptyState) {
+    connectionHistoryItems.push({
+      type: "content",
+      label: <span className="block px-4 py-1 text-sm text-text-subtle">No recent connections</span>,
+    });
+  }
+
+  return (
+    <Dropdown
+      items={[
+        {
+          label: "Clear Connection",
+          onSelect: () => deleteModel(activeConnection),
+          disabled: connections.length === 0,
+        },
+        {
+          label: `Clear ${pluralizeCount("Connection", connections.length)}`,
+          onSelect: () => {
+            const request = getModel("websocket_request", activeConnection.requestId);
+            if (request != null) {
+              deleteWebsocketConnections.mutate(request);
+            }
+          },
+          hidden: connections.length <= 1,
+          disabled: connections.length === 0,
+        },
+        { type: "separator", label: "History" },
+        ...connectionHistoryItems,
+      ]}
+    >
+      <IconButton
+        title="Show connection history"
+        icon={activeConnection?.id === latestConnectionId ? "history" : "pin"}
+        className="m-0.5 text-text-subtle"
+        size="sm"
+        iconSize="md"
+      />
+    </Dropdown>
+  );
+}
diff --git a/apps/yaak-client/components/RedirectToLatestWorkspace.tsx b/apps/yaak-client/components/RedirectToLatestWorkspace.tsx
new file mode 100644
index 0000000..0d21fe5
--- /dev/null
+++ b/apps/yaak-client/components/RedirectToLatestWorkspace.tsx
@@ -0,0 +1,51 @@
+import { workspacesAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { getRecentCookieJars } from "../hooks/useRecentCookieJars";
+import { getRecentEnvironments } from "../hooks/useRecentEnvironments";
+import { getRecentRequests } from "../hooks/useRecentRequests";
+import { useRecentWorkspaces } from "../hooks/useRecentWorkspaces";
+import { fireAndForget } from "../lib/fireAndForget";
+import { router } from "../lib/router";
+import { Onboarding } from "./Onboarding";
+
+export function RedirectToLatestWorkspace() {
+  const workspaces = useAtomValue(workspacesAtom);
+  const recentWorkspaces = useRecentWorkspaces();
+
+  useEffect(() => {
+    if (workspaces.length === 0 || recentWorkspaces == null) {
+      return;
+    }
+
+    fireAndForget(
+      (async () => {
+        const workspaceId = recentWorkspaces[0] ?? workspaces[0]?.id ?? "n/a";
+        const environmentId = (await getRecentEnvironments(workspaceId))[0] ?? null;
+        const cookieJarId = (await getRecentCookieJars(workspaceId))[0] ?? null;
+        const requestId = (await getRecentRequests(workspaceId))[0] ?? null;
+        const params = { workspaceId };
+        const search = {
+          cookie_jar_id: cookieJarId,
+          environment_id: environmentId,
+          request_id: requestId,
+        };
+
+        // Whatever created the first workspace may have already navigated into it
+        const currentId = router.history.location.pathname.match(/^\/workspaces\/([^/]+)/)?.[1];
+        if (workspaces.some((w) => w.id === currentId)) return;
+
+        console.log("Redirecting to workspace", params, search);
+        await router.navigate({ to: "/workspaces/$workspaceId", params, search });
+      })(),
+    );
+  }, [recentWorkspaces, workspaces, workspaces.length]);
+
+  // The global models are loaded before the router mounts, so an empty list is a real
+  // first launch (or the last workspace was just deleted), not a store still loading
+  if (workspaces.length === 0) {
+    return <Onboarding />;
+  }
+
+  return null;
+}
diff --git a/apps/yaak-client/components/RequestBodyViewer.tsx b/apps/yaak-client/components/RequestBodyViewer.tsx
new file mode 100644
index 0000000..a5a7782
--- /dev/null
+++ b/apps/yaak-client/components/RequestBodyViewer.tsx
@@ -0,0 +1,102 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { lazy, Suspense } from "react";
+import { useHttpRequestBody } from "../hooks/useHttpRequestBody";
+import { getMimeTypeFromContentType, languageFromContentType } from "../lib/contentType";
+import { LoadingIcon } from "@yaakapp-internal/ui";
+import { EmptyStateText } from "./EmptyStateText";
+import { AudioViewer } from "./responseViewers/AudioViewer";
+import { CsvViewer } from "./responseViewers/CsvViewer";
+import { ImageViewer } from "./responseViewers/ImageViewer";
+import { MultipartViewer } from "./responseViewers/MultipartViewer";
+import { SvgViewer } from "./responseViewers/SvgViewer";
+import { TextViewer } from "./responseViewers/TextViewer";
+import { VideoViewer } from "./responseViewers/VideoViewer";
+import { WebPageViewer } from "./responseViewers/WebPageViewer";
+
+const PdfViewer = lazy(() =>
+  import("./responseViewers/PdfViewer").then((m) => ({ default: m.PdfViewer })),
+);
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function RequestBodyViewer({ response }: Props) {
+  return <RequestBodyViewerInner key={response.id} response={response} />;
+}
+
+function RequestBodyViewerInner({ response }: Props) {
+  const { data, isLoading, error } = useHttpRequestBody(response);
+
+  if (isLoading) {
+    return (
+      <EmptyStateText>
+        <LoadingIcon />
+      </EmptyStateText>
+    );
+  }
+
+  if (error) {
+    return <EmptyStateText>Error loading request body: {error.message}</EmptyStateText>;
+  }
+
+  if (data?.bodyText == null || data.bodyText.length === 0) {
+    return <EmptyStateText>No request body</EmptyStateText>;
+  }
+
+  const { bodyText, body } = data;
+
+  // Try to detect language from content-type header that was sent
+  const contentTypeHeader = response.requestHeaders.find(
+    (h) => h.name.toLowerCase() === "content-type",
+  );
+  const contentType = contentTypeHeader?.value ?? null;
+  const mimeType = contentType ? getMimeTypeFromContentType(contentType).essence : null;
+  const language = languageFromContentType(contentType, bodyText);
+
+  // Route to appropriate viewer based on content type
+  if (mimeType?.match(/^multipart/i)) {
+    const boundary = contentType?.split("boundary=")[1] ?? "unknown";
+    // Create a copy because parseMultipart may detach the buffer
+    const bodyCopy = new Uint8Array(body);
+    return (
+      <MultipartViewer data={bodyCopy} boundary={boundary} idPrefix={`request.${response.id}`} />
+    );
+  }
+
+  if (mimeType?.match(/^image\/svg/i)) {
+    return <SvgViewer text={bodyText} />;
+  }
+
+  if (mimeType?.match(/^image/i)) {
+    return <ImageViewer data={body.buffer} />;
+  }
+
+  if (mimeType?.match(/^audio/i)) {
+    return <AudioViewer data={body} />;
+  }
+
+  if (mimeType?.match(/^video/i)) {
+    return <VideoViewer data={body} />;
+  }
+
+  if (mimeType?.match(/csv|tab-separated/i)) {
+    return <CsvViewer text={bodyText} />;
+  }
+
+  if (mimeType?.match(/^text\/html/i)) {
+    return <WebPageViewer html={bodyText} />;
+  }
+
+  if (mimeType?.match(/pdf/i)) {
+    return (
+      <Suspense fallback={<LoadingIcon />}>
+        <PdfViewer data={body} />
+      </Suspense>
+    );
+  }
+
+  return (
+    <TextViewer text={bodyText} language={language} stateKey={`request.body.${response.id}`} />
+  );
+}
diff --git a/apps/yaak-client/components/RequestMethodDropdown.tsx b/apps/yaak-client/components/RequestMethodDropdown.tsx
new file mode 100644
index 0000000..8754750
--- /dev/null
+++ b/apps/yaak-client/components/RequestMethodDropdown.tsx
@@ -0,0 +1,78 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { memo, useCallback, useMemo } from "react";
+import { showPrompt } from "../lib/prompt";
+import { Button } from "./core/Button";
+import type { DropdownItem } from "./core/Dropdown";
+import { HttpMethodTag, HttpMethodTagRaw } from "./core/HttpMethodTag";
+import { Icon } from "@yaakapp-internal/ui";
+import type { RadioDropdownItem } from "./core/RadioDropdown";
+import { RadioDropdown } from "./core/RadioDropdown";
+
+type Props = {
+  request: HttpRequest;
+  className?: string;
+};
+
+const radioItems: RadioDropdownItem<string>[] = [
+  "GET",
+  "PUT",
+  "POST",
+  "PATCH",
+  "DELETE",
+  "OPTIONS",
+  "QUERY",
+  "HEAD",
+].map((m) => ({
+  value: m,
+  label: <HttpMethodTagRaw method={m} />,
+}));
+
+export const RequestMethodDropdown = memo(function RequestMethodDropdown({
+  request,
+  className,
+}: Props) {
+  const handleChange = useCallback(
+    async (method: string) => {
+      await patchModel(request, { method });
+    },
+    [request],
+  );
+
+  const itemsAfter = useMemo<DropdownItem[]>(
+    () => [
+      {
+        key: "custom",
+        label: "CUSTOM",
+        leftSlot: <Icon icon="sparkles" />,
+        onSelect: async () => {
+          const newMethod = await showPrompt({
+            id: "custom-method",
+            label: "Http Method",
+            title: "Custom Method",
+            confirmText: "Save",
+            description: "Enter a custom method name",
+            placeholder: "CUSTOM",
+          });
+          if (newMethod == null) return;
+          await handleChange(newMethod);
+        },
+      },
+    ],
+    [handleChange],
+  );
+
+  return (
+    <RadioDropdown
+      value={request.method}
+      items={radioItems}
+      itemsAfter={itemsAfter}
+      onChange={handleChange}
+    >
+      <Button size="xs" className={classNames(className, "text-text-subtle hover:text")}>
+        <HttpMethodTag request={request} noAlias />
+      </Button>
+    </RadioDropdown>
+  );
+});
diff --git a/apps/yaak-client/components/ResponseCookies.tsx b/apps/yaak-client/components/ResponseCookies.tsx
new file mode 100644
index 0000000..235b958
--- /dev/null
+++ b/apps/yaak-client/components/ResponseCookies.tsx
@@ -0,0 +1,225 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { useMemo } from "react";
+import type { JSX } from "react/jsx-runtime";
+import { useHttpResponseEvents } from "../hooks/useHttpResponseEvents";
+import { CountBadge } from "./core/CountBadge";
+import { DetailsBanner } from "./core/DetailsBanner";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+
+interface Props {
+  response: HttpResponse;
+}
+
+interface ParsedCookie {
+  name: string;
+  value: string;
+  domain?: string;
+  path?: string;
+  expires?: string;
+  maxAge?: string;
+  secure?: boolean;
+  httpOnly?: boolean;
+  sameSite?: string;
+  isDeleted?: boolean;
+}
+
+function parseCookieHeader(cookieHeader: string): Array<{ name: string; value: string }> {
+  // Parse "Cookie: name=value; name2=value2" format
+  return cookieHeader.split(";").map((pair) => {
+    const [name = "", ...valueParts] = pair.split("=");
+    return {
+      name: name.trim(),
+      value: valueParts.join("=").trim(),
+    };
+  });
+}
+
+function parseSetCookieHeader(setCookieHeader: string): ParsedCookie {
+  // Parse "Set-Cookie: name=value; Domain=...; Path=..." format
+  const parts = setCookieHeader.split(";").map((p) => p.trim());
+  const [nameValue = "", ...attributes] = parts;
+  const [name = "", ...valueParts] = nameValue.split("=");
+
+  const cookie: ParsedCookie = {
+    name: name.trim(),
+    value: valueParts.join("=").trim(),
+  };
+
+  for (const attr of attributes) {
+    const [key = "", val] = attr.split("=").map((s) => s.trim());
+    const lowerKey = key.toLowerCase();
+
+    if (lowerKey === "domain") cookie.domain = val;
+    else if (lowerKey === "path") cookie.path = val;
+    else if (lowerKey === "expires") cookie.expires = val;
+    else if (lowerKey === "max-age") cookie.maxAge = val;
+    else if (lowerKey === "secure") cookie.secure = true;
+    else if (lowerKey === "httponly") cookie.httpOnly = true;
+    else if (lowerKey === "samesite") cookie.sameSite = val;
+  }
+
+  // Detect if cookie is being deleted
+  if (cookie.maxAge !== undefined) {
+    const maxAgeNum = Number.parseInt(cookie.maxAge, 10);
+    if (!Number.isNaN(maxAgeNum) && maxAgeNum <= 0) {
+      cookie.isDeleted = true;
+    }
+  } else if (cookie.expires !== undefined) {
+    // Check if expires date is in the past
+    try {
+      const expiresDate = new Date(cookie.expires);
+      if (expiresDate.getTime() < Date.now()) {
+        cookie.isDeleted = true;
+      }
+    } catch {
+      // Invalid date, ignore
+    }
+  }
+
+  return cookie;
+}
+
+export function ResponseCookies({ response }: Props) {
+  const { data: events } = useHttpResponseEvents(response);
+
+  const { sentCookies, receivedCookies } = useMemo(() => {
+    if (!events) return { sentCookies: [], receivedCookies: [] };
+
+    // Use Maps to deduplicate by cookie name (latest value wins)
+    const sentMap = new Map<string, { name: string; value: string }>();
+    const receivedMap = new Map<string, ParsedCookie>();
+
+    for (const event of events) {
+      const e = event.event;
+
+      // Cookie headers sent (header_up with name=cookie)
+      if (e.type === "header_up" && e.name.toLowerCase() === "cookie") {
+        const cookies = parseCookieHeader(e.value);
+        for (const cookie of cookies) {
+          sentMap.set(cookie.name, cookie);
+        }
+      }
+
+      // Set-Cookie headers received (header_down with name=set-cookie)
+      if (e.type === "header_down" && e.name.toLowerCase() === "set-cookie") {
+        const cookie = parseSetCookieHeader(e.value);
+        receivedMap.set(cookie.name, cookie);
+      }
+    }
+
+    return {
+      sentCookies: Array.from(sentMap.values()),
+      receivedCookies: Array.from(receivedMap.values()),
+    };
+  }, [events]);
+
+  return (
+    <div className="overflow-auto h-full pb-4 gap-y-3 flex flex-col pr-0.5">
+      <DetailsBanner
+        defaultOpen
+        storageKey={`${response.requestId}.sent_cookies`}
+        summary={
+          <h2 className="flex items-center">
+            Sent Cookies <CountBadge showZero count={sentCookies.length} />
+          </h2>
+        }
+      >
+        {sentCookies.length === 0 ? (
+          <NoCookies />
+        ) : (
+          <KeyValueRows>
+            {sentCookies.map((cookie, i) => (
+              // oxlint-disable-next-line react/no-array-index-key
+              <KeyValueRow labelColor="primary" key={i} label={cookie.name}>
+                {cookie.value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </DetailsBanner>
+
+      <DetailsBanner
+        defaultOpen
+        storageKey={`${response.requestId}.received_cookies`}
+        summary={
+          <h2 className="flex items-center">
+            Received Cookies <CountBadge showZero count={receivedCookies.length} />
+          </h2>
+        }
+      >
+        {receivedCookies.length === 0 ? (
+          <NoCookies />
+        ) : (
+          <div className="flex flex-col gap-4">
+            {receivedCookies.map((cookie, i) => (
+              // oxlint-disable-next-line react/no-array-index-key
+              <div key={i} className="flex flex-col gap-1">
+                <div className="flex items-center gap-2 my-1">
+                  <span
+                    className={classNames(
+                      "font-mono text-editor select-auto cursor-auto",
+                      cookie.isDeleted ? "line-through opacity-60 text-text-subtle" : "text-text",
+                    )}
+                  >
+                    {cookie.name}
+                    <span className="text-text-subtlest select-auto cursor-auto mx-0.5">=</span>
+                    {cookie.value}
+                  </span>
+                  {cookie.isDeleted && (
+                    <span className="text-xs font-sans text-danger bg-danger/10 px-1.5 py-0.5 rounded-sm">
+                      Deleted
+                    </span>
+                  )}
+                </div>
+                <KeyValueRows>
+                  {[
+                    cookie.domain && (
+                      <KeyValueRow labelColor="info" label="Domain" key="domain">
+                        {cookie.domain}
+                      </KeyValueRow>
+                    ),
+                    cookie.path && (
+                      <KeyValueRow labelColor="info" label="Path" key="path">
+                        {cookie.path}
+                      </KeyValueRow>
+                    ),
+                    cookie.expires && (
+                      <KeyValueRow labelColor="info" label="Expires" key="expires">
+                        {cookie.expires}
+                      </KeyValueRow>
+                    ),
+                    cookie.maxAge && (
+                      <KeyValueRow labelColor="info" label="Max-Age" key="maxAge">
+                        {cookie.maxAge}
+                      </KeyValueRow>
+                    ),
+                    cookie.secure && (
+                      <KeyValueRow labelColor="info" label="Secure" key="secure">
+                        true
+                      </KeyValueRow>
+                    ),
+                    cookie.httpOnly && (
+                      <KeyValueRow labelColor="info" label="HttpOnly" key="httpOnly">
+                        true
+                      </KeyValueRow>
+                    ),
+                    cookie.sameSite && (
+                      <KeyValueRow labelColor="info" label="SameSite" key="sameSite">
+                        {cookie.sameSite}
+                      </KeyValueRow>
+                    ),
+                  ].filter((item): item is JSX.Element => Boolean(item))}
+                </KeyValueRows>
+              </div>
+            ))}
+          </div>
+        )}
+      </DetailsBanner>
+    </div>
+  );
+}
+
+function NoCookies() {
+  return <span className="text-text-subtlest text-sm italic">No Cookies</span>;
+}
diff --git a/apps/yaak-client/components/ResponseHeaders.tsx b/apps/yaak-client/components/ResponseHeaders.tsx
new file mode 100644
index 0000000..ea1182f
--- /dev/null
+++ b/apps/yaak-client/components/ResponseHeaders.tsx
@@ -0,0 +1,110 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { format, formatDistanceToNowStrict } from "date-fns";
+import { useMemo } from "react";
+import { CountBadge } from "./core/CountBadge";
+import { DetailsBanner } from "./core/DetailsBanner";
+import { IconButton } from "./core/IconButton";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { platform } from "@yaakapp-internal/platform";
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function ResponseHeaders({ response }: Props) {
+  const responseHeaders = useMemo(
+    () =>
+      [...response.headers].sort((a, b) =>
+        a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()),
+      ),
+    [response.headers],
+  );
+  const requestHeaders = useMemo(
+    () =>
+      [...response.requestHeaders].sort((a, b) =>
+        a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()),
+      ),
+    [response.requestHeaders],
+  );
+  return (
+    <div className="overflow-auto h-full pb-4 gap-y-3 flex flex-col pr-0.5">
+      <DetailsBanner storageKey={`${response.requestId}.general`} summary={<h2>Info</h2>}>
+        <KeyValueRows>
+          <KeyValueRow labelColor="secondary" label="Sent">
+            <time
+              dateTime={new Date(`${response.createdAt}Z`).toISOString()}
+              title={formatDistanceToNowStrict(`${response.createdAt}Z`, { addSuffix: true })}
+            >
+              {format(`${response.createdAt}Z`, "MMM d, yyyy, h:mm:ss a O")}
+            </time>
+          </KeyValueRow>
+          <KeyValueRow labelColor="secondary" label="Request URL">
+            <div className="flex items-center gap-1">
+              <span className="select-text cursor-text">{response.url}</span>
+              <IconButton
+                iconSize="sm"
+                className="inline-block w-auto h-auto! opacity-50 hover:opacity-100"
+                icon="external_link"
+                onClick={() => platform.openUrl(response.url)}
+                title="Open in browser"
+              />
+            </div>
+          </KeyValueRow>
+          <KeyValueRow labelColor="secondary" label="Remote Address">
+            {response.remoteAddr ?? <span className="text-text-subtlest">--</span>}
+          </KeyValueRow>
+          <KeyValueRow labelColor="secondary" label="Version">
+            {response.version ?? <span className="text-text-subtlest">--</span>}
+          </KeyValueRow>
+        </KeyValueRows>
+      </DetailsBanner>
+      <DetailsBanner
+        storageKey={`${response.requestId}.request_headers`}
+        summary={
+          <h2 className="flex items-center">
+            Request Headers <CountBadge showZero count={requestHeaders.length} />
+          </h2>
+        }
+      >
+        {requestHeaders.length === 0 ? (
+          <NoHeaders />
+        ) : (
+          <KeyValueRows>
+            {requestHeaders.map((h, i) => (
+              // oxlint-disable-next-line react/no-array-index-key
+              <KeyValueRow labelColor="primary" key={i} label={h.name}>
+                {h.value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </DetailsBanner>
+      <DetailsBanner
+        defaultOpen
+        storageKey={`${response.requestId}.response_headers`}
+        summary={
+          <h2 className="flex items-center">
+            Response Headers <CountBadge showZero count={responseHeaders.length} />
+          </h2>
+        }
+      >
+        {responseHeaders.length === 0 ? (
+          <NoHeaders />
+        ) : (
+          <KeyValueRows>
+            {responseHeaders.map((h, i) => (
+              // oxlint-disable-next-line react/no-array-index-key
+              <KeyValueRow labelColor="info" key={i} label={h.name}>
+                {h.value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </DetailsBanner>
+    </div>
+  );
+}
+
+function NoHeaders() {
+  return <span className="text-text-subtlest text-sm italic">No Headers</span>;
+}
diff --git a/apps/yaak-client/components/ResponseInfo.tsx b/apps/yaak-client/components/ResponseInfo.tsx
new file mode 100644
index 0000000..378895f
--- /dev/null
+++ b/apps/yaak-client/components/ResponseInfo.tsx
@@ -0,0 +1,44 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { IconButton } from "./core/IconButton";
+import { KeyValueRow, KeyValueRows } from "./core/KeyValueRow";
+import { platform } from "@yaakapp-internal/platform";
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function ResponseInfo({ response }: Props) {
+  return (
+    <div className="overflow-auto h-full pb-4">
+      <KeyValueRows>
+        <KeyValueRow labelColor="info" label="Version">
+          {response.version ?? <span className="text-text-subtlest">--</span>}
+        </KeyValueRow>
+        <KeyValueRow labelColor="info" label="Remote Address">
+          {response.remoteAddr ?? <span className="text-text-subtlest">--</span>}
+        </KeyValueRow>
+        <KeyValueRow
+          labelColor="info"
+          label={
+            <div className="flex items-center">
+              URL
+              <IconButton
+                iconSize="sm"
+                className="inline-block w-auto ml-1 h-auto! opacity-50 hover:opacity-100"
+                icon="external_link"
+                onClick={() => platform.openUrl(response.url)}
+                title="Open in browser"
+              />
+            </div>
+          }
+        >
+          {
+            <div className="flex">
+              <span className="select-text cursor-text">{response.url}</span>
+            </div>
+          }
+        </KeyValueRow>
+      </KeyValueRows>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/RouteError.tsx b/apps/yaak-client/components/RouteError.tsx
new file mode 100644
index 0000000..556c78b
--- /dev/null
+++ b/apps/yaak-client/components/RouteError.tsx
@@ -0,0 +1,43 @@
+import { Button, FormattedError, Heading, VStack } from "@yaakapp-internal/ui";
+import { DetailsBanner } from "./core/DetailsBanner";
+
+export default function RouteError({ error }: { error: unknown }) {
+  console.log("Error", error);
+  const stringified = JSON.stringify(error);
+  // oxlint-disable-next-line no-explicit-any -- none
+  const message = (error as any).message ?? stringified;
+  const stack =
+    typeof error === "object" && error != null && "stack" in error ? String(error.stack) : null;
+  return (
+    <div className="flex items-center justify-center h-full">
+      <VStack space={5} className="w-200 h-auto!">
+        <Heading>Route Error 🔥</Heading>
+        <FormattedError>
+          {message}
+          {stack && (
+            <DetailsBanner
+              color="secondary"
+              className="mt-3 select-auto text-xs max-h-[40vh]"
+              summary="Stack Trace"
+            >
+              <div className="mt-2 text-xs">{stack}</div>
+            </DetailsBanner>
+          )}
+        </FormattedError>
+        <VStack space={2}>
+          <Button
+            color="primary"
+            onClick={async () => {
+              window.location.assign("/");
+            }}
+          >
+            Go Home
+          </Button>
+          <Button color="info" onClick={() => window.location.reload()}>
+            Refresh
+          </Button>
+        </VStack>
+      </VStack>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/SelectFile.tsx b/apps/yaak-client/components/SelectFile.tsx
new file mode 100644
index 0000000..bc14872
--- /dev/null
+++ b/apps/yaak-client/components/SelectFile.tsx
@@ -0,0 +1,138 @@
+import { platform } from "@yaakapp-internal/platform";
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import mime from "mime";
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { ButtonProps } from "./core/Button";
+import { Button } from "./core/Button";
+import { IconButton } from "./core/IconButton";
+import { IconTooltip } from "./core/IconTooltip";
+import { Label } from "./core/Label";
+
+type Props = Omit<ButtonProps, "type"> & {
+  onChange: (value: { filePath: string | null; contentType: string | null }) => void;
+  filePath: string | null;
+  nameOverride?: string | null;
+  directory?: boolean;
+  inline?: boolean;
+  noun?: string;
+  help?: ReactNode;
+  hideLabel?: boolean;
+  label?: ReactNode;
+};
+
+// Special character to insert ltr text in rtl element
+const rtlEscapeChar = <>‎</>;
+
+export function SelectFile({
+  onChange,
+  filePath,
+  inline,
+  className,
+  directory,
+  noun,
+  nameOverride,
+  size = "sm",
+  label,
+  help,
+  hideLabel,
+  ...props
+}: Props) {
+  const handleClick = async () => {
+    const filePath = await platform.dialog.open({
+      title: directory ? "Select Folder" : "Select File",
+      multiple: false,
+      directory,
+    });
+    if (filePath == null) return;
+    const contentType = filePath ? mime.getType(filePath) : null;
+    onChange({ filePath, contentType });
+  };
+
+  const handleClear = async () => {
+    onChange({ filePath: null, contentType: null });
+  };
+
+  const itemLabel = noun ?? (directory ? "Folder" : "File");
+  const selectOrChange = (filePath ? "Change " : "Select ") + itemLabel;
+  const [isHovering, setIsHovering] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Listen for dropped files on the element
+  // NOTE: This doesn't work for Windows since native drag-n-drop can't work at the same tmie
+  //  as browser drag-n-drop.
+  useEffect(() => {
+    return platform.window.onDragDrop((event) => {
+      if (event.type === "over") {
+        const p = event.position;
+        const r = ref.current?.getBoundingClientRect();
+        if (r == null) return;
+        const isOver = p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom;
+        setIsHovering(isOver);
+      } else if (event.type === "drop" && isHovering) {
+        const p = event.paths[0];
+        if (p) onChange({ filePath: p, contentType: null });
+        setIsHovering(false);
+      } else {
+        setIsHovering(false);
+      }
+    });
+  }, [isHovering, onChange]);
+
+  const filePathWithNameOverride = nameOverride ? `${filePath} (${nameOverride})` : filePath;
+
+  return (
+    <div ref={ref} className="w-full">
+      {label && (
+        <Label htmlFor={null} help={help} visuallyHidden={hideLabel}>
+          {label}
+        </Label>
+      )}
+      <HStack className="relative justify-stretch overflow-hidden">
+        <Button
+          className={classNames(
+            className,
+            "rtl mr-1.5",
+            inline && "w-full",
+            filePath && inline && "font-mono text-xs",
+            isHovering && "border-notice!",
+          )}
+          color={isHovering ? "primary" : "secondary"}
+          onClick={handleClick}
+          size={size}
+          {...props}
+        >
+          {rtlEscapeChar}
+          {inline ? filePathWithNameOverride || selectOrChange : selectOrChange}
+        </Button>
+
+        {!inline && (
+          <>
+            {filePath && (
+              <IconButton
+                size={size === "auto" ? "md" : size}
+                variant="border"
+                icon="x"
+                title={`Unset ${itemLabel}`}
+                onClick={handleClear}
+              />
+            )}
+            <div
+              className={classNames(
+                "truncate rtl pl-1.5 pr-3 text-text",
+                filePath && "font-mono",
+                size === "xs" && filePath && "text-xs",
+                size === "sm" && filePath && "text-sm",
+              )}
+            >
+              {rtlEscapeChar}
+              {filePath ?? `No ${itemLabel.toLowerCase()} selected`}
+            </div>
+            {filePath == null && help && !label && <IconTooltip content={help} />}
+          </>
+        )}
+      </HStack>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/Settings/Settings.tsx b/apps/yaak-client/components/Settings/Settings.tsx
new file mode 100644
index 0000000..5588734
--- /dev/null
+++ b/apps/yaak-client/components/Settings/Settings.tsx
@@ -0,0 +1,155 @@
+import { platform } from "@yaakapp-internal/platform";
+import { useLicense } from "@yaakapp-internal/license";
+import { pluginsAtom, settingsAtom } from "@yaakapp-internal/models";
+import { HeaderSize, HStack, Icon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { useKeyPressEvent } from "react-use";
+import { appInfo } from "../../lib/appInfo";
+import { capitalize } from "../../lib/capitalize";
+import { CountBadge } from "../core/CountBadge";
+import { TabContent, type TabItem, Tabs } from "../core/Tabs/Tabs";
+import { SettingsCertificates } from "./SettingsCertificates";
+import { SettingsGeneral } from "./SettingsGeneral";
+import { SettingsHotkeys } from "./SettingsHotkeys";
+import { SettingsInterface } from "./SettingsInterface";
+import { SettingsLicense } from "./SettingsLicense";
+import { SettingsPlugins } from "./SettingsPlugins";
+import { SettingsProxy } from "./SettingsProxy";
+import { SettingsTheme } from "./SettingsTheme";
+
+interface Props {
+  tab?: SettingsTabWithSubtab | null;
+  /** Set when Settings is in a dialog rather than owning a window. */
+  hide?: () => void;
+}
+
+const TAB_GENERAL = "general";
+const TAB_INTERFACE = "interface";
+const TAB_THEME = "theme";
+const TAB_SHORTCUTS = "shortcuts";
+const TAB_PROXY = "proxy";
+const TAB_CERTIFICATES = "certificates";
+const TAB_PLUGINS = "plugins";
+const TAB_LICENSE = "license";
+const tabs = [
+  TAB_GENERAL,
+  TAB_THEME,
+  TAB_INTERFACE,
+  TAB_SHORTCUTS,
+  TAB_PLUGINS,
+  TAB_CERTIFICATES,
+  TAB_PROXY,
+  TAB_LICENSE,
+] as const;
+export type SettingsTab = (typeof tabs)[number];
+export type SettingsTabWithSubtab = SettingsTab | `${SettingsTab}:${string}`;
+
+export default function Settings({ tab, hide }: Props) {
+  // Parse tab and subtab (e.g., "plugins:installed")
+  const [mainTab, subtab] = tab?.split(":") ?? [];
+  const settings = useAtomValue(settingsAtom);
+  const plugins = useAtomValue(pluginsAtom);
+  const licenseCheck = useLicense();
+
+  // Close settings window on escape. In a dialog, the dialog handles Escape itself.
+  // TODO: Could this be put in a better place? Eg. in Rust key listener when creating the window
+  useKeyPressEvent("Escape", async () => {
+    if (hide == null) await platform.window.close();
+  });
+
+  return (
+    <div className={classNames("grid grid-rows-[auto_minmax(0,1fr)] h-full")}>
+      {hide ? (
+        <span />
+      ) : (
+        <HeaderSize
+          data-tauri-drag-region
+          ignoreControlsSpacing
+          onlyXWindowControl
+          size="md"
+          className="x-theme-appHeader bg-surface text-text-subtle flex items-center justify-center border-b border-border-subtle text-sm font-semibold"
+          osType={platform.osType()}
+          hideWindowControls={settings.hideWindowControls}
+          useNativeTitlebar={settings.useNativeTitlebar}
+          interfaceScale={settings.interfaceScale}
+        >
+          <HStack
+            space={2}
+            justifyContent="center"
+            className="w-full h-full grid grid-cols-[1fr_auto] pointer-events-none"
+          >
+            <div className={classNames(platform.osType() === "macos" ? "text-center" : "pl-2")}>Settings</div>
+          </HStack>
+        </HeaderSize>
+      )}
+      <Tabs
+        layout="horizontal"
+        defaultValue={mainTab}
+        addBorders
+        tabListClassName="min-w-40 bg-surface x-theme-sidebar border-r border-border pl-3"
+        label="Settings"
+        tabs={tabs.map(
+          (value): TabItem => ({
+            value,
+            label: capitalize(value),
+            hidden: !appInfo.featureLicense && value === TAB_LICENSE,
+            leftSlot:
+              value === TAB_GENERAL ? (
+                <Icon icon="settings" className="text-secondary" />
+              ) : value === TAB_THEME ? (
+                <Icon icon="palette" className="text-secondary" />
+              ) : value === TAB_INTERFACE ? (
+                <Icon icon="columns_2" className="text-secondary" />
+              ) : value === TAB_SHORTCUTS ? (
+                <Icon icon="keyboard" className="text-secondary" />
+              ) : value === TAB_CERTIFICATES ? (
+                <Icon icon="shield_check" className="text-secondary" />
+              ) : value === TAB_PROXY ? (
+                <Icon icon="wifi" className="text-secondary" />
+              ) : value === TAB_PLUGINS ? (
+                <Icon icon="puzzle" className="text-secondary" />
+              ) : value === TAB_LICENSE ? (
+                <Icon icon="key_round" className="text-secondary" />
+              ) : null,
+            rightSlot:
+              value === TAB_CERTIFICATES ? (
+                <CountBadge count={settings.clientCertificates.length} />
+              ) : value === TAB_PLUGINS ? (
+                <CountBadge count={plugins.filter((p) => p.source !== "bundled").length} />
+              ) : value === TAB_PROXY && settings.proxy?.type === "enabled" ? (
+                <CountBadge count />
+              ) : value === TAB_LICENSE && licenseCheck.check.data?.status === "personal_use" ? (
+                <CountBadge count color="notice" />
+              ) : null,
+          }),
+        )}
+      >
+        <TabContent value={TAB_GENERAL} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsGeneral />
+        </TabContent>
+        <TabContent value={TAB_INTERFACE} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsInterface />
+        </TabContent>
+        <TabContent value={TAB_THEME} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsTheme />
+        </TabContent>
+        <TabContent value={TAB_SHORTCUTS} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsHotkeys />
+        </TabContent>
+        <TabContent value={TAB_PLUGINS} className="h-full grid grid-rows-1">
+          <SettingsPlugins defaultSubtab={mainTab === TAB_PLUGINS ? subtab : undefined} />
+        </TabContent>
+        <TabContent value={TAB_PROXY} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsProxy />
+        </TabContent>
+        <TabContent value={TAB_CERTIFICATES} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsCertificates />
+        </TabContent>
+        <TabContent value={TAB_LICENSE} className="overflow-y-auto h-full px-6 py-4!">
+          <SettingsLicense />
+        </TabContent>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/Settings/SettingsCertificates.tsx b/apps/yaak-client/components/Settings/SettingsCertificates.tsx
new file mode 100644
index 0000000..b076918
--- /dev/null
+++ b/apps/yaak-client/components/Settings/SettingsCertificates.tsx
@@ -0,0 +1,254 @@
+import type { ClientCertificate } from "@yaakapp-internal/models";
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { Heading, HStack, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useRef } from "react";
+import { showConfirmDelete } from "../../lib/confirm";
+import { CommercialUseBanner } from "../CommercialUseBanner";
+import { Button } from "../core/Button";
+import { Checkbox } from "../core/Checkbox";
+import { DetailsBanner } from "../core/DetailsBanner";
+import { IconButton } from "../core/IconButton";
+import { PlainInput } from "../core/PlainInput";
+import { Separator } from "../core/Separator";
+import { SelectFile } from "../SelectFile";
+
+function createEmptyCertificate(): ClientCertificate {
+  return {
+    host: "",
+    port: null,
+    crtFile: null,
+    keyFile: null,
+    pfxFile: null,
+    passphrase: null,
+    enabled: true,
+  };
+}
+
+interface CertificateEditorProps {
+  certificate: ClientCertificate;
+  index: number;
+  onUpdate: (index: number, cert: ClientCertificate) => void;
+  onRemove: (index: number) => void;
+}
+
+function CertificateEditor({ certificate, index, onUpdate, onRemove }: CertificateEditorProps) {
+  const updateField = <K extends keyof ClientCertificate>(
+    field: K,
+    value: ClientCertificate[K],
+  ) => {
+    onUpdate(index, { ...certificate, [field]: value });
+  };
+
+  const hasPfx = Boolean(certificate.pfxFile && certificate.pfxFile.length > 0);
+  const hasCrtKey = Boolean(
+    (certificate.crtFile && certificate.crtFile.length > 0) ||
+    (certificate.keyFile && certificate.keyFile.length > 0),
+  );
+
+  // Determine certificate type for display
+  const certType = hasPfx ? "PFX" : hasCrtKey ? "CERT" : null;
+  const defaultOpen = useRef<boolean>(!certificate.host);
+
+  return (
+    <DetailsBanner
+      defaultOpen={defaultOpen.current}
+      summary={
+        <HStack alignItems="center" justifyContent="between" space={2} className="w-full">
+          <HStack space={1.5}>
+            <Checkbox
+              className="ml-1"
+              checked={certificate.enabled ?? true}
+              title={certificate.enabled ? "Disable certificate" : "Enable certificate"}
+              hideLabel
+              onChange={(enabled) => updateField("enabled", enabled)}
+            />
+
+            {certificate.host ? (
+              <InlineCode>
+                {certificate.host || <> </>}
+                {certificate.port != null && `:${certificate.port}`}
+              </InlineCode>
+            ) : (
+              <span className="italic text-sm text-text-subtlest">Configure Certificate</span>
+            )}
+            {certType && <InlineCode>{certType}</InlineCode>}
+          </HStack>
+          <IconButton
+            icon="trash"
+            size="sm"
+            title="Remove certificate"
+            className="text-text-subtlest -mr-2"
+            onClick={() => onRemove(index)}
+          />
+        </HStack>
+      }
+    >
+      <VStack space={3} className="mt-2">
+        <HStack space={2} alignItems="end">
+          <PlainInput
+            leftSlot={
+              <div className="bg-surface-highlight flex items-center text-editor font-mono px-2 text-text-subtle mr-1">
+                https://
+              </div>
+            }
+            validate={(value) => {
+              if (!value) return false;
+              if (!/^[a-zA-Z0-9_.-]+$/.test(value)) return false;
+              return true;
+            }}
+            label="Host"
+            placeholder="example.com"
+            size="sm"
+            required
+            defaultValue={certificate.host}
+            onChange={(host) => updateField("host", host)}
+          />
+          <PlainInput
+            label="Port"
+            hideLabel
+            validate={(value) => {
+              if (!value) return true;
+              if (Number.isNaN(parseInt(value, 10))) return false;
+              return true;
+            }}
+            placeholder="443"
+            leftSlot={
+              <div className="bg-surface-highlight flex items-center text-editor font-mono px-2 text-text-subtle mr-1">
+                :
+              </div>
+            }
+            size="sm"
+            className="w-24"
+            defaultValue={certificate.port?.toString() ?? ""}
+            onChange={(port) => updateField("port", port ? parseInt(port, 10) : null)}
+          />
+        </HStack>
+
+        <Separator className="my-3" />
+
+        <VStack space={2}>
+          <SelectFile
+            label="CRT File"
+            noun="Cert"
+            filePath={certificate.crtFile ?? null}
+            size="sm"
+            disabled={hasPfx}
+            onChange={({ filePath }) => updateField("crtFile", filePath)}
+          />
+          <SelectFile
+            label="KEY File"
+            noun="Key"
+            filePath={certificate.keyFile ?? null}
+            size="sm"
+            disabled={hasPfx}
+            onChange={({ filePath }) => updateField("keyFile", filePath)}
+          />
+        </VStack>
+
+        <Separator className="my-3" />
+
+        <SelectFile
+          label="PFX File"
+          noun="Key"
+          filePath={certificate.pfxFile ?? null}
+          size="sm"
+          disabled={hasCrtKey}
+          onChange={({ filePath }) => updateField("pfxFile", filePath)}
+        />
+
+        <PlainInput
+          label="Passphrase"
+          size="sm"
+          type="password"
+          defaultValue={certificate.passphrase ?? ""}
+          onChange={(passphrase) => updateField("passphrase", passphrase || null)}
+        />
+      </VStack>
+    </DetailsBanner>
+  );
+}
+
+export function SettingsCertificates() {
+  const settings = useAtomValue(settingsAtom);
+  const certificates = settings.clientCertificates ?? [];
+
+  const updateCertificates = async (newCertificates: ClientCertificate[]) => {
+    await patchModel(settings, { clientCertificates: newCertificates });
+  };
+
+  const handleAdd = async () => {
+    const newCert = createEmptyCertificate();
+    await updateCertificates([...certificates, newCert]);
+  };
+
+  const handleUpdate = async (index: number, cert: ClientCertificate) => {
+    const newCertificates = [...certificates];
+    newCertificates[index] = cert;
+    await updateCertificates(newCertificates);
+  };
+
+  const handleRemove = async (index: number) => {
+    const cert = certificates[index];
+    if (cert == null) return;
+
+    const host = cert.host || "this certificate";
+    const port = cert.port != null ? `:${cert.port}` : "";
+
+    const confirmed = await showConfirmDelete({
+      id: "confirm-remove-certificate",
+      title: "Delete Certificate",
+      description: (
+        <>
+          Permanently delete certificate for{" "}
+          <InlineCode>
+            {host}
+            {port}
+          </InlineCode>
+          ?
+        </>
+      ),
+    });
+
+    if (!confirmed) return;
+
+    const newCertificates = certificates.filter((_, i) => i !== index);
+
+    await updateCertificates(newCertificates);
+  };
+
+  return (
+    <VStack space={3}>
+      <div className="mb-3">
+        <HStack justifyContent="between" alignItems="start">
+          <div>
+            <Heading>Client Certificates</Heading>
+            <p className="text-text-subtle">
+              Add and manage TLS certificates on a per domain basis
+            </p>
+          </div>
+          <Button variant="border" size="sm" color="secondary" onClick={handleAdd}>
+            Add Certificate
+          </Button>
+        </HStack>
+      </div>
+
+      <CommercialUseBanner source="client-certificates" title="Using certificates for work?" />
+
+      {certificates.length > 0 && (
+        <VStack space={3}>
+          {certificates.map((cert, index) => (
+            <CertificateEditor
+              // oxlint-disable-next-line react/no-array-index-key
+              key={index}
+              certificate={cert}
+              index={index}
+              onUpdate={handleUpdate}
+              onRemove={handleRemove}
+            />
+          ))}
+        </VStack>
+      )}
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/Settings/SettingsGeneral.tsx b/apps/yaak-client/components/Settings/SettingsGeneral.tsx
new file mode 100644
index 0000000..d36758f
--- /dev/null
+++ b/apps/yaak-client/components/Settings/SettingsGeneral.tsx
@@ -0,0 +1,180 @@
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { Heading, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useCheckForUpdates } from "../../hooks/useCheckForUpdates";
+import { appInfo } from "../../lib/appInfo";
+import { revealInFinderText } from "../../lib/reveal";
+import { CargoFeature } from "../CargoFeature";
+import { CommercialUseBanner } from "../CommercialUseBanner";
+import { DismissibleBanner } from "../core/DismissibleBanner";
+import { IconButton } from "../core/IconButton";
+import { platform } from "@yaakapp-internal/platform";
+import {
+  ModelSettingRowBoolean,
+  ModelSettingSelectControl,
+  SettingValue,
+  SettingRow,
+  SettingRowBoolean,
+  SettingRowSelect,
+  SettingsList,
+  SettingsSection,
+} from "../core/SettingRow";
+
+const WORKSPACE_SETTINGS_MOVED_AT = "2026-06-30";
+
+export function SettingsGeneral() {
+  const settings = useAtomValue(settingsAtom);
+  const checkForUpdates = useCheckForUpdates();
+
+  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>
+        <Heading>General</Heading>
+        <p className="text-text-subtle">
+          Configure general settings for update behavior and more.
+        </p>
+      </div>
+      <div className="mt-3 mb-5">
+        <CommercialUseBanner source="settings-general" title="Using Yaak for work?" />
+      </div>
+      <SettingsList className="space-y-8">
+        <CargoFeature feature="updater">
+          <SettingsSection title="Updates">
+            <SettingRow
+              title="Update Channel"
+              description="Choose whether Yaak should use stable releases or beta releases."
+            >
+              <div className="grid grid-cols-[12rem_auto] gap-1">
+                <ModelSettingSelectControl
+                  model={settings}
+                  modelKey="updateChannel"
+                  label="Update Channel"
+                  selectClassName="w-full!"
+                  options={[
+                    { label: "Stable", value: "stable" },
+                    { label: "Beta", value: "beta" },
+                  ]}
+                />
+                <IconButton
+                  variant="border"
+                  size="sm"
+                  title="Check for updates"
+                  icon="refresh"
+                  spin={checkForUpdates.isPending}
+                  onClick={() => checkForUpdates.mutateAsync()}
+                />
+              </div>
+            </SettingRow>
+
+            <SettingRowSelect
+              title="Update Behavior"
+              description="Choose whether updates are installed automatically or manually."
+              name="autoupdate"
+              value={settings.autoupdate ? "auto" : "manual"}
+              onChange={(v) =>
+                patchModel(settings, { autoupdate: v === "auto" })
+              }
+              options={[
+                { label: "Automatic", value: "auto" },
+                { label: "Manual", value: "manual" },
+              ]}
+            />
+
+            <ModelSettingRowBoolean
+              model={settings}
+              modelKey="autoDownloadUpdates"
+              title="Automatically download updates"
+              description="Download Yaak updates in the background so they are ready to install."
+              disabled={!settings.autoupdate}
+            />
+
+            <ModelSettingRowBoolean
+              model={settings}
+              modelKey="checkNotifications"
+              title="Check for notifications"
+              description="Periodically ping Yaak servers to check for relevant notifications."
+            />
+
+            <SettingRowBoolean
+              title="Send anonymous usage statistics"
+              description="Yaak is local-first and does not collect analytics or usage data."
+              disabled
+              checked={false}
+              onChange={() => {}}
+            />
+          </SettingsSection>
+        </CargoFeature>
+
+        <CargoFeature feature="license">
+          <SettingsSection title="Feedback">
+            <SettingRowBoolean
+              title="Prompt for feedback"
+              description="Show rare one-time prompts asking how new features are working."
+              checked={settings.promptFeedback}
+              onChange={(promptFeedback) => patchModel(settings, { promptFeedback })}
+            />
+          </SettingsSection>
+        </CargoFeature>
+
+        {showWorkspaceSettingsMovedBanner && (
+          <DismissibleBanner
+            id="workspace-settings-moved-2026-06-30"
+            color="info"
+            className="w-full p-4 max-w-xl mr-auto"
+          >
+            <p>
+              Workspace specific settings have moved to{" "}
+              <b>Workspace Settings</b>, accessible from the workspace switcher
+              menu.
+            </p>
+          </DismissibleBanner>
+        )}
+
+        <SettingsSection title="App Info">
+          <SettingRow title="Version" description="Current Yaak version.">
+            <SettingValue value={appInfo.version} />
+          </SettingRow>
+          <SettingRow
+            title="Data Directory"
+            description="Where Yaak stores application data."
+            controlClassName="min-w-0 max-w-[min(42rem,55vw)] gap-2"
+          >
+            <SettingValue
+              value={appInfo.appDataDir}
+              actions={[
+                {
+                  title: revealInFinderText,
+                  icon: "folder_open",
+                  onClick: () => platform.revealItemInDir(appInfo.appDataDir),
+                },
+              ]}
+            />
+          </SettingRow>
+          <SettingRow
+            title="Logs Directory"
+            description="Where Yaak writes application logs."
+            controlClassName="min-w-0 max-w-[min(42rem,55vw)] gap-2"
+          >
+            <SettingValue
+              value={appInfo.appLogDir}
+              actions={[
+                {
+                  title: revealInFinderText,
+                  icon: "folder_open",
+                  onClick: () => platform.revealItemInDir(appInfo.appLogDir),
+                },
+              ]}
+            />
+          </SettingRow>
+        </SettingsSection>
+      </SettingsList>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/Settings/SettingsHotkeys.tsx b/apps/yaak-client/components/Settings/SettingsHotkeys.tsx
new file mode 100644
index 0000000..14709ec
--- /dev/null
+++ b/apps/yaak-client/components/Settings/SettingsHotkeys.tsx
@@ -0,0 +1,365 @@
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import {
+  Heading,
+  HStack,
+  Icon,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  VStack,
+} from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { fuzzyMatch } from "fuzzbunny";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  defaultHotkeys,
+  formatHotkeyString,
+  getHotkeyScope,
+  type HotkeyAction,
+  hotkeyActions,
+  hotkeysAtom,
+  useHotkeyLabel,
+} from "../../hooks/useHotKey";
+import { capitalize } from "../../lib/capitalize";
+import { showDialog } from "../../lib/dialog";
+import { Button } from "../core/Button";
+import { Dropdown, type DropdownItem } from "../core/Dropdown";
+import { HotkeyRaw } from "../core/Hotkey";
+import { IconButton } from "../core/IconButton";
+import { PlainInput } from "../core/PlainInput";
+
+const HOLD_KEYS = ["Shift", "Control", "Alt", "Meta"];
+const LAYOUT_INSENSITIVE_KEYS = [
+  "Equal",
+  "Minus",
+  "BracketLeft",
+  "BracketRight",
+  "Backquote",
+  "Space",
+];
+
+/** Convert a KeyboardEvent to a hotkey string like "Meta+Shift+k" or "Control+Shift+k" */
+function eventToHotkeyString(e: KeyboardEvent): string | null {
+  // Don't capture modifier-only key presses
+  if (HOLD_KEYS.includes(e.key)) {
+    return null;
+  }
+
+  const parts: string[] = [];
+
+  // Add modifiers in consistent order (Meta, Control, Alt, Shift)
+  if (e.metaKey) {
+    parts.push("Meta");
+  }
+  if (e.ctrlKey) {
+    parts.push("Control");
+  }
+  if (e.altKey) {
+    parts.push("Alt");
+  }
+  if (e.shiftKey) {
+    parts.push("Shift");
+  }
+
+  // Get the main key - use the same logic as useHotKey.ts
+  const key = LAYOUT_INSENSITIVE_KEYS.includes(e.code) ? e.code : e.key;
+  parts.push(key);
+
+  return parts.join("+");
+}
+
+export function SettingsHotkeys() {
+  const settings = useAtomValue(settingsAtom);
+  const hotkeys = useAtomValue(hotkeysAtom);
+  const [filter, setFilter] = useState("");
+
+  const filteredActions = useMemo(() => {
+    if (!filter.trim()) {
+      return hotkeyActions;
+    }
+    return hotkeyActions.filter((action) => {
+      const scope = getHotkeyScope(action).replace(/_/g, " ");
+      const label = action.replace(/[_.]/g, " ");
+      const searchText = `${scope} ${label}`;
+      return fuzzyMatch(searchText, filter) != null;
+    });
+  }, [filter]);
+
+  if (settings == null) {
+    return null;
+  }
+
+  return (
+    <VStack space={3} className="mb-4">
+      <div className="mb-3">
+        <Heading>Keyboard Shortcuts</Heading>
+        <p className="text-text-subtle">
+          Click the menu button to add, remove, or reset keyboard shortcuts.
+        </p>
+      </div>
+      <PlainInput
+        label="Filter"
+        placeholder="Filter shortcuts..."
+        defaultValue={filter}
+        onChange={setFilter}
+        hideLabel
+        containerClassName="max-w-xs"
+      />
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell>Scope</TableHeaderCell>
+            <TableHeaderCell>Action</TableHeaderCell>
+            <TableHeaderCell>Shortcut</TableHeaderCell>
+            <TableHeaderCell></TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        {/* key={filter} forces re-render on filter change to fix Safari table rendering bug */}
+        <TableBody key={filter}>
+          {filteredActions.map((action) => (
+            <HotkeyRow
+              key={action}
+              action={action}
+              currentKeys={hotkeys[action] ?? []}
+              defaultKeys={defaultHotkeys[action]}
+              onSave={async (keys) => {
+                const newHotkeys = { ...settings.hotkeys };
+                if (arraysEqual(keys, defaultHotkeys[action])) {
+                  // Remove from settings if it matches default (use default)
+                  delete newHotkeys[action];
+                } else {
+                  // Store the keys (including empty array to disable)
+                  newHotkeys[action] = keys;
+                }
+                await patchModel(settings, { hotkeys: newHotkeys });
+              }}
+              onReset={async () => {
+                const newHotkeys = { ...settings.hotkeys };
+                delete newHotkeys[action];
+                await patchModel(settings, { hotkeys: newHotkeys });
+              }}
+            />
+          ))}
+        </TableBody>
+      </Table>
+    </VStack>
+  );
+}
+
+interface HotkeyRowProps {
+  action: HotkeyAction;
+  currentKeys: string[];
+  defaultKeys: string[];
+  onSave: (keys: string[]) => Promise<void>;
+  onReset: () => Promise<void>;
+}
+
+function HotkeyRow({ action, currentKeys, defaultKeys, onSave, onReset }: HotkeyRowProps) {
+  const label = useHotkeyLabel(action);
+  const scope = capitalize(getHotkeyScope(action).replace(/_/g, " "));
+  const isCustomized = !arraysEqual(currentKeys, defaultKeys);
+  const isDisabled = currentKeys.length === 0;
+
+  const handleStartRecording = useCallback(() => {
+    showDialog({
+      id: `record-hotkey-${action}`,
+      title: label,
+      size: "sm",
+      render: ({ hide }) => (
+        <RecordHotkeyDialog
+          label={label}
+          onSave={async (key) => {
+            await onSave([...currentKeys, key]);
+            hide();
+          }}
+          onCancel={hide}
+        />
+      ),
+    });
+  }, [action, label, currentKeys, onSave]);
+
+  const handleRemove = useCallback(
+    async (keyToRemove: string) => {
+      const newKeys = currentKeys.filter((k) => k !== keyToRemove);
+      await onSave(newKeys);
+    },
+    [currentKeys, onSave],
+  );
+
+  const handleClearAll = useCallback(async () => {
+    await onSave([]);
+  }, [onSave]);
+
+  // Build dropdown items dynamically
+  const dropdownItems: DropdownItem[] = [
+    {
+      label: "Add Keyboard Shortcut",
+      leftSlot: <Icon icon="plus" />,
+      onSelect: handleStartRecording,
+    },
+  ];
+
+  // Add remove options for each existing shortcut
+  if (!isDisabled) {
+    currentKeys.forEach((key) => {
+      dropdownItems.push({
+        label: (
+          <HStack space={1.5}>
+            <span>Remove</span>
+            <HotkeyRaw labelParts={formatHotkeyString(key)} variant="with-bg" className="text-xs" />
+          </HStack>
+        ),
+        leftSlot: <Icon icon="trash" />,
+        onSelect: () => handleRemove(key),
+      });
+    });
+
+    if (currentKeys.length > 1) {
+      dropdownItems.push(
+        {
+          type: "separator",
+        },
+        {
+          label: "Remove All Shortcuts",
+          leftSlot: <Icon icon="trash" />,
+          onSelect: handleClearAll,
+        },
+      );
+    }
+  }
+
+  if (isCustomized) {
+    dropdownItems.push({
+      type: "separator",
+    });
+    dropdownItems.push({
+      label: "Reset to Default",
+      leftSlot: <Icon icon="refresh" />,
+      onSelect: onReset,
+    });
+  }
+
+  return (
+    <TableRow>
+      <TableCell>
+        <span className="text-sm text-text-subtlest">{scope}</span>
+      </TableCell>
+      <TableCell>
+        <span className="text-sm">{label}</span>
+      </TableCell>
+      <TableCell>
+        <HStack space={1.5} className="py-1">
+          {isDisabled ? (
+            <span className="text-text-subtlest">Disabled</span>
+          ) : (
+            currentKeys.map((k) => (
+              <HotkeyRaw key={k} labelParts={formatHotkeyString(k)} variant="with-bg" />
+            ))
+          )}
+        </HStack>
+      </TableCell>
+      <TableCell align="right">
+        <Dropdown items={dropdownItems}>
+          <IconButton
+            icon="ellipsis_vertical"
+            size="sm"
+            title="Hotkey actions"
+            className="ml-auto text-text-subtlest"
+          />
+        </Dropdown>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function arraysEqual(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false;
+  const sortedA = [...a].sort();
+  const sortedB = [...b].sort();
+  return sortedA.every((v, i) => v === sortedB[i]);
+}
+
+interface RecordHotkeyDialogProps {
+  label: string;
+  onSave: (key: string) => void;
+  onCancel: () => void;
+}
+
+function RecordHotkeyDialog({ label, onSave, onCancel }: RecordHotkeyDialogProps) {
+  const [recordedKey, setRecordedKey] = useState<string | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    if (!isFocused) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (e.key === "Escape") {
+        onCancel();
+        return;
+      }
+
+      const hotkeyString = eventToHotkeyString(e);
+      if (hotkeyString) {
+        setRecordedKey(hotkeyString);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+    };
+  }, [isFocused, onCancel]);
+
+  const handleSave = useCallback(() => {
+    if (recordedKey) {
+      onSave(recordedKey);
+    }
+  }, [recordedKey, onSave]);
+
+  return (
+    <VStack space={4}>
+      <div>
+        <p className="text-text-subtle mb-2">
+          Record a key combination for <span className="font-semibold">{label}</span>
+        </p>
+        <button
+          type="button"
+          data-disable-hotkey
+          aria-label="Keyboard shortcut input"
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          onClick={(e) => {
+            e.preventDefault();
+            e.currentTarget.focus();
+          }}
+          className={classNames(
+            "flex items-center justify-center",
+            "px-4 py-2 rounded-lg bg-surface-highlight border outline-hidden cursor-default w-full",
+            "border-border-subtle focus:border-border-focus",
+          )}
+        >
+          {recordedKey ? (
+            <HotkeyRaw labelParts={formatHotkeyString(recordedKey)} />
+          ) : (
+            <span className="text-text-subtlest">Press keys...</span>
+          )}
+        </button>
+      </div>
+      <HStack space={2} justifyContent="end">
+        <Button color="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button color="primary" onClick={handleSave} disabled={!recordedKey}>
+          Save
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/Settings/SettingsInterface.tsx b/apps/yaak-client/components/Settings/SettingsInterface.tsx
new file mode 100644
index 0000000..baffa27
--- /dev/null
+++ b/apps/yaak-client/components/Settings/SettingsInterface.tsx
@@ -0,0 +1,274 @@
+import { platform } from "@yaakapp-internal/platform";
+import { useFonts } from "@yaakapp-internal/fonts";
+import { useLicense } from "@yaakapp-internal/license";
+import type { EditorKeymap, Settings } from "@yaakapp-internal/models";
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { clamp, Heading, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { activeWorkspaceAtom } from "../../hooks/useActiveWorkspace";
+import { showConfirm } from "../../lib/confirm";
+import { pricingUrl } from "../../lib/pricingUrl";
+import { rpc } from "../../lib/rpc";
+import { CargoFeature } from "../CargoFeature";
+import { Button } from "../core/Button";
+import { Checkbox } from "../core/Checkbox";
+import { Link } from "../core/Link";
+import {
+  ModelSettingRowBoolean,
+  ModelSettingRowSelect,
+  SettingRow,
+  SettingRowBoolean,
+  SettingRowSelect,
+  SettingSelectControl,
+  SettingsList,
+  SettingsSection,
+} from "../core/SettingRow";
+
+const NULL_FONT_VALUE = "__NULL_FONT__";
+
+const fontSizeOptions = [
+  8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
+].map((n) => ({ label: `${n}`, value: `${n}` }));
+
+const keymaps: { value: EditorKeymap; label: string }[] = [
+  { value: "default", label: "Default" },
+  { value: "vim", label: "Vim" },
+  { value: "vscode", label: "VSCode" },
+  { value: "emacs", label: "Emacs" },
+];
+
+export function SettingsInterface() {
+  const workspace = useAtomValue(activeWorkspaceAtom);
+  const settings = useAtomValue(settingsAtom);
+  const fonts = useFonts();
+
+  if (settings == null || workspace == null) {
+    return null;
+  }
+
+  return (
+    <VStack space={1.5} className="mb-4">
+      <div className="mb-3">
+        <Heading>Interface</Heading>
+        <p className="text-text-subtle">Tweak settings related to the user interface.</p>
+      </div>
+      <SettingsList className="space-y-8">
+        <SettingsSection title="Workspaces">
+          <SettingRowSelect
+            title="Open workspace behavior"
+            description="Choose what happens when opening another workspace."
+            name="switchWorkspaceBehavior"
+            value={
+              settings.openWorkspaceNewWindow === true
+                ? "new"
+                : settings.openWorkspaceNewWindow === false
+                  ? "current"
+                  : "ask"
+            }
+            onChange={async (v) => {
+              if (v === "current") await patchModel(settings, { openWorkspaceNewWindow: false });
+              else if (v === "new") await patchModel(settings, { openWorkspaceNewWindow: true });
+              else await patchModel(settings, { openWorkspaceNewWindow: null });
+            }}
+            options={[
+              { label: "Always ask", value: "ask" },
+              { label: "Open in current window", value: "current" },
+              { label: "Open in new window", value: "new" },
+            ]}
+          />
+        </SettingsSection>
+
+        <SettingsSection title="Fonts">
+          <SettingRow
+            title="Interface font"
+            description="Font used for Yaak interface controls."
+            controlClassName="gap-1"
+          >
+            {fonts.data && (
+              <SettingSelectControl
+                name="uiFont"
+                label="Interface font"
+                selectClassName="w-72!"
+                value={settings.interfaceFont ?? NULL_FONT_VALUE}
+                defaultValue={NULL_FONT_VALUE}
+                options={[
+                  { label: "System default", value: NULL_FONT_VALUE },
+                  ...fonts.data.uiFonts.map((f) => ({ label: f, value: f })),
+                  ...fonts.data.editorFonts.map((f) => ({ label: f, value: f })),
+                ]}
+                onChange={async (v) => {
+                  const interfaceFont = v === NULL_FONT_VALUE ? null : v;
+                  await patchModel(settings, { interfaceFont });
+                }}
+              />
+            )}
+            <SettingSelectControl
+              name="interfaceFontSize"
+              label="Interface Font Size"
+              selectClassName="w-20!"
+              value={`${settings.interfaceFontSize}`}
+              defaultValue="14"
+              options={fontSizeOptions}
+              onChange={(v) => patchModel(settings, { interfaceFontSize: Number.parseInt(v, 10) })}
+            />
+          </SettingRow>
+
+          <SettingRow
+            title="Editor font"
+            description="Font used in request and response editors."
+            controlClassName="gap-1"
+          >
+            {fonts.data && (
+              <SettingSelectControl
+                name="editorFont"
+                label="Editor font"
+                selectClassName="w-72!"
+                value={settings.editorFont ?? NULL_FONT_VALUE}
+                defaultValue={NULL_FONT_VALUE}
+                options={[
+                  { label: "System default", value: NULL_FONT_VALUE },
+                  ...fonts.data.editorFonts.map((f) => ({ label: f, value: f })),
+                ]}
+                onChange={async (v) => {
+                  const editorFont = v === NULL_FONT_VALUE ? null : v;
+                  await patchModel(settings, { editorFont });
+                }}
+              />
+            )}
+            <SettingSelectControl
+              name="editorFontSize"
+              label="Editor Font Size"
+              selectClassName="w-20!"
+              value={`${settings.editorFontSize}`}
+              defaultValue="12"
+              options={fontSizeOptions}
+              onChange={(v) =>
+                patchModel(settings, {
+                  editorFontSize: clamp(Number.parseInt(v, 10) || 14, 8, 30),
+                })
+              }
+            />
+          </SettingRow>
+        </SettingsSection>
+
+        <SettingsSection title="Editor">
+          <ModelSettingRowSelect
+            model={settings}
+            modelKey="editorKeymap"
+            title="Editor keymap"
+            description="Keyboard shortcut preset used by text editors."
+            options={keymaps}
+          />
+          <ModelSettingRowBoolean
+            model={settings}
+            modelKey="editorSoftWrap"
+            title="Wrap editor lines"
+            description="Wrap long lines in request and response editors."
+          />
+          <ModelSettingRowBoolean
+            model={settings}
+            modelKey="coloredMethods"
+            title="Colorize request methods"
+            description="Use method-specific colors for HTTP request methods."
+          />
+        </SettingsSection>
+
+        <SettingsSection title="Window">
+          <NativeTitlebarSetting settings={settings} />
+          {platform.osType() !== "macos" && (
+            <ModelSettingRowBoolean
+              model={settings}
+              modelKey="hideWindowControls"
+              title="Hide window controls"
+              description="Hide the close, maximize, and minimize controls on Windows or Linux."
+            />
+          )}
+        </SettingsSection>
+
+        <CargoFeature feature="license">
+          <LicenseSettings settings={settings} />
+        </CargoFeature>
+      </SettingsList>
+    </VStack>
+  );
+}
+
+function NativeTitlebarSetting({ settings }: { settings: Settings }) {
+  const [nativeTitlebar, setNativeTitlebar] = useState(settings.useNativeTitlebar);
+
+  return (
+    <SettingRow
+      title="Native title bar"
+      description="Use the operating system's standard title bar and window controls."
+      controlClassName="gap-2"
+    >
+      <Checkbox
+        hideLabel
+        size="md"
+        checked={nativeTitlebar}
+        title="Native title bar"
+        onChange={setNativeTitlebar}
+      />
+      {settings.useNativeTitlebar !== nativeTitlebar && (
+        <Button
+          color="primary"
+          size="xs"
+          onClick={async () => {
+            await patchModel(settings, { useNativeTitlebar: nativeTitlebar });
+            await rpc("cmd_restart");
+          }}
+        >
+          Apply and Restart
+        </Button>
+      )}
+    </SettingRow>
+  );
+}
+
+function LicenseSettings({ settings }: { settings: Settings }) {
+  const license = useLicense();
+  if (license.check.data?.status !== "personal_use") {
+    return null;
+  }
+
+  return (
+    <SettingsSection title="License">
+      <SettingRowBoolean
+        checked={settings.hideLicenseBadge}
+        title="Hide personal use badge"
+        description="Hide the personal-use badge from the interface."
+        onChange={async (hideLicenseBadge) => {
+          if (hideLicenseBadge) {
+            const confirmed = await showConfirm({
+              id: "hide-license-badge",
+              title: "Confirm Personal Use",
+              confirmText: "Confirm",
+              description: (
+                <VStack space={3}>
+                  <p>Hey there 👋🏼</p>
+                  <p>
+                    Yaak is free for personal projects and learning.{" "}
+                    <strong>If you’re using Yaak at work, a license is required.</strong>
+                  </p>
+                  <p>
+                    Licenses help keep Yaak independent and sustainable.{" "}
+                    <Link href={pricingUrl("app.license.badge-hide-confirm")}>
+                      Purchase a License →
+                    </Link>
+                  </p>
+                </VStack>
+              ),
+              requireTyping: "Personal Use",
+              color: "info",
+            });
+            if (!confirmed) {
+              return;
+            }
+          }
+          await patchModel(settings, { hideLicenseBadge });
+        }}
+      />
+    </SettingsSection>
+  );
+}
diff --git a/apps/yaak-client/components/Settings/SettingsLicense.tsx b/apps/yaak-client/components/Settings/SettingsLicense.tsx
new file mode 100644
index 0000000..f2ac001
--- /dev/null
+++ b/apps/yaak-client/components/Settings/SettingsLicense.tsx
@@ -0,0 +1,187 @@
+import { useLicense } from "@yaakapp-internal/license";
+import { Banner, HStack, Icon, VStack } from "@yaakapp-internal/ui";
+import { differenceInDays } from "date-fns";
+import { formatDate } from "date-fns/format";
+import { useState } from "react";
+import { useToggle } from "../../hooks/useToggle";
+import { pluralizeCount } from "../../lib/pluralize";
+import { pricingUrl } from "../../lib/pricingUrl";
+import { CargoFeature } from "../CargoFeature";
+import { Button } from "../core/Button";
+import { Link } from "../core/Link";
+import { PlainInput } from "../core/PlainInput";
+import { Separator } from "../core/Separator";
+import { platform } from "@yaakapp-internal/platform";
+
+export function SettingsLicense() {
+  return (
+    <CargoFeature feature="license">
+      <SettingsLicenseCmp />
+    </CargoFeature>
+  );
+}
+
+function SettingsLicenseCmp() {
+  const { check, activate, deactivate } = useLicense();
+  const [key, setKey] = useState<string>("");
+  const [activateFormVisible, toggleActivateFormVisible] = useToggle(false);
+
+  if (check.isPending) {
+    return null;
+  }
+
+  const renderBanner = () => {
+    if (!check.data) return null;
+
+    switch (check.data.status) {
+      case "active":
+        return <Banner color="success">Your license is active 🥳</Banner>;
+
+      case "trialing":
+        return (
+          <Banner color="info" className="max-w-lg">
+            <p className="w-full">
+              <strong>
+                {pluralizeCount("day", differenceInDays(check.data.data.end, new Date()))}
+              </strong>{" "}
+              left to evaluate Yaak for commercial use.
+              <br />
+              <span className="opacity-50">Personal use is always free, forever.</span>
+              <Separator className="my-2" />
+              <div className="flex flex-wrap items-center gap-x-2 text-sm text-notice">
+                <Link noUnderline href={pricingUrl(`app.license.learn.${check.data.status}`)}>
+                  Learn More
+                </Link>
+              </div>
+            </p>
+          </Banner>
+        );
+
+      case "personal_use":
+        return (
+          <Banner color="notice" className="max-w-lg">
+            <p className="w-full">
+              Your commercial-use trial has ended.
+              <br />
+              <span className="opacity-50">
+                You may continue using Yaak for personal use only.
+                <br />A license is required for commercial use.
+              </span>
+              <Separator className="my-2" />
+              <div className="flex flex-wrap items-center gap-x-2 text-sm text-notice">
+                <Link noUnderline href={pricingUrl(`app.license.learn.${check.data.status}`)}>
+                  Learn More
+                </Link>
+              </div>
+            </p>
+          </Banner>
+        );
+
+      case "inactive":
+        return (
+          <Banner color="danger">
+            Your license is invalid. Please <Link href="https://yaak.app/dashboard">Sign In</Link>{" "}
+            for more details
+          </Banner>
+        );
+
+      case "expired":
+        return (
+          <Banner color="notice">
+            Your license expired{" "}
+            <strong>{formatDate(check.data.data.periodEnd, "MMMM dd, yyyy")}</strong>. Please{" "}
+            <Link href="https://yaak.app/dashboard">Resubscribe</Link> to continue receiving
+            updates.
+            {check.data.data.changesUrl && (
+              <>
+                <br />
+                <Link href={check.data.data.changesUrl}>What's new in latest builds</Link>
+              </>
+            )}
+          </Banner>
+        );
+
+      case "past_due":
+        return (
+          <Banner color="danger">
+            <strong>Your payment method needs attention.</strong>
+            <br />
+            To re-activate your license, please{" "}
+            <Link href={check.data.data.billingUrl}>update your billing info</Link>.
+          </Banner>
+        );
+
+      case "error":
+        return (
+          <Banner color="danger">
+            License check failed: {check.data.data.message} (Code: {check.data.data.code})
+          </Banner>
+        );
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6 max-w-xl">
+      {renderBanner()}
+
+      {check.error && <Banner color="danger">{check.error}</Banner>}
+      {activate.error && <Banner color="danger">{activate.error}</Banner>}
+
+      {check.data?.status === "active" ? (
+        <HStack space={2}>
+          <Button variant="border" color="secondary" size="sm" onClick={() => deactivate.mutate()}>
+            Deactivate License
+          </Button>
+          <Button
+            color="secondary"
+            size="sm"
+            onClick={() => platform.openUrl("https://yaak.app/dashboard?intent=app.license.support")}
+            rightSlot={<Icon icon="external_link" />}
+          >
+            Direct Support
+          </Button>
+        </HStack>
+      ) : (
+        <HStack space={2}>
+          <Button variant="border" color="secondary" size="sm" onClick={toggleActivateFormVisible}>
+            Activate License
+          </Button>
+          <Button
+            size="sm"
+            color="primary"
+            rightSlot={<Icon icon="external_link" />}
+            onClick={() =>
+              platform.openUrl(pricingUrl(`app.license.purchase.${check.data?.status ?? "unknown"}`))
+            }
+          >
+            Purchase License
+          </Button>
+        </HStack>
+      )}
+
+      {activateFormVisible && (
+        <VStack
+          as="form"
+          space={3}
+          className="max-w-sm"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            await activate.mutateAsync({ licenseKey: key });
+            toggleActivateFormVisible();
+          }}
+        >
+          <PlainInput
+            autoFocus
+            label="License Key"
+            name="key"
+            onChange={setKey}
+            placeholder="YK1-XXXXX-XXXXX-XXXXX-XXXXX"
+          />
+          <Button type="submit" color="primary" size="sm" isLoading={activate.isPending}>
+            Submit
+          </Button>
+        </VStack>
+      )}
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/Settings/SettingsPlugins.tsx b/apps/yaak-client/components/Settings/SettingsPlugins.tsx
new file mode 100644
index 0000000..e83cdc3
--- /dev/null
+++ b/apps/yaak-client/components/Settings/SettingsPlugins.tsx
@@ -0,0 +1,426 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { Plugin } from "@yaakapp-internal/models";
+import { patchModel, pluginsAtom } from "@yaakapp-internal/models";
+import type { PluginVersion } from "@yaakapp-internal/plugins";
+import {
+  checkPluginUpdates,
+  installPlugin,
+  searchPlugins,
+  uninstallPlugin,
+} from "@yaakapp-internal/plugins";
+import {
+  HStack,
+  Icon,
+  InlineCode,
+  LoadingIcon,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  useDebouncedValue,
+} from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { useInstallPlugin } from "../../hooks/useInstallPlugin";
+import { usePluginInfo } from "../../hooks/usePluginInfo";
+import { usePluginsKey, useRefreshPlugins } from "../../hooks/usePlugins";
+import { showConfirmDelete } from "../../lib/confirm";
+import { minPromiseMillis } from "../../lib/minPromiseMillis";
+import { Button } from "../core/Button";
+import { Checkbox } from "../core/Checkbox";
+import { CountBadge } from "../core/CountBadge";
+import { IconButton } from "../core/IconButton";
+import { Link } from "../core/Link";
+import { PlainInput } from "../core/PlainInput";
+import { TabContent, Tabs } from "../core/Tabs/Tabs";
+import { EmptyStateText } from "../EmptyStateText";
+import { SelectFile } from "../SelectFile";
+import { platform } from "@yaakapp-internal/platform";
+
+interface SettingsPluginsProps {
+  defaultSubtab?: string;
+}
+
+export function SettingsPlugins({ defaultSubtab }: SettingsPluginsProps) {
+  const [directory, setDirectory] = useState<string | null>(null);
+  const plugins = useAtomValue(pluginsAtom);
+  const bundledPlugins = plugins.filter((p) => p.source === "bundled");
+  const installedPlugins = plugins.filter((p) => p.source !== "bundled");
+  const createPlugin = useInstallPlugin();
+  const refreshPlugins = useRefreshPlugins();
+  return (
+    <div className="h-full">
+      <Tabs
+        defaultValue={defaultSubtab}
+        label="Plugins"
+        addBorders
+        tabListClassName="px-6 pt-2"
+        tabs={[
+          { label: "Discover", value: "search" },
+          {
+            label: "Installed",
+            value: "installed",
+            rightSlot: <CountBadge count={installedPlugins.length} />,
+          },
+          {
+            label: "Bundled",
+            value: "bundled",
+            rightSlot: <CountBadge count={bundledPlugins.length} />,
+          },
+        ]}
+      >
+        <TabContent value="search" className="px-6">
+          <PluginSearch />
+        </TabContent>
+        <TabContent value="installed" className="pb-0">
+          <div className="h-full grid grid-rows-[minmax(0,1fr)_auto]">
+            <InstalledPlugins plugins={installedPlugins} className="px-6" />
+            <footer className="grid grid-cols-[minmax(0,1fr)_auto] py-2 px-4 border-t bg-surface-highlight border-border-subtle min-w-0">
+              <SelectFile
+                size="xs"
+                noun="Plugin"
+                directory
+                onChange={({ filePath }) => setDirectory(filePath)}
+                filePath={directory}
+              />
+              <HStack>
+                {directory && (
+                  <Button
+                    size="xs"
+                    color="primary"
+                    className="ml-auto"
+                    onClick={() => {
+                      if (directory == null) return;
+                      createPlugin.mutate(directory);
+                      setDirectory(null);
+                    }}
+                  >
+                    Add Plugin
+                  </Button>
+                )}
+                <IconButton
+                  size="sm"
+                  icon="refresh"
+                  title="Reload plugins"
+                  spin={refreshPlugins.isPending}
+                  onClick={() => refreshPlugins.mutate()}
+                />
+                <IconButton
+                  size="sm"
+                  icon="help"
+                  title="View documentation"
+                  onClick={() =>
+                    platform.openUrl("https://yaak.app/docs/plugin-development/plugins-quick-start")
+                  }
+                />
+              </HStack>
+            </footer>
+          </div>
+        </TabContent>
+        <TabContent value="bundled" className="pb-0 px-6">
+          <BundledPlugins plugins={bundledPlugins} />
+        </TabContent>
+      </Tabs>
+    </div>
+  );
+}
+
+function PluginTableRowForInstalledPlugin({ plugin }: { plugin: Plugin }) {
+  const info = usePluginInfo(plugin.id).data;
+  if (info == null) {
+    return null;
+  }
+
+  return (
+    <PluginTableRow
+      plugin={plugin}
+      version={info.version}
+      name={info.name}
+      displayName={info.displayName}
+      url={plugin.url}
+      showCheckbox={true}
+      showUninstall={true}
+    />
+  );
+}
+
+function PluginTableRowForBundledPlugin({ plugin }: { plugin: Plugin }) {
+  const info = usePluginInfo(plugin.id).data;
+  if (info == null) {
+    return null;
+  }
+
+  return (
+    <PluginTableRow
+      plugin={plugin}
+      version={info.version}
+      name={info.name}
+      displayName={info.displayName}
+      url={plugin.url}
+      showCheckbox={true}
+      showUninstall={false}
+    />
+  );
+}
+
+function PluginTableRowForRemotePluginVersion({ pluginVersion }: { pluginVersion: PluginVersion }) {
+  const plugin = useAtomValue(pluginsAtom).find((p) => p.id === pluginVersion.id);
+  const pluginInfo = usePluginInfo(plugin?.id ?? null).data;
+
+  return (
+    <PluginTableRow
+      plugin={plugin ?? null}
+      version={pluginInfo?.version ?? pluginVersion.version}
+      name={pluginVersion.name}
+      displayName={pluginVersion.displayName}
+      url={pluginVersion.url}
+      showCheckbox={false}
+    />
+  );
+}
+
+function PluginTableRow({
+  plugin,
+  name,
+  version,
+  displayName,
+  url,
+  showCheckbox = true,
+  showUninstall = true,
+}: {
+  plugin: Plugin | null;
+  name: string;
+  version: string;
+  displayName: string;
+  url: string | null;
+  showCheckbox?: boolean;
+  showUninstall?: boolean;
+}) {
+  const updates = usePluginUpdates();
+  const latestVersion = updates.data?.plugins.find((u) => u.name === name)?.version;
+  const installPluginMutation = useMutation({
+    mutationKey: ["install_plugin", name],
+    mutationFn: (name: string) => installPlugin(name, null),
+  });
+  const uninstall = usePromptUninstall(plugin?.id ?? null, displayName);
+  const refreshPlugins = useRefreshPlugins();
+
+  return (
+    <TableRow>
+      {showCheckbox && (
+        <TableCell className="py-0!">
+          <Checkbox
+            hideLabel
+            title={plugin?.enabled ? "Disable plugin" : "Enable plugin"}
+            checked={plugin?.enabled ?? false}
+            disabled={plugin == null}
+            onChange={async (enabled) => {
+              if (plugin) {
+                await patchModel(plugin, { enabled });
+                refreshPlugins.mutate();
+              }
+            }}
+          />
+        </TableCell>
+      )}
+      <TableCell className="font-semibold">
+        {url ? (
+          <Link noUnderline href={url}>
+            {displayName}
+          </Link>
+        ) : (
+          displayName
+        )}
+      </TableCell>
+      <TableCell>
+        <InlineCode>{name}</InlineCode>
+      </TableCell>
+      <TableCell>
+        <HStack space={1.5}>
+          <InlineCode>{version}</InlineCode>
+          {latestVersion != null && (
+            <InlineCode className="text-success flex items-center gap-1">
+              <Icon icon="arrow_up" size="sm" />
+              {latestVersion}
+            </InlineCode>
+          )}
+        </HStack>
+      </TableCell>
+      <TableCell className="py-0!">
+        <HStack justifyContent="end" space={1.5}>
+          {plugin != null && latestVersion != null ? (
+            <Button
+              variant="border"
+              color="success"
+              title={`Update to ${latestVersion}`}
+              size="xs"
+              isLoading={installPluginMutation.isPending}
+              onClick={() => installPluginMutation.mutate(name)}
+            >
+              Update
+            </Button>
+          ) : plugin == null ? (
+            <Button
+              variant="border"
+              color="primary"
+              title={`Install ${version}`}
+              size="xs"
+              isLoading={installPluginMutation.isPending}
+              onClick={() => installPluginMutation.mutate(name)}
+            >
+              Install
+            </Button>
+          ) : null}
+          {showUninstall && uninstall != null && (
+            <Button
+              size="xs"
+              title="Uninstall plugin"
+              variant="border"
+              isLoading={uninstall.isPending}
+              onClick={() => uninstall.mutate()}
+            >
+              Uninstall
+            </Button>
+          )}
+        </HStack>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function PluginSearch() {
+  const [query, setQuery] = useState<string>("");
+  const debouncedQuery = useDebouncedValue(query);
+  const results = useQuery({
+    queryKey: ["plugins", debouncedQuery],
+    queryFn: () => searchPlugins(query),
+  });
+
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)] gap-3">
+      <HStack space={1.5}>
+        <PlainInput
+          hideLabel
+          label="Search"
+          placeholder="Search plugins..."
+          onChange={setQuery}
+          defaultValue={query}
+        />
+      </HStack>
+      <div className="w-full h-full">
+        {results.data == null ? (
+          <EmptyStateText>
+            <LoadingIcon size="xl" className="text-text-subtlest" />
+          </EmptyStateText>
+        ) : (results.data.plugins ?? []).length === 0 ? (
+          <EmptyStateText>No plugins found</EmptyStateText>
+        ) : (
+          <Table scrollable>
+            <TableHead>
+              <TableRow>
+                <TableHeaderCell>Display Name</TableHeaderCell>
+                <TableHeaderCell>Name</TableHeaderCell>
+                <TableHeaderCell>Version</TableHeaderCell>
+                <TableHeaderCell />
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {results.data.plugins.map((p) => (
+                <PluginTableRowForRemotePluginVersion key={p.id} pluginVersion={p} />
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function InstalledPlugins({ plugins, className }: { plugins: Plugin[]; className?: string }) {
+  return plugins.length === 0 ? (
+    <div className={classNames(className, "pb-4")}>
+      <EmptyStateText className="text-center">
+        Plugins extend the functionality of Yaak.
+        <br />
+        Add your first plugin to get started.
+      </EmptyStateText>
+    </div>
+  ) : (
+    <Table scrollable className={className}>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell className="w-0" />
+          <TableHeaderCell>Display Name</TableHeaderCell>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>Version</TableHeaderCell>
+          <TableHeaderCell />
+        </TableRow>
+      </TableHead>
+      <tbody className="divide-y divide-surface-highlight">
+        {plugins.map((p) => (
+          <PluginTableRowForInstalledPlugin key={p.id} plugin={p} />
+        ))}
+      </tbody>
+    </Table>
+  );
+}
+
+function BundledPlugins({ plugins }: { plugins: Plugin[] }) {
+  return plugins.length === 0 ? (
+    <div className="pb-4">
+      <EmptyStateText className="text-center">No bundled plugins found.</EmptyStateText>
+    </div>
+  ) : (
+    <Table scrollable>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell className="w-0" />
+          <TableHeaderCell>Display Name</TableHeaderCell>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>Version</TableHeaderCell>
+          <TableHeaderCell />
+        </TableRow>
+      </TableHead>
+      <tbody className="divide-y divide-surface-highlight">
+        {plugins.map((p) => (
+          <PluginTableRowForBundledPlugin key={p.id} plugin={p} />
+        ))}
+      </tbody>
+    </Table>
+  );
+}
+
+function usePromptUninstall(pluginId: string | null, name: string) {
+  const mut = useMutation({
+    mutationKey: ["uninstall_plugin", pluginId],
+    mutationFn: async () => {
+      if (pluginId == null) return;
+
+      const confirmed = await showConfirmDelete({
+        id: `uninstall-plugin-${pluginId}`,
+        title: "Uninstall Plugin",
+        confirmText: "Uninstall",
+        description: (
+          <>
+            Permanently uninstall <InlineCode>{name}</InlineCode>?
+          </>
+        ),
+      });
+      if (confirmed) {
+        await minPromiseMillis(uninstallPlugin(pluginId), 700);
+      }
+    },
+  });
+
+  return pluginId == null ? null : mut;
+}
+
+function usePluginUpdates() {
+  return useQuery({
+    queryKey: ["plugin_updates", usePluginsKey()],
+    queryFn: () => checkPluginUpdates(),
+  });
+}
diff --git a/apps/yaak-client/components/Settings/SettingsProxy.tsx b/apps/yaak-client/components/Settings/SettingsProxy.tsx
new file mode 100644
index 0000000..98127b7
--- /dev/null
+++ b/apps/yaak-client/components/Settings/SettingsProxy.tsx
@@ -0,0 +1,180 @@
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import type { ProxySetting } from "@yaakapp-internal/models";
+import { Heading, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { CommercialUseBanner } from "../CommercialUseBanner";
+import {
+  SettingRowBoolean,
+  SettingRowSelect,
+  SettingRowText,
+  SettingsList,
+  SettingsSection,
+} from "../core/SettingRow";
+
+export function SettingsProxy() {
+  const settings = useAtomValue(settingsAtom);
+  const proxy = enabledProxyOrDefault(settings.proxy);
+
+  const patchProxy = async (patch: Partial<EnabledProxySetting>) => {
+    await patchModel(settings, {
+      proxy: {
+        ...proxy,
+        ...patch,
+        auth: Object.hasOwn(patch, "auth") ? (patch.auth ?? null) : proxy.auth,
+      },
+    });
+  };
+
+  return (
+    <VStack space={1.5} className="mb-4">
+      <div className="mb-3">
+        <Heading>Proxy</Heading>
+        <p className="text-text-subtle">
+          Configure a proxy server for HTTP requests. Useful for corporate firewalls, debugging
+          traffic, or routing through specific infrastructure.
+        </p>
+      </div>
+      <CommercialUseBanner source="proxy-settings" title="Using a proxy for work?" />
+      <SettingsList className="space-y-8">
+        <SettingsSection title="Proxy">
+          <SettingRowSelect
+            title="Proxy"
+            description="Choose how Yaak should discover or use proxy settings."
+            name="proxy"
+            value={settings.proxy?.type ?? "automatic"}
+            onChange={async (v) => {
+              if (v === "automatic") {
+                await patchModel(settings, { proxy: undefined });
+              } else if (v === "enabled") {
+                await patchModel(settings, { proxy });
+              } else {
+                await patchModel(settings, { proxy: { type: "disabled" } });
+              }
+            }}
+            options={[
+              { label: "Automatic proxy detection", value: "automatic" },
+              { label: "Custom proxy configuration", value: "enabled" },
+              { label: "No proxy", value: "disabled" },
+            ]}
+            selectClassName="w-64!"
+          />
+        </SettingsSection>
+
+        {settings.proxy?.type === "enabled" && (
+          <>
+            <SettingsSection title="Custom Proxy">
+              <SettingRowBoolean
+                checked={!settings.proxy.disabled}
+                title="Enable proxy"
+                description="Temporarily disable the proxy without losing the configuration."
+                onChange={(enabled) => patchProxy({ disabled: !enabled })}
+              />
+              <SettingRowText
+                name="proxyHttp"
+                title={
+                  <>
+                    Proxy for <InlineCode>http://</InlineCode> traffic
+                  </>
+                }
+                description="Proxy host used for unencrypted HTTP traffic."
+                value={settings.proxy.http}
+                placeholder="localhost:9090"
+                onChange={(http) => patchProxy({ http })}
+              />
+              <SettingRowText
+                name="proxyHttps"
+                title={
+                  <>
+                    Proxy for <InlineCode>https://</InlineCode> traffic
+                  </>
+                }
+                description="Proxy host used for HTTPS traffic."
+                value={settings.proxy.https}
+                placeholder="localhost:9090"
+                onChange={(https) => patchProxy({ https })}
+              />
+              <SettingRowText
+                name="proxyBypass"
+                title="Proxy Bypass"
+                description="Comma-separated list of hosts that should bypass the proxy."
+                value={settings.proxy.bypass}
+                placeholder="127.0.0.1, *.example.com, localhost:3000"
+                inputWidthClassName="w-96!"
+                onChange={(bypass) => patchProxy({ bypass })}
+              />
+            </SettingsSection>
+
+            <SettingsSection title="Authentication">
+              <SettingRowBoolean
+                checked={settings.proxy.auth != null}
+                title="Enable authentication"
+                description="Send proxy credentials with proxied requests."
+                onChange={(enabled) =>
+                  patchProxy({ auth: enabled ? { user: "", password: "" } : null })
+                }
+              />
+
+              {settings.proxy.auth != null && (
+                <>
+                  <SettingRowText
+                    required
+                    name="proxyUser"
+                    title="User"
+                    description="Username for proxy authentication."
+                    value={settings.proxy.auth.user}
+                    placeholder="myUser"
+                    onChange={(user) =>
+                      patchProxy({
+                        auth: {
+                          user,
+                          password:
+                            settings.proxy?.type === "enabled"
+                              ? (settings.proxy.auth?.password ?? "")
+                              : "",
+                        },
+                      })
+                    }
+                  />
+                  <SettingRowText
+                    name="proxyPassword"
+                    title="Password"
+                    description="Password for proxy authentication."
+                    value={settings.proxy.auth.password}
+                    placeholder="s3cretPassw0rd"
+                    type="password"
+                    onChange={(password) =>
+                      patchProxy({
+                        auth: {
+                          user:
+                            settings.proxy?.type === "enabled"
+                              ? (settings.proxy.auth?.user ?? "")
+                              : "",
+                          password,
+                        },
+                      })
+                    }
+                  />
+                </>
+              )}
+            </SettingsSection>
+          </>
+        )}
+      </SettingsList>
+    </VStack>
+  );
+}
+
+type EnabledProxySetting = Extract<ProxySetting, { type: "enabled" }>;
+
+function enabledProxyOrDefault(proxy: ProxySetting | null): EnabledProxySetting {
+  if (proxy?.type === "enabled") return proxy;
+
+  return {
+    disabled: false,
+    type: "enabled",
+    http: "",
+    https: "",
+    auth: { user: "", password: "" },
+    bypass: "",
+  };
+}
diff --git a/apps/yaak-client/components/Settings/SettingsTheme.tsx b/apps/yaak-client/components/Settings/SettingsTheme.tsx
new file mode 100644
index 0000000..2681090
--- /dev/null
+++ b/apps/yaak-client/components/Settings/SettingsTheme.tsx
@@ -0,0 +1,173 @@
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { Heading, HStack, Icon, type IconProps, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { lazy, Suspense } from "react";
+import { activeWorkspaceAtom } from "../../hooks/useActiveWorkspace";
+import { useResolvedAppearance } from "../../hooks/useResolvedAppearance";
+import { useResolvedTheme } from "../../hooks/useResolvedTheme";
+import type { ButtonProps } from "../core/Button";
+import { IconButton } from "../core/IconButton";
+import { Link } from "../core/Link";
+import type { SelectProps } from "../core/Select";
+import {
+  ModelSettingRowSelect,
+  SettingRowSelect,
+  SettingsList,
+  SettingsSection,
+} from "../core/SettingRow";
+
+const Editor = lazy(() => import("../core/Editor/Editor").then((m) => ({ default: m.Editor })));
+
+const buttonColors: ButtonProps["color"][] = [
+  "primary",
+  "info",
+  "success",
+  "notice",
+  "warning",
+  "danger",
+  "secondary",
+  "default",
+];
+
+const icons: IconProps["icon"][] = [
+  "info",
+  "box",
+  "update",
+  "alert_triangle",
+  "arrow_big_right_dash",
+  "download",
+  "copy",
+  "magic_wand",
+  "settings",
+  "trash",
+  "sparkles",
+  "pencil",
+  "paste",
+  "search",
+  "send_horizontal",
+];
+
+export function SettingsTheme() {
+  const workspace = useAtomValue(activeWorkspaceAtom);
+  const settings = useAtomValue(settingsAtom);
+  const appearance = useResolvedAppearance();
+  const activeTheme = useResolvedTheme();
+
+  if (settings == null || workspace == null || activeTheme.data == null) {
+    return null;
+  }
+
+  const lightThemes: SelectProps<string>["options"] = activeTheme.data.themes
+    .filter((theme) => !theme.dark)
+    .map((theme) => ({
+      label: theme.label,
+      value: theme.id,
+    }));
+
+  const darkThemes: SelectProps<string>["options"] = activeTheme.data.themes
+    .filter((theme) => theme.dark)
+    .map((theme) => ({
+      label: theme.label,
+      value: theme.id,
+    }));
+
+  return (
+    <VStack space={1.5} className="mb-4">
+      <div className="mb-3">
+        <Heading>Theme</Heading>
+        <p className="text-text-subtle">
+          Make Yaak your own by selecting a theme, or{" "}
+          <Link href="https://yaak.app/docs/plugin-development/plugins-quick-start">
+            Create Your Own
+          </Link>
+        </p>
+      </div>
+      <SettingsList className="space-y-8">
+        <SettingsSection title="Theme">
+          <ModelSettingRowSelect
+            model={settings}
+            modelKey="appearance"
+            title="Appearance"
+            description="Choose whether Yaak follows your system appearance or uses a fixed mode."
+            options={[
+              { label: "Automatic", value: "system" },
+              { label: "Light", value: "light" },
+              { label: "Dark", value: "dark" },
+            ]}
+          />
+          {(settings.appearance === "system" || settings.appearance === "light") && (
+            <SettingRowSelect
+              name="lightTheme"
+              title="Light theme"
+              description="Theme used when Yaak is in light mode."
+              value={activeTheme.data.light.id}
+              options={lightThemes}
+              onChange={(themeLight) => patchModel(settings, { themeLight })}
+            />
+          )}
+          {(settings.appearance === "system" || settings.appearance === "dark") && (
+            <SettingRowSelect
+              name="darkTheme"
+              title="Dark theme"
+              description="Theme used when Yaak is in dark mode."
+              value={activeTheme.data.dark.id}
+              options={darkThemes}
+              onChange={(themeDark) => patchModel(settings, { themeDark })}
+            />
+          )}
+        </SettingsSection>
+
+        <SettingsSection title="Preview">
+          <VStack
+            space={3}
+            className="mt-4 w-full bg-surface p-3 border border-dashed border-border-subtle rounded-sm overflow-x-auto"
+          >
+            <HStack className="text" space={1.5}>
+              <Icon icon={appearance === "dark" ? "moon" : "sun"} />
+              <strong>{activeTheme.data.active.label}</strong>
+              <em>(preview)</em>
+            </HStack>
+            <HStack space={1.5} className="w-full">
+              {buttonColors.map((c, i) => (
+                <IconButton
+                  key={c}
+                  color={c}
+                  size="2xs"
+                  iconSize="xs"
+                  icon={icons[i % icons.length] ?? "info"}
+                  iconClassName="text"
+                  title={`${c}`}
+                />
+              ))}
+              {buttonColors.map((c, i) => (
+                <IconButton
+                  key={c}
+                  color={c}
+                  variant="border"
+                  size="2xs"
+                  iconSize="xs"
+                  icon={icons[i % icons.length] ?? "info"}
+                  iconClassName="text"
+                  title={`${c}`}
+                />
+              ))}
+            </HStack>
+            <Suspense>
+              <Editor
+                defaultValue={[
+                  "let foo = { // Demo code editor",
+                  '  foo: ("bar" || "baz" ?? \'qux\'),',
+                  "  baz: [1, 10.2, null, false, true],",
+                  "};",
+                ].join("\n")}
+                heightMode="auto"
+                language="javascript"
+                stateKey={null}
+              />
+            </Suspense>
+          </VStack>
+        </SettingsSection>
+      </SettingsList>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/SettingsDropdown.tsx b/apps/yaak-client/components/SettingsDropdown.tsx
new file mode 100644
index 0000000..2c9336b
--- /dev/null
+++ b/apps/yaak-client/components/SettingsDropdown.tsx
@@ -0,0 +1,113 @@
+import { useLicense } from "@yaakapp-internal/license";
+import { useRef } from "react";
+import { openSettings } from "../commands/openSettings";
+import { useCheckForUpdates } from "../hooks/useCheckForUpdates";
+import { useExportData } from "../hooks/useExportData";
+import { appInfo } from "../lib/appInfo";
+import { showDialog } from "../lib/dialog";
+import { importData } from "../lib/importData";
+import { pricingUrl } from "../lib/pricingUrl";
+import type { DropdownRef } from "./core/Dropdown";
+import { Dropdown } from "./core/Dropdown";
+import { Icon } from "@yaakapp-internal/ui";
+import { IconButton } from "./core/IconButton";
+import { KeyboardShortcutsDialog } from "./KeyboardShortcutsDialog";
+import { platform } from "@yaakapp-internal/platform";
+
+export function SettingsDropdown() {
+  const exportData = useExportData();
+  const dropdownRef = useRef<DropdownRef>(null);
+  const checkForUpdates = useCheckForUpdates();
+  const { check } = useLicense();
+
+  return (
+    <Dropdown
+      ref={dropdownRef}
+      items={[
+        {
+          label: "Settings",
+          hotKeyAction: "settings.show",
+          leftSlot: <Icon icon="settings" />,
+          onSelect: () => openSettings.mutate(null),
+        },
+        {
+          label: "Keyboard shortcuts",
+          hotKeyAction: "hotkeys.showHelp",
+          leftSlot: <Icon icon="keyboard" />,
+          onSelect: () => {
+            showDialog({
+              id: "hotkey",
+              title: "Keyboard Shortcuts",
+              size: "dynamic",
+              render: () => <KeyboardShortcutsDialog />,
+            });
+          },
+        },
+        {
+          label: "Plugins",
+          leftSlot: <Icon icon="puzzle" />,
+          onSelect: () => openSettings.mutate("plugins"),
+        },
+        { type: "separator", label: "Share Workspace(s)" },
+        {
+          label: "Import Data",
+          leftSlot: <Icon icon="folder_input" />,
+          onSelect: () => importData.mutate(),
+        },
+        {
+          label: "Export Data",
+          leftSlot: <Icon icon="folder_output" />,
+          onSelect: () => exportData.mutate(),
+        },
+        {
+          label: "Create Run Button",
+          leftSlot: <Icon icon="rocket" />,
+          onSelect: () => platform.openUrl("https://yaak.app/button/new"),
+        },
+        { type: "separator", label: `Yaak v${appInfo.version}` },
+        {
+          label: "Check for Updates",
+          leftSlot: <Icon icon="update" />,
+          hidden: !appInfo.featureUpdater,
+          onSelect: () => checkForUpdates.mutate(),
+        },
+        {
+          label: "Purchase License",
+          color: "success",
+          hidden: check.data == null || check.data.status === "active",
+          leftSlot: <Icon icon="circle_dollar_sign" />,
+          rightSlot: <Icon icon="external_link" color="success" className="opacity-60" />,
+          onSelect: () =>
+            platform.openUrl(pricingUrl(`app.menu.purchase.${check.data?.status ?? "unknown"}`)),
+        },
+        {
+          label: "Install CLI",
+          hidden: appInfo.cliVersion != null,
+          leftSlot: <Icon icon="square_terminal" />,
+          rightSlot: <Icon icon="external_link" color="secondary" />,
+          onSelect: () => platform.openUrl("https://yaak.app/docs/cli"),
+        },
+        {
+          label: "Feedback",
+          leftSlot: <Icon icon="chat" />,
+          rightSlot: <Icon icon="external_link" color="secondary" />,
+          onSelect: () => platform.openUrl("https://yaak.app/feedback"),
+        },
+        {
+          label: "Changelog",
+          leftSlot: <Icon icon="cake" />,
+          rightSlot: <Icon icon="external_link" color="secondary" />,
+          onSelect: () => platform.openUrl(`https://yaak.app/changelog/${appInfo.version}`),
+        },
+      ]}
+    >
+      <IconButton
+        size="sm"
+        title="Main Menu"
+        icon="settings"
+        iconColor="secondary"
+        className="pointer-events-auto"
+      />
+    </Dropdown>
+  );
+}
diff --git a/apps/yaak-client/components/Sidebar.tsx b/apps/yaak-client/components/Sidebar.tsx
new file mode 100644
index 0000000..3e600a2
--- /dev/null
+++ b/apps/yaak-client/components/Sidebar.tsx
@@ -0,0 +1,1182 @@
+import type { Extension } from "@codemirror/state";
+import { Compartment } from "@codemirror/state";
+import { debounce } from "@yaakapp-internal/lib";
+import { gitMutations } from "@yaakapp-internal/git";
+import type { GitStatus } from "@yaakapp-internal/git";
+import type {
+  AnyModel,
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  ModelPayload,
+  WebsocketRequest,
+  Workspace,
+} from "@yaakapp-internal/models";
+import {
+  duplicateModel,
+  foldersAtom,
+  getAnyModel,
+  getModel,
+  grpcConnectionsAtom,
+  httpResponsesAtom,
+  patchModel,
+  websocketConnectionsAtom,
+  workspacesAtom,
+} from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { atom, useAtomValue } from "jotai";
+import { atomFamily } from "jotai-family";
+import { selectAtom } from "jotai/utils";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { moveToWorkspace } from "../commands/moveToWorkspace";
+import { openFolderSettings } from "../commands/openFolderSettings";
+import { activeFolderIdAtom } from "../hooks/useActiveFolderId";
+import { activeRequestIdAtom } from "../hooks/useActiveRequestId";
+import {
+  activeWorkspaceAtom,
+  activeWorkspaceIdAtom,
+  activeWorkspaceMetaAtom,
+} from "../hooks/useActiveWorkspace";
+import { allRequestsAtom } from "../hooks/useAllRequests";
+import { getCreateDropdownItems } from "../hooks/useCreateDropdownItems";
+import { getFolderActions } from "../hooks/useFolderActions";
+import { getGrpcRequestActions } from "../hooks/useGrpcRequestActions";
+import { useHotKey } from "../hooks/useHotKey";
+import { getHttpRequestActions } from "../hooks/useHttpRequestActions";
+import { platform } from "@yaakapp-internal/platform";
+import { usePlatformEvent } from "../hooks/usePlatformEvent";
+import { getModelAncestors } from "../hooks/useModelAncestors";
+import { sendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
+import { useSidebarHidden } from "../hooks/useSidebarHidden";
+import { getWebsocketRequestActions } from "../hooks/useWebsocketRequestActions";
+import { deepEqualAtom } from "../lib/atoms";
+import { showConfirm } from "../lib/confirm";
+import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
+import { showDialog } from "../lib/dialog";
+import {
+  gitWorktreeStatusByModelIdAtom,
+  gitWorktreeStatusFamily,
+} from "../lib/gitWorktreeStatus";
+import { jotaiStore } from "../lib/jotai";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { isSidebarFocused } from "../lib/scopes";
+import { navigateToRequestOrFolderOrWorkspace } from "../lib/setWorkspaceSearchParams";
+import type { ContextMenuProps, DropdownItem } from "./core/Dropdown";
+import { ContextMenu, Dropdown } from "./core/Dropdown";
+import type { FieldDef } from "./core/Editor/filter/extension";
+import { filter } from "./core/Editor/filter/extension";
+import type { Ast } from "./core/Editor/filter/query";
+import { evaluate, parseQuery } from "./core/Editor/filter/query";
+import { formatFieldFilter } from "./core/Editor/filter/format";
+import { HttpMethodTag } from "./core/HttpMethodTag";
+import { HttpStatusTag } from "./core/HttpStatusTag";
+import {
+  Icon,
+  LoadingIcon,
+  Tree,
+  isSelectedFamily,
+  selectedIdsFamily,
+  InlineCode,
+} from "@yaakapp-internal/ui";
+import type { TreeNode, TreeHandle, TreeProps, TreeItemProps } from "@yaakapp-internal/ui";
+import { IconButton } from "./core/IconButton";
+import type { InputHandle } from "./core/Input";
+import { Input } from "./core/Input";
+import { EmptyStateText } from "./EmptyStateText";
+import { atomWithKVStorage } from "../lib/atoms/atomWithKVStorage";
+import { GitDropdown } from "./git/GitDropdown";
+import { gitCallbacks } from "./git/callbacks";
+import { FileHistoryDialog } from "./git/FileHistoryDialog";
+import { sync } from "../init/sync";
+
+const collapsedFamily = atomFamily((treeId: string) => {
+  const key = ["sidebar_collapsed", treeId ?? "n/a"];
+  return atomWithKVStorage<Record<string, boolean>>(key, {});
+});
+
+type SidebarModel = Workspace | Folder | HttpRequest | GrpcRequest | WebsocketRequest;
+function isSidebarLeafModel(m: AnyModel): boolean {
+  const modelMap: Record<Exclude<SidebarModel["model"], "workspace">, null> = {
+    http_request: null,
+    grpc_request: null,
+    websocket_request: null,
+    folder: null,
+  };
+  return m.model in modelMap;
+}
+
+const OPACITY_SUBTLE = "opacity-80";
+
+function Sidebar({ className }: { className?: string }) {
+  const [hidden, setHidden] = useSidebarHidden();
+  const activeWorkspaceId = useAtomValue(activeWorkspaceAtom)?.id;
+  const treeId = `tree.${activeWorkspaceId ?? "unknown"}`;
+  const filterText = useAtomValue(sidebarFilterAtom);
+  const [tree, allFields, emptyFilterSuggestions] = useAtomValue(sidebarTreeAtom) ?? [];
+
+  const wrapperRef = useRef<HTMLElement>(null);
+  const treeRef = useRef<TreeHandle>(null);
+  const filterRef = useRef<InputHandle>(null);
+  const setFilterRef = useCallback((h: InputHandle | null) => {
+    filterRef.current = h;
+  }, []);
+  const allHidden = useMemo(() => {
+    if (tree?.children?.length === 0) return false;
+    if (filterText) return tree?.children?.every((c) => c.hidden);
+    return true;
+  }, [filterText, tree?.children]);
+
+  const focusActiveItem = useCallback(() => {
+    const didFocus = treeRef.current?.focus();
+    // If we weren't able to focus any items, focus the filter bar
+    if (!didFocus) filterRef.current?.focus();
+  }, []);
+
+  // Focus new sidebar models created by the user in this window. Writes from other
+  // sources (import, sync, CLI) can carry thousands of models and shouldn't move
+  // the selection.
+  usePlatformEvent<ModelPayload[]>("model_writes", (payloads) => {
+    for (const payload of payloads) {
+      if (payload.updateSource.type !== "window") continue;
+      if (payload.updateSource.label !== platform.window.label) continue;
+      if (!isSidebarLeafModel(payload.model)) continue;
+      if (!(payload.change.type === "upsert" && payload.change.created)) continue;
+      treeRef.current?.selectItem(payload.model.id, true);
+    }
+  });
+
+  useEffect(() => {
+    return jotaiStore.sub(activeIdAtom, () => {
+      const activeId = jotaiStore.get(activeIdAtom);
+      if (activeId) {
+        treeRef.current?.selectItem(activeId, true);
+      }
+    });
+  }, []);
+
+  useHotKey(
+    "sidebar.filter",
+    () => {
+      filterRef.current?.focus();
+    },
+    {
+      enable: isSidebarFocused,
+    },
+  );
+
+  useHotKey("sidebar.focus", async function focusHotkey() {
+    // Hide the sidebar if it's already focused
+    if (!hidden && isSidebarFocused()) {
+      await setHidden(true);
+      return;
+    }
+
+    // Show the sidebar if it's hidden
+    if (hidden) {
+      await setHidden(false);
+    }
+
+    // Select the 0th index on focus if none selected
+    setTimeout(focusActiveItem, 100);
+  });
+
+  const handleDragEnd = useCallback(async function handleDragEnd({
+    items,
+    parent,
+    children,
+    insertAt,
+  }: {
+    items: SidebarModel[];
+    parent: SidebarModel;
+    children: SidebarModel[];
+    insertAt: number;
+  }) {
+    const prev = children[insertAt - 1] as Exclude<SidebarModel, Workspace>;
+    const next = children[insertAt] as Exclude<SidebarModel, Workspace>;
+    const folderId = parent.model === "folder" ? parent.id : null;
+
+    const beforePriority = prev?.sortPriority ?? 0;
+    const afterPriority = next?.sortPriority ?? 0;
+    const shouldUpdateAll = afterPriority - beforePriority < 1;
+
+    try {
+      if (shouldUpdateAll) {
+        // Add items to children at insertAt
+        children.splice(insertAt, 0, ...items);
+        await Promise.all(
+          children.map((m, i) => patchModel(m, { sortPriority: i * 1000, folderId })),
+        );
+      } else {
+        const range = afterPriority - beforePriority;
+        const increment = range / (items.length + 2);
+        await Promise.all(
+          items.map((m, i) =>
+            // Spread item sortPriority out over before/after range
+            patchModel(m, {
+              sortPriority: beforePriority + (i + 1) * increment,
+              folderId,
+            }),
+          ),
+        );
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  const handleTreeRefInit = useCallback(
+    (n: TreeHandle) => {
+      treeRef.current = n;
+      if (n == null) return;
+      const activeId = jotaiStore.get(activeIdAtom);
+      if (activeId == null) return;
+      const selectedIds = jotaiStore.get(selectedIdsFamily(treeId));
+      if (selectedIds.length > 0) return;
+      n.selectItem(activeId);
+    },
+    [treeId],
+  );
+
+  const clearFilterText = useCallback(() => {
+    setSidebarFilterText("");
+    requestAnimationFrame(() => {
+      filterRef.current?.focus();
+    });
+  }, []);
+
+  const handleFilterKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      e.stopPropagation(); // Don't trigger tree navigation hotkeys
+      if (e.key === "Escape") {
+        e.preventDefault();
+        clearFilterText();
+      }
+    },
+    [clearFilterText],
+  );
+
+  const handleFilterChange = useMemo(
+    () =>
+      debounce((text: string) => {
+        jotaiStore.set(sidebarFilterAtom, (prev) => ({ ...prev, text }));
+      }, 0),
+    [],
+  );
+
+  const applyFilterExample = useCallback((text: string) => {
+    setSidebarFilterText(text);
+    requestAnimationFrame(() => {
+      filterRef.current?.focus();
+    });
+  }, []);
+
+  const treeHasFocus = useCallback(() => treeRef.current?.hasFocus() ?? false, []);
+
+  const getSelectedTreeModels = useCallback(
+    () => treeRef.current?.getSelectedItems() as SidebarModel[] | undefined,
+    [],
+  );
+
+  const handleRenameSelected = useCallback((items: SidebarModel[]) => {
+    if (items.length === 1 && items[0] != null) {
+      treeRef.current?.renameItem(items[0].id);
+    }
+  }, []);
+
+  const handleDeleteSelected = useCallback(async (items: SidebarModel[]) => {
+    await deleteModelWithConfirm(items);
+  }, []);
+
+  const handleDuplicateSelected = useCallback(async (items: SidebarModel[]) => {
+    if (items.length === 1 && items[0]) {
+      const newId = await duplicateModel(items[0]);
+      navigateToRequestOrFolderOrWorkspace(newId, items[0].model);
+    } else {
+      await Promise.all(items.map(duplicateModel));
+    }
+  }, []);
+
+  const handleMoveSelected = useCallback((items: SidebarModel[]) => {
+    const requests = items.filter(
+      (i): i is HttpRequest | GrpcRequest | WebsocketRequest =>
+        i.model === "http_request" || i.model === "grpc_request" || i.model === "websocket_request",
+    );
+    if (requests.length > 0) {
+      moveToWorkspace.mutate(requests);
+    }
+  }, []);
+
+  const handleSendSelected = useCallback(async (items: SidebarModel[]) => {
+    await Promise.all(
+      items
+        .filter((i) => i.model === "http_request")
+        .map((i) => sendAnyHttpRequest.mutateAsync(i.id)),
+    );
+  }, []);
+
+  useHotKey(
+    "sidebar.context_menu",
+    useCallback(() => {
+      treeRef.current?.showContextMenu();
+    }, []),
+    { enable: treeHasFocus },
+  );
+
+  useHotKey(
+    "sidebar.expand_all",
+    useCallback(() => {
+      jotaiStore.set(collapsedFamily(treeId), {});
+    }, [treeId]),
+    { enable: isSidebarFocused },
+  );
+
+  useHotKey(
+    "sidebar.collapse_all",
+    useCallback(() => {
+      if (tree == null) return;
+      const next = (node: TreeNode<SidebarModel>, collapsed: Record<string, boolean>) => {
+        let newCollapsed = { ...collapsed };
+        for (const n of node.children ?? []) {
+          if (n.item.model !== "folder") continue;
+          newCollapsed[n.item.id] = true;
+          newCollapsed = next(n, newCollapsed);
+        }
+        return newCollapsed;
+      };
+      const collapsed = next(tree, {});
+      jotaiStore.set(collapsedFamily(treeId), collapsed);
+    }, [tree, treeId]),
+    { enable: isSidebarFocused },
+  );
+
+  useHotKey(
+    "sidebar.selected.delete",
+    useCallback(() => {
+      const items = getSelectedTreeModels();
+      if (items) void handleDeleteSelected(items);
+    }, [getSelectedTreeModels, handleDeleteSelected]),
+    { enable: treeHasFocus },
+  );
+
+  useHotKey(
+    "sidebar.selected.rename",
+    useCallback(() => {
+      const items = getSelectedTreeModels();
+      if (items) handleRenameSelected(items);
+    }, [getSelectedTreeModels, handleRenameSelected]),
+    { enable: treeHasFocus, allowDefault: true },
+  );
+
+  useHotKey(
+    "sidebar.selected.duplicate",
+    useCallback(async () => {
+      const items = getSelectedTreeModels();
+      if (items) await handleDuplicateSelected(items);
+    }, [getSelectedTreeModels, handleDuplicateSelected]),
+    { priority: 10, enable: treeHasFocus },
+  );
+
+  useHotKey(
+    "sidebar.selected.move",
+    useCallback(() => {
+      const items = getSelectedTreeModels();
+      if (items) handleMoveSelected(items);
+    }, [getSelectedTreeModels, handleMoveSelected]),
+    { enable: treeHasFocus },
+  );
+
+  useHotKey(
+    "request.send",
+    useCallback(async () => {
+      const items = getSelectedTreeModels();
+      if (items) await handleSendSelected(items);
+    }, [getSelectedTreeModels, handleSendSelected]),
+    { enable: treeHasFocus },
+  );
+
+  const getContextMenu = useCallback<(items: SidebarModel[]) => Promise<DropdownItem[]>>(
+    async (items) => {
+      const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+      const child = items[0];
+
+      // No children means we're in the root
+      if (child == null) {
+        return getCreateDropdownItems({
+          workspaceId,
+          activeRequest: null,
+          folderId: null,
+        });
+      }
+
+      const workspaces = jotaiStore.get(workspacesAtom);
+      const syncDir = jotaiStore.get(activeWorkspaceMetaAtom)?.settingSyncDir;
+      const gitItems = getGitContextMenuItems({ items, syncDir });
+      const onlyHttpRequests = items.every((i) => i.model === "http_request");
+      const requestItems = items.filter(
+        (i) =>
+          i.model === "http_request" ||
+          i.model === "grpc_request" ||
+          i.model === "websocket_request",
+      );
+
+      const initialItems: ContextMenuProps["items"] = [
+        {
+          label: "Folder Settings",
+          hidden: !(items.length === 1 && child.model === "folder"),
+          leftSlot: <Icon icon="folder_cog" />,
+          onSelect: () => openFolderSettings(child.id),
+        },
+        {
+          label: "Send",
+          hotKeyAction: "request.send",
+          hotKeyLabelOnly: true,
+          hidden: !onlyHttpRequests,
+          leftSlot: <Icon icon="send_horizontal" />,
+          onSelect: () => handleSendSelected(items),
+        },
+        ...(items.length === 1 && child.model === "http_request"
+          ? await getHttpRequestActions()
+          : []
+        ).map((a) => ({
+          label: a.label,
+          leftSlot: <Icon icon={a.icon ?? "empty"} />,
+          onSelect: async () => {
+            const request = getModel("http_request", child.id);
+            if (request != null) await a.call(request);
+          },
+        })),
+        ...(items.length === 1 && child.model === "grpc_request"
+          ? await getGrpcRequestActions()
+          : []
+        ).map((a) => ({
+          label: a.label,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          leftSlot: <Icon icon={a.icon ?? "empty"} />,
+          onSelect: async () => {
+            const request = getModel("grpc_request", child.id);
+            if (request != null) await a.call(request);
+          },
+        })),
+        ...(items.length === 1 && child.model === "websocket_request"
+          ? await getWebsocketRequestActions()
+          : []
+        ).map((a) => ({
+          label: a.label,
+          leftSlot: <Icon icon={a.icon ?? "empty"} />,
+          onSelect: async () => {
+            const request = getModel("websocket_request", child.id);
+            if (request != null) await a.call(request);
+          },
+        })),
+        ...(items.length === 1 && child.model === "folder" ? await getFolderActions() : []).map(
+          (a) => ({
+            label: a.label,
+            leftSlot: <Icon icon={a.icon ?? "empty"} />,
+            onSelect: async () => {
+              const model = getModel("folder", child.id);
+              if (model != null) await a.call(model);
+            },
+          }),
+        ),
+      ];
+      const modelCreationItems: DropdownItem[] =
+        items.length === 1 && child.model === "folder"
+          ? [
+              { type: "separator" },
+              ...getCreateDropdownItems({
+                workspaceId,
+                activeRequest: null,
+                folderId: child.id,
+              }),
+            ]
+          : [];
+      const menuItems: ContextMenuProps["items"] = [
+        ...initialItems,
+        {
+          type: "separator",
+          hidden: initialItems.filter((v) => !v.hidden).length === 0 || gitItems.length === 0,
+        },
+        ...gitItems,
+        { type: "separator", hidden: gitItems.length === 0 },
+        {
+          label: "Rename",
+          leftSlot: <Icon icon="pencil" />,
+          hidden: items.length > 1,
+          hotKeyAction: "sidebar.selected.rename",
+          hotKeyLabelOnly: true,
+          onSelect: () => handleRenameSelected(items),
+        },
+        {
+          label: "Duplicate",
+          hotKeyAction: "model.duplicate",
+          hotKeyLabelOnly: true, // Would trigger for every request (bad)
+          leftSlot: <Icon icon="copy" />,
+          onSelect: () => handleDuplicateSelected(items),
+        },
+        {
+          label: items.length <= 1 ? "Move" : `Move ${requestItems.length} Requests`,
+          hotKeyAction: "sidebar.selected.move",
+          hotKeyLabelOnly: true,
+          leftSlot: <Icon icon="arrow_right_circle" />,
+          hidden:
+            workspaces.length <= 1 ||
+            requestItems.length === 0 ||
+            requestItems.length !== items.length,
+          onSelect: () => handleMoveSelected(items),
+        },
+        {
+          color: "danger",
+          label: "Delete",
+          hotKeyAction: "sidebar.selected.delete",
+          hotKeyLabelOnly: true,
+          leftSlot: <Icon icon="trash" />,
+          onSelect: () => handleDeleteSelected(items),
+        },
+        ...modelCreationItems,
+      ];
+      return menuItems;
+    },
+    [],
+  );
+
+  const renderContextMenuFn = useCallback<
+    NonNullable<TreeProps<SidebarModel>["renderContextMenu"]>
+  >(
+    ({ items, position, onClose }) => (
+      <ContextMenu items={items as DropdownItem[]} triggerPosition={position} onClose={onClose} />
+    ),
+    [],
+  );
+
+  // Use a language compartment for the filter so we can reconfigure it when the autocompletion changes
+  const filterLanguageCompartmentRef = useRef(new Compartment());
+  const filterCompartmentMountExtRef = useRef<Extension | null>(null);
+  if (filterCompartmentMountExtRef.current == null) {
+    filterCompartmentMountExtRef.current = filterLanguageCompartmentRef.current.of(
+      filter({ fields: allFields ?? [] }),
+    );
+  }
+
+  useEffect(() => {
+    const view = filterRef.current;
+    if (!view) return;
+    const ext = filter({ fields: allFields ?? [] });
+    view.dispatch({
+      effects: filterLanguageCompartmentRef.current.reconfigure(ext),
+    });
+  }, [allFields]);
+
+  if (tree == null || hidden) {
+    return null;
+  }
+
+  return (
+    <aside
+      ref={wrapperRef}
+      aria-hidden={hidden ?? undefined}
+      className={classNames(className, "h-full grid grid-rows-[auto_minmax(0,1fr)_auto]")}
+    >
+      <div className="w-full pl-3 pr-0.5 pt-3 grid grid-cols-[minmax(0,1fr)_auto] items-center">
+        {(tree.children?.length ?? 0) > 0 && (
+          <>
+            <Input
+              hideLabel
+              setRef={setFilterRef}
+              size="sm"
+              label="filter"
+              language={null} // Explicitly disable
+              placeholder="Search"
+              onChange={handleFilterChange}
+              defaultValue={filterText.text}
+              forceUpdateKey={filterText.key}
+              onKeyDown={handleFilterKeyDown}
+              stateKey={null}
+              wrapLines={false}
+              extraExtensions={filterCompartmentMountExtRef.current ?? undefined}
+              rightSlot={
+                filterText.text && (
+                  <IconButton
+                    className="bg-transparent! h-auto! min-h-full opacity-50 hover:opacity-100 -mr-1"
+                    icon="x"
+                    title="Clear filter"
+                    onClick={clearFilterText}
+                  />
+                )
+              }
+            />
+            <Dropdown
+              items={[
+                {
+                  label: "Focus Active Request",
+                  leftSlot: <Icon icon="crosshair" />,
+                  onSelect: () => {
+                    const activeId = jotaiStore.get(activeIdAtom);
+                    if (activeId == null) return;
+
+                    const folders = jotaiStore.get(foldersAtom);
+                    const workspaces = jotaiStore.get(workspacesAtom);
+                    const currentModel = getAnyModel(activeId);
+                    const ancestors = getModelAncestors(folders, workspaces, currentModel);
+                    jotaiStore.set(collapsedFamily(treeId), (prev) => {
+                      const n = { ...prev };
+                      for (const ancestor of ancestors) {
+                        if (ancestor.model === "folder") {
+                          delete n[ancestor.id];
+                        }
+                      }
+                      return n;
+                    });
+                    treeRef.current?.selectItem(activeId, false);
+                    treeRef.current?.focus();
+                  },
+                },
+                {
+                  label: "Expand All Folders",
+                  leftSlot: <Icon icon="chevrons_up_down" />,
+                  onSelect: () => jotaiStore.set(collapsedFamily(treeId), {}),
+                  hotKeyAction: "sidebar.expand_all",
+                  hotKeyLabelOnly: true,
+                },
+                {
+                  label: "Collapse All Folders",
+                  leftSlot: <Icon icon="chevrons_down_up" />,
+                  onSelect: () => {
+                    if (tree == null) return;
+                    const next = (
+                      node: TreeNode<SidebarModel>,
+                      collapsed: Record<string, boolean>,
+                    ) => {
+                      let newCollapsed = { ...collapsed };
+                      for (const n of node.children ?? []) {
+                        if (n.item.model !== "folder") continue;
+                        newCollapsed[n.item.id] = true;
+                        newCollapsed = next(n, newCollapsed);
+                      }
+                      return newCollapsed;
+                    };
+                    jotaiStore.set(collapsedFamily(treeId), next(tree, {}));
+                  },
+                  hotKeyAction: "sidebar.collapse_all",
+                  hotKeyLabelOnly: true,
+                },
+              ]}
+            >
+              <IconButton
+                size="xs"
+                className="ml-0.5 text-text-subtle hover:text-text"
+                icon="ellipsis_vertical"
+                title="Show sidebar actions menu"
+              />
+            </Dropdown>
+          </>
+        )}
+      </div>
+      {allHidden ? (
+        <div className="p-3 text-sm text-center">
+          {(emptyFilterSuggestions?.length ?? 0) > 0 ? (
+            <EmptyStateText
+              wrapperClassName="h-auto! mb-auto"
+              className="h-auto! py-3 px-3 text-text-subtle! text-sm leading-relaxed text-center"
+            >
+              <div>
+                No results, but found matches for{" "}
+                {emptyFilterSuggestions?.map((suggestion, i) => (
+                  <span key={suggestion.field}>
+                    {i > 0 && " or "}
+                    <button
+                      type="button"
+                      className="max-w-full rounded-sm align-middle focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-info"
+                      onClick={() => applyFilterExample(suggestion.filterText)}
+                    >
+                      <InlineCode className="inline-block max-w-36 truncate align-middle whitespace-nowrap transition-colors hover:border-border hover:bg-surface-active hover:text-text">
+                        {suggestion.filterText}
+                      </InlineCode>
+                    </button>
+                  </span>
+                ))}
+              </div>
+            </EmptyStateText>
+          ) : (
+            <EmptyStateText
+              wrapperClassName="h-auto! mb-auto"
+              className="h-auto! py-3 px-3 text-text-subtle! text-sm leading-relaxed text-center"
+            >
+              <div>
+                No results for{" "}
+                <InlineCode className="inline-block max-w-36 truncate align-middle">
+                  {filterText.text}
+                </InlineCode>
+              </div>
+            </EmptyStateText>
+          )}
+        </div>
+      ) : (
+        <Tree
+          ref={handleTreeRefInit}
+          root={tree}
+          treeId={treeId}
+          collapsedAtom={collapsedFamily(treeId)}
+          getItemKey={getItemKey}
+          ItemInner={SidebarInnerItem}
+          ItemLeftSlotInner={SidebarLeftSlot}
+          getContextMenu={getContextMenu}
+          renderContextMenu={renderContextMenuFn}
+          onActivate={handleActivate}
+          getEditOptions={getEditOptions}
+          className="pl-2 pr-3 pt-2 pb-2"
+          onDragEnd={handleDragEnd}
+        />
+      )}
+      <GitDropdown />
+    </aside>
+  );
+}
+
+// Memoized so route navigations (which re-render the workspace layout) don't
+// re-render the sidebar subtree. In large workspaces a sidebar re-render is
+// very expensive: it re-renders DndContext, whose context churn re-renders
+// every visible TreeItem regardless of their memo comparators.
+export default memo(Sidebar);
+
+function getGitContextMenuItems({
+  items,
+  syncDir,
+}: {
+  items: SidebarModel[];
+  syncDir: string | null | undefined;
+}): DropdownItem[] {
+  if (syncDir == null) return [];
+
+  const gitStatusEntries = items.flatMap((item) => {
+    const status = jotaiStore.get(gitWorktreeStatusFamily(item.id));
+    return status == null || status.status === "current" ? [] : [status];
+  });
+  const historyItem = items.length === 1 ? items[0] : null;
+  const historyPath =
+    historyItem == null
+      ? null
+      : (jotaiStore.get(gitWorktreeStatusFamily(historyItem.id))?.relaPath ??
+        syncPathForModel(historyItem));
+
+  return [
+    {
+      label: "View History",
+      leftSlot: <Icon icon="history" />,
+      hidden: historyPath == null,
+      onSelect: () => {
+        if (historyPath == null) return;
+        showDialog({
+          id: "git-history",
+          size: "lg",
+          title: "File History",
+          noPadding: true,
+          noScroll: true,
+          render: () => <FileHistoryDialog dir={syncDir} relaPath={historyPath} />,
+        });
+      },
+    },
+    {
+      label: "Restore Changes",
+      leftSlot: <Icon icon="rotate_ccw" />,
+      hidden: gitStatusEntries.length === 0,
+      async onSelect() {
+        const confirmed = await showConfirm({
+          id: "git-restore-sidebar-items",
+          title: "Restore Changes",
+          description:
+            gitStatusEntries.length === 1
+              ? "This will discard uncommitted changes for the selected item."
+              : `This will discard uncommitted changes for ${gitStatusEntries.length} selected items.`,
+          confirmText: "Restore",
+          color: "danger",
+        });
+        if (!confirmed) return;
+
+        await gitMutations(syncDir, gitCallbacks(syncDir)).restore.mutateAsync({
+          relaPaths: gitStatusEntries.map((entry) => entry.relaPath),
+        });
+        await sync({ force: true });
+      },
+    },
+  ];
+}
+
+function syncPathForModel(item: SidebarModel) {
+  return `yaak.${item.id}.yaml`;
+}
+
+const activeIdAtom = atom<string | null>((get) => {
+  return get(activeRequestIdAtom) || get(activeFolderIdAtom);
+});
+
+function getEditOptions(
+  item: SidebarModel,
+): ReturnType<NonNullable<TreeItemProps<SidebarModel>["getEditOptions"]>> {
+  return {
+    onChange: handleSubmitEdit,
+    defaultValue: resolvedModelName(item),
+    placeholder: item.name,
+  };
+}
+
+async function handleSubmitEdit(item: SidebarModel, text: string) {
+  await patchModel(item, { name: text });
+}
+
+function handleActivate(item: SidebarModel) {
+  // TODO: Add folder layout support
+  if (item.model !== "folder" && item.model !== "workspace") {
+    navigateToRequestOrFolderOrWorkspace(item.id, item.model);
+  }
+}
+
+const allPotentialChildrenAtom = atom<SidebarModel[]>((get) => {
+  const requests = get(allRequestsAtom);
+  const folders = get(foldersAtom);
+  return [...requests, ...folders];
+});
+
+const memoAllPotentialChildrenAtom = deepEqualAtom(allPotentialChildrenAtom);
+
+const sidebarFilterAtom = atom<{ text: string; key: string }>({
+  text: "",
+  key: "",
+});
+
+type SidebarFilterSuggestion = {
+  field: string;
+  filterText: string;
+};
+
+function setSidebarFilterText(text: string) {
+  jotaiStore.set(sidebarFilterAtom, { text, key: `${Math.random()}` });
+}
+
+function getSidebarSuggestionValue(ast: Ast | null) {
+  if (ast == null) return null;
+
+  if (ast.type === "Term" || ast.type === "Phrase") {
+    const value = ast.value.trim();
+    return value.length > 0 ? value : null;
+  }
+
+  if (ast.type === "Field") {
+    const value = ast.value.trim();
+    return value.length > 0 ? value : null;
+  }
+
+  return null;
+}
+
+function sidebarFieldMatchesValue(fieldValue: string, filterValue: string) {
+  return fieldValue.toLowerCase().includes(filterValue.toLowerCase());
+}
+
+const sidebarSuggestionFieldOrder = [
+  "url",
+  "folder",
+  "method",
+  "type",
+  "grpc_service",
+  "grpc_method",
+  "name",
+];
+
+const sidebarTreeAtom = atom<
+  [TreeNode<SidebarModel>, FieldDef[], SidebarFilterSuggestion[]] | null
+>((get) => {
+  const allModels = get(memoAllPotentialChildrenAtom);
+  const activeWorkspace = get(activeWorkspaceAtom);
+  const filter = get(sidebarFilterAtom);
+
+  const childrenMap: Record<string, Exclude<SidebarModel, Workspace>[]> = {};
+  for (const item of allModels) {
+    if ("folderId" in item && item.folderId == null) {
+      childrenMap[item.workspaceId] = childrenMap[item.workspaceId] ?? [];
+      childrenMap[item.workspaceId]?.push(item);
+    } else if ("folderId" in item && item.folderId != null) {
+      childrenMap[item.folderId] = childrenMap[item.folderId] ?? [];
+      childrenMap[item.folderId]?.push(item);
+    }
+  }
+
+  if (activeWorkspace == null) {
+    return null;
+  }
+
+  const queryAst = parseQuery(filter.text);
+  const suggestionValue = getSidebarSuggestionValue(queryAst);
+
+  // returns true if this node OR any child matches the filter
+  const allFields: Record<string, Set<string>> = {};
+  const suggestionFields = new Set<string>();
+  const build = (node: TreeNode<SidebarModel>, depth: number): boolean => {
+    const childItems = childrenMap[node.item.id] ?? [];
+    let matchesSelf = true;
+    const fields = getItemFields(node);
+    const model = node.item.model;
+    const isLeafNode = !(model === "folder" || model === "workspace");
+
+    for (const [field, value] of Object.entries(fields)) {
+      if (!value) continue;
+      allFields[field] = allFields[field] ?? new Set();
+      allFields[field].add(value);
+      if (
+        isLeafNode &&
+        suggestionValue != null &&
+        sidebarFieldMatchesValue(value, suggestionValue)
+      ) {
+        suggestionFields.add(field);
+      }
+    }
+
+    if (queryAst != null) {
+      matchesSelf = isLeafNode && evaluate(queryAst, { text: getItemText(node.item), fields });
+    }
+
+    let matchesChild = false;
+
+    // Recurse to children
+    node.children = !isLeafNode ? [] : undefined;
+
+    if (node.children != null) {
+      childItems.sort((a, b) => {
+        if (a.sortPriority === b.sortPriority) {
+          return a.updatedAt > b.updatedAt ? 1 : -1;
+        }
+        return a.sortPriority - b.sortPriority;
+      });
+
+      for (const item of childItems) {
+        const childNode = { item, parent: node, depth };
+        const childMatches = build(childNode, depth + 1);
+        if (childMatches) {
+          matchesChild = true;
+        }
+        node.children.push(childNode);
+      }
+    }
+
+    // hide node IFF nothing in its subtree matches
+    const anyMatch = matchesSelf || matchesChild;
+    node.hidden = !anyMatch;
+
+    return anyMatch;
+  };
+
+  const root: TreeNode<SidebarModel> = {
+    item: activeWorkspace,
+    parent: null,
+    children: [],
+    depth: 0,
+  };
+
+  // Build tree and mark visibility in one pass
+  build(root, 1);
+
+  const fields: FieldDef[] = [];
+  for (const [name, values] of Object.entries(allFields)) {
+    fields.push({
+      name,
+      values: Array.from(values).filter((v) => v.length < 20),
+    });
+  }
+  const suggestions = Array.from(suggestionFields)
+    .sort((a, b) => {
+      const aIndex = sidebarSuggestionFieldOrder.indexOf(a);
+      const bIndex = sidebarSuggestionFieldOrder.indexOf(b);
+      if (aIndex === -1 && bIndex === -1) return a.localeCompare(b);
+      return (aIndex === -1 ? Infinity : aIndex) - (bIndex === -1 ? Infinity : bIndex);
+    })
+    .map((field) => ({
+      field,
+      filterText: formatFieldFilter(field, suggestionValue ?? ""),
+    }));
+  return [root, fields, suggestions] as const;
+});
+
+const sidebarGitStatusByModelIdAtom = atom<Record<string, GitStatus>>((get) => {
+  const allModels = get(memoAllPotentialChildrenAtom);
+  const activeWorkspace = get(activeWorkspaceAtom);
+  const gitStatusByModelId = get(gitWorktreeStatusByModelIdAtom);
+  const childrenMap: Record<string, Exclude<SidebarModel, Workspace>[]> = {};
+  const statusByModelId: Record<string, GitStatus> = {};
+
+  for (const item of allModels) {
+    if ("folderId" in item && item.folderId == null) {
+      childrenMap[item.workspaceId] = childrenMap[item.workspaceId] ?? [];
+      childrenMap[item.workspaceId]?.push(item);
+    } else if ("folderId" in item && item.folderId != null) {
+      childrenMap[item.folderId] = childrenMap[item.folderId] ?? [];
+      childrenMap[item.folderId]?.push(item);
+    }
+  }
+
+  const visit = (item: SidebarModel): GitStatus | null => {
+    const statuses: GitStatus[] = [];
+    const directStatus = gitStatusByModelId[item.id]?.status;
+    if (directStatus != null && directStatus !== "current") {
+      statuses.push(directStatus);
+    }
+
+    for (const child of childrenMap[item.id] ?? []) {
+      const childStatus = visit(child);
+      if (childStatus != null) statuses.push(childStatus);
+    }
+
+    const status = summarizeGitStatuses(statuses);
+    if (status != null) {
+      statusByModelId[item.id] = status;
+    }
+    return status;
+  };
+
+  if (activeWorkspace != null) {
+    visit(activeWorkspace);
+  }
+
+  return statusByModelId;
+});
+
+const sidebarGitStatusFamily = atomFamily(
+  (modelId: string) =>
+    selectAtom(sidebarGitStatusByModelIdAtom, (statusByModelId) => statusByModelId[modelId] ?? null),
+  Object.is,
+);
+
+function summarizeGitStatuses(statuses: GitStatus[]): GitStatus | null {
+  if (statuses.length === 0) return null;
+  const firstStatus = statuses[0];
+  if (firstStatus != null && statuses.every((status) => status === firstStatus)) {
+    return firstStatus;
+  }
+  return "modified";
+}
+
+function getItemKey(item: SidebarModel) {
+  const responses = jotaiStore.get(httpResponsesAtom);
+  const latestResponse = responses.find((r) => r.requestId === item.id) ?? null;
+  const url = "url" in item ? item.url : "n/a";
+  const method = "method" in item ? item.method : "n/a";
+  const service = "service" in item ? item.service : "n/a";
+  return [
+    item.id,
+    item.name,
+    url,
+    method,
+    service,
+    latestResponse?.elapsed,
+    latestResponse?.id ?? "n/a",
+  ].join("::");
+}
+
+const SidebarLeftSlot = memo(function SidebarLeftSlot({
+  treeId,
+  item,
+}: {
+  treeId: string;
+  item: SidebarModel;
+}) {
+  if (item.model === "folder") {
+    return <Icon icon="folder" />;
+  }
+  if (item.model === "workspace") {
+    return null;
+  }
+  const isSelected = jotaiStore.get(isSelectedFamily({ treeId, itemId: item.id }));
+  return (
+    <HttpMethodTag
+      short
+      className={classNames("text-xs pl-1.5", !isSelected && OPACITY_SUBTLE)}
+      request={item}
+    />
+  );
+});
+
+const SidebarInnerItem = memo(function SidebarInnerItem({
+  item,
+}: {
+  treeId: string;
+  item: SidebarModel;
+}) {
+  const gitStatus = useAtomValue(sidebarGitStatusFamily(item.id));
+  const response = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(
+          atom((get) => [
+            ...get(grpcConnectionsAtom),
+            ...get(httpResponsesAtom),
+            ...get(websocketConnectionsAtom),
+          ]),
+          (responses) => responses.find((r) => r.requestId === item.id),
+          (a, b) => a?.state === b?.state && a?.id === b?.id, // Only update when the response state changes updated
+        ),
+      [item.id],
+    ),
+  );
+
+  return (
+    <div className="flex items-center gap-2 min-w-0 h-full w-full text-left">
+      <div
+        className={classNames(
+          "truncate",
+          gitStatus === "modified" && "text-info",
+          gitStatus === "untracked" && "text-success",
+          gitStatus === "removed" && "text-danger",
+        )}
+      >
+        {resolvedModelName(item)}
+      </div>
+      {response != null && (
+        <div className="ml-auto">
+          {response.state !== "closed" ? (
+            <LoadingIcon size="sm" className="text-text-subtlest" />
+          ) : response.model === "http_response" ? (
+            <HttpStatusTag short className="text-xs" response={response} />
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+});
+
+function getItemFields(node: TreeNode<SidebarModel>): Record<string, string> {
+  const item = node.item;
+
+  if (item.model === "workspace") return {};
+
+  const fields: Record<string, string> = {};
+  if (item.model === "http_request") {
+    fields.method = item.method.toUpperCase();
+  }
+
+  if (item.model === "grpc_request") {
+    fields.grpc_method = item.method ?? "";
+    fields.grpc_service = item.service ?? "";
+  }
+
+  if ("url" in item) fields.url = item.url;
+  fields.name = resolvedModelName(item);
+
+  fields.type = "http";
+  if (item.model === "grpc_request") fields.type = "grpc";
+  else if (item.model === "websocket_request") fields.type = "ws";
+
+  if (node.parent?.item.model === "folder") {
+    fields.folder = node.parent.item.name;
+  }
+
+  return fields;
+}
+
+function getItemText(item: SidebarModel): string {
+  const segments = [];
+  if (item.model === "http_request") {
+    segments.push(item.method);
+  }
+
+  segments.push(resolvedModelName(item));
+
+  return segments.join(" ");
+}
diff --git a/apps/yaak-client/components/SidebarActions.tsx b/apps/yaak-client/components/SidebarActions.tsx
new file mode 100644
index 0000000..ba479a5
--- /dev/null
+++ b/apps/yaak-client/components/SidebarActions.tsx
@@ -0,0 +1,39 @@
+import { HStack } from "@yaakapp-internal/ui";
+import { useMemo } from "react";
+import { useFloatingSidebarHidden } from "../hooks/useFloatingSidebarHidden";
+import { useSidebarHidden } from "../hooks/useSidebarHidden";
+import { CreateDropdown } from "./CreateDropdown";
+import { IconButton } from "./core/IconButton";
+
+interface Props {
+  floating?: boolean;
+}
+
+export function SidebarActions({ floating = false }: Props) {
+  const [sidebarHidden, setSidebarHidden] = useSidebarHidden();
+  const [floatingHidden, setFloatingHidden] = useFloatingSidebarHidden();
+
+  const hidden = floating ? floatingHidden : sidebarHidden;
+  const setHidden = useMemo(
+    () => (floating ? setFloatingHidden : setSidebarHidden),
+    [floating, setFloatingHidden, setSidebarHidden],
+  );
+
+  return (
+    <HStack className="h-full">
+      <IconButton
+        onClick={async () => {
+          await setHidden(!hidden);
+        }}
+        className="pointer-events-auto"
+        size="sm"
+        title="Toggle sidebar"
+        icon={hidden ? "left_panel_hidden" : "left_panel_visible"}
+        iconColor="secondary"
+      />
+      <CreateDropdown hotKeyAction="model.create">
+        <IconButton size="sm" icon="plus_circle" iconColor="secondary" title="Add Resource" />
+      </CreateDropdown>
+    </HStack>
+  );
+}
diff --git a/apps/yaak-client/components/SwitchWorkspaceDialog.tsx b/apps/yaak-client/components/SwitchWorkspaceDialog.tsx
new file mode 100644
index 0000000..2852b8e
--- /dev/null
+++ b/apps/yaak-client/components/SwitchWorkspaceDialog.tsx
@@ -0,0 +1,60 @@
+import type { Workspace } from "@yaakapp-internal/models";
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { switchWorkspace } from "../commands/switchWorkspace";
+import { Button } from "./core/Button";
+import { Checkbox } from "./core/Checkbox";
+
+interface Props {
+  hide: () => void;
+  workspace: Workspace;
+}
+
+export function SwitchWorkspaceDialog({ hide, workspace }: Props) {
+  const settings = useAtomValue(settingsAtom);
+  const [remember, setRemember] = useState<boolean>(false);
+
+  return (
+    <VStack space={3}>
+      <p>
+        Where would you like to open <InlineCode>{workspace.name}</InlineCode>?
+      </p>
+      <HStack space={2} justifyContent="start" className="flex-row-reverse">
+        <Button
+          className="focus"
+          color="primary"
+          onClick={async () => {
+            hide();
+            switchWorkspace.mutate({ workspaceId: workspace.id, inNewWindow: false });
+            if (remember) {
+              await patchModel(settings, { openWorkspaceNewWindow: false });
+            }
+          }}
+        >
+          This Window
+        </Button>
+        <Button
+          className="focus"
+          color="secondary"
+          rightSlot={<Icon icon="external_link" />}
+          onClick={async () => {
+            hide();
+            switchWorkspace.mutate({ workspaceId: workspace.id, inNewWindow: true });
+            if (remember) {
+              await patchModel(settings, { openWorkspaceNewWindow: true });
+            }
+          }}
+        >
+          New Window
+        </Button>
+      </HStack>
+      {settings && (
+        <HStack justifyContent="end">
+          <Checkbox checked={remember} title="Remember my choice" onChange={setRemember} />
+        </HStack>
+      )}
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/SyncToFilesystemSetting.tsx b/apps/yaak-client/components/SyncToFilesystemSetting.tsx
new file mode 100644
index 0000000..51e8132
--- /dev/null
+++ b/apps/yaak-client/components/SyncToFilesystemSetting.tsx
@@ -0,0 +1,121 @@
+import { Banner, VStack } from "@yaakapp-internal/ui";
+import { useState } from "react";
+import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
+import { Button } from "./core/Button";
+import { Checkbox } from "./core/Checkbox";
+import { SettingRowBoolean, SettingRowDirectory } from "./core/SettingRow";
+import { SelectFile } from "./SelectFile";
+import { platform } from "@yaakapp-internal/platform";
+
+export interface SyncToFilesystemSettingProps {
+  layout?: "form" | "settings";
+  onChange: (args: { filePath: string | null; initGit?: boolean }) => void;
+  onCreateNewWorkspace: () => void;
+  value: { filePath: string | null; initGit?: boolean };
+}
+
+export function SyncToFilesystemSetting({
+  layout = "form",
+  onChange,
+  onCreateNewWorkspace,
+  value,
+}: SyncToFilesystemSettingProps) {
+  const [syncDir, setSyncDir] = useState<string | null>(null);
+
+  const handleFilePathChange = async (filePath: string | null) => {
+    if (filePath != null) {
+      const files = await platform.files.readDir(filePath);
+      if (files.length > 0) {
+        setSyncDir(filePath);
+        return;
+      }
+    }
+
+    setSyncDir(null);
+    onChange({ ...value, filePath });
+  };
+
+  if (layout === "settings") {
+    return (
+      <VStack className="w-full" space={0}>
+        {syncDir && (
+          <Banner color="notice" className="mb-3 flex flex-col gap-1.5">
+            <p>Directory is not empty. Do you want to open it instead?</p>
+            <div>
+              <Button
+                variant="border"
+                color="notice"
+                size="xs"
+                type="button"
+                onClick={() => {
+                  openWorkspaceFromSyncDir.mutate(syncDir);
+                  onCreateNewWorkspace();
+                }}
+              >
+                Open Workspace
+              </Button>
+            </div>
+          </Banner>
+        )}
+
+        <SettingRowDirectory
+          title="Local directory sync"
+          description="Sync data to a folder for backup and Git integration."
+          filePath={value.filePath}
+          onChange={handleFilePathChange}
+        />
+
+        {value.filePath && typeof value.initGit === "boolean" && (
+          <SettingRowBoolean
+            checked={value.initGit}
+            title="Initialize Git Repo"
+            description="Create a Git repository in the selected sync directory."
+            onChange={(initGit) => onChange({ ...value, initGit })}
+          />
+        )}
+      </VStack>
+    );
+  }
+
+  return (
+    <VStack className="w-full my-2" space={3}>
+      {syncDir && (
+        <Banner color="notice" className="flex flex-col gap-1.5">
+          <p>Directory is not empty. Do you want to open it instead?</p>
+          <div>
+            <Button
+              variant="border"
+              color="notice"
+              size="xs"
+              type="button"
+              onClick={() => {
+                openWorkspaceFromSyncDir.mutate(syncDir);
+                onCreateNewWorkspace();
+              }}
+            >
+              Open Workspace
+            </Button>
+          </div>
+        </Banner>
+      )}
+
+      <SelectFile
+        directory
+        label="Local directory sync"
+        size="xs"
+        noun="Directory"
+        help="Sync data to a folder for backup and Git integration."
+        filePath={value.filePath}
+        onChange={async ({ filePath }) => handleFilePathChange(filePath)}
+      />
+
+      {value.filePath && typeof value.initGit === "boolean" && (
+        <Checkbox
+          checked={value.initGit}
+          onChange={(initGit) => onChange({ ...value, initGit })}
+          title="Initialize Git Repo"
+        />
+      )}
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/TemplateFunctionDialog.tsx b/apps/yaak-client/components/TemplateFunctionDialog.tsx
new file mode 100644
index 0000000..92e2177
--- /dev/null
+++ b/apps/yaak-client/components/TemplateFunctionDialog.tsx
@@ -0,0 +1,296 @@
+import type { EditorView } from "@codemirror/view";
+import type {
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from "@yaakapp-internal/models";
+import type { TemplateFunction } from "@yaakapp-internal/plugins";
+import type { FnArg, Tokens } from "@yaakapp-internal/templates";
+import { parseTemplate } from "@yaakapp-internal/templates";
+import { HStack, InlineCode, LoadingIcon, useDebouncedValue } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useEffect, useMemo, useState } from "react";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { useRenderTemplate } from "../hooks/useRenderTemplate";
+import { useTemplateFunctionConfig } from "../hooks/useTemplateFunctionConfig";
+import {
+  templateTokensToString,
+  useTemplateTokensToString,
+} from "../hooks/useTemplateTokensToString";
+import { useToggle } from "../hooks/useToggle";
+import { showDialog } from "../lib/dialog";
+import { convertTemplateToInsecure } from "../lib/encryption";
+import { jotaiStore } from "../lib/jotai";
+import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
+import { Button } from "./core/Button";
+import { collectArgumentValues } from "./core/Editor/twig/util";
+import { IconButton } from "./core/IconButton";
+import { PlainInput } from "./core/PlainInput";
+import { DYNAMIC_FORM_NULL_ARG, DynamicForm } from "./DynamicForm";
+
+interface Props {
+  templateFunction: TemplateFunction;
+  initialTokens: Tokens;
+  hide: () => void;
+  onChange: (insert: string) => void;
+  model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace;
+}
+
+export function TemplateFunctionDialog({ initialTokens, templateFunction, ...props }: Props) {
+  const [initialArgValues, setInitialArgValues] = useState<Record<string, string | boolean> | null>(
+    null,
+  );
+  useEffect(() => {
+    if (initialArgValues != null) {
+      return;
+    }
+
+    (async () => {
+      const initial = collectArgumentValues(initialTokens, templateFunction);
+
+      // HACK: Replace the secure() function's encrypted `value` arg with the decrypted version so
+      //  we can display it in the editor input.
+      if (templateFunction.name === "secure") {
+        const template = await templateTokensToString(initialTokens);
+        initial.value = await convertTemplateToInsecure(template);
+      }
+
+      setInitialArgValues(initial);
+    })().catch(console.error);
+  }, [
+    initialArgValues,
+    initialTokens,
+    initialTokens.tokens,
+    templateFunction,
+    templateFunction.args,
+    templateFunction.name,
+  ]);
+
+  if (initialArgValues == null) return null;
+
+  return (
+    <InitializedTemplateFunctionDialog
+      {...props}
+      templateFunction={templateFunction}
+      initialArgValues={initialArgValues}
+    />
+  );
+}
+
+function InitializedTemplateFunctionDialog({
+  templateFunction: { name, previewType: ogPreviewType },
+  initialArgValues,
+  hide,
+  onChange,
+  model,
+}: Omit<Props, "initialTokens"> & {
+  initialArgValues: Record<string, string | boolean>;
+}) {
+  const previewType = ogPreviewType == null ? "live" : ogPreviewType;
+  const [showSecretsInPreview, toggleShowSecretsInPreview] = useToggle(false);
+  const [argValues, setArgValues] = useState<Record<string, string | boolean>>(initialArgValues);
+
+  const tokens: Tokens = useMemo(() => {
+    const argTokens: FnArg[] = Object.keys(argValues).map((name) => ({
+      name,
+      value:
+        argValues[name] === DYNAMIC_FORM_NULL_ARG
+          ? { type: "null" }
+          : typeof argValues[name] === "boolean"
+            ? { type: "bool", value: argValues[name] === true }
+            : { type: "str", text: String(argValues[name] ?? "") },
+    }));
+
+    return {
+      tokens: [
+        {
+          type: "tag",
+          val: {
+            type: "fn",
+            name,
+            args: argTokens,
+          },
+        },
+      ],
+    };
+  }, [argValues, name]);
+
+  const tagText = useTemplateTokensToString(tokens);
+  const templateFunction = useTemplateFunctionConfig(name, argValues, model);
+
+  const handleDone = () => {
+    if (tagText.data) {
+      onChange(tagText.data);
+    }
+    hide();
+  };
+
+  const debouncedTagText = useDebouncedValue(tagText.data ?? "", 400);
+  const [renderKey, setRenderKey] = useState<string | null>(null);
+  const rendered = useRenderTemplate({
+    template: debouncedTagText,
+    enabled: previewType !== "none",
+    purpose: previewType === "click" ? "send" : "preview",
+    refreshKey: previewType === "live" ? renderKey + debouncedTagText : renderKey,
+    ignoreError: false,
+  });
+
+  const tooLarge = rendered.data ? rendered.data.length > 10000 : false;
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- Only update this on rendered data change to keep secrets hidden on input change
+  const dataContainsSecrets = useMemo(() => {
+    for (const [name, value] of Object.entries(argValues)) {
+      const arg = templateFunction.data?.args.find((a) => "name" in a && a.name === name);
+      const isTextPassword = arg?.type === "text" && arg.password;
+      if (isTextPassword && typeof value === "string" && value && rendered.data?.includes(value)) {
+        return true;
+      }
+    }
+    return false;
+  }, [rendered.data]);
+
+  if (templateFunction.data == null || templateFunction.isPending) {
+    return (
+      <div className="h-full w-full flex items-center justify-center">
+        <LoadingIcon size="xl" className="text-text-subtlest" />
+      </div>
+    );
+  }
+
+  return (
+    <form
+      className="grid grid-rows-[minmax(0,1fr)_auto_auto] h-full max-h-[90vh]"
+      onSubmit={(e) => {
+        e.preventDefault();
+        handleDone();
+      }}
+    >
+      <div className="overflow-y-auto h-full px-6">
+        {name === "secure" ? (
+          <PlainInput
+            required
+            label="Value"
+            name="value"
+            type="password"
+            placeholder="••••••••••••"
+            defaultValue={String(argValues.value ?? "")}
+            onChange={(value) => setArgValues({ ...argValues, value })}
+          />
+        ) : (
+          <DynamicForm
+            autocompleteVariables
+            autocompleteFunctions
+            inputs={templateFunction.data.args}
+            data={argValues}
+            onChange={setArgValues}
+            stateKey={`template_function.${templateFunction.data.name}`}
+          />
+        )}
+      </div>
+      <div className="px-6 border-t border-t-border pt-3 pb-6 bg-surface-highlight w-full flex flex-col gap-4">
+        {previewType !== "none" ? (
+          <div className="w-full grid grid-cols-1 grid-rows-[auto_auto]">
+            <HStack space={0.5}>
+              <HStack className="text-sm text-text-subtle" space={1.5}>
+                Rendered Preview
+                {rendered.isLoading && <LoadingIcon size="xs" />}
+              </HStack>
+              <IconButton
+                size="xs"
+                iconSize="sm"
+                icon={showSecretsInPreview ? "lock" : "lock_open"}
+                title={showSecretsInPreview ? "Show preview" : "Hide preview"}
+                onClick={toggleShowSecretsInPreview}
+                className={classNames(
+                  "ml-auto text-text-subtlest",
+                  !dataContainsSecrets && "invisible",
+                )}
+              />
+            </HStack>
+            <div className="relative w-full max-h-40">
+              <InlineCode
+                className={classNames(
+                  "block whitespace-pre-wrap select-text! cursor-text max-h-40 overflow-auto hide-scrollbars border-text-subtlest!",
+                  tooLarge && "italic text-danger",
+                )}
+              >
+                {rendered.error || tagText.error ? (
+                  <em className="text-danger">
+                    {`${rendered.error || tagText.error}`.replace(/^Render Error: /, "")}
+                  </em>
+                ) : dataContainsSecrets && !showSecretsInPreview ? (
+                  <span className="italic text-text-subtle">
+                    ------ sensitive values hidden ------
+                  </span>
+                ) : tooLarge ? (
+                  "too large to preview"
+                ) : (
+                  rendered.data || <> </>
+                )}
+              </InlineCode>
+              <div className="absolute right-0.5 top-0 bottom-0 flex items-center">
+                <IconButton
+                  size="xs"
+                  icon="refresh"
+                  className="text-text-subtle"
+                  title="Refresh preview"
+                  spin={rendered.isPending}
+                  onClick={() => {
+                    setRenderKey(new Date().toISOString());
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <span />
+        )}
+        <div className="flex justify-stretch w-full grow gap-2 *:flex-1">
+          {templateFunction.data.name === "secure" && (
+            <Button variant="border" color="secondary" onClick={setupOrConfigureEncryption}>
+              Reveal Encryption Key
+            </Button>
+          )}
+          <Button type="submit" color="primary">
+            Save
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+TemplateFunctionDialog.show = (
+  fn: TemplateFunction,
+  tagValue: string,
+  startPos: number,
+  view: EditorView,
+) => {
+  const initialTokens = parseTemplate(tagValue);
+  showDialog({
+    id: `template-function-${Math.random()}`, // Allow multiple at once
+    size: "md",
+    className: "h-240",
+    noPadding: true,
+    title: <InlineCode>{fn.name}(…)</InlineCode>,
+    description: fn.description,
+    render: ({ hide }) => {
+      const model = jotaiStore.get(activeWorkspaceAtom);
+      if (model == null) return null;
+      return (
+        <TemplateFunctionDialog
+          templateFunction={fn}
+          model={model}
+          hide={hide}
+          initialTokens={initialTokens}
+          onChange={(insert) => {
+            view.dispatch({
+              changes: [{ from: startPos, to: startPos + tagValue.length, insert }],
+            });
+          }}
+        />
+      );
+    },
+  });
+};
diff --git a/apps/yaak-client/components/Toasts.tsx b/apps/yaak-client/components/Toasts.tsx
new file mode 100644
index 0000000..046f191
--- /dev/null
+++ b/apps/yaak-client/components/Toasts.tsx
@@ -0,0 +1,43 @@
+import { useAtomValue } from "jotai";
+import { AnimatePresence } from "motion/react";
+import type { ReactNode } from "react";
+import { hideToast, toastsAtom } from "../lib/toast";
+import { Toast, type ToastProps } from "./core/Toast";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { Portal } from "@yaakapp-internal/ui";
+
+export type ToastInstance = {
+  id: string;
+  uniqueKey: string;
+  message: ReactNode;
+  timeout: 3000 | 5000 | 8000 | (number & {}) | null;
+  onClose?: ToastProps["onClose"];
+} & Omit<ToastProps, "onClose" | "open" | "children" | "timeout">;
+
+export const Toasts = () => {
+  const toasts = useAtomValue(toastsAtom);
+  return (
+    <Portal name="toasts">
+      <div className="absolute right-0 bottom-0 z-50">
+        <AnimatePresence>
+          {toasts.map((toast: ToastInstance) => {
+            const { message, uniqueKey, ...props } = toast;
+            return (
+              <ErrorBoundary key={uniqueKey} name={`Toast ${uniqueKey}`}>
+                <Toast
+                  open
+                  {...props}
+                  // We call onClose inside actions.hide instead of passing to toast so that
+                  // it gets called from external close calls as well
+                  onClose={() => hideToast(toast)}
+                >
+                  {message}
+                </Toast>
+              </ErrorBoundary>
+            );
+          })}
+        </AnimatePresence>
+      </div>
+    </Portal>
+  );
+};
diff --git a/apps/yaak-client/components/UrlBar.tsx b/apps/yaak-client/components/UrlBar.tsx
new file mode 100644
index 0000000..b729ad3
--- /dev/null
+++ b/apps/yaak-client/components/UrlBar.tsx
@@ -0,0 +1,113 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import type { IconProps } from "@yaakapp-internal/ui";
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { FormEvent, ReactNode } from "react";
+import { memo, useCallback, useRef, useState } from "react";
+import { useHotKey } from "../hooks/useHotKey";
+import { IconButton } from "./core/IconButton";
+import type { InputHandle, InputProps } from "./core/Input";
+import { Input } from "./core/Input";
+
+type Props = Pick<HttpRequest, "url"> & {
+  className?: string;
+  placeholder: string;
+  onSend: () => void;
+  onUrlChange: (url: string) => void;
+  onPaste?: (v: string) => void;
+  onPasteOverwrite?: InputProps["onPasteOverwrite"];
+  onCancel: () => void;
+  submitIcon?: IconProps["icon"] | null;
+  isLoading: boolean;
+  forceUpdateKey: string;
+  rightSlot?: ReactNode;
+  leftSlot?: ReactNode;
+  autocomplete?: InputProps["autocomplete"];
+  stateKey: InputProps["stateKey"];
+};
+
+export const UrlBar = memo(function UrlBar({
+  forceUpdateKey,
+  onUrlChange,
+  url,
+  placeholder,
+  className,
+  onSend,
+  onCancel,
+  onPaste,
+  onPasteOverwrite,
+  submitIcon = "send_horizontal",
+  autocomplete,
+  leftSlot,
+  rightSlot,
+  isLoading,
+  stateKey,
+}: Props) {
+  const inputRef = useRef<InputHandle>(null);
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+
+  const handleInitInputRef = useCallback((h: InputHandle | null) => {
+    inputRef.current = h;
+  }, []);
+
+  useHotKey("url_bar.focus", () => {
+    inputRef.current?.selectAll();
+  });
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (isLoading) onCancel();
+    else onSend();
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={classNames("x-theme-urlBar", className)}>
+      <Input
+        setRef={handleInitInputRef}
+        autocompleteFunctions
+        autocompleteVariables
+        stateKey={stateKey}
+        size="sm"
+        wrapLines={isFocused}
+        hideLabel
+        language="url"
+        className="px-1.5 py-0.5"
+        label="Enter URL"
+        name="url"
+        autocomplete={autocomplete}
+        forceUpdateKey={forceUpdateKey}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        onPaste={onPaste}
+        onPasteOverwrite={onPasteOverwrite}
+        onChange={onUrlChange}
+        defaultValue={url}
+        placeholder={placeholder}
+        leftSlot={leftSlot}
+        rightSlot={
+          <HStack space={0.5}>
+            {rightSlot && <div className="py-0.5 h-full">{rightSlot}</div>}
+            {submitIcon !== null && (
+              <div className="py-0.5 h-full">
+                <IconButton
+                  size="xs"
+                  iconSize="md"
+                  title="Send Request"
+                  type="submit"
+                  className="w-8 mr-0.5 h-full!"
+                  iconColor="secondary"
+                  icon={isLoading ? "x" : submitIcon}
+                  hotkeyAction="request.send"
+                  onMouseDown={(e) => {
+                    // Prevent the button from taking focus
+                    e.preventDefault();
+                  }}
+                />
+              </div>
+            )}
+          </HStack>
+        }
+      />
+    </form>
+  );
+});
diff --git a/apps/yaak-client/components/UrlParameterEditor.tsx b/apps/yaak-client/components/UrlParameterEditor.tsx
new file mode 100644
index 0000000..aab2afa
--- /dev/null
+++ b/apps/yaak-client/components/UrlParameterEditor.tsx
@@ -0,0 +1,54 @@
+import { VStack } from "@yaakapp-internal/ui";
+import { useCallback, useRef } from "react";
+import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
+import type { EditablePair, PairEditorHandle, PairEditorProps } from "./core/PairEditor";
+import { PairOrBulkEditor } from "./core/PairOrBulkEditor";
+
+type Props = {
+  forceUpdateKey: string;
+  pairs: EditablePair[];
+  stateKey: PairEditorProps["stateKey"];
+  onChange: PairEditorProps["onChange"];
+};
+
+export function UrlParametersEditor({ pairs, forceUpdateKey, onChange, stateKey }: Props) {
+  const pairEditorRef = useRef<PairEditorHandle>(null);
+  const handleInitPairEditorRef = useCallback((ref: PairEditorHandle) => {
+    pairEditorRef.current = ref;
+  }, []);
+
+  const [{ urlParametersKey }] = useRequestEditor();
+
+  useRequestEditorEvent(
+    "request_params.focus_value",
+    (name) => {
+      const pair = pairs.find((p) => p.name === name);
+      if (pair?.id != null) {
+        pairEditorRef.current?.focusValue(pair.id);
+      } else {
+        console.log(`Couldn't find pair to focus`, { name, pairs });
+      }
+    },
+    [pairs],
+  );
+
+  return (
+    <VStack className="h-full">
+      <PairOrBulkEditor
+        setRef={handleInitPairEditorRef}
+        allowMultilineValues
+        forceUpdateKey={forceUpdateKey + urlParametersKey}
+        nameAutocompleteFunctions
+        nameAutocompleteVariables
+        namePlaceholder="param_name"
+        onChange={onChange}
+        pairs={pairs}
+        preferenceName="url_parameters"
+        stateKey={stateKey}
+        valueAutocompleteFunctions
+        valueAutocompleteVariables
+        valuePlaceholder="Value"
+      />
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/WebsocketRequestLayout.tsx b/apps/yaak-client/components/WebsocketRequestLayout.tsx
new file mode 100644
index 0000000..16e6b3e
--- /dev/null
+++ b/apps/yaak-client/components/WebsocketRequestLayout.tsx
@@ -0,0 +1,49 @@
+import type { WebsocketRequest } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { CSSProperties } from "react";
+
+import { SplitLayout } from "@yaakapp-internal/ui";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { workspaceLayoutAtom } from "../lib/atoms";
+import { WebsocketRequestPane } from "./WebsocketRequestPane";
+import { WebsocketResponsePane } from "./WebsocketResponsePane";
+
+interface Props {
+  activeRequest: WebsocketRequest;
+  style: CSSProperties;
+}
+
+export function WebsocketRequestLayout({ activeRequest, style }: Props) {
+  const workspaceLayout = useAtomValue(workspaceLayoutAtom);
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  const wsId = activeWorkspace?.id ?? "n/a";
+  return (
+    <SplitLayout
+      storageKey={`websocket_layout::${wsId}`}
+      className="p-3 gap-1.5"
+      layout={workspaceLayout}
+      style={style}
+      firstSlot={({ orientation, style }) => (
+        <WebsocketRequestPane
+          style={style}
+          activeRequest={activeRequest}
+          fullHeight={orientation === "horizontal"}
+        />
+      )}
+      secondSlot={({ style }) => (
+        <div
+          style={style}
+          className={classNames(
+            "x-theme-responsePane",
+            "max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1",
+            "bg-surface rounded-md border border-border-subtle",
+            "shadow relative",
+          )}
+        >
+          <WebsocketResponsePane activeRequest={activeRequest} />
+        </div>
+      )}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/WebsocketRequestPane.tsx b/apps/yaak-client/components/WebsocketRequestPane.tsx
new file mode 100644
index 0000000..26ece54
--- /dev/null
+++ b/apps/yaak-client/components/WebsocketRequestPane.tsx
@@ -0,0 +1,314 @@
+import type { WebsocketRequest } from "@yaakapp-internal/models";
+import {
+  flushAllModelWrites,
+  getModel,
+  patchModel,
+  patchModelDebounced,
+} from "@yaakapp-internal/models";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import { closeWebsocket, connectWebsocket, sendWebsocket } from "@yaakapp-internal/ws";
+import classNames from "classnames";
+import { atom, useAtomValue } from "jotai";
+import type { CSSProperties } from "react";
+import { useCallback, useMemo, useRef } from "react";
+import { getActiveCookieJar } from "../hooks/useActiveCookieJar";
+import { getActiveEnvironment } from "../hooks/useActiveEnvironment";
+import { allRequestUrlsAtom } from "../hooks/useAllRequests";
+import { useAuthTab } from "../hooks/useAuthTab";
+import { useCancelHttpResponse } from "../hooks/useCancelHttpResponse";
+import { useHeadersTab } from "../hooks/useHeadersTab";
+import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
+import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
+import { activeWebsocketConnectionAtom } from "../hooks/usePinnedWebsocketConnection";
+import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
+import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
+import { languageFromContentType } from "../lib/contentType";
+import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
+import { prepareImportQuerystring } from "../lib/prepareImportQuerystring";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { CountBadge } from "./core/CountBadge";
+import type { GenericCompletionConfig } from "./core/Editor/genericCompletion";
+import { getUrlCompletionConfig } from "./core/Editor/url/completion";
+import { Editor } from "./core/Editor/LazyEditor";
+import { IconButton } from "./core/IconButton";
+import { PlainInput } from "./core/PlainInput";
+import type { TabItem, TabsRef } from "./core/Tabs/Tabs";
+import { setActiveTab, TabContent, Tabs } from "./core/Tabs/Tabs";
+import { HeadersEditor } from "./HeadersEditor";
+import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { countOverriddenSettings, ModelSettingsEditor } from "./ModelSettingsEditor";
+import { UrlBar } from "./UrlBar";
+import { UrlParametersEditor } from "./UrlParameterEditor";
+
+interface Props {
+  style: CSSProperties;
+  fullHeight: boolean;
+  className?: string;
+  activeRequest: WebsocketRequest;
+}
+
+const TAB_MESSAGE = "message";
+const TAB_PARAMS = "params";
+const TAB_HEADERS = "headers";
+const TAB_AUTH = "auth";
+const TAB_SETTINGS = "settings";
+const TAB_DESCRIPTION = "description";
+const TABS_STORAGE_KEY = "websocket_request_tabs";
+
+// Derived from the identity-stable URL list so this only recomputes when a URL
+// actually changes. The active request's own URL is included, but exact matches
+// are filtered out at completion time by genericCompletion.
+const requestUrlOptionsAtom = atom((get): GenericCompletionOption[] =>
+  get(allRequestUrlsAtom).map((url) => ({ type: "constant", label: url })),
+);
+
+export function WebsocketRequestPane({ style, fullHeight, className, activeRequest }: Props) {
+  const activeRequestId = activeRequest.id;
+  const tabsRef = useRef<TabsRef>(null);
+  const forceUpdateKey = useRequestUpdateKey(activeRequest.id);
+  const [{ urlKey }, { forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
+  const authTab = useAuthTab(TAB_AUTH, activeRequest);
+  const headersTab = useHeadersTab(TAB_HEADERS, activeRequest);
+  const inheritedHeaders = useInheritedHeaders(activeRequest);
+  const numSettingsOverrides = countOverriddenSettings(activeRequest);
+
+  // Listen for event to focus the params tab (e.g., when clicking a :param in the URL)
+  useRequestEditorEvent(
+    "request_pane.focus_tab",
+    () => {
+      tabsRef.current?.setActiveTab(TAB_PARAMS);
+    },
+    [],
+  );
+
+  // Renaming a path placeholder has to rewrite the URL and rename the parameter together, or the
+  // value detaches from the placeholder.
+  // NOTE: Reads the request fresh rather than closing over `activeRequest`. The row that calls this
+  //  holds onto it until the URL's placeholders change, so a captured request would go stale and
+  //  patch its parameter list back over newer edits.
+  const handleRenamePathPlaceholder = useCallback(
+    (oldName: string, newName: string) => {
+      const request = getModel("websocket_request", activeRequestId);
+      if (request == null) return false;
+
+      const patch = renamePathPlaceholder(request, oldName, newName);
+      if (patch == null) return false; // Unusable name, so the editor reverts the field
+      void patchModel(request, patch);
+      return true;
+    },
+    [activeRequestId],
+  );
+
+  const { urlParameterPairs, urlParametersKey } = useMemo(
+    () =>
+      derivePathPlaceholderPairs(
+        activeRequest.url,
+        activeRequest.urlParameters,
+        handleRenamePathPlaceholder,
+      ),
+    [activeRequest.url, activeRequest.urlParameters, handleRenamePathPlaceholder],
+  );
+
+  const hasDescription = activeRequest.description.trim().length > 0;
+
+  const tabs = useMemo<TabItem[]>(() => {
+    return [
+      {
+        value: TAB_MESSAGE,
+        label: "Message",
+      } as TabItem,
+      {
+        value: TAB_PARAMS,
+        rightSlot: <CountBadge count={urlParameterPairs.length} />,
+        label: "Params",
+      },
+      ...headersTab,
+      ...authTab,
+      {
+        value: TAB_SETTINGS,
+        label: "Settings",
+        rightSlot: <CountBadge count={numSettingsOverrides} />,
+      },
+      {
+        value: TAB_DESCRIPTION,
+        label: "Info",
+        rightSlot: hasDescription && <CountBadge count={true} />,
+      },
+    ];
+  }, [authTab, hasDescription, headersTab, numSettingsOverrides, urlParameterPairs.length]);
+
+  const { activeResponse } = usePinnedHttpResponse(activeRequestId);
+  const { mutate: cancelResponse } = useCancelHttpResponse(activeResponse?.id ?? null);
+  const connection = useAtomValue(activeWebsocketConnectionAtom);
+
+  const autocompleteUrls = useAtomValue(requestUrlOptionsAtom);
+
+  const autocomplete: GenericCompletionConfig = useMemo(
+    () => getUrlCompletionConfig(autocompleteUrls),
+    [autocompleteUrls],
+  );
+
+  const handleConnect = useCallback(async () => {
+    await flushAllModelWrites(); // The backend reads the request from the DB
+    await connectWebsocket({
+      requestId: activeRequest.id,
+      environmentId: getActiveEnvironment()?.id ?? null,
+      cookieJarId: getActiveCookieJar()?.id ?? null,
+    });
+  }, [activeRequest.id]);
+
+  const handleSend = useCallback(async () => {
+    if (connection == null) return;
+    await flushAllModelWrites(); // The backend reads the message from the DB
+    await sendWebsocket({
+      connectionId: connection?.id,
+      environmentId: getActiveEnvironment()?.id ?? null,
+    });
+  }, [connection]);
+
+  const handleCancel = useCallback(async () => {
+    if (connection == null) return;
+    await closeWebsocket({ connectionId: connection?.id });
+  }, [connection]);
+
+  const handleUrlChange = useCallback(
+    (url: string) => patchModelDebounced(activeRequest, { url }),
+    [activeRequest],
+  );
+
+  const handlePaste = useCallback(
+    async (e: ClipboardEvent, text: string) => {
+      const patch = prepareImportQuerystring(text);
+      if (patch != null) {
+        e.preventDefault(); // Prevent input onChange
+
+        await patchModel(activeRequest, patch);
+        await setActiveTab({
+          storageKey: TABS_STORAGE_KEY,
+          activeTabKey: activeRequestId,
+          value: TAB_PARAMS,
+        });
+
+        // Wait for request to update, then refresh the UI
+        // TODO: Somehow make this deterministic
+        setTimeout(() => {
+          forceUrlRefresh();
+          forceParamsRefresh();
+        }, 100);
+      }
+    },
+    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh],
+  );
+
+  const messageLanguage = languageFromContentType(null, activeRequest.message);
+
+  const isLoading = connection !== null && connection.state !== "closed";
+
+  return (
+    <div
+      style={style}
+      className={classNames(className, "h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1")}
+    >
+      {activeRequest && (
+        <>
+          <div className="grid grid-cols-[minmax(0,1fr)_auto]">
+            <UrlBar
+              stateKey={`url.${activeRequest.id}`}
+              key={forceUpdateKey + urlKey}
+              url={activeRequest.url}
+              submitIcon={isLoading ? "send_horizontal" : "arrow_up_down"}
+              rightSlot={
+                isLoading && (
+                  <IconButton
+                    size="xs"
+                    title="Close connection"
+                    icon="x"
+                    iconColor="secondary"
+                    className="w-8 mr-0.5 h-full!"
+                    onClick={handleCancel}
+                  />
+                )
+              }
+              placeholder="wss://example.com"
+              onPasteOverwrite={handlePaste}
+              autocomplete={autocomplete}
+              onSend={isLoading ? handleSend : handleConnect}
+              onCancel={cancelResponse}
+              onUrlChange={handleUrlChange}
+              forceUpdateKey={forceUpdateKey}
+              isLoading={activeResponse != null && activeResponse.state !== "closed"}
+            />
+          </div>
+          <Tabs
+            ref={tabsRef}
+            label="Request"
+            tabs={tabs}
+            tabListClassName="mt-1 mb-1.5!"
+            storageKey={TABS_STORAGE_KEY}
+            activeTabKey={activeRequestId}
+          >
+            <TabContent value={TAB_AUTH}>
+              <HttpAuthenticationEditor model={activeRequest} />
+            </TabContent>
+            <TabContent value={TAB_HEADERS}>
+              <HeadersEditor
+                inheritedHeaders={inheritedHeaders}
+                forceUpdateKey={forceUpdateKey}
+                headers={activeRequest.headers}
+                stateKey={`headers.${activeRequest.id}`}
+                onChange={(headers) => patchModelDebounced(activeRequest, { headers })}
+              />
+            </TabContent>
+            <TabContent value={TAB_PARAMS}>
+              <UrlParametersEditor
+                stateKey={`params.${activeRequest.id}`}
+                forceUpdateKey={forceUpdateKey + urlParametersKey}
+                pairs={urlParameterPairs}
+                onChange={(urlParameters) => patchModelDebounced(activeRequest, { urlParameters })}
+              />
+            </TabContent>
+            <TabContent value={TAB_MESSAGE}>
+              <Editor
+                forceUpdateKey={forceUpdateKey}
+                autocompleteFunctions
+                autocompleteVariables
+                placeholder="..."
+                heightMode={fullHeight ? "full" : "auto"}
+                defaultValue={activeRequest.message}
+                language={messageLanguage}
+                onChange={(message) => patchModelDebounced(activeRequest, { message })}
+                stateKey={`json.${activeRequest.id}`}
+              />
+            </TabContent>
+            <TabContent value={TAB_SETTINGS}>
+              <ModelSettingsEditor model={activeRequest} />
+            </TabContent>
+            <TabContent value={TAB_DESCRIPTION}>
+              <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
+                <PlainInput
+                  label="Request Name"
+                  hideLabel
+                  forceUpdateKey={forceUpdateKey}
+                  defaultValue={activeRequest.name}
+                  className="font-sans text-xl! px-0!"
+                  containerClassName="border-0"
+                  placeholder={resolvedModelName(activeRequest)}
+                  onChange={(name) => patchModelDebounced(activeRequest, { name })}
+                />
+                <MarkdownEditor
+                  name="request-description"
+                  placeholder="Request description"
+                  defaultValue={activeRequest.description}
+                  stateKey={`description.${activeRequest.id}`}
+                  forceUpdateKey={forceUpdateKey}
+                  onChange={(description) => patchModelDebounced(activeRequest, { description })}
+                />
+              </div>
+            </TabContent>
+          </Tabs>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/WebsocketResponsePane.tsx b/apps/yaak-client/components/WebsocketResponsePane.tsx
new file mode 100644
index 0000000..42806e4
--- /dev/null
+++ b/apps/yaak-client/components/WebsocketResponsePane.tsx
@@ -0,0 +1,241 @@
+import type { WebsocketEvent, WebsocketRequest } from "@yaakapp-internal/models";
+import { HStack, Icon, LoadingIcon, VStack } from "@yaakapp-internal/ui";
+import { hexy } from "hexy";
+import { useAtomValue } from "jotai";
+import { useMemo, useState } from "react";
+import { useFormatText } from "../hooks/useFormatText";
+import {
+  activeWebsocketConnectionAtom,
+  activeWebsocketConnectionsAtom,
+  setPinnedWebsocketConnectionId,
+  useWebsocketEvents,
+} from "../hooks/usePinnedWebsocketConnection";
+import { useStateWithDeps } from "../hooks/useStateWithDeps";
+import { languageFromContentType } from "../lib/contentType";
+import { Button } from "./core/Button";
+import { Editor } from "./core/Editor/LazyEditor";
+import { type EventDetailAction, EventDetailHeader, EventViewer } from "./core/EventViewer";
+import { EventViewerRow } from "./core/EventViewerRow";
+import { HotkeyList } from "./core/HotkeyList";
+import { WebsocketStatusTag } from "./core/WebsocketStatusTag";
+import { EmptyStateText } from "./EmptyStateText";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { RecentWebsocketConnectionsDropdown } from "./RecentWebsocketConnectionsDropdown";
+
+interface Props {
+  activeRequest: WebsocketRequest;
+}
+
+export function WebsocketResponsePane({ activeRequest }: Props) {
+  const [showLarge, setShowLarge] = useStateWithDeps<boolean>(false, [activeRequest.id]);
+  const [showingLarge, setShowingLarge] = useState<boolean>(false);
+  const [hexDumps, setHexDumps] = useState<Record<number, boolean>>({});
+
+  const activeConnection = useAtomValue(activeWebsocketConnectionAtom);
+  const connections = useAtomValue(activeWebsocketConnectionsAtom);
+  const events = useWebsocketEvents(activeConnection?.id ?? null);
+
+  if (activeConnection == null) {
+    return (
+      <HotkeyList hotkeys={["request.send", "model.create", "sidebar.focus", "url_bar.focus"]} />
+    );
+  }
+
+  const header = (
+    <HStack className="pl-3 mb-1 font-mono text-sm text-text-subtle">
+      <HStack space={2}>
+        {activeConnection.state !== "closed" && (
+          <LoadingIcon size="sm" className="text-text-subtlest" />
+        )}
+        <WebsocketStatusTag connection={activeConnection} />
+        <span>•</span>
+        <span>{events.length} Messages</span>
+      </HStack>
+      <HStack space={0.5} className="ml-auto">
+        <RecentWebsocketConnectionsDropdown
+          connections={connections}
+          activeConnection={activeConnection}
+          onPinnedConnectionId={setPinnedWebsocketConnectionId}
+        />
+      </HStack>
+    </HStack>
+  );
+
+  return (
+    <ErrorBoundary name="Websocket Events">
+      <EventViewer
+        events={events}
+        getEventKey={(event) => event.id}
+        error={activeConnection.error}
+        header={header}
+        splitLayoutStorageKey="websocket_events"
+        defaultRatio={0.4}
+        renderRow={({ event, isActive, onClick }) => (
+          <WebsocketEventRow event={event} isActive={isActive} onClick={onClick} />
+        )}
+        renderDetail={({ event, index, onClose }) => (
+          <WebsocketEventDetail
+            event={event}
+            hexDump={hexDumps[index] ?? event.messageType === "binary"}
+            setHexDump={(v) => setHexDumps({ ...hexDumps, [index]: v })}
+            showLarge={showLarge}
+            showingLarge={showingLarge}
+            setShowLarge={setShowLarge}
+            setShowingLarge={setShowingLarge}
+            onClose={onClose}
+          />
+        )}
+      />
+    </ErrorBoundary>
+  );
+}
+
+function WebsocketEventRow({
+  event,
+  isActive,
+  onClick,
+}: {
+  event: WebsocketEvent;
+  isActive: boolean;
+  onClick: () => void;
+}) {
+  const { message: messageBytes, isServer, messageType } = event;
+  const message = messageBytes
+    ? new TextDecoder("utf-8").decode(Uint8Array.from(messageBytes))
+    : "";
+
+  const iconColor =
+    messageType === "error"
+      ? "warning"
+      : messageType === "close" || messageType === "open"
+        ? "secondary"
+        : isServer
+          ? "info"
+          : "primary";
+
+  const icon =
+    messageType === "error"
+      ? "alert_triangle"
+      : messageType === "close" || messageType === "open"
+      ? "info"
+      : isServer
+        ? "arrow_big_down_dash"
+        : "arrow_big_up_dash";
+
+  const content =
+    messageType === "close" ? (
+      "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>
+    ) : (
+      <span className="text-xs">{message.slice(0, 1000)}</span>
+    );
+
+  return (
+    <EventViewerRow
+      isActive={isActive}
+      onClick={onClick}
+      icon={<Icon color={iconColor} icon={icon} />}
+      content={content}
+      timestamp={event.createdAt}
+    />
+  );
+}
+
+function WebsocketEventDetail({
+  event,
+  hexDump,
+  setHexDump,
+  showLarge,
+  showingLarge,
+  setShowLarge,
+  setShowingLarge,
+  onClose,
+}: {
+  event: WebsocketEvent;
+  hexDump: boolean;
+  setHexDump: (v: boolean) => void;
+  showLarge: boolean;
+  showingLarge: boolean;
+  setShowLarge: (v: boolean) => void;
+  setShowingLarge: (v: boolean) => void;
+  onClose: () => void;
+}) {
+  const message = useMemo(() => {
+    if (hexDump) {
+      return event.message ? hexy(event.message) : "";
+    }
+    return event.message ? new TextDecoder("utf-8").decode(Uint8Array.from(event.message)) : "";
+  }, [event.message, hexDump]);
+
+  const language = languageFromContentType(null, message);
+  const formattedMessage = useFormatText({ language, text: message, pretty: true });
+
+  const title =
+    event.messageType === "close"
+      ? "Connection Closed"
+      : event.messageType === "open"
+        ? "Connection Open"
+        : event.messageType === "error"
+          ? "WebSocket Error"
+          : `Message ${event.isServer ? "Received" : "Sent"}`;
+
+  const actions: EventDetailAction[] =
+    message !== ""
+      ? [
+          {
+            key: "toggle-hexdump",
+            label: hexDump ? "Show Message" : "Show Hexdump",
+            onClick: () => setHexDump(!hexDump),
+          },
+        ]
+      : [];
+
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
+      <EventDetailHeader
+        title={title}
+        timestamp={event.createdAt}
+        actions={actions}
+        copyText={formattedMessage || undefined}
+        onClose={onClose}
+      />
+      {!showLarge && event.message.length > 1000 * 1000 ? (
+        <VStack space={2} className="italic text-text-subtlest">
+          Message previews larger than 1MB are hidden
+          <div>
+            <Button
+              onClick={() => {
+                setShowingLarge(true);
+                setTimeout(() => {
+                  setShowLarge(true);
+                  setShowingLarge(false);
+                }, 500);
+              }}
+              isLoading={showingLarge}
+              color="secondary"
+              variant="border"
+              size="xs"
+            >
+              Try Showing
+            </Button>
+          </div>
+        </VStack>
+      ) : event.message.length === 0 ? (
+        <EmptyStateText>No Content</EmptyStateText>
+      ) : (
+        <Editor
+          language={language}
+          defaultValue={formattedMessage ?? ""}
+          wrapLines={false}
+          readOnly={true}
+          stateKey={null}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/Workspace.tsx b/apps/yaak-client/components/Workspace.tsx
new file mode 100644
index 0000000..1e6d22c
--- /dev/null
+++ b/apps/yaak-client/components/Workspace.tsx
@@ -0,0 +1,227 @@
+import { platform } from "@yaakapp-internal/platform";
+import { settingsAtom, workspacesAtom } from "@yaakapp-internal/models";
+import { Banner, HeaderSize, HStack, SidebarLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import * as m from "motion/react-m";
+import { useMemo, useState } from "react";
+import {
+  getActiveCookieJar,
+  useEnsureActiveCookieJar,
+  useSubscribeActiveCookieJarId,
+} from "../hooks/useActiveCookieJar";
+import {
+  activeEnvironmentAtom,
+  useSubscribeActiveEnvironmentId,
+} from "../hooks/useActiveEnvironment";
+import { activeFolderAtom } from "../hooks/useActiveFolder";
+import { useSubscribeActiveFolderId } from "../hooks/useActiveFolderId";
+import { activeRequestAtom } from "../hooks/useActiveRequest";
+import { useSubscribeActiveRequestId } from "../hooks/useActiveRequestId";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { useFloatingSidebarHidden } from "../hooks/useFloatingSidebarHidden";
+import { useHotKey } from "../hooks/useHotKey";
+import { useSubscribeRecentCookieJars } from "../hooks/useRecentCookieJars";
+import { useSubscribeRecentEnvironments } from "../hooks/useRecentEnvironments";
+import { useSubscribeRecentRequests } from "../hooks/useRecentRequests";
+import { useSubscribeRecentWorkspaces } from "../hooks/useRecentWorkspaces";
+import { useSidebarHidden } from "../hooks/useSidebarHidden";
+import { useSidebarWidth } from "../hooks/useSidebarWidth";
+import { useSyncWorkspaceRequestTitle } from "../hooks/useSyncWorkspaceRequestTitle";
+import { duplicateRequestOrFolderAndNavigate } from "../lib/duplicateRequestOrFolderAndNavigate";
+import { importData } from "../lib/importData";
+import { jotaiStore } from "../lib/jotai";
+import { CreateDropdown } from "./CreateDropdown";
+import { Button } from "./core/Button";
+import { HotkeyList } from "./core/HotkeyList";
+import { CookieDialog } from "./CookieDialog";
+import { FeedbackLink } from "./core/Link";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { FolderLayout } from "./FolderLayout";
+import { GrpcConnectionLayout } from "./GrpcConnectionLayout";
+import { HttpRequestLayout } from "./HttpRequestLayout";
+import { RedirectToLatestWorkspace } from "./RedirectToLatestWorkspace";
+import Sidebar from "./Sidebar";
+import { SidebarActions } from "./SidebarActions";
+import { WebsocketRequestLayout } from "./WebsocketRequestLayout";
+import { WorkspaceHeader } from "./WorkspaceHeader";
+
+const body = { gridArea: "body" };
+
+export function Workspace() {
+  // First, subscribe to some things applicable to workspaces
+  useGlobalWorkspaceHooks();
+
+  const workspaces = useAtomValue(workspacesAtom);
+  const settings = useAtomValue(settingsAtom);
+  const osType = platform.osType();
+  const [width, setWidth] = useSidebarWidth();
+  const [sidebarHidden, setSidebarHidden] = useSidebarHidden();
+  const [floatingSidebarHidden, setFloatingSidebarHidden] = useFloatingSidebarHidden();
+  const activeEnvironment = useAtomValue(activeEnvironmentAtom);
+  const [floating, setFloating] = useState(false);
+
+  const environmentBgStyle = useMemo(() => {
+    if (activeEnvironment?.color == null) return undefined;
+    const background = `linear-gradient(to right, ${activeEnvironment.color} 15%, transparent 40%)`;
+    return { background };
+  }, [activeEnvironment?.color]);
+
+  if (workspaces.length === 0) {
+    return <RedirectToLatestWorkspace />;
+  }
+
+  const header = (
+    <HeaderSize
+      data-tauri-drag-region
+      size="lg"
+      className="relative x-theme-appHeader bg-surface"
+      osType={osType}
+      hideWindowControls={settings.hideWindowControls}
+      useNativeTitlebar={settings.useNativeTitlebar}
+      interfaceScale={settings.interfaceScale}
+    >
+      <div className="absolute inset-0 pointer-events-none">
+        <div style={environmentBgStyle} className="absolute inset-0 opacity-[0.07]" />
+        <div
+          style={environmentBgStyle}
+          className="absolute left-0 right-0 -bottom-px h-px opacity-20"
+        />
+      </div>
+      <WorkspaceHeader className="pointer-events-none" floatingSidebar={floating} />
+    </HeaderSize>
+  );
+
+  const workspaceBody = (
+    <ErrorBoundary name="Workspace Body">
+      <WorkspaceBody />
+    </ErrorBoundary>
+  );
+
+  const sidebarContent = floating ? (
+    <div
+      className={classNames(
+        "x-theme-sidebar",
+        "h-full bg-surface border-r border-border-subtle",
+        "grid grid-rows-[auto_1fr]",
+      )}
+    >
+      <HeaderSize
+        hideControls
+        size="lg"
+        className="border-transparent flex items-center"
+        osType={osType}
+        hideWindowControls={settings.hideWindowControls}
+        useNativeTitlebar={settings.useNativeTitlebar}
+        interfaceScale={settings.interfaceScale}
+      >
+        <SidebarActions floating />
+      </HeaderSize>
+      <ErrorBoundary name="Sidebar (Floating)">
+        <Sidebar />
+      </ErrorBoundary>
+    </div>
+  ) : (
+    <div className="x-theme-sidebar overflow-hidden bg-surface h-full">
+      <ErrorBoundary name="Sidebar">
+        <Sidebar className="border-r border-border-subtle" />
+      </ErrorBoundary>
+    </div>
+  );
+
+  return (
+    <div className="grid w-full h-full grid-rows-[auto_minmax(0,1fr)]">
+      {header}
+      <SidebarLayout
+        width={width ?? 250}
+        onWidthChange={setWidth}
+        hidden={sidebarHidden ?? false}
+        onHiddenChange={(hidden) => setSidebarHidden(hidden)}
+        floatingHidden={floatingSidebarHidden ?? true}
+        onFloatingHiddenChange={(hidden) => setFloatingSidebarHidden(hidden)}
+        onFloatingChange={setFloating}
+        sidebar={sidebarContent}
+      >
+        {workspaceBody}
+      </SidebarLayout>
+    </div>
+  );
+}
+
+function WorkspaceBody() {
+  const activeRequest = useAtomValue(activeRequestAtom);
+  const activeFolder = useAtomValue(activeFolderAtom);
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+
+  if (activeWorkspace == null) {
+    return (
+      <m.div
+        className="m-auto"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        // Delay the entering because the workspaces might load after a slight delay
+        transition={{ delay: 0.5 }}
+      >
+        <Banner color="warning" className="max-w-120">
+          The active workspace was not found. Select a workspace from the header menu or report this
+          bug to <FeedbackLink />
+        </Banner>
+      </m.div>
+    );
+  }
+
+  if (activeRequest?.model === "grpc_request") {
+    return <GrpcConnectionLayout style={body} />;
+  }
+  if (activeRequest?.model === "websocket_request") {
+    return <WebsocketRequestLayout style={body} activeRequest={activeRequest} />;
+  }
+  if (activeRequest?.model === "http_request") {
+    return <HttpRequestLayout activeRequest={activeRequest} style={body} />;
+  }
+  if (activeFolder != null) {
+    return <FolderLayout folder={activeFolder} style={body} />;
+  }
+
+  return (
+    <HotkeyList
+      hotkeys={["model.create", "sidebar.focus", "settings.show"]}
+      bottomSlot={
+        <HStack space={1} justifyContent="center" className="mt-3">
+          <Button variant="border" size="sm" onClick={() => importData.mutate()}>
+            Import
+          </Button>
+          <CreateDropdown hideFolder>
+            <Button variant="border" forDropdown size="sm">
+              New Request
+            </Button>
+          </CreateDropdown>
+        </HStack>
+      }
+    />
+  );
+}
+
+function useGlobalWorkspaceHooks() {
+  useEnsureActiveCookieJar();
+
+  useSubscribeActiveRequestId();
+  useSubscribeActiveFolderId();
+  useSubscribeActiveEnvironmentId();
+  useSubscribeActiveCookieJarId();
+
+  useSubscribeRecentRequests();
+  useSubscribeRecentWorkspaces();
+  useSubscribeRecentEnvironments();
+  useSubscribeRecentCookieJars();
+
+  useSyncWorkspaceRequestTitle();
+
+  useHotKey("model.duplicate", () =>
+    duplicateRequestOrFolderAndNavigate(jotaiStore.get(activeRequestAtom)),
+  );
+
+  useHotKey("cookies_editor.show", () => CookieDialog.show(getActiveCookieJar()?.id ?? null), {
+    enable: () => getActiveCookieJar() != null,
+  });
+}
diff --git a/apps/yaak-client/components/WorkspaceActionsDropdown.tsx b/apps/yaak-client/components/WorkspaceActionsDropdown.tsx
new file mode 100644
index 0000000..1731b74
--- /dev/null
+++ b/apps/yaak-client/components/WorkspaceActionsDropdown.tsx
@@ -0,0 +1,193 @@
+import { getModel, settingsAtom, workspacesAtom } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { memo, useCallback, useMemo } from "react";
+import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
+import { openWorkspaceSettings } from "../commands/openWorkspaceSettings";
+import { switchWorkspace } from "../commands/switchWorkspace";
+import {
+  activeWorkspaceAtom,
+  activeWorkspaceIdAtom,
+  activeWorkspaceMetaAtom,
+} from "../hooks/useActiveWorkspace";
+import { useCreateWorkspace } from "../hooks/useCreateWorkspace";
+import { useDeleteSendHistory } from "../hooks/useDeleteSendHistory";
+import { useWorkspaceActions } from "../hooks/useWorkspaceActions";
+import { showDialog } from "../lib/dialog";
+import { importData } from "../lib/importData";
+import { jotaiStore } from "../lib/jotai";
+import { revealInFinderText } from "../lib/reveal";
+import { CloneGitRepositoryDialog } from "./CloneGitRepositoryDialog";
+import type { ButtonProps } from "./core/Button";
+import { Button } from "./core/Button";
+import type { DropdownItem } from "./core/Dropdown";
+import { Icon } from "@yaakapp-internal/ui";
+import type { RadioDropdownItem } from "./core/RadioDropdown";
+import { RadioDropdown } from "./core/RadioDropdown";
+import { SwitchWorkspaceDialog } from "./SwitchWorkspaceDialog";
+import { platform } from "@yaakapp-internal/platform";
+
+type Props = Pick<ButtonProps, "className" | "justify" | "forDropdown" | "leftSlot">;
+
+export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
+  className,
+  ...buttonProps
+}: Props) {
+  const workspaces = useAtomValue(workspacesAtom);
+  const workspace = useAtomValue(activeWorkspaceAtom);
+  const createWorkspace = useCreateWorkspace();
+  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
+  const { mutate: deleteSendHistory } = useDeleteSendHistory();
+  const workspaceActions = useWorkspaceActions();
+
+  const openCloneGitRepositoryDialog = useCallback(() => {
+    showDialog({
+      id: "clone-git-repository",
+      size: "md",
+      title: "Clone Git Repository",
+      render: ({ hide }) => <CloneGitRepositoryDialog hide={hide} />,
+    });
+  }, []);
+
+  const { workspaceItems, itemsAfter, itemsBefore } = useMemo<{
+    workspaceItems: RadioDropdownItem[];
+    itemsAfter: DropdownItem[];
+    itemsBefore: DropdownItem[];
+  }>(() => {
+    const workspaceItems: RadioDropdownItem[] = workspaces.map((w) => ({
+      key: w.id,
+      label: w.name,
+      value: w.id,
+      leftSlot: w.id === workspace?.id ? <Icon icon="check" /> : <Icon icon="empty" />,
+    }));
+
+    const itemsBefore: DropdownItem[] = [
+      {
+        label: "New Workspace",
+        leftSlot: <Icon icon="plus" />,
+        submenu: [
+          {
+            label: "Create Empty",
+            leftSlot: <Icon icon="plus_circle" />,
+            onSelect: createWorkspace,
+          },
+          {
+            label: "Open Folder",
+            leftSlot: <Icon icon="folder_open" />,
+            onSelect: async () => {
+              const dir = await platform.dialog.open({
+                title: "Select Workspace Directory",
+                directory: true,
+                multiple: false,
+              });
+
+              if (dir == null) return;
+              openWorkspaceFromSyncDir.mutate(dir);
+            },
+          },
+          {
+            label: "Clone Git Repository",
+            leftSlot: <Icon icon="hard_drive_download" />,
+            onSelect: openCloneGitRepositoryDialog,
+          },
+          {
+            label: "Import Data",
+            leftSlot: <Icon icon="folder_input" />,
+            onSelect: () => importData.mutate(),
+          },
+        ],
+      },
+    ];
+    const itemsAfter: DropdownItem[] = [
+      ...workspaceActions.map((a) => ({
+        label: a.label,
+        leftSlot: <Icon icon={a.icon ?? "empty"} />,
+        onSelect: async () => {
+          if (workspace != null) await a.call(workspace);
+        },
+      })),
+      ...(workspaceActions.length > 0 ? [{ type: "separator" as const }] : []),
+      {
+        label: "Workspace Settings",
+        leftSlot: <Icon icon="settings" />,
+        hotKeyAction: "workspace_settings.show",
+        onSelect: openWorkspaceSettings,
+      },
+      {
+        label: revealInFinderText,
+        hidden: workspaceMeta == null || workspaceMeta.settingSyncDir == null,
+        leftSlot: <Icon icon="folder_symlink" />,
+        onSelect: async () => {
+          if (workspaceMeta?.settingSyncDir == null) return;
+          await platform.revealItemInDir(workspaceMeta.settingSyncDir);
+        },
+      },
+      {
+        label: "Clear Send History",
+        color: "warning",
+        leftSlot: <Icon icon="history" />,
+        onSelect: deleteSendHistory,
+      },
+    ];
+
+    return { workspaceItems, itemsAfter, itemsBefore };
+  }, [
+    workspaces,
+    workspaceMeta,
+    deleteSendHistory,
+    createWorkspace,
+    openCloneGitRepositoryDialog,
+    workspace?.id,
+    workspace,
+    workspaceActions.map,
+    workspaceActions.length,
+  ]);
+
+  const handleSwitchWorkspace = useCallback(async (workspaceId: string | null) => {
+    if (workspaceId == null) return;
+
+    const settings = jotaiStore.get(settingsAtom);
+    const activeWorkspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+    if (workspaceId === activeWorkspaceId) {
+      // Always open a new window if the selected one is already active
+      switchWorkspace.mutate({ workspaceId, inNewWindow: true });
+      return;
+    }
+    if (typeof settings.openWorkspaceNewWindow === "boolean") {
+      switchWorkspace.mutate({ workspaceId, inNewWindow: settings.openWorkspaceNewWindow });
+      return;
+    }
+
+    const workspace = getModel("workspace", workspaceId);
+    if (workspace == null) return;
+
+    showDialog({
+      id: "switch-workspace",
+      size: "sm",
+      title: "Switch Workspace",
+      render: ({ hide }) => <SwitchWorkspaceDialog workspace={workspace} hide={hide} />,
+    });
+  }, []);
+
+  return (
+    <RadioDropdown
+      items={workspaceItems}
+      itemsAfter={itemsAfter}
+      itemsBefore={itemsBefore}
+      onChange={handleSwitchWorkspace}
+      value={workspace?.id ?? null}
+    >
+      <Button
+        size="sm"
+        className={classNames(
+          className,
+          "text px-2! truncate",
+          workspace === null && "italic opacity-disabled",
+        )}
+        {...buttonProps}
+      >
+        {workspace?.name ?? "Workspace"}
+      </Button>
+    </RadioDropdown>
+  );
+});
diff --git a/apps/yaak-client/components/WorkspaceEncryptionSetting.tsx b/apps/yaak-client/components/WorkspaceEncryptionSetting.tsx
new file mode 100644
index 0000000..43b88ab
--- /dev/null
+++ b/apps/yaak-client/components/WorkspaceEncryptionSetting.tsx
@@ -0,0 +1,356 @@
+import {
+  disableEncryption,
+  enableEncryption,
+  revealWorkspaceKey,
+  setWorkspaceKey,
+} from "@yaakapp-internal/crypto";
+import type { WorkspaceMeta } from "@yaakapp-internal/models";
+import { Banner, HStack, VStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
+import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from "../hooks/useActiveWorkspace";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { useStateWithDeps } from "../hooks/useStateWithDeps";
+import { showConfirm } from "../lib/confirm";
+import { CopyIconButton } from "./CopyIconButton";
+import type { ButtonProps } from "./core/Button";
+import { Button } from "./core/Button";
+import { IconButton } from "./core/IconButton";
+import { IconTooltip } from "./core/IconTooltip";
+import { Label } from "./core/Label";
+import { PlainInput } from "./core/PlainInput";
+import { SettingRow } from "./core/SettingRow";
+import { EncryptionHelp } from "./EncryptionHelp";
+
+interface Props {
+  layout?: "form" | "settings";
+  size?: ButtonProps["size"];
+  expanded?: boolean;
+  onDone?: () => void;
+  onEnabledEncryption?: () => void;
+}
+
+export function WorkspaceEncryptionSetting({
+  layout = "form",
+  size,
+  expanded,
+  onDone,
+  onEnabledEncryption,
+}: Props) {
+  const [justEnabledEncryption, setJustEnabledEncryption] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const workspace = useAtomValue(activeWorkspaceAtom);
+  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
+  const [key, setKey] = useState<{ key: string | null; error: string | null } | null>(null);
+
+  useEffect(() => {
+    if (workspaceMeta == null) {
+      return;
+    }
+
+    if (workspaceMeta?.encryptionKey == null) {
+      setKey({ key: null, error: null });
+      return;
+    }
+
+    revealWorkspaceKey(workspaceMeta.workspaceId).then(
+      (key) => {
+        setKey({ key, error: null });
+      },
+      (err) => {
+        setKey({ key: null, error: `${err}` });
+      },
+    );
+  }, [workspaceMeta, workspaceMeta?.encryptionKey]);
+
+  if (key == null || workspace == null || workspaceMeta == null) {
+    return null;
+  }
+
+  // Prompt for key if it doesn't exist or could not be decrypted
+  if (
+    key.error != null ||
+    (workspace.encryptionKeyChallenge && workspaceMeta.encryptionKey == null)
+  ) {
+    const enterKey = (
+      <EnterWorkspaceKey
+        workspaceMeta={workspaceMeta}
+        error={key.error}
+        onEnabled={() => {
+          onDone?.();
+          onEnabledEncryption?.();
+        }}
+        onDisabled={() => {
+          onDone?.();
+        }}
+      />
+    );
+
+    return enterKey;
+  }
+
+  // Show the key if it exists
+  if (workspaceMeta.encryptionKey && key.key != null) {
+    const keyRevealer = (
+      <KeyRevealer
+        disableLabel={justEnabledEncryption}
+        defaultShow={justEnabledEncryption}
+        encryptionKey={key.key}
+      />
+    );
+
+    const content = (
+      <VStack space={2} className="w-full">
+        {justEnabledEncryption && (
+          <Banner color="success" className="flex flex-col gap-2">
+            {helpAfterEncryption}
+          </Banner>
+        )}
+        {keyRevealer}
+        {onDone && (
+          <Button
+            color="secondary"
+            onClick={() => {
+              onDone();
+              onEnabledEncryption?.();
+            }}
+          >
+            Done
+          </Button>
+        )}
+      </VStack>
+    );
+
+    return content;
+  }
+
+  // Show button to enable encryption
+  if (layout === "settings") {
+    return (
+      <>
+        {error && (
+          <Banner color="danger" className="mb-3">
+            {error}
+          </Banner>
+        )}
+        <SettingRow
+          title="Workspace encryption"
+          description="Encrypt workspace secrets and sensitive values at rest."
+        >
+          <Button
+            color="secondary"
+            size={size}
+            onClick={async () => {
+              setError(null);
+              try {
+                await enableEncryption(workspaceMeta.workspaceId);
+                setJustEnabledEncryption(true);
+              } catch (err) {
+                setError(`Failed to enable encryption: ${String(err)}`);
+              }
+            }}
+          >
+            Enable Encryption
+          </Button>
+        </SettingRow>
+      </>
+    );
+  }
+
+  return (
+    <div className="mb-auto flex flex-col-reverse">
+      <Button
+        className="mt-3"
+        color={expanded ? "info" : "secondary"}
+        size={size}
+        onClick={async () => {
+          setError(null);
+          try {
+            await enableEncryption(workspaceMeta.workspaceId);
+            setJustEnabledEncryption(true);
+          } catch (err) {
+            setError(`Failed to enable encryption: ${String(err)}`);
+          }
+        }}
+      >
+        Enable Encryption
+      </Button>
+      {error && (
+        <Banner color="danger" className="mb-2">
+          {error}
+        </Banner>
+      )}
+      {expanded ? (
+        <Banner color="info" className="mb-6">
+          <EncryptionHelp />
+        </Banner>
+      ) : (
+        <Label htmlFor={null} help={<EncryptionHelp />}>
+          Workspace encryption
+        </Label>
+      )}
+    </div>
+  );
+}
+
+const setWorkspaceKeyMut = createFastMutation({
+  mutationKey: ["set-workspace-key"],
+  mutationFn: setWorkspaceKey,
+});
+
+function EnterWorkspaceKey({
+  workspaceMeta,
+  onEnabled,
+  onDisabled,
+  error,
+}: {
+  workspaceMeta: WorkspaceMeta;
+  onEnabled?: () => void;
+  onDisabled?: () => void;
+  error?: string | null;
+}) {
+  const [key, setKey] = useState<string>("");
+
+  const handleForgotKey = async () => {
+    const confirmed = await showConfirm({
+      id: "disable-encryption",
+      title: "Disable Encryption",
+      color: "danger",
+      confirmText: "Disable Encryption",
+      description: (
+        <>
+          This will disable encryption for this workspace. Any previously encrypted values will fail
+          to decrypt and will need to be re-entered manually.
+          <br />
+          <br />
+          This action cannot be undone.
+        </>
+      ),
+    });
+
+    if (confirmed) {
+      await disableEncryption(workspaceMeta.workspaceId);
+      onDisabled?.();
+    }
+  };
+
+  return (
+    <VStack space={4} className="w-full">
+      {error ? (
+        <Banner color="danger">{error}</Banner>
+      ) : (
+        <Banner color="info">
+          This workspace contains encrypted values but no key is configured. Please enter the
+          workspace key to access the encrypted data.
+        </Banner>
+      )}
+      <HStack
+        as="form"
+        alignItems="end"
+        className="w-full"
+        space={1.5}
+        onSubmit={(e) => {
+          e.preventDefault();
+          setWorkspaceKeyMut.mutate(
+            {
+              workspaceId: workspaceMeta.workspaceId,
+              key: key.trim(),
+            },
+            { onSuccess: onEnabled },
+          );
+        }}
+      >
+        <PlainInput
+          required
+          onChange={setKey}
+          label="Workspace encryption key"
+          placeholder="YK0000-111111-222222-333333-444444-AAAAAA-BBBBBB-CCCCCC-DDDDDD"
+        />
+        <Button variant="border" type="submit" color="secondary">
+          Submit
+        </Button>
+      </HStack>
+      <button
+        type="button"
+        onClick={handleForgotKey}
+        className="text-text-subtlest text-sm hover:text-text-subtle"
+      >
+        Forgot your key?
+      </button>
+    </VStack>
+  );
+}
+
+function KeyRevealer({
+  defaultShow = false,
+  disableLabel = false,
+  encryptionKey,
+}: {
+  defaultShow?: boolean;
+  disableLabel?: boolean;
+  encryptionKey: string;
+}) {
+  const [show, setShow] = useStateWithDeps<boolean>(defaultShow, [defaultShow]);
+
+  return (
+    <div
+      className={classNames(
+        "w-full border border-border rounded-md pl-3 py-2 p-1",
+        "grid gap-1 grid-cols-[minmax(0,1fr)_auto] items-center",
+      )}
+    >
+      <VStack space={0.5}>
+        {!disableLabel && (
+          <span className="text-sm text-primary flex items-center gap-1">
+            Workspace encryption key{" "}
+            <IconTooltip iconSize="sm" size="lg" content={helpAfterEncryption} />
+          </span>
+        )}
+        {encryptionKey && <HighlightedKey keyText={encryptionKey} show={show} />}
+      </VStack>
+      <HStack>
+        {encryptionKey && <CopyIconButton text={encryptionKey} title="Copy workspace key" />}
+        <IconButton
+          title={show ? "Hide" : "Reveal" + "workspace key"}
+          icon={show ? "eye_closed" : "eye"}
+          onClick={() => setShow((v) => !v)}
+        />
+      </HStack>
+    </div>
+  );
+}
+
+function HighlightedKey({ keyText, show }: { keyText: string; show: boolean }) {
+  return (
+    <span className="text-xs font-mono **:cursor-auto **:select-text">
+      {show ? (
+        keyText.split("").map((c, i) => {
+          return (
+            <span
+              // oxlint-disable-next-line no-array-index-key -- it's fine
+              key={i}
+              className={classNames(
+                c.match(/[0-9]/) && "text-info",
+                c === "-" && "text-text-subtle",
+              )}
+            >
+              {c}
+            </span>
+          );
+        })
+      ) : (
+        <div className="text-text-subtle">•••••••••••••••••••••</div>
+      )}
+    </span>
+  );
+}
+
+const helpAfterEncryption = (
+  <p>
+    The following key is used for encryption operations within this workspace. It is stored securely
+    using your OS keychain, but it is recommended to back it up. If you share this workspace with
+    others, you'll need to send them this key to access any encrypted values.
+  </p>
+);
diff --git a/apps/yaak-client/components/WorkspaceHeader.tsx b/apps/yaak-client/components/WorkspaceHeader.tsx
new file mode 100644
index 0000000..aefe5f4
--- /dev/null
+++ b/apps/yaak-client/components/WorkspaceHeader.tsx
@@ -0,0 +1,94 @@
+import { HStack, Icon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtom, useAtomValue } from "jotai";
+import { memo } from "react";
+import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from "../hooks/useActiveWorkspace";
+import { useToggleCommandPalette } from "../hooks/useToggleCommandPalette";
+import { workspaceLayoutAtom } from "../lib/atoms";
+import { setupOrConfigureEncryption } from "../lib/setupOrConfigureEncryption";
+import { CookieDropdown } from "./CookieDropdown";
+import { IconButton } from "./core/IconButton";
+import { PillButton } from "./core/PillButton";
+import { EnvironmentActionsDropdown } from "./EnvironmentActionsDropdown";
+import { ImportCurl } from "./ImportCurl";
+import { LicenseBadge } from "./LicenseBadge";
+import { RecentRequestsDropdown } from "./RecentRequestsDropdown";
+import { SettingsDropdown } from "./SettingsDropdown";
+import { SidebarActions } from "./SidebarActions";
+import { WorkspaceActionsDropdown } from "./WorkspaceActionsDropdown";
+
+interface Props {
+  className?: string;
+  floatingSidebar?: boolean;
+}
+
+export const WorkspaceHeader = memo(function WorkspaceHeader({
+  className,
+  floatingSidebar,
+}: Props) {
+  const togglePalette = useToggleCommandPalette();
+  const [workspaceLayout, setWorkspaceLayout] = useAtom(workspaceLayoutAtom);
+  const workspace = useAtomValue(activeWorkspaceAtom);
+  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
+  const showEncryptionSetup =
+    workspace != null &&
+    workspaceMeta != null &&
+    workspace.encryptionKeyChallenge != null &&
+    workspaceMeta.encryptionKey == null;
+
+  return (
+    <div
+      className={classNames(
+        className,
+        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center w-full h-full",
+      )}
+    >
+      <HStack space={0.5} className={classNames("flex-1 pointer-events-none")}>
+        <SidebarActions floating={floatingSidebar} />
+        <CookieDropdown />
+        <HStack className="min-w-0">
+          <WorkspaceActionsDropdown />
+          <Icon icon="chevron_right" color="secondary" />
+          <EnvironmentActionsDropdown className="w-auto pointer-events-auto" />
+        </HStack>
+      </HStack>
+      <div className="pointer-events-none w-full max-w-[30vw] mx-auto flex justify-center">
+        <RecentRequestsDropdown />
+      </div>
+      <div className="flex-1 flex gap-1 items-center h-full justify-end pointer-events-none pr-1">
+        <ImportCurl />
+        {showEncryptionSetup ? (
+          <PillButton color="danger" onClick={setupOrConfigureEncryption}>
+            Enter Encryption Key
+          </PillButton>
+        ) : (
+          <LicenseBadge />
+        )}
+        <IconButton
+          icon={
+            workspaceLayout === "responsive"
+              ? "magic_wand"
+              : workspaceLayout === "horizontal"
+                ? "columns_2"
+                : "rows_2"
+          }
+          title={`Change to ${workspaceLayout === "horizontal" ? "vertical" : "horizontal"} layout`}
+          size="sm"
+          iconColor="secondary"
+          onClick={() =>
+            setWorkspaceLayout((prev) => (prev === "horizontal" ? "vertical" : "horizontal"))
+          }
+        />
+        <IconButton
+          icon="search"
+          title="Search or execute a command"
+          size="sm"
+          hotkeyAction="command_palette.toggle"
+          iconColor="secondary"
+          onClick={togglePalette}
+        />
+        <SettingsDropdown />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/yaak-client/components/WorkspaceSettingsDialog.tsx b/apps/yaak-client/components/WorkspaceSettingsDialog.tsx
new file mode 100644
index 0000000..56d98a8
--- /dev/null
+++ b/apps/yaak-client/components/WorkspaceSettingsDialog.tsx
@@ -0,0 +1,191 @@
+import { patchModel, workspaceMetasAtom, workspacesAtom } from "@yaakapp-internal/models";
+import { Banner, HStack, InlineCode } from "@yaakapp-internal/ui";
+import { useAtomValue } from "jotai";
+import { useAuthTab } from "../hooks/useAuthTab";
+import { useHeadersTab } from "../hooks/useHeadersTab";
+import { useInheritedHeaders } from "../hooks/useInheritedHeaders";
+import { deleteModelWithConfirm } from "../lib/deleteModelWithConfirm";
+import { showDialog } from "../lib/dialog";
+import { router } from "../lib/router";
+import { CopyIconButton } from "./CopyIconButton";
+import { Button } from "./core/Button";
+import { CountBadge } from "./core/CountBadge";
+import { PlainInput } from "./core/PlainInput";
+import { SettingsList, SettingsSection } from "./core/SettingRow";
+import { TabContent, Tabs } from "./core/Tabs/Tabs";
+import { DnsOverridesEditor } from "./DnsOverridesEditor";
+import { HeadersEditor } from "./HeadersEditor";
+import { HttpAuthenticationEditor } from "./HttpAuthenticationEditor";
+import { MarkdownEditor } from "./MarkdownEditor";
+import { ModelSettingsEditor } from "./ModelSettingsEditor";
+import { SyncToFilesystemSetting } from "./SyncToFilesystemSetting";
+import { WorkspaceEncryptionSetting } from "./WorkspaceEncryptionSetting";
+
+interface Props {
+  workspaceId: string;
+  hide: () => void;
+  tab?: WorkspaceSettingsTab;
+}
+
+const TAB_AUTH = "auth";
+const TAB_DNS = "dns";
+const TAB_HEADERS = "headers";
+const TAB_GENERAL = "general";
+const TAB_SETTINGS = "settings";
+
+export type WorkspaceSettingsTab =
+  | typeof TAB_AUTH
+  | typeof TAB_DNS
+  | typeof TAB_HEADERS
+  | typeof TAB_GENERAL
+  | typeof TAB_SETTINGS;
+
+const DEFAULT_TAB: WorkspaceSettingsTab = TAB_GENERAL;
+
+export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
+  const workspace = useAtomValue(workspacesAtom).find((w) => w.id === workspaceId);
+  const workspaceMeta = useAtomValue(workspaceMetasAtom).find((m) => m.workspaceId === workspaceId);
+  const authTab = useAuthTab(TAB_AUTH, workspace ?? null);
+  const headersTab = useHeadersTab(TAB_HEADERS, workspace ?? null);
+  const inheritedHeaders = useInheritedHeaders(workspace ?? null);
+
+  if (workspace == null) {
+    return (
+      <Banner color="danger">
+        <InlineCode>Workspace</InlineCode> not found
+      </Banner>
+    );
+  }
+
+  if (workspaceMeta == null)
+    return (
+      <Banner color="danger">
+        <InlineCode>WorkspaceMeta</InlineCode> not found for workspace
+      </Banner>
+    );
+
+  return (
+    <Tabs
+      defaultValue={tab ?? DEFAULT_TAB}
+      label="Folder Settings"
+      className="pt-4 pb-2 px-3"
+      tabListClassName="pl-4"
+      addBorders
+      tabs={[
+        { value: TAB_GENERAL, label: "Workspace" },
+        {
+          value: TAB_SETTINGS,
+          label: "Settings",
+        },
+        ...headersTab,
+        ...authTab,
+        {
+          value: TAB_DNS,
+          label: "DNS",
+          rightSlot:
+            workspace.settingDnsOverrides.length > 0 ? (
+              <CountBadge count={workspace.settingDnsOverrides.length} />
+            ) : null,
+        },
+      ]}
+      storageKey="workspace_settings_tabs"
+    >
+      <TabContent value={TAB_AUTH} className="overflow-y-auto h-full px-4">
+        <HttpAuthenticationEditor model={workspace} />
+      </TabContent>
+      <TabContent value={TAB_HEADERS} className="overflow-y-auto h-full px-4">
+        <HeadersEditor
+          inheritedHeaders={inheritedHeaders}
+          inheritedHeadersLabel="Defaults"
+          forceUpdateKey={workspace.id}
+          headers={workspace.headers}
+          onChange={(headers) => patchModel(workspace, { headers })}
+          stateKey={`headers.${workspace.id}`}
+        />
+      </TabContent>
+      <TabContent value={TAB_SETTINGS} className="overflow-y-auto h-full px-4">
+        <SettingsList className="space-y-8 pb-3">
+          <SettingsSection title={null}>
+            <SyncToFilesystemSetting
+              layout="settings"
+              value={{ filePath: workspaceMeta.settingSyncDir }}
+              onCreateNewWorkspace={hide}
+              onChange={({ filePath }) => patchModel(workspaceMeta, { settingSyncDir: filePath })}
+            />
+            <div className="mt-4">
+              <WorkspaceEncryptionSetting layout="settings" size="xs" />
+            </div>
+          </SettingsSection>
+          <ModelSettingsEditor model={workspace} showSectionTitles />
+        </SettingsList>
+      </TabContent>
+      <TabContent value={TAB_GENERAL} className="overflow-y-auto h-full px-4">
+        <div className="grid grid-rows-[auto_minmax(0,1fr)_auto] gap-4 pb-3 h-full">
+          <PlainInput
+            required
+            hideLabel
+            placeholder="Workspace Name"
+            label="Name"
+            defaultValue={workspace.name}
+            className="text-base! font-sans"
+            onChange={(name) => patchModel(workspace, { name })}
+          />
+
+          <MarkdownEditor
+            name="workspace-description"
+            placeholder="Workspace description"
+            className="border border-border px-2"
+            defaultValue={workspace.description}
+            stateKey={`description.${workspace.id}`}
+            onChange={(description) => patchModel(workspace, { description })}
+            heightMode="auto"
+          />
+
+          <HStack alignItems="center" justifyContent="between" className="w-full">
+            <Button
+              onClick={async () => {
+                const didDelete = await deleteModelWithConfirm(workspace, {
+                  confirmName: workspace.name,
+                });
+                if (didDelete) {
+                  hide(); // Only hide if actually deleted workspace
+                  await router.navigate({ to: "/" });
+                }
+              }}
+              color="danger"
+              variant="border"
+              size="xs"
+            >
+              Delete Workspace
+            </Button>
+            <InlineCode className="flex gap-1 items-center text-primary pl-2.5">
+              {workspaceId}
+              <CopyIconButton
+                className="opacity-70 text-primary!"
+                size="2xs"
+                iconSize="sm"
+                title="Copy workspace ID"
+                text={workspaceId}
+              />
+            </InlineCode>
+          </HStack>
+        </div>
+      </TabContent>
+      <TabContent value={TAB_DNS} className="overflow-y-auto h-full px-4">
+        <DnsOverridesEditor workspace={workspace} />
+      </TabContent>
+    </Tabs>
+  );
+}
+
+WorkspaceSettingsDialog.show = (workspaceId: string, tab?: WorkspaceSettingsTab) => {
+  showDialog({
+    id: "workspace-settings",
+    size: "lg",
+    className: "h-[calc(100vh-5rem)] max-h-200!",
+    noPadding: true,
+    render: ({ hide }) => (
+      <WorkspaceSettingsDialog workspaceId={workspaceId} hide={hide} tab={tab} />
+    ),
+  });
+};
diff --git a/apps/yaak-client/components/core/Alert.tsx b/apps/yaak-client/components/core/Alert.tsx
new file mode 100644
index 0000000..8315e40
--- /dev/null
+++ b/apps/yaak-client/components/core/Alert.tsx
@@ -0,0 +1,21 @@
+import { HStack, VStack } from "@yaakapp-internal/ui";
+import type { ReactNode } from "react";
+import { Button } from "./Button";
+
+export interface AlertProps {
+  onHide: () => void;
+  body: ReactNode;
+}
+
+export function Alert({ onHide, body }: AlertProps) {
+  return (
+    <VStack space={3} className="pb-4">
+      <div>{body}</div>
+      <HStack space={2} justifyContent="end">
+        <Button className="focus" color="primary" onClick={onHide}>
+          Okay
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/core/AutoScroller.tsx b/apps/yaak-client/components/core/AutoScroller.tsx
new file mode 100644
index 0000000..7675b79
--- /dev/null
+++ b/apps/yaak-client/components/core/AutoScroller.tsx
@@ -0,0 +1,118 @@
+import { useVirtualizer, type Virtualizer } from "@tanstack/react-virtual";
+import type { ReactElement, ReactNode, UIEvent } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { IconButton } from "./IconButton";
+
+interface Props<T> {
+  data: T[];
+  render: (item: T, index: number) => ReactElement<HTMLElement>;
+  header?: ReactNode;
+  /** Make container focusable for keyboard navigation */
+  focusable?: boolean;
+  /** Callback to expose the virtualizer for keyboard navigation */
+  onVirtualizerReady?: (virtualizer: Virtualizer<HTMLDivElement, Element>) => void;
+}
+
+export function AutoScroller<T>({
+  data,
+  render,
+  header,
+  focusable = false,
+  onVirtualizerReady,
+}: Props<T>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState<boolean>(true);
+
+  // The virtualizer
+  const rowVirtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => 27, // react-virtual requires a height, so we'll give it one
+  });
+
+  // Expose virtualizer to parent for keyboard navigation
+  useLayoutEffect(() => {
+    onVirtualizerReady?.(rowVirtualizer);
+  }, [rowVirtualizer, onVirtualizerReady]);
+
+  // Scroll to new items
+  const handleScroll = useCallback(
+    (e: UIEvent<HTMLDivElement>) => {
+      const el = e.currentTarget;
+
+      // Set auto-scroll when container is scrolled
+      const pixelsFromBottom = el.scrollHeight - (el.scrollTop + el.clientHeight);
+      const newAutoScroll = pixelsFromBottom <= 0;
+      if (newAutoScroll !== autoScroll) {
+        setAutoScroll(newAutoScroll);
+      }
+    },
+    [autoScroll],
+  );
+
+  // Scroll to bottom on count change
+  useLayoutEffect(() => {
+    if (!autoScroll) return;
+
+    void data.length; // Trigger refresh when length changes
+
+    const el = containerRef.current;
+    if (el == null) return;
+
+    el.scrollTop = el.scrollHeight;
+  }, [autoScroll, data.length]);
+
+  return (
+    <div className="h-full w-full relative grid grid-rows-[auto_minmax(0,1fr)]">
+      {!autoScroll && (
+        <div className="absolute bottom-0 right-0 m-2">
+          <IconButton
+            title="Lock scroll to bottom"
+            icon="arrow_down"
+            size="sm"
+            iconSize="md"
+            variant="border"
+            className="bg-surface! z-10"
+            onClick={() => setAutoScroll((v) => !v)}
+          />
+        </div>
+      )}
+      {header ?? <span aria-hidden />}
+      <div
+        ref={containerRef}
+        className="h-full w-full overflow-y-auto focus:outline-hidden"
+        onScroll={handleScroll}
+        tabIndex={focusable ? 0 : undefined}
+      >
+        <div
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative",
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+            const item = data[virtualItem.index];
+            return (
+              item != null && (
+                <div
+                  key={virtualItem.key}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: `${virtualItem.size}px`,
+                    transform: `translateY(${virtualItem.start}px)`,
+                  }}
+                >
+                  {render(item, virtualItem.index)}
+                </div>
+              )
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/BulkPairEditor.test.ts b/apps/yaak-client/components/core/BulkPairEditor.test.ts
new file mode 100644
index 0000000..b059980
--- /dev/null
+++ b/apps/yaak-client/components/core/BulkPairEditor.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, test } from "vite-plus/test";
+import { parseBulkPairLine } from "./BulkPairEditor";
+
+describe("parseBulkPairLine", () => {
+  test("parses colon-space pairs as name and value", () => {
+    expect(parseBulkPairLine("foo: bar")).toMatchObject({
+      enabled: true,
+      name: "foo",
+      value: "bar",
+    });
+  });
+
+  test("preserves colon-without-space lines as a name with an empty value", () => {
+    expect(parseBulkPairLine("foo:bar")).toMatchObject({
+      enabled: true,
+      name: "foo:bar",
+      value: "",
+    });
+  });
+
+  test("preserves malformed lines instead of dropping their contents", () => {
+    expect(parseBulkPairLine("not a pair")).toMatchObject({
+      enabled: true,
+      name: "not a pair",
+      value: "",
+    });
+  });
+
+  test("unescapes newlines in parsed values", () => {
+    expect(parseBulkPairLine("foo: bar\\nbaz")).toMatchObject({
+      enabled: true,
+      name: "foo",
+      value: "bar\nbaz",
+    });
+  });
+});
diff --git a/apps/yaak-client/components/core/BulkPairEditor.tsx b/apps/yaak-client/components/core/BulkPairEditor.tsx
new file mode 100644
index 0000000..fe3b4bd
--- /dev/null
+++ b/apps/yaak-client/components/core/BulkPairEditor.tsx
@@ -0,0 +1,63 @@
+import { useCallback, useMemo } from "react";
+import { generateId } from "../../lib/generateId";
+import { Editor } from "./Editor/LazyEditor";
+import type { Pair, PairEditorProps, PairWithId } from "./PairEditor";
+
+type Props = PairEditorProps;
+
+export function BulkPairEditor({
+  pairs,
+  onChange,
+  namePlaceholder,
+  valuePlaceholder,
+  forceUpdateKey,
+  forcedEnvironmentId,
+  stateKey,
+}: Props) {
+  const pairsText = useMemo(() => {
+    return pairs
+      .filter((p) => !(p.name.trim() === "" && p.value.trim() === ""))
+      .map(formatBulkPairLine)
+      .join("\n");
+  }, [pairs]);
+
+  const handleChange = useCallback(
+    (text: string) => {
+      const pairs = text
+        .split("\n")
+        .filter((l: string) => l.trim())
+        .map(parseBulkPairLine);
+      onChange(pairs);
+    },
+    [onChange],
+  );
+
+  return (
+    <Editor
+      autocompleteFunctions
+      autocompleteVariables
+      stateKey={`bulk_pair.${stateKey}`}
+      forcedEnvironmentId={forcedEnvironmentId}
+      forceUpdateKey={forceUpdateKey}
+      placeholder={`${namePlaceholder ?? "name"}: ${valuePlaceholder ?? "value"}`}
+      defaultValue={pairsText}
+      language="pairs"
+      onChange={handleChange}
+    />
+  );
+}
+
+export function formatBulkPairLine(pair: Pair) {
+  const value = pair.value.replaceAll("\n", "\\n");
+  return `${pair.name}: ${value}`;
+}
+
+export function parseBulkPairLine(line: string): PairWithId {
+  const [, name, value] = line.match(/^([^:]+):\s+(.*)$/) ?? [];
+  return {
+    enabled: true,
+    name: (name ?? line).trim(),
+    value: (value ?? "").replaceAll("\\n", "\n").trim(),
+    id: generateId(),
+  };
+}
diff --git a/apps/yaak-client/components/core/Button.tsx b/apps/yaak-client/components/core/Button.tsx
new file mode 100644
index 0000000..ec389e3
--- /dev/null
+++ b/apps/yaak-client/components/core/Button.tsx
@@ -0,0 +1,34 @@
+import { Button as BaseButton, type ButtonProps as BaseButtonProps } from "@yaakapp-internal/ui";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import type { HotkeyAction } from "../../hooks/useHotKey";
+import { useFormattedHotkey, useHotKey } from "../../hooks/useHotKey";
+
+export type ButtonProps = BaseButtonProps & {
+  hotkeyAction?: HotkeyAction;
+  hotkeyLabelOnly?: boolean;
+  hotkeyPriority?: number;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { hotkeyAction, hotkeyPriority, hotkeyLabelOnly, title, ...props }: ButtonProps,
+  ref,
+) {
+  const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join("");
+  const fullTitle = hotkeyTrigger ? `${title ?? ""} ${hotkeyTrigger}`.trim() : title;
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    ref,
+    () => buttonRef.current,
+  );
+
+  useHotKey(
+    hotkeyAction ?? null,
+    () => {
+      buttonRef.current?.click();
+    },
+    { priority: hotkeyPriority, enable: !hotkeyLabelOnly },
+  );
+
+  return <BaseButton ref={buttonRef} title={fullTitle} {...props} />;
+});
diff --git a/apps/yaak-client/components/core/ButtonInfiniteLoading.tsx b/apps/yaak-client/components/core/ButtonInfiniteLoading.tsx
new file mode 100644
index 0000000..6ea1130
--- /dev/null
+++ b/apps/yaak-client/components/core/ButtonInfiniteLoading.tsx
@@ -0,0 +1,25 @@
+import { useState } from "react";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
+
+export function ButtonInfiniteLoading({
+  onClick,
+  isLoading,
+  loadingChildren,
+  children,
+  ...props
+}: ButtonProps & { loadingChildren?: string }) {
+  const [localIsLoading, setLocalIsLoading] = useState<boolean>(false);
+  return (
+    <Button
+      isLoading={localIsLoading || isLoading}
+      onClick={(e) => {
+        setLocalIsLoading(true);
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      {localIsLoading ? (loadingChildren ?? children) : children}
+    </Button>
+  );
+}
diff --git a/apps/yaak-client/components/core/Checkbox.tsx b/apps/yaak-client/components/core/Checkbox.tsx
new file mode 100644
index 0000000..92b1942
--- /dev/null
+++ b/apps/yaak-client/components/core/Checkbox.tsx
@@ -0,0 +1,73 @@
+import { HStack, Icon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import { IconTooltip } from "./IconTooltip";
+
+export interface CheckboxProps {
+  checked: boolean | "indeterminate";
+  title: ReactNode;
+  onChange: (checked: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+  inputWrapperClassName?: string;
+  hideLabel?: boolean;
+  fullWidth?: boolean;
+  help?: ReactNode;
+  size?: "sm" | "md";
+}
+
+export function Checkbox({
+  checked,
+  onChange,
+  className,
+  inputWrapperClassName,
+  disabled,
+  title,
+  hideLabel,
+  fullWidth,
+  help,
+  size = "sm",
+}: CheckboxProps) {
+  return (
+    <HStack
+      as="label"
+      alignItems="center"
+      space={2}
+      className={classNames(className, "text-text mr-auto")}
+    >
+      <div className={classNames(inputWrapperClassName, "x-theme-input", "relative flex mr-0.5")}>
+        <input
+          aria-hidden
+          className={classNames(
+            "appearance-none shrink-0 border border-border",
+            size === "sm" && "w-4 h-4",
+            size === "md" && "w-5 h-5",
+            "rounded-sm outline-hidden ring-0",
+            !disabled && "hocus:border-border-focus hocus:bg-focus/[5%]",
+            disabled && "border-dotted",
+          )}
+          type="checkbox"
+          disabled={disabled}
+          onChange={() => {
+            onChange(checked === "indeterminate" ? true : !checked);
+          }}
+        />
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Icon
+            size={size}
+            className={classNames(disabled && "opacity-disabled")}
+            icon={checked === "indeterminate" ? "minus" : checked ? "check" : "empty"}
+          />
+        </div>
+      </div>
+      {!hideLabel && (
+        <div
+          className={classNames("text-sm", fullWidth && "w-full", disabled && "opacity-disabled")}
+        >
+          {title}
+        </div>
+      )}
+      {help && <IconTooltip content={help} />}
+    </HStack>
+  );
+}
diff --git a/apps/yaak-client/components/core/CheckboxTree.tsx b/apps/yaak-client/components/core/CheckboxTree.tsx
new file mode 100644
index 0000000..d6d4423
--- /dev/null
+++ b/apps/yaak-client/components/core/CheckboxTree.tsx
@@ -0,0 +1,114 @@
+import { Icon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import type { CheckboxProps } from "./Checkbox";
+import { Checkbox } from "./Checkbox";
+
+export interface CheckboxTreeNode<T> {
+  key: string;
+  data: T;
+  children: CheckboxTreeNode<T>[];
+}
+
+interface Props<T> {
+  node: CheckboxTreeNode<T>;
+  depth?: number;
+  /** Return "hidden" to render row alignment space instead of a checkbox */
+  checked: (node: CheckboxTreeNode<T>) => CheckboxProps["checked"] | "hidden";
+  onCheck: (node: CheckboxTreeNode<T>, checked: boolean) => void;
+  checkboxTitle?: (node: CheckboxTreeNode<T>) => string;
+  isCheckboxDisabled?: (node: CheckboxTreeNode<T>) => boolean;
+  /** An irrelevant row is hidden unless one of its descendants is relevant */
+  isRelevant: (node: CheckboxTreeNode<T>) => boolean;
+  /** A node that starts collapsed, so a large subtree doesn't crowd out the rest */
+  isCollapsedByDefault?: (node: CheckboxTreeNode<T>) => boolean;
+  renderRow: (node: CheckboxTreeNode<T>) => ReactNode;
+  onSelectRow?: (node: CheckboxTreeNode<T>) => void;
+  canSelectRow?: (node: CheckboxTreeNode<T>) => boolean;
+  isRowSelected?: (node: CheckboxTreeNode<T>) => boolean;
+}
+
+export function CheckboxTree<T>(props: Props<T>) {
+  const { node, depth = 0 } = props;
+  const [collapsed, setCollapsed] = useState<boolean>(
+    () => props.isCollapsedByDefault?.(node) ?? false,
+  );
+  if (!hasRelevantNode(node, props.isRelevant)) return null;
+
+  const checked = props.checked(node);
+  const selected = props.isRowSelected?.(node) ?? false;
+  const selectable = props.onSelectRow != null && (props.canSelectRow?.(node) ?? true);
+  const hasVisibleChildren = node.children.some((c) => hasRelevantNode(c, props.isRelevant));
+  const rowContent = (
+    <div className="flex-1 min-w-0 flex items-center gap-1 px-1 py-0.5 text-left">
+      {props.renderRow(node)}
+    </div>
+  );
+
+  return (
+    <div
+      className={classNames(
+        depth > 0 && "pl-4 ml-2 border-l border-dashed border-border-subtle relative",
+      )}
+    >
+      <div
+        className={classNames(
+          "relative flex gap-1 w-full h-xs items-center",
+          selected ? "text-text" : "text-text-subtle",
+        )}
+      >
+        {selected && (
+          <div className="absolute left-[-100vw] right-0 top-0 bottom-0 bg-surface-active opacity-30 -z-10" />
+        )}
+        {hasVisibleChildren ? (
+          <button
+            type="button"
+            aria-label={collapsed ? "Expand" : "Collapse"}
+            aria-expanded={!collapsed}
+            className="shrink-0 text-text-subtlest hocus:text-text"
+            onClick={() => setCollapsed((v) => !v)}
+          >
+            <Icon size="sm" icon={collapsed ? "chevron_right" : "chevron_down"} />
+          </button>
+        ) : (
+          <span aria-hidden className="w-4 shrink-0" />
+        )}
+        {checked === "hidden" ? (
+          <span aria-hidden className="w-4 mr-0.5 shrink-0" />
+        ) : (
+          <Checkbox
+            checked={checked}
+            title={props.checkboxTitle?.(node) ?? "Toggle"}
+            hideLabel
+            disabled={props.isCheckboxDisabled?.(node)}
+            onChange={(checked) => props.onCheck(node, checked)}
+          />
+        )}
+        {selectable ? (
+          <button
+            type="button"
+            className="flex-1 min-w-0 flex text-left"
+            onClick={() => props.onSelectRow?.(node)}
+          >
+            {rowContent}
+          </button>
+        ) : (
+          rowContent
+        )}
+      </div>
+
+      {!collapsed &&
+        node.children.map((child) => (
+          <CheckboxTree key={child.key} {...props} node={child} depth={depth + 1} />
+        ))}
+    </div>
+  );
+}
+
+function hasRelevantNode<T>(
+  node: CheckboxTreeNode<T>,
+  isRelevant: (node: CheckboxTreeNode<T>) => boolean,
+): boolean {
+  return isRelevant(node) || node.children.some((c) => hasRelevantNode(c, isRelevant));
+}
diff --git a/apps/yaak-client/components/core/ColorPicker.tsx b/apps/yaak-client/components/core/ColorPicker.tsx
new file mode 100644
index 0000000..6b2f217
--- /dev/null
+++ b/apps/yaak-client/components/core/ColorPicker.tsx
@@ -0,0 +1,117 @@
+import classNames from "classnames";
+import { useState } from "react";
+import { HexColorPicker } from "react-colorful";
+import { useRandomKey } from "../../hooks/useRandomKey";
+import { Icon } from "@yaakapp-internal/ui";
+import { PlainInput } from "./PlainInput";
+
+interface Props {
+  onChange: (value: string | null) => void;
+  color: string | null;
+  className?: string;
+}
+
+export function ColorPicker({ onChange, color, className }: Props) {
+  const [updateKey, regenerateKey] = useRandomKey();
+  return (
+    <div className={className}>
+      <HexColorPicker
+        color={color ?? undefined}
+        className="w-full!"
+        onChange={(color) => {
+          onChange(color);
+          regenerateKey(); // To force input to change
+        }}
+      />
+      <PlainInput
+        hideLabel
+        label="Plain Color"
+        forceUpdateKey={updateKey}
+        defaultValue={color ?? ""}
+        onChange={onChange}
+        validate={(color) => color.match(/#[0-9a-fA-F]{6}$/) !== null}
+      />
+    </div>
+  );
+}
+
+const colors = [
+  null,
+  "danger",
+  "warning",
+  "notice",
+  "success",
+  "primary",
+  "info",
+  "secondary",
+  "custom",
+] as const;
+
+export function ColorPickerWithThemeColors({ onChange, color, className }: Props) {
+  const [updateKey, regenerateKey] = useRandomKey();
+  const [selectedColor, setSelectedColor] = useState<string | null>(() => {
+    if (color == null) return null;
+    const c = color?.match(/var$--([a-z]+)$/)?.[1];
+    return c ?? "custom";
+  });
+  return (
+    <div className={classNames(className, "flex flex-col gap-3")}>
+      <div className="flex items-center gap-2.5">
+        {colors.map((color) => (
+          <button
+            type="button"
+            key={color}
+            onClick={() => {
+              setSelectedColor(color);
+              if (color == null) {
+                onChange(null);
+              } else if (color === "custom") {
+                onChange("#ffffff");
+              } else {
+                onChange(`var(--${color})`);
+              }
+            }}
+            className={classNames(
+              "flex items-center justify-center",
+              "w-8 h-8 rounded-full transition-all",
+              selectedColor === color && "scale-[1.15]",
+              selectedColor === color ? "opacity-100" : "opacity-60",
+              color === null && "border border-text-subtle",
+              color === "primary" && "bg-primary",
+              color === "secondary" && "bg-secondary",
+              color === "success" && "bg-success",
+              color === "notice" && "bg-notice",
+              color === "warning" && "bg-warning",
+              color === "danger" && "bg-danger",
+              color === "info" && "bg-info",
+              color === "custom" &&
+                "bg-[conic-gradient(var(--danger),var(--warning),var(--notice),var(--success),var(--info),var(--primary),var(--danger))]",
+            )}
+          >
+            {color == null && <Icon icon="minus" className="text-text-subtle" size="md" />}
+          </button>
+        ))}
+      </div>
+      {selectedColor === "custom" && (
+        <>
+          <HexColorPicker
+            color={color ?? undefined}
+            className="w-full!"
+            onChange={(color) => {
+              onChange(color);
+              regenerateKey(); // To force input to change
+            }}
+          />
+          <PlainInput
+            hideLabel
+            label="Plain Color"
+            forceUpdateKey={updateKey}
+            defaultValue={color ?? ""}
+            onChange={onChange}
+            validate={(color) => color.match(/#[0-9a-fA-F]{6}$/) !== null}
+          />
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/Confirm.tsx b/apps/yaak-client/components/core/Confirm.tsx
new file mode 100644
index 0000000..dac8dc9
--- /dev/null
+++ b/apps/yaak-client/components/core/Confirm.tsx
@@ -0,0 +1,74 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import { HStack } from "@yaakapp-internal/ui";
+import type { FormEvent } from "react";
+import { useState } from "react";
+import { CopyIconButton } from "../CopyIconButton";
+import { Button } from "./Button";
+import { PlainInput } from "./PlainInput";
+
+export interface ConfirmProps {
+  onHide: () => void;
+  onResult: (result: boolean) => void;
+  confirmText?: string;
+  requireTyping?: string;
+  color?: Color;
+}
+
+export function Confirm({
+  onHide,
+  onResult,
+  confirmText,
+  requireTyping,
+  color = "primary",
+}: ConfirmProps) {
+  const [confirm, setConfirm] = useState<string>("");
+  const handleHide = () => {
+    onResult(false);
+    onHide();
+  };
+
+  const didConfirm = !requireTyping || confirm === requireTyping;
+
+  const handleSuccess = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (didConfirm) {
+      onResult(true);
+      onHide();
+    }
+  };
+
+  return (
+    <form className="flex flex-col" onSubmit={handleSuccess}>
+      {requireTyping && (
+        <PlainInput
+          autoFocus
+          onChange={setConfirm}
+          placeholder={requireTyping}
+          labelRightSlot={
+            <CopyIconButton
+              tabIndex={-1}
+              text={requireTyping}
+              title="Copy name"
+              className="text-text-subtlest"
+              iconSize="sm"
+              size="2xs"
+            />
+          }
+          label={
+            <>
+              Type <strong>{requireTyping}</strong> to confirm
+            </>
+          }
+        />
+      )}
+      <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
+        <Button autoFocus={!requireTyping} type="submit" color={color} disabled={!didConfirm}>
+          {confirmText ?? "Confirm"}
+        </Button>
+        <Button onClick={handleHide} variant="border">
+          Cancel
+        </Button>
+      </HStack>
+    </form>
+  );
+}
diff --git a/apps/yaak-client/components/core/CountBadge.tsx b/apps/yaak-client/components/core/CountBadge.tsx
new file mode 100644
index 0000000..5b2fad7
--- /dev/null
+++ b/apps/yaak-client/components/core/CountBadge.tsx
@@ -0,0 +1,48 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import classNames from "classnames";
+
+interface Props {
+  count: number | true;
+  count2?: number | true;
+  className?: string;
+  color?: Color;
+  showZero?: boolean;
+}
+
+export function CountBadge({ count, count2, className, color, showZero }: Props) {
+  if (count === 0 && !showZero) return null;
+
+  return (
+    <div
+      aria-hidden
+      className={classNames(
+        className,
+        "flex items-center",
+        "opacity-70 border text-4xs rounded-sm mb-0.5 px-1 ml-1 h-4 font-mono",
+        color == null && "border-border-subtle",
+        color === "primary" && "text-primary",
+        color === "secondary" && "text-secondary",
+        color === "success" && "text-success",
+        color === "notice" && "text-notice",
+        color === "warning" && "text-warning",
+        color === "danger" && "text-danger",
+      )}
+    >
+      {count === true ? (
+        <div aria-hidden className="rounded-full h-1 w-1 bg-[currentColor]" />
+      ) : (
+        count
+      )}
+      {count2 != null && (
+        <>
+          /
+          {count2 === true ? (
+            <div aria-hidden className="rounded-full h-1 w-1 bg-[currentColor]" />
+          ) : (
+            count2
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/DetailsBanner.tsx b/apps/yaak-client/components/core/DetailsBanner.tsx
new file mode 100644
index 0000000..1cc49f7
--- /dev/null
+++ b/apps/yaak-client/components/core/DetailsBanner.tsx
@@ -0,0 +1,60 @@
+import classNames from "classnames";
+import { atom, useAtom } from "jotai";
+import type { HTMLAttributes, ReactNode } from "react";
+import { useMemo } from "react";
+import { atomWithKVStorage } from "../../lib/atoms/atomWithKVStorage";
+import type { BannerProps } from "@yaakapp-internal/ui";
+import { Banner } from "@yaakapp-internal/ui";
+
+interface Props extends HTMLAttributes<HTMLDetailsElement> {
+  summary: ReactNode;
+  color?: BannerProps["color"];
+  defaultOpen?: boolean;
+  storageKey?: string;
+}
+
+export function DetailsBanner({
+  className,
+  color,
+  summary,
+  children,
+  defaultOpen,
+  storageKey,
+  ...extraProps
+}: Props) {
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- We only want to recompute the atom when storageKey changes
+  const openAtom = useMemo(
+    () =>
+      storageKey
+        ? atomWithKVStorage<boolean>(["details_banner", storageKey], defaultOpen ?? false)
+        : atom(defaultOpen ?? false),
+    [storageKey],
+  );
+
+  const [isOpen, setIsOpen] = useAtom(openAtom);
+
+  const handleToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
+    if (storageKey) {
+      setIsOpen(e.currentTarget.open);
+    }
+  };
+
+  return (
+    <Banner color={color} className={className}>
+      <details className="group list-none" open={isOpen} onToggle={handleToggle} {...extraProps}>
+        <summary className="cursor-default! select-none! list-none flex items-center gap-3 focus:outline-hidden opacity-70">
+          <div
+            className={classNames(
+              "transition-transform",
+              "group-open:rotate-90",
+              "w-0 h-0 border-t-[0.3em] border-b-[0.3em] border-l-[0.5em] border-r-0",
+              "border-t-transparent border-b-transparent border-l-text-subtle",
+            )}
+          />
+          {summary}
+        </summary>
+        <div className="mt-1.5 pb-2">{children}</div>
+      </details>
+    </Banner>
+  );
+}
diff --git a/apps/yaak-client/components/core/Dialog.tsx b/apps/yaak-client/components/core/Dialog.tsx
new file mode 100644
index 0000000..c7962a1
--- /dev/null
+++ b/apps/yaak-client/components/core/Dialog.tsx
@@ -0,0 +1,131 @@
+import type { DialogSize } from "@yaakapp-internal/plugins";
+import { Heading, Overlay } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import * as m from "motion/react-m";
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import { IconButton } from "./IconButton";
+
+export interface DialogProps {
+  children: ReactNode;
+  open: boolean;
+  onClose?: () => void;
+  /** Block dismissal from the backdrop, Escape key, and built-in close button. */
+  disableClose?: boolean;
+  title?: ReactNode;
+  description?: ReactNode;
+  className?: string;
+  size?: DialogSize;
+  /** Hide the built-in close button without changing backdrop or Escape behavior. */
+  hideX?: boolean;
+  noPadding?: boolean;
+  noScroll?: boolean;
+  vAlign?: "top" | "center";
+}
+
+export function Dialog({
+  children,
+  className,
+  size = "full",
+  open,
+  onClose,
+  disableClose,
+  title,
+  description,
+  hideX,
+  noPadding,
+  noScroll,
+  vAlign = "center",
+}: DialogProps) {
+  const titleId = useMemo(() => Math.random().toString(36).slice(2), []);
+  const descriptionId = useMemo(
+    () => (description ? Math.random().toString(36).slice(2) : undefined),
+    [description],
+  );
+
+  return (
+    <Overlay open={open} onClose={disableClose ? undefined : onClose} portalName="dialog">
+      <div
+        role="dialog"
+        className={classNames(
+          "py-4 x-theme-dialog absolute inset-0 pointer-events-none",
+          "h-full flex flex-col items-center justify-center",
+          vAlign === "top" && "justify-start",
+          vAlign === "center" && "justify-center",
+        )}
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+        tabIndex={-1}
+        onKeyDown={(e) => {
+          // NOTE: We handle Escape on the element itself so that it doesn't close multiple
+          //   dialogs and can be intercepted by children if needed.
+          if (e.key === "Escape") {
+            if (!disableClose) onClose?.();
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        }}
+      >
+        <m.div
+          initial={{ top: 5, scale: 0.97 }}
+          animate={{ top: 0, scale: 1 }}
+          className={classNames(
+            className,
+            "grid grid-rows-[auto_auto_minmax(0,1fr)]",
+            "grid-cols-1", // must be here for inline code blocks to correctly break words
+            "relative bg-surface pointer-events-auto",
+            "rounded-lg",
+            "border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]",
+            "min-h-40",
+            "max-w-[calc(100vw-5rem)] max-h-[calc(100vh-5rem)]",
+            size === "sm" && "w-120",
+            size === "md" && "w-200",
+            size === "lg" && "w-280",
+            size === "full" && "w-screen h-screen",
+            size === "dynamic" && "min-w-80 max-w-[100vw]",
+          )}
+        >
+          {title ? (
+            <Heading className="px-6 mt-4 mb-2" level={1} id={titleId}>
+              {title}
+            </Heading>
+          ) : (
+            <span />
+          )}
+
+          {description ? (
+            <div className="min-h-0 px-6 text-text-subtle mb-3" id={descriptionId}>
+              {description}
+            </div>
+          ) : (
+            <span />
+          )}
+
+          <div
+            className={classNames(
+              "h-full w-full grid grid-cols-[minmax(0,1fr)] grid-rows-1",
+              !noPadding && "px-6 py-2",
+              !noScroll && "overflow-y-auto overflow-x-hidden",
+            )}
+          >
+            {children}
+          </div>
+
+          {/*Put close at the end so that it's the last thing to be tabbed to*/}
+          {!disableClose && !hideX && (
+            <div className="ml-auto absolute right-1 top-1">
+              <IconButton
+                className="opacity-70 hover:opacity-100"
+                onClick={onClose}
+                title="Close dialog (Esc)"
+                aria-label="Close"
+                size="sm"
+                icon="x"
+              />
+            </div>
+          )}
+        </m.div>
+      </div>
+    </Overlay>
+  );
+}
diff --git a/apps/yaak-client/components/core/DismissibleBanner.tsx b/apps/yaak-client/components/core/DismissibleBanner.tsx
new file mode 100644
index 0000000..f2d1871
--- /dev/null
+++ b/apps/yaak-client/components/core/DismissibleBanner.tsx
@@ -0,0 +1,111 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import type { BannerProps } from "@yaakapp-internal/ui";
+import { Banner } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { MouseEvent } from "react";
+import { useEffect } from "react";
+import { useKeyValue } from "../../hooks/useKeyValue";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
+
+type DismissibleBannerSize = "sm" | "xs";
+
+export function DismissibleBanner({
+  children,
+  className,
+  id,
+  size = "sm",
+  onDismiss,
+  onShow,
+  actions,
+  ...props
+}: BannerProps & {
+  id: string;
+  size?: DismissibleBannerSize;
+  onDismiss?: () => void | Promise<void>;
+  onShow?: () => void | Promise<void>;
+  actions?: {
+    label: string;
+    onClick: () => void;
+    color?: Color;
+    variant?: ButtonProps["variant"];
+  }[];
+}) {
+  const {
+    isLoading,
+    set: setDismissed,
+    value: dismissed,
+  } = useKeyValue<boolean>({
+    namespace: "global",
+    key: ["dismiss-banner", id],
+    fallback: false,
+  });
+
+  const shouldShow = !isLoading && !dismissed;
+
+  useEffect(() => {
+    if (shouldShow) {
+      Promise.resolve(onShow?.()).catch(console.error);
+    }
+  }, [onShow, shouldShow]);
+
+  if (!shouldShow) return null;
+
+  const actionSize: ButtonProps["size"] = size === "xs" ? "2xs" : "xs";
+  const stopParentClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  return (
+    <Banner
+      className={classNames(
+        className,
+        "relative",
+        size === "xs" && "!px-2 !py-2 text-xs",
+      )}
+      {...props}
+    >
+      <div className="@container">
+        <div
+          className={classNames(
+            "grid @[34rem]:grid-cols-[minmax(0,1fr)_auto] @[34rem]:items-center",
+            size === "xs" ? "gap-1.5 @[34rem]:gap-2" : "gap-2 @[34rem]:gap-3",
+          )}
+        >
+          {children}
+          <div className="flex flex-wrap gap-1.5 @[34rem]:justify-end">
+            <Button
+              variant="border"
+              color={props.color}
+              size={actionSize}
+              onClick={(event) => {
+                stopParentClick(event);
+                setDismissed(true).catch(console.error);
+                Promise.resolve(onDismiss?.()).catch(console.error);
+              }}
+              title="Dismiss message"
+            >
+              Dismiss
+            </Button>
+            {actions?.map((a) => (
+              <Button
+                key={a.label}
+                variant={a.variant ?? "border"}
+                color={a.color ?? props.color}
+                size={actionSize}
+                onClick={(event) => {
+                  stopParentClick(event);
+                  a.onClick();
+                }}
+                title={a.label}
+              >
+                {a.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Banner>
+  );
+}
diff --git a/apps/yaak-client/components/core/Dropdown.tsx b/apps/yaak-client/components/core/Dropdown.tsx
new file mode 100644
index 0000000..8b3b94e
--- /dev/null
+++ b/apps/yaak-client/components/core/Dropdown.tsx
@@ -0,0 +1,1069 @@
+import { HStack, Icon, type IconProps, LoadingIcon, Overlay, VStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { atom } from "jotai";
+import * as m from "motion/react-m";
+import type {
+  CSSProperties,
+  HTMLAttributes,
+  MouseEvent,
+  ReactElement,
+  FocusEvent as ReactFocusEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  ReactNode,
+  RefObject,
+  SetStateAction,
+} from "react";
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useKey, useWindowSize } from "react-use";
+import { useClickOutside } from "../../hooks/useClickOutside";
+import type { HotkeyAction } from "../../hooks/useHotKey";
+import { useHotKey } from "../../hooks/useHotKey";
+import { useStateWithDeps } from "../../hooks/useStateWithDeps";
+import { generateId } from "../../lib/generateId";
+import { getNodeText } from "../../lib/getNodeText";
+import { jotaiStore } from "../../lib/jotai";
+import { fireAndForget } from "../../lib/fireAndForget";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { Button } from "./Button";
+import { Hotkey } from "./Hotkey";
+import { IconButton } from "./IconButton";
+import type { SeparatorAction } from "./Separator";
+import { Separator } from "./Separator";
+
+export type DropdownItemSeparator = {
+  type: "separator";
+  label?: ReactNode;
+  hidden?: boolean;
+  /** A control shown beside the label, eg. revealing the labelled file on disk. */
+  action?: SeparatorAction;
+};
+
+export type DropdownItemContent = {
+  type: "content";
+  label?: ReactNode;
+  hidden?: boolean;
+};
+
+export type DropdownItemDefault = {
+  type?: "default";
+  label: ReactNode;
+  hotKeyAction?: HotkeyAction;
+  hotKeyLabelOnly?: boolean;
+  color?: "default" | "primary" | "danger" | "info" | "warning" | "notice" | "success";
+  disabled?: boolean;
+  hidden?: boolean;
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
+  waitForOnSelect?: boolean;
+  keepOpenOnSelect?: boolean;
+  onSelect?: () => void | Promise<void>;
+  submenu?: DropdownItem[];
+  /** If true, submenu opens on click instead of hover */
+  submenuOpenOnClick?: boolean;
+  /**
+   * How the submenu opens. "row" (default) opens it from the row itself (hover, or click
+   * with submenuOpenOnClick). "button" keeps the row selectable via onSelect and renders
+   * a dedicated button on the right that opens the submenu.
+   */
+  submenuTrigger?: "row" | "button";
+  icon?: IconProps["icon"];
+};
+
+export type DropdownItem = DropdownItemDefault | DropdownItemSeparator | DropdownItemContent;
+
+export interface DropdownProps {
+  children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
+  items: DropdownItem[];
+  fullWidth?: boolean;
+  hotKeyAction?: HotkeyAction;
+  onOpen?: () => void;
+}
+
+export interface DropdownRef {
+  isOpen: boolean;
+  open: (index?: number) => void;
+  toggle: () => void;
+  close?: () => void;
+  next?: (incrBy?: number) => void;
+  prev?: (incrBy?: number) => void;
+  select?: () => void;
+}
+
+// Every dropdown gets a unique ID and we use this global atom to ensure
+// only one dropdown can be open at a time.
+// TODO: Also make ContextMenu use this
+const openAtom = atom<string | null>(null);
+
+export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown(
+  { children, items, hotKeyAction, fullWidth, onOpen }: DropdownProps,
+  ref,
+) {
+  const id = useRef(generateId());
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    return jotaiStore.sub(openAtom, () => {
+      const globalOpenId = jotaiStore.get(openAtom);
+      const newIsOpen = globalOpenId === id.current;
+      if (newIsOpen !== isOpen) {
+        setIsOpen(newIsOpen);
+      }
+    });
+  }, [isOpen]);
+
+  // const [isOpen, _setIsOpen] = useState<boolean>(false);
+  const [defaultSelectedIndex, setDefaultSelectedIndex] = useState<number | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<Omit<DropdownRef, "open">>(null);
+
+  const handleSetIsOpen = useCallback(
+    (o: SetStateAction<boolean>) => {
+      jotaiStore.set(openAtom, (prevId) => {
+        const prevIsOpen = prevId === id.current;
+        const newIsOpen = typeof o === "function" ? o(prevIsOpen) : o;
+        // Persist background color of button until we close the dropdown
+        if (newIsOpen) {
+          onOpen?.();
+          if (buttonRef.current) {
+            buttonRef.current.style.backgroundColor = window
+              .getComputedStyle(buttonRef.current)
+              .getPropertyValue("background-color");
+          }
+        }
+        return newIsOpen ? id.current : null; // Set global atom to current ID to signify open state
+      });
+    },
+    [onOpen],
+  );
+
+  // Because a different dropdown can cause ours to close, a useEffect([isOpen]) is the only method
+  // we have of detecting the dropdown closed, to do cleanup.
+  useEffect(() => {
+    if (!isOpen) {
+      // Clear persisted BG
+      if (buttonRef.current) buttonRef.current.style.backgroundColor = "";
+      // Set to different value when opened and closed to force it to update. This is to force
+      // <Menu/> to reset its selected-index state, which it does when this prop changes
+      setDefaultSelectedIndex(null);
+    }
+  }, [isOpen]);
+
+  // Pull into variable so linter forces us to add it as a hook dep to useImperativeHandle. If we don't,
+  // the ref will not update when menuRef updates, causing stale callback state to be used.
+  const menuRefCurrent = menuRef.current;
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      ...menuRefCurrent,
+      isOpen: isOpen,
+      toggle() {
+        if (!isOpen) this.open();
+        else this.close();
+      },
+      open(index?: number) {
+        handleSetIsOpen(true);
+        setDefaultSelectedIndex(index ?? -1);
+      },
+      close() {
+        handleSetIsOpen(false);
+      },
+    }),
+    [isOpen, handleSetIsOpen, menuRefCurrent],
+  );
+
+  useHotKey(hotKeyAction ?? null, () => {
+    setDefaultSelectedIndex(0);
+    handleSetIsOpen(true);
+  });
+
+  const child = useMemo(() => {
+    const existingChild = Children.only(children);
+    const originalOnClick = existingChild.props?.onClick;
+    const props: HTMLAttributes<HTMLButtonElement> & { ref: RefObject<HTMLButtonElement | null> } =
+      {
+        ...existingChild.props,
+        ref: buttonRef,
+        "aria-haspopup": "true",
+        onClick: (e: MouseEvent<HTMLButtonElement>) => {
+          // Call original onClick first if it exists
+          originalOnClick?.(e);
+
+          // Only toggle dropdown if event wasn't prevented
+          if (!e.defaultPrevented) {
+            e.preventDefault();
+            e.stopPropagation();
+            handleSetIsOpen((o) => !o); // Toggle dropdown
+          }
+        },
+      };
+    return cloneElement(existingChild, props);
+  }, [children, handleSetIsOpen]);
+
+  useEffect(() => {
+    buttonRef.current?.setAttribute("aria-expanded", isOpen.toString());
+  }, [isOpen]);
+
+  const windowSize = useWindowSize();
+  const triggerRect = useMemo(() => {
+    if (!windowSize) return null; // No-op to TS happy with this dep
+    if (!isOpen) return null;
+    return buttonRef.current?.getBoundingClientRect();
+  }, [isOpen, windowSize]);
+
+  return (
+    <>
+      {child}
+      <ErrorBoundary name={"Dropdown Menu"}>
+        <Menu
+          ref={menuRef}
+          showTriangle
+          triggerRef={buttonRef}
+          fullWidth={fullWidth}
+          defaultSelectedIndex={defaultSelectedIndex}
+          items={items}
+          triggerShape={triggerRect ?? null}
+          onClose={() => handleSetIsOpen(false)}
+          isOpen={isOpen}
+        />
+      </ErrorBoundary>
+    </>
+  );
+});
+
+export interface ContextMenuProps {
+  triggerPosition: { x: number; y: number } | null;
+  /**
+   * The box the menu belongs to, when the trigger has one.
+   *
+   * Placement aligns to the trigger's left or right edge depending on the room beside it, so a
+   * menu opened from an element wants its real rect. Without one the position is treated as a
+   * zero-width point, which is right for a menu opened at the cursor and wrong for one opened
+   * from a button.
+   */
+  triggerRect?: Pick<DOMRect, "top" | "bottom" | "left" | "right">;
+  /**
+   * The element the menu belongs to, so a click on it doesn't count as a click outside.
+   *
+   * Without this the trigger gets both: the outside-click handler closes the menu on mousedown,
+   * then the trigger's own click opens it again, and pressing it looks like it does nothing.
+   */
+  triggerRef?: RefObject<HTMLElement | null>;
+  className?: string;
+  items: DropdownProps["items"];
+  onClose: () => void;
+}
+
+export const ContextMenu = forwardRef<DropdownRef, ContextMenuProps>(function ContextMenu(
+  { triggerPosition, triggerRect, triggerRef, className, items, onClose },
+  ref,
+) {
+  const triggerShape = useMemo(
+    () =>
+      triggerRect ?? {
+        top: triggerPosition?.y ?? 0,
+        bottom: triggerPosition?.y ?? 0,
+        left: triggerPosition?.x ?? 0,
+        right: triggerPosition?.x ?? 0,
+      },
+    [triggerPosition, triggerRect],
+  );
+
+  if (triggerPosition == null) return null;
+
+  return (
+    <Menu
+      isOpen={true} // Always open because we return null if not
+      className={className}
+      defaultSelectedIndex={null}
+      // A menu opened from an element points back at it. One opened at the cursor has nothing
+      // to point at, so it goes without.
+      showTriangle={triggerRect != null}
+      ref={ref}
+      items={items}
+      onClose={onClose}
+      triggerRef={triggerRef}
+      triggerShape={triggerShape}
+    />
+  );
+});
+
+interface MenuProps {
+  className?: string;
+  defaultSelectedIndex: number | null;
+  triggerShape: Pick<DOMRect, "top" | "bottom" | "left" | "right"> | null;
+  onClose: () => void;
+  onCloseAll?: () => void;
+  showTriangle?: boolean;
+  fullWidth?: boolean;
+  isOpen: boolean;
+  items: DropdownItem[];
+  // Any element, not just a button: a menu can be opened from anything, and this is only ever
+  // used to ask whether a click landed on the trigger
+  triggerRef?: RefObject<HTMLElement | null>;
+  isSubmenu?: boolean;
+}
+
+const Menu = forwardRef<Omit<DropdownRef, "open" | "isOpen" | "toggle" | "items">, MenuProps>(
+  (
+    {
+      className,
+      isOpen,
+      items,
+      fullWidth,
+      onClose,
+      onCloseAll,
+      triggerShape,
+      defaultSelectedIndex,
+      showTriangle,
+      triggerRef,
+      isSubmenu,
+    }: MenuProps,
+    ref,
+  ) => {
+    const [selectedIndex, setSelectedIndex] = useStateWithDeps<number | null>(
+      defaultSelectedIndex ?? -1,
+      [defaultSelectedIndex],
+    );
+
+    const [filter, setFilter] = useState<string>("");
+
+    // Clear filter when menu opens
+    useEffect(() => {
+      if (isOpen) {
+        setFilter("");
+      }
+    }, [isOpen]);
+
+    const [activeSubmenu, setActiveSubmenu] = useState<{
+      item: DropdownItemDefault;
+      parent: HTMLButtonElement;
+      viaKeyboard?: boolean;
+    } | null>(null);
+
+    const mousePosition = useRef({ x: 0, y: 0 });
+    const submenuTimeoutRef = useRef<number | null>(null);
+    const submenuRef = useRef<HTMLDivElement>(null);
+
+    // HACK: Use a ref to track selectedIndex so our closure functions (eg. select()) can
+    //  have access to the latest value.
+    const selectedIndexRef = useRef(selectedIndex);
+    useEffect(() => {
+      selectedIndexRef.current = selectedIndex;
+    }, [selectedIndex]);
+
+    const handleClose = useCallback(() => {
+      onClose();
+      setActiveSubmenu(null);
+    }, [onClose]);
+
+    // Close the entire menu hierarchy (used when selecting an item)
+    const handleCloseAll = useCallback(() => {
+      if (onCloseAll) {
+        onCloseAll();
+      } else {
+        handleClose();
+      }
+    }, [onCloseAll, handleClose]);
+
+    // Handle type-ahead filtering (only for the deepest open menu)
+    const handleMenuKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
+      // Skip if this menu has a submenu open - let the submenu handle typing
+      if (activeSubmenu) return;
+
+      const isCharacter = e.key.length === 1;
+      const isSpecial = e.ctrlKey || e.metaKey || e.altKey;
+      if (isCharacter && !isSpecial) {
+        e.preventDefault();
+        setFilter((f) => f + e.key);
+        setSelectedIndex(0);
+      } else if (e.key === "Backspace" && !isSpecial) {
+        e.preventDefault();
+        setFilter((f) => f.slice(0, -1));
+      }
+    };
+
+    useKey(
+      "Escape",
+      () => {
+        if (!isOpen) return;
+        if (activeSubmenu) setActiveSubmenu(null);
+        else if (filter !== "") setFilter("");
+        else handleClose();
+      },
+      {},
+      [isOpen, filter, setFilter, handleClose, activeSubmenu],
+    );
+
+    const handlePrev = useCallback(
+      (incrBy = 1) => {
+        setSelectedIndex((currIndex) => {
+          let nextIndex = (currIndex ?? 0) - incrBy;
+          const maxTries = items.length;
+          for (let i = 0; i < maxTries; i++) {
+            if (items[nextIndex]?.hidden || items[nextIndex]?.type === "separator") {
+              nextIndex--;
+            } else if (nextIndex < 0) {
+              nextIndex = items.length - 1;
+            } else {
+              break;
+            }
+          }
+          return nextIndex;
+        });
+      },
+      [items, setSelectedIndex],
+    );
+
+    const handleNext = useCallback(
+      (incrBy = 1) => {
+        setSelectedIndex((currIndex) => {
+          let nextIndex = (currIndex ?? -1) + incrBy;
+          const maxTries = items.length;
+          for (let i = 0; i < maxTries; i++) {
+            if (items[nextIndex]?.hidden || items[nextIndex]?.type === "separator") {
+              nextIndex++;
+            } else if (nextIndex >= items.length) {
+              nextIndex = 0;
+            } else {
+              break;
+            }
+          }
+          return nextIndex;
+        });
+      },
+      [items, setSelectedIndex],
+    );
+
+    // Ensure selection is on a valid item (not hidden/separator/content)
+    useEffect(() => {
+      const item = items[selectedIndex ?? -1];
+      if (item?.hidden || item?.type === "separator" || item?.type === "content") {
+        handleNext();
+      }
+    }, [selectedIndex, items, handleNext]);
+
+    useKey(
+      "ArrowUp",
+      (e) => {
+        if (!isOpen || activeSubmenu) return;
+        e.preventDefault();
+        handlePrev();
+      },
+      {},
+      [isOpen, activeSubmenu],
+    );
+
+    useKey(
+      "ArrowDown",
+      (e) => {
+        if (!isOpen || activeSubmenu) return;
+        e.preventDefault();
+        handleNext();
+      },
+      {},
+      [isOpen, activeSubmenu],
+    );
+
+    useKey(
+      "ArrowLeft",
+      (e) => {
+        if (!isOpen) return;
+        // Only handle if this menu doesn't have an open submenu
+        // (let the deepest submenu handle the key first)
+        if (activeSubmenu) return;
+        // If this is a submenu, ArrowLeft closes it and returns to parent
+        if (isSubmenu) {
+          e.preventDefault();
+          onClose();
+        }
+      },
+      {},
+      [isOpen, isSubmenu, activeSubmenu, onClose],
+    );
+
+    const handleSelect = useCallback(
+      async (item: DropdownItem, parentEl?: HTMLButtonElement) => {
+        // Handle click-to-open submenu
+        if ("submenu" in item && item.submenu && item.submenuOpenOnClick && parentEl) {
+          setActiveSubmenu({ item, parent: parentEl });
+          return;
+        }
+
+        if (!("onSelect" in item) || !item.onSelect) return;
+        setSelectedIndex(null);
+
+        const promise = item.onSelect();
+        if (item.waitForOnSelect) {
+          try {
+            await promise;
+          } catch {
+            // Nothing
+          }
+        }
+
+        if (!item.keepOpenOnSelect) {
+          handleCloseAll();
+        } else if (isSubmenu) {
+          // Keep the parent menu open, but close this submenu — its items may no
+          // longer describe the row after the action (e.g. Pin → Unpin, Remove)
+          handleClose();
+        }
+      },
+      [handleCloseAll, handleClose, isSubmenu, setSelectedIndex],
+    );
+
+    useImperativeHandle(ref, () => {
+      return {
+        close: handleClose,
+        prev: handlePrev,
+        next: handleNext,
+        select: async () => {
+          const item = items[selectedIndexRef.current ?? -1] ?? null;
+          if (!item) return;
+          await handleSelect(item);
+        },
+      };
+    }, [handleClose, handleNext, handlePrev, handleSelect, items]);
+
+    const styles = useMemo<{
+      container: CSSProperties;
+      menu: CSSProperties;
+      triangle: CSSProperties;
+      upsideDown: boolean;
+    }>(() => {
+      if (triggerShape == null) return { container: {}, triangle: {}, menu: {}, upsideDown: false };
+
+      if (isSubmenu) {
+        const parentRect = triggerShape;
+        const docRect = document.documentElement.getBoundingClientRect();
+        const spaceRight = docRect.width - parentRect.right;
+        const spaceBelow = docRect.height - parentRect.top;
+        const spaceAbove = parentRect.bottom;
+        const openLeft = spaceRight < 200; // Heuristic to open on left if not enough space on right
+        // Estimate submenu height (items * ~28px + padding), flip if not enough space below
+        const estimatedHeight = items.length * 28 + 20;
+        const openUpward = spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
+
+        return {
+          upsideDown: openUpward,
+          container: {
+            top: openUpward ? undefined : parentRect.top,
+            bottom: openUpward ? docRect.height - parentRect.bottom : undefined,
+            left: openLeft ? undefined : parentRect.right,
+            right: openLeft ? docRect.width - parentRect.left : undefined,
+          },
+          menu: {
+            maxHeight: `${(openUpward ? spaceAbove : spaceBelow) - 20}px`,
+          },
+          triangle: {}, // No triangle for submenus
+        };
+      }
+
+      const menuMarginY = 5;
+      const docRect = document.documentElement.getBoundingClientRect();
+      const width = triggerShape.right - triggerShape.left;
+      const heightAbove = triggerShape.top;
+      const heightBelow = docRect.height - triggerShape.bottom;
+      const horizontalSpaceRemaining = docRect.width - triggerShape.left;
+      const top = triggerShape.bottom;
+      const onRight = horizontalSpaceRemaining < 300;
+      const upsideDown = heightBelow < heightAbove && heightBelow < items.length * 25 + 20 + 200;
+      const triggerWidth = triggerShape.right - triggerShape.left;
+      return {
+        upsideDown,
+        container: {
+          top: !upsideDown ? top + menuMarginY : undefined,
+          bottom: upsideDown
+            ? docRect.height - top - (triggerShape.top - triggerShape.bottom) + menuMarginY
+            : undefined,
+          right: onRight ? docRect.width - triggerShape.right : undefined,
+          left: !onRight ? triggerShape.left : undefined,
+          minWidth: fullWidth ? triggerWidth : undefined,
+          maxWidth: "40rem",
+        },
+        triangle: {
+          width: "0.4rem",
+          height: "0.4rem",
+          ...(onRight
+            ? { right: width / 2, marginRight: "-0.2rem" }
+            : { left: width / 2, marginLeft: "-0.2rem" }),
+          ...(upsideDown
+            ? { bottom: "-0.2rem", rotate: "225deg" }
+            : { top: "-0.2rem", rotate: "45deg" }),
+        },
+        menu: {
+          maxHeight: `${(upsideDown ? heightAbove : heightBelow) - 15}px`,
+        },
+      };
+    }, [fullWidth, items.length, triggerShape, isSubmenu]);
+
+    const filteredItems = useMemo(
+      () => items.filter((i) => getNodeText(i.label).toLowerCase().includes(filter.toLowerCase())),
+      [items, filter],
+    );
+
+    const handleFocus = useCallback(
+      (i: DropdownItem) => {
+        const index = filteredItems.indexOf(i) ?? null;
+        setSelectedIndex(index);
+      },
+      [filteredItems, setSelectedIndex],
+    );
+
+    useKey(
+      "ArrowRight",
+      (e) => {
+        if (!isOpen || activeSubmenu) return;
+        const item = filteredItems[selectedIndex ?? -1];
+        if (item?.type !== "separator" && item?.type !== "content" && item?.submenu) {
+          e.preventDefault();
+          const parent = document.activeElement as HTMLButtonElement;
+          if (parent) {
+            setActiveSubmenu({ item, parent, viaKeyboard: true });
+          }
+        }
+      },
+      {},
+      [isOpen, activeSubmenu, filteredItems, selectedIndex],
+    );
+
+    useKey(
+      "Enter",
+      (e) => {
+        if (!isOpen || activeSubmenu) return;
+        const item = filteredItems[selectedIndex ?? -1];
+        if (!item || item.type === "separator" || item.type === "content") return;
+        e.preventDefault();
+        if (item.submenu && item.submenuTrigger !== "button") {
+          const parent = document.activeElement as HTMLButtonElement;
+          if (parent) {
+            setActiveSubmenu({ item, parent, viaKeyboard: true });
+          }
+        } else if (item.onSelect) {
+          fireAndForget(handleSelect(item));
+        }
+      },
+      {},
+      [isOpen, activeSubmenu, filteredItems, selectedIndex, handleSelect],
+    );
+
+    const handleItemHover = useCallback(
+      (item: DropdownItemDefault, parent: HTMLButtonElement) => {
+        if (submenuTimeoutRef.current) {
+          clearTimeout(submenuTimeoutRef.current);
+        }
+
+        if (item.submenu && !item.submenuOpenOnClick && item.submenuTrigger !== "button") {
+          setActiveSubmenu({ item, parent });
+        } else if (activeSubmenu && activeSubmenu.item !== item) {
+          // Hovering the row that owns the open submenu must not dismiss it — the
+          // pointer travels across the row on its way to a button-triggered submenu
+          submenuTimeoutRef.current = window.setTimeout(() => {
+            const submenuEl = submenuRef.current;
+            if (!submenuEl || !activeSubmenu) {
+              setActiveSubmenu(null);
+              return;
+            }
+
+            const { parent } = activeSubmenu;
+            const parentRect = parent.getBoundingClientRect();
+            const submenuRect = submenuEl.getBoundingClientRect();
+            const mouse = mousePosition.current;
+
+            if (
+              mouse.x >= submenuRect.left &&
+              mouse.x <= submenuRect.right &&
+              mouse.y >= submenuRect.top &&
+              mouse.y <= submenuRect.bottom
+            ) {
+              return;
+            }
+
+            const tolerance = 5;
+            const p1 = { x: parentRect.right, y: parentRect.top - tolerance };
+            const p2 = { x: parentRect.right, y: parentRect.bottom + tolerance };
+            const p3 = { x: submenuRect.left, y: submenuRect.top - tolerance };
+            const p4 = { x: submenuRect.left, y: submenuRect.bottom + tolerance };
+
+            const inTriangle =
+              isPointInTriangle(mouse, p1, p2, p4) || isPointInTriangle(mouse, p1, p3, p4);
+
+            if (!inTriangle) {
+              setActiveSubmenu(null);
+            }
+          }, 100);
+        }
+      },
+      [activeSubmenu],
+    );
+
+    const menuRef = useRef<HTMLDivElement | null>(null);
+    useClickOutside(menuRef, handleClose, triggerRef);
+
+    // Keep focus on menu container when filtering leaves no items
+    useEffect(() => {
+      if (filteredItems.length === 0 && filter && menuRef.current) {
+        menuRef.current.focus();
+      }
+    }, [filteredItems.length, filter]);
+
+    const submenuTriggerShape = useMemo(() => {
+      if (!activeSubmenu) return null;
+      const rect = activeSubmenu.parent.getBoundingClientRect();
+      return {
+        top: rect.top,
+        bottom: rect.bottom,
+        left: rect.left,
+        right: rect.right,
+      };
+    }, [activeSubmenu]);
+
+    const handleMouseMove = (event: React.MouseEvent) => {
+      mousePosition.current = { x: event.clientX, y: event.clientY };
+    };
+
+    const menuContent = (
+      <m.div
+        ref={menuRef}
+        tabIndex={0}
+        onKeyDown={handleMenuKeyDown}
+        onMouseMove={handleMouseMove}
+        onContextMenu={(e) => {
+          // Prevent showing any ancestor context menus
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+        initial={{ opacity: 0, y: (styles.upsideDown ? 1 : -1) * 5, scale: 0.98 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        role="menu"
+        aria-orientation="vertical"
+        dir="ltr"
+        style={styles.container}
+        className={classNames(
+          className,
+          "x-theme-menu",
+          "outline-hidden my-1 pointer-events-auto z-40",
+          "fixed",
+        )}
+      >
+        {showTriangle && !isSubmenu && (
+          <span
+            aria-hidden
+            style={styles.triangle}
+            className="bg-surface absolute border-border-subtle border-t border-l"
+          />
+        )}
+        <VStack
+          style={styles.menu}
+          className={classNames(
+            className,
+            "h-auto bg-surface rounded-md shadow-lg py-1.5 border",
+            "border-border-subtle overflow-y-auto overflow-x-hidden mx-0.5",
+          )}
+        >
+          {filter && (
+            <HStack
+              space={2}
+              className="pb-0.5 px-1.5 mb-2 text-sm border border-border-subtle mx-2 rounded-sm font-mono h-xs"
+            >
+              <Icon icon="search" size="xs" />
+              <div className="text">{filter}</div>
+            </HStack>
+          )}
+          {filteredItems.length === 0 && (
+            <span className="text-text-subtlest text-center px-2 py-1">No matches</span>
+          )}
+          {filteredItems.map((item, i) => {
+            if (item.hidden) {
+              return null;
+            }
+            if (item.type === "separator") {
+              return (
+                <Separator
+                  // oxlint-disable-next-line no-array-index-key -- Nothing else available
+                  key={i}
+                  className={classNames("my-1.5", item.label ? "ml-2" : null)}
+                  action={item.action}
+                >
+                  {item.label}
+                </Separator>
+              );
+            }
+            if (item.type === "content") {
+              return (
+                // oxlint-disable-next-line no-array-index-key -- index is fine
+                <div key={i} className={classNames("my-1 mx-2 max-w-xs")} onClick={onClose}>
+                  {item.label}
+                </div>
+              );
+            }
+            const isParentOfActiveSubmenu = activeSubmenu?.item === item;
+            return (
+              <MenuItem
+                focused={i === selectedIndex}
+                isParentOfActiveSubmenu={isParentOfActiveSubmenu}
+                onFocus={handleFocus}
+                onSelect={handleSelect}
+                onHover={handleItemHover}
+                onOpenSubmenu={(item, el) => setActiveSubmenu({ item, parent: el })}
+                // oxlint-disable-next-line no-array-index-key -- It's fine
+                key={i}
+                item={item}
+              />
+            );
+          })}
+        </VStack>
+        {activeSubmenu && (
+          <div
+            ref={submenuRef}
+            onMouseEnter={() => {
+              if (submenuTimeoutRef.current) {
+                clearTimeout(submenuTimeoutRef.current);
+              }
+            }}
+          >
+            <Menu
+              isSubmenu
+              isOpen
+              items={activeSubmenu.item.submenu ?? []}
+              defaultSelectedIndex={activeSubmenu.viaKeyboard ? 0 : null}
+              onClose={() => setActiveSubmenu(null)}
+              onCloseAll={handleCloseAll}
+              triggerShape={submenuTriggerShape}
+            />
+          </div>
+        )}
+      </m.div>
+    );
+
+    // Hotkeys must be rendered even when menu is closed (so they work globally)
+    const hotKeyElements = items.map(
+      (item, i) =>
+        item.type !== "separator" &&
+        item.type !== "content" &&
+        !item.hotKeyLabelOnly &&
+        item.hotKeyAction && (
+          <MenuItemHotKey
+            key={`${item.hotKeyAction}::${i}`}
+            onSelect={handleSelect}
+            item={item}
+            action={item.hotKeyAction}
+          />
+        ),
+    );
+
+    if (!isOpen) {
+      return <>{hotKeyElements}</>;
+    }
+
+    if (isSubmenu) {
+      return menuContent;
+    }
+
+    return (
+      <>
+        {hotKeyElements}
+        <Overlay noBackdrop open={isOpen} portalName="dropdown-menu">
+          {menuContent}
+        </Overlay>
+      </>
+    );
+  },
+);
+
+interface MenuItemProps {
+  className?: string;
+  item: DropdownItemDefault;
+  onSelect: (item: DropdownItemDefault, el?: HTMLButtonElement) => Promise<void>;
+  onFocus: (item: DropdownItemDefault) => void;
+  onHover: (item: DropdownItemDefault, el: HTMLButtonElement) => void;
+  onOpenSubmenu: (item: DropdownItemDefault, el: HTMLButtonElement) => void;
+  focused: boolean;
+  isParentOfActiveSubmenu?: boolean;
+}
+
+function MenuItem({
+  className,
+  focused,
+  onFocus,
+  onHover,
+  item,
+  onSelect,
+  onOpenSubmenu,
+  isParentOfActiveSubmenu,
+  ...props
+}: MenuItemProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const handleClick = useCallback(async () => {
+    if (item.waitForOnSelect) setIsLoading(true);
+    await onSelect?.(item, buttonRef.current ?? undefined);
+    if (item.waitForOnSelect) setIsLoading(false);
+  }, [item, onSelect]);
+
+  const handleFocus = useCallback(
+    (e: ReactFocusEvent<HTMLButtonElement>) => {
+      e.stopPropagation(); // Don't trigger focus on any parents
+      return onFocus?.(item);
+    },
+    [item, onFocus],
+  );
+
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const initRef = useCallback(
+    (el: HTMLButtonElement | null) => {
+      buttonRef.current = el;
+      if (el === null) return;
+      if (focused) {
+        setTimeout(() => el.focus(), 0);
+      }
+    },
+    [focused],
+  );
+
+  const handleMouseEnter = (e: MouseEvent<HTMLButtonElement>) => {
+    onHover(item, e.currentTarget);
+    e.currentTarget.focus();
+  };
+
+  const hasButtonSubmenu = item.submenu != null && item.submenuTrigger === "button";
+
+  const rightSlot =
+    item.submenu && !hasButtonSubmenu ? (
+      <Icon icon="chevron_right" color="secondary" />
+    ) : (
+      (item.rightSlot ?? <Hotkey variant="text" action={item.hotKeyAction ?? null} />)
+    );
+
+  const button = (
+    <Button
+      ref={initRef}
+      size="sm"
+      tabIndex={-1}
+      onMouseEnter={hasButtonSubmenu ? undefined : handleMouseEnter}
+      onMouseLeave={hasButtonSubmenu ? undefined : (e) => e.currentTarget.blur()}
+      disabled={item.disabled}
+      onFocus={handleFocus}
+      onClick={handleClick}
+      justify="start"
+      leftSlot={
+        (isLoading || item.leftSlot || item.icon) && (
+          <div className={classNames("pr-2 flex justify-start [&_svg]:opacity-70")}>
+            {isLoading ? <LoadingIcon /> : item.icon ? <Icon icon={item.icon} /> : item.leftSlot}
+          </div>
+        )
+      }
+      rightSlot={rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
+      innerClassName="text-left!"
+      color="custom"
+      className={classNames(
+        className,
+        "h-xs", // More compact
+        "min-w-32 outline-hidden px-2 mx-1.5 flex whitespace-nowrap",
+        "focus:bg-surface-highlight focus:text rounded-sm focus:outline-hidden focus-visible:outline-1",
+        isParentOfActiveSubmenu && "bg-surface-highlight text rounded-sm",
+        hasButtonSubmenu && "pr-8",
+        item.color === "danger" && "text-danger!",
+        item.color === "primary" && "text-primary!",
+        item.color === "success" && "text-success!",
+        item.color === "warning" && "text-warning!",
+        item.color === "notice" && "text-notice!",
+        item.color === "info" && "text-info!",
+      )}
+      {...props}
+    >
+      <div className={classNames("truncate min-w-20")}>{item.label}</div>
+    </Button>
+  );
+
+  if (!hasButtonSubmenu) {
+    return button;
+  }
+
+  // The submenu trigger overlays the row as a sibling (not a child) because the row is
+  // itself a button and buttons cannot nest. Hover handling lives on this wrapper so the
+  // row keeps its focus highlight while the mouse is over the trigger.
+  return (
+    <div
+      className="relative grid group/menuitem"
+      onMouseEnter={() => {
+        const el = buttonRef.current;
+        if (el == null) return;
+        onHover(item, el);
+        el.focus();
+      }}
+      onMouseLeave={() => buttonRef.current?.blur()}
+    >
+      {button}
+      <div
+        className={classNames(
+          "absolute right-1.5 inset-y-0 flex items-center",
+          "opacity-0 group-hover/menuitem:opacity-100 group-focus-within/menuitem:opacity-100",
+        )}
+      >
+        <IconButton
+          color="custom"
+          size="2xs"
+          tabIndex={-1}
+          icon="ellipsis_vertical"
+          iconColor="secondary"
+          title="More actions"
+          className="h-full! w-7!"
+          onMouseDown={(e) => {
+            // Prevent the trigger from stealing focus, which would unhighlight the row
+            e.preventDefault();
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onOpenSubmenu(item, e.currentTarget);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+interface MenuItemHotKeyProps {
+  action: HotkeyAction | undefined;
+  onSelect: MenuItemProps["onSelect"];
+  item: MenuItemProps["item"];
+}
+
+function MenuItemHotKey({ action, onSelect, item }: MenuItemHotKeyProps) {
+  useHotKey(action ?? null, () => onSelect(item));
+  return null;
+}
+
+function sign(
+  p1: { x: number; y: number },
+  p2: { x: number; y: number },
+  p3: { x: number; y: number },
+) {
+  return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
+}
+
+function isPointInTriangle(
+  pt: { x: number; y: number },
+  v1: { x: number; y: number },
+  v2: { x: number; y: number },
+  v3: { x: number; y: number },
+) {
+  const d1 = sign(pt, v1, v2);
+  const d2 = sign(pt, v2, v3);
+  const d3 = sign(pt, v3, v1);
+
+  const has_neg = d1 < 0 || d2 < 0 || d3 < 0;
+  const has_pos = d1 > 0 || d2 > 0 || d3 > 0;
+
+  return !(has_neg && has_pos);
+}
diff --git a/apps/yaak-client/components/core/Editor/BetterMatchDecorator.ts b/apps/yaak-client/components/core/Editor/BetterMatchDecorator.ts
new file mode 100644
index 0000000..ff9ac07
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/BetterMatchDecorator.ts
@@ -0,0 +1,13 @@
+import { type DecorationSet, MatchDecorator, type ViewUpdate } from "@codemirror/view";
+
+/**
+ * This is a custom MatchDecorator that will not decorate a match if the selection is inside it
+ */
+export class BetterMatchDecorator extends MatchDecorator {
+  updateDeco(update: ViewUpdate, deco: DecorationSet): DecorationSet {
+    if (!update.startState.selection.eq(update.state.selection)) {
+      return super.createDeco(update.view);
+    }
+    return super.updateDeco(update, deco);
+  }
+}
diff --git a/apps/yaak-client/components/core/Editor/DiffViewer.css b/apps/yaak-client/components/core/Editor/DiffViewer.css
new file mode 100644
index 0000000..6e48545
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/DiffViewer.css
@@ -0,0 +1,41 @@
+@reference "../../../main.css";
+
+.cm-wrapper.cm-multiline .cm-mergeView {
+  @apply h-full w-full overflow-auto pr-0.5;
+
+  .cm-mergeViewEditors {
+    @apply w-full min-h-full;
+  }
+
+  .cm-mergeViewEditor {
+    @apply w-full min-h-full relative;
+
+    .cm-collapsedLines {
+      @apply bg-none bg-surface border border-border py-1 mx-0.5 text-text opacity-80 hover:opacity-100 rounded-sm cursor-default;
+    }
+  }
+
+  .cm-line {
+    @apply pl-1.5;
+  }
+  .cm-changedLine {
+    /* Round top corners only if previous line is not a changed line */
+    &:not(.cm-changedLine + &) {
+      @apply rounded-t-sm;
+    }
+    /* Round bottom corners only if next line is not a changed line */
+    &:not(:has(+ .cm-changedLine)) {
+      @apply rounded-b-sm;
+    }
+  }
+
+  /* Let content grow and disable individual scrolling for sync */
+  .cm-editor {
+    @apply h-auto! relative!;
+    position: relative !important;
+  }
+
+  .cm-scroller {
+    @apply overflow-visible!;
+  }
+}
diff --git a/apps/yaak-client/components/core/Editor/DiffViewer.tsx b/apps/yaak-client/components/core/Editor/DiffViewer.tsx
new file mode 100644
index 0000000..f36f28e
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/DiffViewer.tsx
@@ -0,0 +1,64 @@
+import { yaml } from "@codemirror/lang-yaml";
+import { syntaxHighlighting } from "@codemirror/language";
+import { MergeView } from "@codemirror/merge";
+import { EditorView } from "@codemirror/view";
+import classNames from "classnames";
+import { useEffect, useRef } from "react";
+import "./DiffViewer.css";
+import { readonlyExtensions, syntaxHighlightStyle } from "./extensions";
+
+interface Props {
+  /** Original/previous version (left side) */
+  original: string;
+  /** Modified/current version (right side) */
+  modified: string;
+  className?: string;
+}
+
+export function DiffViewer({ original, modified, className }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<MergeView | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Clean up previous instance
+    viewRef.current?.destroy();
+
+    const sharedExtensions = [
+      yaml(),
+      syntaxHighlighting(syntaxHighlightStyle),
+      ...readonlyExtensions,
+      EditorView.lineWrapping,
+    ];
+
+    viewRef.current = new MergeView({
+      a: {
+        doc: original,
+        extensions: sharedExtensions,
+      },
+      b: {
+        doc: modified,
+        extensions: sharedExtensions,
+      },
+      parent: containerRef.current,
+      collapseUnchanged: { margin: 2, minSize: 3 },
+      highlightChanges: false,
+      gutter: true,
+      orientation: "a-b",
+      revertControls: undefined,
+    });
+
+    return () => {
+      viewRef.current?.destroy();
+      viewRef.current = null;
+    };
+  }, [original, modified]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames("cm-wrapper cm-multiline h-full w-full", className)}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/core/Editor/Editor.css b/apps/yaak-client/components/core/Editor/Editor.css
new file mode 100644
index 0000000..bc473ab
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/Editor.css
@@ -0,0 +1,515 @@
+@reference "../../../main.css";
+
+.cm-wrapper {
+  @apply h-full overflow-hidden;
+
+  .cm-editor {
+    @apply w-full block text-base;
+
+    /* Regular cursor */
+
+    .cm-cursor {
+      @apply border-text!;
+      /* Widen the cursor a bit */
+      @apply border-l-[2px];
+    }
+
+    /* Vim-mode cursor */
+
+    .cm-fat-cursor {
+      @apply outline-0! bg-text!;
+      @apply text-surface!;
+    }
+
+    /* Matching bracket */
+
+    .cm-matchingBracket {
+      @apply bg-transparent border-b border-b-text-subtle;
+    }
+
+    &:not(.cm-focused) {
+      .cm-cursor,
+      .cm-fat-cursor {
+        @apply hidden;
+      }
+    }
+
+    &.cm-focused {
+      outline: none !important;
+    }
+
+    .cm-content {
+      @apply py-0;
+    }
+
+    .cm-line {
+      @apply w-full;
+      /* Important! Ensure it spans the entire width */
+      @apply w-full text-text px-0;
+
+      /* So the search highlight border is not cut off by editor view */
+      @apply pl-[1px];
+    }
+
+    .cm-placeholder {
+      @apply text-placeholder;
+    }
+
+    .cm-scroller {
+      /* Inherit line-height from outside */
+      line-height: inherit;
+
+      * {
+        @apply cursor-text;
+        @apply caret-transparent!;
+      }
+    }
+
+    .cm-selectionBackground {
+      @apply bg-selection!;
+    }
+
+    /* Fix WebKit/WKWebView rendering bug where selection layer leaves a ghost
+       residual line below wrapped lines after deselecting (CodeMirror issue #1600, #1627).
+       The layer div must be hidden when empty to force a repaint. */
+    .cm-selectionLayer:empty {
+      display: none;
+    }
+
+    /* Style gutters */
+
+    .cm-gutters {
+      @apply border-0 text-text-subtlest bg-surface pr-1.5;
+      /* Not sure why, but there's a tiny gap left of the gutter that you can see text
+         through. Move left slightly to fix that. */
+      @apply -left-[1px];
+
+      .cm-gutterElement {
+        @apply cursor-default;
+      }
+    }
+
+    .cm-gutter-lint {
+      @apply w-auto!;
+
+      .cm-gutterElement {
+        @apply px-0;
+      }
+
+      .cm-lint-marker {
+        @apply cursor-default opacity-80 hover:opacity-100 transition-opacity;
+        @apply rounded-full w-[0.9em] h-[0.9em];
+
+        content: "";
+
+        &.cm-lint-marker-error {
+          @apply bg-danger;
+        }
+      }
+    }
+
+    .template-tag {
+      /* Colors */
+      @apply bg-surface text-text-subtle border-border-subtle whitespace-nowrap cursor-default;
+      @apply hover:border-border hover:text-text hover:bg-surface-highlight;
+
+      @apply inline border px-1 mx-[0.5px] rounded-sm dark:shadow;
+
+      -webkit-text-security: none;
+
+      * {
+        @apply cursor-default;
+      }
+
+      /* The chevron on a tag that opens a menu. The tag itself is the button, so this is
+         only the affordance that says so. */
+      .tag-action {
+        @apply inline-flex items-center align-middle ml-1;
+        @apply text-text-subtlest;
+
+        svg {
+          @apply w-[0.9em] h-[0.9em];
+        }
+      }
+
+      /* A preview of the value a tag stands for. Sized before the image loads, so arriving
+         never changes the line's height. */
+      .tag-thumbnail {
+        @apply inline-block align-middle mr-1 rounded-xs;
+        @apply w-[1.1em] h-[1.1em] object-cover bg-surface-highlight;
+      }
+
+      .fn {
+        @apply inline-block;
+        .fn-inner {
+          @apply text-text-subtle max-w-[40em] italic inline-flex items-end whitespace-pre text-[0.9em];
+        }
+        .fn-arg-name {
+          /* Nothing yet */
+          @apply opacity-60;
+        }
+        .fn-arg-value {
+          @apply inline-block truncate;
+        }
+        .fn-bracket {
+          @apply text-text-subtle opacity-30;
+        }
+      }
+    }
+
+    .hyperlink-widget {
+      & > * {
+        @apply underline;
+      }
+
+      &:hover > * {
+        @apply text-primary;
+      }
+
+      -webkit-text-security: none;
+    }
+  }
+
+  &.cm-singleline {
+    .cm-editor {
+      @apply w-full h-full;
+    }
+
+    .cm-scroller {
+      @apply font-mono text-xs;
+
+      /* Hide scrollbars */
+
+      &::-webkit-scrollbar-corner,
+      &::-webkit-scrollbar {
+        @apply hidden!;
+      }
+    }
+  }
+
+  &.cm-multiline {
+    &.cm-full-height {
+      @apply relative;
+
+      .cm-editor {
+        @apply inset-0 absolute;
+        position: absolute !important;
+      }
+    }
+
+    .cm-editor {
+      @apply h-full;
+    }
+
+    .cm-scroller {
+      @apply font-mono text-editor;
+    }
+  }
+}
+
+/* Style search matches */
+.cm-searchMatch {
+  @apply bg-transparent!;
+  @apply rounded-[2px] outline outline-1;
+
+  &.cm-searchMatch-selected {
+    @apply outline-text;
+    @apply bg-text!;
+
+    &,
+    * {
+      @apply text-surface! font-semibold!;
+    }
+  }
+}
+
+/* Obscure text for password fields */
+.cm-wrapper.cm-obscure-text .cm-line {
+  -webkit-text-security: disc;
+}
+
+/* Obscure text for password fields */
+.cm-wrapper.cm-obscure-text .cm-line {
+  -webkit-text-security: disc;
+
+  .cm-placeholder {
+    -webkit-text-security: none;
+  }
+}
+
+.cm-editor .cm-gutterElement {
+  @apply flex items-center;
+  transition: color var(--transition-duration);
+}
+
+.cm-editor .fold-gutter-icon {
+  @apply pt-[0.25em] pl-[0.4em] px-[0.4em] h-4 rounded-sm;
+  @apply cursor-default!;
+}
+
+.cm-editor .fold-gutter-icon::after {
+  @apply block w-1.5 h-1.5 p-0.5 border-transparent border-l border-b border-l-[currentColor] border-b-[currentColor] content-[''];
+}
+
+/* Rotate the fold gutter chevron when open */
+.cm-editor .fold-gutter-icon[data-open]::after {
+  @apply rotate-[-45deg];
+}
+
+/* Adjust fold gutter icon position after rotation */
+.cm-editor .fold-gutter-icon:not([data-open])::after {
+  @apply relative -left-[0.1em] top-[0.1em] rotate-[-135deg];
+}
+
+.cm-editor .fold-gutter-icon:hover {
+  @apply text-text bg-surface-highlight;
+}
+
+.cm-editor .cm-foldPlaceholder {
+  @apply px-2 border border-border-subtle bg-surface-highlight;
+  @apply hover:text-text hover:border-border-subtle text-text;
+  @apply cursor-default!;
+}
+
+.cm-editor .cm-activeLineGutter {
+  @apply bg-transparent text-text-subtle;
+}
+
+/* Cursor and mouse cursor for readonly mode */
+.cm-wrapper.cm-readonly {
+  &.cm-singleline * {
+    @apply cursor-default;
+  }
+}
+
+.cm-singleline .cm-editor {
+  .cm-content {
+    @apply h-full flex items-center;
+
+    /* Break characters on line wrapping mode, useful for URL field.
+                 * We can make this dynamic if we need it to be configurable later
+                 */
+
+    &.cm-lineWrapping {
+      @apply break-all;
+    }
+  }
+}
+
+.cm-tooltip-lint {
+  @apply font-mono! text-editor! rounded-sm! overflow-hidden! bg-surface-highlight! border! border-border! shadow!;
+
+  .cm-diagnostic-error {
+    @apply border-l-danger px-4 py-2;
+  }
+}
+
+.cm-lintPoint {
+  &.cm-lintPoint-error {
+    &::after {
+      @apply border-b-danger;
+    }
+  }
+}
+
+.cm-tooltip.cm-tooltip-hover {
+  @apply shadow-lg bg-surface rounded-sm text-text-subtle border border-border-subtle z-50 pointer-events-auto text-sm;
+  @apply p-1.5;
+
+  /* Style the tooltip for popping up "open in browser" and other stuff */
+
+  a,
+  button {
+    @apply text-text hover:bg-surface-highlight w-full h-sm flex items-center px-2 rounded-sm;
+  }
+
+  a {
+    @apply cursor-default!;
+
+    &::after {
+      @apply text-text bg-text h-3 w-3 ml-1;
+      content: "";
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
+      -webkit-mask-size: contain;
+      display: inline-block;
+    }
+  }
+}
+
+/* NOTE: Extra selector required to override default styles */
+.cm-tooltip.cm-tooltip-autocomplete,
+.cm-tooltip.cm-completionInfo {
+  @apply shadow-lg bg-surface rounded-sm text-text-subtle border border-border-subtle z-50 pointer-events-auto;
+
+  & * {
+    @apply font-mono! text-editor!;
+  }
+
+  .cm-completionIcon {
+    @apply opacity-80 italic;
+
+    &::after {
+      content: "a" !important; /* Default (eg. for GraphQL) */
+    }
+
+    &.cm-completionIcon-function::after {
+      content: "f" !important;
+      @apply text-info;
+    }
+
+    &.cm-completionIcon-variable::after {
+      content: "x" !important;
+      @apply text-primary;
+    }
+
+    &.cm-completionIcon-namespace::after {
+      content: "n" !important;
+      @apply text-warning;
+    }
+
+    &.cm-completionIcon-constant::after {
+      content: "c" !important;
+      @apply text-notice;
+    }
+
+    &.cm-completionIcon-class::after {
+      content: "o" !important;
+    }
+
+    &.cm-completionIcon-enum::after {
+      content: "e" !important;
+    }
+
+    &.cm-completionIcon-interface::after {
+      content: "i" !important;
+    }
+
+    &.cm-completionIcon-keyword::after {
+      content: "k" !important;
+    }
+
+    &.cm-completionIcon-method::after {
+      content: "m" !important;
+    }
+
+    &.cm-completionIcon-property::after {
+      content: "a" !important;
+    }
+
+    &.cm-completionIcon-text::after {
+      content: "t" !important;
+    }
+
+    &.cm-completionIcon-type::after {
+      content: "t" !important;
+    }
+  }
+
+  &.cm-completionInfo {
+    @apply mx-0.5 -mt-0.5 font-sans;
+  }
+
+  * {
+    @apply transition-none;
+  }
+
+  &.cm-tooltip-autocomplete {
+    @apply font-mono;
+
+    & > ul {
+      @apply p-1 max-h-[40vh];
+    }
+
+    & > ul > li {
+      @apply cursor-default px-2 h-[2em] rounded-sm text-text flex items-center;
+    }
+
+    & > ul > li[aria-selected] {
+      @apply bg-surface-highlight text-text;
+    }
+
+    .cm-completionIcon {
+      @apply text-sm flex items-center pb-0.5 shrink-0;
+    }
+
+    .cm-completionLabel {
+      @apply text-text;
+    }
+
+    .cm-completionDetail {
+      @apply ml-auto pl-6 text-text-subtle;
+    }
+  }
+}
+
+.cm-editor .cm-panels {
+  @apply bg-surface-highlight backdrop-blur-sm p-1 mb-1 text-text z-20 rounded-md;
+
+  input,
+  button {
+    @apply rounded-sm outline-hidden;
+  }
+
+  button {
+    @apply border-border-subtle bg-surface-highlight text-text hover:border-info;
+    @apply appearance-none bg-none cursor-default;
+  }
+
+  button[name="close"] {
+    @apply text-text-subtle! hocus:text-text! px-2! -mr-1.5!;
+  }
+
+  input {
+    @apply bg-surface border-border-subtle focus:border-border-focus;
+    @apply border outline-hidden;
+  }
+
+  input.cm-textfield {
+    @apply cursor-text;
+  }
+
+  .cm-search label {
+    @apply inline-flex items-center h-6 px-1.5 rounded-sm border border-border-subtle cursor-default text-text-subtle text-xs;
+
+    input[type="checkbox"] {
+      @apply hidden;
+    }
+
+    &:has(:checked) {
+      @apply text-primary border-border;
+    }
+  }
+
+  /* Hide the "All" button */
+
+  button[name="select"] {
+    @apply hidden;
+  }
+
+  /* Replace next/prev button text with chevron icons */
+
+  .cm-search button[name="next"],
+  .cm-search button[name="prev"] {
+    @apply text-[0px] w-7 h-6 inline-flex items-center justify-center border border-border-subtle mr-1;
+  }
+
+  .cm-search button[name="prev"]::after,
+  .cm-search button[name="next"]::after {
+    @apply block w-3.5 h-3.5 bg-text;
+    content: "";
+  }
+
+  .cm-search button[name="prev"]::after {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
+  }
+
+  .cm-search button[name="next"]::after {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
+  }
+
+  .cm-search-match-count {
+    @apply text-text-subtle text-xs font-mono whitespace-nowrap px-1.5 py-0.5 self-center;
+  }
+}
diff --git a/apps/yaak-client/components/core/Editor/Editor.tsx b/apps/yaak-client/components/core/Editor/Editor.tsx
new file mode 100644
index 0000000..fa18b8e
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/Editor.tsx
@@ -0,0 +1,770 @@
+import { startCompletion } from "@codemirror/autocomplete";
+import { defaultKeymap, historyField, indentWithTab } from "@codemirror/commands";
+import { foldState, forceParsing } from "@codemirror/language";
+import type { EditorStateConfig, Extension } from "@codemirror/state";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, keymap, placeholder as placeholderExt, tooltips } from "@codemirror/view";
+import { emacs } from "@replit/codemirror-emacs";
+import { vim } from "@replit/codemirror-vim";
+
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
+import { debounce } from "@yaakapp-internal/lib";
+import type { EditorKeymap } from "@yaakapp-internal/models";
+import { settingsAtom } from "@yaakapp-internal/models";
+import type { EditorLanguage, TemplateFunction } from "@yaakapp-internal/plugins";
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { GraphQLSchema } from "graphql";
+import { useAtomValue } from "jotai";
+import type { ReactNode, RefObject } from "react";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { activeEnvironmentAtom } from "../../../hooks/useActiveEnvironment";
+import type { WrappedEnvironmentVariable } from "../../../hooks/useEnvironmentVariables";
+import { useEnvironmentVariables } from "../../../hooks/useEnvironmentVariables";
+import { eventMatchesHotkey } from "../../../hooks/useHotKey";
+import { useRequestEditor } from "../../../hooks/useRequestEditor";
+import { useTemplateFunctionCompletionOptions } from "../../../hooks/useTemplateFunctions";
+import { docFingerprint } from "../../../lib/docFingerprint";
+import { editEnvironment } from "../../../lib/editEnvironment";
+import { tryFormatJson, tryFormatXml } from "../../../lib/formatters";
+import { jotaiStore } from "../../../lib/jotai";
+import { withEncryptionEnabled } from "../../../lib/setupOrConfigureEncryption";
+import { TemplateFunctionDialog } from "../../TemplateFunctionDialog";
+import { IconButton } from "../IconButton";
+import "./Editor.css";
+import {
+  baseExtensions,
+  editableExtensions,
+  getLanguageExtension,
+  multiLineExtensions,
+  readonlyExtensions,
+} from "./extensions";
+import type { GenericCompletionConfig } from "./genericCompletion";
+import { singleLineExtensions } from "./singleLine";
+
+// VSCode's Tab actions mess with the single-line editor tab actions, so remove it.
+const vsCodeWithoutTab = vscodeKeymap.filter((k) => k.key !== "Tab");
+
+const keymapExtensions: Record<EditorKeymap, Extension> = {
+  vim: vim(),
+  emacs: emacs(),
+  vscode: keymap.of(vsCodeWithoutTab),
+  default: [],
+};
+
+export interface EditorProps {
+  actions?: ReactNode;
+  autoFocus?: boolean;
+  autoSelect?: boolean;
+  autocomplete?: GenericCompletionConfig;
+  autocompleteFunctions?: boolean;
+  autocompleteVariables?: boolean | ((v: WrappedEnvironmentVariable) => boolean);
+  className?: string;
+  defaultValue?: string | null;
+  disableTabIndent?: boolean;
+  disabled?: boolean;
+  extraExtensions?: Extension[] | Extension;
+  forcedEnvironmentId?: string;
+  forceUpdateKey?: string | number;
+  format?: (v: string) => Promise<string>;
+  heightMode?: "auto" | "full";
+  hideGutter?: boolean;
+  id?: string;
+  language?: EditorLanguage | "pairs" | "url" | "timeline" | null;
+  lintExtension?: Extension;
+  graphQLSchema?: GraphQLSchema | null;
+  onBlur?: () => void;
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
+  onPaste?: (value: string) => void;
+  onPasteOverwrite?: (e: ClipboardEvent, value: string) => void;
+  placeholder?: string;
+  readOnly?: boolean;
+  singleLine?: boolean;
+  containerOnly?: boolean;
+  stateKey: string | null;
+  tooltipContainer?: HTMLElement;
+  type?: "text" | "password";
+  wrapLines?: boolean;
+  setRef?: (view: EditorView | null) => void;
+}
+
+const stateFields = { history: historyField, folds: foldState };
+
+const emptyVariables: WrappedEnvironmentVariable[] = [];
+const emptyExtension: Extension = [];
+
+export function Editor(props: EditorProps) {
+  return <EditorInner key={props.stateKey} {...props} />;
+}
+
+function EditorInner({
+  actions,
+  autoFocus,
+  autoSelect,
+  autocomplete,
+  autocompleteFunctions,
+  autocompleteVariables,
+  className,
+  defaultValue,
+  disableTabIndent,
+  disabled,
+  extraExtensions,
+  forcedEnvironmentId,
+  forceUpdateKey,
+  format,
+  heightMode,
+  hideGutter,
+  graphQLSchema,
+  language,
+  lintExtension,
+  onBlur,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onPaste,
+  onPasteOverwrite,
+  placeholder,
+  readOnly,
+  singleLine,
+  containerOnly,
+  stateKey,
+  type,
+  wrapLines,
+  setRef,
+}: EditorProps) {
+  const settings = useAtomValue(settingsAtom);
+
+  const allEnvironmentVariables = useEnvironmentVariables(forcedEnvironmentId ?? null);
+  const useTemplating = !!(autocompleteFunctions || autocompleteVariables || autocomplete);
+  const environmentVariables = useMemo(() => {
+    if (!autocompleteVariables) return emptyVariables;
+    return typeof autocompleteVariables === "function"
+      ? allEnvironmentVariables.filter(autocompleteVariables)
+      : allEnvironmentVariables;
+  }, [allEnvironmentVariables, autocompleteVariables]);
+
+  if (settings && wrapLines === undefined) {
+    wrapLines = settings.editorSoftWrap;
+  }
+
+  if (disabled) {
+    readOnly = true;
+  }
+
+  if (
+    singleLine ||
+    language == null ||
+    language === "text" ||
+    language === "url" ||
+    language === "pairs"
+  ) {
+    disableTabIndent = true;
+  }
+
+  if (format == null && !readOnly) {
+    format =
+      language === "json"
+        ? tryFormatJson
+        : language === "xml" || language === "html"
+          ? tryFormatXml
+          : undefined;
+  }
+
+  const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
+
+  // Use ref so we can update the handler without re-initializing the editor
+  const handleChange = useRef<EditorProps["onChange"]>(onChange);
+  useEffect(() => {
+    handleChange.current = onChange;
+  }, [onChange]);
+
+  // Use ref so we can update the handler without re-initializing the editor
+  const handlePaste = useRef<EditorProps["onPaste"]>(onPaste);
+  useEffect(() => {
+    handlePaste.current = onPaste;
+  }, [onPaste]);
+
+  // Use ref so we can update the handler without re-initializing the editor
+  const handlePasteOverwrite = useRef<EditorProps["onPasteOverwrite"]>(onPasteOverwrite);
+  useEffect(() => {
+    handlePasteOverwrite.current = onPasteOverwrite;
+  }, [onPasteOverwrite]);
+
+  // Use ref so we can update the handler without re-initializing the editor
+  const handleFocus = useRef<EditorProps["onFocus"]>(onFocus);
+  useEffect(() => {
+    handleFocus.current = onFocus;
+  }, [onFocus]);
+
+  // Use ref so we can update the handler without re-initializing the editor
+  const handleBlur = useRef<EditorProps["onBlur"]>(onBlur);
+  useEffect(() => {
+    handleBlur.current = onBlur;
+  }, [onBlur]);
+
+  // Use ref so we can update the handler without re-initializing the editor
+  const handleKeyDown = useRef<EditorProps["onKeyDown"]>(onKeyDown);
+  useEffect(() => {
+    handleKeyDown.current = onKeyDown;
+  }, [onKeyDown]);
+
+  // Update placeholder
+  const placeholderCompartment = useRef(new Compartment());
+  useEffect(
+    function configurePlaceholder() {
+      if (cm.current === null) return;
+      const ext = placeholderExt(placeholderElFromText(placeholder));
+      const effects = placeholderCompartment.current.reconfigure(ext);
+      cm.current?.view.dispatch({ effects });
+    },
+    [placeholder],
+  );
+
+  // Update vim
+  const keymapCompartment = useRef(new Compartment());
+  useEffect(
+    function configureKeymap() {
+      if (cm.current === null) return;
+      const current = keymapCompartment.current.get(cm.current.view.state) ?? [];
+      // PERF: This is expensive with hundreds of editors on screen, so only do it when necessary
+      if (settings.editorKeymap === "default" && current === keymapExtensions.default) return; // Nothing to do
+      if (settings.editorKeymap === "vim" && current === keymapExtensions.vim) return; // Nothing to do
+      if (settings.editorKeymap === "vscode" && current === keymapExtensions.vscode) return; // Nothing to do
+      if (settings.editorKeymap === "emacs" && current === keymapExtensions.emacs) return; // Nothing to do
+
+      const ext = keymapExtensions[settings.editorKeymap] ?? keymapExtensions.default;
+      const effects = keymapCompartment.current.reconfigure(ext);
+      cm.current.view.dispatch({ effects });
+    },
+    [settings.editorKeymap],
+  );
+
+  // Update wrap lines
+  const wrapLinesCompartment = useRef(new Compartment());
+  useEffect(
+    function configureWrapLines() {
+      if (cm.current === null) return;
+      const current = wrapLinesCompartment.current.get(cm.current.view.state) ?? emptyExtension;
+      // PERF: This is expensive with hundreds of editors on screen, so only do it when necessary
+      if (wrapLines && current !== emptyExtension) return; // Nothing to do
+      if (!wrapLines && current === emptyExtension) return; // Nothing to do
+
+      const ext = wrapLines ? EditorView.lineWrapping : emptyExtension;
+      const effects = wrapLinesCompartment.current.reconfigure(ext);
+      cm.current?.view.dispatch({ effects });
+    },
+    [wrapLines],
+  );
+
+  // Update tab indent
+  const tabIndentCompartment = useRef(new Compartment());
+  useEffect(
+    function configureTabIndent() {
+      if (cm.current === null) return;
+      const current = tabIndentCompartment.current.get(cm.current.view.state) ?? emptyExtension;
+      // PERF: This is expensive with hundreds of editors on screen, so only do it when necessary
+      if (disableTabIndent && current !== emptyExtension) return; // Nothing to do
+      if (!disableTabIndent && current === emptyExtension) return; // Nothing to do
+
+      const ext = !disableTabIndent ? keymap.of([indentWithTab]) : emptyExtension;
+      const effects = tabIndentCompartment.current.reconfigure(ext);
+      cm.current?.view.dispatch({ effects });
+    },
+    [disableTabIndent],
+  );
+
+  // Update read-only
+  const readOnlyCompartment = useRef(new Compartment());
+  useEffect(
+    function configureReadOnly() {
+      if (cm.current === null) return;
+      const current = readOnlyCompartment.current.get(cm.current.view.state) ?? emptyExtension;
+      const next = readOnly ? readonlyExtensions : editableExtensions;
+      // PERF: This is expensive with hundreds of editors on screen, so only do it when necessary
+      if (current === next) return;
+
+      const effects = readOnlyCompartment.current.reconfigure(next);
+      cm.current?.view.dispatch({ effects });
+    },
+    [readOnly],
+  );
+
+  const onClickFunction = useCallback(
+    async (fn: TemplateFunction, tagValue: string, startPos: number) => {
+      const show = () => {
+        if (cm.current === null) return;
+        TemplateFunctionDialog.show(fn, tagValue, startPos, cm.current.view);
+      };
+
+      if (fn.name === "secure") {
+        withEncryptionEnabled(show);
+      } else {
+        show();
+      }
+    },
+    [],
+  );
+
+  const onClickVariable = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async (v: WrappedEnvironmentVariable, _tagValue: string, _startPos: number) => {
+      await editEnvironment(v.environment, { addOrFocusVariable: v.variable });
+    },
+    [],
+  );
+
+  const onClickMissingVariable = useCallback(async (name: string) => {
+    const activeEnvironment = jotaiStore.get(activeEnvironmentAtom);
+    await editEnvironment(activeEnvironment, {
+      addOrFocusVariable: { name, value: "", enabled: true },
+    });
+  }, []);
+
+  const [, { focusParamValue }] = useRequestEditor();
+  const onClickPathParameter = useCallback(
+    async (name: string) => {
+      focusParamValue(name);
+    },
+    [focusParamValue],
+  );
+
+  const completionOptions = useTemplateFunctionCompletionOptions(
+    onClickFunction,
+    !!autocompleteFunctions,
+  );
+
+  // Update the language extension when the language changes
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- intentionally limited deps
+  useEffect(() => {
+    if (cm.current === null) return;
+    const { view, languageCompartment } = cm.current;
+    const ext = getLanguageExtension({
+      useTemplating,
+      language,
+      lintExtension,
+      hideGutter,
+      environmentVariables,
+      autocomplete,
+      completionOptions,
+      onClickVariable,
+      onClickMissingVariable,
+      onClickPathParameter,
+      graphQLSchema: graphQLSchema ?? null,
+    });
+    view.dispatch({ effects: languageCompartment.reconfigure(ext) });
+  }, [
+    language,
+    lintExtension,
+    autocomplete,
+    environmentVariables,
+    onClickFunction,
+    onClickVariable,
+    onClickMissingVariable,
+    onClickPathParameter,
+    completionOptions,
+    useTemplating,
+    graphQLSchema,
+    hideGutter,
+  ]);
+
+  // Initialize the editor when ref mounts
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- only reinitialize when necessary
+  const initEditorRef = useCallback(
+    function initEditorRef(container: HTMLDivElement | null) {
+      if (container === null) {
+        flushCachedEditorState(stateKey);
+        cm.current?.view.destroy();
+        cm.current = null;
+        return;
+      }
+
+      try {
+        const languageCompartment = new Compartment();
+        const langExt = getLanguageExtension({
+          useTemplating,
+          language,
+          lintExtension,
+          completionOptions,
+          autocomplete,
+          environmentVariables,
+          onClickVariable,
+          onClickMissingVariable,
+          onClickPathParameter,
+          graphQLSchema: graphQLSchema ?? null,
+        });
+        const extensions = [
+          languageCompartment.of(langExt),
+          placeholderCompartment.current.of(placeholderExt(placeholderElFromText(placeholder))),
+          wrapLinesCompartment.current.of(wrapLines ? EditorView.lineWrapping : emptyExtension),
+          tabIndentCompartment.current.of(
+            !disableTabIndent ? keymap.of([indentWithTab]) : emptyExtension,
+          ),
+          keymapCompartment.current.of(
+            keymapExtensions[settings.editorKeymap] ?? keymapExtensions.default,
+          ),
+          readOnlyCompartment.current.of(readOnly ? readonlyExtensions : editableExtensions),
+          ...getExtensions({
+            container,
+            singleLine,
+            hideGutter,
+            stateKey,
+            onChange: handleChange,
+            onPaste: handlePaste,
+            onPasteOverwrite: handlePasteOverwrite,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+          }),
+          ...(Array.isArray(extraExtensions)
+            ? extraExtensions
+            : extraExtensions
+              ? [extraExtensions]
+              : []),
+        ];
+
+        const cachedJsonState = getCachedEditorState(defaultValue ?? "", stateKey, !!readOnly);
+
+        const doc = `${defaultValue ?? ""}`;
+        const config: EditorStateConfig = { extensions, doc };
+
+        const state = cachedJsonState
+          ? EditorState.fromJSON(cachedJsonState, config, stateFields)
+          : EditorState.create(config);
+
+        const view = new EditorView({ state, parent: container });
+
+        // For large documents, the parser may parse the max number of lines and fail to add
+        // things like fold markers because of it.
+        // This forces it to parse more but keeps the timeout to the default of 100 ms.
+        forceParsing(view, 9e6, 100);
+
+        cm.current = { view, languageCompartment };
+        if (autoFocus) {
+          view.focus();
+        }
+        if (autoSelect) {
+          view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
+        }
+        setRef?.(view);
+      } catch (e) {
+        console.log("Failed to initialize Codemirror", e);
+      }
+    },
+    [forceUpdateKey],
+  );
+
+  // For read-only mode, update content when `defaultValue` changes
+  useEffect(
+    function updateReadOnlyEditor() {
+      if (readOnly && cm.current?.view != null) {
+        updateContents(cm.current.view, defaultValue || "");
+      }
+    },
+    [defaultValue, readOnly],
+  );
+
+  // Force input to update when receiving change and not in focus
+  useLayoutEffect(
+    function updateNonFocusedEditor() {
+      const notFocused = !cm.current?.view.hasFocus;
+      if (notFocused && cm.current != null) {
+        updateContents(cm.current.view, defaultValue || "");
+      }
+    },
+    [defaultValue],
+  );
+
+  // Add bg classes to actions, so they appear over the text
+  const decoratedActions = useMemo(() => {
+    const results = [];
+    const actionClassName = classNames(
+      "bg-surface transition-opacity transform-gpu opacity-0 group-hover:opacity-100 hover:opacity-100! shadow",
+    );
+
+    if (format) {
+      results.push(
+        <IconButton
+          showConfirm
+          key="format"
+          size="sm"
+          title="Reformat contents"
+          icon="magic_wand"
+          variant="border"
+          className={classNames(actionClassName)}
+          onClick={async () => {
+            if (cm.current === null) return;
+            const { doc } = cm.current.view.state;
+            const formatted = await format(doc.toString());
+            // Update editor and blur because the cursor will reset anyway
+            cm.current.view.dispatch({
+              changes: { from: 0, to: doc.length, insert: formatted },
+            });
+            cm.current.view.contentDOM.blur();
+            // Fire change event
+            onChange?.(formatted);
+          }}
+        />,
+      );
+    }
+    results.push(
+      Children.map(actions, (existingChild) => {
+        if (!isValidElement<{ className?: string }>(existingChild)) return null;
+        const existingProps = existingChild.props;
+
+        return cloneElement(existingChild, {
+          ...existingProps,
+          className: classNames(existingProps.className, actionClassName),
+        });
+      }),
+    );
+    return results;
+  }, [actions, format, onChange]);
+
+  const cmContainer = (
+    <div
+      ref={initEditorRef}
+      className={classNames(
+        className,
+        "cm-wrapper text-base",
+        disabled && "opacity-disabled",
+        type === "password" && "cm-obscure-text",
+        heightMode === "auto" ? "cm-auto-height" : "cm-full-height",
+        singleLine ? "cm-singleline" : "cm-multiline",
+        readOnly && "cm-readonly",
+      )}
+    />
+  );
+
+  if (singleLine || containerOnly) {
+    return cmContainer;
+  }
+
+  return (
+    <div className="group relative h-full w-full x-theme-editor bg-surface">
+      {cmContainer}
+      {decoratedActions && (
+        <HStack
+          space={1}
+          justifyContent="end"
+          className={classNames(
+            "absolute bottom-2 left-0 right-0",
+            "pointer-events-none", // No pointer events, so we don't block the editor
+          )}
+        >
+          {decoratedActions}
+        </HStack>
+      )}
+    </div>
+  );
+}
+
+function getExtensions({
+  stateKey,
+  container,
+  singleLine,
+  hideGutter,
+  onChange,
+  onPaste,
+  onPasteOverwrite,
+  onFocus,
+  onBlur,
+  onKeyDown,
+}: Pick<EditorProps, "singleLine" | "hideGutter"> & {
+  stateKey: EditorProps["stateKey"];
+  container: HTMLDivElement | null;
+  onChange: RefObject<EditorProps["onChange"]>;
+  onPaste: RefObject<EditorProps["onPaste"]>;
+  onPasteOverwrite: RefObject<EditorProps["onPasteOverwrite"]>;
+  onFocus: RefObject<EditorProps["onFocus"]>;
+  onBlur: RefObject<EditorProps["onBlur"]>;
+  onKeyDown: RefObject<EditorProps["onKeyDown"]>;
+}) {
+  // TODO: Ensure tooltips render inside the dialog if we are in one.
+  const parent =
+    container?.closest<HTMLDivElement>('[role="dialog"]') ??
+    document.querySelector<HTMLDivElement>("#cm-portal") ??
+    undefined;
+
+  return [
+    ...baseExtensions, // Must be first
+    EditorView.contentAttributes.of({
+      autocapitalize: "off",
+      autocorrect: "off",
+      // Keeps macOS Writing Tools from offering to write code for us
+      writingsuggestions: "false",
+    }),
+    EditorView.domEventHandlers({
+      focus: () => {
+        onFocus.current?.();
+      },
+      blur: () => {
+        onBlur.current?.();
+      },
+      keydown: (e, view) => {
+        // Check if the hotkey matches the editor.autocomplete action
+        if (eventMatchesHotkey(e, "editor.autocomplete")) {
+          e.preventDefault();
+          startCompletion(view);
+          return true;
+        }
+        onKeyDown.current?.(e);
+      },
+      paste: (e, v) => {
+        const textData = e.clipboardData?.getData("text/plain") ?? "";
+        onPaste.current?.(textData);
+        if (v.state.selection.main.from === 0 && v.state.selection.main.to === v.state.doc.length) {
+          onPasteOverwrite.current?.(e, textData);
+        }
+      },
+    }),
+    tooltips({ parent }),
+    keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== "Enter") : defaultKeymap),
+    ...(singleLine ? [singleLineExtensions()] : []),
+    ...(!singleLine ? multiLineExtensions({ hideGutter }) : []),
+
+    // ------------------------ //
+    // Things that must be last //
+    // ------------------------ //
+
+    EditorView.updateListener.of((update) => {
+      if (update.startState === update.state) return;
+
+      if (onChange && update.docChanged) {
+        onChange.current?.(update.state.doc.toString());
+      }
+
+      saveCachedEditorStateDebounced(stateKey, update.state);
+    }),
+  ];
+}
+
+const placeholderElFromText = (text: string | undefined) => {
+  const el = document.createElement("div");
+  // Default to <SPACE> because codemirror needs it for sizing. I'm not sure why, but probably something
+  // to do with how Yaak "hacks" it with CSS for single line input.
+  el.innerHTML = text ? text.replaceAll("\n", "<br/>") : " ";
+  return el;
+};
+
+// Caching the state is too expensive to do on every update (every keystroke and cursor move),
+// so debounce it per state key and flush when the editor unmounts.
+//
+// The cost scales with the document, and every update pays it in full:
+//   - `state.toJSON` flattens the whole rope into a string, ~0.13 ms per 200 KB
+//   - the fingerprint is an exact md5 for editable documents, ~0.3 ms per 200 KB. `docFingerprint`
+//     only samples read-only ones, so editing a large body still hashes all of it
+//   - `sessionStorage.setItem` is synchronous and blocks the main thread
+// Typing in a 200 KB body costs ~0.4 ms per keystroke before the storage write, and a 1 MB one
+// ~2.3 ms. Read-only documents skip most of the hashing but still serialize, which is the larger
+// half once documents get into the megabytes.
+const SAVE_STATE_DEBOUNCE_MS = 500;
+const stateSavers = new Map<string, ReturnType<typeof debounce>>();
+
+function saveCachedEditorStateDebounced(stateKey: string | null, state: EditorState) {
+  if (!stateKey) return;
+  let saver = stateSavers.get(stateKey);
+  if (saver == null) {
+    saver = debounce(
+      (s: EditorState) => saveCachedEditorState(stateKey, s),
+      SAVE_STATE_DEBOUNCE_MS,
+    );
+    stateSavers.set(stateKey, saver);
+  }
+  saver(state);
+}
+
+// NOTE: Only called when an editor unmounts, so the saver is dropped rather than left in the map
+//  for every state key the session has ever shown. A pending saver holds the last EditorState,
+//  which holds the whole document.
+function flushCachedEditorState(stateKey: string | null) {
+  if (!stateKey) return;
+  const saver = stateSavers.get(stateKey);
+  if (saver == null) return;
+  saver.flush();
+  stateSavers.delete(stateKey);
+}
+
+function saveCachedEditorState(stateKey: string | null, state: EditorState | null) {
+  if (!stateKey || state == null) return;
+  const stateObj = state.toJSON(stateFields);
+
+  // Save state in sessionStorage by removing doc and saving a fingerprint of it instead.
+  // This will be checked on restore and put back in if it matches.
+  // Editable documents get the exact hash, so a collision can never restore undo history
+  // belonging to other content
+  stateObj.docHash = docFingerprint(stateObj.doc, { exact: !state.readOnly });
+  stateObj.doc = undefined;
+
+  try {
+    sessionStorage.setItem(computeFullStateKey(stateKey), JSON.stringify(stateObj));
+  } catch (err) {
+    console.log("Failed to save to editor state", stateKey, err);
+  }
+}
+
+function getCachedEditorState(doc: string, stateKey: string | null, readOnly: boolean) {
+  if (stateKey == null) return;
+
+  try {
+    const stateStr = sessionStorage.getItem(computeFullStateKey(stateKey));
+    if (stateStr == null) return null;
+
+    const { docHash, ...state } = JSON.parse(stateStr);
+
+    // Ensure the doc matches the one that was used to save the state
+    if (docHash !== docFingerprint(doc, { exact: !readOnly })) {
+      return null;
+    }
+
+    state.doc = doc;
+    return state;
+  } catch (err) {
+    console.log("Failed to restore editor storage", stateKey, err);
+  }
+
+  return null;
+}
+
+function computeFullStateKey(stateKey: string): string {
+  return `editor.${stateKey}`;
+}
+
+function updateContents(view: EditorView, text: string) {
+  // Replace codemirror contents
+  const currentDoc = view.state.doc.toString();
+
+  if (currentDoc === text) {
+    return;
+  }
+
+  if (text.startsWith(currentDoc)) {
+    // If we're just appending, append only the changes. This preserves
+    // things like scroll position.
+    view.dispatch({
+      changes: view.state.changes({
+        from: currentDoc.length,
+        insert: text.slice(currentDoc.length),
+      }),
+    });
+  } else {
+    // If we're replacing everything, reset the entire content
+    view.dispatch({
+      changes: view.state.changes({
+        from: 0,
+        to: currentDoc.length,
+        insert: text,
+      }),
+    });
+  }
+}
diff --git a/apps/yaak-client/components/core/Editor/LazyEditor.tsx b/apps/yaak-client/components/core/Editor/LazyEditor.tsx
new file mode 100644
index 0000000..93a2706
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/LazyEditor.tsx
@@ -0,0 +1,12 @@
+import { lazy, Suspense } from "react";
+import type { EditorProps } from "./Editor";
+
+const Editor_ = lazy(() => import("./Editor").then((m) => ({ default: m.Editor })));
+
+export function Editor(props: EditorProps) {
+  return (
+    <Suspense>
+      <Editor_ {...props} />
+    </Suspense>
+  );
+}
diff --git a/apps/yaak-client/components/core/Editor/extensions.ts b/apps/yaak-client/components/core/Editor/extensions.ts
new file mode 100644
index 0000000..29be56c
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/extensions.ts
@@ -0,0 +1,343 @@
+import {
+  autocompletion,
+  closeBrackets,
+  closeBracketsKeymap,
+  completionKeymap,
+} from "@codemirror/autocomplete";
+import { history, historyKeymap } from "@codemirror/commands";
+import { go } from "@codemirror/lang-go";
+import { java } from "@codemirror/lang-java";
+import { javascript } from "@codemirror/lang-javascript";
+import { markdown } from "@codemirror/lang-markdown";
+import { php } from "@codemirror/lang-php";
+import { python } from "@codemirror/lang-python";
+import { xml } from "@codemirror/lang-xml";
+import {
+  bracketMatching,
+  codeFolding,
+  foldGutter,
+  foldKeymap,
+  HighlightStyle,
+  indentOnInput,
+  LanguageSupport,
+  StreamLanguage,
+  syntaxHighlighting,
+} from "@codemirror/language";
+import { c, csharp, kotlin, objectiveC } from "@codemirror/legacy-modes/mode/clike";
+import { clojure } from "@codemirror/legacy-modes/mode/clojure";
+import { http } from "@codemirror/legacy-modes/mode/http";
+import { oCaml } from "@codemirror/legacy-modes/mode/mllike";
+import { powerShell } from "@codemirror/legacy-modes/mode/powershell";
+import { r } from "@codemirror/legacy-modes/mode/r";
+import { ruby } from "@codemirror/legacy-modes/mode/ruby";
+import { shell } from "@codemirror/legacy-modes/mode/shell";
+import { swift } from "@codemirror/legacy-modes/mode/swift";
+import { linter, lintGutter, lintKeymap } from "@codemirror/lint";
+import { search, searchKeymap } from "@codemirror/search";
+import type { Extension } from "@codemirror/state";
+import { EditorState } from "@codemirror/state";
+import {
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  keymap,
+  lineNumbers,
+  rectangularSelection,
+} from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+import { jsonc, jsoncLanguage } from "@shopify/lang-jsonc";
+import { graphql } from "cm6-graphql";
+import type { GraphQLSchema } from "graphql";
+import { activeRequestIdAtom } from "../../../hooks/useActiveRequestId";
+import type { WrappedEnvironmentVariable } from "../../../hooks/useEnvironmentVariables";
+import { jotaiStore } from "../../../lib/jotai";
+import { renderMarkdown } from "../../../lib/markdown";
+import { pluralizeCount } from "../../../lib/pluralize";
+import { showGraphQLDocExplorerAtom } from "../../graphql/graphqlAtoms";
+import type { EditorProps } from "./Editor";
+import { jsonParseLinter } from "./json-lint";
+import { largeValues, mediaValues } from "./largeValues";
+import { pairs } from "./pairs/extension";
+import { searchMatchCount } from "./searchMatchCount";
+import { text } from "./text/extension";
+import { timeline } from "./timeline/extension";
+import type { TwigCompletionOption } from "./twig/completion";
+import { twig } from "./twig/extension";
+import { pathParametersPlugin } from "./twig/pathParameters";
+import { url } from "./url/extension";
+
+export const syntaxHighlightStyle = HighlightStyle.define([
+  {
+    tag: [t.documentMeta, t.blockComment, t.lineComment, t.docComment, t.comment],
+    color: "var(--textSubtlest)",
+  },
+  {
+    tag: [t.emphasis],
+    textDecoration: "underline",
+  },
+  {
+    tag: [t.angleBracket, t.paren, t.bracket, t.squareBracket, t.brace, t.separator, t.punctuation],
+    color: "var(--textSubtle)",
+  },
+  {
+    tag: [t.link, t.name, t.tagName, t.angleBracket, t.docString, t.number],
+    color: "var(--info)",
+  },
+  { tag: [t.variableName], color: "var(--success)" },
+  { tag: [t.bool], color: "var(--warning)" },
+  { tag: [t.attributeName, t.propertyName], color: "var(--primary)" },
+  { tag: [t.attributeValue], color: "var(--warning)" },
+  { tag: [t.string], color: "var(--notice)" },
+  { tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: "var(--danger)" },
+]);
+
+const syntaxTheme = EditorView.theme({}, { dark: true });
+
+const closeBracketsExtensions: Extension = [closeBrackets(), keymap.of([...closeBracketsKeymap])];
+
+const legacyLang = (mode: Parameters<typeof StreamLanguage.define>[0]) => {
+  return () => new LanguageSupport(StreamLanguage.define(mode));
+};
+
+const syntaxExtensions: Record<
+  NonNullable<EditorProps["language"]>,
+  null | (() => LanguageSupport)
+> = {
+  graphql: null,
+  json: jsonc,
+  javascript: javascript,
+  // HTML as XML because HTML is oddly slow
+  html: xml,
+  xml: xml,
+  url: url,
+  pairs: pairs,
+  text: text,
+  timeline: timeline,
+  markdown: markdown,
+  c: legacyLang(c),
+  clojure: legacyLang(clojure),
+  csharp: legacyLang(csharp),
+  go: go,
+  http: legacyLang(http),
+  java: java,
+  kotlin: legacyLang(kotlin),
+  objective_c: legacyLang(objectiveC),
+  ocaml: legacyLang(oCaml),
+  php: php,
+  powershell: legacyLang(powerShell),
+  python: python,
+  r: legacyLang(r),
+  ruby: legacyLang(ruby),
+  shell: legacyLang(shell),
+  swift: legacyLang(swift),
+};
+
+const closeBracketsFor: (keyof typeof syntaxExtensions)[] = ["json", "javascript", "graphql"];
+
+export function getLanguageExtension({
+  useTemplating,
+  language = "text",
+  lintExtension,
+  environmentVariables,
+  autocomplete,
+  hideGutter,
+  onClickVariable,
+  onClickMissingVariable,
+  onClickPathParameter,
+  completionOptions,
+  graphQLSchema,
+}: {
+  useTemplating: boolean;
+  environmentVariables: WrappedEnvironmentVariable[];
+  onClickVariable: (option: WrappedEnvironmentVariable, tagValue: string, startPos: number) => void;
+  onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void;
+  onClickPathParameter: (name: string) => void;
+  completionOptions: TwigCompletionOption[];
+  graphQLSchema: GraphQLSchema | null;
+} & Pick<EditorProps, "language" | "autocomplete" | "hideGutter" | "lintExtension">) {
+  const extraExtensions: Extension[] = [];
+
+  if (language === "url") {
+    extraExtensions.push(pathParametersPlugin(onClickPathParameter));
+  }
+
+  // Only close brackets on languages that need it
+  if (language && closeBracketsFor.includes(language)) {
+    extraExtensions.push(closeBracketsExtensions);
+  }
+
+  // GraphQL is a special exception
+  if (language === "graphql") {
+    return [
+      graphql(graphQLSchema ?? undefined, {
+        async onCompletionInfoRender(gqlCompletionItem): Promise<Node | null> {
+          if (!gqlCompletionItem.documentation) return null;
+          const innerHTML = await renderMarkdown(gqlCompletionItem.documentation);
+          const span = document.createElement("span");
+          span.innerHTML = innerHTML;
+          return span;
+        },
+        onShowInDocs(field, type, parentType) {
+          const activeRequestId = jotaiStore.get(activeRequestIdAtom);
+          if (activeRequestId == null) return;
+          jotaiStore.set(showGraphQLDocExplorerAtom, (v) => ({
+            ...v,
+            [activeRequestId]: { field, type, parentType },
+          }));
+        },
+      }),
+      extraExtensions,
+    ];
+  }
+
+  if (language === "json") {
+    extraExtensions.push(lintExtension ?? linter(jsonParseLinter()));
+    extraExtensions.push(
+      jsoncLanguage.data.of({
+        commentTokens: { line: "//", block: { open: "/*", close: "*/" } },
+      }),
+    );
+    if (!hideGutter) {
+      extraExtensions.push(lintGutter());
+    }
+  }
+
+  const maybeBase = language ? syntaxExtensions[language] : null;
+  const base = typeof maybeBase === "function" ? maybeBase() : null;
+  if (base == null) {
+    return [];
+  }
+
+  if (!useTemplating) {
+    return [base, extraExtensions];
+  }
+
+  return twig({
+    base,
+    environmentVariables,
+    completionOptions,
+    autocomplete,
+    onClickVariable,
+    onClickMissingVariable,
+    onClickPathParameter,
+    extraExtensions,
+  });
+}
+
+// Filter out autocomplete start triggers from completionKeymap since we handle it via configurable hotkeys.
+// Keep navigation keys (ArrowUp/Down, Enter, Escape, etc.) but remove startCompletion bindings.
+const filteredCompletionKeymap = completionKeymap.filter((binding) => {
+  const key = binding.key?.toLowerCase() ?? "";
+  const mac = (binding as { mac?: string }).mac?.toLowerCase() ?? "";
+  // Filter out Ctrl-Space and Mac-specific autocomplete triggers (Alt-`, Alt-i)
+  const isStartTrigger = key.includes("space") || mac.includes("alt-") || mac.includes("`");
+  return !isStartTrigger;
+});
+
+export const baseExtensions = [
+  highlightSpecialChars(),
+  history(),
+  dropCursor(),
+  drawSelection(),
+  autocompletion({
+    tooltipClass: () => "x-theme-menu",
+    closeOnBlur: true, // Set to `false` for debugging in devtools without closing it
+    defaultKeymap: false, // We handle the trigger via configurable hotkeys
+    compareCompletions: (a, b) => {
+      // Don't sort completions at all, only on boost
+      return (a.boost ?? 0) - (b.boost ?? 0);
+    },
+  }),
+  syntaxHighlighting(syntaxHighlightStyle),
+  syntaxTheme,
+  keymap.of([...historyKeymap, ...filteredCompletionKeymap]),
+];
+
+export const readonlyExtensions = [
+  EditorState.readOnly.of(true),
+  EditorView.contentAttributes.of({ tabindex: "-1" }),
+  // Nobody is editing this, so every rule applies
+  largeValues,
+];
+
+/**
+ * The counterpart for a document being edited.
+ *
+ * Only encoded media collapses here: it is pasted rather than typed, and replaced rather than
+ * edited, so a tag stands in for it without hiding anything anyone meant to read. The rules that
+ * hide text by length alone stay out. See {@link mediaValues}.
+ */
+export const editableExtensions = [mediaValues];
+
+export const multiLineExtensions = ({ hideGutter }: { hideGutter?: boolean }) => [
+  search({ top: true }),
+  searchMatchCount(),
+  hideGutter
+    ? []
+    : [
+        lineNumbers(),
+        foldGutter({
+          markerDOM: (open) => {
+            const el = document.createElement("div");
+            el.classList.add("fold-gutter-icon");
+            el.tabIndex = -1;
+            if (open) {
+              el.setAttribute("data-open", "");
+            }
+            return el;
+          },
+        }),
+      ],
+  codeFolding({
+    placeholderDOM(_view, onclick, prepared) {
+      const el = document.createElement("span");
+      el.onclick = onclick;
+      el.className = "cm-foldPlaceholder";
+      el.innerText = prepared || "…";
+      el.title = "unfold";
+      el.ariaLabel = "folded code";
+      return el;
+    },
+    /**
+     * Show the number of items when code folded. NOTE: this doesn't get called when restoring
+     * a previous serialized editor state, which is a bummer
+     */
+    preparePlaceholder(state, range) {
+      let count: number | undefined;
+      let startToken = "{";
+      let endToken = "}";
+
+      const prevLine = state.doc.lineAt(range.from).text;
+      const isArray = prevLine.lastIndexOf("[") > prevLine.lastIndexOf("{");
+
+      if (isArray) {
+        startToken = "[";
+        endToken = "]";
+      }
+
+      const internal = state.sliceDoc(range.from, range.to);
+      const toParse = startToken + internal + endToken;
+
+      try {
+        const parsed = JSON.parse(toParse);
+        count = Object.keys(parsed).length;
+      } catch {
+        /* empty */
+      }
+
+      if (count !== undefined) {
+        const label = isArray ? "item" : "key";
+        return pluralizeCount(label, count);
+      }
+    },
+  }),
+  indentOnInput(),
+  rectangularSelection(),
+  crosshairCursor(),
+  bracketMatching(),
+  highlightActiveLineGutter(),
+  keymap.of([...searchKeymap, ...foldKeymap, ...lintKeymap]),
+];
diff --git a/apps/yaak-client/components/core/Editor/filter/extension.ts b/apps/yaak-client/components/core/Editor/filter/extension.ts
new file mode 100644
index 0000000..f98c608
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/filter/extension.ts
@@ -0,0 +1,211 @@
+import type { Completion, CompletionContext, CompletionResult } from "@codemirror/autocomplete";
+import { autocompletion, startCompletion } from "@codemirror/autocomplete";
+import { LanguageSupport, LRLanguage, syntaxTree } from "@codemirror/language";
+import type { SyntaxNode } from "@lezer/common";
+import { parser } from "./filter";
+
+export interface FieldDef {
+  name: string;
+  // Optional static or dynamic value suggestions for this field
+  values?: string[] | (() => string[]);
+  info?: string;
+}
+
+export interface FilterOptions {
+  fields: FieldDef[] | null; // e.g., ['method','status','path'] or [{name:'tag', values:()=>cachedTags}]
+}
+
+const FIELD_IDENT = /[A-Za-z0-9_/]+$/;
+const VALUE_IDENT = /\S+$/;
+const VALUE_IDENT_ONLY = /^\S+$/;
+
+function normalizeFields(fields: FieldDef[]): {
+  fieldNames: string[];
+  fieldMap: Record<string, { values?: string[] | (() => string[]); info?: string }>;
+} {
+  const fieldNames: string[] = [];
+  const fieldMap: Record<string, { values?: string[] | (() => string[]); info?: string }> = {};
+  for (const f of fields) {
+    fieldNames.push(f.name);
+    fieldMap[f.name] = { values: f.values, info: f.info };
+  }
+  return { fieldNames, fieldMap };
+}
+
+function wordBefore(
+  doc: string,
+  pos: number,
+  pattern: RegExp,
+): { from: number; to: number; text: string } | null {
+  const upto = doc.slice(0, pos);
+  const m = upto.match(pattern);
+  if (!m) return null;
+  const from = pos - m[0].length;
+  return { from, to: pos, text: m[0] };
+}
+
+function fieldCompletionFrom(doc: string, pos: number): { from: number; includeAt: boolean } | null {
+  const w = wordBefore(doc, pos, FIELD_IDENT);
+  const from = w?.from ?? pos;
+  const beforeToken = doc[from - 1];
+
+  if (from === 0 || (beforeToken != null && /\s/.test(beforeToken))) {
+    return { from, includeAt: true };
+  }
+
+  if (beforeToken === "@") {
+    const beforeAt = doc[from - 2];
+    if (from === 1 || (beforeAt != null && /\s/.test(beforeAt))) {
+      return { from, includeAt: false };
+    }
+  }
+
+  return null;
+}
+
+function inPhrase(ctx: CompletionContext): boolean {
+  // Lezer node names from your grammar: Phrase is the quoted token
+  let n: SyntaxNode | null = syntaxTree(ctx.state).resolveInner(ctx.pos, -1);
+  while (n) {
+    if (n.name === "Phrase") return true;
+    n = n.parent;
+  }
+  return false;
+}
+
+// While typing an incomplete quote, there's no Phrase token yet.
+function inUnclosedQuote(doc: string, pos: number): boolean {
+  let quotes = 0;
+  for (let i = 0; i < pos; i++) {
+    if (doc[i] === '"' && doc[i - 1] !== "\\") quotes++;
+  }
+  return quotes % 2 === 1; // odd = inside an open quote
+}
+
+/**
+ * Heuristic context detector (works without relying on exact node names):
+ * - If there's a ':' after the last whitespace and before the cursor, we're in a field value.
+ * - Otherwise, we're in a field name or bare term position.
+ */
+function contextInfo(stateDoc: string, pos: number) {
+  const lastColon = stateDoc.lastIndexOf(":", pos - 1);
+  const lastBoundary = Math.max(
+    stateDoc.lastIndexOf(" ", pos - 1),
+    stateDoc.lastIndexOf("\t", pos - 1),
+    stateDoc.lastIndexOf("\n", pos - 1),
+    stateDoc.lastIndexOf("(", pos - 1),
+    stateDoc.lastIndexOf(")", pos - 1),
+  );
+
+  const inValue = lastColon > lastBoundary;
+
+  let fieldName: string | null = null;
+  let emptyAfterColon = false;
+
+  if (inValue) {
+    // word before the colon = field name
+    const beforeColon = stateDoc.slice(0, lastColon);
+    const m = beforeColon.match(FIELD_IDENT);
+    fieldName = m ? m[0] : null;
+
+    // nothing (or only spaces) typed after the colon?
+    const after = stateDoc.slice(lastColon + 1, pos);
+    emptyAfterColon = after.length === 0 || /^\s+$/.test(after);
+  }
+
+  return { inValue, fieldName, lastColon, emptyAfterColon };
+}
+
+/** Build a completion list for field names */
+function fieldNameCompletions(fieldNames: string[], includeAt: boolean): Completion[] {
+  return fieldNames.map((name) => ({
+    label: name,
+    type: "property",
+    apply: (view, _completion, from, to) => {
+      // Leave cursor right after the field filter colon.
+      const insert = `${includeAt ? "@" : ""}${name}:`;
+      view.dispatch({
+        changes: { from, to, insert },
+        selection: { anchor: from + insert.length },
+      });
+      startCompletion(view);
+    },
+  }));
+}
+
+/** Build a completion list for field values (if provided) */
+function fieldValueCompletions(
+  def: { values?: string[] | (() => string[]); info?: string } | undefined,
+): Completion[] | null {
+  if (!def || !def.values) return null;
+  const vals = Array.isArray(def.values) ? def.values : def.values();
+  return vals.map((v) => ({
+    label: v.match(VALUE_IDENT_ONLY) ? v : `"${v}"`,
+    displayLabel: v,
+    type: "constant",
+  }));
+}
+
+/** The main completion source */
+function makeCompletionSource(opts: FilterOptions) {
+  const { fieldNames, fieldMap } = normalizeFields(opts.fields ?? []);
+  return (ctx: CompletionContext): CompletionResult | null => {
+    const { state, pos } = ctx;
+    const doc = state.doc.toString();
+
+    if (inPhrase(ctx) || inUnclosedQuote(doc, pos)) {
+      return null;
+    }
+
+    const { inValue, fieldName, emptyAfterColon } = contextInfo(doc, pos);
+
+    // In field value position
+    if (inValue && fieldName) {
+      const w = wordBefore(doc, pos, VALUE_IDENT);
+      const from = w?.from ?? pos;
+      const to = pos;
+      const valDefs = fieldMap[fieldName];
+      const vals = fieldValueCompletions(valDefs);
+
+      // If user hasn't typed a value char yet:
+      // - Show value suggestions if available
+      // - Otherwise show nothing (no fallback to field names)
+      if (emptyAfterColon) {
+        if (vals?.length) {
+          return { from, to, options: vals, filter: true };
+        }
+        return null; // <-- key change: do not suggest fields here
+      }
+
+      // User started typing a value; filter value suggestions (if any)
+      if (vals?.length) {
+        return { from, to, options: vals, filter: true };
+      }
+      // No specific values: also show nothing (keeps UI quiet)
+      return null;
+    }
+
+    // Not in a value: suggest field names (and maybe boolean ops)
+    const completion = fieldCompletionFrom(doc, pos);
+    if (completion == null) return null;
+    const { from, includeAt } = completion;
+    const to = pos;
+    const options: Completion[] = fieldNameCompletions(fieldNames, includeAt);
+
+    return { from, to, options, filter: true };
+  };
+}
+
+const language = LRLanguage.define({
+  name: "filter",
+  parser,
+  languageData: {
+    autocompletion: {},
+  },
+});
+
+/** Public extension */
+export function filter(options: FilterOptions) {
+  const source = makeCompletionSource(options);
+  return new LanguageSupport(language, [autocompletion({ override: [source] })]);
+}
diff --git a/apps/yaak-client/components/core/Editor/filter/filter.grammar b/apps/yaak-client/components/core/Editor/filter/filter.grammar
new file mode 100644
index 0000000..dcf8b81
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/filter/filter.grammar
@@ -0,0 +1,78 @@
+@top Query { Expr }
+
+@skip { space+ }
+@tokens {
+  space { $[ \t\r\n]+ }
+
+  LParen { "(" }
+  RParen { ")" }
+  At { "@" }
+  Colon  { ":" }
+  Not  { "-" | "NOT" }
+
+  // Keywords (case-insensitive)
+  And    { "AND" }
+  Or     { "OR" }
+
+  // "quoted phrase" with simple escapes: \" and \\
+  Phrase { '"' (!["\\] | "\\" _)* '"' }
+
+  // Bare words run until filter syntax or whitespace. Leading '-' remains unary
+  // negation, but '-' may appear after the first character.
+  Word { ![ \t\r\n():"@-] ![ \t\r\n():"@]* }
+  FieldValueWord { ![ \t\r\n"] ![ \t\r\n]* }
+
+  @precedence { Not, And, Or, Word }
+}
+
+@detectDelim
+
+// Precedence: NOT (highest) > AND > OR (lowest)
+// We also allow implicit AND in your parser/evaluator, but for highlighting,
+// this grammar parses explicit AND/OR/NOT + adjacency as a sequence (Seq).
+Expr {
+  OrExpr
+}
+
+OrExpr {
+  AndExpr (Or AndExpr)*
+}
+
+AndExpr {
+  Unary (And Unary | Unary)*  // allow implicit AND by adjacency: Unary Unary
+}
+
+Unary {
+  Not Unary
+| Primary
+}
+
+Primary {
+  Group
+| Field
+| Phrase
+| Term
+}
+
+Group {
+  LParen Expr RParen
+}
+
+Field {
+  FieldName Colon FieldValue
+}
+
+FieldName {
+  At? Word
+}
+
+FieldValue {
+  Phrase
+| FieldValueWord
+}
+
+Term {
+  Word
+}
+
+@external propSource highlight from "./highlight"
diff --git a/apps/yaak-client/components/core/Editor/filter/filter.test.ts b/apps/yaak-client/components/core/Editor/filter/filter.test.ts
new file mode 100644
index 0000000..6002175
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/filter/filter.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, test } from "vite-plus/test";
+import { parser } from "./filter";
+
+function getNodeNames(input: string): string[] {
+  const tree = parser.parse(input);
+  const nodes: string[] = [];
+  const cursor = tree.cursor();
+  do {
+    if (cursor.name !== "Query") {
+      nodes.push(cursor.name);
+    }
+  } while (cursor.next());
+  return nodes;
+}
+
+describe("filter grammar", () => {
+  test("parses URL-like field values as one value", () => {
+    const nodes = getNodeNames("@url:yaak.app/foo-bar");
+
+    expect(nodes).not.toContain("⚠");
+    expect(nodes).toContain("FieldValue");
+    expect(nodes).toContain("FieldValueWord");
+  });
+
+  test("parses punctuation-heavy field values as one value", () => {
+    const nodes = getNodeNames("@url:yaa$&#*@tsrna(*)");
+
+    expect(nodes).not.toContain("⚠");
+    expect(nodes).toContain("FieldValue");
+    expect(nodes).toContain("FieldValueWord");
+  });
+
+  test("parses operator-looking field values as one value", () => {
+    const negativeValueNodes = getNodeNames("@url:-foo");
+    const operatorWordNodes = getNodeNames("@url:AND");
+
+    expect(negativeValueNodes).not.toContain("⚠");
+    expect(negativeValueNodes).toContain("FieldValueWord");
+    expect(operatorWordNodes).not.toContain("⚠");
+    expect(operatorWordNodes).toContain("FieldValueWord");
+  });
+});
diff --git a/apps/yaak-client/components/core/Editor/filter/filter.ts b/apps/yaak-client/components/core/Editor/filter/filter.ts
new file mode 100644
index 0000000..717a6da
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/filter/filter.ts
@@ -0,0 +1,22 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import {LRParser} from "@lezer/lr"
+import {highlight} from "./highlight"
+export const parser = LRParser.deserialize({
+  version: 14,
+  states: "%WOVQPOOPhOPOOOVQPO'#CfOmQPO'#ChO!_QPO'#ChO!dQPO'#CgOOQO'#Cc'#CcOVQPO'#CaOOQO'#Ca'#CaO!iQPO'#C`O!yQPO'#C_OOQO'#C^'#C^QOQPOOPOOO'#Cr'#CrP#UOPO)C>lO#]QPO,59QOOQO,59S,59SO#bQQO,59ROOQO,58{,58{OVQPO'#CsOOQO'#Cs'#CsO#jQPO,58zOVQPO'#CtO#zQPO,58yPOOO-E6p-E6pOOQO1G.l1G.lOOQO'#Cl'#ClOOQO1G.m1G.mOOQO,59_,59_OOQO-E6q-E6qOOQO,59`,59`OOQO-E6r-E6r",
+  stateData: "$]~OkPQ~OUVOXQO]SO^ROaUO~Ok]O~OUcXXcX]cX^cX_[XacXdcXecXicXWcX~O^`O~O_aO~OdcOeSXiSXWSX~PVOefOiRXWRX~Ok]O~Qj]WiO~OajObjO~OdcOeSaiSaWSa~PVOefOiRaWRa~OUde^e~",
+  goto: "#^iPPjpt{P![PP!e!e!nPPP!wPP!ePP!z#Q#WQ[OR_QTZOQSYOQRnfUXOQfQbVSdXeRlc_WOQVXcef_UOQVXcef_TOQVXcefRkaQ^PRh^QeXRmeQgYRog",
+  nodeNames: "⚠ Query Expr OrExpr AndExpr Unary Not Primary RParen LParen Group Field FieldName At Word Colon FieldValue Phrase FieldValueWord Term And Or",
+  maxTerm: 27,
+  nodeProps: [
+    ["openedBy", 8,"LParen"],
+    ["closedBy", 9,"RParen"]
+  ],
+  propSources: [highlight],
+  skippedNodes: [0,22],
+  repeatNodeCount: 3,
+  tokenData: "2h~RiOX!pXY$hYZ$hZ]!p]^$h^p!ppq$hqr!prs$ysx!pxy&gyz'Qz}!p}!O'k!O![!p![!](U!]!b!p!b!c(o!c!d)Y!d!p!p!p!q,q!q!r0Y!r;'S!p;'S;=`$b<%lO!pR!w^bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c;'S!p;'S;=`$b<%lO!pQ#xUbQOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sQ$_P;=`<%l#sR$eP;=`<%l!p~$mSk~XY$hYZ$h]^$hpq$h~$|VOr$yrs%cs#O$y#O#P%h#P;'S$y;'S;=`&a<%lO$y~%hOa~~%kRO;'S$y;'S;=`%t;=`O$y~%wWOr$yrs%cs#O$y#O#P%h#P;'S$y;'S;=`&a;=`<%l$y<%lO$y~&dP;=`<%l$yR&nUbQXPOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR'XUbQWPOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR'rUbQUPOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR(]U_PbQOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR(vU]PbQOX#sZ]#s^p#sq;'S#s;'S;=`$[<%lO#sR)a`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!p!p!p!q*c!q;'S!p;'S;=`$b<%lO!pR*j`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!f!p!f!g+l!g;'S!p;'S;=`$b<%lO!pR+u^bQdP^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c;'S!p;'S;=`$b<%lO!pR,x`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!q!p!q!r-z!r;'S!p;'S;=`$b<%lO!pR.R`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!v!p!v!w/T!w;'S!p;'S;=`$b<%lO!pR/^^bQUP^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c;'S!p;'S;=`$b<%lO!pR0a`bQ^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c!t!p!t!u1c!u;'S!p;'S;=`$b<%lO!pR1l^bQeP^POX!pZ]!p^p!pqr!prs#ssx!pxz#sz![!p![!]#s!]!b!p!b!c#s!c;'S!p;'S;=`$b<%lO!p",
+  tokenizers: [0, 1],
+  topRules: {"Query":[0,1]},
+  tokenPrec: 145
+})
diff --git a/apps/yaak-client/components/core/Editor/filter/format.test.ts b/apps/yaak-client/components/core/Editor/filter/format.test.ts
new file mode 100644
index 0000000..07ba7af
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/filter/format.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, test } from "vite-plus/test";
+import { formatFieldFilter } from "./format";
+import { evaluate, parseQuery } from "./query";
+
+function matchesFormattedUrl(value: string) {
+  return evaluate(parseQuery(formatFieldFilter("url", value)), {
+    fields: { url: value },
+  });
+}
+
+describe("formatFieldFilter", () => {
+  test("keeps URL-like values bare", () => {
+    expect(formatFieldFilter("url", "yaak.app/foo-bar")).toBe("@url:yaak.app/foo-bar");
+    expect(matchesFormattedUrl("yaak.app/foo-bar")).toBe(true);
+  });
+
+  test("keeps non-syntax punctuation bare", () => {
+    expect(formatFieldFilter("url", "yaa$&#*@tsrna(*)")).toBe("@url:yaa$&#*@tsrna(*)");
+    expect(matchesFormattedUrl("yaa$&#*@tsrna(*)")).toBe(true);
+  });
+
+  test("keeps values that start with an operator token bare", () => {
+    expect(formatFieldFilter("url", "-foo")).toBe("@url:-foo");
+    expect(matchesFormattedUrl("-foo")).toBe(true);
+  });
+
+  test("keeps boolean operator words bare", () => {
+    expect(formatFieldFilter("url", "AND")).toBe("@url:AND");
+    expect(formatFieldFilter("url", "or")).toBe("@url:or");
+    expect(formatFieldFilter("url", "Not")).toBe("@url:Not");
+    expect(matchesFormattedUrl("AND")).toBe(true);
+  });
+
+  test("escapes quoted values", () => {
+    expect(formatFieldFilter("url", 'say "hi"')).toBe('@url:"say \\"hi\\""');
+    expect(matchesFormattedUrl('say "hi"')).toBe(true);
+  });
+
+  test("quotes values that start with a quote", () => {
+    expect(formatFieldFilter("url", '"hi"')).toBe('@url:"\\"hi\\""');
+    expect(matchesFormattedUrl('"hi"')).toBe(true);
+  });
+});
diff --git a/apps/yaak-client/components/core/Editor/filter/format.ts b/apps/yaak-client/components/core/Editor/filter/format.ts
new file mode 100644
index 0000000..f1fc721
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/filter/format.ts
@@ -0,0 +1,7 @@
+const bareFieldValue = /^[^\s"]\S*$/;
+
+export function formatFieldFilter(field: string, value: string) {
+  const escapedValue = value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  const filterValue = bareFieldValue.test(value) ? value : `"${escapedValue}"`;
+  return `@${field}:${filterValue}`;
+}
diff --git a/apps/yaak-client/components/core/Editor/filter/highlight.ts b/apps/yaak-client/components/core/Editor/filter/highlight.ts
new file mode 100644
index 0000000..9c05d72
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/filter/highlight.ts
@@ -0,0 +1,22 @@
+import { styleTags, tags as t } from "@lezer/highlight";
+
+export const highlight = styleTags({
+  // Boolean operators
+  And: t.operatorKeyword,
+  Or: t.operatorKeyword,
+  Not: t.operatorKeyword,
+
+  // Structural punctuation
+  LParen: t.paren,
+  RParen: t.paren,
+  Colon: t.punctuation,
+  Minus: t.operator,
+
+  // Literals
+  Phrase: t.string, // "quoted string"
+
+  // Fields
+  "FieldName/At": t.attributeName,
+  "FieldName/Word": t.attributeName,
+  "FieldValue/FieldValueWord": t.attributeValue,
+});
diff --git a/apps/yaak-client/components/core/Editor/filter/query.ts b/apps/yaak-client/components/core/Editor/filter/query.ts
new file mode 100644
index 0000000..12bf4a4
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/filter/query.ts
@@ -0,0 +1,308 @@
+// query.ts
+// A tiny query language parser with NOT/AND/OR, parentheses, phrases, negation, and field:value.
+
+import { fuzzyMatch } from "fuzzbunny";
+/////////////////////////
+// AST
+/////////////////////////
+
+export type Ast =
+  | { type: "Term"; value: string } // foo
+  | { type: "Phrase"; value: string } // "hi there"
+  | { type: "Field"; field: string; value: string } // method:POST or title:"exact phrase"
+  | { type: "Not"; node: Ast } // -foo or NOT foo
+  | { type: "And"; left: Ast; right: Ast } // a AND b
+  | { type: "Or"; left: Ast; right: Ast }; // a OR b
+
+/////////////////////////
+// Tokenizer
+/////////////////////////
+type Tok =
+  | { kind: "LPAREN" }
+  | { kind: "RPAREN" }
+  | { kind: "AND" }
+  | { kind: "OR" }
+  | { kind: "NOT" } // explicit NOT
+  | { kind: "MINUS" } // unary minus before term/phrase/paren group
+  | { kind: "COLON" }
+  | { kind: "WORD"; text: string } // bareword (unquoted)
+  | { kind: "PHRASE"; text: string } // "quoted phrase"
+  | { kind: "EOF" };
+
+const isSpace = (c: string) => /\s/.test(c);
+const isWordStart = (c: string) => c !== "" && !isSpace(c) && !/[():"@-]/.test(c);
+const isWordChar = (c: string) => c !== "" && !isSpace(c) && !/[():"@]/.test(c);
+
+export function tokenize(input: string): Tok[] {
+  const toks: Tok[] = [];
+  let i = 0;
+  const n = input.length;
+
+  const peek = () => input[i] ?? "";
+  const advance = () => input[i++];
+
+  const readWord = () => {
+    let s = "";
+    while (i < n && isWordChar(peek())) s += advance();
+    return s;
+  };
+
+  const readFieldValue = () => {
+    let s = "";
+    while (i < n && !isSpace(peek())) s += advance();
+    return s;
+  };
+
+  const readPhrase = () => {
+    // assumes current char is opening quote
+    advance(); // consume opening "
+    let s = "";
+    while (i < n) {
+      const c = advance();
+      if (c === `"`) break;
+      if (c === "\\" && i < n) {
+        // escape \" and \\ (simple)
+        const next = advance();
+        s += next;
+      } else {
+        s += c;
+      }
+    }
+    return s;
+  };
+
+  while (i < n) {
+    const c = peek();
+
+    if (isSpace(c)) {
+      i++;
+      continue;
+    }
+
+    if (c === "(") {
+      toks.push({ kind: "LPAREN" });
+      i++;
+      continue;
+    }
+    if (c === ")") {
+      toks.push({ kind: "RPAREN" });
+      i++;
+      continue;
+    }
+    if (c === ":") {
+      toks.push({ kind: "COLON" });
+      i++;
+      if (peek() && !isSpace(peek()) && peek() !== `"`) {
+        toks.push({ kind: "WORD", text: readFieldValue() });
+      }
+      continue;
+    }
+    if (c === `"`) {
+      const text = readPhrase();
+      toks.push({ kind: "PHRASE", text });
+      continue;
+    }
+    if (c === "-") {
+      toks.push({ kind: "MINUS" });
+      i++;
+      continue;
+    }
+
+    // WORD / AND / OR / NOT
+    if (isWordStart(c)) {
+      const w = readWord();
+      const upper = w.toUpperCase();
+      if (upper === "AND") toks.push({ kind: "AND" });
+      else if (upper === "OR") toks.push({ kind: "OR" });
+      else if (upper === "NOT") toks.push({ kind: "NOT" });
+      else toks.push({ kind: "WORD", text: w });
+      continue;
+    }
+
+    // Unknown char—skip to be forgiving
+    i++;
+  }
+
+  toks.push({ kind: "EOF" });
+  return toks;
+}
+
+class Parser {
+  private i = 0;
+  constructor(private toks: Tok[]) {}
+
+  private peek(): Tok {
+    return this.toks[this.i] ?? { kind: "EOF" };
+  }
+  private advance(): Tok {
+    return this.toks[this.i++] ?? { kind: "EOF" };
+  }
+  private at(kind: Tok["kind"]) {
+    return this.peek().kind === kind;
+  }
+
+  // Top-level: parse OR-precedence chain, allowing implicit AND.
+  parse(): Ast | null {
+    if (this.at("EOF")) return null;
+    const expr = this.parseOr();
+    if (!this.at("EOF")) {
+      // Optionally, consume remaining tokens or throw
+    }
+    return expr;
+  }
+
+  // Precedence: NOT (highest), AND, OR (lowest)
+  private parseOr(): Ast {
+    let node = this.parseAnd();
+    while (this.at("OR")) {
+      this.advance();
+      const rhs = this.parseAnd();
+      node = { type: "Or", left: node, right: rhs };
+    }
+    return node;
+  }
+
+  private parseAnd(): Ast {
+    let node = this.parseUnary();
+    // Implicit AND: if next token starts a primary, treat as AND.
+    while (this.at("AND") || this.startsPrimary()) {
+      if (this.at("AND")) this.advance();
+      const rhs = this.parseUnary();
+      node = { type: "And", left: node, right: rhs };
+    }
+    return node;
+  }
+
+  private parseUnary(): Ast {
+    if (this.at("NOT") || this.at("MINUS")) {
+      this.advance();
+      const node = this.parseUnary();
+      return { type: "Not", node };
+    }
+    return this.parsePrimaryOrField();
+  }
+
+  private startsPrimary(): boolean {
+    const k = this.peek().kind;
+    return k === "WORD" || k === "PHRASE" || k === "LPAREN" || k === "MINUS" || k === "NOT";
+  }
+
+  private parsePrimaryOrField(): Ast {
+    // Parenthesized group
+    if (this.at("LPAREN")) {
+      this.advance();
+      const inside = this.parseOr();
+      // if (!this.at('RPAREN')) throw new Error("Missing closing ')'");
+      this.advance();
+      return inside;
+    }
+
+    // Phrase
+    if (this.at("PHRASE")) {
+      const t = this.advance() as Extract<Tok, { kind: "PHRASE" }>;
+      return { type: "Phrase", value: t.text };
+    }
+
+    // Field or bare word
+    if (this.at("WORD")) {
+      const wordTok = this.advance() as Extract<Tok, { kind: "WORD" }>;
+
+      if (this.at("COLON")) {
+        // field:value or field:"phrase"
+        this.advance(); // :
+        let value: string;
+        if (this.at("PHRASE")) {
+          const p = this.advance() as Extract<Tok, { kind: "PHRASE" }>;
+          value = p.text;
+        } else if (this.at("WORD")) {
+          const w = this.advance() as Extract<Tok, { kind: "WORD" }>;
+          value = w.text;
+        } else {
+          // Anything else after colon is treated literally as a single Term token.
+          const t = this.advance();
+          value = tokText(t);
+        }
+        return { type: "Field", field: wordTok.text, value };
+      }
+
+      // plain term
+      return { type: "Term", value: wordTok.text };
+    }
+
+    const w = this.advance() as Extract<Tok, { kind: "WORD" }>;
+    return { type: "Phrase", value: "text" in w ? w.text : "" };
+  }
+}
+
+function tokText(t: Tok): string {
+  if ("text" in t) return t.text;
+
+  switch (t.kind) {
+    case "COLON":
+      return ":";
+    case "LPAREN":
+      return "(";
+    case "RPAREN":
+      return ")";
+    default:
+      return "";
+  }
+}
+
+export function parseQuery(q: string): Ast | null {
+  if (q.trim() === "") return null;
+  const toks = tokenize(q);
+  const parser = new Parser(toks);
+  return parser.parse();
+}
+
+export type Doc = {
+  text?: string;
+  fields?: Record<string, unknown>;
+};
+
+type Technique = "substring" | "fuzzy" | "strict";
+
+function includes(hay: string | undefined, needle: string, technique: Technique): boolean {
+  if (!hay || !needle) return false;
+  if (technique === "strict") return hay === needle;
+  if (technique === "fuzzy") return !!fuzzyMatch(hay, needle);
+  return hay.indexOf(needle) !== -1;
+}
+
+export function evaluate(ast: Ast | null, doc: Doc): boolean {
+  if (!ast) return true; // Match everything if no query is provided
+
+  const text = (doc.text ?? "").toLowerCase();
+  const fieldsNorm: Record<string, string[]> = {};
+
+  for (const [k, v] of Object.entries(doc.fields ?? {})) {
+    if (!(typeof v === "string" || Array.isArray(v))) continue;
+    fieldsNorm[k.toLowerCase()] = Array.isArray(v)
+      ? v.filter((v) => typeof v === "string").map((s) => s.toLowerCase())
+      : [String(v ?? "").toLowerCase()];
+  }
+
+  const evalNode = (node: Ast): boolean => {
+    switch (node.type) {
+      case "Term":
+        return includes(text, node.value.toLowerCase(), "fuzzy");
+      case "Phrase":
+        // Quoted phrases match exactly
+        return includes(text, node.value.toLowerCase(), "substring");
+      case "Field": {
+        const vals = fieldsNorm[node.field.toLowerCase()] ?? [];
+        if (vals.length === 0) return false;
+        return vals.some((v) => includes(v, node.value.toLowerCase(), "substring"));
+      }
+      case "Not":
+        return !evalNode(node.node);
+      case "And":
+        return evalNode(node.left) && evalNode(node.right);
+      case "Or":
+        return evalNode(node.left) || evalNode(node.right);
+    }
+  };
+
+  return evalNode(ast);
+}
diff --git a/apps/yaak-client/components/core/Editor/genericCompletion.ts b/apps/yaak-client/components/core/Editor/genericCompletion.ts
new file mode 100644
index 0000000..630da4c
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/genericCompletion.ts
@@ -0,0 +1,43 @@
+import type { Completion, CompletionContext } from "@codemirror/autocomplete";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import { defaultBoost } from "./twig/completion";
+
+export type GenericCompletion = GenericCompletionOption & {
+  apply?: Completion["apply"];
+};
+
+export interface GenericCompletionConfig {
+  minMatch?: number;
+  options: GenericCompletion[];
+}
+
+/**
+ * Complete options, always matching until the start of the line
+ */
+export function genericCompletion(config?: GenericCompletionConfig) {
+  if (config == null) return [];
+
+  const { minMatch = 1, options } = config;
+
+  return function completions(context: CompletionContext) {
+    const toMatch = context.matchBefore(/.*/);
+
+    // Only match if we're at the start of the line
+    if (toMatch === null || toMatch.from > 0) return null;
+
+    const matchedMinimumLength = toMatch.to - toMatch.from >= minMatch;
+    if (!matchedMinimumLength && !context.explicit) return null;
+
+    const optionsWithoutExactMatches = options
+      .filter((o) => o.label !== toMatch.text)
+      .map((o) => ({
+        ...o,
+        boost: defaultBoost(o),
+      }));
+    return {
+      validFor: () => true, // Not really sure why this is all it needs
+      from: toMatch.from,
+      options: optionsWithoutExactMatches,
+    };
+  };
+}
diff --git a/apps/yaak-client/components/core/Editor/hyperlink/extension.ts b/apps/yaak-client/components/core/Editor/hyperlink/extension.ts
new file mode 100644
index 0000000..7f1f1a9
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/hyperlink/extension.ts
@@ -0,0 +1,129 @@
+import type { DecorationSet, ViewUpdate } from "@codemirror/view";
+import { Decoration, EditorView, hoverTooltip, MatchDecorator, ViewPlugin } from "@codemirror/view";
+import { activeWorkspaceIdAtom } from "../../../../hooks/useActiveWorkspace";
+import { copyToClipboard } from "../../../../lib/copy";
+import { createRequestAndNavigate } from "../../../../lib/createRequestAndNavigate";
+import { jotaiStore } from "../../../../lib/jotai";
+
+const REGEX =
+  /(https?:\/\/([-a-zA-Z0-9@:%._+*~#=]{1,256})+(\.[a-zA-Z0-9()]{1,6})?\b([-a-zA-Z0-9()@:%_+*.~#?&/={}[\]]*))/g;
+
+const tooltip = hoverTooltip(
+  (view, pos, side) => {
+    const { from, text } = view.state.doc.lineAt(pos);
+    let match: RegExpExecArray | null;
+    let found: { start: number; end: number } | null = null;
+
+    // oxlint-disable-next-line no-cond-assign
+    while ((match = REGEX.exec(text))) {
+      const start = from + match.index;
+      const end = start + match[0].length;
+
+      if (pos >= start && pos <= end) {
+        found = { start, end };
+        break;
+      }
+    }
+
+    if (found == null) {
+      return null;
+    }
+
+    if ((found.start === pos && side < 0) || (found.end === pos && side > 0)) {
+      return null;
+    }
+
+    return {
+      pos: found.start,
+      end: found.end,
+      create() {
+        const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+        const link = text.substring(found?.start - from, found?.end - from);
+        const dom = document.createElement("div");
+
+        const $open = document.createElement("a");
+        $open.textContent = "Open in browser";
+        $open.href = link;
+        $open.target = "_blank";
+        $open.rel = "noopener noreferrer";
+
+        const $copy = document.createElement("button");
+        $copy.textContent = "Copy to clipboard";
+        $copy.addEventListener("click", () => {
+          copyToClipboard(link);
+        });
+
+        const $create = document.createElement("button");
+        $create.textContent = "Create new request";
+        $create.addEventListener("click", async () => {
+          await createRequestAndNavigate({
+            model: "http_request",
+            workspaceId: workspaceId ?? "n/a",
+            url: link,
+          });
+        });
+
+        dom.appendChild($open);
+        dom.appendChild($copy);
+        if (workspaceId != null) {
+          dom.appendChild($create);
+        }
+
+        return { dom };
+      },
+    };
+  },
+  {
+    hoverTime: 150,
+  },
+);
+
+const decorator = () => {
+  const placeholderMatcher = new MatchDecorator({
+    regexp: REGEX,
+    decoration(match, view, matchStartPos) {
+      const matchEndPos = matchStartPos + match[0].length - 1;
+
+      // Don't decorate if the cursor is inside the match
+      for (const r of view.state.selection.ranges) {
+        if (r.from > matchStartPos && r.to <= matchEndPos) {
+          return Decoration.replace({});
+        }
+      }
+
+      const groupMatch = match[1];
+      if (groupMatch == null) {
+        // Should never happen, but make TS happy
+        console.warn("Group match was empty", match);
+        return Decoration.replace({});
+      }
+
+      return Decoration.mark({
+        class: "hyperlink-widget",
+      });
+    },
+  });
+
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = placeholderMatcher.createDeco(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.decorations = placeholderMatcher.updateDeco(update, this.decorations);
+      }
+    },
+    {
+      decorations: (instance) => instance.decorations,
+      provide: (plugin) =>
+        EditorView.bidiIsolatedRanges.of((view) => {
+          return view.plugin(plugin)?.decorations || Decoration.none;
+        }),
+    },
+  );
+};
+
+export const hyperlink = [tooltip, decorator()];
diff --git a/apps/yaak-client/components/core/Editor/json-lint.ts b/apps/yaak-client/components/core/Editor/json-lint.ts
new file mode 100644
index 0000000..1a46bd2
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/json-lint.ts
@@ -0,0 +1,60 @@
+import type { Diagnostic } from "@codemirror/lint";
+import type { EditorView } from "@codemirror/view";
+import { type ParseError, parse, printParseErrorCode } from "jsonc-parser";
+
+const TEMPLATE_SYNTAX_REGEX = /\$\{\[[\s\S]*?]}/g;
+
+// jsonc-parser reports error codes, so these are the words the editor shows for them
+const MESSAGES: Record<string, string> = {
+  InvalidSymbol: "Invalid symbol",
+  InvalidNumberFormat: "Invalid number format",
+  PropertyNameExpected: "Property name expected",
+  ValueExpected: "Value expected",
+  ColonExpected: "Colon expected",
+  CommaExpected: "Comma expected",
+  CloseBraceExpected: "Closing brace expected",
+  CloseBracketExpected: "Closing bracket expected",
+  EndOfFileExpected: "End of file expected",
+  InvalidCommentToken: "Comments are not allowed",
+  UnexpectedEndOfComment: "Unexpected end of comment",
+  UnexpectedEndOfString: "Unexpected end of string",
+  UnexpectedEndOfNumber: "Unexpected end of number",
+  InvalidUnicode: "Invalid unicode sequence",
+  InvalidEscapeCharacter: "Invalid escape character",
+  InvalidCharacter: "Invalid character",
+};
+
+interface JsonLintOptions {
+  allowComments?: boolean;
+  allowTrailingCommas?: boolean;
+}
+
+export function jsonParseLinter(options?: JsonLintOptions) {
+  return (view: EditorView): Diagnostic[] => {
+    const doc = view.state.doc.toString();
+    if (doc.trim() === "") return [];
+
+    // We need lint to not break on stuff like {"foo:" ${[ ... ]}} so we'll replace all template
+    // syntax with repeating `1` characters, so it's valid JSON and the position is still correct.
+    const escapedDoc = doc.replace(TEMPLATE_SYNTAX_REGEX, (m) => "1".repeat(m.length));
+
+    const errors: ParseError[] = [];
+    parse(escapedDoc, errors, {
+      allowTrailingComma: options?.allowTrailingCommas ?? false,
+      disallowComments: !(options?.allowComments ?? true),
+    });
+
+    // Later errors are mostly consequences of the first one, so only that one is shown
+    const error = errors[0];
+    if (error == null) return [];
+
+    return [
+      {
+        from: error.offset,
+        to: error.offset + error.length,
+        severity: "error",
+        message: MESSAGES[printParseErrorCode(error.error)] ?? "Invalid JSON",
+      },
+    ];
+  };
+}
diff --git a/apps/yaak-client/components/core/Editor/json/breadcrumbExtension.ts b/apps/yaak-client/components/core/Editor/json/breadcrumbExtension.ts
new file mode 100644
index 0000000..67cd59e
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/json/breadcrumbExtension.ts
@@ -0,0 +1,41 @@
+import { syntaxTree } from "@codemirror/language";
+import type { Extension } from "@codemirror/state";
+import type { EditorView, ViewUpdate } from "@codemirror/view";
+import { ViewPlugin } from "@codemirror/view";
+import type { JsonPathSegment } from "./jsonPath";
+import { jsonPathSegmentsAt } from "./jsonPath";
+
+export interface BreadcrumbUpdate {
+  /** Path to the cursor, or `null` when the document isn't JSON. */
+  segments: JsonPathSegment[] | null;
+}
+
+/**
+ * Reports the JSON path under the cursor when the editor is created (it may restore a
+ * cached selection), and whenever the selection, document, or parsed tree changes. The
+ * tree matters because large documents parse in the background, so a path read early
+ * can be wrong until the parser reaches the cursor.
+ *
+ * The callback is not fired on blur: moving focus to the filter box (by clicking
+ * a crumb) must not erase the breadcrumb that was just acted on.
+ */
+export function jsonBreadcrumbExtension(onUpdate: (update: BreadcrumbUpdate) => void): Extension {
+  const report = (view: EditorView) => {
+    onUpdate({ segments: jsonPathSegmentsAt(view.state, view.state.selection.main.head) });
+  };
+
+  return ViewPlugin.define((view) => {
+    report(view);
+    return {
+      update(update: ViewUpdate) {
+        if (
+          update.selectionSet ||
+          update.docChanged ||
+          syntaxTree(update.startState) !== syntaxTree(update.state)
+        ) {
+          report(update.view);
+        }
+      },
+    };
+  });
+}
diff --git a/apps/yaak-client/components/core/Editor/json/jsonPath.test.ts b/apps/yaak-client/components/core/Editor/json/jsonPath.test.ts
new file mode 100644
index 0000000..a578c45
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/json/jsonPath.test.ts
@@ -0,0 +1,136 @@
+import { EditorState } from "@codemirror/state";
+import { jsonc } from "@shopify/lang-jsonc";
+import { forceParsing } from "@codemirror/language";
+import { describe, expect, test } from "vite-plus/test";
+import { jsonPathSegmentsAt, jsonPathToSegments, segmentsToJsonPath } from "./jsonPath";
+
+function stateFor(doc: string): EditorState {
+  const state = EditorState.create({ doc, extensions: [jsonc()] });
+  // Ensure the whole doc is parsed so resolveInner sees a complete tree.
+  forceParsing({ state } as never, doc.length, 5000);
+  return state;
+}
+
+/** JSONPath produced when the cursor sits just after the first occurrence of `needle`. */
+function pathAt(doc: string, needle: string): string {
+  const pos = doc.indexOf(needle) + needle.length;
+  const segs = jsonPathSegmentsAt(stateFor(doc), pos);
+  if (segs == null) throw new Error("no JSON tree");
+  return segmentsToJsonPath(segs);
+}
+
+/** JSONPath produced when the cursor sits just before the first occurrence of `needle`. */
+function pathBefore(doc: string, needle: string): string {
+  const pos = doc.indexOf(needle);
+  const segs = jsonPathSegmentsAt(stateFor(doc), pos);
+  if (segs == null) throw new Error("no JSON tree");
+  return segmentsToJsonPath(segs);
+}
+
+describe("jsonPathSegmentsAt", () => {
+  test("nested object keys", () => {
+    const doc = `{ "address": { "geo": { "lat": "-37" } } }`;
+    expect(pathAt(doc, `-37`)).toBe(`$.address.geo.lat`);
+  });
+
+  test("array element index", () => {
+    const doc = `{ "featured": [ { "id": 1 }, { "id": 2 } ] }`;
+    expect(pathAt(doc, `2`)).toBe(`$.featured[1].id`);
+  });
+
+  test("root array element", () => {
+    const doc = `[ { "id": 1 }, { "id": 2 } ]`;
+    expect(pathAt(doc, `"id": 2`)).toBe(`$[1].id`);
+  });
+
+  test("key containing a dot uses bracket-quote notation", () => {
+    const doc = `{ "sort": { "link": { "filter": { "category.id": [ "100" ] } } } }`;
+    expect(pathAt(doc, `"100"`)).toBe(`$.sort.link.filter["category.id"][0]`);
+  });
+
+  test("cursor on a property name resolves that key", () => {
+    const doc = `{ "outer": { "inner": 5 } }`;
+    expect(pathAt(doc, `"inner"`)).toBe(`$.outer.inner`);
+  });
+
+  test("deeply nested arrays and objects", () => {
+    const doc = `{ "a": [ { "b": [ 10, 20, 30 ] } ] }`;
+    expect(pathAt(doc, `30`)).toBe(`$.a[0].b[2]`);
+  });
+
+  test("root scalar yields the root path", () => {
+    expect(pathAt(`"hello"`, `hello`)).toBe(`$`);
+  });
+
+  test("caret just before a key still resolves that key", () => {
+    // The character to the left is the object's whitespace, not the property.
+    const doc = `[\n  {\n    "userId": 1,\n    "body": "x"\n  }\n]`;
+    expect(pathBefore(doc, `"body"`)).toBe(`$[0].body`);
+  });
+
+  test("caret in a line's indentation resolves that line's member", () => {
+    // Caret in the blank indentation of the `title` line (structurally the
+    // object's whitespace) reads as being on `title`, not a neighbour.
+    const doc = `[\n  {\n    "userId": 1,\n    "id": 1,\n    "title": "x"\n  }\n]`;
+    const pos = doc.indexOf(`"title"`) - 2; // two spaces into the title line
+    const segs = jsonPathSegmentsAt(stateFor(doc), pos);
+    expect(segs == null ? null : segmentsToJsonPath(segs)).toBe(`$[0].title`);
+  });
+
+  test("caret at the end of an array element keeps the element index", () => {
+    // The caret sits after `}` where the left token is the object's close brace.
+    const doc = `[\n  { "id": 1 },\n  { "id": 2 }\n]`;
+    const pos = doc.indexOf(`},`) + 1;
+    const segs = jsonPathSegmentsAt(stateFor(doc), pos);
+    expect(segs == null ? null : segmentsToJsonPath(segs)).toBe(`$[0]`);
+  });
+
+  test("non-JSON documents return null", () => {
+    const state = EditorState.create({ doc: `<xml/>` });
+    expect(jsonPathSegmentsAt(state, 3)).toBeNull();
+  });
+});
+
+describe("segmentsToJsonPath", () => {
+  test("empty segment list is the root", () => {
+    expect(segmentsToJsonPath([])).toBe(`$`);
+  });
+
+  test("partial path via count", () => {
+    const segs = [
+      { kind: "key", key: "a" },
+      { kind: "index", index: 2 },
+      { kind: "key", key: "b" },
+    ] as const;
+    expect(segmentsToJsonPath([...segs], 2)).toBe(`$.a[2]`);
+  });
+});
+
+describe("jsonPathToSegments", () => {
+  test("round-trips paths built by segmentsToJsonPath", () => {
+    for (const path of ["$", "$[0]", "$[0].id", '$.data["user.name"][12]', '$["say \\"hi\\""]']) {
+      const segments = jsonPathToSegments(path);
+      expect(segments).not.toBeNull();
+      expect(segmentsToJsonPath(segments ?? [])).toBe(path);
+    }
+  });
+
+  test("returns null for paths that don't name a single location", () => {
+    for (const path of [
+      "$..id",
+      "$[*]",
+      "$.items[?(@.id)]",
+      "$[0:2]",
+      "items[0]",
+      "$.a b",
+      '$["\\q"]',
+      '$["unterminated]',
+      '$["line\nbreak"]',
+      "$[01]",
+      "$[9007199254740993]",
+      "$.$",
+    ]) {
+      expect(jsonPathToSegments(path)).toBeNull();
+    }
+  });
+});
diff --git a/apps/yaak-client/components/core/Editor/json/jsonPath.ts b/apps/yaak-client/components/core/Editor/json/jsonPath.ts
new file mode 100644
index 0000000..ab77e62
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/json/jsonPath.ts
@@ -0,0 +1,102 @@
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState } from "@codemirror/state";
+import type { SyntaxNode } from "@lezer/common";
+import type { JsonPathSegment } from "@yaakapp-internal/lib/jsonPath";
+
+export { jsonPathToSegments } from "@yaakapp-internal/lib/jsonPath";
+export type { JsonPathSegment } from "@yaakapp-internal/lib/jsonPath";
+
+// Lezer node names from the JSONC grammar (@shopify/lang-jsonc). A JSON value is
+// exactly one of these; everything else in the tree is punctuation or a comment.
+const VALUE_NODES = new Set(["Object", "Array", "String", "Number", "True", "False", "Null"]);
+// The nodes with children that a caret can land "between" — its whitespace and
+// punctuation belong to the container, not to any value inside it.
+const CONTAINER_NODES = new Set(["Object", "Array", "JsoncText"]);
+
+/** Read a `PropertyName` (a quoted JSON string) back to its raw key. */
+function keyFromPropertyName(node: SyntaxNode, state: EditorState): string {
+  const raw = state.doc.sliceString(node.from, node.to);
+  try {
+    return JSON.parse(raw) as string;
+  } catch {
+    // A half-typed or malformed key still deserves a best-effort label.
+    return raw.replace(/^"|"$/g, "");
+  }
+}
+
+/** Index of `child` among the value elements of its parent `Array` node. */
+function indexInArray(array: SyntaxNode, child: SyntaxNode): number {
+  let idx = 0;
+  for (let c = array.firstChild; c != null; c = c.nextSibling) {
+    if (c.from === child.from && c.to === child.to) return idx;
+    if (VALUE_NODES.has(c.name)) idx++;
+  }
+  return idx;
+}
+
+/**
+ * The path from the document root to the member on the caret's line, or `null`
+ * when the document has no JSON tree (a different language, or empty). An empty
+ * array means the caret sits at the root value itself.
+ *
+ * A caret exactly on a token uses that token. A caret in a line's whitespace
+ * resolves to the enclosing object or array, so it's re-anchored to the first
+ * non-whitespace character on that line — in pretty-printed JSON each member
+ * starts its own line, so that's the member's own token. This tracks "the line
+ * I'm on" without guessing between neighbouring keys.
+ *
+ * From the anchor, each ancestor contributes a segment: a `Property` its key, a
+ * value directly inside an `Array` its index. Collected deepest-first, reversed.
+ */
+export function jsonPathSegmentsAt(state: EditorState, pos: number): JsonPathSegment[] | null {
+  const tree = syntaxTree(state);
+  if (tree.topNode.name !== "JsoncText") return null;
+
+  let node: SyntaxNode = tree.resolveInner(pos, -1);
+  if (CONTAINER_NODES.has(node.name)) {
+    const line = state.doc.lineAt(pos);
+    const indent = line.text.length - line.text.trimStart().length;
+    if (indent < line.text.length) {
+      node = tree.resolveInner(line.from + indent, 1);
+    }
+  }
+
+  const segments: JsonPathSegment[] = [];
+  let cur: SyntaxNode | null = node;
+  while (cur != null) {
+    const parent: SyntaxNode | null = cur.parent;
+    if (cur.name === "Property") {
+      const nameNode = cur.getChild("PropertyName");
+      if (nameNode != null) {
+        segments.push({ kind: "key", key: keyFromPropertyName(nameNode, state) });
+      }
+    } else if (parent != null && parent.name === "Array" && VALUE_NODES.has(cur.name)) {
+      segments.push({ kind: "index", index: indexInArray(parent, cur) });
+    }
+    cur = parent;
+  }
+
+  segments.reverse();
+  return segments;
+}
+
+const BARE_KEY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+
+/** A single segment as JSONPath, choosing dot vs. bracket form for a key. */
+function segmentToJsonPath(segment: JsonPathSegment): string {
+  if (segment.kind === "index") return `[${segment.index}]`;
+  // jsonpath-plus interprets a bare `$` as its root operator.
+  if (BARE_KEY.test(segment.key) && segment.key !== "$") return `.${segment.key}`;
+  // Anything with a dot, space, quote, etc. must be a quoted bracket accessor.
+  // JSON.stringify gives correct double-quoting and escaping, matching the
+  // convention the JSONPath filter box already displays.
+  return `[${JSON.stringify(segment.key)}]`;
+}
+
+/**
+ * Build a JSONPath expression for the first `count` segments (all of them by
+ * default). `segmentsToJsonPath([])` is the root, `$`.
+ */
+export function segmentsToJsonPath(segments: JsonPathSegment[], count = segments.length): string {
+  return "$" + segments.slice(0, count).map(segmentToJsonPath).join("");
+}
diff --git a/apps/yaak-client/components/core/Editor/largeValues.test.ts b/apps/yaak-client/components/core/Editor/largeValues.test.ts
new file mode 100644
index 0000000..6df9f0a
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/largeValues.test.ts
@@ -0,0 +1,500 @@
+import { EditorState } from "@codemirror/state";
+import { jsonc } from "@shopify/lang-jsonc";
+import { text } from "./text/extension";
+import { twig } from "./twig/extension";
+import { describe, expect, test } from "vite-plus/test";
+import {
+  COLLAPSE_MEDIA_CHARS,
+  COLLAPSE_TOKEN_CHARS,
+  collapseDecorations,
+  largeValues,
+  MAX_VISIBLE_LINE_CHARS,
+} from "./largeValues";
+import type { SniffedValue } from "./sniffValue";
+
+const BIG = "A".repeat(1_000_000);
+
+/** With a grammar, so tokens can be collapsed individually */
+const jsonState = (doc: string) => EditorState.create({ doc, extensions: [jsonc(), largeValues] });
+
+/** Without a grammar, so only the column rule applies */
+const plainState = (doc: string) => EditorState.create({ doc, extensions: largeValues });
+
+/**
+ * The decorations as if the whole document were on screen.
+ *
+ * In the editor the plugin passes the viewport instead, which is the same call with narrower
+ * ranges — the rules themselves don't know the difference.
+ */
+function decorationsFor(state: EditorState) {
+  return collapseDecorations(state, [{ from: 0, to: state.doc.length }]);
+}
+
+function collapsedRanges(state: EditorState) {
+  const ranges: { from: number; to: number }[] = [];
+  const iter = decorationsFor(state).iter();
+  while (iter.value != null) {
+    ranges.push({ from: iter.from, to: iter.to });
+    iter.next();
+  }
+  return ranges;
+}
+
+/** How much of each line is still rendered */
+function visibleLineLengths(state: EditorState) {
+  const hidden = collapsedRanges(state);
+  const lengths: number[] = [];
+  for (let n = 1; n <= state.doc.lines; n++) {
+    const line = state.doc.line(n);
+    const covered = hidden
+      .filter((h) => h.from >= line.from && h.to <= line.to)
+      .reduce((sum, h) => sum + (h.to - h.from), 0);
+    lengths.push(line.length - covered);
+  }
+  return lengths;
+}
+
+describe("collapsing", () => {
+  test("leaves an ordinary body alone", () => {
+    expect(collapsedRanges(jsonState('{"hello":"world"}'))).toEqual([]);
+  });
+
+  test("leaves a large body of short lines alone", () => {
+    const doc = Array.from({ length: 20_000 }, (_, i) => `  { "id": ${i} },`).join("\n");
+    expect(doc.length).toBeGreaterThan(MAX_VISIBLE_LINE_CHARS);
+    expect(collapsedRanges(jsonState(doc))).toEqual([]);
+  });
+
+  test("leaves a line just under the column limit alone", () => {
+    expect(collapsedRanges(plainState("x".repeat(MAX_VISIBLE_LINE_CHARS)))).toEqual([]);
+  });
+
+  test("never renders more than the column limit per line", () => {
+    for (const state of [jsonState(`{"image":"${BIG}"}`), plainState(BIG)]) {
+      for (const length of visibleLineLengths(state)) {
+        expect(length).toBeLessThanOrEqual(MAX_VISIBLE_LINE_CHARS);
+      }
+    }
+  });
+
+  test("keeps the document text intact", () => {
+    const doc = `{"image":"${BIG}"}`;
+    expect(jsonState(doc).sliceDoc()).toBe(doc);
+    expect(jsonState(doc).doc.length).toBe(doc.length);
+  });
+});
+
+describe("token collapsing, with a grammar", () => {
+  test("hides the whole value, leaving its quotes visible", () => {
+    const doc = `{"name":"a.png","image":"${BIG}","size":12}`;
+    const state = jsonState(doc);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges).toHaveLength(1);
+    // Exactly the text between the quotes, so the line reads as `"image":"<tag>"`
+    expect(state.sliceDoc(ranges[0]!.from, ranges[0]!.to)).toBe(BIG);
+    expect(doc[ranges[0]!.from - 1]).toBe('"');
+    expect(doc[ranges[0]!.to]).toBe('"');
+
+    // Everything after the value is still rendered, unlike a plain column cut
+    expect(doc.slice(ranges[0]!.to)).toContain('"size":12}');
+  });
+
+  // Small enough that the parse always finishes inside PARSE_TIMEOUT_MS, even on a slow
+  // machine. With a bigger body this falls back to the column cut, which is by design but
+  // makes the assertion depend on how fast the runner is.
+  test("keeps every key visible in a minified body with several large values", () => {
+    const chunk = "B".repeat(20_000);
+    const doc = `{${["a", "b", "c", "d", "e"].map((k) => `"${k}":"${chunk}"`).join(",")}}`;
+    const state = jsonState(doc);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges).toHaveLength(5);
+    for (const key of ["a", "b", "c", "d", "e"]) {
+      // No collapse swallows the key
+      const at = doc.indexOf(`"${key}":`);
+      expect(ranges.some((r) => r.from <= at && r.to > at)).toBe(false);
+    }
+    expect(visibleLineLengths(state)[0]).toBeLessThanOrEqual(MAX_VISIBLE_LINE_CHARS);
+  });
+
+  test("collapses a value on a pretty-printed line", () => {
+    const doc = `{\n  "name": "a.png",\n  "image": "${BIG}"\n}`;
+    const state = jsonState(doc);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges).toHaveLength(1);
+    expect(state.sliceDoc(ranges[0]!.from, ranges[0]!.to)).toBe(BIG);
+    // Only the long line is touched, and all that is left of it is `  "image": ""`
+    expect(visibleLineLengths(state)).toEqual([1, 18, 13, 1]);
+    expect(state.doc.line(2).text).toBe('  "name": "a.png",');
+  });
+
+  test("ignores tokens under the collapse threshold", () => {
+    // Under the threshold once the surrounding quotes are counted
+    const short = "C".repeat(COLLAPSE_TOKEN_CHARS - 10);
+    const doc = `{${Array.from({ length: 4 }, (_, i) => `"k${i}":"${short}"`).join(",")}}`;
+    expect(doc.length).toBeGreaterThan(MAX_VISIBLE_LINE_CHARS);
+
+    // Nothing is big enough to collapse on its own, so the column rule takes over
+    const ranges = collapsedRanges(jsonState(doc));
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.to).toBe(doc.length);
+  });
+});
+
+describe("column collapsing, without a grammar", () => {
+  test("collapses everything past the limit", () => {
+    const ranges = collapsedRanges(plainState(BIG));
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.from).toBe(MAX_VISIBLE_LINE_CHARS);
+    expect(ranges[0]!.to).toBe(BIG.length);
+  });
+
+  test("handles a long line of many short tokens", () => {
+    // A single-line CSV row: no token is long enough to collapse on its own
+    const row = Array.from({ length: 40_000 }, (_, i) => `value ${i}`).join(", ");
+    const ranges = collapsedRanges(plainState(row));
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.from).toBe(MAX_VISIBLE_LINE_CHARS);
+  });
+
+  test("collapses each long line independently", () => {
+    const doc = `${BIG}\nshort\n${BIG}`;
+    const ranges = collapsedRanges(plainState(doc));
+    expect(ranges).toHaveLength(2);
+    for (const length of visibleLineLengths(plainState(doc))) {
+      expect(length).toBeLessThanOrEqual(MAX_VISIBLE_LINE_CHARS);
+    }
+  });
+
+  test("never hides a line break", () => {
+    const doc = `${BIG}\nshort`;
+    const state = plainState(doc);
+    for (const { from, to } of collapsedRanges(state)) {
+      expect(state.sliceDoc(from, to)).not.toContain("\n");
+    }
+    expect(state.doc.lines).toBe(2);
+  });
+});
+
+describe("undelimited tokens", () => {
+  // The text grammar parses a whole line as one token. Collapsing it whole would leave the
+  // line with nothing on it but a tag, so the column cut handles it instead.
+  const textState = (doc: string) => EditorState.create({ doc, extensions: [text(), largeValues] });
+
+  test("falls back to the column cut for a long line of plain text", () => {
+    const doc = Array.from({ length: 90_000 }, (_, i) => `word${i}`).join(" ");
+    const ranges = collapsedRanges(textState(doc));
+
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.from).toBe(MAX_VISIBLE_LINE_CHARS);
+    expect(ranges[0]!.to).toBe(doc.length);
+  });
+
+  test("leaves the start of the line readable", () => {
+    const doc = `IMPORTANT-PREFIX ${"z".repeat(500_000)}`;
+    const state = textState(doc);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges[0]!.from).toBe(MAX_VISIBLE_LINE_CHARS);
+    expect(state.sliceDoc(0, 16)).toBe("IMPORTANT-PREFIX");
+  });
+});
+
+describe("sniffing the collapsed value", () => {
+  /** The widget standing in for each collapse, in document order */
+  function widgets(state: EditorState) {
+    const found: { valueFrom: number; sniffed: SniffedValue | null }[] = [];
+    const iter = decorationsFor(state).iter();
+    while (iter.value != null) {
+      found.push(iter.value.spec.widget);
+      iter.next();
+    }
+    return found;
+  }
+
+  /** A base64 value that starts with a PNG signature and runs on well past the limits */
+  function pngBase64(length = 1_000_000) {
+    const bytes = new Uint8Array(length);
+    bytes.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    let binary = "";
+    for (const byte of bytes) binary += String.fromCharCode(byte);
+    return btoa(binary);
+  }
+
+  test("names the format of a base64 value inside JSON", () => {
+    const state = jsonState(`{"image":"${pngBase64()}"}`);
+    expect(widgets(state)[0]?.sniffed).toMatchObject({ mime: "image/png", label: "PNG" });
+  });
+
+  test("names the format of a data URI", () => {
+    const doc = `{"image":"data:image/jpeg;base64,${BIG}"}`;
+    expect(widgets(jsonState(doc))[0]?.sniffed).toMatchObject({ label: "JPEG" });
+  });
+
+  test("names nothing when the value is just text", () => {
+    expect(widgets(jsonState(`{"image":"${BIG}"}`))[0]?.sniffed).toBeNull();
+    expect(widgets(plainState(BIG))[0]?.sniffed).toBeNull();
+  });
+
+  test("reads a column cut from the start of its line, not from the cut", () => {
+    // A body that is nothing but one base64 blob: the tail is hidden, but the value it
+    // belongs to begins at the start of the line, which is where the signature is
+    const state = plainState(pngBase64());
+    const [widget] = widgets(state);
+
+    expect(widget?.valueFrom).toBe(0);
+    expect(widget?.sniffed).toMatchObject({ label: "PNG" });
+  });
+
+  test("reads a token collapse from the value itself", () => {
+    const doc = `{"image":"${pngBase64()}"}`;
+    const [widget] = widgets(jsonState(doc));
+
+    // Just past the opening quote, so the signature is the first thing it sees
+    expect(widget?.valueFrom).toBe(doc.indexOf('"', doc.indexOf("image") + 6) + 1);
+    expect(widget?.sniffed).toMatchObject({ label: "PNG" });
+  });
+
+  test("finds a run that starts partway through a line, and names it", () => {
+    // No grammar here, and the value is not the whole line. The run is found by its alphabet,
+    // so the prefix stays on screen and the blob is still named.
+    const prefix = "some prefix text ";
+    const state = plainState(`${prefix}${pngBase64()}`);
+    const [widget] = widgets(state);
+
+    expect(widget?.valueFrom).toBe(prefix.length);
+    expect(widget?.sniffed).toMatchObject({ label: "PNG" });
+  });
+});
+
+describe("recomputing", () => {
+  test("updates when the document changes", () => {
+    const state = plainState('{"image":"short"}');
+    expect(collapsedRanges(state)).toEqual([]);
+
+    const next = state.update({
+      changes: { from: 0, to: state.doc.length, insert: BIG },
+    }).state;
+    expect(collapsedRanges(next)).toHaveLength(1);
+  });
+});
+
+describe("media collapsing, below the length rules", () => {
+  /** A real PNG signature, at a size that no length rule would touch */
+  function png(bytes: number) {
+    const b = new Uint8Array(bytes);
+    b.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    let binary = "";
+    for (const byte of b) binary += String.fromCharCode(byte);
+    return btoa(binary);
+  }
+
+  /** Well under every length threshold, so only the media rule can collapse it */
+  const SMALL = png(3_000);
+
+  test("collapses a small image on a short line", () => {
+    expect(SMALL.length).toBeLessThan(MAX_VISIBLE_LINE_CHARS);
+    expect(SMALL.length).toBeLessThan(COLLAPSE_TOKEN_CHARS);
+
+    const state = jsonState(`{\n  "avatar": "${SMALL}"\n}`);
+    const ranges = collapsedRanges(state);
+
+    expect(ranges).toHaveLength(1);
+    expect(state.sliceDoc(ranges[0]!.from, ranges[0]!.to)).toBe(SMALL);
+  });
+
+  test("names it, so the tag can say what it is", () => {
+    const state = jsonState(`{"avatar":"${SMALL}"}`);
+    const iter = decorationsFor(state).iter();
+    expect(iter.value?.spec.widget.sniffed).toMatchObject({ mime: "image/png", label: "PNG" });
+  });
+
+  test("leaves a value of the same size alone when nothing recognises it", () => {
+    // The only difference from the case above is what the bytes turn out to be
+    const prose = "x".repeat(SMALL.length);
+    expect(collapsedRanges(jsonState(`{"note":"${prose}"}`))).toEqual([]);
+  });
+
+  test("leaves anything under the media threshold alone, recognised or not", () => {
+    const tiny = png(400);
+    expect(tiny.length).toBeLessThan(COLLAPSE_MEDIA_CHARS);
+    expect(collapsedRanges(jsonState(`{"icon":"${tiny}"}`))).toEqual([]);
+  });
+
+  test("leaves text alone even when its first bytes match a signature", () => {
+    // `Qk0` decodes to `BM`, the whole of the BMP signature. Two bytes come up by chance often
+    // enough that the sniff alone must not be allowed to hide something.
+    const prose = `Qk0 ${"the quick brown fox jumps over the lazy dog. ".repeat(40)}`;
+    expect(prose.length).toBeGreaterThan(COLLAPSE_MEDIA_CHARS);
+    expect(collapsedRanges(jsonState(`{"note":"${prose}"}`))).toEqual([]);
+  });
+
+  test("still collapses it once it is long enough to be a rendering problem", () => {
+    // Past the length rule the sniff no longer decides anything, so this is hidden for its size
+    const prose = "Qk0 " + "words and more words ".repeat(COLLAPSE_TOKEN_CHARS);
+    expect(collapsedRanges(jsonState(`{"note":"${prose}"}`))).toHaveLength(1);
+  });
+
+  test("collapses a data URI on a short line", () => {
+    const state = jsonState(`{"avatar":"data:image/jpeg;base64,${SMALL}"}`);
+    expect(collapsedRanges(state)).toHaveLength(1);
+  });
+
+  test("still leaves an ordinary document completely untouched", () => {
+    const doc = Array.from({ length: 5_000 }, (_, i) => `  { "id": ${i}, "name": "item" },`).join(
+      "\n",
+    );
+    expect(collapsedRanges(jsonState(doc))).toEqual([]);
+  });
+});
+
+describe("media rule only, for a document being edited", () => {
+  /** What an editable editor gets: rule 2 alone */
+  function editableRanges(state: EditorState) {
+    const ranges: { from: number; to: number }[] = [];
+    const iter = collapseDecorations(state, [{ from: 0, to: state.doc.length }], "media").iter();
+    while (iter.value != null) {
+      ranges.push({ from: iter.from, to: iter.to });
+      iter.next();
+    }
+    return ranges;
+  }
+
+  function png(bytes: number) {
+    const b = new Uint8Array(bytes);
+    b.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    let binary = "";
+    for (const byte of b) binary += String.fromCharCode(byte);
+    return btoa(binary);
+  }
+
+  test("collapses a pasted image, the one thing it is for", () => {
+    const value = png(3_000);
+    const state = jsonState(`{\n  "avatar": "${value}"\n}`);
+
+    expect(editableRanges(state)).toHaveLength(1);
+    expect(state.sliceDoc(editableRanges(state)[0]!.from, editableRanges(state)[0]!.to)).toBe(
+      value,
+    );
+  });
+
+  test("leaves a long value alone when nothing can name it", () => {
+    // Rule 1 would take this on a stalling line. Editing it is plausible, so it stays.
+    const doc = `{"blob":"${"Z".repeat(COLLAPSE_TOKEN_CHARS * 3)}"}`;
+    expect(doc.length).toBeGreaterThan(MAX_VISIBLE_LINE_CHARS);
+    expect(editableRanges(jsonState(doc))).toEqual([]);
+  });
+
+  test("never cuts at the column limit, which would strand text out of reach", () => {
+    // Rule 3 territory: a minified body with no value big enough to collapse on its own
+    const doc = `[${Array.from({ length: 4_000 }, (_, i) => `"word-${i}"`).join(",")}]`;
+    expect(doc.length).toBeGreaterThan(MAX_VISIBLE_LINE_CHARS);
+    expect(editableRanges(jsonState(doc))).toEqual([]);
+    // The read-only rules still cut it
+    expect(collapsedRanges(jsonState(doc))).toHaveLength(1);
+  });
+
+  test("never swallows a template tag, collapsing only the run beside it", () => {
+    // A brace is not in the base64 alphabet, so the run starts after the tag and the tag stays
+    // on screen where it can still be read and edited
+    const tag = "{{ image }}";
+    const doc = `{"avatar":"${tag}${png(3_000)}"}`;
+    const ranges = editableRanges(jsonState(doc));
+
+    expect(ranges).toHaveLength(1);
+    expect(ranges[0]!.from).toBe(doc.indexOf(tag) + tag.length);
+    expect(doc.slice(ranges[0]!.from, ranges[0]!.to)).not.toContain("{");
+  });
+
+  test("finds a data URI whole, header and all", () => {
+    const value = `data:image/jpeg;base64,${png(3_000)}`;
+    const doc = `{"avatar":"${value}"}`;
+    const ranges = editableRanges(jsonState(doc));
+
+    expect(ranges).toHaveLength(1);
+    expect(doc.slice(ranges[0]!.from, ranges[0]!.to)).toBe(value);
+  });
+
+  test("hides no line break, so the plugin may provide it from the viewport", () => {
+    const state = jsonState(`{\n  "a": "${png(3_000)}",\n  "b": 1\n}`);
+    for (const { from, to } of editableRanges(state)) {
+      expect(state.sliceDoc(from, to)).not.toContain("\n");
+    }
+  });
+});
+
+describe("templated fields, where the grammar is an overlay", () => {
+  // Every editable field mixes its language with twig, which mounts the base language as an
+  // overlay. Overlays are not traversed by `Tree.iterate`, so a rule that walks the tree sees
+  // one enormous Text node and finds nothing. Rule 2 reads the text instead, and this is the
+  // case that has to keep working: an image pasted into a JSON request body.
+  const twigState = (doc: string) =>
+    EditorState.create({
+      doc,
+      extensions: [
+        twig({
+          base: jsonc(),
+          environmentVariables: [],
+          completionOptions: [],
+          onClickVariable: () => {},
+          onClickMissingVariable: () => {},
+          onClickPathParameter: () => {},
+          extraExtensions: [],
+        }),
+        largeValues,
+      ],
+    });
+
+  function png(bytes: number) {
+    const b = new Uint8Array(bytes);
+    b.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    let binary = "";
+    for (const byte of b) binary += String.fromCharCode(byte);
+    return btoa(binary);
+  }
+
+  test("collapses a pasted image in a templated body", () => {
+    const value = png(3_000);
+    const state = twigState(`{\n  "avatar": "${value}"\n}`);
+    const ranges: { from: number; to: number }[] = [];
+    const iter = collapseDecorations(state, [{ from: 0, to: state.doc.length }], "media").iter();
+    while (iter.value != null) {
+      ranges.push({ from: iter.from, to: iter.to });
+      iter.next();
+    }
+
+    expect(ranges).toHaveLength(1);
+    expect(state.sliceDoc(ranges[0]!.from, ranges[0]!.to)).toBe(value);
+  });
+});
+
+describe("viewport scoping", () => {
+  const doc = () => {
+    const value = "A".repeat(COLLAPSE_TOKEN_CHARS * 2);
+    return `{\n${["a", "b", "c"].map((k) => `  "${k}": "${value}"`).join(",\n")}\n}`;
+  };
+
+  test("decorates only the ranges it is given", () => {
+    const state = jsonState(doc());
+    const secondLine = state.doc.line(3);
+
+    const all = collapseDecorations(state, [{ from: 0, to: state.doc.length }]);
+    const one = collapseDecorations(state, [{ from: secondLine.from, to: secondLine.to }]);
+
+    expect(all.size).toBe(3);
+    expect(one.size).toBe(1);
+  });
+
+  test("covers a line the range only partly overlaps", () => {
+    // The viewport can start mid-line; the collapse still has to span the whole value
+    const state = jsonState(doc());
+    const line = state.doc.line(2);
+    const partial = collapseDecorations(state, [{ from: line.from + 5, to: line.from + 6 }]);
+
+    expect(partial.size).toBe(1);
+    const iter = partial.iter();
+    expect(iter.to).toBeGreaterThan(line.from + 6);
+  });
+});
diff --git a/apps/yaak-client/components/core/Editor/largeValues.ts b/apps/yaak-client/components/core/Editor/largeValues.ts
new file mode 100644
index 0000000..4918599
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/largeValues.ts
@@ -0,0 +1,584 @@
+import { ensureSyntaxTree, syntaxTree } from "@codemirror/language";
+import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import type { EditorState, Extension, Range } from "@codemirror/state";
+import type { Tree as SyntaxTree } from "@lezer/common";
+import type { DecorationSet, ViewUpdate } from "@codemirror/view";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+import { fireAndForget } from "../../../lib/fireAndForget";
+import type { SniffedValue } from "./sniffValue";
+import { isEncodedRun, SNIFF_HEAD_CHARS, sniffValue } from "./sniffValue";
+
+/**
+ * How much of a line may be rendered before the rest is collapsed.
+ *
+ * VS Code draws nothing past column 10,000 (`editor.stopRenderingLineAfter`) for the same
+ * reason. It can afford to be blunt about it because it doesn't soft wrap by default; we
+ * collapse to a placeholder that can be opened instead.
+ */
+export const MAX_VISIBLE_LINE_CHARS = 10_000;
+
+/**
+ * A quoted value longer than this is collapsed whole, whatever it turns out to hold. Long
+ * enough that nothing a person might actually read is ever hidden on length alone.
+ */
+export const COLLAPSE_TOKEN_CHARS = 5_000;
+
+/**
+ * A quoted value longer than this is collapsed too, but only when {@link sniffValue} can say
+ * what it is. Encoded media is never worth reading, so once we can name it and offer a viewer,
+ * a tag beats a wall of base64 well below the length that would make it a rendering problem —
+ * this covers the avatars and icons that make up most base64 in real payloads. Anything we
+ * can't identify stays visible until it's big enough to be a problem on its own.
+ */
+export const COLLAPSE_MEDIA_CHARS = 1_000;
+
+/**
+ * Collapses what can't be read: over-long lines, which stall layout, and encoded media, which
+ * is only noise on screen.
+ *
+ * Layout cost tracks the length of the longest line, not the size of the document. A 1 MB
+ * response of ordinary multi-line JSON renders fine, while the same 1 MB on a single line stalls
+ * the UI, because soft wrap has to measure the whole line end to end to find its break points.
+ * Measured in WKWebView, the engine macOS ships: 221 ms per render pass at 1 MB and 968 ms at
+ * 3 MB, against 51 ms and 138 ms once collapsed, with soft wrap left on.
+ *
+ * Three rules:
+ *
+ * 1. Collapse quoted values over {@link COLLAPSE_TOKEN_CHARS} whole, so a base64 string reads
+ *    as `"image": "PNG · 999.8 KB"` with its key intact. A minified body with several large
+ *    values keeps every one of its keys. Needs a grammar to find the value.
+ * 2. Collapse quoted values over {@link COLLAPSE_MEDIA_CHARS} that sniff as a known format,
+ *    which is what catches an ordinary embedded image long before it is a rendering problem.
+ * 3. On a line still over {@link MAX_VISIBLE_LINE_CHARS}, collapse whatever is left past the
+ *    column limit. This needs no grammar, so it covers plain text, undelimited tokens, and any
+ *    line that is simply long.
+ *
+ * Only what the viewport covers is examined, and only lines long enough to hold a collapse are
+ * looked at, so a document of ordinary short lines costs a length check per visible line and
+ * nothing else — no grammar is consulted and no tree is walked.
+ *
+ * Nothing leaves the document. Copy, filter and save all still see the full text, and the tag
+ * itself is a button, opening a menu that views, copies or saves exactly what it stands for.
+ *
+ * The value's own head says what it is — a `data:` URI names its media type, and raw base64
+ * gives its format up in the first dozen bytes — so the tag can name the format and open the
+ * value in the matching viewer without any of it being read. See {@link sniffValue}.
+ *
+ * An editable document gets rule 2 alone, as {@link mediaValues}. Encoded media is never typed
+ * by hand: it arrives pasted, and the only edit anyone makes to it is replacing it wholesale,
+ * which the tag already supports — {@link EditorView.atomicRanges} makes it delete as one unit.
+ * So collapsing it hides nothing anyone was going to read. The other two rules stay out, since
+ * they hide text by length alone, without being able to say what it is: under rule 3 a minified
+ * body would become uneditable past the column limit, which really would be editing text you
+ * can't see.
+ */
+
+/**
+ * Which of the three rules to apply.
+ *
+ * `media` is the subset safe for a document being edited: collapse only what we can name.
+ */
+export type CollapseRules = "all" | "media";
+
+/**
+ * A hidden range, the value it belongs to, and what that value turned out to be.
+ *
+ * The hidden range and the value differ under the column rule, where the value starts at the
+ * beginning of the line but only what runs past the limit is hidden. The tag stands in for
+ * [from, to) and copies exactly that; the viewer needs the whole value, [valueFrom, to).
+ */
+interface Collapse {
+  from: number;
+  to: number;
+  valueFrom: number;
+  sniffed: SniffedValue | null;
+}
+
+/**
+ * Lucide's `chevron-down`, inlined because the widget builds its DOM synchronously and
+ * rendering React here would leave it empty while CodeMirror measures line heights.
+ */
+const CHEVRON_DOWN =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" ' +
+  'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ' +
+  'aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>';
+
+/**
+ * Marks the tag as the thing that opens the menu.
+ *
+ * The whole tag is the target rather than the chevron alone: there is only one action, and a
+ * label you can't click next to a hit area a few pixels wide is a worse button than the tag
+ * itself. The chevron stays as the affordance that says so.
+ *
+ * A span with a role rather than a real button, because a button's box model makes the line
+ * taller — the one thing this extension exists to keep from happening.
+ */
+function makeTagButton(el: HTMLElement, title: string, onOpen: () => void) {
+  el.role = "button";
+  el.ariaHasPopup = "menu";
+  el.tabIndex = 0;
+  el.title = title;
+  el.ariaLabel = title;
+
+  // Keep the editor from moving the cursor when the tag is pressed
+  el.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  el.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onOpen();
+  });
+  el.addEventListener("keydown", (e) => {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    e.stopPropagation();
+    onOpen();
+  });
+}
+
+class LargeValueWidget extends WidgetType {
+  constructor(
+    private readonly from: number,
+    private readonly to: number,
+    private readonly valueFrom: number,
+    private readonly sniffed: SniffedValue | null,
+  ) {
+    super();
+  }
+
+  eq(other: LargeValueWidget) {
+    return (
+      other.from === this.from &&
+      other.to === this.to &&
+      other.valueFrom === this.valueFrom &&
+      other.sniffed?.mime === this.sniffed?.mime
+    );
+  }
+
+  toDOM(view: EditorView) {
+    const length = this.to - this.from;
+
+    const el = document.createElement("span");
+    // The same neutral tag styling a path parameter uses. The theme scope matters: these
+    // tokens resolve against the tag palette, not the editor's ambient one, where a
+    // tag-sized border is meant to be near invisible.
+    el.className = "x-theme-templateTag x-theme-templateTag--secondary template-tag";
+
+    const thumbnail = buildThumbnail(view, this.valueFrom, this.to, this.sniffed);
+    if (thumbnail != null) {
+      el.appendChild(thumbnail);
+    }
+
+    const label = document.createElement("span");
+    // A named type reads as a stand-in for the value, so it only needs to say what and how big.
+    // Without a name there is nothing to show but the fact that something is missing.
+    label.textContent =
+      this.sniffed == null
+        ? `${formatSize(length)} hidden…`
+        : `${this.sniffed.label} · ${formatSize(length)}`;
+    el.appendChild(label);
+
+    const chevron = document.createElement("span");
+    chevron.className = "tag-action";
+    chevron.ariaHidden = "true";
+    chevron.innerHTML = CHEVRON_DOWN;
+    el.appendChild(chevron);
+
+    makeTagButton(
+      el,
+      this.sniffed == null ? "Value actions" : `${this.sniffed.label} actions`,
+      () => fireAndForget(this.openMenu(view, el)),
+    );
+
+    return el;
+  }
+
+  /**
+   * Copy, view and save, in a menu opened against the button.
+   *
+   * Everything the menu needs is pulled in on click. The editor loads on every response, and
+   * neither the React menu nor the viewers behind the dialog are worth carrying until someone
+   * asks for them.
+   */
+  private async openMenu(view: EditorView, tag: HTMLElement) {
+    const [{ toggleContextMenu }, { showLargeValueDialog }, { encodingLabel, largeValueActions }] =
+      await Promise.all([
+        import("../../../lib/contextMenu"),
+        import("../../LargeValueDialog"),
+        import("../../../lib/largeValue"),
+      ]);
+
+    const { sniffed } = this;
+    // Sliced when an action runs rather than now, so opening the menu never touches the value
+    const value = () => view.state.sliceDoc(this.valueFrom, this.to);
+    const head = view.state.sliceDoc(
+      this.valueFrom,
+      Math.min(this.valueFrom + SNIFF_HEAD_CHARS, this.to),
+    );
+
+    // The whole tag, so the menu can align to whichever edge has room beside it
+    const rect = tag.getBoundingClientRect();
+    toggleContextMenu({
+      id: "large-value",
+      triggerPosition: { x: rect.left, y: rect.bottom },
+      triggerRect: rect,
+      triggerEl: tag,
+      items: [
+        { type: "separator", label: encodingLabel(head, sniffed, this.to - this.from) },
+        ...largeValueActions({
+          value,
+          sniffed,
+          // Exactly what the tag stands in for, which under the column rule is only the tail
+          copyText: () => view.state.sliceDoc(this.from, this.to),
+          onView: () => showLargeValueDialog({ text: value(), sniffed }),
+        }),
+      ],
+    });
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+/**
+ * How much encoded image a tag will preview. Roughly 3 MB of file, base64 being 4 bytes to 3.
+ *
+ * The decode runs on WebKit's image thread, but the bitmap it produces is sized by the image's
+ * own dimensions, not by the box we draw it in — a 4000×3000 photo costs 48 MB however small the
+ * thumbnail. So there has to be a limit, even though encoded size is only a proxy for the one
+ * that matters: a well-compressed photo can decode larger than a lossless screenshot twice its
+ * file size. This is set high enough to cover ordinary screenshots and wallpapers, since a tag
+ * that previews some images and not others is worse than one that previews none. Only widgets in
+ * the viewport are ever built, so a screenful is the most that decode at once.
+ */
+const THUMBNAIL_MAX_CHARS = 4_000_000;
+
+/**
+ * A preview of the value, at a size fixed before it loads.
+ *
+ * The box is a fixed square from the moment it's inserted, so the image arriving never changes
+ * the line's height or the tag's width. A growing line box is the layout cost this whole
+ * extension exists to avoid, and an image of unknown dimensions is the classic way to cause one.
+ *
+ * The src is the value's own text handed straight to the decoder as a data URI. Decoding the
+ * base64 ourselves first would mean walking megabytes on the main thread, which is the one
+ * thing that must not happen here.
+ */
+function buildThumbnail(
+  view: EditorView,
+  valueFrom: number,
+  to: number,
+  sniffed: SniffedValue | null,
+): HTMLElement | null {
+  if (sniffed == null || !sniffed.mime.startsWith("image/")) return null;
+  if (sniffed.encoding !== "base64") return null;
+  if (to - valueFrom > THUMBNAIL_MAX_CHARS) return null;
+
+  const img = document.createElement("img");
+  img.className = "tag-thumbnail";
+  img.alt = "";
+  img.ariaHidden = "true";
+  img.decoding = "async";
+  // A magic number can be wrong, and a data URI can lie. Drop the box rather than leave a
+  // broken-image glyph sitting in the tag.
+  img.addEventListener("error", () => img.remove());
+  // Read the document and build the data URI after the widget is measured and on screen
+  requestAnimationFrame(() => {
+    if (!img.isConnected) return;
+    const payload = view.state.sliceDoc(valueFrom + sniffed.offset, to);
+    img.src = `data:${sniffed.mime};base64,${payload}`;
+  });
+  return img;
+}
+
+interface Line {
+  from: number;
+  to: number;
+}
+
+/**
+ * The lines the given ranges touch, in document order and each listed once.
+ *
+ * Only lines long enough to hold a collapse are returned. That check is what keeps this free on
+ * ordinary documents: no grammar is consulted and no tree is walked for a screen of short lines.
+ */
+function collapsibleLines(state: EditorState, ranges: readonly { from: number; to: number }[]) {
+  const lines: Line[] = [];
+  let lastFrom = -1;
+
+  for (const range of ranges) {
+    let pos = range.from;
+    for (;;) {
+      const line = state.doc.lineAt(pos);
+      if (line.from > lastFrom) {
+        lastFrom = line.from;
+        if (line.to - line.from >= COLLAPSE_MEDIA_CHARS) {
+          lines.push({ from: line.from, to: line.to });
+        }
+      }
+      if (line.to >= range.to) break;
+      pos = line.to + 1;
+    }
+  }
+
+  return lines;
+}
+
+/**
+ * How long to spend parsing before falling back to the column rule.
+ *
+ * The initial parse is budgeted by time, so it stops partway through a document with several
+ * large values, and we'd only find the first one. Parsing the rest of a 1 MB body costs about
+ * 12 ms, against the 171 ms of layout it saves.
+ */
+const PARSE_TIMEOUT_MS = 100;
+
+/**
+ * The parsed tree covering these lines.
+ *
+ * Parsing is only ever forced for a line long enough to stall layout, where finding the values
+ * inside it is what saves the frame. For everything else we take whatever the background parse
+ * has reached and decorate again when it advances — a forced parse runs from the top of the
+ * document, so making one happen on every scroll would cost far more than the tags are worth.
+ */
+function treeForLines(state: EditorState, lines: Line[]): SyntaxTree {
+  const last = lines[lines.length - 1];
+  const stalls = lines.some((l) => l.to - l.from > MAX_VISIBLE_LINE_CHARS);
+  if (last == null || !stalls) {
+    return syntaxTree(state);
+  }
+  return ensureSyntaxTree(state, last.to, PARSE_TIMEOUT_MS) ?? syntaxTree(state);
+}
+
+const QUOTES = ['"', "'", "`"];
+
+/** A run of base64, long enough to be worth looking at. Nothing else can be encoded media. */
+const ENCODED_RUN = new RegExp(`[A-Za-z0-9+/=_-]{${COLLAPSE_MEDIA_CHARS},}`, "g");
+
+/** The header that turns a bare run into a data URI, when one sits right before it. */
+const DATA_URI_HEAD = /data:[^,;\s"']*(?:;[^,;\s"']*)*;base64,$/;
+
+/**
+ * Encoded media on this line, found by reading the text rather than the grammar.
+ *
+ * Deliberately grammar-free. Every editable field in the app mixes its language with the twig
+ * parser, which mounts the base language as an *overlay*, and overlays are not traversed by
+ * `Tree.iterate` — so a rule that walks the tree finds one enormous `Text` node and nothing
+ * inside it. Rule 2 has to work in those fields above all, since that is where images get
+ * pasted, and a run of base64 is a text pattern anyway: no grammar can describe it better than
+ * the alphabet does.
+ *
+ * A `data:` header is picked up by looking backwards from the run, so the whole URI collapses
+ * as one thing and its declared type is what names it.
+ */
+function findMediaRuns(state: EditorState, line: Line): Collapse[] {
+  const text = state.sliceDoc(line.from, line.to);
+  const collapses: Collapse[] = [];
+
+  ENCODED_RUN.lastIndex = 0;
+  for (let m = ENCODED_RUN.exec(text); m != null; m = ENCODED_RUN.exec(text)) {
+    let start = m.index;
+    // A data URI's own header breaks the alphabet, so the run starts after it
+    const header = DATA_URI_HEAD.exec(text.slice(0, start));
+    if (header != null) {
+      start = header.index;
+    }
+
+    const valueFrom = line.from + start;
+    const valueTo = line.from + m.index + m[0].length;
+    const head = state.sliceDoc(valueFrom, Math.min(valueFrom + SNIFF_HEAD_CHARS, valueTo));
+    const sniffed = sniffValue(head);
+
+    // Only hide what we can name. A short magic number matches by chance now and then, so the
+    // run itself has to look encoded too.
+    if (sniffed != null && sniffed.encoding === "base64" && isEncodedRun(head, sniffed.offset)) {
+      collapses.push({ from: valueFrom, to: valueTo, valueFrom, sniffed });
+    }
+  }
+
+  return collapses;
+}
+
+/**
+ * Quoted values big enough to be a rendering problem on their own, whatever they hold.
+ *
+ * Needs the grammar, to find where the value starts and ends, and so only runs for a document
+ * nobody is editing — which is also the only place this rule applies.
+ */
+function findLargeTokens(state: EditorState, tree: SyntaxTree, line: Line): Collapse[] {
+  const collapses: Collapse[] = [];
+
+  tree.iterate({
+    from: line.from,
+    to: line.to,
+    enter: (node) => {
+      // A node this small can't contain anything worth collapsing, and neither can its children
+      if (node.to - node.from < COLLAPSE_TOKEN_CHARS) return false;
+      // Only leaves, so we collapse the string itself rather than the object holding it
+      if (node.node.firstChild != null) return true;
+
+      const from = Math.max(node.from, line.from);
+      const to = Math.min(node.to, line.to);
+      const open = state.sliceDoc(from, from + 1);
+      const quoted = to - from >= 2 && QUOTES.includes(open) && state.sliceDoc(to - 1, to) === open;
+      if (!quoted) return false;
+
+      // Everything inside the quotes. The whole value is hidden, so it is its own value range
+      const valueFrom = from + 1;
+      const valueTo = to - 1;
+      if (valueTo - valueFrom < COLLAPSE_TOKEN_CHARS) return false;
+
+      const head = state.sliceDoc(valueFrom, Math.min(valueFrom + SNIFF_HEAD_CHARS, valueTo));
+      collapses.push({ from: valueFrom, to: valueTo, valueFrom, sniffed: sniffValue(head) });
+      return false;
+    },
+  });
+
+  return collapses;
+}
+
+/**
+ * Both rules' findings as one list, in document order, with nothing overlapping.
+ *
+ * A big quoted base64 value satisfies both rules, and two decorations over the same text is an
+ * error. The token wins where they collide, because its range stops at the quotes and so leaves
+ * the structure around it readable.
+ */
+function mergeCollapses(tokens: Collapse[], runs: Collapse[]): Collapse[] {
+  const merged = [...tokens];
+  for (const run of runs) {
+    if (!tokens.some((t) => run.from < t.to && t.from < run.to)) {
+      merged.push(run);
+    }
+  }
+  return merged.sort((a, b) => a.from - b.from);
+}
+
+/**
+ * Where the line runs past the column limit, counting only what is still visible after the
+ * token collapses, or -1 if it fits.
+ */
+function findColumnCut(line: Line, tokens: Collapse[]): number {
+  let visible = 0;
+  let pos = line.from;
+
+  for (const token of [...tokens, null]) {
+    const segmentEnd = token == null ? line.to : token.from;
+    if (segmentEnd > pos) {
+      if (visible + (segmentEnd - pos) > MAX_VISIBLE_LINE_CHARS) {
+        return pos + (MAX_VISIBLE_LINE_CHARS - visible);
+      }
+      visible += segmentEnd - pos;
+    }
+    if (token != null) {
+      pos = token.to;
+    }
+  }
+
+  return -1;
+}
+
+function collapsesForLine(
+  state: EditorState,
+  tree: SyntaxTree,
+  line: Line,
+  rules: CollapseRules,
+): Collapse[] {
+  const runs = findMediaRuns(state, line);
+  // Length alone only hides things on a line that would stall without it, and never in a
+  // document being edited, where hiding text by size would put it out of reach
+  const stalls = rules === "all" && line.to - line.from > MAX_VISIBLE_LINE_CHARS;
+  const tokens = mergeCollapses(stalls ? findLargeTokens(state, tree, line) : [], runs);
+
+  // Short enough to render, so there is nothing left to cut
+  if (!stalls) {
+    return tokens;
+  }
+
+  const cut = findColumnCut(line, tokens);
+  if (cut < 0) {
+    return tokens;
+  }
+
+  // The cut always lands in a visible stretch, so it never splits a token collapse
+  const kept = tokens.filter((t) => t.to <= cut);
+  // Only the tail is hidden, but the value it belongs to runs from the start of the line — a
+  // body that is nothing but one base64 blob is still recognisable from there
+  const head = state.sliceDoc(line.from, Math.min(line.from + SNIFF_HEAD_CHARS, line.to));
+  kept.push({ from: cut, to: line.to, valueFrom: line.from, sniffed: sniffValue(head) });
+  return kept;
+}
+
+/**
+ * The collapses covering the given document ranges.
+ *
+ * Kept separate from the plugin so the rules can be exercised against a state directly, with no
+ * view and no DOM.
+ */
+export function collapseDecorations(
+  state: EditorState,
+  ranges: readonly { from: number; to: number }[],
+  rules: CollapseRules = "all",
+): DecorationSet {
+  const lines = collapsibleLines(state, ranges);
+  if (lines.length === 0) {
+    return Decoration.none;
+  }
+
+  const tree = treeForLines(state, lines);
+  const decorations: Range<Decoration>[] = [];
+  for (const line of lines) {
+    for (const { from, to, valueFrom, sniffed } of collapsesForLine(state, tree, line, rules)) {
+      const widget = new LargeValueWidget(from, to, valueFrom, sniffed);
+      decorations.push(Decoration.replace({ widget }).range(from, to));
+    }
+  }
+  return Decoration.set(decorations);
+}
+
+/**
+ * Scoped to the viewport, so the cost is a screenful however big the document is.
+ *
+ * Recomputed when the document changes, when the viewport moves, and when background parsing
+ * advances — a value can only be found once the grammar has reached it.
+ */
+function collapsePlugin(rules: CollapseRules) {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = collapseDecorations(view.state, view.visibleRanges, rules);
+      }
+
+      update(update: ViewUpdate) {
+        if (
+          update.docChanged ||
+          update.viewportChanged ||
+          syntaxTree(update.startState) !== syntaxTree(update.state)
+        ) {
+          this.decorations = collapseDecorations(
+            update.view.state,
+            update.view.visibleRanges,
+            rules,
+          );
+        }
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+      // Step the cursor over a placeholder instead of stranding it inside, and delete it whole
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none),
+    },
+  );
+}
+
+/** All three rules. For a document nobody is editing. */
+export const largeValues: Extension = [collapsePlugin("all")];
+
+/** Only what we can name, which is the part that is safe to hide while someone is editing. */
+export const mediaValues: Extension = [collapsePlugin("media")];
diff --git a/apps/yaak-client/components/core/Editor/pairs/extension.ts b/apps/yaak-client/components/core/Editor/pairs/extension.ts
new file mode 100644
index 0000000..823e9b3
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/pairs/extension.ts
@@ -0,0 +1,12 @@
+import { LanguageSupport, LRLanguage } from "@codemirror/language";
+import { parser } from "./pairs";
+
+const language = LRLanguage.define({
+  name: "pairs",
+  parser,
+  languageData: {},
+});
+
+export function pairs() {
+  return new LanguageSupport(language, []);
+}
diff --git a/apps/yaak-client/components/core/Editor/pairs/highlight.ts b/apps/yaak-client/components/core/Editor/pairs/highlight.ts
new file mode 100644
index 0000000..954deff
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/pairs/highlight.ts
@@ -0,0 +1,7 @@
+import { styleTags, tags as t } from "@lezer/highlight";
+
+export const highlight = styleTags({
+  Sep: t.bracket,
+  Key: t.attributeName,
+  Value: t.string,
+});
diff --git a/apps/yaak-client/components/core/Editor/pairs/pairs.grammar b/apps/yaak-client/components/core/Editor/pairs/pairs.grammar
new file mode 100644
index 0000000..bcb1fca
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/pairs/pairs.grammar
@@ -0,0 +1,9 @@
+@top pairs { (Key Sep Value "\n")* }
+
+@tokens {
+  Sep { ":" $[ \t]+ }
+  Key { ":"? ![:]+ }
+  Value { ![\n]+ }
+}
+
+@external propSource highlight from "./highlight"
diff --git a/apps/yaak-client/components/core/Editor/pairs/pairs.terms.ts b/apps/yaak-client/components/core/Editor/pairs/pairs.terms.ts
new file mode 100644
index 0000000..279b8f8
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/pairs/pairs.terms.ts
@@ -0,0 +1,5 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const pairs = 1,
+  Key = 2,
+  Sep = 3,
+  Value = 4;
diff --git a/apps/yaak-client/components/core/Editor/pairs/pairs.test.ts b/apps/yaak-client/components/core/Editor/pairs/pairs.test.ts
new file mode 100644
index 0000000..440f7c5
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/pairs/pairs.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, test } from "vite-plus/test";
+import { parser } from "./pairs";
+
+function getNodeNames(input: string): string[] {
+  const tree = parser.parse(input);
+  const nodes: string[] = [];
+  const cursor = tree.cursor();
+  do {
+    if (cursor.name !== "pairs") {
+      nodes.push(cursor.name);
+    }
+  } while (cursor.next());
+  return nodes;
+}
+
+describe("pairs grammar", () => {
+  test("parses colon-space pairs with a value", () => {
+    expect(getNodeNames("foo: bar\n")).toEqual(["Key", "Sep", "Value"]);
+  });
+
+  test("does not parse colon-without-space as a value", () => {
+    const nodes = getNodeNames("foo:bar\n");
+
+    expect(nodes).not.toContain("Value");
+  });
+});
diff --git a/apps/yaak-client/components/core/Editor/pairs/pairs.ts b/apps/yaak-client/components/core/Editor/pairs/pairs.ts
new file mode 100644
index 0000000..fdd40d5
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/pairs/pairs.ts
@@ -0,0 +1,29 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import { LRParser } from "@lezer/lr";
+import { highlight } from "./highlight";
+export const parser = LRParser.deserialize({
+  version: 14,
+  states: "zQQOPOOOVOQO'#CaQQOPOOO[OSO,58{OOOO-E6_-E6_OaOQO1G.gOOOO7+$R7+$R",
+  stateData: "f~OQPO~ORRO~OSTO~OVUO~O",
+  goto: "]UPPPPPVQQORSQ",
+  nodeNames: "⚠ pairs Key Sep Value",
+  maxTerm: 7,
+  propSources: [highlight],
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData:
+    "%]VRVOYhYZ#[Z![h![!]#o!];'Sh;'S;=`#U<%lOhToVQPSSOYhYZ!UZ![h![!]!m!];'Sh;'S;=`#U<%lOhP!ZSQPO![!U!];'S!U;'S;=`!g<%lO!UP!jP;=`<%l!US!rSSSOY!mZ;'S!m;'S;=`#O<%lO!mS#RP;=`<%l!mT#XP;=`<%lhR#cSVQQPO![!U!];'S!U;'S;=`!g<%lO!UV#tYSSOXhXY$dYZ!UZphpq$dq![h![!]!m!];'Sh;'S;=`#U<%lOhV$mYQPRQSSOXhXY$dYZ!UZphpq$dq![h![!]!m!];'Sh;'S;=`#U<%lOh",
+  tokenizers: [0, 1, 2],
+  topRules: { pairs: [0, 1] },
+  tokenPrec: 0,
+  termNames: {
+    "0": "⚠",
+    "1": "@top",
+    "2": "Key",
+    "3": "Sep",
+    "4": "Value",
+    "5": '(Key Sep Value "\\n")+',
+    "6": "␄",
+    "7": '"\\n"',
+  },
+});
diff --git a/apps/yaak-client/components/core/Editor/searchMatchCount.test.ts b/apps/yaak-client/components/core/Editor/searchMatchCount.test.ts
new file mode 100644
index 0000000..ad63819
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/searchMatchCount.test.ts
@@ -0,0 +1,202 @@
+import { SearchQuery } from "@codemirror/search";
+import { EditorState } from "@codemirror/state";
+import { describe, expect, test } from "vite-plus/test";
+import {
+  currentMatch,
+  literalSearch,
+  MAX_COUNT,
+  MatchCounter,
+  normalizeDoc,
+  normalizeSearch,
+  scanNormalized,
+  scanQuery,
+} from "./searchMatchCount";
+
+type QueryConfig = ConstructorParameters<typeof SearchQuery>[0];
+
+const stateOf = (doc: string) => EditorState.create({ doc });
+
+/**
+ * The matches the counter finds, having checked them against the search panel's own cursor.
+ *
+ * The cursor decides which ranges the editor highlights and which one `find next` lands on, so
+ * a count that doesn't agree with it is a wrong count, however fast it was to produce.
+ */
+function matchesOf(doc: string, config: QueryConfig) {
+  const state = stateOf(doc);
+  const query = new SearchQuery(config);
+  const matches = new MatchCounter().matches(state, query);
+  expect(matches).toEqual(scanQuery(state, query));
+  return matches;
+}
+
+const countOf = (doc: string, config: QueryConfig) => matchesOf(doc, config).length;
+
+describe("counting", () => {
+  test("counts every match, whatever the case", () => {
+    expect(countOf("one Two three two", { search: "two" })).toBe(2);
+    expect(countOf("one Two three two", { search: "two", caseSensitive: true })).toBe(1);
+  });
+
+  test("skips matches overlapping an earlier one", () => {
+    expect(countOf("aaaaa", { search: "aa" })).toBe(2);
+    expect(countOf("ababa", { search: "aba" })).toBe(1);
+  });
+
+  test("treats a query as text, not as a pattern", () => {
+    expect(countOf("a.b axb", { search: "a.b" })).toBe(1);
+  });
+
+  test("unquotes escapes unless the query is literal", () => {
+    expect(countOf("one\ntwo\nthree", { search: "\\n" })).toBe(2);
+    expect(countOf("one\\ntwo", { search: "\\n", literal: true })).toBe(1);
+  });
+
+  test("counts regexp and whole word queries through the cursor", () => {
+    expect(literalSearch(new SearchQuery({ search: "a", regexp: true }))).toBe(null);
+    expect(literalSearch(new SearchQuery({ search: "a", wholeWord: true }))).toBe(null);
+    expect(countOf("a1 b2 c3", { search: "[a-z]\\d", regexp: true })).toBe(3);
+    expect(countOf("cat cats cat", { search: "cat", wholeWord: true })).toBe(2);
+  });
+
+  test("stops counting at the cap", () => {
+    expect(countOf("x".repeat(MAX_COUNT + 100), { search: "x" })).toBe(MAX_COUNT + 1);
+  });
+
+  test("reports where the matches are", () => {
+    expect(matchesOf("ab..ab", { search: "ab" })).toEqual([
+      { from: 0, to: 2 },
+      { from: 4, to: 6 },
+    ]);
+  });
+
+  test("finds nothing to match with an empty needle", () => {
+    expect(scanNormalized(normalizeDoc("abc", false), "")).toEqual([]);
+  });
+});
+
+describe("normalization", () => {
+  test("finds what a character decomposes into", () => {
+    // The é is one character holding an `e`, and the match covers the whole of it
+    expect(matchesOf("café", { search: "e" })).toEqual([{ from: 3, to: 4 }]);
+    expect(matchesOf("ﬁle", { search: "fi" })).toEqual([{ from: 0, to: 1 }]);
+    expect(matchesOf("a…b", { search: "..." })).toEqual([{ from: 1, to: 2 }]);
+    expect(countOf("one two", { search: "one two" })).toBe(1);
+    expect(countOf("ｆｕｌｌ width", { search: "full" })).toBe(1);
+  });
+
+  test("matches a decomposed query against composed text, and the reverse", () => {
+    expect(countOf("café", { search: "café" })).toBe(1);
+    expect(countOf("café", { search: "café" })).toBe(1);
+    expect(countOf("café", { search: "café" })).toBe(1);
+  });
+
+  test("keeps offsets straight after an expansion", () => {
+    expect(matchesOf("é.é.end", { search: "end" })).toEqual([{ from: 4, to: 7 }]);
+    expect(matchesOf("ﬁﬁﬁ stop", { search: "stop" })).toEqual([{ from: 4, to: 8 }]);
+  });
+
+  test("normalizes the query whole, the document by character", () => {
+    expect(normalizeSearch("CAFÉ", false)).toBe("café");
+    expect(normalizeSearch("CAFÉ", true)).toBe("CAFÉ");
+    // Whole-string NFKD would fold this to a final sigma, which the cursor never does
+    expect(normalizeDoc("ΟΔΟΣ", false).text).toBe("οδοσ");
+  });
+
+  test("leaves a document that normalizes to itself untouched", () => {
+    const { text, expansions } = normalizeDoc("plain 日本 🎉 text", false);
+    expect(text).toBe("plain 日本 🎉 text");
+    expect(expansions).toEqual([]);
+  });
+});
+
+describe("current match", () => {
+  const matches = [
+    { from: 0, to: 2 },
+    { from: 4, to: 6 },
+    { from: 8, to: 10 },
+  ];
+
+  test("counts from one, and reports 0 off a match", () => {
+    expect(currentMatch(matches, { from: 4, to: 6 })).toBe(2);
+    expect(currentMatch(matches, { from: 8, to: 10 })).toBe(3);
+    expect(currentMatch(matches, { from: 5, to: 5 })).toBe(2);
+    expect(currentMatch(matches, { from: 2, to: 3 })).toBe(0);
+    expect(currentMatch(matches, { from: 4, to: 7 })).toBe(0);
+    expect(currentMatch([], { from: 0, to: 0 })).toBe(0);
+  });
+
+  test("moving the selection doesn't scan again", () => {
+    const state = stateOf("a1 b2 c3");
+    const query = new SearchQuery({ search: "\\d", regexp: true });
+    const counter = new MatchCounter();
+    const found = counter.matches(state, query);
+
+    // The document a selection-only transaction leaves behind is the one already scanned
+    const moved = state.update({ selection: { anchor: 4, head: 5 } }).state;
+    expect(counter.matches(moved, query)).toBe(found);
+    expect(currentMatch(found, moved.selection.main)).toBe(2);
+  });
+});
+
+/**
+ * The mapping from normalized offsets back to document offsets is the part of this that can go
+ * quietly wrong, and only on input nobody thinks to write a case for. So generate the input.
+ */
+describe("against the cursor, on awkward text", () => {
+  const ALPHABET = [
+    ..."abcABC .\\\n".split(""),
+    "é",
+    "é",
+    "ﬁ",
+    "…",
+    " ",
+    "İ",
+    "Σ",
+    "ς",
+    "日",
+    "🎉",
+    "Ⅻ",
+    "ｆ",
+    "①",
+    "́",
+  ];
+
+  /** Seeded, so a failure is the same failure next run */
+  function random(seed: number) {
+    let state = seed;
+    return () => {
+      state = (state * 1664525 + 1013904223) >>> 0;
+      return state / 2 ** 32;
+    };
+  }
+
+  for (const caseSensitive of [false, true]) {
+    test(`agrees on every generated document (caseSensitive: ${caseSensitive})`, () => {
+      const next = random(caseSensitive ? 20260831 : 7);
+
+      for (let round = 0; round < 400; round++) {
+        const doc = Array.from(
+          { length: 2 + Math.floor(next() * 60) },
+          () => ALPHABET[Math.floor(next() * ALPHABET.length)]!,
+        ).join("");
+
+        // Half the queries are lifted out of the document, so matches are actually found
+        const start = Math.floor(next() * doc.length);
+        const search =
+          next() < 0.5
+            ? doc.slice(start, start + 1 + Math.floor(next() * 3))
+            : Array.from(
+                { length: 1 + Math.floor(next() * 2) },
+                () => ALPHABET[Math.floor(next() * ALPHABET.length)]!,
+              ).join("");
+        if (search === "") continue;
+
+        const state = stateOf(doc);
+        const query = new SearchQuery({ search, caseSensitive });
+        const where = `doc=${JSON.stringify(doc)} search=${JSON.stringify(search)}`;
+        expect(new MatchCounter().matches(state, query), where).toEqual(scanQuery(state, query));
+      }
+    });
+  }
+});
diff --git a/apps/yaak-client/components/core/Editor/searchMatchCount.ts b/apps/yaak-client/components/core/Editor/searchMatchCount.ts
new file mode 100644
index 0000000..5f05fa2
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/searchMatchCount.ts
@@ -0,0 +1,325 @@
+import { getSearchQuery, type SearchQuery, searchPanelOpen } from "@codemirror/search";
+import type { EditorState, Extension, Text } from "@codemirror/state";
+import { type EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view";
+
+/** Matches are counted no further than this, since an exact total stops being useful long before */
+export const MAX_COUNT = 9999;
+
+/** What normalizing rewrites: anything outside ASCII, plus the case it folds */
+const REWRITTEN = /\P{ASCII}|[A-Z]+/gu;
+const REWRITTEN_CASE_SENSITIVE = /\P{ASCII}/gu;
+
+export interface Match {
+  from: number;
+  to: number;
+}
+
+/** A character whose normalized form is a different length, shifting every offset past it */
+interface Expansion {
+  normFrom: number;
+  normTo: number;
+  docFrom: number;
+  docTo: number;
+}
+
+/** A document as SearchCursor compares it, with what's needed to get back to real offsets */
+export interface NormalizedDoc {
+  text: string;
+  expansions: Expansion[];
+}
+
+/**
+ * Rewrites a document the way SearchCursor does — NFKD, then a case fold unless the search is
+ * case-sensitive — in a single pass rather than one call per code point.
+ *
+ * The cursor spends 90% of its time asking ICU about one character at a time, which is what
+ * makes counting matches in a large response slow. Doing it a character at a time still matters
+ * for the result, since it keeps NFKD from reordering marks across characters, so the
+ * granularity stays and only the repeated work goes: each distinct character is normalized once
+ * and the answer reused, and ASCII runs never reach ICU at all.
+ */
+export function normalizeDoc(text: string, caseSensitive: boolean): NormalizedDoc {
+  const rewritten = new Map<string, string>();
+  const expansions: Expansion[] = [];
+  let shift = 0;
+
+  const normalized = text.replace(
+    caseSensitive ? REWRITTEN_CASE_SENSITIVE : REWRITTEN,
+    (chunk: string, at: number) => {
+      // An ASCII run only ever folds case, which can't change its length
+      if (chunk.charCodeAt(0) < 0x80) return chunk.toLowerCase();
+
+      let out = rewritten.get(chunk);
+      if (out === undefined) {
+        out = chunk.normalize("NFKD");
+        if (!caseSensitive) out = out.toLowerCase();
+        rewritten.set(chunk, out);
+      }
+
+      if (out.length !== chunk.length) {
+        expansions.push({
+          normFrom: at + shift,
+          normTo: at + shift + out.length,
+          docFrom: at,
+          docTo: at + chunk.length,
+        });
+        shift += out.length - chunk.length;
+      }
+
+      return out;
+    },
+  );
+
+  return { text: normalized, expansions };
+}
+
+/** The query as SearchCursor compares it, which it normalizes whole rather than by character */
+export function normalizeSearch(search: string, caseSensitive: boolean): string {
+  const normalized = search.normalize("NFKD");
+  return caseSensitive ? normalized : normalized.toLowerCase();
+}
+
+/** Every occurrence of `needle`, skipping matches that overlap an earlier one */
+export function scanNormalized(doc: NormalizedDoc, needle: string): Match[] {
+  const matches: Match[] = [];
+  if (needle === "") return matches;
+
+  const { text } = doc;
+  let pos = text.indexOf(needle);
+  while (pos >= 0) {
+    let end = pos + needle.length;
+    // However the query was cut, a match ends on a whole code point, as the cursor's do
+    if (isLowSurrogate(text.charCodeAt(end))) end++;
+
+    matches.push({ from: docStart(doc, pos), to: docEnd(doc, end) });
+    if (matches.length > MAX_COUNT) break;
+
+    pos = text.indexOf(needle, resumeAfter(doc, end));
+  }
+
+  return matches;
+}
+
+/** The same through the query's own cursor, which handles regexps and whole words */
+export function scanQuery(state: EditorState, query: SearchQuery): Match[] {
+  const matches: Match[] = [];
+  const cursor = query.getCursor(state);
+
+  for (let result = cursor.next(); !result.done; result = cursor.next()) {
+    matches.push({ from: result.value.from, to: result.value.to });
+    if (matches.length > MAX_COUNT) break;
+  }
+
+  return matches;
+}
+
+const isLowSurrogate = (code: number) => code >= 0xdc00 && code <= 0xdfff;
+
+/** The last character expansion beginning at or before `offset`, if there is one */
+function expansionAt({ expansions }: NormalizedDoc, offset: number): Expansion | null {
+  let low = 0;
+  let high = expansions.length - 1;
+  let found: Expansion | null = null;
+
+  while (low <= high) {
+    const mid = (low + high) >> 1;
+    if (expansions[mid]!.normFrom <= offset) {
+      found = expansions[mid]!;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+
+  return found;
+}
+
+function docStart(doc: NormalizedDoc, offset: number): number {
+  const expansion = expansionAt(doc, offset);
+  if (expansion == null) return offset;
+  // A match starting inside a character's expansion starts at the character
+  return offset < expansion.normTo
+    ? expansion.docFrom
+    : offset - (expansion.normTo - expansion.docTo);
+}
+
+/**
+ * Where scanning picks up after a match ending at `offset`.
+ *
+ * The cursor moves through the document a character at a time, so once a match ends inside a
+ * character's expansion the rest of that expansion is behind it — "…" holds three dots but only
+ * ever counts as one match of ".".
+ */
+function resumeAfter(doc: NormalizedDoc, offset: number): number {
+  const expansion = expansionAt(doc, offset);
+  return expansion != null && offset > expansion.normFrom && offset < expansion.normTo
+    ? expansion.normTo
+    : offset;
+}
+
+function docEnd(doc: NormalizedDoc, offset: number): number {
+  const expansion = expansionAt(doc, offset);
+  if (expansion == null) return offset;
+  if (offset <= expansion.normFrom) return expansion.docFrom;
+  // A match ending inside a character's expansion covers the whole character
+  return offset < expansion.normTo
+    ? expansion.docTo
+    : offset - (expansion.normTo - expansion.docTo);
+}
+
+/** Position of the match holding the selection, counting from one, or 0 when it isn't on one */
+export function currentMatch(matches: Match[], selection: { from: number; to: number }): number {
+  let index = 0;
+  for (const match of matches) {
+    index++;
+    if (match.from <= selection.from && match.to >= selection.to) return index;
+  }
+  return 0;
+}
+
+/** The text a plain query looks for, or null when only the cursor can answer it */
+export function literalSearch(query: SearchQuery): string | null {
+  if (query.regexp || query.wholeWord || query.test != null) return null;
+  // Mirrors SearchQuery's own unquoting, which the published type doesn't expose
+  return query.literal
+    ? query.search
+    : query.search.replace(/\\([nrt\\])/g, (_, ch) =>
+        ch === "n" ? "\n" : ch === "r" ? "\r" : ch === "t" ? "\t" : "\\",
+      );
+}
+
+/**
+ * Finds the matches for the search panel, keeping the normalized document and the matches it
+ * last found, so neither moving the selection nor typing another character starts over.
+ */
+export class MatchCounter {
+  private doc: { doc: Text; caseSensitive: boolean; normalized: NormalizedDoc } | null = null;
+  private last: { doc: Text; query: SearchQuery; matches: Match[] } | null = null;
+
+  matches(state: EditorState, query: SearchQuery): Match[] {
+    const last = this.last;
+    if (last != null && last.doc === state.doc && last.query.eq(query)) {
+      return last.matches;
+    }
+
+    const matches = this.scan(state, query);
+    this.last = { doc: state.doc, query, matches };
+    return matches;
+  }
+
+  private scan(state: EditorState, query: SearchQuery): Match[] {
+    const search = literalSearch(query);
+    if (search == null) return scanQuery(state, query);
+
+    const doc = this.normalizedDoc(state.doc, query.caseSensitive);
+    return scanNormalized(doc, normalizeSearch(search, query.caseSensitive));
+  }
+
+  private normalizedDoc(doc: Text, caseSensitive: boolean): NormalizedDoc {
+    const cached = this.doc;
+    if (cached != null && cached.doc === doc && cached.caseSensitive === caseSensitive) {
+      return cached.normalized;
+    }
+
+    const normalized = normalizeDoc(doc.toString(), caseSensitive);
+    this.doc = { doc, caseSensitive, normalized };
+    return normalized;
+  }
+}
+
+/**
+ * A CodeMirror extension that displays the total number of search matches
+ * inside the built-in search panel.
+ */
+export function searchMatchCount(): Extension {
+  return ViewPlugin.fromClass(
+    class {
+      private countEl: HTMLElement | null = null;
+      private counter = new MatchCounter();
+
+      constructor(private view: EditorView) {
+        this.updateCount();
+      }
+
+      update(update: ViewUpdate) {
+        // Recompute when doc changes, search state changes, or selection moves
+        const query = getSearchQuery(update.state);
+        const prevQuery = getSearchQuery(update.startState);
+        const open = searchPanelOpen(update.state);
+        const prevOpen = searchPanelOpen(update.startState);
+
+        if (update.docChanged || update.selectionSet || !query.eq(prevQuery) || open !== prevOpen) {
+          this.updateCount();
+        }
+      }
+
+      private updateCount() {
+        const state = this.view.state;
+        const open = searchPanelOpen(state);
+        const query = getSearchQuery(state);
+
+        if (!open) {
+          this.removeCountEl();
+          return;
+        }
+
+        this.ensureCountEl();
+        if (this.countEl == null) return;
+
+        if (!query.search) {
+          this.countEl.textContent = "0/0";
+          return;
+        }
+
+        const matches = this.counter.matches(state, query);
+        if (matches.length > MAX_COUNT) {
+          this.countEl.textContent = `${MAX_COUNT}+`;
+        } else if (matches.length === 0) {
+          this.countEl.textContent = "0/0";
+        } else {
+          const current = currentMatch(matches, state.selection.main);
+          this.countEl.textContent = `${current}/${matches.length}`;
+        }
+      }
+
+      private ensureCountEl() {
+        // Find the search panel in the editor DOM
+        const panel = this.view.dom.querySelector(".cm-search");
+        if (!panel) {
+          this.countEl = null;
+          return;
+        }
+
+        if (this.countEl && this.countEl.parentElement === panel) {
+          return; // Already attached
+        }
+
+        this.countEl = document.createElement("span");
+        this.countEl.className = "cm-search-match-count";
+
+        // Reorder: insert prev button, then next button, then count after the search input
+        const searchInput = panel.querySelector("input");
+        const prevBtn = panel.querySelector('button[name="prev"]');
+        const nextBtn = panel.querySelector('button[name="next"]');
+        if (searchInput && searchInput.parentElement === panel) {
+          searchInput.after(this.countEl);
+          if (prevBtn) this.countEl.after(prevBtn);
+          if (nextBtn && prevBtn) prevBtn.after(nextBtn);
+        } else {
+          panel.prepend(this.countEl);
+        }
+      }
+
+      private removeCountEl() {
+        if (this.countEl) {
+          this.countEl.remove();
+          this.countEl = null;
+        }
+      }
+
+      destroy() {
+        this.removeCountEl();
+      }
+    },
+  );
+}
diff --git a/apps/yaak-client/components/core/Editor/singleLine.ts b/apps/yaak-client/components/core/Editor/singleLine.ts
new file mode 100644
index 0000000..20c4b14
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/singleLine.ts
@@ -0,0 +1,47 @@
+import type { Extension, TransactionSpec } from "@codemirror/state";
+import { EditorSelection, EditorState, Transaction } from "@codemirror/state";
+
+/**
+ * A CodeMirror extension that forces single-line input by stripping
+ * all newline characters from user input, including pasted content.
+ *
+ * This extension uses a transaction filter to intercept user input,
+ * removes any newline characters, and adjusts the selection to the end
+ * of the inserted text.
+ *
+ * IME composition events are ignored to preserve proper input behavior
+ * for non-Latin languages.
+ *
+ * @returns A CodeMirror extension that enforces single-line editing.
+ */
+export function singleLineExtensions(): Extension {
+  return EditorState.transactionFilter.of(
+    (tr: Transaction): TransactionSpec | readonly TransactionSpec[] => {
+      if (!tr.isUserEvent("input") || tr.isUserEvent("input.type.compose")) return tr;
+
+      const changes: { from: number; to: number; insert: string }[] = [];
+
+      tr.changes.iterChanges((_fromA, toA, fromB, _toB, inserted) => {
+        let insert = "";
+        for (const line of inserted.iterLines()) {
+          insert += line.replace(/\n/g, "");
+        }
+
+        if (insert !== inserted.toString()) {
+          changes.push({ from: fromB, to: toA, insert });
+        }
+      });
+
+      const lastChange = changes[changes.length - 1];
+      if (lastChange == null) return tr;
+
+      const selection = EditorSelection.cursor(lastChange.from + lastChange.insert.length);
+
+      return {
+        changes,
+        selection,
+        userEvent: tr.annotation(Transaction.userEvent) ?? undefined,
+      };
+    },
+  );
+}
diff --git a/apps/yaak-client/components/core/Editor/sniffValue.test.ts b/apps/yaak-client/components/core/Editor/sniffValue.test.ts
new file mode 100644
index 0000000..0e55936
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/sniffValue.test.ts
@@ -0,0 +1,170 @@
+import { describe, expect, test } from "vite-plus/test";
+import { decodeBase64Prefix, labelForMime, SNIFF_HEAD_CHARS, sniffValue } from "./sniffValue";
+
+/** A base64 value that starts with `magic` and runs on for a while, as a real one would */
+function base64Of(magic: number[], length = 2_000): string {
+  const bytes = new Uint8Array(length);
+  bytes.set(magic);
+  for (let i = magic.length; i < length; i++) {
+    bytes[i] = i % 251;
+  }
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary);
+}
+
+/** One character, one byte. These are all ASCII signatures. */
+function ascii(s: string): number[] {
+  const bytes: number[] = [];
+  for (let i = 0; i < s.length; i++) {
+    bytes.push(s.charCodeAt(i));
+  }
+  return bytes;
+}
+
+/** Four bytes no signature looks at: a RIFF chunk length, or an ISO-BMFF box size */
+const IGNORED = [0x00, 0x00, 0x00, 0x20];
+
+const PNG = [0x89, ...ascii("PNG"), 0x0d, 0x0a, 0x1a, 0x0a];
+const JPEG = [0xff, 0xd8, 0xff, 0xe0];
+const PDF = ascii("%PDF-1.7");
+
+describe("magic numbers", () => {
+  const cases: [string, number[], string, string][] = [
+    ["PNG", PNG, "image/png", "PNG"],
+    ["JPEG", JPEG, "image/jpeg", "JPEG"],
+    ["GIF", ascii("GIF89a"), "image/gif", "GIF"],
+    ["PDF", PDF, "application/pdf", "PDF"],
+    ["WEBP", [...ascii("RIFF"), ...IGNORED, ...ascii("WEBP")], "image/webp", "WEBP"],
+    ["WAV", [...ascii("RIFF"), ...IGNORED, ...ascii("WAVE")], "audio/wav", "WAV"],
+    ["ZIP", [...ascii("PK"), 0x03, 0x04], "application/zip", "ZIP"],
+    ["GZIP", [0x1f, 0x8b, 0x08], "application/gzip", "GZIP"],
+    ["MP3", [...ascii("ID3"), 0x04], "audio/mpeg", "MP3"],
+    ["OGG", ascii("OggS"), "audio/ogg", "OGG"],
+    ["FLAC", ascii("fLaC"), "audio/flac", "FLAC"],
+    ["WEBM", [0x1a, 0x45, 0xdf, 0xa3], "video/webm", "WEBM"],
+    ["MP4", [...IGNORED, ...ascii("ftypisom")], "video/mp4", "MP4"],
+    ["AVIF", [...IGNORED, ...ascii("ftypavif")], "image/avif", "AVIF"],
+    ["HEIC", [...IGNORED, ...ascii("ftypheic")], "image/heic", "HEIC"],
+    ["M4A", [...IGNORED, ...ascii("ftypM4A ")], "audio/mp4", "M4A"],
+    ["MOV", [...IGNORED, ...ascii("ftypqt  ")], "video/quicktime", "MOV"],
+    ["BMP", ascii("BMxx"), "image/bmp", "BMP"],
+    ["TIFF", [...ascii("II"), 0x2a, 0x00], "image/tiff", "TIFF"],
+  ];
+
+  for (const [name, magic, mime, label] of cases) {
+    test(`recognises ${name}`, () => {
+      expect(sniffValue(base64Of(magic))).toEqual({ mime, label, offset: 0, encoding: "base64" });
+    });
+  }
+
+  test("recognises nothing in arbitrary base64", () => {
+    expect(sniffValue(btoa("just some text that happens to be encoded"))).toBeNull();
+  });
+
+  test("recognises nothing in text that isn't base64", () => {
+    expect(sniffValue("the quick brown fox jumps over the lazy dog".repeat(10))).toBeNull();
+  });
+
+  test("recognises nothing in a JWT-shaped value", () => {
+    expect(sniffValue(`${btoa('{"alg":"HS256"}')}.${btoa('{"sub":"1"}')}.c2ln`)).toBeNull();
+  });
+
+  test("reads the url-safe alphabet", () => {
+    const urlSafe = base64Of(PNG).replaceAll("+", "-").replaceAll("/", "_");
+    expect(sniffValue(urlSafe)?.label).toBe("PNG");
+  });
+
+  test("ignores leading whitespace, and counts it in the offset", () => {
+    expect(sniffValue(`   ${base64Of(PNG)}`)).toMatchObject({ label: "PNG", offset: 3 });
+  });
+});
+
+describe("data URIs", () => {
+  test("takes the declared type over the bytes", () => {
+    const uri = `data:image/svg+xml;base64,${btoa("<svg/>")}`;
+    expect(sniffValue(uri)).toEqual({
+      mime: "image/svg+xml",
+      label: "SVG",
+      offset: "data:image/svg+xml;base64,".length,
+      encoding: "base64",
+    });
+  });
+
+  test("points past the header, so the payload can be decoded from there", () => {
+    const payload = base64Of(PNG);
+    const uri = `data:image/png;base64,${payload}`;
+    const sniffed = sniffValue(uri)!;
+    expect(uri.slice(sniffed.offset, sniffed.offset + 8)).toBe(payload.slice(0, 8));
+  });
+
+  test("falls back to the bytes when the declared type says nothing", () => {
+    const uri = `data:application/octet-stream;base64,${base64Of(PDF)}`;
+    expect(sniffValue(uri)).toMatchObject({ mime: "application/pdf", label: "PDF" });
+  });
+
+  test("handles a header with no type at all", () => {
+    expect(sniffValue(`data:;base64,${base64Of(JPEG)}`)).toMatchObject({ mime: "image/jpeg" });
+  });
+
+  test("handles extra parameters", () => {
+    const uri = `data:text/plain;charset=utf-8;base64,${btoa("hello")}`;
+    expect(sniffValue(uri)).toMatchObject({ mime: "text/plain", encoding: "base64" });
+  });
+
+  test("handles a percent-encoded payload", () => {
+    expect(sniffValue("data:text/html,%3Ch1%3Ehi%3C/h1%3E")).toEqual({
+      mime: "text/html",
+      label: "HTML",
+      offset: "data:text/html,".length,
+      encoding: "percent",
+    });
+  });
+
+  test("defaults a bare percent-encoded payload to text", () => {
+    expect(sniffValue("data:,hello%20there")).toMatchObject({
+      mime: "text/plain",
+      encoding: "percent",
+    });
+  });
+});
+
+describe("decoding only the head", () => {
+  test("reads no more of the value than the bytes asked for", () => {
+    const big = base64Of(PNG, 3_000_000);
+    // Truncating to the head must not change what is found, which is the whole point:
+    // callers only ever hand it a slice
+    expect(sniffValue(big.slice(0, SNIFF_HEAD_CHARS))).toEqual(sniffValue(big));
+  });
+
+  test("decodes whole 4-character groups only", () => {
+    // 12 bytes needs 16 characters; a 15-character slice yields the 12 bytes of 3 whole groups
+    expect(decodeBase64Prefix(base64Of(PNG), 0, 12)).toHaveLength(12);
+    expect(decodeBase64Prefix(base64Of(PNG).slice(0, 15), 0, 12)).toHaveLength(9);
+  });
+
+  test("declines a value too short to hold a group", () => {
+    expect(decodeBase64Prefix("abc", 0, 12)).toBeNull();
+  });
+
+  test("declines text outside the alphabet", () => {
+    expect(decodeBase64Prefix("hello world, not base64!", 0, 12)).toBeNull();
+  });
+});
+
+describe("labels", () => {
+  test.each([
+    ["image/png", "PNG"],
+    ["image/svg+xml", "SVG"],
+    ["text/plain", "TEXT"],
+    ["application/vnd.ms-excel", "MS-EXCEL"],
+    ["image/x-icon", "ICON"],
+    ["application/octet-stream", "APPLICATION"],
+    ["font/woff2", "WOFF2"],
+    ["application/vnd.openxmlformats-officedocument.wordprocessingml.document", "DOCUMENT"],
+  ])("%s reads as %s", (mime, label) => {
+    expect(labelForMime(mime)).toBe(label);
+  });
+});
diff --git a/apps/yaak-client/components/core/Editor/sniffValue.ts b/apps/yaak-client/components/core/Editor/sniffValue.ts
new file mode 100644
index 0000000..6a23a6a
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/sniffValue.ts
@@ -0,0 +1,219 @@
+/**
+ * What a collapsed value turns out to be.
+ *
+ * Sniffing reads the head of the value only. A `data:` URI states its own media type, and raw
+ * base64 gives up its type in the first few bytes, so neither needs the rest — which is the
+ * point, since the whole reason these values are collapsed is that touching all of one costs
+ * enough to stall the UI.
+ */
+export interface SniffedValue {
+  /** Full media type, e.g. `image/png`. What the dialog routes on. */
+  mime: string;
+  /** A word for the tag, e.g. `PNG`. */
+  label: string;
+  /** Where the encoded payload starts in the value, past any `data:` header. */
+  offset: number;
+  encoding: "base64" | "percent";
+}
+
+/**
+ * How much of a value {@link sniffValue} needs. Enough for a `data:` header of realistic
+ * length, and far more than the 24 base64 characters the magic numbers are read from.
+ */
+export const SNIFF_HEAD_CHARS = 256;
+
+/** Bytes the longest signature needs: `RIFF????WEBP`, and an ISO-BMFF brand at offset 8. */
+const SNIFF_BYTES = 12;
+
+/** `data:[<mime>][;<param>…],` — the payload follows the comma. */
+const DATA_URI = /^data:([^,;]*)((?:;[^,;]*)*),/;
+
+/** Media types that name no format, so the bytes are worth a look even when one is declared. */
+const UNINFORMATIVE = ["", "application/octet-stream", "binary/octet-stream"];
+
+interface Signature {
+  label: string;
+  mime: string;
+  offset?: number;
+  /** Byte values, where `null` matches anything */
+  magic: readonly (number | null)[];
+}
+
+/**
+ * A magic number written as the ASCII it reads as, with `?` for a byte that varies.
+ *
+ * Indexed rather than iterated, because a signature is a sequence of bytes: one character here
+ * is one byte, and splitting into code points would be the wrong unit for that.
+ */
+function ascii(pattern: string): (number | null)[] {
+  const bytes: (number | null)[] = [];
+  for (let i = 0; i < pattern.length; i++) {
+    bytes.push(pattern[i] === "?" ? null : pattern.charCodeAt(i));
+  }
+  return bytes;
+}
+
+const SIGNATURES: readonly Signature[] = [
+  { label: "PNG", mime: "image/png", magic: [0x89, ...ascii("PNG"), 0x0d, 0x0a, 0x1a, 0x0a] },
+  { label: "JPEG", mime: "image/jpeg", magic: [0xff, 0xd8, 0xff] },
+  { label: "GIF", mime: "image/gif", magic: ascii("GIF8") },
+  { label: "BMP", mime: "image/bmp", magic: ascii("BM") },
+  { label: "WEBP", mime: "image/webp", magic: ascii("RIFF????WEBP") },
+  { label: "TIFF", mime: "image/tiff", magic: [...ascii("II"), 0x2a, 0x00] },
+  { label: "TIFF", mime: "image/tiff", magic: [...ascii("MM"), 0x00, 0x2a] },
+  { label: "ICO", mime: "image/x-icon", magic: [0x00, 0x00, 0x01, 0x00] },
+  { label: "PDF", mime: "application/pdf", magic: ascii("%PDF-") },
+  { label: "WAV", mime: "audio/wav", magic: ascii("RIFF????WAVE") },
+  { label: "AVI", mime: "video/x-msvideo", magic: ascii("RIFF????AVI ") },
+  { label: "MP3", mime: "audio/mpeg", magic: ascii("ID3") },
+  // A bare MPEG frame header: 11 sync bits, then a layer III / II / I version pair
+  { label: "MP3", mime: "audio/mpeg", magic: [0xff, 0xfb] },
+  { label: "MP3", mime: "audio/mpeg", magic: [0xff, 0xf3] },
+  { label: "MP3", mime: "audio/mpeg", magic: [0xff, 0xf2] },
+  { label: "OGG", mime: "audio/ogg", magic: ascii("OggS") },
+  { label: "FLAC", mime: "audio/flac", magic: ascii("fLaC") },
+  { label: "WEBM", mime: "video/webm", magic: [0x1a, 0x45, 0xdf, 0xa3] },
+  { label: "ZIP", mime: "application/zip", magic: [...ascii("PK"), 0x03, 0x04] },
+  { label: "GZIP", mime: "application/gzip", magic: [0x1f, 0x8b] },
+  { label: "7Z", mime: "application/x-7z-compressed", magic: [...ascii("7z"), 0xbc, 0xaf, 0x27] },
+  { label: "RAR", mime: "application/vnd.rar", magic: ascii("Rar!") },
+  { label: "GLTF", mime: "model/gltf-binary", magic: ascii("glTF") },
+];
+
+/**
+ * ISO base media files all start `????ftyp`, so the format is in the brand that follows rather
+ * than in the signature itself. Anything unlisted is some flavour of MP4.
+ */
+const ISO_BRANDS: Record<string, { mime: string; label: string }> = {
+  avif: { mime: "image/avif", label: "AVIF" },
+  avis: { mime: "image/avif", label: "AVIF" },
+  heic: { mime: "image/heic", label: "HEIC" },
+  heix: { mime: "image/heic", label: "HEIC" },
+  hevc: { mime: "image/heic", label: "HEIC" },
+  mif1: { mime: "image/heif", label: "HEIF" },
+  msf1: { mime: "image/heif", label: "HEIF" },
+  "M4A ": { mime: "audio/mp4", label: "M4A" },
+  "qt  ": { mime: "video/quicktime", label: "MOV" },
+};
+
+function matches(bytes: Uint8Array, { magic, offset = 0 }: Signature): boolean {
+  if (bytes.length < offset + magic.length) return false;
+  return magic.every((b, i) => b == null || bytes[offset + i] === b);
+}
+
+function readAscii(bytes: Uint8Array, from: number, length: number): string {
+  return String.fromCharCode(...bytes.subarray(from, from + length));
+}
+
+/** The format the first bytes of a file identify it as, or null if they identify nothing. */
+export function sniffBytes(bytes: Uint8Array): { mime: string; label: string } | null {
+  if (readAscii(bytes, 4, 4) === "ftyp") {
+    return ISO_BRANDS[readAscii(bytes, 8, 4)] ?? { mime: "video/mp4", label: "MP4" };
+  }
+  const sig = SIGNATURES.find((s) => matches(bytes, s));
+  return sig == null ? null : { mime: sig.mime, label: sig.label };
+}
+
+/**
+ * The first `bytes` bytes of a base64 payload, or null if it isn't base64 after all.
+ *
+ * Only the characters those bytes need are decoded. The trailing partial group is dropped
+ * rather than padded, since `atob` rejects a group of one or two characters outright and we
+ * have no use for the byte a three-character group would add.
+ */
+export function decodeBase64Prefix(text: string, offset: number, bytes: number): Uint8Array | null {
+  const wanted = Math.ceil(bytes / 3) * 4;
+  let b64 = text.slice(offset, offset + wanted);
+  b64 = b64.slice(0, b64.length - (b64.length % 4));
+  if (b64.length === 0) return null;
+
+  // The URL-safe alphabet stands for the same bytes
+  b64 = b64.replaceAll("-", "+").replaceAll("_", "/");
+  if (!/^[A-Za-z0-9+/]+$/.test(b64)) return null;
+
+  try {
+    const binary = atob(b64);
+    const out = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      out[i] = binary.charCodeAt(i);
+    }
+    return out;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * What a value is, from its head alone, or null if nothing recognises it.
+ *
+ * `head` need only be the first {@link SNIFF_HEAD_CHARS} characters — pass more and the rest is
+ * ignored. The offsets in the result are relative to the start of the whole value.
+ */
+export function sniffValue(head: string): SniffedValue | null {
+  const lead = head.length - head.trimStart().length;
+  const value = head.slice(lead);
+
+  const dataUri = DATA_URI.exec(value);
+  if (dataUri != null) {
+    const declared = dataUri[1]!.toLowerCase();
+    const offset = lead + dataUri[0].length;
+    if (!dataUri[2]!.split(";").includes("base64")) {
+      // A percent-encoded payload states its own type or is text by definition
+      const mime = declared === "" ? "text/plain" : declared;
+      return { mime, label: labelForMime(mime), offset, encoding: "percent" };
+    }
+    if (!UNINFORMATIVE.includes(declared)) {
+      return { mime: declared, label: labelForMime(declared), offset, encoding: "base64" };
+    }
+    return sniffBase64At(head, offset);
+  }
+
+  return sniffBase64At(head, lead);
+}
+
+function sniffBase64At(head: string, offset: number): SniffedValue | null {
+  const bytes = decodeBase64Prefix(head, offset, SNIFF_BYTES);
+  const sniffed = bytes == null ? null : sniffBytes(bytes);
+  return sniffed == null ? null : { ...sniffed, offset, encoding: "base64" };
+}
+
+/** The shortest run of base64 that {@link isEncodedRun} will accept as convincing */
+const ENCODED_RUN_CHARS = 64;
+
+/**
+ * Whether a value is one unbroken run of base64, rather than text that merely opens like it.
+ *
+ * A magic number is only a few bytes, so short ones match by chance — `BM` is two, which comes
+ * up about once in every 65,000 values. That was harmless while a value had to be long enough
+ * to hurt rendering before anything was hidden, and the sniff only chose the label. It is not
+ * harmless when the sniff itself decides to hide something, so that rule asks for this as well:
+ * prose leaves the alphabet within a few characters, and an encoded blob never does.
+ */
+export function isEncodedRun(head: string, offset: number): boolean {
+  const run = head.slice(offset);
+  return run.length >= ENCODED_RUN_CHARS && /^[A-Za-z0-9+/\-_]+={0,2}$/.test(run);
+}
+
+/** Subtypes whose own name makes a poor label */
+const LABEL_OVERRIDES: Record<string, string> = {
+  "text/plain": "TEXT",
+};
+
+/**
+ * A word short enough for a tag. The distinguishing part of a subtype is its last dotted
+ * segment before any `+suffix`, so `image/svg+xml` reads as SVG and `application/vnd.ms-excel`
+ * as MS-EXCEL. Anything still too long falls back to the top-level type.
+ */
+export function labelForMime(mime: string): string {
+  const override = LABEL_OVERRIDES[mime];
+  if (override != null) {
+    return override;
+  }
+
+  const [type, subtype] = mime.split("/");
+  const word = (subtype ?? "").split("+")[0]!.split(".").pop()!.replace(/^x-/, "");
+  if (word.length > 0 && word.length <= 10 && word !== "octet-stream") {
+    return word.toUpperCase();
+  }
+  return (type ?? mime).toUpperCase();
+}
diff --git a/apps/yaak-client/components/core/Editor/text/extension.ts b/apps/yaak-client/components/core/Editor/text/extension.ts
new file mode 100644
index 0000000..a398f2a
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/text/extension.ts
@@ -0,0 +1,12 @@
+import { LanguageSupport, LRLanguage } from "@codemirror/language";
+import { parser } from "./text";
+
+export const textLanguage = LRLanguage.define({
+  name: "text",
+  parser,
+  languageData: {},
+});
+
+export function text() {
+  return new LanguageSupport(textLanguage);
+}
diff --git a/apps/yaak-client/components/core/Editor/text/text.grammar b/apps/yaak-client/components/core/Editor/text/text.grammar
new file mode 100644
index 0000000..57dc055
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/text/text.grammar
@@ -0,0 +1,5 @@
+@top Template { Text }
+
+@tokens {
+  Text { ![]+ }
+}
diff --git a/apps/yaak-client/components/core/Editor/text/text.terms.ts b/apps/yaak-client/components/core/Editor/text/text.terms.ts
new file mode 100644
index 0000000..ac3b3af
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/text/text.terms.ts
@@ -0,0 +1,3 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const Template = 1,
+  Text = 2;
diff --git a/apps/yaak-client/components/core/Editor/text/text.ts b/apps/yaak-client/components/core/Editor/text/text.ts
new file mode 100644
index 0000000..b09b79c
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/text/text.ts
@@ -0,0 +1,16 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import { LRParser } from "@lezer/lr";
+export const parser = LRParser.deserialize({
+  version: 14,
+  states: "[OQOPOOQOOOOO",
+  stateData: "V~OQPO~O",
+  goto: "QPP",
+  nodeNames: "⚠ Template Text",
+  maxTerm: 3,
+  skippedNodes: [0],
+  repeatNodeCount: 0,
+  tokenData: "p~RRO;'S[;'S;=`j<%lO[~aRQ~O;'S[;'S;=`j<%lO[~mP;=`<%l[",
+  tokenizers: [0],
+  topRules: { Template: [0, 1] },
+  tokenPrec: 0,
+});
diff --git a/apps/yaak-client/components/core/Editor/timeline/extension.ts b/apps/yaak-client/components/core/Editor/timeline/extension.ts
new file mode 100644
index 0000000..b1a0041
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/timeline/extension.ts
@@ -0,0 +1,12 @@
+import { LanguageSupport, LRLanguage } from "@codemirror/language";
+import { parser } from "./timeline";
+
+export const timelineLanguage = LRLanguage.define({
+  name: "timeline",
+  parser,
+  languageData: {},
+});
+
+export function timeline() {
+  return new LanguageSupport(timelineLanguage);
+}
diff --git a/apps/yaak-client/components/core/Editor/timeline/highlight.ts b/apps/yaak-client/components/core/Editor/timeline/highlight.ts
new file mode 100644
index 0000000..6f8c9e9
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/timeline/highlight.ts
@@ -0,0 +1,7 @@
+import { styleTags, tags as t } from "@lezer/highlight";
+
+export const highlight = styleTags({
+  OutgoingText: t.propertyName, // > lines - primary color (matches timeline icons)
+  IncomingText: t.tagName, // < lines - info color (matches timeline icons)
+  InfoText: t.comment, // * lines - subtle color (matches timeline icons)
+});
diff --git a/apps/yaak-client/components/core/Editor/timeline/timeline.grammar b/apps/yaak-client/components/core/Editor/timeline/timeline.grammar
new file mode 100644
index 0000000..f8def8d
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/timeline/timeline.grammar
@@ -0,0 +1,21 @@
+@top Timeline { line* }
+
+line { OutgoingLine | IncomingLine | InfoLine | PlainLine }
+
+@skip {} {
+  OutgoingLine { OutgoingText Newline }
+  IncomingLine { IncomingText Newline }
+  InfoLine { InfoText Newline }
+  PlainLine { PlainText Newline }
+}
+
+@tokens {
+  OutgoingText { "> " ![\n]* }
+  IncomingText { "< " ![\n]* }
+  InfoText { "* " ![\n]* }
+  PlainText { ![\n]+ }
+  Newline { "\n" }
+  @precedence { OutgoingText, IncomingText, InfoText, PlainText }
+}
+
+@external propSource highlight from "./highlight"
diff --git a/apps/yaak-client/components/core/Editor/timeline/timeline.terms.ts b/apps/yaak-client/components/core/Editor/timeline/timeline.terms.ts
new file mode 100644
index 0000000..8f03d42
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/timeline/timeline.terms.ts
@@ -0,0 +1,11 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const Timeline = 1,
+  OutgoingLine = 2,
+  OutgoingText = 3,
+  Newline = 4,
+  IncomingLine = 5,
+  IncomingText = 6,
+  InfoLine = 7,
+  InfoText = 8,
+  PlainLine = 9,
+  PlainText = 10;
diff --git a/apps/yaak-client/components/core/Editor/timeline/timeline.ts b/apps/yaak-client/components/core/Editor/timeline/timeline.ts
new file mode 100644
index 0000000..fee8020
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/timeline/timeline.ts
@@ -0,0 +1,21 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import { LRParser } from "@lezer/lr";
+import { highlight } from "./highlight";
+export const parser = LRParser.deserialize({
+  version: 14,
+  states:
+    "!pQQOPOOO`OPO'#C^OeOPO'#CaOjOPO'#CcOoOPO'#CeOOOO'#Ci'#CiOOOO'#Cg'#CgQQOPOOOOOO,58x,58xOOOO,58{,58{OOOO,58},58}OOOO,59P,59POOOO-E6e-E6e",
+  stateData: "z~ORPOUQOWROYSO~OSWO~OSXO~OSYO~OSZO~ORUWYW~",
+  goto: "m^PP_PP_P_P_PcPiTTOVQVOR[VTUOV",
+  nodeNames:
+    "⚠ Timeline OutgoingLine OutgoingText Newline IncomingLine IncomingText InfoLine InfoText PlainLine PlainText",
+  maxTerm: 13,
+  propSources: [highlight],
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData:
+    "%h~RZOYtYZ!]Zztz{!b{!^t!^!_#d!_!`t!`!a$f!a;'St;'S;=`!V<%lOt~ySY~OYtZ;'St;'S;=`!V<%lOt~!YP;=`<%lt~!bOS~~!gUY~OYtZptpq!yq;'St;'S;=`!V<%lOt~#QSW~Y~OY!yZ;'S!y;'S;=`#^<%lO!y~#aP;=`<%l!y~#iUY~OYtZptpq#{q;'St;'S;=`!V<%lOt~$SSU~Y~OY#{Z;'S#{;'S;=`$`<%lO#{~$cP;=`<%l#{~$kUY~OYtZptpq$}q;'St;'S;=`!V<%lOt~%USR~Y~OY$}Z;'S$};'S;=`%b<%lO$}~%eP;=`<%l$}",
+  tokenizers: [0],
+  topRules: { Timeline: [0, 1] },
+  tokenPrec: 36,
+});
diff --git a/apps/yaak-client/components/core/Editor/twig/completion.test.ts b/apps/yaak-client/components/core/Editor/twig/completion.test.ts
new file mode 100644
index 0000000..ff8fd94
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/completion.test.ts
@@ -0,0 +1,155 @@
+/* oxlint-disable no-template-curly-in-string */
+import { CompletionContext } from "@codemirror/autocomplete";
+import { json } from "@codemirror/lang-json";
+import { EditorState, type Extension, type TransactionSpec } from "@codemirror/state";
+import type { EditorView } from "@codemirror/view";
+import { describe, expect, test } from "vite-plus/test";
+import { singleLineExtensions } from "../singleLine";
+import { twigCompletion, type TwigCompletionOption } from "./completion";
+import { parser } from "./twig";
+
+const options: TwigCompletionOption[] = [
+  { name: "someVar", label: "someVar", type: "variable", value: "value", onClick: () => {} },
+  { name: "uuid.v4", label: "uuid.v4", type: "function", args: [], value: null, onClick: () => {} },
+];
+const source = twigCompletion({ options });
+
+// Both keyboard acceptance and clicking a suggestion invoke Completion.apply.
+function complete(input: string, label: string, extensions: Extension = []) {
+  const cursor = input.indexOf("|");
+  if (cursor < 0) throw new Error("Missing cursor marker");
+  let state = EditorState.create({
+    doc: input.slice(0, cursor) + input.slice(cursor + 1),
+    selection: { anchor: cursor },
+    extensions,
+  });
+  const result = source(new CompletionContext(state, cursor, false));
+  const completion = result?.options.find((option) => option.label === label);
+  expect(completion).toBeDefined();
+  const view = {
+    get state() {
+      return state;
+    },
+    dispatch(spec: TransactionSpec) {
+      state = state.update(spec).state;
+    },
+  } as EditorView;
+  if (typeof completion?.apply !== "function" || !result) throw new Error("Missing apply");
+  completion.apply(view, completion, result.from, cursor);
+  return state;
+}
+
+function expectValidTag(state: EditorState, expected: string) {
+  expect(state.doc.toString()).toBe(expected);
+  const tags: string[] = [];
+  parser.parse(expected).iterate({
+    enter(node) {
+      expect(node.type.isError).toBe(false);
+      if (node.name === "Tag") tags.push(expected.slice(node.from, node.to));
+    },
+  });
+  expect(tags).toHaveLength(1);
+}
+
+describe("twig completion", () => {
+  test.each(["${[\nsome|", "${[ \n\n\tsome|", "${[\nsome|\n ]}", "${[\n |"])(
+    "completes across multiline whitespace: %s",
+    (input) => expectValidTag(complete(input, "someVar"), "${[ someVar ]}"),
+  );
+
+  test.each(["${[\nuuid.v|", "${[\n uuid.v|()\n ]}"])(
+    "completes a function across multiline whitespace: %s",
+    (input) => expectValidTag(complete(input, "uuid.v4"), "${[ uuid.v4() ]}"),
+  );
+
+  test("preserves surrounding lines and literal pipes", () => {
+    expect(complete("before\n${[\nsome|\n]}\na | b", "someVar").doc.toString()).toBe(
+      "before\n${[ someVar ]}\na | b",
+    );
+  });
+
+  test("does not search past non-whitespace for an opener or closer", () => {
+    expect(complete("prefix\nsome|\nother ]}", "someVar").doc.toString()).toBe(
+      "prefix\n${[ someVar ]}\nother ]}",
+    );
+    expect(complete("${[some|\nother ]}", "someVar").doc.toString()).toBe(
+      "${[ someVar ]}\nother ]}",
+    );
+  });
+
+  test.each(["${[|", "${[ |", "${[  |"])(
+    "offers completion immediately after a template opener: %s",
+    (input) => {
+      expectValidTag(complete(input, "someVar"), "${[ someVar ]}");
+    },
+  );
+
+  test.each(["$", "{", "${", '{"value": "'])(
+    "does not automatically offer empty-name completions after %s",
+    (doc) => {
+      const state = EditorState.create({ doc });
+      expect(source(new CompletionContext(state, doc.length, false))).toBeNull();
+    },
+  );
+
+  test.each(["uuid|", "${[uuid|", "${[ uuid| ]}"])(
+    "completes a namespace before wrapping the final function: %s",
+    (input) => {
+      const namespace = complete(input, "uuid.*");
+      expect(namespace.doc.toString()).toBe(input.replace("uuid|", "uuid."));
+      const cursor = namespace.selection.main.head;
+      const next = namespace.sliceDoc(0, cursor) + "|" + namespace.sliceDoc(cursor);
+      expectValidTag(complete(next, "uuid.v4"), "${[ uuid.v4() ]}");
+    },
+  );
+
+  test.each(["some|", "${[some|", "${[ some|", "${[  someVar|", "${[\tsome|"])(
+    "completes a variable in a single-line value: %s",
+    (input) => {
+      const state = complete(input, "someVar", singleLineExtensions());
+      expectValidTag(state, "${[ someVar ]}");
+      expect(state.selection.main.head).toBe(state.doc.length);
+    },
+  );
+
+  test.each(["${[some|]}", "${[ some| ]}", "${[someVar|]}"])(
+    "reuses closing delimiters: %s",
+    (input) => {
+      expectValidTag(complete(input, "someVar"), "${[ someVar ]}");
+    },
+  );
+
+  test.each(["uuid.v|", "${[uuid.v|", "${[ uuid.v| ]}", "${[uuid.v|()]}"])(
+    "completes a function: %s",
+    (input) => {
+      expectValidTag(complete(input, "uuid.v4"), "${[ uuid.v4() ]}");
+    },
+  );
+
+  test("preserves surrounding JSON and its closing punctuation", () => {
+    expectValidTag(
+      complete('{"value":"${[some|","other":1}', "someVar", json()),
+      '{"value":"${[ someVar ]}","other":1}',
+    );
+  });
+
+  test("preserves surrounding text and other complete tags", () => {
+    expect(complete("${[ someVar ]} ${[some|]} trailing", "someVar").doc.toString()).toBe(
+      "${[ someVar ]} ${[ someVar ]} trailing",
+    );
+  });
+
+  test("does not consume closing punctuation without a template opener", () => {
+    expect(complete("[some|]}", "someVar").doc.toString()).toBe("[${[ someVar ]}]}");
+  });
+
+  test("invalidates cached suggestions when typing delimiters or a namespace separator", () => {
+    const state = EditorState.create({ doc: "some" });
+    const result = source(new CompletionContext(state, 4, false));
+    expect(result?.validFor).toBeInstanceOf(RegExp);
+    const validFor = result?.validFor as RegExp;
+    expect(validFor.test("someVar")).toBe(true);
+    expect(validFor.test("some ${[some")).toBe(false);
+    expect(validFor.test("uuid.")).toBe(false);
+  });
+});
diff --git a/apps/yaak-client/components/core/Editor/twig/completion.ts b/apps/yaak-client/components/core/Editor/twig/completion.ts
new file mode 100644
index 0000000..ae0a979
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/completion.ts
@@ -0,0 +1,156 @@
+import type { Completion, CompletionContext } from "@codemirror/autocomplete";
+import { startCompletion } from "@codemirror/autocomplete";
+import type { EditorState } from "@codemirror/state";
+import type { TemplateFunction } from "@yaakapp-internal/plugins";
+
+const openTag = "${[ ";
+const closeTag = " ]}";
+
+export type TwigCompletionOptionVariable = {
+  type: "variable";
+};
+
+export type TwigCompletionOptionNamespace = {
+  type: "namespace";
+};
+
+export type TwigCompletionOptionFunction = TemplateFunction & {
+  type: "function";
+};
+
+export type TwigCompletionOption = (
+  | TwigCompletionOptionFunction
+  | TwigCompletionOptionVariable
+  | TwigCompletionOptionNamespace
+) & {
+  name: string;
+  label: string | HTMLElement;
+  description?: string;
+  onClick: (rawTag: string, startPos: number) => void;
+  value: string | null;
+  invalid?: boolean;
+};
+
+export interface TwigCompletionConfig {
+  options: TwigCompletionOption[];
+}
+
+const MIN_MATCH_NAME = 1;
+
+// Only inspect adjacent whitespace, including newlines, rather than copying the
+// entire document to look for a delimiter in large request bodies.
+function skipWhitespace(state: EditorState, pos: number, direction: -1 | 1) {
+  while (direction === -1 ? pos > 0 : pos < state.doc.length) {
+    const from = direction === -1 ? pos - 1 : pos;
+    if (!/\s/.test(state.sliceDoc(from, from + 1))) break;
+    pos += direction;
+  }
+  return pos;
+}
+
+function findOpenTag(state: EditorState, from: number) {
+  const end = skipWhitespace(state, from, -1);
+  return end >= 3 && state.sliceDoc(end - 3, end) === "${[" ? end - 3 : null;
+}
+
+export function twigCompletion({ options }: TwigCompletionConfig) {
+  return function completions(context: CompletionContext) {
+    const toStartOfName = context.matchBefore(/[\w_.]*/);
+    const toMatch = toStartOfName ?? null;
+
+    if (toMatch === null) return null;
+
+    const matchLen = toMatch.to - toMatch.from;
+    const hasOpenTag = findOpenTag(context.state, toMatch.from) !== null;
+    if (!context.explicit && !hasOpenTag && toMatch.from > 0 && matchLen < MIN_MATCH_NAME) {
+      return null;
+    }
+
+    const completions: Completion[] = options
+      .flatMap((o): Completion[] => {
+        const matchSegments = toMatch.text.replace(/^\$/, "").split(".");
+        const optionSegments = o.name.split(".");
+
+        // If not on the last segment, only complete the namespace
+        if (matchSegments.length < optionSegments.length) {
+          const prefix = optionSegments.slice(0, matchSegments.length).join(".");
+          return [
+            {
+              label: `${prefix}.*`,
+              type: "namespace",
+              detail: "namespace",
+              apply: (view, _completion, from, to) => {
+                const insert = `${prefix}.`;
+                view.dispatch({
+                  changes: { from, to, insert: insert },
+                  selection: { anchor: from + insert.length },
+                });
+                // Leave the autocomplete open so the user can continue typing the rest of the namespace
+                startCompletion(view);
+              },
+            },
+          ];
+        }
+
+        // If on the last segment, wrap the entire tag
+        const inner = o.type === "function" ? `${o.name}()` : o.name;
+        return [
+          {
+            label: o.name,
+            info: o.description,
+            detail: o.type,
+            type: o.type === "variable" ? "variable" : "function",
+            apply: (view, _completion, from, to) => {
+              // Keep the completion range name-only for filtering, but replace a manually
+              // typed opener when accepting (through either the keyboard or the menu).
+              const opener = findOpenTag(view.state, from);
+              if (opener !== null) {
+                from = opener;
+                const hasParentheses =
+                  o.type === "function" && view.state.sliceDoc(to, to + 2) === "()";
+                const closer = skipWhitespace(view.state, to + (hasParentheses ? 2 : 0), 1);
+                if (view.state.sliceDoc(closer, closer + 2) === "]}") to = closer + 2;
+              }
+              const insert = openTag + inner + closeTag;
+              view.dispatch({
+                changes: { from, to, insert: insert },
+                selection: { anchor: from + insert.length },
+              });
+            },
+          },
+        ];
+      })
+      .filter((v) => v != null);
+
+    const uniqueCompletions = uniqueBy(completions, "label");
+    const sortedCompletions = uniqueCompletions.sort((a, b) => {
+      const boostDiff = defaultBoost(b) - defaultBoost(a);
+      if (boostDiff !== 0) return boostDiff;
+      return a.label.localeCompare(b.label);
+    });
+
+    return {
+      matchLen,
+      // Delimiters change the replacement range; dots change namespace options.
+      validFor: /^\w*$/,
+      from: toMatch.from,
+      options: sortedCompletions,
+    };
+  };
+}
+
+export function uniqueBy<T, K extends keyof T>(arr: T[], key: K): T[] {
+  const map = new Map<T[K], T>();
+  for (const item of arr) {
+    map.set(item[key], item); // overwrites → keeps last
+  }
+  return [...map.values()];
+}
+
+export function defaultBoost(o: Completion) {
+  if (o.type === "variable") return 4;
+  if (o.type === "constant") return 3;
+  if (o.type === "function") return 2;
+  if (o.type === "namespace") return 1;
+  return 0;
+}
diff --git a/apps/yaak-client/components/core/Editor/twig/extension.ts b/apps/yaak-client/components/core/Editor/twig/extension.ts
new file mode 100644
index 0000000..bbd4c8c
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/extension.ts
@@ -0,0 +1,85 @@
+import type { LanguageSupport } from "@codemirror/language";
+import { LRLanguage } from "@codemirror/language";
+import type { Extension } from "@codemirror/state";
+import { parseMixed } from "@lezer/common";
+import type { WrappedEnvironmentVariable } from "../../../../hooks/useEnvironmentVariables";
+import type { GenericCompletionConfig } from "../genericCompletion";
+import { genericCompletion } from "../genericCompletion";
+import { textLanguage } from "../text/extension";
+import type { TwigCompletionOption } from "./completion";
+import { twigCompletion } from "./completion";
+import { templateTagsPlugin } from "./templateTags";
+import { parser as twigParser } from "./twig";
+
+export function twig({
+  base,
+  environmentVariables,
+  completionOptions,
+  autocomplete,
+  onClickVariable,
+  onClickMissingVariable,
+  extraExtensions,
+}: {
+  base: LanguageSupport;
+  environmentVariables: WrappedEnvironmentVariable[];
+  completionOptions: TwigCompletionOption[];
+  autocomplete?: GenericCompletionConfig;
+  onClickVariable: (option: WrappedEnvironmentVariable, tagValue: string, startPos: number) => void;
+  onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void;
+  onClickPathParameter: (name: string) => void;
+  extraExtensions: Extension[];
+}) {
+  const language = mixLanguage(base);
+
+  const variableOptions: TwigCompletionOption[] =
+    environmentVariables.map((v) => ({
+      name: v.variable.name,
+      value: v.variable.value,
+      type: "variable",
+      label: v.variable.name,
+      description: `Inherited from ${v.source}`,
+      onClick: (rawTag: string, startPos: number) => onClickVariable(v, rawTag, startPos),
+    })) ?? [];
+
+  const options = [...variableOptions, ...completionOptions];
+  const completions = twigCompletion({ options });
+
+  return [
+    language,
+    base.support,
+    language.data.of({ autocomplete: completions }),
+    base.language.data.of({ autocomplete: completions }),
+    language.data.of({ autocomplete: genericCompletion(autocomplete) }),
+    base.language.data.of({ autocomplete: genericCompletion(autocomplete) }),
+    templateTagsPlugin(options, onClickMissingVariable),
+    ...extraExtensions,
+  ];
+}
+
+const mixedLanguagesCache: Record<string, LRLanguage> = {};
+
+function mixLanguage(base: LanguageSupport): LRLanguage {
+  // It can be slow to mix languages when there are hundreds of editors, so we'll cache them to speed it up
+  const cached = mixedLanguagesCache[base.language.name];
+  if (cached != null) {
+    return cached;
+  }
+
+  const parser = twigParser.configure({
+    wrap: parseMixed((node) => {
+      // If the base language is text, we can overwrite at the top
+      if (base.language.name !== textLanguage.name && !node.type.isTop) {
+        return null;
+      }
+
+      return {
+        parser: base.language.parser,
+        overlay: (node) => node.type.name === "Text",
+      };
+    }),
+  });
+
+  const language = LRLanguage.define({ name: "twig", parser });
+  mixedLanguagesCache[base.language.name] = language;
+  return language;
+}
diff --git a/apps/yaak-client/components/core/Editor/twig/highlight.ts b/apps/yaak-client/components/core/Editor/twig/highlight.ts
new file mode 100644
index 0000000..d3a614e
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/highlight.ts
@@ -0,0 +1,7 @@
+import { styleTags, tags as t } from "@lezer/highlight";
+
+export const highlight = styleTags({
+  TagOpen: t.bracket,
+  TagClose: t.bracket,
+  TagContent: t.keyword,
+});
diff --git a/apps/yaak-client/components/core/Editor/twig/pathParameters.ts b/apps/yaak-client/components/core/Editor/twig/pathParameters.ts
new file mode 100644
index 0000000..2f76dbd
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/pathParameters.ts
@@ -0,0 +1,106 @@
+import { syntaxTree } from "@codemirror/language";
+import type { Range } from "@codemirror/state";
+import type { DecorationSet, ViewUpdate } from "@codemirror/view";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+
+class PathPlaceholderWidget extends WidgetType {
+  readonly #clickListenerCallback: () => void;
+
+  constructor(
+    readonly rawText: string,
+    readonly startPos: number,
+    readonly onClick: () => void,
+  ) {
+    super();
+    this.#clickListenerCallback = () => {
+      this.onClick?.();
+    };
+  }
+
+  eq(other: PathPlaceholderWidget) {
+    return this.startPos === other.startPos && this.rawText === other.rawText;
+  }
+
+  toDOM() {
+    const elt = document.createElement("span");
+    elt.className = "x-theme-templateTag x-theme-templateTag--secondary template-tag";
+    elt.textContent = this.rawText;
+    elt.addEventListener("click", this.#clickListenerCallback);
+    return elt;
+  }
+
+  destroy(dom: HTMLElement) {
+    dom.removeEventListener("click", this.#clickListenerCallback);
+    super.destroy(dom);
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+function pathParameters(
+  view: EditorView,
+  onClickPathParameter: (name: string) => void,
+): DecorationSet {
+  const widgets: Range<Decoration>[] = [];
+  const tree = syntaxTree(view.state);
+  for (const { from, to } of view.visibleRanges) {
+    tree.iterate({
+      from,
+      to,
+      enter(node) {
+        if (node.name === "Text") {
+          // Find the `url` node and then jump into it to find the placeholders
+          for (let i = node.from; i < node.to; i++) {
+            const innerTree = tree.resolveInner(i);
+            if (innerTree.node.name === "url") {
+              innerTree.node.cursor().iterate((node) => {
+                if (node.name !== "Placeholder") return;
+                const globalFrom = node.from;
+                const globalTo = node.to;
+                const rawText = view.state.doc.sliceString(globalFrom, globalTo);
+                const onClick = () => onClickPathParameter(rawText);
+                const widget = new PathPlaceholderWidget(rawText, globalFrom, onClick);
+                const deco = Decoration.replace({ widget, inclusive: false });
+                widgets.push(deco.range(globalFrom, globalTo));
+              });
+              break;
+            }
+          }
+        }
+      },
+    });
+  }
+
+  // Widgets must be sorted start to end
+  widgets.sort((a, b) => a.from - b.from);
+
+  return Decoration.set(widgets);
+}
+
+export function pathParametersPlugin(onClickPathParameter: (name: string) => void) {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = pathParameters(view, onClickPathParameter);
+      }
+
+      update(update: ViewUpdate) {
+        this.decorations = pathParameters(update.view, onClickPathParameter);
+      }
+    },
+    {
+      decorations(v) {
+        return v.decorations;
+      },
+      provide(plugin) {
+        return EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.decorations || Decoration.none;
+        });
+      },
+    },
+  );
+}
diff --git a/apps/yaak-client/components/core/Editor/twig/templateTags.ts b/apps/yaak-client/components/core/Editor/twig/templateTags.ts
new file mode 100644
index 0000000..4ca4511
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/templateTags.ts
@@ -0,0 +1,224 @@
+import { syntaxTree } from "@codemirror/language";
+import type { Range } from "@codemirror/state";
+import type { DecorationSet, ViewUpdate } from "@codemirror/view";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+import type { SyntaxNodeRef } from "@lezer/common";
+import { applyFormInputDefaults, validateTemplateFunctionArgs } from "@yaakapp-internal/lib";
+import type { FormInput, JsonPrimitive, TemplateFunction } from "@yaakapp-internal/plugins";
+import { parseTemplate } from "@yaakapp-internal/templates";
+import type { TwigCompletionOption } from "./completion";
+import { collectArgumentValues } from "./util";
+
+class TemplateTagWidget extends WidgetType {
+  readonly #clickListenerCallback: () => void;
+
+  constructor(
+    readonly option: TwigCompletionOption,
+    readonly rawTag: string,
+    readonly startPos: number,
+  ) {
+    super();
+    this.#clickListenerCallback = () => {
+      this.option.onClick?.(this.rawTag, this.startPos);
+    };
+  }
+
+  eq(other: TemplateTagWidget) {
+    return (
+      this.option.name === other.option.name &&
+      this.option.type === other.option.type &&
+      this.option.value === other.option.value &&
+      this.rawTag === other.rawTag &&
+      this.startPos === other.startPos
+    );
+  }
+
+  toDOM() {
+    const elt = document.createElement("span");
+    elt.className = `x-theme-templateTag template-tag ${
+      this.option.invalid
+        ? "x-theme-templateTag--danger"
+        : this.option.type === "variable"
+          ? "x-theme-templateTag--primary"
+          : "x-theme-templateTag--info"
+    }`;
+    elt.title = this.option.invalid ? "Not Found" : (this.option.value ?? "");
+    elt.setAttribute("data-tag-type", this.option.type);
+    if (typeof this.option.label === "string") elt.textContent = this.option.label;
+    else elt.appendChild(this.option.label);
+    elt.addEventListener("click", this.#clickListenerCallback);
+    return elt;
+  }
+
+  destroy(dom: HTMLElement) {
+    dom.removeEventListener("click", this.#clickListenerCallback);
+    super.destroy(dom);
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+function templateTags(
+  view: EditorView,
+  options: TwigCompletionOption[],
+  onClickMissingVariable: (name: string, rawTag: string, startPos: number) => void,
+): DecorationSet {
+  const widgets: Range<Decoration>[] = [];
+  const tree = syntaxTree(view.state);
+  for (const { from, to } of view.visibleRanges) {
+    tree.iterate({
+      from,
+      to,
+      enter(node) {
+        if (node.name === "Tag") {
+          // Don't decorate if the cursor is inside the match
+          if (isSelectionInsideNode(view, node)) return;
+
+          const rawTag = view.state.doc.sliceString(node.from, node.to);
+
+          // TODO: Search `node.tree` instead of using Regex here
+          const inner = rawTag.replace(/^\$\{\[\s*/, "").replace(/\s*]}$/, "");
+          let name = inner.match(/([\w.]+)[(]/)?.[1] ?? inner;
+
+          if (inner.includes("\n")) {
+            return;
+          }
+
+          // The beta named the function `Response` but was changed in stable.
+          // Keep this here for a while because there's no easy way to migrate
+          if (name === "Response") {
+            name = "response";
+          }
+
+          let option = options.find(
+            (o) => o.name === name || (o.type === "function" && o.aliases?.includes(name)),
+          );
+
+          if (option == null) {
+            const from = node.from; // Cache here so the reference doesn't change
+            option = {
+              type: "variable",
+              invalid: true,
+              name: inner,
+              value: null,
+              label: inner,
+              onClick: () => {
+                onClickMissingVariable(name, rawTag, from);
+              },
+            };
+          }
+
+          if (option.type === "function") {
+            const tokens = parseTemplate(rawTag);
+            const rawValues = collectArgumentValues(tokens, option);
+            const values = applyFormInputDefaults(option.args, rawValues);
+            const label = makeFunctionLabel(option, values);
+            const validationErr = validateTemplateFunctionArgs(option.name, option.args, values);
+            option = { ...option, label, invalid: !!validationErr }; // Clone so we don't mutate the original
+          }
+
+          const widget = new TemplateTagWidget(option, rawTag, node.from);
+          const deco = Decoration.replace({ widget, inclusive: true });
+          widgets.push(deco.range(node.from, node.to));
+        }
+      },
+    });
+  }
+
+  // Widgets must be sorted start to end
+  widgets.sort((a, b) => a.from - b.from);
+
+  return Decoration.set(widgets);
+}
+
+export function templateTagsPlugin(
+  options: TwigCompletionOption[],
+  onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void,
+) {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = templateTags(view, options, onClickMissingVariable);
+      }
+
+      update(update: ViewUpdate) {
+        this.decorations = templateTags(update.view, options, onClickMissingVariable);
+      }
+    },
+    {
+      decorations(v) {
+        return v.decorations;
+      },
+      provide(plugin) {
+        return EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.decorations || Decoration.none;
+        });
+      },
+    },
+  );
+}
+
+function isSelectionInsideNode(view: EditorView, node: SyntaxNodeRef) {
+  for (const r of view.state.selection.ranges) {
+    if (r.from > node.from && r.to < node.to) return true;
+  }
+  return false;
+}
+
+function makeFunctionLabel(
+  fn: TemplateFunction,
+  values: { [p: string]: JsonPrimitive | undefined },
+): HTMLElement | string {
+  if (fn.args.length === 0) return fn.name;
+
+  const $outer = document.createElement("span");
+  $outer.className = "fn";
+  const $bOpen = document.createElement("span");
+  $bOpen.className = "fn-bracket";
+  $bOpen.textContent = "(";
+  $outer.appendChild(document.createTextNode(fn.name));
+  $outer.appendChild($bOpen);
+
+  const $inner = document.createElement("span");
+  $inner.className = "fn-inner";
+  $inner.title = "";
+  fn.previewArgs?.forEach((name: string, i: number, all: string[]) => {
+    const v = String(values[name] || "");
+    if (!v) return;
+    if (all.length > 1) {
+      const $c = document.createElement("span");
+      $c.className = "fn-arg-name";
+      $c.textContent = i > 0 ? `, ${name}=` : `${name}=`;
+      $inner.appendChild($c);
+    }
+
+    const $v = document.createElement("span");
+    $v.className = "fn-arg-value";
+    $v.textContent = v.includes(" ") ? `'${v}'` : v;
+    $inner.appendChild($v);
+  });
+  fn.args.forEach((a: FormInput, i: number) => {
+    if (!("name" in a)) return;
+    const v = values[a.name];
+    if (v == null) return;
+    if (i > 0) $inner.title += "\n";
+    $inner.title += `${a.name} = ${JSON.stringify(v)}`;
+  });
+
+  if ($inner.childNodes.length === 0) {
+    $inner.appendChild(document.createTextNode("…"));
+  }
+
+  $outer.appendChild($inner);
+
+  const $bClose = document.createElement("span");
+  $bClose.className = "fn-bracket";
+  $bClose.textContent = ")";
+  $outer.appendChild($bClose);
+
+  return $outer;
+}
diff --git a/apps/yaak-client/components/core/Editor/twig/twig.grammar b/apps/yaak-client/components/core/Editor/twig/twig.grammar
new file mode 100644
index 0000000..6ca447c
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/twig.grammar
@@ -0,0 +1,17 @@
+@top Template { (Tag | Text)* }
+
+@local tokens {
+  TagClose { "]}" }
+  @else TagContent
+}
+
+@skip { } {
+  TagOpen { "${[" }
+  Tag { TagOpen (TagContent)+ TagClose }
+}
+
+@tokens {
+  Text { ![$] Text? | "$" (@eof | ![{] Text? | "{" ![[] Text?) }
+}
+
+@external propSource highlight from "./highlight"
diff --git a/apps/yaak-client/components/core/Editor/twig/twig.terms.ts b/apps/yaak-client/components/core/Editor/twig/twig.terms.ts
new file mode 100644
index 0000000..7ac3c79
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/twig.terms.ts
@@ -0,0 +1,7 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const Template = 1,
+  Tag = 2,
+  TagOpen = 3,
+  TagContent = 4,
+  TagClose = 5,
+  Text = 6;
diff --git a/apps/yaak-client/components/core/Editor/twig/twig.test.ts b/apps/yaak-client/components/core/Editor/twig/twig.test.ts
new file mode 100644
index 0000000..2ce95f0
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/twig.test.ts
@@ -0,0 +1,108 @@
+/* oxlint-disable no-template-curly-in-string */
+
+import { describe, expect, test } from "vite-plus/test";
+import { parser } from "./twig";
+
+function getNodeNames(input: string): string[] {
+  const tree = parser.parse(input);
+  const nodes: string[] = [];
+  const cursor = tree.cursor();
+  do {
+    if (cursor.name !== "Template") {
+      nodes.push(cursor.name);
+    }
+  } while (cursor.next());
+  return nodes;
+}
+
+function hasTag(input: string): boolean {
+  return getNodeNames(input).includes("Tag");
+}
+
+function hasError(input: string): boolean {
+  return getNodeNames(input).includes("⚠");
+}
+
+describe("twig grammar", () => {
+  describe("${[var]} format (valid template tags)", () => {
+    test("parses simple variable as Tag", () => {
+      expect(hasTag("${[var]}")).toBe(true);
+      expect(hasError("${[var]}")).toBe(false);
+    });
+
+    test("parses variable with whitespace as Tag", () => {
+      expect(hasTag("${[ var ]}")).toBe(true);
+      expect(hasError("${[ var ]}")).toBe(false);
+    });
+
+    test("parses embedded variable as Tag", () => {
+      expect(hasTag("hello ${[name]} world")).toBe(true);
+      expect(hasError("hello ${[name]} world")).toBe(false);
+    });
+
+    test("parses function call as Tag", () => {
+      expect(hasTag("${[fn()]}")).toBe(true);
+      expect(hasError("${[fn()]}")).toBe(false);
+    });
+  });
+
+  describe("${var} format (should be plain text, not tags)", () => {
+    test("parses ${var} as plain Text without errors", () => {
+      expect(hasTag("${var}")).toBe(false);
+      expect(hasError("${var}")).toBe(false);
+    });
+
+    test("parses embedded ${var} as plain Text", () => {
+      expect(hasTag("hello ${name} world")).toBe(false);
+      expect(hasError("hello ${name} world")).toBe(false);
+    });
+
+    test("parses JSON with ${var} as plain Text", () => {
+      const json = '{"key": "${value}"}';
+      expect(hasTag(json)).toBe(false);
+      expect(hasError(json)).toBe(false);
+    });
+
+    test("parses multiple ${var} as plain Text", () => {
+      expect(hasTag("${a} and ${b}")).toBe(false);
+      expect(hasError("${a} and ${b}")).toBe(false);
+    });
+  });
+
+  describe("mixed content", () => {
+    test("distinguishes ${var} from ${[var]} in same string", () => {
+      const input = "${plain} and ${[tag]}";
+      expect(hasTag(input)).toBe(true);
+      expect(hasError(input)).toBe(false);
+    });
+
+    test("parses JSON with ${[var]} as having Tag", () => {
+      const json = '{"key": "${[value]}"}';
+      expect(hasTag(json)).toBe(true);
+      expect(hasError(json)).toBe(false);
+    });
+  });
+
+  describe("edge cases", () => {
+    test("handles $ at end of string", () => {
+      expect(hasError("hello$")).toBe(false);
+      expect(hasTag("hello$")).toBe(false);
+    });
+
+    test("handles ${ at end of string without crash", () => {
+      // Incomplete syntax may produce errors, but should not crash
+      expect(() => parser.parse("hello${")).not.toThrow();
+    });
+
+    test("handles ${[ without closing without crash", () => {
+      // Unclosed tag may produce partial match, but should not crash
+      expect(() => parser.parse("${[unclosed")).not.toThrow();
+    });
+
+    test("handles empty ${[]}", () => {
+      // Empty tags may or may not be valid depending on grammar
+      // Just ensure no crash
+      expect(() => parser.parse("${[]}")).not.toThrow();
+    });
+  });
+});
diff --git a/apps/yaak-client/components/core/Editor/twig/twig.ts b/apps/yaak-client/components/core/Editor/twig/twig.ts
new file mode 100644
index 0000000..78af862
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/twig.ts
@@ -0,0 +1,20 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import { LocalTokenGroup, LRParser } from "@lezer/lr";
+import { highlight } from "./highlight";
+export const parser = LRParser.deserialize({
+  version: 14,
+  states:
+    "!^QQOPOOOOOO'#C_'#C_OYOQO'#C^OOOO'#Cc'#CcQQOPOOOOOO'#Cd'#CdO_OQO,58xOOOO-E6a-E6aOOOO-E6b-E6bOOOO1G.d1G.d",
+  stateData: "g~OUROYPO~OSTO~OSTOTXO~O",
+  goto: "nXPPY^PPPbhTROSTQOSQSORVSQUQRWU",
+  nodeNames: "⚠ Template Tag TagOpen TagContent TagClose Text",
+  maxTerm: 10,
+  propSources: [highlight],
+  skippedNodes: [0],
+  repeatNodeCount: 2,
+  tokenData:
+    "#{~RTOtbtu!zu;'Sb;'S;=`!o<%lOb~gTU~Otbtuvu;'Sb;'S;=`!o<%lOb~yVO#ob#o#p!`#p;'Sb;'S;=`!o<%l~b~Ob~~!u~!cSO!}b#O;'Sb;'S;=`!o<%lOb~!rP;=`<%lb~!zOU~~!}VO#ob#o#p#d#p;'Sb;'S;=`!o<%l~b~Ob~~!u~#gTO!}b!}#O#v#O;'Sb;'S;=`!o<%lOb~#{OY~",
+  tokenizers: [1, new LocalTokenGroup("b~RP#P#QU~XP#q#r[~aOT~~", 17, 4)],
+  topRules: { Template: [0, 1] },
+  tokenPrec: 0,
+});
diff --git a/apps/yaak-client/components/core/Editor/twig/util.ts b/apps/yaak-client/components/core/Editor/twig/util.ts
new file mode 100644
index 0000000..330ea85
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/twig/util.ts
@@ -0,0 +1,37 @@
+import type { FormInput, TemplateFunction } from "@yaakapp-internal/plugins";
+import type { Tokens } from "@yaakapp-internal/templates";
+
+/**
+ * Process the initial tokens from the template and merge those with the default values pulled from
+ * the template function definition.
+ */
+export function collectArgumentValues(initialTokens: Tokens, templateFunction: TemplateFunction) {
+  const initial: Record<string, string | boolean> = {};
+  const initialArgs =
+    initialTokens.tokens[0]?.type === "tag" && initialTokens.tokens[0]?.val.type === "fn"
+      ? initialTokens.tokens[0]?.val.args
+      : [];
+
+  const processArg = (arg: FormInput) => {
+    if ("inputs" in arg && arg.inputs) {
+      arg.inputs.forEach(processArg);
+    }
+    if (!("name" in arg)) return;
+
+    const initialArg = initialArgs.find((a) => a.name === arg.name);
+    const initialArgValue =
+      initialArg?.value.type === "str"
+        ? initialArg?.value.text
+        : initialArg?.value.type === "bool"
+          ? initialArg.value.value
+          : undefined;
+    const value = initialArgValue ?? arg.defaultValue;
+    if (value != null) {
+      initial[arg.name] = value;
+    }
+  };
+
+  templateFunction.args.forEach(processArg);
+
+  return initial;
+}
diff --git a/apps/yaak-client/components/core/Editor/url/completion.test.ts b/apps/yaak-client/components/core/Editor/url/completion.test.ts
new file mode 100644
index 0000000..57e403a
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/url/completion.test.ts
@@ -0,0 +1,49 @@
+import type { Completion } from "@codemirror/autocomplete";
+import { EditorState, type TransactionSpec } from "@codemirror/state";
+import type { EditorView } from "@codemirror/view";
+import { describe, expect, test } from "vite-plus/test";
+import { applyUrlCompletion, getUrlCompletionConfig } from "./completion";
+
+describe("applyUrlCompletion", () => {
+  test("consumes an existing protocol suffix and preserves the rest of the URL", () => {
+    expect(applyCompletion("http://rickandmortyapi.com/api/character", "http://", 4)).toBe(
+      "http://rickandmortyapi.com/api/character",
+    );
+  });
+
+  test("inserts a protocol when there is no existing suffix", () => {
+    expect(applyCompletion("htt", "http://", 3)).toBe("http://");
+  });
+
+  test("replaces the full URL when accepting a saved URL", () => {
+    expect(applyCompletion("htt://old.example/path", "https://new.example/api", 3)).toBe(
+      "https://new.example/api",
+    );
+  });
+});
+
+describe("getUrlCompletionConfig", () => {
+  test("always includes protocols alongside saved URL options", () => {
+    const config = getUrlCompletionConfig([{ label: "https://example.com" }]);
+
+    expect(config.options.map((option) => option.label)).toEqual([
+      "http://",
+      "https://",
+      "https://example.com",
+    ]);
+    expect(config.options.every((option) => option.apply === applyUrlCompletion)).toBe(true);
+  });
+});
+
+function applyCompletion(document: string, label: string, cursor: number) {
+  let state = EditorState.create({ doc: document, selection: { anchor: cursor } });
+  const view = {
+    state,
+    dispatch: (spec: TransactionSpec) => {
+      state = state.update(spec).state;
+    },
+  } as unknown as EditorView;
+
+  applyUrlCompletion(view, { label } satisfies Completion, 0, cursor);
+  return state.doc.toString();
+}
diff --git a/apps/yaak-client/components/core/Editor/url/completion.ts b/apps/yaak-client/components/core/Editor/url/completion.ts
new file mode 100644
index 0000000..4a7c9a2
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/url/completion.ts
@@ -0,0 +1,51 @@
+import { insertCompletionText, pickedCompletion, type Completion } from "@codemirror/autocomplete";
+import type { EditorView } from "@codemirror/view";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import {
+  genericCompletion,
+  type GenericCompletion,
+  type GenericCompletionConfig,
+} from "../genericCompletion";
+
+const protocolOptions: GenericCompletionOption[] = [
+  { label: "http://", type: "constant" },
+  { label: "https://", type: "constant" },
+];
+
+export function getUrlCompletionConfig(
+  options: GenericCompletionOption[],
+  minMatch = 3,
+): GenericCompletionConfig {
+  const urlOptions = [
+    ...protocolOptions,
+    ...options.filter(
+      (option) => !protocolOptions.some((protocol) => protocol.label === option.label),
+    ),
+  ];
+  return {
+    minMatch,
+    options: urlOptions.map<GenericCompletion>((option) => ({
+      ...option,
+      apply: applyUrlCompletion,
+    })),
+  };
+}
+
+export function applyUrlCompletion(
+  view: EditorView,
+  completion: Completion,
+  from: number,
+  to: number,
+) {
+  const isProtocol = /^https?:\/\/$/.test(completion.label);
+  const replaceTo = isProtocol
+    ? to + (view.state.sliceDoc(to, to + 3) === "://" ? 3 : 0)
+    : view.state.doc.length;
+
+  view.dispatch({
+    ...insertCompletionText(view.state, completion.label, from, replaceTo),
+    annotations: pickedCompletion.of(completion),
+  });
+}
+
+export const completions = genericCompletion(getUrlCompletionConfig([], 1));
diff --git a/apps/yaak-client/components/core/Editor/url/extension.ts b/apps/yaak-client/components/core/Editor/url/extension.ts
new file mode 100644
index 0000000..e900b82
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/url/extension.ts
@@ -0,0 +1,12 @@
+import { LanguageSupport, LRLanguage } from "@codemirror/language";
+import { parser } from "./url";
+
+const urlLanguage = LRLanguage.define({
+  name: "url",
+  parser,
+  languageData: {},
+});
+
+export function url() {
+  return new LanguageSupport(urlLanguage, []);
+}
diff --git a/apps/yaak-client/components/core/Editor/url/highlight.ts b/apps/yaak-client/components/core/Editor/url/highlight.ts
new file mode 100644
index 0000000..69c8ac9
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/url/highlight.ts
@@ -0,0 +1,10 @@
+import { styleTags, tags as t } from "@lezer/highlight";
+
+export const highlight = styleTags({
+  Protocol: t.comment,
+  Placeholder: t.emphasis,
+  // PathSegment: t.tagName,
+  // Host: t.variableName,
+  // Path: t.bool,
+  // Query: t.string,
+});
diff --git a/apps/yaak-client/components/core/Editor/url/url.grammar b/apps/yaak-client/components/core/Editor/url/url.grammar
new file mode 100644
index 0000000..5e9c80d
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/url/url.grammar
@@ -0,0 +1,24 @@
+// Host is optional so URLs starting with `/` go straight to Path. Without this,
+// the parser error-recovers past the leading `/` and consumes the first segment as
+// Host (since Host's char class includes `:` for `host:port`), eating an initial
+// `:name` placeholder like `/:foo/:bar`.
+@top url { Protocol? Host? Path? Query? }
+
+Path { ("/" PathSegment)+ }
+
+Placeholder { ":" pathChars }
+PathSegment { Placeholder (":" pathChars)* | pathChars (":" pathChars)* }
+
+Query { "?" queryPair ("&" queryPair)* }
+
+@tokens {
+    Protocol { $[a-zA-Z]+ "://" }
+    Host { $[a-zA-Z0-9-_.:\[\]]+ }
+    @precedence { Protocol, Host }
+
+    pathChars { ![/?#:]+ }
+
+    queryPair { ($[a-zA-Z0-9]+ ("=" $[a-zA-Z0-9]*)?) }
+}
+
+@external propSource highlight from "./highlight"
diff --git a/apps/yaak-client/components/core/Editor/url/url.terms.ts b/apps/yaak-client/components/core/Editor/url/url.terms.ts
new file mode 100644
index 0000000..3af7569
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/url/url.terms.ts
@@ -0,0 +1,9 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const
+  url = 1,
+  Protocol = 2,
+  Host = 3,
+  Path = 4,
+  PathSegment = 5,
+  Placeholder = 6,
+  Query = 7
diff --git a/apps/yaak-client/components/core/Editor/url/url.test.ts b/apps/yaak-client/components/core/Editor/url/url.test.ts
new file mode 100644
index 0000000..8585d9a
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/url/url.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, test } from "vite-plus/test";
+import { parser } from "./url";
+
+function expectValidParse(input: string) {
+  expect(parser.parse(input).toString()).not.toContain("⚠");
+}
+
+function placeholderValues(input: string): string[] {
+  const values: string[] = [];
+  parser
+    .parse(input)
+    .cursor()
+    .iterate((node) => {
+      if (node.name === "Placeholder") values.push(input.slice(node.from, node.to));
+    });
+  return values;
+}
+
+describe("URL grammar Placeholder", () => {
+  test("recognizes path placeholders", () => {
+    expectValidParse("https://x.com/users/:id");
+    expect(placeholderValues("https://x.com/users/:id")).toEqual([":id"]);
+  });
+
+  test("treats a colon suffix as literal path text", () => {
+    expectValidParse("https://yaak.app/x/echo/:foo:bar/baz");
+    expect(placeholderValues("https://yaak.app/x/echo/:foo:bar/baz")).toEqual([":foo"]);
+  });
+
+  test("treats repeated colon suffixes as literal path text", () => {
+    expectValidParse("https://yaak.app/x/echo/:foo:bar:baz");
+    expect(placeholderValues("https://yaak.app/x/echo/:foo:bar:baz")).toEqual([":foo"]);
+  });
+
+  test("does not recognize a colon in the middle of a plain path segment", () => {
+    expectValidParse("https://yaak.app/x/echo/foo:bar/baz");
+    expect(placeholderValues("https://yaak.app/x/echo/foo:bar/baz")).toEqual([]);
+  });
+
+  test("does not recognize query parameters as path placeholders", () => {
+    expect(placeholderValues("https://yaak.app/x/echo/:foo?bar=ss&:bar=baz")).toEqual([":foo"]);
+  });
+
+  test("recognizes placeholders in a path fragment after a templated base URL", () => {
+    // Mixed Twig parsing can feed the URL parser only the text after a template tag,
+    // as in `${[ URL ]}/x/:foo/:hello`.
+    expect(placeholderValues("/x/hi:echo/:foo/:hello?bar=ss&:bar=baz")).toEqual([
+      ":foo",
+      ":hello",
+    ]);
+  });
+});
diff --git a/apps/yaak-client/components/core/Editor/url/url.ts b/apps/yaak-client/components/core/Editor/url/url.ts
new file mode 100644
index 0000000..359d4de
--- /dev/null
+++ b/apps/yaak-client/components/core/Editor/url/url.ts
@@ -0,0 +1,18 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import {LRParser} from "@lezer/lr"
+import {highlight} from "./highlight"
+export const parser = LRParser.deserialize({
+  version: 14,
+  states: "#xQQOPOOO`OQO'#CdOhOPO'#C`OsOSO'#CcQOOOOOQZOPOOQWOPOOQTOPOOOxOQO'#CbO}OQO'#CaOOOO,59O,59OOOOO-E6b-E6bO!]OPO,58}OOOO,58|,58|O!eOQO'#CeO!jOQO,58{O!xOSO'#CfO!}OPO1G.iOOOO,59P,59POOOO-E6c-E6cOOOO,59Q,59QOOOO-E6d-E6d",
+  stateData: "#Y~OQVORUO[PO_RO~O]WO^XO~O[POZSX_SX~O`[O~O^]O~O]^OZTX[TX_TX~Oa`OZVa~O^bO~O]^OZTa[Ta_Ta~O`dO~Oa`OZVi~OQR~",
+  goto: "!RZPPPP[adgmu{VTOUVRYPRXPXSOTUVUQOUVRZQQ_XRc_Qa[Rea",
+  nodeNames: "⚠ url Protocol Host Path PathSegment Placeholder Query",
+  maxTerm: 17,
+  propSources: [highlight],
+  skippedNodes: [0],
+  repeatNodeCount: 3,
+  tokenData: "+z~RgOs!jtv!jvw#[w}!j}!O#x!O!P#x!P!Q%|!Q![&R![!](g!]!a!j!a!b)Z!b!c!j!c!})`!}#O#x#O#P!j#P#Q#x#Q#R!j#R#S#x#S#T!j#T#o)`#o;'S!j;'S;=`#U<%lO!jQ!oV^QOs!jt!P!j!Q![!j!]!a!j!b;'S!j;'S;=`#U<%lO!jQ#XP;=`<%l!jR#cVaP^QOs!jt!P!j!Q![!j!]!a!j!b;'S!j;'S;=`#U<%lO!jR$Pc^QRPOs!jt}!j}!O#x!O!P#x!Q![#x![!]%[!]!a!j!b!c!j!c!}#x!}#O#x#O#P!j#P#Q#x#Q#R!j#R#S#x#S#T!j#T#o#x#o;'S!j;'S;=`#U<%lO!jP%aXRP}!O%[!O!P%[!Q![%[![!]%[!c!}%[!}#O%[#P#Q%[#R#S%[#T#o%[~&RO[~V&[e^Q`SRPOs!jt}!j}!O#x!O!P#x!Q![&R![!]%[!]!_!j!_!`'m!`!a!j!b!c!j!c!}&R!}#O#x#O#P!j#P#Q#x#Q#R!j#R#S#x#S#T!j#T#o&R#o;'S!j;'S;=`#U<%lO!jU'tZ^Q`SOs!jt!P!j!Q!['m!]!a!j!b!c!j!c!}'m!}#T!j#T#o'm#o;'S!j;'S;=`#U<%lO!jR(nX]QRP}!O%[!O!P%[!Q![%[![!]%[!c!}%[!}#O%[#P#Q%[#R#S%[#T#o%[~)`O_~V)ie^Q`SRPOs!jt}!j}!O#x!O!P#x!Q![&R![!]*z!]!_!j!_!`'m!`!a!j!b!c!j!c!})`!}#O#x#O#P!j#P#Q#x#Q#R!j#R#S#x#S#T!j#T#o)`#o;'S!j;'S;=`#U<%lO!jP+PYRP}!O%[!O!P%[!P!Q+o!Q![%[![!]%[!c!}%[!}#O%[#P#Q%[#R#S%[#T#o%[P+rP!P!Q+uP+zOQP",
+  tokenizers: [0, 1, 2],
+  topRules: {"url":[0,1]},
+  tokenPrec: 99
+})
diff --git a/apps/yaak-client/components/core/EventViewer.tsx b/apps/yaak-client/components/core/EventViewer.tsx
new file mode 100644
index 0000000..77ecfc9
--- /dev/null
+++ b/apps/yaak-client/components/core/EventViewer.tsx
@@ -0,0 +1,312 @@
+import type { Virtualizer } from "@tanstack/react-virtual";
+import { Banner, HStack, SplitLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { format } from "date-fns";
+import type { ReactNode } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useEventViewerKeyboard } from "../../hooks/useEventViewerKeyboard";
+import { CopyIconButton } from "../CopyIconButton";
+import { AutoScroller } from "./AutoScroller";
+import { Button } from "./Button";
+import { IconButton } from "./IconButton";
+import type { SelectProps } from "./Select";
+import { Select } from "./Select";
+import { Separator } from "./Separator";
+
+interface EventViewerProps<T> {
+  /** Array of events to display */
+  events: T[];
+
+  /** Get unique key for each event */
+  getEventKey: (event: T, index: number) => string;
+
+  /** Render the event row - receives event, index, isActive, and onClick */
+  renderRow: (props: {
+    event: T;
+    index: number;
+    isActive: boolean;
+    onClick: () => void;
+  }) => ReactNode;
+
+  /** Render the detail pane for the selected event */
+  renderDetail?: (props: { event: T; index: number; onClose: () => void }) => ReactNode;
+
+  /** Optional header above the event list (e.g., connection status) */
+  header?: ReactNode;
+
+  /** Error message to display as a banner */
+  error?: string | null;
+
+  /** Key for SplitLayout state persistence */
+  splitLayoutStorageKey: string;
+
+  /** Default ratio for the split (0.0 - 1.0) */
+  defaultRatio?: number;
+
+  /** Enable keyboard navigation (arrow keys) */
+  enableKeyboardNav?: boolean;
+
+  /** Loading state */
+  isLoading?: boolean;
+
+  /** Message to show while loading */
+  loadingMessage?: string;
+
+  /** Message to show when no events */
+  emptyMessage?: string;
+
+  /** Callback when active index changes (for controlled state in parent) */
+  onActiveIndexChange?: (index: number | null) => void;
+}
+
+export function EventViewer<T>({
+  events,
+  getEventKey,
+  renderRow,
+  renderDetail,
+  header,
+  error,
+  splitLayoutStorageKey,
+  defaultRatio = 0.4,
+  enableKeyboardNav = true,
+  isLoading = false,
+  loadingMessage = "Loading events...",
+  emptyMessage = "No events recorded",
+  onActiveIndexChange,
+}: EventViewerProps<T>) {
+  const [activeIndex, setActiveIndexInternal] = useState<number | null>(null);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+
+  // Wrap setActiveIndex to notify parent
+  const setActiveIndex = useCallback(
+    (indexOrUpdater: number | null | ((prev: number | null) => number | null)) => {
+      setActiveIndexInternal((prev) => {
+        const newIndex =
+          typeof indexOrUpdater === "function" ? indexOrUpdater(prev) : indexOrUpdater;
+        onActiveIndexChange?.(newIndex);
+        return newIndex;
+      });
+    },
+    [onActiveIndexChange],
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element> | null>(null);
+
+  const activeEvent = useMemo(
+    () => (activeIndex != null ? events[activeIndex] : null),
+    [activeIndex, events],
+  );
+
+  // Check if the event list container is focused
+  const isContainerFocused = useCallback(() => {
+    return containerRef.current?.contains(document.activeElement) ?? false;
+  }, []);
+
+  // Keyboard navigation
+  useEventViewerKeyboard({
+    totalCount: events.length,
+    activeIndex,
+    setActiveIndex,
+    virtualizer: virtualizerRef.current,
+    isContainerFocused,
+    enabled: enableKeyboardNav,
+    closePanel: () => setIsPanelOpen(false),
+    openPanel: () => setIsPanelOpen(true),
+  });
+
+  // Handle virtualizer ready callback
+  const handleVirtualizerReady = useCallback(
+    (virtualizer: Virtualizer<HTMLDivElement, Element>) => {
+      virtualizerRef.current = virtualizer;
+    },
+    [],
+  );
+
+  // Handle row click - select and open panel, scroll into view
+  const handleRowClick = useCallback(
+    (index: number) => {
+      setActiveIndex(index);
+      setIsPanelOpen(true);
+      // Scroll to ensure selected item is visible after panel opens
+      requestAnimationFrame(() => {
+        virtualizerRef.current?.scrollToIndex(index, { align: "auto" });
+      });
+    },
+    [setActiveIndex],
+  );
+
+  const handleClose = useCallback(() => {
+    setIsPanelOpen(false);
+  }, []);
+
+  if (isLoading) {
+    return <div className="p-3 text-text-subtlest italic">{loadingMessage}</div>;
+  }
+
+  if (events.length === 0 && !error) {
+    return <div className="p-3 text-text-subtlest italic">{emptyMessage}</div>;
+  }
+
+  return (
+    <div ref={containerRef} className="h-full">
+      <SplitLayout
+        layout="vertical"
+        storageKey={splitLayoutStorageKey}
+        defaultRatio={defaultRatio}
+        minHeightPx={72}
+        firstSlot={({ style }) => (
+          <div style={style} className="w-full h-full grid grid-rows-[auto_minmax(0,1fr)]">
+            {header ?? <span aria-hidden />}
+            <AutoScroller
+              data={events}
+              focusable={enableKeyboardNav}
+              onVirtualizerReady={handleVirtualizerReady}
+              header={
+                error && (
+                  <Banner color="danger" className="m-3">
+                    {error}
+                  </Banner>
+                )
+              }
+              render={(event, index) => (
+                <div key={getEventKey(event, index)}>
+                  {renderRow({
+                    event,
+                    index,
+                    isActive: index === activeIndex,
+                    onClick: () => handleRowClick(index),
+                  })}
+                </div>
+              )}
+            />
+          </div>
+        )}
+        secondSlot={
+          activeEvent != null && renderDetail && isPanelOpen
+            ? ({ style }) => (
+                <div style={style} className="grid grid-rows-[auto_minmax(0,1fr)] bg-surface">
+                  <div className="pb-3 px-2">
+                    <Separator />
+                  </div>
+                  <div className="mx-2 overflow-y-auto">
+                    {renderDetail({
+                      event: activeEvent,
+                      index: activeIndex ?? 0,
+                      onClose: handleClose,
+                    })}
+                  </div>
+                </div>
+              )
+            : null
+        }
+      />
+    </div>
+  );
+}
+
+export type EventDetailAction =
+  | {
+      type?: "button";
+      /** Unique key for React */
+      key: string;
+      /** Button label */
+      label: string;
+      /** Optional icon */
+      icon?: ReactNode;
+      /** Click handler */
+      onClick: () => void;
+    }
+  | {
+      type: "select";
+      /** Unique key for React */
+      key: string;
+      /** Select label */
+      label: string;
+      /** Selected value */
+      value: string;
+      /** Select options */
+      options: SelectProps<string>["options"];
+      /** Change handler */
+      onChange: (value: string) => void;
+    };
+
+interface EventDetailHeaderProps {
+  title: string;
+  prefix?: ReactNode;
+  timestamp?: string;
+  actions?: EventDetailAction[];
+  copyText?: string | (() => Promise<string | null>);
+  onClose?: () => void;
+}
+
+export function EventDetailHeader({
+  title,
+  prefix,
+  timestamp,
+  actions,
+  copyText,
+  onClose,
+}: EventDetailHeaderProps) {
+  const formattedTime = timestamp ? format(new Date(`${timestamp}Z`), "HH:mm:ss.SSS") : null;
+
+  return (
+    <div className="flex items-center justify-between gap-2 mb-2 h-xs">
+      <HStack space={2} className="items-center min-w-0">
+        {prefix}
+        <h3 className="font-semibold select-auto cursor-auto truncate">{title}</h3>
+      </HStack>
+      <HStack space={2} className="items-center">
+        {actions?.map((action) =>
+          action.type === "select" ? (
+            <div key={action.key} className="w-32">
+              <Select
+                name={action.key}
+                label={action.label}
+                hideLabel
+                size="xs"
+                value={action.value}
+                options={action.options}
+                onChange={action.onChange}
+              />
+            </div>
+          ) : (
+            <Button
+              key={action.key}
+              type="button"
+              variant="border"
+              size="xs"
+              onClick={action.onClick}
+            >
+              {action.icon}
+              {action.label}
+            </Button>
+          ),
+        )}
+        {copyText != null && (
+          <CopyIconButton text={copyText} size="xs" title="Copy" variant="border" iconSize="sm" />
+        )}
+        {formattedTime && (
+          <span className="text-text-subtlest font-mono text-editor ml-2">{formattedTime}</span>
+        )}
+        {onClose != null && (
+          <div
+            className={classNames(
+              copyText != null ||
+                formattedTime ||
+                ((actions ?? []).length > 0 && "border-l border-l-surface-highlight ml-2 pl-3"),
+            )}
+          >
+            <IconButton
+              color="custom"
+              className="text-text-subtle -mr-3"
+              size="xs"
+              icon="x"
+              title="Close event panel"
+              onClick={onClose}
+            />
+          </div>
+        )}
+      </HStack>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/EventViewerRow.tsx b/apps/yaak-client/components/core/EventViewerRow.tsx
new file mode 100644
index 0000000..6247dfc
--- /dev/null
+++ b/apps/yaak-client/components/core/EventViewerRow.tsx
@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import { format } from "date-fns";
+import type { ReactNode } from "react";
+
+interface EventViewerRowProps {
+  isActive: boolean;
+  onClick: () => void;
+  icon: ReactNode;
+  content: ReactNode;
+  timestamp?: string;
+}
+
+export function EventViewerRow({
+  isActive,
+  onClick,
+  icon,
+  content,
+  timestamp,
+}: EventViewerRowProps) {
+  return (
+    <div className="px-1">
+      <button
+        type="button"
+        onClick={onClick}
+        className={classNames(
+          "w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left",
+          "px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-hidden focus:text-text rounded-sm",
+          isActive && "bg-surface-active text-text!",
+          "text-text-subtle hover:text",
+        )}
+      >
+        {icon}
+        <div className="w-full truncate">{content}</div>
+        {timestamp && <div className="opacity-50">{format(`${timestamp}Z`, "HH:mm:ss.SSS")}</div>}
+      </button>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/Hotkey.tsx b/apps/yaak-client/components/core/Hotkey.tsx
new file mode 100644
index 0000000..faa86ce
--- /dev/null
+++ b/apps/yaak-client/components/core/Hotkey.tsx
@@ -0,0 +1,45 @@
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { HotkeyAction } from "../../hooks/useHotKey";
+import { useFormattedHotkey } from "../../hooks/useHotKey";
+
+interface Props {
+  action: HotkeyAction | null;
+  className?: string;
+  variant?: "text" | "with-bg";
+}
+
+export function Hotkey({ action, className, variant }: Props) {
+  const labelParts = useFormattedHotkey(action);
+  if (labelParts === null) {
+    return null;
+  }
+
+  return <HotkeyRaw labelParts={labelParts} className={className} variant={variant} />;
+}
+
+interface HotkeyRawProps {
+  labelParts: string[];
+  className?: string;
+  variant?: "text" | "with-bg";
+}
+
+export function HotkeyRaw({ labelParts, className, variant }: HotkeyRawProps) {
+  return (
+    <HStack
+      className={classNames(
+        className,
+        variant === "with-bg" &&
+          "rounded-sm bg-surface-highlight px-1 border border-border text-text-subtle",
+        variant === "text" && "text-text-subtlest",
+      )}
+    >
+      {labelParts.map((char, index) => (
+        // oxlint-disable-next-line react/no-array-index-key
+        <div key={index} className="min-w-[1em] text-center">
+          {char}
+        </div>
+      ))}
+    </HStack>
+  );
+}
diff --git a/apps/yaak-client/components/core/HotkeyLabel.tsx b/apps/yaak-client/components/core/HotkeyLabel.tsx
new file mode 100644
index 0000000..ab2e736
--- /dev/null
+++ b/apps/yaak-client/components/core/HotkeyLabel.tsx
@@ -0,0 +1,15 @@
+import classNames from "classnames";
+import type { HotkeyAction } from "../../hooks/useHotKey";
+import { useHotkeyLabel } from "../../hooks/useHotKey";
+
+interface Props {
+  action: HotkeyAction;
+  className?: string;
+}
+
+export function HotkeyLabel({ action, className }: Props) {
+  const label = useHotkeyLabel(action);
+  return (
+    <span className={classNames(className, "text-text-subtle whitespace-nowrap")}>{label}</span>
+  );
+}
diff --git a/apps/yaak-client/components/core/HotkeyList.test.tsx b/apps/yaak-client/components/core/HotkeyList.test.tsx
new file mode 100644
index 0000000..47d99f4
--- /dev/null
+++ b/apps/yaak-client/components/core/HotkeyList.test.tsx
@@ -0,0 +1,25 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, test, vi } from "vite-plus/test";
+import type { HotkeyAction } from "../../hooks/useHotKey";
+import { HotkeyList } from "./HotkeyList";
+
+vi.mock("./Hotkey", () => ({
+  Hotkey: ({ action }: { action: HotkeyAction }) =>
+    action === "sidebar.selected.move" ? null : <span>{action}</span>,
+}));
+
+vi.mock("./HotkeyLabel", () => ({
+  HotkeyLabel: ({ action }: { action: HotkeyAction }) => <span>{action}</span>,
+}));
+
+describe("HotkeyList", () => {
+  test("keeps a grid cell for actions without a shortcut", () => {
+    const markup = renderToStaticMarkup(
+      <HotkeyList hotkeys={["sidebar.selected.move", "request.send"]} />,
+    );
+
+    expect(markup).toContain(
+      '<span>sidebar.selected.move</span><div class="ml-4"></div><span>request.send</span>',
+    );
+  });
+});
diff --git a/apps/yaak-client/components/core/HotkeyList.tsx b/apps/yaak-client/components/core/HotkeyList.tsx
new file mode 100644
index 0000000..91f9025
--- /dev/null
+++ b/apps/yaak-client/components/core/HotkeyList.tsx
@@ -0,0 +1,31 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import { Fragment } from "react";
+import type { HotkeyAction } from "../../hooks/useHotKey";
+import { Hotkey } from "./Hotkey";
+import { HotkeyLabel } from "./HotkeyLabel";
+
+interface Props {
+  hotkeys: HotkeyAction[];
+  bottomSlot?: ReactNode;
+  className?: string;
+}
+
+export const HotkeyList = ({ hotkeys, bottomSlot, className }: Props) => {
+  return (
+    <div className={classNames(className, "h-full flex items-center justify-center")}>
+      <div className="grid gap-2 grid-cols-[auto_auto]">
+        {hotkeys.map((hotkey) => (
+          <Fragment key={hotkey}>
+            <HotkeyLabel className="truncate" action={hotkey} />
+            {/* Keep this grid cell when Hotkey renders nothing so later rows stay aligned. */}
+            <div className="ml-4">
+              <Hotkey action={hotkey} />
+            </div>
+          </Fragment>
+        ))}
+        {bottomSlot}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/yaak-client/components/core/HttpMethodTag.tsx b/apps/yaak-client/components/core/HttpMethodTag.tsx
new file mode 100644
index 0000000..0184c2b
--- /dev/null
+++ b/apps/yaak-client/components/core/HttpMethodTag.tsx
@@ -0,0 +1,91 @@
+import type { GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import { settingsAtom } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { memo } from "react";
+
+interface Props {
+  request: HttpRequest | GrpcRequest | WebsocketRequest;
+  className?: string;
+  short?: boolean;
+  noAlias?: boolean;
+}
+
+const methodNames: Record<string, string> = {
+  get: "GET",
+  put: "PUT",
+  post: "POST",
+  patch: "PTCH",
+  delete: "DELE",
+  options: "OPTN",
+  head: "HEAD",
+  query: "QURY",
+  graphql: "GQL",
+  grpc: "GRPC",
+  websocket: "WS",
+};
+
+export const HttpMethodTag = memo(function HttpMethodTag({
+  request,
+  className,
+  short,
+  noAlias,
+}: Props) {
+  const method =
+    request.model === "http_request" && request.bodyType === "graphql" && !noAlias
+      ? "graphql"
+      : request.model === "grpc_request"
+        ? "grpc"
+        : request.model === "websocket_request"
+          ? "websocket"
+          : request.method;
+
+  return <HttpMethodTagRaw method={method} className={className} short={short} />;
+});
+
+export function HttpMethodTagRaw({
+  className,
+  method,
+  short,
+  forceColor,
+}: {
+  method: string;
+  className?: string;
+  short?: boolean;
+  forceColor?: boolean;
+}) {
+  let label = method.toUpperCase();
+  if (short) {
+    label = methodNames[method.toLowerCase()] ?? method.slice(0, 4);
+    label = label.padEnd(4, " ");
+  }
+
+  const m = method.toUpperCase();
+
+  const settings = useAtomValue(settingsAtom);
+  const colored = forceColor || settings.coloredMethods;
+
+  return (
+    <span
+      className={classNames(
+        className,
+        !colored && "text-text-subtle",
+        colored && m === "GRAPHQL" && "text-info",
+        colored && m === "WEBSOCKET" && "text-info",
+        colored && m === "GRPC" && "text-info",
+        colored && m === "QUERY" && "text-text-subtle",
+        colored && m === "OPTIONS" && "text-info",
+        colored && m === "HEAD" && "text-text-subtle",
+        colored && m === "GET" && "text-primary",
+        colored && m === "PUT" && "text-warning",
+        colored && m === "PATCH" && "text-notice",
+        colored && m === "POST" && "text-success",
+        colored && m === "DELETE" && "text-danger",
+        "font-mono shrink-0 whitespace-pre",
+        "pt-[0.15em]", // Fix for monospace font not vertically centering
+      )}
+    >
+      {label}
+    </span>
+  );
+}
diff --git a/apps/yaak-client/components/core/HttpResponseDurationTag.tsx b/apps/yaak-client/components/core/HttpResponseDurationTag.tsx
new file mode 100644
index 0000000..93709aa
--- /dev/null
+++ b/apps/yaak-client/components/core/HttpResponseDurationTag.tsx
@@ -0,0 +1,45 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { useEffect, useRef, useState } from "react";
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function HttpResponseDurationTag({ response }: Props) {
+  const [fallbackElapsed, setFallbackElapsed] = useState<number>(0);
+  const timeout = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  // Calculate the duration of the response for use when the response hasn't finished yet
+  useEffect(() => {
+    clearInterval(timeout.current);
+    if (response.state === "closed") return;
+    timeout.current = setInterval(() => {
+      setFallbackElapsed(Date.now() - new Date(`${response.createdAt}Z`).getTime());
+    }, 100);
+    return () => clearInterval(timeout.current);
+  }, [response.createdAt, response.state]);
+
+  const dnsValue = response.elapsedDns > 0 ? formatMillis(response.elapsedDns) : "--";
+  const title = `DNS: ${dnsValue}\nHEADER: ${formatMillis(response.elapsedHeaders)}\nTOTAL: ${formatMillis(response.elapsed)}`;
+
+  const elapsed = response.state === "closed" ? response.elapsed : fallbackElapsed;
+
+  return (
+    <span className="font-mono" title={title}>
+      {formatMillis(elapsed)}
+    </span>
+  );
+}
+
+export function formatMillis(ms: number) {
+  if (ms < 1000) {
+    return `${ms} ms`;
+  }
+  if (ms < 60_000) {
+    const seconds = (ms / 1000).toFixed(ms < 10_000 ? 1 : 0);
+    return `${seconds} s`;
+  }
+  const minutes = Math.floor(ms / 60_000);
+  const seconds = Math.round((ms % 60_000) / 1000);
+  return `${minutes}m ${seconds}s`;
+}
diff --git a/apps/yaak-client/components/core/HttpStatusTag.tsx b/apps/yaak-client/components/core/HttpStatusTag.tsx
new file mode 100644
index 0000000..a705f52
--- /dev/null
+++ b/apps/yaak-client/components/core/HttpStatusTag.tsx
@@ -0,0 +1,55 @@
+import type { HttpResponse, HttpResponseState } from "@yaakapp-internal/models";
+import classNames from "classnames";
+
+interface Props {
+  response: HttpResponse;
+  className?: string;
+  showReason?: boolean;
+  short?: boolean;
+}
+
+export function HttpStatusTag({ response, ...props }: Props) {
+  const { status, state, statusReason } = response;
+  return <HttpStatusTagRaw status={status} state={state} statusReason={statusReason} {...props} />;
+}
+
+export function HttpStatusTagRaw({
+  status,
+  state,
+  className,
+  showReason,
+  statusReason,
+  short,
+}: Omit<Props, "response"> & {
+  status: number | string;
+  state?: HttpResponseState;
+  statusReason?: string | null;
+}) {
+  let colorClass: string;
+  let label = `${status}`;
+  const statusN = typeof status === "number" ? status : parseInt(status, 10);
+
+  if (state === "initialized") {
+    label = short ? "CONN" : "CONNECTING";
+    colorClass = "text-text-subtle";
+  } else if (statusN < 100) {
+    label = short ? "ERR" : "ERROR";
+    colorClass = "text-danger";
+  } else if (statusN < 200) {
+    colorClass = "text-info";
+  } else if (statusN < 300) {
+    colorClass = "text-success";
+  } else if (statusN < 400) {
+    colorClass = "text-primary";
+  } else if (statusN < 500) {
+    colorClass = "text-warning";
+  } else {
+    colorClass = "text-danger";
+  }
+
+  return (
+    <span className={classNames(className, "font-mono min-w-0", colorClass)}>
+      {label} {showReason && statusReason}
+    </span>
+  );
+}
diff --git a/apps/yaak-client/components/core/IconButton.tsx b/apps/yaak-client/components/core/IconButton.tsx
new file mode 100644
index 0000000..26b642a
--- /dev/null
+++ b/apps/yaak-client/components/core/IconButton.tsx
@@ -0,0 +1,37 @@
+import {
+  IconButton as BaseIconButton,
+  type IconButtonProps as BaseIconButtonProps,
+} from "@yaakapp-internal/ui";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import type { HotkeyAction } from "../../hooks/useHotKey";
+import { useFormattedHotkey, useHotKey } from "../../hooks/useHotKey";
+
+export type IconButtonProps = BaseIconButtonProps & {
+  hotkeyAction?: HotkeyAction;
+  hotkeyLabelOnly?: boolean;
+  hotkeyPriority?: number;
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  { hotkeyAction, hotkeyPriority, hotkeyLabelOnly, title, ...props }: IconButtonProps,
+  ref,
+) {
+  const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join("");
+  const fullTitle = hotkeyTrigger ? `${title ?? ""} ${hotkeyTrigger}`.trim() : title;
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    ref,
+    () => buttonRef.current,
+  );
+
+  useHotKey(
+    hotkeyAction ?? null,
+    () => {
+      buttonRef.current?.click();
+    },
+    { priority: hotkeyPriority, enable: !hotkeyLabelOnly },
+  );
+
+  return <BaseIconButton ref={buttonRef} title={fullTitle} {...props} />;
+});
diff --git a/apps/yaak-client/components/core/IconTooltip.tsx b/apps/yaak-client/components/core/IconTooltip.tsx
new file mode 100644
index 0000000..3886048
--- /dev/null
+++ b/apps/yaak-client/components/core/IconTooltip.tsx
@@ -0,0 +1,30 @@
+import { Icon, type IconProps } from "@yaakapp-internal/ui";
+import type { TooltipProps } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
+
+type Props = Omit<TooltipProps, "children"> & {
+  icon?: IconProps["icon"];
+  iconSize?: IconProps["size"];
+  iconColor?: IconProps["color"];
+  className?: string;
+  tabIndex?: number;
+};
+
+export function IconTooltip({
+  content,
+  icon = "info",
+  iconColor,
+  iconSize,
+  ...tooltipProps
+}: Props) {
+  return (
+    <Tooltip content={content} {...tooltipProps}>
+      <Icon
+        className="opacity-60 hover:opacity-100"
+        icon={icon}
+        size={iconSize}
+        color={iconColor}
+      />
+    </Tooltip>
+  );
+}
diff --git a/apps/yaak-client/components/core/Input.tsx b/apps/yaak-client/components/core/Input.tsx
new file mode 100644
index 0000000..c006327
--- /dev/null
+++ b/apps/yaak-client/components/core/Input.tsx
@@ -0,0 +1,677 @@
+import type { EditorView } from "@codemirror/view";
+import type { Color } from "@yaakapp-internal/plugins";
+import { HStack, Icon, type IconProps } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createFastMutation } from "../../hooks/useFastMutation";
+import { useIsEncryptionEnabled } from "../../hooks/useIsEncryptionEnabled";
+import { useStateWithDeps } from "../../hooks/useStateWithDeps";
+import { copyToClipboard } from "../../lib/copy";
+import {
+  analyzeTemplate,
+  convertTemplateToInsecure,
+  convertTemplateToSecure,
+} from "../../lib/encryption";
+import { generateId } from "../../lib/generateId";
+import {
+  setupOrConfigureEncryption,
+  withEncryptionEnabled,
+} from "../../lib/setupOrConfigureEncryption";
+import { Button } from "./Button";
+import type { DropdownItem } from "./Dropdown";
+import { Dropdown } from "./Dropdown";
+import type { EditorProps } from "./Editor/Editor";
+import type { GenericCompletion } from "./Editor/genericCompletion";
+import { Editor } from "./Editor/LazyEditor";
+import { IconButton } from "./IconButton";
+import { IconTooltip } from "./IconTooltip";
+import { Label } from "./Label";
+
+export type InputProps = Pick<
+  EditorProps,
+  | "language"
+  | "autocomplete"
+  | "forcedEnvironmentId"
+  | "forceUpdateKey"
+  | "disabled"
+  | "autoFocus"
+  | "autoSelect"
+  | "autocompleteVariables"
+  | "autocompleteFunctions"
+  | "onKeyDown"
+  | "readOnly"
+> & {
+  className?: string;
+  containerClassName?: string;
+  inputWrapperClassName?: string;
+  defaultValue?: string | null;
+  disableObscureToggle?: boolean;
+  fullHeight?: boolean;
+  hideLabel?: boolean;
+  help?: ReactNode;
+  label: ReactNode;
+  labelClassName?: string;
+  labelPosition?: "top" | "left";
+  leftSlot?: ReactNode;
+  multiLine?: boolean;
+  name?: string;
+  onBlur?: () => void;
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+  onPaste?: (value: string) => void;
+  onPasteOverwrite?: EditorProps["onPasteOverwrite"];
+  placeholder?: string;
+  required?: boolean;
+  rightSlot?: ReactNode;
+  /**
+   * Show a chevron that opens the `autocomplete` options as a menu, so a value can be picked
+   * without knowing what to type. Opt-in, because plenty of inputs pass `autocomplete` without
+   * wanting the affordance (the URL bar completes from history, and a chevron there would be
+   * noise). Renders nothing when there are no options to show.
+   */
+  showOptionsPicker?: boolean;
+  size?: "2xs" | "xs" | "sm" | "md" | "auto";
+  stateKey: EditorProps["stateKey"];
+  extraExtensions?: EditorProps["extraExtensions"];
+  tint?: Color;
+  type?: "text" | "password";
+  validate?: boolean | ((v: string) => boolean);
+  wrapLines?: boolean;
+  setRef?: (h: InputHandle | null) => void;
+};
+
+export interface InputHandle {
+  focus: () => void;
+  isFocused: () => boolean;
+  value: () => string;
+  selectAll: () => void;
+  dispatch: EditorView["dispatch"];
+}
+
+export function Input({ type, ...props }: InputProps) {
+  // If it's a password and template functions are supported (ie. secure(...)) then
+  // use the encrypted input component.
+  if (type === "password" && props.autocompleteFunctions) {
+    return <EncryptionInput {...props} />;
+  }
+  return <BaseInput type={type} {...props} />;
+}
+
+function BaseInput({
+  className,
+  containerClassName,
+  defaultValue,
+  disableObscureToggle,
+  disabled,
+  forceUpdateKey,
+  fullHeight,
+  help,
+  hideLabel,
+  inputWrapperClassName,
+  label,
+  labelClassName,
+  labelPosition = "top",
+  leftSlot,
+  multiLine,
+  onBlur,
+  onChange,
+  onFocus,
+  onPaste,
+  onPasteOverwrite,
+  placeholder,
+  readOnly,
+  required,
+  rightSlot,
+  showOptionsPicker,
+  size = "md",
+  stateKey,
+  tint,
+  type = "text",
+  validate,
+  wrapLines,
+  setRef,
+  ...props
+}: InputProps) {
+  const [focused, setFocused] = useState(false);
+  const [obscured, setObscured] = useStateWithDeps(type === "password", [type]);
+  const [hasChanged, setHasChanged] = useStateWithDeps<boolean>(false, [forceUpdateKey]);
+  const editorRef = useRef<EditorView | null>(null);
+  const skipNextFocus = useRef<boolean>(false);
+
+  const handle = useMemo<InputHandle>(
+    () => ({
+      focus: () => {
+        if (editorRef.current == null) return;
+        const anchor = editorRef.current.state.doc.length;
+        skipNextFocus.current = true;
+        editorRef.current.focus();
+        editorRef.current.dispatch({ selection: { anchor, head: anchor }, scrollIntoView: true });
+      },
+      isFocused: () => editorRef.current?.hasFocus ?? false,
+      value: () => editorRef.current?.state.doc.toString() ?? "",
+      dispatch: (...args) => {
+        // oxlint-disable-next-line no-explicit-any
+        editorRef.current?.dispatch(...(args as any));
+      },
+      selectAll() {
+        if (editorRef.current == null) return;
+        editorRef.current.focus();
+        editorRef.current.dispatch({
+          selection: { anchor: 0, head: editorRef.current.state.doc.length },
+        });
+      },
+    }),
+    [],
+  );
+
+  // Replace the whole value with a picked option. Dispatching runs it through the editor's
+  // onChange, same as typing, so callers see one consistent change path.
+  const insertOption = useCallback((value: string) => {
+    const view = editorRef.current;
+    if (view == null) return;
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
+    view.focus();
+  }, []);
+
+  const pickerOptions = showOptionsPicker && !disabled ? (props.autocomplete?.options ?? []) : [];
+
+  const setEditorRef = useCallback(
+    (h: EditorView | null) => {
+      editorRef.current = h;
+      setRef?.(handle);
+    },
+    [handle, setRef],
+  );
+
+  useEffect(() => {
+    const fn = () => {
+      skipNextFocus.current = true;
+    };
+    window.addEventListener("focus", fn);
+    return () => {
+      window.removeEventListener("focus", fn);
+    };
+  }, []);
+
+  const handleFocus = useCallback(() => {
+    if (readOnly) return;
+
+    if (!skipNextFocus.current) {
+      editorRef.current?.dispatch({
+        selection: { anchor: 0, head: editorRef.current.state.doc.length },
+      });
+    }
+
+    setFocused(true);
+    onFocus?.();
+    skipNextFocus.current = false;
+  }, [onFocus, readOnly]);
+
+  const handleBlur = useCallback(async () => {
+    setFocused(false);
+    // Move selection to the end on blur
+    const anchor = editorRef.current?.state.doc.length ?? 0;
+    editorRef.current?.dispatch({
+      selection: { anchor, head: anchor },
+    });
+    onBlur?.();
+  }, [onBlur]);
+
+  const id = useRef(`input-${generateId()}`);
+  const editorClassName = classNames(
+    className,
+    "bg-transparent! min-w-0 h-auto w-full focus:outline-hidden placeholder:text-placeholder",
+  );
+
+  const isValid = useMemo(() => {
+    if (required && !validateRequire(defaultValue ?? "")) return false;
+    if (typeof validate === "boolean") return validate;
+    if (typeof validate === "function" && !validate(defaultValue ?? "")) return false;
+    return true;
+  }, [required, defaultValue, validate]);
+
+  const handleChange = useCallback(
+    (value: string) => {
+      onChange?.(value);
+      setHasChanged(true);
+    },
+    [onChange, setHasChanged],
+  );
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  // Submit the nearest form on Enter key press
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key !== "Enter") return;
+
+      const form = wrapperRef.current?.closest("form");
+      if (!isValid || form == null) return;
+
+      form?.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true }));
+    },
+    [isValid],
+  );
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={classNames(
+        "pointer-events-auto", // Just in case we're placing in disabled parent
+        "w-full",
+        fullHeight && "h-full",
+        labelPosition === "left" && "flex items-center gap-2",
+        labelPosition === "top" && "flex-row gap-0.5",
+      )}
+    >
+      <Label
+        htmlFor={id.current}
+        help={help}
+        required={required}
+        visuallyHidden={hideLabel}
+        className={classNames(labelClassName)}
+      >
+        {label}
+      </Label>
+      <HStack
+        alignItems="stretch"
+        className={classNames(
+          containerClassName,
+          fullHeight && "h-full",
+          "x-theme-input",
+          "relative w-full rounded-md text overflow-hidden",
+          "border",
+          focused && !disabled ? "border-border-focus" : "border-border",
+          disabled && "border-dotted",
+          !isValid && hasChanged && "border-danger!",
+          size === "md" && "min-h-md",
+          size === "sm" && "min-h-sm",
+          size === "xs" && "min-h-xs",
+          size === "2xs" && "min-h-2xs",
+        )}
+      >
+        {tint != null && (
+          <div
+            aria-hidden
+            className={classNames(
+              "absolute inset-0 opacity-5 pointer-events-none",
+              tint === "primary" && "bg-primary",
+              tint === "secondary" && "bg-secondary",
+              tint === "info" && "bg-info",
+              tint === "success" && "bg-success",
+              tint === "notice" && "bg-notice",
+              tint === "warning" && "bg-warning",
+              tint === "danger" && "bg-danger",
+            )}
+          />
+        )}
+        {leftSlot}
+        <HStack
+          className={classNames(
+            inputWrapperClassName,
+            "flex-1 min-w-0 px-2",
+            fullHeight && "h-full",
+            leftSlot ? "pl-0" : null,
+            rightSlot ? "pr-0" : null,
+          )}
+        >
+          <Editor
+            setRef={setEditorRef}
+            id={id.current}
+            hideGutter
+            singleLine={!multiLine}
+            containerOnly
+            stateKey={stateKey}
+            wrapLines={wrapLines}
+            heightMode="auto"
+            onKeyDown={handleKeyDown}
+            type={type === "password" && !obscured ? "text" : type}
+            defaultValue={defaultValue}
+            forceUpdateKey={forceUpdateKey}
+            placeholder={placeholder}
+            onChange={handleChange}
+            onPaste={onPaste}
+            onPasteOverwrite={onPasteOverwrite}
+            disabled={disabled}
+            className={classNames(
+              editorClassName,
+              multiLine && size === "md" && "py-1.5",
+              multiLine && size === "sm" && "py-1",
+              multiLine && (size === "xs" || size === "2xs") && "py-0.5",
+            )}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            readOnly={readOnly}
+            {...props}
+          />
+        </HStack>
+        {type === "password" && !disableObscureToggle && (
+          <IconButton
+            title={
+              obscured
+                ? `Show ${typeof label === "string" ? label : "field"}`
+                : `Obscure ${typeof label === "string" ? label : "field"}`
+            }
+            size="xs"
+            className={classNames("mr-0.5 h-auto! my-0.5", disabled && "opacity-disabled")}
+            color={tint}
+            // iconClassName={classNames(
+            //   tint === 'primary' && 'text-primary',
+            //   tint === 'secondary' && 'text-secondary',
+            //   tint === 'info' && 'text-info',
+            //   tint === 'success' && 'text-success',
+            //   tint === 'notice' && 'text-notice',
+            //   tint === 'warning' && 'text-warning',
+            //   tint === 'danger' && 'text-danger',
+            // )}
+            iconSize="sm"
+            icon={obscured ? "eye" : "eye_closed"}
+            onClick={() => setObscured((o) => !o)}
+          />
+        )}
+        {pickerOptions.length > 0 && (
+          <OptionsPickerDropdown options={pickerOptions} onSelect={insertOption} />
+        )}
+        {rightSlot}
+      </HStack>
+    </div>
+  );
+}
+
+/**
+ * Chevron that opens the input's autocomplete options as a menu, for browsing values rather than
+ * typing them. Shows `label` but inserts `apply` when set, so a long value can be listed under a
+ * short name (e.g. a User-Agent).
+ *
+ * Skipped in the tab order: once focus is in the input, inline autocomplete offers the same
+ * options, so this would only add a stop between fields. Hidden when the nearest container is
+ * narrow and the input needs the width more — written as a `max` query so it stays visible for
+ * inputs that have no container ancestor at all.
+ */
+function OptionsPickerDropdown({
+  options,
+  onSelect,
+}: {
+  options: GenericCompletion[];
+  onSelect: (value: string) => void;
+}) {
+  const items = useMemo<DropdownItem[]>(
+    () =>
+      options.map((o) => ({
+        label: o.label,
+        onSelect: () => onSelect(typeof o.apply === "string" ? o.apply : o.label),
+      })),
+    [options, onSelect],
+  );
+
+  return (
+    <Dropdown items={items}>
+      <IconButton
+        tabIndex={-1}
+        iconSize="sm"
+        size="xs"
+        icon="chevron_down"
+        title="Show suggestions"
+        className="mr-0.5 h-auto! my-0.5 text-text-subtlest @max-[24rem]:hidden"
+      />
+    </Dropdown>
+  );
+}
+
+function validateRequire(v: string) {
+  return v.length > 0;
+}
+
+type PasswordFieldType = "text" | "encrypted";
+
+function EncryptionInput({
+  defaultValue,
+  onChange,
+  autocompleteFunctions,
+  autocompleteVariables,
+  forceUpdateKey: ogForceUpdateKey,
+  setRef,
+  ...props
+}: InputProps) {
+  const isEncryptionEnabled = useIsEncryptionEnabled();
+  const [state, setState] = useStateWithDeps<{
+    fieldType: PasswordFieldType;
+    value: string | null;
+    security: ReturnType<typeof analyzeTemplate> | null;
+    obscured: boolean;
+    error: string | null;
+  }>(
+    {
+      fieldType: isEncryptionEnabled ? "encrypted" : "text",
+      value: null,
+      security: null,
+      obscured: true,
+      error: null,
+    },
+    [ogForceUpdateKey],
+  );
+
+  const forceUpdateKey = `${ogForceUpdateKey}::${state.fieldType}::${state.value === null}`;
+  const inputRef = useRef<InputHandle>(null);
+
+  useEffect(() => {
+    if (state.value != null) {
+      // We already configured it
+      return;
+    }
+
+    const security = analyzeTemplate(defaultValue ?? "");
+    if (analyzeTemplate(defaultValue ?? "") === "global_secured") {
+      // Lazily update value to decrypted representation
+      templateToInsecure.mutate(defaultValue ?? "", {
+        onSuccess: (value) => {
+          setState({ fieldType: "encrypted", security, value, obscured: true, error: null });
+          // We're calling this here because we want the input to be fully initialized so the caller
+          // can do stuff like change the selection.
+          requestAnimationFrame(() => setRef?.(inputRef.current));
+        },
+        onError: (value) => {
+          setState({
+            fieldType: "encrypted",
+            security,
+            value: null,
+            error: String(value),
+            obscured: true,
+          });
+        },
+      });
+    } else if (isEncryptionEnabled && !defaultValue) {
+      // Default to encrypted field for new encrypted inputs
+      setState({ fieldType: "encrypted", security, value: "", obscured: true, error: null });
+      requestAnimationFrame(() => setRef?.(inputRef.current));
+    } else if (isEncryptionEnabled) {
+      // Don't obscure plain text when encryption is enabled
+      setState({
+        fieldType: "text",
+        security,
+        value: defaultValue ?? "",
+        obscured: false,
+        error: null,
+      });
+      requestAnimationFrame(() => setRef?.(inputRef.current));
+    } else {
+      // Don't obscure plain text when encryption is disabled
+      setState({
+        fieldType: "text",
+        security,
+        value: defaultValue ?? "",
+        obscured: true,
+        error: null,
+      });
+      requestAnimationFrame(() => setRef?.(inputRef.current));
+    }
+  }, [defaultValue, isEncryptionEnabled, setRef, setState, state.value]);
+
+  const handleChange = useCallback(
+    (value: string, fieldType: PasswordFieldType) => {
+      if (fieldType === "encrypted") {
+        templateToSecure.mutate(value, { onSuccess: (value) => onChange?.(value) });
+      } else {
+        onChange?.(value);
+      }
+      setState((s) => {
+        // We can't analyze when encrypted because we don't have the raw value, so assume it's secured
+        const security = fieldType === "encrypted" ? "global_secured" : analyzeTemplate(value);
+        // Reset obscured value when the field type is being changed
+        const obscured = fieldType === s.fieldType ? s.obscured : fieldType !== "text";
+        return { fieldType, value, security, obscured, error: s.error };
+      });
+    },
+    [onChange, setState],
+  );
+
+  const handleInputChange = useCallback(
+    (value: string) => {
+      if (state.fieldType != null) {
+        handleChange(value, state.fieldType);
+      }
+    },
+    [handleChange, state],
+  );
+
+  const setInputRef = useCallback((h: InputHandle | null) => {
+    inputRef.current = h;
+  }, []);
+
+  const handleFieldTypeChange = useCallback(
+    (newFieldType: PasswordFieldType) => {
+      const { value, fieldType } = state;
+      if (value == null || fieldType === newFieldType) {
+        return;
+      }
+
+      withEncryptionEnabled(async () => {
+        const newValue = await convertTemplateToInsecure(value);
+        handleChange(newValue, newFieldType);
+      });
+    },
+    [handleChange, state],
+  );
+
+  const dropdownItems = useMemo<DropdownItem[]>(
+    () => [
+      {
+        label: state.obscured ? "Show" : "Hide",
+        disabled: isEncryptionEnabled && state.fieldType === "text",
+        leftSlot: <Icon icon={state.obscured ? "eye" : "eye_closed"} />,
+        onSelect: () => setState((s) => ({ ...s, obscured: !s.obscured })),
+      },
+      {
+        label: "Copy",
+        leftSlot: <Icon icon="copy" />,
+        hidden: !state.value,
+        onSelect: () => copyToClipboard(state.value ?? ""),
+      },
+      { type: "separator" },
+      {
+        label: state.fieldType === "text" ? "Encrypt Field" : "Decrypt Field",
+        leftSlot: <Icon icon={state.fieldType === "text" ? "lock" : "lock_open"} />,
+        onSelect: () => handleFieldTypeChange(state.fieldType === "text" ? "encrypted" : "text"),
+      },
+    ],
+    [
+      handleFieldTypeChange,
+      isEncryptionEnabled,
+      setState,
+      state.fieldType,
+      state.obscured,
+      state.value,
+    ],
+  );
+
+  let tint: InputProps["tint"];
+  if (!isEncryptionEnabled) {
+    tint = undefined;
+  } else if (state.fieldType === "encrypted") {
+    tint = "info";
+  } else if (state.security === "local_secured") {
+    tint = "secondary";
+  } else if (state.security === "insecure") {
+    tint = "notice";
+  }
+
+  const rightSlot = useMemo(() => {
+    let icon: IconProps["icon"];
+    if (isEncryptionEnabled) {
+      icon = state.security === "insecure" ? "shield_off" : "shield_check";
+    } else {
+      icon = state.obscured ? "eye_closed" : "eye";
+    }
+    return (
+      <HStack className="h-auto m-0.5">
+        <Dropdown items={dropdownItems}>
+          <Button
+            size="sm"
+            variant="border"
+            color={tint}
+            aria-label="Configure encryption"
+            className={classNames(
+              "flex items-center justify-center h-full! px-1!",
+              "opacity-70", // Makes it a bit subtler
+              props.disabled && "opacity-disabled!",
+            )}
+          >
+            <HStack space={0.5}>
+              <Icon size="sm" title="Configure encryption" icon={icon} />
+              <Icon size="xs" title="Configure encryption" icon="chevron_down" />
+            </HStack>
+          </Button>
+        </Dropdown>
+      </HStack>
+    );
+  }, [dropdownItems, isEncryptionEnabled, props.disabled, state.obscured, state.security, tint]);
+
+  const type = state.obscured ? "password" : "text";
+
+  if (state.error) {
+    return (
+      <Button
+        variant="border"
+        color="danger"
+        size={props.size}
+        className="text-sm"
+        rightSlot={<IconTooltip tabIndex={-1} content={state.error} icon="alert_triangle" />}
+        onClick={() => {
+          setupOrConfigureEncryption();
+        }}
+      >
+        {state.error.replace(/^Render Error: /i, "")}
+      </Button>
+    );
+  }
+
+  return (
+    <BaseInput
+      setRef={setInputRef}
+      disableObscureToggle
+      autocompleteFunctions={autocompleteFunctions}
+      autocompleteVariables={autocompleteVariables}
+      defaultValue={state.value ?? ""}
+      forceUpdateKey={forceUpdateKey}
+      onChange={handleInputChange}
+      tint={tint}
+      type={type}
+      rightSlot={rightSlot}
+      disabled={state.error != null}
+      className="pr-1.5" // To account for encryption dropdown
+      {...props}
+    />
+  );
+}
+
+const templateToSecure = createFastMutation({
+  mutationKey: ["template-to-secure"],
+  mutationFn: convertTemplateToSecure,
+});
+
+const templateToInsecure = createFastMutation({
+  mutationKey: ["template-to-insecure"],
+  mutationFn: convertTemplateToInsecure,
+  disableToastError: true,
+});
diff --git a/apps/yaak-client/components/core/JsonAttributeTree.tsx b/apps/yaak-client/components/core/JsonAttributeTree.tsx
new file mode 100644
index 0000000..58e6a4d
--- /dev/null
+++ b/apps/yaak-client/components/core/JsonAttributeTree.tsx
@@ -0,0 +1,146 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import { useMemo, useState } from "react";
+import { Icon } from "@yaakapp-internal/ui";
+
+interface Props {
+  depth?: number;
+  // oxlint-disable-next-line no-explicit-any -- none
+  attrValue: any;
+  attrKey?: string | number;
+  attrKeyJsonPath?: string;
+  className?: string;
+}
+
+export const JsonAttributeTree = ({
+  depth = 0,
+  attrKey,
+  attrValue,
+  attrKeyJsonPath,
+  className,
+}: Props) => {
+  attrKeyJsonPath = attrKeyJsonPath ?? `${attrKey}`;
+
+  const [isExpanded, setIsExpanded] = useState(true);
+  const toggleExpanded = () => setIsExpanded((v) => !v);
+
+  const { isExpandable, children, label, labelClassName } = useMemo<{
+    isExpandable: boolean;
+    children: ReactNode;
+    label?: string;
+    labelClassName?: string;
+  }>(() => {
+    const jsonType = Object.prototype.toString.call(attrValue);
+    if (jsonType === "[object Object]") {
+      return {
+        children: isExpanded
+          ? Object.keys(attrValue)
+              .sort((a, b) => a.localeCompare(b))
+              .flatMap((k) => (
+                <JsonAttributeTree
+                  key={k}
+                  depth={depth + 1}
+                  attrValue={attrValue[k]}
+                  attrKey={k}
+                  attrKeyJsonPath={joinObjectKey(attrKeyJsonPath, k)}
+                />
+              ))
+          : null,
+        isExpandable: Object.keys(attrValue).length > 0,
+        label: isExpanded ? `{${Object.keys(attrValue).length || " "}}` : "{⋯}",
+        labelClassName: "text-text-subtlest",
+      };
+    }
+    if (jsonType === "[object Array]") {
+      return {
+        children: isExpanded
+          ? // oxlint-disable-next-line no-explicit-any -- none
+            attrValue.flatMap((v: any, i: number) => (
+              <JsonAttributeTree
+                // oxlint-disable-next-line no-array-index-key -- none
+                key={i}
+                depth={depth + 1}
+                attrValue={v}
+                attrKey={i}
+                attrKeyJsonPath={joinArrayKey(attrKeyJsonPath, i)}
+              />
+            ))
+          : null,
+        isExpandable: attrValue.length > 0,
+        label: isExpanded ? `[${attrValue.length || " "}]` : "[⋯]",
+        labelClassName: "text-text-subtlest",
+      };
+    }
+    return {
+      children: null,
+      isExpandable: false,
+      label: jsonType === "[object String]" ? `"${attrValue}"` : `${attrValue}`,
+      labelClassName: classNames(
+        jsonType === "[object Boolean]" && "text-primary",
+        jsonType === "[object Number]" && "text-info",
+        jsonType === "[object String]" && "text-notice",
+        jsonType === "[object Null]" && "text-danger",
+      ),
+    };
+  }, [attrValue, attrKeyJsonPath, isExpanded, depth]);
+
+  const labelEl = (
+    <span
+      className={classNames(labelClassName, "cursor-text select-text group-hover:text-text-subtle")}
+    >
+      {label}
+    </span>
+  );
+  return (
+    <div
+      className={classNames(
+        className,
+        /*depth === 0 && '-ml-4',*/ "font-mono text-xs",
+        depth === 0 && "h-full overflow-y-auto pb-2",
+      )}
+    >
+      <div className="flex items-center">
+        {isExpandable ? (
+          <button
+            type="button"
+            className="group relative flex items-center pl-4 w-full"
+            onClick={toggleExpanded}
+          >
+            <Icon
+              size="xs"
+              icon="chevron_right"
+              className={classNames(
+                "left-0 absolute transition-transform flex items-center",
+                "group-hover:text-text-subtle",
+                isExpanded ? "rotate-90" : "",
+              )}
+            />
+            <span className="text-primary group-hover:text-primary mr-1.5 whitespace-nowrap">
+              {attrKey === undefined ? "$" : attrKey}:
+            </span>
+            {labelEl}
+          </button>
+        ) : (
+          <>
+            <span className="text-primary mr-1.5 pl-4 whitespace-nowrap cursor-text select-text">
+              {attrKey}:
+            </span>
+            {labelEl}
+          </>
+        )}
+      </div>
+      {children && <div className="ml-4 whitespace-nowrap">{children}</div>}
+    </div>
+  );
+};
+
+function joinObjectKey(baseKey: string | undefined, key: string): string {
+  const quotedKey = key.match(/^[a-z0-9_]+$/i) ? key : `\`${key}\``;
+
+  if (baseKey == null) return quotedKey;
+  return `${baseKey}.${quotedKey}`;
+}
+
+function joinArrayKey(baseKey: string | undefined, index: number): string {
+  return `${baseKey ?? ""}[${index}]`;
+}
diff --git a/apps/yaak-client/components/core/KeyValueRow.tsx b/apps/yaak-client/components/core/KeyValueRow.tsx
new file mode 100644
index 0000000..75847fc
--- /dev/null
+++ b/apps/yaak-client/components/core/KeyValueRow.tsx
@@ -0,0 +1,106 @@
+import classNames from "classnames";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import { CopyIconButton } from "../CopyIconButton";
+
+interface Props {
+  children:
+    | ReactElement<HTMLAttributes<HTMLTableColElement>>
+    | (ReactElement<HTMLAttributes<HTMLTableColElement>> | null)[];
+  selectable?: boolean;
+}
+
+export function KeyValueRows({ children, selectable }: Props) {
+  const childArray = Array.isArray(children) ? children.filter(Boolean) : [children];
+  return (
+    <table
+      className={classNames(
+        "text-editor font-mono min-w-0 w-full mb-auto",
+        selectable &&
+          "[&_td]:select-auto [&_td]:cursor-auto [&_td_*]:select-auto [&_td_*]:cursor-auto",
+      )}
+    >
+      <tbody className="divide-y divide-surface-highlight">
+        {childArray.map((child, i) => (
+          // oxlint-disable-next-line react/no-array-index-key
+          <tr key={i}>{child}</tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+interface KeyValueRowProps {
+  label: ReactNode;
+  children: ReactNode;
+  rightSlot?: ReactNode;
+  leftSlot?: ReactNode;
+  align?: "top" | "middle";
+  labelClassName?: string;
+  labelColor?: "secondary" | "primary" | "info";
+  enableCopy?: boolean;
+  copyText?: string;
+}
+
+export function KeyValueRow({
+  label,
+  children,
+  rightSlot,
+  leftSlot,
+  align = "top",
+  labelColor = "secondary",
+  labelClassName,
+  enableCopy,
+  copyText,
+}: KeyValueRowProps) {
+  const textToCopy =
+    copyText ??
+    (typeof children === "string" || typeof children === "number" ? `${children}` : null);
+  const copyTitle =
+    typeof label === "string" || typeof label === "number" ? `Copy ${label}` : "Copy value";
+  const resolvedRightSlot =
+    rightSlot ??
+    (enableCopy && textToCopy != null ? (
+      <CopyIconButton
+        text={textToCopy}
+        className="text-text-subtle"
+        size="2xs"
+        title={copyTitle}
+        iconSize="sm"
+      />
+    ) : null);
+
+  return (
+    <>
+      <td
+        className={classNames(
+          "select-none py-0.5 pr-2 h-full max-w-40",
+          align === "top" && "align-top",
+          align === "middle" && "align-middle",
+          labelClassName,
+          labelColor === "primary" && "text-primary",
+          labelColor === "secondary" && "text-text-subtle",
+          labelColor === "info" && "text-info",
+        )}
+      >
+        <span className="select-text cursor-text">{label}</span>
+      </td>
+      <td
+        className={classNames(
+          "select-none py-0.5 break-all max-w-60",
+          align === "top" && "align-top",
+          align === "middle" && "align-middle",
+        )}
+      >
+        <div className="select-text cursor-text max-h-48 overflow-y-auto grid grid-cols-[auto_minmax(0,1fr)_auto]">
+          {leftSlot ?? <span aria-hidden />}
+          {children}
+          {resolvedRightSlot ? (
+            <div className="ml-1.5">{resolvedRightSlot}</div>
+          ) : (
+            <span aria-hidden />
+          )}
+        </div>
+      </td>
+    </>
+  );
+}
diff --git a/apps/yaak-client/components/core/Label.tsx b/apps/yaak-client/components/core/Label.tsx
new file mode 100644
index 0000000..a1f2cbb
--- /dev/null
+++ b/apps/yaak-client/components/core/Label.tsx
@@ -0,0 +1,49 @@
+import classNames from "classnames";
+import type { HTMLAttributes, ReactNode } from "react";
+import { IconTooltip } from "./IconTooltip";
+
+export function Label({
+  htmlFor,
+  className,
+  children,
+  visuallyHidden,
+  tags = [],
+  required,
+  rightSlot,
+  help,
+  ...props
+}: HTMLAttributes<HTMLLabelElement> & {
+  htmlFor: string | null;
+  required?: boolean;
+  tags?: string[];
+  visuallyHidden?: boolean;
+  rightSlot?: ReactNode;
+  children: ReactNode;
+  help?: ReactNode;
+}) {
+  return (
+    <label
+      htmlFor={htmlFor ?? undefined}
+      className={classNames(
+        className,
+        visuallyHidden && "sr-only",
+        "shrink-0 text-sm",
+        "text-text-subtle whitespace-nowrap flex items-center gap-1 mb-0.5",
+      )}
+      {...props}
+    >
+      <span>
+        {children}
+        {required === true && <span className="text-text-subtlest">*</span>}
+      </span>
+      {tags.map((tag, i) => (
+        // oxlint-disable-next-line react/no-array-index-key
+        <span key={i} className="text-xs text-text-subtlest">
+          ({tag})
+        </span>
+      ))}
+      {help && <IconTooltip tabIndex={-1} content={help} />}
+      {rightSlot && <div className="ml-auto">{rightSlot}</div>}
+    </label>
+  );
+}
diff --git a/apps/yaak-client/components/core/Link.tsx b/apps/yaak-client/components/core/Link.tsx
new file mode 100644
index 0000000..297e205
--- /dev/null
+++ b/apps/yaak-client/components/core/Link.tsx
@@ -0,0 +1,63 @@
+import { Link as RouterLink } from "@tanstack/react-router";
+import { platform } from "@yaakapp-internal/platform";
+import classNames from "classnames";
+import type { HTMLAttributes } from "react";
+import { appInfo } from "../../lib/appInfo";
+import { Icon } from "@yaakapp-internal/ui";
+
+interface Props extends HTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  noUnderline?: boolean;
+}
+
+export function Link({ href, children, noUnderline, className, ...other }: Props) {
+  const isExternal = href.match(/^https?:\/\//);
+
+  className = classNames(
+    className,
+    "relative",
+    "inline-flex items-center hover:underline group",
+    !noUnderline && "underline",
+  );
+
+  if (isExternal) {
+    const isYaakLink = href.startsWith("https://yaak.app");
+    let finalHref = href;
+    if (isYaakLink) {
+      const url = new URL(href);
+      url.searchParams.set("ref", appInfo.identifier);
+      finalHref = url.toString();
+    }
+    return (
+      // eslint-disable-next-line react/jsx-no-target-blank
+      <a
+        href={finalHref}
+        target="_blank"
+        rel={isYaakLink ? undefined : "noopener noreferrer"}
+        onClick={(e) => {
+          e.preventDefault();
+          void platform.openUrl(finalHref);
+        }}
+        className={className}
+        {...other}
+      >
+        <span className="pr-5">{children}</span>
+        <Icon
+          className="inline absolute right-0.5 top-[0.3em] opacity-70 group-hover:opacity-100"
+          size="xs"
+          icon="external_link"
+        />
+      </a>
+    );
+  }
+
+  return (
+    <RouterLink to={href} className={className} {...other}>
+      {children}
+    </RouterLink>
+  );
+}
+
+export function FeedbackLink() {
+  return <Link href="https://yaak.app/roadmap">Feedback</Link>;
+}
diff --git a/apps/yaak-client/components/core/PairEditor.tsx b/apps/yaak-client/components/core/PairEditor.tsx
new file mode 100644
index 0000000..58a6e74
--- /dev/null
+++ b/apps/yaak-client/components/core/PairEditor.tsx
@@ -0,0 +1,971 @@
+import type { DragEndEvent, DragMoveEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  pointerWithin,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import classNames from "classnames";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { WrappedEnvironmentVariable } from "../../hooks/useEnvironmentVariables";
+import { useRandomKey } from "../../hooks/useRandomKey";
+import { useToggle } from "../../hooks/useToggle";
+import { languageFromContentType } from "../../lib/contentType";
+import { showDialog } from "../../lib/dialog";
+import { computeSideForDragMove, DropMarker } from "@yaakapp-internal/ui";
+import { showPrompt } from "../../lib/prompt";
+import { SelectFile } from "../SelectFile";
+import { Button } from "./Button";
+import { Checkbox } from "./Checkbox";
+import type { DropdownItem } from "./Dropdown";
+import { Dropdown } from "./Dropdown";
+import type { EditorProps } from "./Editor/Editor";
+import type { GenericCompletionConfig } from "./Editor/genericCompletion";
+import { Editor } from "./Editor/LazyEditor";
+import { Icon } from "@yaakapp-internal/ui";
+import { IconButton } from "./IconButton";
+import type { InputHandle, InputProps } from "./Input";
+import { Input } from "./Input";
+import { ensurePairId } from "./PairEditor.util";
+import type { RadioDropdownItem } from "./RadioDropdown";
+import { RadioDropdown } from "./RadioDropdown";
+import { platform } from "@yaakapp-internal/platform";
+
+export interface PairEditorHandle {
+  /**
+   * Focus a row's name field once it's able to take focus. Focus can't land immediately when the
+   * row isn't mounted yet or the editor is hidden — eg. sitting in a tab that's still becoming
+   * active — so this retries for up to ~1s. A newer focus request cancels a pending one.
+   */
+  focusName(id: string): void;
+  /** Focus a row's value field. See {@link PairEditorHandle.focusName} for timing. */
+  focusValue(id: string): void;
+}
+
+/** ~1s at 60fps, plenty for a tab switch to land without spinning forever if it never does */
+const MAX_FOCUS_ATTEMPTS = 60;
+
+export type PairEditorProps = {
+  allowFileValues?: boolean;
+  allowMultilineValues?: boolean;
+  className?: string;
+  forcedEnvironmentId?: string;
+  forceUpdateKey?: string;
+  nameAutocomplete?: GenericCompletionConfig;
+  nameAutocompleteFunctions?: boolean;
+  nameAutocompleteVariables?: boolean;
+  namePlaceholder?: string;
+  nameValidate?: InputProps["validate"];
+  noScroll?: boolean;
+  onChange: (pairs: PairWithId[]) => void;
+  pairs: EditablePair[];
+  stateKey: InputProps["stateKey"];
+  setRef?: (n: PairEditorHandle) => void;
+  valueAutocomplete?: (name: string) => GenericCompletionConfig | undefined;
+  valueAutocompleteFunctions?: boolean;
+  valueAutocompleteVariables?: boolean | "environment";
+  valuePlaceholder?: string;
+  valueType?: InputProps["type"] | ((pair: Pair) => InputProps["type"]);
+  valueValidate?: InputProps["validate"];
+};
+
+export type Pair = {
+  id?: string;
+  enabled?: boolean;
+  name: string;
+  value: string;
+  contentType?: string;
+  filename?: string;
+  isFile?: boolean;
+};
+
+export type PairWithId = Pair & {
+  id: string;
+};
+
+/**
+ * A pair as handed to the editor. Adds behaviour that only the editor cares about, so the plain
+ * `Pair` stays the shape that gets written to models.
+ */
+export type EditablePair = Pair & {
+  /**
+   * When set, name edits are held until the field blurs and then committed through this, instead
+   * of calling `onChange` on every keystroke. Return false to reject the new name, which reverts
+   * the field. For names that can't be written directly, like a URL path placeholder that lives
+   * in the URL itself.
+   */
+  commitName?: (name: string) => boolean;
+};
+
+type EditablePairWithId = EditablePair & {
+  id: string;
+};
+
+/** Strip the editor-only fields, so they can never reach a model write */
+function toPairData({ commitName: _commitName, ...pair }: EditablePairWithId): PairWithId {
+  return pair;
+}
+
+/** Max number of pairs to show before prompting the user to reveal the rest */
+const MAX_INITIAL_PAIRS = 30;
+
+// Keyed on `stateKey` so no state survives a change of owner. Row ids alone can't tell owners
+// apart — two pair sets can share ids (eg. one duplicated from the other), and the same-rows
+// fast path below would swap in the new data without rebuilding the row editors, leaving any
+// still-focused input showing the old owner's text.
+export function PairEditor(props: PairEditorProps) {
+  return <PairEditorInner key={props.stateKey} {...props} />;
+}
+
+function PairEditorInner({
+  allowFileValues,
+  allowMultilineValues,
+  className,
+  forcedEnvironmentId,
+  forceUpdateKey,
+  nameAutocomplete,
+  nameAutocompleteFunctions,
+  nameAutocompleteVariables,
+  namePlaceholder,
+  nameValidate,
+  noScroll,
+  onChange,
+  pairs: originalPairs,
+  stateKey,
+  valueAutocomplete,
+  valueAutocompleteFunctions,
+  valueAutocompleteVariables,
+  valuePlaceholder,
+  valueType,
+  valueValidate,
+  setRef,
+}: PairEditorProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [isDragging, setIsDragging] = useState<EditablePairWithId | null>(null);
+  const [pairs, setPairs] = useState<EditablePairWithId[]>([]);
+  const [showAll, toggleShowAll] = useToggle(false);
+  // NOTE: Use local force update key because we trigger an effect on forceUpdateKey change. If
+  //  we simply pass forceUpdateKey to the editor, the data set by useEffect will be stale.
+  const [localForceUpdateKey, regenerateLocalForceUpdateKey] = useRandomKey();
+
+  const rowsRef = useRef<Record<string, RowHandle | null>>({});
+
+  const pendingFocusFrame = useRef<number | null>(null);
+  useEffect(
+    () => () => {
+      if (pendingFocusFrame.current != null) cancelAnimationFrame(pendingFocusFrame.current);
+    },
+    [],
+  );
+
+  const focusWhenReady = useCallback((id: string, field: "name" | "value") => {
+    if (pendingFocusFrame.current != null) cancelAnimationFrame(pendingFocusFrame.current);
+
+    let attemptsLeft = MAX_FOCUS_ATTEMPTS;
+    const attempt = () => {
+      pendingFocusFrame.current = null;
+      const row = rowsRef.current[id];
+      const landed = field === "name" ? row?.focusName() : row?.focusValue();
+      if (landed || --attemptsLeft <= 0) return;
+      pendingFocusFrame.current = requestAnimationFrame(attempt);
+    };
+    attempt();
+  }, []);
+
+  const handle = useMemo<PairEditorHandle>(
+    () => ({
+      focusName(id: string) {
+        focusWhenReady(id, "name");
+      },
+      focusValue(id: string) {
+        focusWhenReady(id, "value");
+      },
+    }),
+    [focusWhenReady],
+  );
+
+  const initPairEditorRow = useCallback(
+    (id: string, n: RowHandle | null) => {
+      const isLast = id === pairs[pairs.length - 1]?.id;
+      if (isLast) return; // Never add the last pair
+
+      rowsRef.current[id] = n;
+      const validHandles = Object.values(rowsRef.current).filter((v) => v != null);
+
+      // Use >= because more might be added if an ID of one changes (eg. editing placeholder in URL regenerates fresh pairs every keystroke)
+      const ready = validHandles.length >= pairs.length - 1;
+      if (ready) {
+        setRef?.(handle);
+      }
+    },
+    [handle, pairs, setRef],
+  );
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- Only care about forceUpdateKey
+  useEffect(() => {
+    // Remove empty headers on initial render and ensure they all have valid ids (pairs didn't use to have IDs)
+    const newPairs: EditablePairWithId[] = [];
+    for (let i = 0; i < originalPairs.length; i++) {
+      const p = originalPairs[i];
+      if (!p) continue; // Make TS happy
+      if (isPairEmpty(p)) continue;
+      newPairs.push(ensurePairId(p));
+    }
+
+    // When the reset holds the exact same rows (eg. renaming a URL path placeholder, which keeps
+    // every row id), swap the data in without rebuilding the row editors. Unfocused inputs re-seed
+    // themselves when `defaultValue` changes, and a rebuild would drop the user's focus and
+    // selection — like tabbing from a placeholder's name into its value.
+    const trailingPair = pairs[pairs.length - 1];
+    const sameRows =
+      trailingPair != null &&
+      isPairEmpty(trailingPair) &&
+      pairs.length === newPairs.length + 1 &&
+      newPairs.every((p, i) => p.id === pairs[i]?.id);
+    if (sameRows) {
+      setPairs([...newPairs, trailingPair]);
+      return;
+    }
+
+    // Add empty last pair if there is none
+    const lastPair = newPairs[newPairs.length - 1];
+    if (lastPair == null || !isPairEmpty(lastPair)) {
+      newPairs.push(emptyPair());
+    }
+
+    setPairs(newPairs);
+    regenerateLocalForceUpdateKey();
+  }, [forceUpdateKey]);
+
+  const setPairsAndSave = useCallback(
+    (fn: (pairs: EditablePairWithId[]) => EditablePairWithId[]) => {
+      setPairs((oldPairs) => {
+        const pairs = fn(oldPairs);
+        onChange(pairs.map(toPairData));
+        return pairs;
+      });
+    },
+    [onChange],
+  );
+
+  const handleChange = useCallback(
+    (pair: EditablePairWithId) =>
+      setPairsAndSave((pairs) => pairs.map((p) => (pair.id !== p.id ? p : pair))),
+    [setPairsAndSave],
+  );
+
+  const handleDelete = useCallback(
+    (pair: Pair, focusPrevious: boolean) => {
+      if (focusPrevious) {
+        const index = pairs.findIndex((p) => p.id === pair.id);
+        const id = pairs[index - 1]?.id ?? null;
+        rowsRef.current[id ?? "n/a"]?.focusName();
+      }
+      return setPairsAndSave((oldPairs) => oldPairs.filter((p) => p.id !== pair.id));
+    },
+    [setPairsAndSave, pairs],
+  );
+
+  const handleFocusName = useCallback(
+    (pair: Pair) => {
+      const isLast = pair.id === pairs[pairs.length - 1]?.id;
+      if (isLast) setPairs([...pairs, emptyPair()]);
+    },
+    [pairs],
+  );
+
+  const handleFocusValue = useCallback(
+    (pair: Pair) => {
+      const isLast = pair.id === pairs[pairs.length - 1]?.id;
+      if (isLast) setPairs([...pairs, emptyPair()]);
+    },
+    [pairs],
+  );
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+
+  // dnd-kit: show the “between rows” marker while hovering
+  const onDragMove = useCallback(
+    (e: DragMoveEvent) => {
+      const overId = e.over?.id as string | undefined;
+      if (!overId) return setHoveredIndex(null);
+
+      const overPair = pairs.find((p) => p.id === overId);
+      if (overPair == null) return setHoveredIndex(null);
+
+      const side = computeSideForDragMove(overPair.id, e);
+      const overIndex = pairs.findIndex((p) => p.id === overId);
+      const hoveredIndex = overIndex + (side === "before" ? 0 : 1);
+
+      setHoveredIndex(hoveredIndex);
+    },
+    [pairs],
+  );
+
+  const onDragStart = useCallback(
+    (e: DragStartEvent) => {
+      const pair = pairs.find((p) => p.id === e.active.id);
+      setIsDragging(pair ?? null);
+    },
+    [pairs],
+  );
+
+  const onDragCancel = useCallback(() => setIsDragging(null), []);
+
+  const onDragEnd = useCallback(
+    (e: DragEndEvent) => {
+      setIsDragging(null);
+      setHoveredIndex(null);
+      const activeId = e.active.id as string | undefined;
+      const overId = e.over?.id as string | undefined;
+      if (!activeId || !overId) return;
+
+      const from = pairs.findIndex((p) => p.id === activeId);
+      const baseTo = pairs.findIndex((p) => p.id === overId);
+      const to = hoveredIndex ?? (baseTo === -1 ? from : baseTo);
+
+      if (from !== -1 && to !== -1 && from !== to) {
+        setPairsAndSave((ps) => {
+          const next = [...ps];
+          const [moved] = next.splice(from, 1);
+          if (moved === undefined) return ps; // Make TS happy
+          next.splice(to > from ? to - 1 : to, 0, moved);
+          return next;
+        });
+      }
+    },
+    [pairs, hoveredIndex, setPairsAndSave],
+  );
+
+  return (
+    <div
+      className={classNames(
+        className,
+        "@container relative",
+        "pb-2 mb-auto h-full",
+        !noScroll && "overflow-y-auto max-h-full",
+        // Move over the width of the drag handle
+        "-mr-2 pr-2",
+        // Pad to make room for the drag divider
+        "pt-0.5",
+        "grid grid-rows-[auto_1fr]",
+      )}
+    >
+      <div>
+        <DndContext
+          autoScroll
+          sensors={sensors}
+          onDragMove={onDragMove}
+          onDragEnd={onDragEnd}
+          onDragStart={onDragStart}
+          onDragCancel={onDragCancel}
+          collisionDetection={pointerWithin}
+        >
+          {pairs.map((p, i) => {
+            if (!showAll && i > MAX_INITIAL_PAIRS) return null;
+
+            const isLast = i === pairs.length - 1;
+            return (
+              <Fragment key={p.id}>
+                {hoveredIndex === i && <DropMarker />}
+                <PairEditorRow
+                  setRef={initPairEditorRow}
+                  allowFileValues={allowFileValues}
+                  allowMultilineValues={allowMultilineValues}
+                  className="py-1"
+                  forcedEnvironmentId={forcedEnvironmentId}
+                  forceUpdateKey={localForceUpdateKey}
+                  index={i}
+                  isLast={isLast}
+                  isDraggingGlobal={!!isDragging}
+                  nameAutocomplete={nameAutocomplete}
+                  nameAutocompleteFunctions={nameAutocompleteFunctions}
+                  nameAutocompleteVariables={nameAutocompleteVariables}
+                  namePlaceholder={namePlaceholder}
+                  nameValidate={nameValidate}
+                  onChange={handleChange}
+                  onDelete={handleDelete}
+                  onFocusName={handleFocusName}
+                  onFocusValue={handleFocusValue}
+                  pair={p}
+                  stateKey={stateKey}
+                  valueAutocomplete={valueAutocomplete}
+                  valueAutocompleteFunctions={valueAutocompleteFunctions}
+                  valueAutocompleteVariables={valueAutocompleteVariables}
+                  valuePlaceholder={valuePlaceholder}
+                  valueType={valueType}
+                  valueValidate={valueValidate}
+                />
+              </Fragment>
+            );
+          })}
+          {!showAll && pairs.length > MAX_INITIAL_PAIRS && (
+            <Button onClick={toggleShowAll} variant="border" className="m-2" size="xs">
+              Show {pairs.length - MAX_INITIAL_PAIRS} More
+            </Button>
+          )}
+          <DragOverlay dropAnimation={null}>
+            {isDragging && (
+              <PairEditorRow
+                namePlaceholder={namePlaceholder}
+                valuePlaceholder={valuePlaceholder}
+                className="opacity-80"
+                pair={isDragging}
+                index={0}
+                stateKey={null}
+              />
+            )}
+          </DragOverlay>
+        </DndContext>
+      </div>
+
+      <div
+        // There's a weird bug where clicking below one of the above Codemirror inputs will cause
+        // it to focus. Putting this element here prevents that
+        aria-hidden
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      />
+    </div>
+  );
+}
+
+type PairEditorRowProps = {
+  className?: string;
+  pair: EditablePairWithId;
+  forceFocusNamePairId?: string | null;
+  forceFocusValuePairId?: string | null;
+  onChange?: (pair: EditablePairWithId) => void;
+  onDelete?: (pair: EditablePairWithId, focusPrevious: boolean) => void;
+  onFocusName?: (pair: EditablePairWithId) => void;
+  onFocusValue?: (pair: EditablePairWithId) => void;
+  onSubmit?: (pair: EditablePairWithId) => void;
+  isLast?: boolean;
+  disabled?: boolean;
+  disableDrag?: boolean;
+  index: number;
+  isDraggingGlobal?: boolean;
+  setRef?: (id: string, n: RowHandle | null) => void;
+} & Pick<
+  PairEditorProps,
+  | "allowFileValues"
+  | "allowMultilineValues"
+  | "forcedEnvironmentId"
+  | "forceUpdateKey"
+  | "nameAutocomplete"
+  | "nameAutocompleteVariables"
+  | "namePlaceholder"
+  | "nameValidate"
+  | "nameAutocompleteFunctions"
+  | "stateKey"
+  | "valueAutocomplete"
+  | "valueAutocompleteFunctions"
+  | "valueAutocompleteVariables"
+  | "valuePlaceholder"
+  | "valueType"
+  | "valueValidate"
+>;
+
+interface RowHandle {
+  focusName(): boolean;
+  focusValue(): boolean;
+}
+
+export function PairEditorRow({
+  allowFileValues,
+  allowMultilineValues,
+  className,
+  disableDrag,
+  disabled,
+  forceUpdateKey,
+  forcedEnvironmentId,
+  index,
+  isLast,
+  nameAutocomplete,
+  nameAutocompleteFunctions,
+  nameAutocompleteVariables,
+  namePlaceholder,
+  nameValidate,
+  isDraggingGlobal,
+  onChange,
+  onDelete,
+  onFocusName,
+  onFocusValue,
+  pair,
+  stateKey,
+  valueAutocomplete,
+  valueAutocompleteFunctions,
+  valueAutocompleteVariables,
+  valuePlaceholder,
+  valueType,
+  valueValidate,
+  setRef,
+}: PairEditorRowProps) {
+  const nameInputRef = useRef<InputHandle>(null);
+  const valueInputRef = useRef<InputHandle>(null);
+  const handle = useRef<RowHandle>({
+    focusName() {
+      nameInputRef.current?.focus();
+      return nameInputRef.current?.isFocused() ?? false;
+    },
+    focusValue() {
+      valueInputRef.current?.focus();
+      return valueInputRef.current?.isFocused() ?? false;
+    },
+  });
+
+  const initNameInputRef = useCallback(
+    (n: InputHandle | null) => {
+      nameInputRef.current = n;
+      if (nameInputRef.current && valueInputRef.current) {
+        setRef?.(pair.id, handle.current);
+      }
+    },
+    [pair.id, setRef],
+  );
+
+  const initValueInputRef = useCallback(
+    (n: InputHandle | null) => {
+      valueInputRef.current = n;
+      if (nameInputRef.current && valueInputRef.current) {
+        setRef?.(pair.id, handle.current);
+      }
+    },
+    [pair.id, setRef],
+  );
+
+  const handleFocusName = useCallback(() => onFocusName?.(pair), [onFocusName, pair]);
+  const handleFocusValue = useCallback(() => onFocusValue?.(pair), [onFocusValue, pair]);
+  const handleDelete = useCallback(() => onDelete?.(pair, false), [onDelete, pair]);
+
+  const handleChangeEnabled = useMemo(
+    () => (enabled: boolean) => onChange?.({ ...pair, enabled }),
+    [onChange, pair],
+  );
+
+  // The name being typed into a deferred-commit field, before it's committed or reverted
+  const pendingName = useRef<string | null>(null);
+
+  const handleChangeName = useMemo(
+    () => (name: string) => {
+      // Keep the edit local until commit. Writing on every keystroke would reset the editor from
+      // beneath the cursor, since the pairs are derived from the name being edited.
+      if (pair.commitName != null) pendingName.current = name;
+      else onChange?.({ ...pair, name });
+    },
+    [onChange, pair],
+  );
+
+  const revertName = useCallback(() => {
+    const nameInput = nameInputRef.current;
+    if (nameInput != null) {
+      const changes = { from: 0, to: nameInput.value().length, insert: pair.name };
+      nameInput.dispatch({ changes });
+    }
+    pendingName.current = null;
+  }, [pair.name]);
+
+  const handleBlurName = useCallback(() => {
+    if (pair.commitName == null) return;
+
+    const name = pendingName.current;
+    pendingName.current = null;
+    if (name == null || name === pair.name) return;
+    if (!pair.commitName(name)) revertName();
+  }, [pair, revertName]);
+
+  const handleChangeValueText = useMemo(
+    () => (value: string) => onChange?.({ ...pair, value, isFile: false }),
+    [onChange, pair],
+  );
+
+  const handleChangeValueFile = useMemo(
+    () =>
+      ({ filePath }: { filePath: string | null }) =>
+        onChange?.({ ...pair, value: filePath ?? "", isFile: true }),
+    [onChange, pair],
+  );
+
+  const handleChangeValueContentType = useMemo(
+    () => (contentType: string) => onChange?.({ ...pair, contentType }),
+    [onChange, pair],
+  );
+
+  const handleChangeValueFilename = useMemo(
+    () => (filename: string) => onChange?.({ ...pair, filename }),
+    [onChange, pair],
+  );
+
+  const handleEditMultiLineValue = useCallback(
+    () =>
+      showDialog({
+        id: "pair-edit-multiline",
+        size: "dynamic",
+        title: <>Edit {pair.name}</>,
+        render: ({ hide }) => (
+          <MultilineEditDialog
+            hide={hide}
+            onChange={handleChangeValueText}
+            defaultValue={pair.value}
+            contentType={pair.contentType ?? null}
+          />
+        ),
+      }),
+    [handleChangeValueText, pair.contentType, pair.name, pair.value],
+  );
+
+  const defaultItems = useMemo(
+    (): DropdownItem[] => [
+      {
+        label: "Edit Multi-line",
+        onSelect: handleEditMultiLineValue,
+        hidden: !allowMultilineValues,
+      },
+      {
+        label: "Delete",
+        onSelect: handleDelete,
+        color: "danger",
+      },
+    ],
+    [allowMultilineValues, handleDelete, handleEditMultiLineValue],
+  );
+
+  const { attributes, listeners, setNodeRef: setDraggableRef } = useDraggable({ id: pair.id });
+  const { setNodeRef: setDroppableRef } = useDroppable({ id: pair.id });
+
+  // Filter out the current pair name
+  const valueAutocompleteVariablesFiltered = useMemo<EditorProps["autocompleteVariables"]>(() => {
+    if (valueAutocompleteVariables === "environment") {
+      return (v: WrappedEnvironmentVariable): boolean => v.variable.name !== pair.name;
+    }
+    return valueAutocompleteVariables;
+  }, [pair.name, valueAutocompleteVariables]);
+
+  const handleSetRef = useCallback(
+    (n: HTMLDivElement | null) => {
+      setDraggableRef(n);
+      setDroppableRef(n);
+    },
+    [setDraggableRef, setDroppableRef],
+  );
+
+  // Skip the trailing placeholder row. It exists to start a new pair, so a picker there would
+  // imply it's already a real row. `Input` handles the rest, including having no options to show.
+  const showOptionsPicker = !isLast;
+
+  return (
+    <div
+      ref={handleSetRef}
+      className={classNames(
+        className,
+        "group/pair-row grid grid-cols-[auto_auto_minmax(0,1fr)_auto]",
+        "grid-rows-1 items-center",
+        !pair.enabled && "opacity-60",
+      )}
+    >
+      <Checkbox
+        hideLabel
+        title={pair.enabled ? "Disable item" : "Enable item"}
+        disabled={isLast || disabled}
+        checked={isLast ? false : !!pair.enabled}
+        className={classNames(isLast && "opacity-disabled!")}
+        onChange={handleChangeEnabled}
+      />
+      {!isLast && !disableDrag ? (
+        <div
+          {...attributes}
+          {...listeners}
+          className={classNames(
+            "py-2 h-7 w-4 flex items-center",
+            "justify-center opacity-0 group-hover/pair-row:opacity-70",
+          )}
+        >
+          <Icon size="sm" icon="grip_vertical" className="pointer-events-none" />
+        </div>
+      ) : (
+        <span className="w-4" />
+      )}
+      <div
+        className={classNames(
+          "grid items-center",
+          "@xs:gap-2 @xs:grid-rows-1! @xs:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]!",
+          "gap-0.5 grid-cols-1 grid-rows-2",
+        )}
+      >
+        <Input
+          setRef={initNameInputRef}
+          hideLabel
+          stateKey={`name.${pair.id}.${stateKey}`}
+          disabled={disabled}
+          wrapLines={false}
+          readOnly={isDraggingGlobal}
+          size="sm"
+          required={!isLast && !!pair.enabled && !!pair.value}
+          validate={nameValidate}
+          forcedEnvironmentId={forcedEnvironmentId}
+          forceUpdateKey={forceUpdateKey}
+          containerClassName={classNames("bg-surface", isLast && "border-dashed")}
+          defaultValue={pair.name}
+          label="Name"
+          name={`name[${index}]`}
+          onBlur={handleBlurName}
+          onChange={handleChangeName}
+          onFocus={handleFocusName}
+          placeholder={namePlaceholder ?? "name"}
+          autocomplete={nameAutocomplete}
+          autocompleteVariables={nameAutocompleteVariables}
+          autocompleteFunctions={nameAutocompleteFunctions}
+          showOptionsPicker={showOptionsPicker}
+        />
+        <div className="w-full grid grid-cols-[minmax(0,1fr)_auto] gap-1 items-center">
+          {pair.isFile ? (
+            <SelectFile
+              disabled={disabled}
+              inline
+              size="xs"
+              filePath={pair.value}
+              nameOverride={pair.filename || null}
+              onChange={handleChangeValueFile}
+            />
+          ) : pair.value.includes("\n") ? (
+            <Button
+              color="secondary"
+              size="sm"
+              onClick={handleEditMultiLineValue}
+              title={pair.value}
+              className="text-xs font-mono"
+            >
+              {pair.value.split("\n").join(" ")}
+            </Button>
+          ) : (
+            <Input
+              setRef={initValueInputRef}
+              hideLabel
+              stateKey={`value.${pair.id}.${stateKey}`}
+              wrapLines={false}
+              size="sm"
+              disabled={disabled}
+              readOnly={isDraggingGlobal}
+              containerClassName={classNames("bg-surface", isLast && "border-dashed")}
+              validate={valueValidate}
+              forcedEnvironmentId={forcedEnvironmentId}
+              forceUpdateKey={forceUpdateKey}
+              defaultValue={pair.value}
+              label="Value"
+              name={`value[${index}]`}
+              onChange={handleChangeValueText}
+              onFocus={handleFocusValue}
+              type={isLast ? "text" : typeof valueType === "function" ? valueType(pair) : valueType}
+              placeholder={valuePlaceholder ?? "value"}
+              autocomplete={valueAutocomplete?.(pair.name)}
+              autocompleteFunctions={valueAutocompleteFunctions}
+              autocompleteVariables={valueAutocompleteVariablesFiltered}
+              showOptionsPicker={showOptionsPicker}
+            />
+          )}
+        </div>
+      </div>
+      {allowFileValues ? (
+        <FileActionsDropdown
+          pair={pair}
+          onChangeFile={handleChangeValueFile}
+          onChangeText={handleChangeValueText}
+          onChangeContentType={handleChangeValueContentType}
+          onChangeFilename={handleChangeValueFilename}
+          onDelete={handleDelete}
+          editMultiLine={handleEditMultiLineValue}
+        />
+      ) : (
+        <Dropdown items={defaultItems}>
+          <IconButton
+            iconSize="sm"
+            size="xs"
+            // Ellipsis rather than a chevron: the name and value fields now carry chevrons for
+            // picking a suggestion, and this menu acts on the row instead of filling in a field.
+            icon={isLast || disabled ? "empty" : "ellipsis_vertical"}
+            title="More actions"
+            className="text-text-subtlest"
+          />
+        </Dropdown>
+      )}
+    </div>
+  );
+}
+
+const fileItems: RadioDropdownItem<string>[] = [
+  { label: "Text", value: "text" },
+  { label: "File", value: "file" },
+];
+
+function FileActionsDropdown({
+  pair,
+  onChangeFile,
+  onChangeText,
+  onChangeContentType,
+  onChangeFilename,
+  onDelete,
+  editMultiLine,
+}: {
+  pair: Pair;
+  onChangeFile: ({ filePath }: { filePath: string | null }) => void;
+  onChangeText: (text: string) => void;
+  onChangeContentType: (contentType: string) => void;
+  onChangeFilename: (filename: string) => void;
+  onDelete: () => void;
+  editMultiLine: () => void;
+}) {
+  const onChange = useCallback(
+    (v: string) => {
+      if (v === "file") onChangeFile({ filePath: "" });
+      else onChangeText("");
+    },
+    [onChangeFile, onChangeText],
+  );
+
+  const itemsAfter = useMemo<DropdownItem[]>(
+    () => [
+      {
+        label: "Edit Multi-Line",
+        leftSlot: <Icon icon="file_code" />,
+        hidden: pair.isFile,
+        onSelect: editMultiLine,
+      },
+      {
+        label: "Set Content-Type",
+        leftSlot: <Icon icon="pencil" />,
+        onSelect: async () => {
+          const contentType = await showPrompt({
+            id: "content-type",
+            title: "Override Content-Type",
+            label: "Content-Type",
+            required: false,
+            placeholder: "text/plain",
+            defaultValue: pair.contentType ?? "",
+            confirmText: "Set",
+            description: "Leave blank to auto-detect",
+          });
+          if (contentType == null) return;
+          onChangeContentType(contentType);
+        },
+      },
+      {
+        label: "Set File Name",
+        leftSlot: <Icon icon="file_code" />,
+        onSelect: async () => {
+          console.log("PAIR", pair);
+          const defaultFilename = await platform.files.basename(pair.value ?? "");
+          const filename = await showPrompt({
+            id: "filename",
+            title: "Override Filename",
+            label: "Filename",
+            required: false,
+            placeholder: defaultFilename ?? "myfile.png",
+            defaultValue: pair.filename,
+            confirmText: "Set",
+            description: "Leave blank to use the name of the selected file",
+          });
+          if (filename == null) return;
+          onChangeFilename(filename);
+        },
+      },
+      {
+        label: "Unset File",
+        leftSlot: <Icon icon="x" />,
+        hidden: pair.isFile,
+        onSelect: async () => {
+          onChangeFile({ filePath: null });
+        },
+      },
+      {
+        label: "Delete",
+        onSelect: onDelete,
+        variant: "danger",
+        leftSlot: <Icon icon="trash" />,
+        color: "danger",
+      },
+    ],
+    [
+      editMultiLine,
+      onChangeContentType,
+      onChangeFile,
+      onDelete,
+      pair.contentType,
+      pair.isFile,
+      onChangeFilename,
+      pair.filename,
+      pair,
+    ],
+  );
+
+  return (
+    <RadioDropdown
+      value={pair.isFile ? "file" : "text"}
+      onChange={onChange}
+      items={fileItems}
+      itemsAfter={itemsAfter}
+    >
+      <IconButton
+        iconSize="sm"
+        size="xs"
+        // Matches the plain row menu, so the actions column reads the same for file and text rows
+        icon="ellipsis_vertical"
+        title="Select form data type"
+        className="text-text-subtlest"
+      />
+    </RadioDropdown>
+  );
+}
+
+function emptyPair(): EditablePairWithId {
+  return ensurePairId({ enabled: true, name: "", value: "" });
+}
+
+function isPairEmpty(pair: Pair): boolean {
+  return !pair.name && !pair.value;
+}
+
+function MultilineEditDialog({
+  defaultValue,
+  contentType,
+  onChange,
+  hide,
+}: {
+  defaultValue: string;
+  contentType: string | null;
+  onChange: (value: string) => void;
+  hide: () => void;
+}) {
+  const [value, setValue] = useState<string>(defaultValue);
+  const language = languageFromContentType(contentType, value);
+  return (
+    <div className="w-screen max-w-160 h-[50vh] max-h-full grid grid-rows-[minmax(0,1fr)_auto]">
+      <Editor
+        heightMode="auto"
+        defaultValue={defaultValue}
+        language={language}
+        onChange={setValue}
+        stateKey={null}
+        autocompleteFunctions
+        autocompleteVariables
+      />
+      <div>
+        <Button
+          color="primary"
+          className="ml-auto my-2"
+          onClick={() => {
+            onChange(value);
+            hide();
+          }}
+        >
+          Done
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/PairEditor.util.tsx b/apps/yaak-client/components/core/PairEditor.util.tsx
new file mode 100644
index 0000000..27feb01
--- /dev/null
+++ b/apps/yaak-client/components/core/PairEditor.util.tsx
@@ -0,0 +1,10 @@
+import { generateId } from "../../lib/generateId";
+import type { Pair, PairWithId } from "./PairEditor";
+
+// NOTE: Generic so callers keep whatever they passed in (eg. an EditablePair stays editable)
+export function ensurePairId<T extends Pair>(p: T): T & PairWithId {
+  if (typeof p.id === "string") {
+    return p as T & PairWithId;
+  }
+  return { ...p, id: p.id ?? generateId() };
+}
diff --git a/apps/yaak-client/components/core/PairOrBulkEditor.tsx b/apps/yaak-client/components/core/PairOrBulkEditor.tsx
new file mode 100644
index 0000000..977c7da
--- /dev/null
+++ b/apps/yaak-client/components/core/PairOrBulkEditor.tsx
@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import { useKeyValue } from "../../hooks/useKeyValue";
+import { BulkPairEditor } from "./BulkPairEditor";
+import { IconButton } from "./IconButton";
+import type { PairEditorProps } from "./PairEditor";
+import { PairEditor } from "./PairEditor";
+
+interface Props extends PairEditorProps {
+  preferenceName: string;
+  forcedEnvironmentId?: string;
+}
+
+export function PairOrBulkEditor({ preferenceName, ...props }: Props) {
+  const { value: useBulk, set: setUseBulk } = useKeyValue<boolean>({
+    namespace: "global",
+    key: ["bulk_edit", preferenceName],
+    fallback: false,
+  });
+
+  return (
+    <div className="relative h-full w-full group/wrapper">
+      {useBulk ? <BulkPairEditor {...props} /> : <PairEditor {...props} />}
+      <div className="absolute right-0 bottom-0">
+        <IconButton
+          size="sm"
+          variant="border"
+          title={useBulk ? "Enable form edit" : "Enable bulk edit"}
+          className={classNames(
+            "transition-opacity opacity-0 group-hover:opacity-80 hover:opacity-100! shadow",
+            "bg-surface hover:text group-hover/wrapper:opacity-100",
+          )}
+          onClick={() => setUseBulk((b) => !b)}
+          icon={useBulk ? "table" : "file_code"}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/PillButton.tsx b/apps/yaak-client/components/core/PillButton.tsx
new file mode 100644
index 0000000..ba2b642
--- /dev/null
+++ b/apps/yaak-client/components/core/PillButton.tsx
@@ -0,0 +1,14 @@
+import classNames from "classnames";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
+
+export function PillButton({ className, ...props }: ButtonProps) {
+  return (
+    <Button
+      size="2xs"
+      variant="border"
+      className={classNames(className, "rounded-full! mx-1 px-3!")}
+      {...props}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/core/PlainInput.tsx b/apps/yaak-client/components/core/PlainInput.tsx
new file mode 100644
index 0000000..c38672e
--- /dev/null
+++ b/apps/yaak-client/components/core/PlainInput.tsx
@@ -0,0 +1,244 @@
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { FocusEvent, InputHTMLAttributes, ReactNode } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { useRandomKey } from "../../hooks/useRandomKey";
+import { useStateWithDeps } from "../../hooks/useStateWithDeps";
+import { generateId } from "../../lib/generateId";
+import { IconButton } from "./IconButton";
+import type { InputProps } from "./Input";
+import { Label } from "./Label";
+
+export type PlainInputProps = Omit<
+  InputProps,
+  | "wrapLines"
+  | "onKeyDown"
+  | "type"
+  | "stateKey"
+  | "autocompleteVariables"
+  | "autocompleteFunctions"
+  | "autocomplete"
+  | "extraExtensions"
+  | "forcedEnvironmentId"
+> &
+  Pick<InputHTMLAttributes<HTMLInputElement>, "inputMode" | "onKeyDownCapture" | "step"> & {
+    onFocusRaw?: InputHTMLAttributes<HTMLInputElement>["onFocus"];
+    type?: "text" | "password" | "number";
+    hideObscureToggle?: boolean;
+    labelRightSlot?: ReactNode;
+  };
+
+export const PlainInput = forwardRef<{ focus: () => void }, PlainInputProps>(function PlainInput(
+  {
+    autoFocus,
+    autoSelect,
+    className,
+    containerClassName,
+    defaultValue,
+    disabled,
+    forceUpdateKey: forceUpdateKeyFromAbove,
+    help,
+    hideLabel,
+    hideObscureToggle,
+    label,
+    labelClassName,
+    labelPosition = "top",
+    labelRightSlot,
+    inputMode,
+    leftSlot,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    onFocusRaw,
+    onKeyDownCapture,
+    onPaste,
+    placeholder,
+    required,
+    rightSlot,
+    size = "md",
+    step,
+    tint,
+    type = "text",
+    validate,
+  },
+  ref,
+) {
+  // Track a local key for updates. If the default value is changed when the input is not in focus,
+  // regenerate this to force the field to update.
+  const [focusedUpdateKey, regenerateFocusedUpdateKey] = useRandomKey();
+  const forceUpdateKey = `${forceUpdateKeyFromAbove}::${focusedUpdateKey}`;
+
+  const [obscured, setObscured] = useStateWithDeps(type === "password", [type]);
+  const [focused, setFocused] = useState(false);
+  const [hasChanged, setHasChanged] = useStateWithDeps<boolean>(false, [forceUpdateKey]);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle<{ focus: () => void } | null, { focus: () => void } | null>(
+    ref,
+    () => inputRef.current,
+  );
+
+  const handleFocus = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      onFocusRaw?.(e);
+      setFocused(true);
+      if (autoSelect) {
+        inputRef.current?.select();
+        textareaRef.current?.select();
+      }
+      onFocus?.();
+    },
+    [autoSelect, onFocus, onFocusRaw],
+  );
+
+  const handleBlur = useCallback(() => {
+    setFocused(false);
+    onBlur?.();
+  }, [onBlur]);
+
+  // Force input to update when receiving change and not in focus
+  useLayoutEffect(() => {
+    const isFocused = document.activeElement === inputRef.current;
+    if (defaultValue != null && !isFocused) {
+      regenerateFocusedUpdateKey();
+    }
+  }, [regenerateFocusedUpdateKey, defaultValue]);
+
+  const id = useRef(`input-${generateId()}`);
+  const commonClassName = classNames(
+    className,
+    "bg-transparent! min-w-0 w-full focus:outline-hidden placeholder:text-placeholder",
+    "px-2 text-xs font-mono cursor-text",
+  );
+
+  const handleChange = useCallback(
+    (value: string) => {
+      onChange?.(value);
+      setHasChanged(true);
+      const isValid = (value: string) => {
+        if (required && !validateRequire(value)) return false;
+        if (typeof validate === "boolean") return validate;
+        if (typeof validate === "function" && !validate(value)) return false;
+        return true;
+      };
+      inputRef.current?.setCustomValidity(isValid(value) ? "" : "Invalid value");
+    },
+    [onChange, required, setHasChanged, validate],
+  );
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={classNames(
+        "w-full",
+        "pointer-events-auto", // Just in case we're placing in disabled parent
+        labelPosition === "left" && "flex items-center gap-2",
+        labelPosition === "top" && "flex-row gap-0.5",
+      )}
+    >
+      <Label
+        htmlFor={id.current}
+        className={labelClassName}
+        visuallyHidden={hideLabel}
+        required={required}
+        help={help}
+        rightSlot={labelRightSlot}
+      >
+        {label}
+      </Label>
+      <HStack
+        alignItems="stretch"
+        className={classNames(
+          containerClassName,
+          "x-theme-input",
+          "relative w-full rounded-md text",
+          "border",
+          "overflow-hidden",
+          focused && !disabled ? "border-border-focus" : "border-border-subtle",
+          disabled && "border-dotted",
+          hasChanged && "has-invalid:border-danger", // For built-in HTML validation
+          size === "md" && "min-h-md",
+          size === "sm" && "min-h-sm",
+          size === "xs" && "min-h-xs",
+          size === "2xs" && "min-h-2xs",
+        )}
+      >
+        {tint != null && (
+          <div
+            aria-hidden
+            className={classNames(
+              "absolute inset-0 opacity-5 pointer-events-none",
+              tint === "info" && "bg-info",
+              tint === "warning" && "bg-warning",
+            )}
+          />
+        )}
+        {leftSlot}
+        <HStack
+          className={classNames(
+            "w-full min-w-0",
+            leftSlot ? "pl-0.5 -ml-2" : null,
+            rightSlot ? "pr-0.5 -mr-2" : null,
+          )}
+        >
+          <input
+            id={id.current}
+            ref={inputRef}
+            key={forceUpdateKey}
+            type={type === "password" && !obscured ? "text" : type}
+            name={name}
+            // oxlint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus={autoFocus}
+            defaultValue={defaultValue ?? undefined}
+            disabled={disabled}
+            autoComplete="off"
+            autoCapitalize="off"
+            autoCorrect="off"
+            writingsuggestions="false"
+            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}
+          />
+        </HStack>
+        {type === "password" && !hideObscureToggle && (
+          <IconButton
+            title={
+              obscured
+                ? `Show ${typeof label === "string" ? label : "field"}`
+                : `Obscure ${typeof label === "string" ? label : "field"}`
+            }
+            size="xs"
+            className="mr-0.5 group/obscure h-auto! my-0.5"
+            iconClassName="group-hover/obscure:text"
+            iconSize="sm"
+            icon={obscured ? "eye" : "eye_closed"}
+            onClick={() => setObscured((o) => !o)}
+          />
+        )}
+        {rightSlot}
+      </HStack>
+    </div>
+  );
+});
+
+function validateRequire(v: string) {
+  return v.length > 0;
+}
diff --git a/apps/yaak-client/components/core/Prompt.tsx b/apps/yaak-client/components/core/Prompt.tsx
new file mode 100644
index 0000000..0c0d122
--- /dev/null
+++ b/apps/yaak-client/components/core/Prompt.tsx
@@ -0,0 +1,66 @@
+import type { FormInput, JsonPrimitive } from "@yaakapp-internal/plugins";
+import { HStack } from "@yaakapp-internal/ui";
+import type { FormEvent } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { generateId } from "../../lib/generateId";
+import { DynamicForm } from "../DynamicForm";
+import { Button } from "./Button";
+
+export interface PromptProps {
+  inputs: FormInput[];
+  onCancel: () => void;
+  onResult: (value: Record<string, JsonPrimitive> | null) => void;
+  confirmText?: string;
+  cancelText?: string;
+  onValuesChange?: (values: Record<string, JsonPrimitive>) => void;
+  onInputsUpdated?: (cb: (inputs: FormInput[]) => void) => void;
+}
+
+export function Prompt({
+  onCancel,
+  inputs: initialInputs,
+  onResult,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onValuesChange,
+  onInputsUpdated,
+}: PromptProps) {
+  const [value, setValue] = useState<Record<string, JsonPrimitive>>({});
+  const [inputs, setInputs] = useState<FormInput[]>(initialInputs);
+  const handleSubmit = useCallback(
+    (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      onResult(value);
+    },
+    [onResult, value],
+  );
+
+  // Register callback for external input updates (from plugin dynamic resolution)
+  useEffect(() => {
+    onInputsUpdated?.(setInputs);
+  }, [onInputsUpdated]);
+
+  // Notify of value changes for dynamic resolution
+  useEffect(() => {
+    onValuesChange?.(value);
+  }, [value, onValuesChange]);
+
+  const id = `prompt.form.${useRef(generateId()).current}`;
+
+  return (
+    <form
+      className="grid grid-rows-[auto_auto] grid-cols-[minmax(0,1fr)] gap-4 mb-4"
+      onSubmit={handleSubmit}
+    >
+      <DynamicForm inputs={inputs} onChange={setValue} data={value} stateKey={id} />
+      <HStack space={2} justifyContent="end">
+        <Button onClick={onCancel} variant="border" color="secondary">
+          {cancelText || "Cancel"}
+        </Button>
+        <Button type="submit" color="primary">
+          {confirmText || "Done"}
+        </Button>
+      </HStack>
+    </form>
+  );
+}
diff --git a/apps/yaak-client/components/core/RadioCards.tsx b/apps/yaak-client/components/core/RadioCards.tsx
new file mode 100644
index 0000000..c787642
--- /dev/null
+++ b/apps/yaak-client/components/core/RadioCards.tsx
@@ -0,0 +1,64 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+export interface RadioCardOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  description?: ReactNode;
+}
+
+export interface RadioCardsProps<T extends string> {
+  value: T | null;
+  onChange: (value: T) => void;
+  options: RadioCardOption<T>[];
+  name: string;
+}
+
+export function RadioCards<T extends string>({
+  value,
+  onChange,
+  options,
+  name,
+}: RadioCardsProps<T>) {
+  return (
+    <div className="flex flex-col gap-2">
+      {options.map((option) => {
+        const selected = value === option.value;
+        return (
+          <label
+            key={option.value}
+            className={classNames(
+              "flex items-start gap-3 p-3 rounded-lg border cursor-pointer",
+              "transition-colors",
+              selected ? "border-border-focus" : "border-border-subtle hocus:border-text-subtlest",
+            )}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={option.value}
+              checked={selected}
+              onChange={() => onChange(option.value)}
+              className="sr-only"
+            />
+            <div
+              className={classNames(
+                "mt-1 w-4 h-4 shrink-0 rounded-full border",
+                "flex items-center justify-center",
+                selected ? "border-focus" : "border-border",
+              )}
+            >
+              {selected && <div className="w-2 h-2 rounded-full bg-text" />}
+            </div>
+            <div className="flex flex-col gap-0.5">
+              <span className="font-semibold text-text">{option.label}</span>
+              {option.description && (
+                <span className="text-sm text-text-subtle">{option.description}</span>
+              )}
+            </div>
+          </label>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/RadioDropdown.tsx b/apps/yaak-client/components/core/RadioDropdown.tsx
new file mode 100644
index 0000000..a1a642e
--- /dev/null
+++ b/apps/yaak-client/components/core/RadioDropdown.tsx
@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import type { DropdownItem, DropdownItemSeparator, DropdownProps } from "./Dropdown";
+import { Dropdown } from "./Dropdown";
+import { Icon } from "@yaakapp-internal/ui";
+
+export type RadioDropdownItem<T = string | null> =
+  | {
+      type?: "default";
+      label: ReactNode;
+      shortLabel?: ReactNode;
+      value: T;
+      rightSlot?: ReactNode;
+    }
+  | DropdownItemSeparator;
+
+export interface RadioDropdownProps<T = string | null> {
+  value: T;
+  onChange: (value: T) => void;
+  itemsBefore?: DropdownItem[];
+  items: RadioDropdownItem<T>[];
+  itemsAfter?: DropdownItem[];
+  children: DropdownProps["children"];
+}
+
+export function RadioDropdown<T = string | null>({
+  value,
+  items,
+  itemsAfter,
+  itemsBefore,
+  onChange,
+  children,
+}: RadioDropdownProps<T>) {
+  const dropdownItems = useMemo(
+    () => [
+      ...((itemsBefore
+        ? [
+            ...itemsBefore,
+            {
+              type: "separator",
+              hidden: itemsBefore[itemsBefore.length - 1]?.type === "separator",
+            },
+          ]
+        : []) as DropdownItem[]),
+      ...items.map((item) => {
+        if (item.type === "separator") {
+          return item;
+        }
+        return {
+          key: item.value,
+          label: item.label,
+          rightSlot: item.rightSlot,
+          onSelect: () => onChange(item.value),
+          leftSlot: <Icon icon={value === item.value ? "check" : "empty"} />,
+        } as DropdownItem;
+      }),
+      ...((itemsAfter
+        ? [{ type: "separator", hidden: itemsAfter[0]?.type === "separator" }, ...itemsAfter]
+        : []) as DropdownItem[]),
+    ],
+    [itemsBefore, items, itemsAfter, value, onChange],
+  );
+
+  return (
+    <Dropdown fullWidth items={dropdownItems}>
+      {children}
+    </Dropdown>
+  );
+}
diff --git a/apps/yaak-client/components/core/SegmentedControl.tsx b/apps/yaak-client/components/core/SegmentedControl.tsx
new file mode 100644
index 0000000..aa9aca8
--- /dev/null
+++ b/apps/yaak-client/components/core/SegmentedControl.tsx
@@ -0,0 +1,136 @@
+import type { IconProps } from "@yaakapp-internal/ui";
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { type ReactNode, useRef } from "react";
+import { useStateWithDeps } from "../../hooks/useStateWithDeps";
+import { generateId } from "../../lib/generateId";
+import { Button } from "./Button";
+import { IconButton, type IconButtonProps } from "./IconButton";
+import { IconTooltip } from "./IconTooltip";
+import { Label } from "./Label";
+
+interface Props<T extends string> {
+  options: { value: T; label: string; icon?: IconProps["icon"] }[];
+  onChange: (value: T) => void;
+  value: T;
+  name: string;
+  size?: IconButtonProps["size"];
+  label: string;
+  className?: string;
+  hideLabel?: boolean;
+  labelClassName?: string;
+  help?: ReactNode;
+}
+
+export function SegmentedControl<T extends string>({
+  value,
+  onChange,
+  options,
+  size = "xs",
+  label,
+  hideLabel,
+  labelClassName,
+  help,
+  className,
+}: Props<T>) {
+  const [selectedValue, setSelectedValue] = useStateWithDeps<T>(value, [value]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const id = useRef(`input-${generateId()}`);
+
+  // A visually hidden label has nowhere to show the help, so the last option carries it
+  const inlineHelp =
+    hideLabel && help ? <IconTooltip tabIndex={-1} content={help} iconSize="xs" /> : null;
+
+  return (
+    <div className="w-full grid">
+      <Label
+        htmlFor={id.current}
+        help={hideLabel ? undefined : help}
+        visuallyHidden={hideLabel}
+        className={classNames(labelClassName)}
+      >
+        {label}
+      </Label>
+      <HStack
+        id={id.current}
+        ref={containerRef}
+        role="group"
+        dir="ltr"
+        space={1}
+        className={classNames(
+          className,
+          "bg-surface-highlight rounded-lg mb-auto mr-auto",
+          "transition-opacity transform-gpu p-1",
+        )}
+        onKeyDown={(e) => {
+          const selectedIndex = options.findIndex((o) => o.value === selectedValue);
+          if (e.key === "ArrowRight") {
+            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();
+          } 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();
+          }
+        }}
+      >
+        {options.map((o, i) => {
+          const isSelected = selectedValue === o.value;
+          const isActive = value === o.value;
+          const rightSlot = i === options.length - 1 ? inlineHelp : null;
+          if (o.icon == null) {
+            return (
+              <Button
+                key={o.label}
+                aria-checked={isActive}
+                size={size}
+                variant="solid"
+                color={isActive ? "secondary" : undefined}
+                role="radio"
+                tabIndex={isSelected ? 0 : -1}
+                className={classNames(
+                  isActive && "text-text!",
+                  "focus:ring-1 focus:ring-border-focus",
+                )}
+                rightSlot={rightSlot}
+                onClick={() => onChange(o.value)}
+              >
+                {o.label}
+              </Button>
+            );
+          } else {
+            return (
+              <IconButton
+                key={o.label}
+                aria-checked={isActive}
+                size={size}
+                variant="solid"
+                color={isActive ? "secondary" : undefined}
+                role="radio"
+                tabIndex={isSelected ? 0 : -1}
+                className={classNames(
+                  isActive && "text-text!",
+                  "px-1.5! w-auto!",
+                  "focus:ring-border-focus",
+                )}
+                title={o.label}
+                icon={o.icon}
+                rightSlot={rightSlot}
+                onClick={() => onChange(o.value)}
+              />
+            );
+          }
+        })}
+      </HStack>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/Select.tsx b/apps/yaak-client/components/core/Select.tsx
new file mode 100644
index 0000000..083a309
--- /dev/null
+++ b/apps/yaak-client/components/core/Select.tsx
@@ -0,0 +1,149 @@
+import { platform } from "@yaakapp-internal/platform";
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { CSSProperties, ReactNode } from "react";
+import { useState } from "react";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
+import { Label } from "./Label";
+import type { RadioDropdownItem } from "./RadioDropdown";
+import { RadioDropdown } from "./RadioDropdown";
+
+export interface SelectProps<T extends string> {
+  name: string;
+  label: string;
+  labelPosition?: "top" | "left";
+  labelClassName?: string;
+  hideLabel?: boolean;
+  value: T;
+  help?: ReactNode;
+  leftSlot?: ReactNode;
+  options: RadioDropdownItem<T>[];
+  onChange: (value: T) => void;
+  defaultValue?: T;
+  size?: ButtonProps["size"];
+  className?: string;
+  disabled?: boolean;
+  filterable?: boolean;
+}
+
+export function Select<T extends string>({
+  labelPosition = "top",
+  name,
+  help,
+  labelClassName,
+  disabled,
+  hideLabel,
+  label,
+  value,
+  options,
+  leftSlot,
+  onChange,
+  className,
+  defaultValue,
+  filterable,
+  size = "md",
+}: SelectProps<T>) {
+  const [focused, setFocused] = useState<boolean>(false);
+  const id = `input-${name}`;
+  const isInvalidSelection = options.find((o) => "value" in o && o.value === value) == null;
+
+  const handleChange = (value: T) => {
+    onChange?.(value);
+  };
+
+  return (
+    <div
+      className={classNames(
+        className,
+        "x-theme-input",
+        "w-full",
+        "pointer-events-auto", // Just in case we're placing in disabled parent
+        labelPosition === "left" && "grid grid-cols-[auto_1fr] items-center gap-2",
+        labelPosition === "top" && "flex-row gap-0.5",
+      )}
+    >
+      <Label htmlFor={id} visuallyHidden={hideLabel} className={labelClassName} help={help}>
+        {label}
+      </Label>
+      {platform.osType() === "macos" && !filterable ? (
+        <HStack
+          space={2}
+          className={classNames(
+            "w-full rounded-md text text-sm font-mono",
+            "pl-2",
+            "border",
+            focused && !disabled ? "border-border-focus" : "border-border",
+            disabled && "border-dotted",
+            isInvalidSelection && "border-danger",
+            size === "xs" && "h-xs",
+            size === "sm" && "h-sm",
+            size === "md" && "h-md",
+          )}
+        >
+          {leftSlot && <div>{leftSlot}</div>}
+          <select
+            value={value}
+            style={selectBackgroundStyles}
+            onChange={(e) => handleChange(e.target.value as T)}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            disabled={disabled}
+            className={classNames(
+              "pr-7 w-full outline-hidden bg-transparent disabled:opacity-disabled",
+              "leading-none rounded-none", // Center the text better vertically
+            )}
+          >
+            {isInvalidSelection && <option value={"__NONE__"}>-- Select an Option --</option>}
+            {options.map((o) => {
+              if (o.type === "separator") return null;
+              return (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                  {o.value === defaultValue && " (default)"}
+                </option>
+              );
+            })}
+          </select>
+        </HStack>
+      ) : (
+        // Use custom "select" component until Tauri can be configured to have select menus not always appear in
+        // light mode
+        <RadioDropdown
+          value={value}
+          onChange={handleChange}
+          items={options.map((o) =>
+            o.type === "separator" || o.value !== defaultValue
+              ? o
+              : { ...o, label: <>{o.label} (default)</> },
+          )}
+        >
+          <Button
+            className={classNames(
+              "w-full text-sm font-mono",
+              disabled && "border-dotted",
+              isInvalidSelection && "border-danger",
+            )}
+            justify="start"
+            variant="input"
+            size={size}
+            leftSlot={leftSlot}
+            disabled={disabled}
+            forDropdown
+          >
+            {options.find((o) => o.type !== "separator" && o.value === value)?.label ?? "--"}
+          </Button>
+        </RadioDropdown>
+      )}
+    </div>
+  );
+}
+
+const selectBackgroundStyles: CSSProperties = {
+  backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
+  backgroundPosition: "right 0.3rem center",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: "1.5em 1.5em",
+  appearance: "none",
+  printColorAdjust: "exact",
+};
diff --git a/apps/yaak-client/components/core/Separator.tsx b/apps/yaak-client/components/core/Separator.tsx
new file mode 100644
index 0000000..40ae596
--- /dev/null
+++ b/apps/yaak-client/components/core/Separator.tsx
@@ -0,0 +1,77 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import type { IconProps } from "@yaakapp-internal/ui";
+import { IconButton } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+/**
+ * A single control attached to a labelled separator, rendered between the label
+ * and the rule.
+ *
+ * Declared rather than passed as a node so the separator keeps ownership of the
+ * things that are easy to get wrong by hand: matching the label's colour, and
+ * staying out of the rule's way when the label is long.
+ */
+export interface SeparatorAction {
+  icon: IconProps["icon"];
+  /** Tooltip and accessible name. Required — the control is icon-only. */
+  title: string;
+  onClick: () => void;
+}
+
+interface Props {
+  orientation?: "horizontal" | "vertical";
+  dashed?: boolean;
+  className?: string;
+  children?: ReactNode;
+  color?: Color;
+  action?: SeparatorAction;
+}
+
+export function Separator({
+  color,
+  className,
+  dashed,
+  orientation = "horizontal",
+  children,
+  action,
+}: Props) {
+  return (
+    <div role="presentation" className={classNames(className, "flex items-center w-full")}>
+      {children && (
+        <div className="text-sm text-text-subtlest mr-2 whitespace-nowrap">{children}</div>
+      )}
+      {action && (
+        <IconButton
+          size="2xs"
+          iconSize="xs"
+          className="shrink-0 mr-2 -ml-1"
+          // Forced, because the button itself sets `text-text` at full strength.
+          iconClassName="text-text-subtlest!"
+          icon={action.icon}
+          title={action.title}
+          onClick={action.onClick}
+        />
+      )}
+      <div
+        className={classNames(
+          "opacity-60",
+          // Keep a stub of the line visible no matter how long the label is —
+          // `w-full` alone gets squeezed to nothing by a wide label.
+          orientation === "horizontal" && "min-w-8",
+          color == null && "border-border",
+          color === "primary" && "border-primary",
+          color === "secondary" && "border-secondary",
+          color === "success" && "border-success",
+          color === "notice" && "border-notice",
+          color === "warning" && "border-warning",
+          color === "danger" && "border-danger",
+          color === "info" && "border-info",
+          dashed && "border-dashed",
+          orientation === "horizontal" && "w-full h-0 border-t",
+          orientation === "vertical" && "h-full w-0 border-l",
+        )}
+      />
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/core/SettingRow.tsx b/apps/yaak-client/components/core/SettingRow.tsx
new file mode 100644
index 0000000..bc463e6
--- /dev/null
+++ b/apps/yaak-client/components/core/SettingRow.tsx
@@ -0,0 +1,514 @@
+import type { AnyModel } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import type { ReactNode } from "react";
+import { CopyIconButton } from "../CopyIconButton";
+import { Checkbox } from "./Checkbox";
+import { IconButton, type IconButtonProps } from "./IconButton";
+import { PlainInput } from "./PlainInput";
+import type { RadioDropdownItem } from "./RadioDropdown";
+import { Select } from "./Select";
+import { SelectFile } from "../SelectFile";
+
+type ModelKeyOfValue<T, V> = {
+  [K in keyof T]-?: T[K] extends V ? K : never;
+}[keyof T];
+
+type SettingRowBaseProps = {
+  className?: string;
+  controlClassName?: string;
+  description?: ReactNode;
+  disabled?: boolean;
+  title: ReactNode;
+};
+
+export function SettingsList({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={classNames("w-full", className)}>{children}</div>;
+}
+
+export function SettingsSection({
+  children,
+  className,
+  description,
+  title,
+}: {
+  children: ReactNode;
+  className?: string;
+  description?: ReactNode;
+  title: ReactNode | null;
+}) {
+  const showHeader = title != null || description != null;
+
+  return (
+    <section className={classNames(className, "w-full")}>
+      {showHeader && (
+        <div className="border-b border-border-subtle pb-2">
+          {title != null && <div className="text-text-subtle">{title}</div>}
+          {description != null && <p className="mt-1 text-sm text-text-subtlest">{description}</p>}
+        </div>
+      )}
+      <div className="[&>*:last-child]:border-b-0">{children}</div>
+    </section>
+  );
+}
+
+export function SettingRow({
+  children,
+  className,
+  controlClassName,
+  description,
+  disabled,
+  title,
+}: {
+  children: ReactNode;
+} & SettingRowBaseProps) {
+  return (
+    <div
+      aria-disabled={disabled || undefined}
+      className={classNames(
+        className,
+        "@container border-b border-border-subtle py-4",
+        disabled && "opacity-disabled",
+      )}
+    >
+      <div
+        className={classNames(
+          "grid grid-cols-1 gap-2",
+          "@[30rem]:grid-cols-[minmax(0,1fr)_auto] items-center",
+        )}
+      >
+        <div className="min-w-0">
+          <div className="text text-text">{title}</div>
+          {description != null && (
+            <div className="mt-1 max-w-2xl text-sm text-text-subtle">{description}</div>
+          )}
+        </div>
+        <div
+          className={classNames(
+            "flex min-w-0 items-center justify-start @[40rem]:justify-end",
+            controlClassName,
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SettingValue({
+  actions,
+  className,
+  copyText,
+  enableCopy = true,
+  value,
+}: {
+  actions?: SettingValueAction[];
+  className?: string;
+  copyText?: string;
+  enableCopy?: boolean;
+  value: ReactNode;
+}) {
+  const textValue = typeof value === "string" || typeof value === "number" ? `${value}` : null;
+  const textToCopy = copyText ?? textValue;
+
+  return (
+    <>
+      <span
+        className={classNames(
+          className,
+          "cursor-text select-text truncate font-mono text-editor text-text-subtle pr-1.5",
+        )}
+      >
+        {value}
+      </span>
+      {actions?.map((action) => (
+        <IconButton
+          key={action.title}
+          icon={action.icon}
+          title={action.title}
+          size="2xs"
+          iconSize="sm"
+          onClick={action.onClick}
+        />
+      ))}
+      {enableCopy && textToCopy != null && (
+        <CopyIconButton size="2xs" text={textToCopy} title="Copy value" />
+      )}
+    </>
+  );
+}
+
+type SettingValueAction = {
+  icon: IconButtonProps["icon"];
+  onClick: () => void;
+  title: string;
+};
+
+export function SettingRowBoolean({
+  checked,
+  checkboxSize = "md",
+  onChange,
+  title,
+  ...props
+}: {
+  checked: boolean;
+  checkboxSize?: "sm" | "md";
+  onChange: (checked: boolean) => void;
+} & SettingRowBaseProps) {
+  return (
+    <SettingRow title={title} {...props}>
+      <Checkbox
+        hideLabel
+        size={checkboxSize}
+        checked={checked}
+        disabled={props.disabled}
+        title={title}
+        onChange={onChange}
+      />
+    </SettingRow>
+  );
+}
+
+export function ModelSettingRowBoolean<M extends AnyModel, K extends ModelKeyOfValue<M, boolean>>({
+  model,
+  modelKey,
+  ...props
+}: {
+  model: M;
+  modelKey: K;
+} & Omit<Parameters<typeof SettingRowBoolean>[0], "checked" | "onChange">) {
+  return (
+    <SettingRowBoolean
+      checked={model[modelKey] as boolean}
+      onChange={(value) => patchModel(model, { [modelKey]: value } as Partial<M>)}
+      {...props}
+    />
+  );
+}
+
+export function SettingRowNumber({
+  inputClassName,
+  inputWidthClassName = "w-48!",
+  name,
+  onChange,
+  placeholder,
+  required,
+  title,
+  type = "number",
+  validate,
+  value,
+  ...props
+}: {
+  inputClassName?: string;
+  inputWidthClassName?: string;
+  name: string;
+  onChange: (value: number) => void;
+  placeholder?: string;
+  required?: boolean;
+  type?: "number";
+  validate?: (value: string) => boolean;
+  value: number;
+} & SettingRowBaseProps) {
+  return (
+    <SettingRow title={title} {...props}>
+      <PlainInput
+        required={required}
+        hideLabel
+        size="sm"
+        name={name}
+        label={typeof title === "string" ? title : name}
+        placeholder={placeholder}
+        defaultValue={`${value}`}
+        validate={validate}
+        onChange={(value) => onChange(Number.parseInt(value, 10) || 0)}
+        type={type}
+        className={inputClassName}
+        containerClassName={inputWidthClassName}
+        disabled={props.disabled}
+      />
+    </SettingRow>
+  );
+}
+
+export function ModelSettingRowNumber<M extends AnyModel, K extends ModelKeyOfValue<M, number>>({
+  model,
+  modelKey,
+  ...props
+}: {
+  model: M;
+  modelKey: K;
+} & Omit<Parameters<typeof SettingRowNumber>[0], "name" | "onChange" | "value">) {
+  return (
+    <SettingRowNumber
+      name={String(modelKey)}
+      value={model[modelKey] as number}
+      onChange={(value) => patchModel(model, { [modelKey]: value } as Partial<M>)}
+      {...props}
+    />
+  );
+}
+
+export function SettingRowText({
+  inputClassName,
+  inputWidthClassName = "w-80!",
+  name,
+  onChange,
+  placeholder,
+  required,
+  title,
+  type = "text",
+  value,
+  ...props
+}: {
+  inputClassName?: string;
+  inputWidthClassName?: string;
+  name: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  required?: boolean;
+  type?: "text" | "password";
+  value: string;
+} & SettingRowBaseProps) {
+  return (
+    <SettingRow title={title} {...props}>
+      <PlainInput
+        required={required}
+        hideLabel
+        size="sm"
+        name={name}
+        label={typeof title === "string" ? title : name}
+        placeholder={placeholder}
+        defaultValue={value}
+        onChange={onChange}
+        type={type}
+        className={inputClassName}
+        containerClassName={inputWidthClassName}
+        disabled={props.disabled}
+      />
+    </SettingRow>
+  );
+}
+
+export function ModelSettingRowText<M extends AnyModel, K extends ModelKeyOfValue<M, string>>({
+  model,
+  modelKey,
+  ...props
+}: {
+  model: M;
+  modelKey: K;
+} & Omit<Parameters<typeof SettingRowText>[0], "name" | "onChange" | "value">) {
+  return (
+    <SettingRowText
+      name={String(modelKey)}
+      value={model[modelKey] as string}
+      onChange={(value) => patchModel(model, { [modelKey]: value } as Partial<M>)}
+      {...props}
+    />
+  );
+}
+
+export function SettingRowFile({
+  buttonClassName,
+  controlClassName = "min-w-0 max-w-[min(32rem,45vw)]",
+  directory,
+  filePath,
+  nameOverride,
+  noun,
+  onChange,
+  size = "xs",
+  title,
+  ...props
+}: {
+  buttonClassName?: string;
+  directory?: boolean;
+  filePath: string | null;
+  nameOverride?: string | null;
+  noun?: string;
+  onChange: (filePath: string | null) => void | Promise<void>;
+  size?: Parameters<typeof SelectFile>[0]["size"];
+} & SettingRowBaseProps) {
+  return (
+    <SettingRow title={title} controlClassName={controlClassName} {...props}>
+      <SelectFile
+        directory={directory}
+        inline
+        hideLabel
+        label={typeof title === "string" ? title : noun}
+        size={size}
+        noun={noun}
+        nameOverride={nameOverride}
+        filePath={filePath}
+        className={buttonClassName}
+        onChange={({ filePath }) => onChange(filePath)}
+      />
+    </SettingRow>
+  );
+}
+
+export function SettingRowDirectory({
+  noun = "Directory",
+  ...props
+}: Omit<Parameters<typeof SettingRowFile>[0], "directory">) {
+  return <SettingRowFile directory noun={noun} {...props} />;
+}
+
+export function SettingRowSelect<T extends string>({
+  defaultValue,
+  name,
+  onChange,
+  options,
+  selectClassName = "w-48!",
+  title,
+  value,
+  ...props
+}: {
+  defaultValue?: T;
+  name: string;
+  onChange: (value: T) => void;
+  options: RadioDropdownItem<T>[];
+  selectClassName?: string;
+  value: T;
+} & SettingRowBaseProps) {
+  return (
+    <SettingRow title={title} {...props}>
+      <SettingSelectControl
+        name={name}
+        label={typeof title === "string" ? title : name}
+        value={value}
+        defaultValue={defaultValue}
+        selectClassName={selectClassName}
+        disabled={props.disabled}
+        onChange={onChange}
+        options={options}
+      />
+    </SettingRow>
+  );
+}
+
+export function SettingSelectControl<T extends string>({
+  defaultValue,
+  disabled,
+  label,
+  name,
+  onChange,
+  options,
+  selectClassName = "w-48!",
+  value,
+}: {
+  defaultValue?: T;
+  disabled?: boolean;
+  label: string;
+  name: string;
+  onChange: (value: T) => void;
+  options: RadioDropdownItem<T>[];
+  selectClassName?: string;
+  value: T;
+}) {
+  return (
+    <Select
+      hideLabel
+      name={name}
+      value={value}
+      defaultValue={defaultValue}
+      label={label}
+      size="sm"
+      className={selectClassName}
+      disabled={disabled}
+      onChange={onChange}
+      options={options}
+    />
+  );
+}
+
+export function ModelSettingSelectControl<
+  M extends AnyModel,
+  K extends ModelKeyOfValue<M, string>,
+  V extends M[K] & string,
+>({
+  model,
+  modelKey,
+  ...props
+}: {
+  model: M;
+  modelKey: K;
+} & Omit<Parameters<typeof SettingSelectControl<V>>[0], "name" | "onChange" | "value">) {
+  return (
+    <SettingSelectControl
+      name={String(modelKey)}
+      value={model[modelKey] as V}
+      onChange={(value) => patchModel(model, { [modelKey]: value } as Partial<M>)}
+      {...props}
+    />
+  );
+}
+
+export function ModelSettingRowSelect<
+  M extends AnyModel,
+  K extends ModelKeyOfValue<M, string>,
+  V extends M[K] & string,
+>({
+  model,
+  modelKey,
+  ...props
+}: {
+  model: M;
+  modelKey: K;
+} & Omit<Parameters<typeof SettingRowSelect<V>>[0], "name" | "onChange" | "value">) {
+  return (
+    <SettingRowSelect
+      name={String(modelKey)}
+      value={model[modelKey] as V}
+      onChange={(value) => patchModel(model, { [modelKey]: value } as Partial<M>)}
+      {...props}
+    />
+  );
+}
+
+export function SettingOverrideRow({
+  children,
+  className,
+  controlClassName,
+  description,
+  disabled,
+  onResetOverride,
+  overridden,
+  resetTitle = "Reset override",
+  title,
+}: {
+  children: ReactNode;
+  className?: string;
+  controlClassName?: string;
+  description?: ReactNode;
+  disabled?: boolean;
+  onResetOverride: () => void;
+  overridden: boolean;
+  resetTitle?: string;
+  title: ReactNode;
+}) {
+  return (
+    <SettingRow
+      className={className}
+      controlClassName={controlClassName}
+      description={description}
+      disabled={disabled}
+      title={
+        <span className="inline-flex items-center gap-1.5">
+          {title}
+          {overridden && (
+            <IconButton
+              icon="undo_2"
+              size="2xs"
+              iconSize="sm"
+              title={resetTitle}
+              className="text-text-subtle"
+              onClick={onResetOverride}
+            />
+          )}
+        </span>
+      }
+    >
+      {children}
+    </SettingRow>
+  );
+}
diff --git a/apps/yaak-client/components/core/SizeTag.tsx b/apps/yaak-client/components/core/SizeTag.tsx
new file mode 100644
index 0000000..031f082
--- /dev/null
+++ b/apps/yaak-client/components/core/SizeTag.tsx
@@ -0,0 +1,22 @@
+import { formatSize } from "@yaakapp-internal/lib/formatSize";
+import classNames from "classnames";
+
+interface Props {
+  className?: string;
+  contentLength: number;
+  contentLengthCompressed?: number | null;
+}
+
+export function SizeTag({ className, contentLength, contentLengthCompressed }: Props) {
+  return (
+    <span
+      className={classNames("font-mono", className)}
+      title={
+        `${contentLength} bytes` +
+        (contentLengthCompressed ? `\n${contentLengthCompressed} bytes compressed` : "")
+      }
+    >
+      {formatSize(contentLength)}
+    </span>
+  );
+}
diff --git a/apps/yaak-client/components/core/Tabs/Tabs.tsx b/apps/yaak-client/components/core/Tabs/Tabs.tsx
new file mode 100644
index 0000000..2ff69ec
--- /dev/null
+++ b/apps/yaak-client/components/core/Tabs/Tabs.tsx
@@ -0,0 +1,585 @@
+import type { DragEndEvent, DragMoveEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import classNames from "classnames";
+import type { ReactNode, Ref } from "react";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useKeyValue } from "../../../hooks/useKeyValue";
+import { computeSideForDragMove, DropMarker } from "@yaakapp-internal/ui";
+import { fireAndForget } from "../../../lib/fireAndForget";
+import { ErrorBoundary } from "../../ErrorBoundary";
+import type { ButtonProps } from "../Button";
+import { Button } from "../Button";
+import { Icon } from "@yaakapp-internal/ui";
+import type { RadioDropdownProps } from "../RadioDropdown";
+import { RadioDropdown } from "../RadioDropdown";
+
+export type TabItem =
+  | {
+      value: string;
+      label: string;
+      hidden?: boolean;
+      leftSlot?: ReactNode;
+      rightSlot?: ReactNode;
+    }
+  | {
+      value: string;
+      options: Omit<RadioDropdownProps, "children">;
+      leftSlot?: ReactNode;
+      rightSlot?: ReactNode;
+    };
+
+interface TabsStorage {
+  order: string[];
+  activeTabs: Record<string, string>;
+}
+
+export interface TabsRef {
+  /** Programmatically set the active tab */
+  setActiveTab: (value: string) => void;
+}
+
+interface Props {
+  label: string;
+  /** Default tab value. If not provided, defaults to first tab. */
+  defaultValue?: string;
+  /** Called when active tab changes */
+  onChangeValue?: (value: string) => void;
+  tabs: TabItem[];
+  tabListClassName?: string;
+  className?: string;
+  children: ReactNode;
+  addBorders?: boolean;
+  layout?: "horizontal" | "vertical";
+  /** Storage key for persisting tab order and active tab. When provided, enables drag-to-reorder and active tab persistence. */
+  storageKey?: string | string[];
+  /** Key to identify which context this tab belongs to (e.g., request ID). Used for per-context active tab persistence. */
+  activeTabKey?: string;
+}
+
+export const Tabs = forwardRef<TabsRef, Props>(function Tabs(
+  {
+    defaultValue,
+    onChangeValue: onChangeValueProp,
+    label,
+    children,
+    tabs: originalTabs,
+    className,
+    tabListClassName,
+    addBorders,
+    layout = "vertical",
+    storageKey,
+    activeTabKey,
+  }: Props,
+  forwardedRef: Ref<TabsRef>,
+) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const reorderable = !!storageKey;
+
+  // Use key-value storage for persistence if storageKey is provided
+  // Handle migration from old format (string[]) to new format (TabsStorage)
+  const { value: rawStorage, set: setStorage } = useKeyValue<TabsStorage | string[]>({
+    namespace: "no_sync",
+    key: storageKey ?? ["tabs", "default"],
+    fallback: { order: [], activeTabs: {} },
+  });
+
+  // Migrate old format (string[]) to new format (TabsStorage)
+  const storage: TabsStorage = Array.isArray(rawStorage)
+    ? { order: rawStorage, activeTabs: {} }
+    : (rawStorage ?? { order: [], activeTabs: {} });
+
+  const savedOrder = storage.order;
+
+  // Get the active tab value - prefer storage (if activeTabKey), then defaultValue, then first tab
+  const storedActiveTab = activeTabKey ? storage?.activeTabs?.[activeTabKey] : undefined;
+  const [internalValue, setInternalValue] = useState<string | undefined>(undefined);
+  const value = storedActiveTab ?? internalValue ?? defaultValue ?? originalTabs[0]?.value;
+
+  // Helper to normalize storage (handle migration from old format)
+  const normalizeStorage = useCallback(
+    (s: TabsStorage | string[]): TabsStorage =>
+      Array.isArray(s) ? { order: s, activeTabs: {} } : s,
+    [],
+  );
+
+  // Handle tab change - update internal state, storage if we have a key, and call prop callback
+  const onChangeValue = useCallback(
+    async (newValue: string) => {
+      setInternalValue(newValue);
+      if (storageKey && activeTabKey) {
+        await setStorage((s) => {
+          const normalized = normalizeStorage(s);
+          return {
+            ...normalized,
+            activeTabs: { ...normalized.activeTabs, [activeTabKey]: newValue },
+          };
+        });
+      }
+      onChangeValueProp?.(newValue);
+    },
+    [storageKey, activeTabKey, setStorage, onChangeValueProp, normalizeStorage],
+  );
+
+  // Expose imperative methods via ref
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      setActiveTab: (value: string) => {
+        fireAndForget(onChangeValue(value));
+      },
+    }),
+    [onChangeValue],
+  );
+
+  // Helper to save order
+  const setSavedOrder = useCallback(
+    async (order: string[]) => {
+      await setStorage((s) => {
+        const normalized = normalizeStorage(s);
+        return { ...normalized, order };
+      });
+    },
+    [setStorage, normalizeStorage],
+  );
+
+  // State for ordered tabs
+  const [orderedTabs, setOrderedTabs] = useState<TabItem[]>(originalTabs);
+  const [isDragging, setIsDragging] = useState<TabItem | null>(null);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  // Reorder tabs based on saved order when tabs or savedOrder changes
+  useEffect(() => {
+    if (!storageKey || savedOrder == null || savedOrder.length === 0) {
+      setOrderedTabs(originalTabs);
+      return;
+    }
+
+    // Create a map of tab values to tab items
+    const tabMap = new Map(originalTabs.map((tab) => [tab.value, tab]));
+
+    // Reorder based on saved order, adding any new tabs at the end
+    const reordered: TabItem[] = [];
+    const seenValues = new Set<string>();
+
+    // Add tabs in saved order
+    for (const value of savedOrder) {
+      const tab = tabMap.get(value);
+      if (tab) {
+        reordered.push(tab);
+        seenValues.add(value);
+      }
+    }
+
+    // Add any new tabs that weren't in the saved order
+    for (const tab of originalTabs) {
+      if (!seenValues.has(tab.value)) {
+        reordered.push(tab);
+      }
+    }
+
+    setOrderedTabs(reordered);
+  }, [originalTabs, savedOrder, storageKey]);
+
+  const tabs = storageKey ? orderedTabs : originalTabs;
+
+  // Update tabs when value changes
+  useEffect(() => {
+    const tabs = ref.current?.querySelectorAll<HTMLDivElement>("[data-tab]");
+    for (const tab of tabs ?? []) {
+      const v = tab.getAttribute("data-tab");
+      const parent = tab.closest(".tabs-container");
+      if (parent !== ref.current) {
+        // Tab is part of a nested tab container, so ignore it
+      } else if (v === value) {
+        tab.setAttribute("data-state", "active");
+        tab.setAttribute("aria-hidden", "false");
+        tab.style.display = "block";
+      } else {
+        tab.setAttribute("data-state", "inactive");
+        tab.setAttribute("aria-hidden", "true");
+        tab.style.display = "none";
+      }
+    }
+  }, [value]);
+
+  // Drag and drop handlers
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+
+  const onDragStart = useCallback(
+    (e: DragStartEvent) => {
+      const tab = tabs.find((t) => t.value === e.active.id);
+      setIsDragging(tab ?? null);
+    },
+    [tabs],
+  );
+
+  const onDragMove = useCallback(
+    (e: DragMoveEvent) => {
+      const overId = e.over?.id as string | undefined;
+      if (!overId) return setHoveredIndex(null);
+
+      const overTab = tabs.find((t) => t.value === overId);
+      if (overTab == null) return setHoveredIndex(null);
+
+      // For vertical layout, tabs are arranged horizontally (side-by-side)
+      const orientation = layout === "vertical" ? "horizontal" : "vertical";
+      const side = computeSideForDragMove(overTab.value, e, orientation);
+
+      // If computeSideForDragMove returns null (shouldn't happen but be safe), default to null
+      if (side === null) return setHoveredIndex(null);
+
+      const overIndex = tabs.findIndex((t) => t.value === overId);
+      const hoveredIndex = overIndex + (side === "before" ? 0 : 1);
+
+      setHoveredIndex(hoveredIndex);
+    },
+    [tabs, layout],
+  );
+
+  const onDragCancel = useCallback(() => {
+    setIsDragging(null);
+    setHoveredIndex(null);
+  }, []);
+
+  const onDragEnd = useCallback(
+    (e: DragEndEvent) => {
+      setIsDragging(null);
+      setHoveredIndex(null);
+
+      const activeId = e.active.id as string | undefined;
+      const overId = e.over?.id as string | undefined;
+      if (!activeId || !overId || activeId === overId) return;
+
+      const from = tabs.findIndex((t) => t.value === activeId);
+      const baseTo = tabs.findIndex((t) => t.value === overId);
+      const to = hoveredIndex ?? (baseTo === -1 ? from : baseTo);
+
+      if (from !== -1 && to !== -1 && from !== to) {
+        const newTabs = [...tabs];
+        const [moved] = newTabs.splice(from, 1);
+        if (moved === undefined) return;
+        newTabs.splice(to > from ? to - 1 : to, 0, moved);
+
+        setOrderedTabs(newTabs);
+
+        // Save order to storage
+        setSavedOrder(newTabs.map((t) => t.value)).catch(console.error);
+      }
+    },
+    [tabs, hoveredIndex, setSavedOrder],
+  );
+
+  const tabButtons = useMemo(() => {
+    const items: ReactNode[] = [];
+    tabs.forEach((t, i) => {
+      if ("hidden" in t && t.hidden) {
+        return;
+      }
+
+      const isActive = t.value === value;
+      const showDropMarkerBefore = hoveredIndex === i;
+
+      if (showDropMarkerBefore) {
+        items.push(
+          <div
+            key={`marker-${t.value}`}
+            className={classNames("relative", layout === "vertical" ? "w-0" : "h-0")}
+          >
+            <DropMarker orientation={layout === "vertical" ? "vertical" : "horizontal"} />
+          </div>,
+        );
+      }
+
+      items.push(
+        <TabButton
+          key={t.value}
+          tab={t}
+          isActive={isActive}
+          addBorders={addBorders}
+          layout={layout}
+          reorderable={reorderable}
+          isDragging={isDragging?.value === t.value}
+          onChangeValue={onChangeValue}
+        />,
+      );
+    });
+    return items;
+  }, [tabs, value, addBorders, layout, reorderable, isDragging, onChangeValue, hoveredIndex]);
+
+  const tabList = (
+    <div
+      role="tablist"
+      aria-label={label}
+      className={classNames(
+        tabListClassName,
+        addBorders && layout === "horizontal" && "pl-3 -ml-1",
+        addBorders && layout === "vertical" && "ml-0 mb-2",
+        "flex items-center hide-scrollbars",
+        layout === "horizontal" && "h-full overflow-auto p-2",
+        layout === "vertical" && "overflow-x-auto overflow-y-visible ",
+        // Give space for button focus states within overflow boundary.
+        !addBorders && layout === "vertical" && "py-1 pl-3 -ml-5 pr-1",
+      )}
+    >
+      <div
+        className={classNames(
+          layout === "horizontal" && "flex flex-col w-full pb-3 mb-auto",
+          layout === "vertical" && "flex flex-row shrink-0 w-full",
+        )}
+      >
+        {tabButtons}
+        {hoveredIndex === tabs.length && (
+          <div className={classNames("relative", layout === "vertical" ? "w-0" : "h-0")}>
+            <DropMarker orientation={layout === "vertical" ? "vertical" : "horizontal"} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        className,
+        "tabs-container",
+        "h-full grid",
+        layout === "horizontal" && "grid-rows-1 grid-cols-[auto_minmax(0,1fr)]",
+        layout === "vertical" && "grid-rows-[auto_minmax(0,1fr)] grid-cols-1",
+      )}
+    >
+      {reorderable ? (
+        <DndContext
+          autoScroll
+          sensors={sensors}
+          onDragMove={onDragMove}
+          onDragEnd={onDragEnd}
+          onDragStart={onDragStart}
+          onDragCancel={onDragCancel}
+          collisionDetection={closestCenter}
+        >
+          {tabList}
+          <DragOverlay dropAnimation={null}>
+            {isDragging && (
+              <TabButton
+                tab={isDragging}
+                isActive={isDragging.value === value}
+                addBorders={addBorders}
+                layout={layout}
+                reorderable={false}
+                isDragging={false}
+                onChangeValue={onChangeValue}
+                overlay
+              />
+            )}
+          </DragOverlay>
+        </DndContext>
+      ) : (
+        tabList
+      )}
+      {children}
+    </div>
+  );
+});
+
+interface TabButtonProps {
+  tab: TabItem;
+  isActive: boolean;
+  addBorders?: boolean;
+  layout: "horizontal" | "vertical";
+  reorderable: boolean;
+  isDragging: boolean;
+  onChangeValue?: (value: string) => void;
+  overlay?: boolean;
+}
+
+function TabButton({
+  tab,
+  isActive,
+  addBorders,
+  layout,
+  reorderable,
+  isDragging,
+  onChangeValue,
+  overlay = false,
+}: TabButtonProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDraggableRef,
+  } = useDraggable({
+    id: tab.value,
+    disabled: !reorderable,
+    // The button inside handles focus
+    attributes: { tabIndex: -1 },
+  });
+  const { setNodeRef: setDroppableRef } = useDroppable({
+    id: tab.value,
+    disabled: !reorderable,
+  });
+
+  const handleSetWrapperRef = useCallback(
+    (n: HTMLDivElement | null) => {
+      if (reorderable) {
+        setDraggableRef(n);
+        setDroppableRef(n);
+      }
+    },
+    [reorderable, setDraggableRef, setDroppableRef],
+  );
+
+  const btnProps: Partial<ButtonProps> = {
+    color: "custom",
+    justify: layout === "horizontal" ? "start" : "center",
+    onClick: isActive
+      ? undefined
+      : (e: React.MouseEvent) => {
+          e.preventDefault(); // Prevent dropdown from opening on first click
+          onChangeValue?.(tab.value);
+        },
+    className: classNames(
+      "flex items-center rounded-sm whitespace-nowrap",
+      "px-2! ml-px",
+      "outline-hidden",
+      "ring-none",
+      "focus-visible-or-class:outline-2",
+      addBorders && "border focus-visible:bg-surface-highlight",
+      isActive ? "text-text" : "text-text-subtle",
+      isActive && addBorders
+        ? "border-surface-active bg-surface-active"
+        : layout === "vertical"
+          ? "border-border-subtle"
+          : "border-transparent",
+      layout === "horizontal" && "min-w-40",
+      isDragging && "opacity-50",
+      overlay && "opacity-80",
+    ),
+  };
+
+  const buttonContent = (() => {
+    if ("options" in tab) {
+      const option = tab.options.items.find((i) => "value" in i && i.value === tab.options.value);
+      return (
+        <RadioDropdown
+          key={tab.value}
+          items={tab.options.items}
+          itemsAfter={tab.options.itemsAfter}
+          itemsBefore={tab.options.itemsBefore}
+          value={tab.options.value}
+          onChange={tab.options.onChange}
+        >
+          <Button
+            leftSlot={tab.leftSlot}
+            rightSlot={
+              <div className="flex items-center">
+                {tab.rightSlot}
+                <Icon
+                  size="sm"
+                  icon="chevron_down"
+                  className={classNames(
+                    "ml-1",
+                    isActive ? "text-text-subtle" : "text-text-subtlest",
+                  )}
+                />
+              </div>
+            }
+            {...btnProps}
+          >
+            {option && "shortLabel" in option && option.shortLabel
+              ? option.shortLabel
+              : (option?.label ?? "Unknown")}
+          </Button>
+        </RadioDropdown>
+      );
+    }
+    return (
+      <Button leftSlot={tab.leftSlot} rightSlot={tab.rightSlot} {...btnProps}>
+        {"label" in tab && tab.label ? tab.label : tab.value}
+      </Button>
+    );
+  })();
+
+  // Apply drag handlers to wrapper, not button
+  const wrapperProps = reorderable && !overlay ? { ...attributes, ...listeners } : {};
+
+  return (
+    <div
+      ref={handleSetWrapperRef}
+      className={classNames("relative", layout === "vertical" && "mr-2")}
+      {...wrapperProps}
+    >
+      {buttonContent}
+    </div>
+  );
+}
+
+interface TabContentProps {
+  value: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export const TabContent = memo(function TabContent({
+  value,
+  children,
+  className,
+}: TabContentProps) {
+  return (
+    <ErrorBoundary name={`Tab ${value}`}>
+      <div
+        tabIndex={-1}
+        data-tab={value}
+        className={classNames(className, "tab-content", "hidden w-full h-full pt-2")}
+      >
+        {children}
+      </div>
+    </ErrorBoundary>
+  );
+});
+
+/**
+ * Programmatically set the active tab for a Tabs component that uses storageKey + activeTabKey.
+ * This is useful when you need to change the tab from outside the component (e.g., in response to an event).
+ */
+export async function setActiveTab({
+  storageKey,
+  activeTabKey,
+  value,
+}: {
+  storageKey: string;
+  activeTabKey: string;
+  value: string;
+}): Promise<void> {
+  const { getKeyValue, setKeyValue } = await import("../../../lib/keyValueStore");
+  const current = getKeyValue<TabsStorage>({
+    namespace: "no_sync",
+    key: storageKey,
+    fallback: { order: [], activeTabs: {} },
+  });
+  await setKeyValue({
+    namespace: "no_sync",
+    key: storageKey,
+    value: {
+      ...current,
+      activeTabs: { ...current.activeTabs, [activeTabKey]: value },
+    },
+  });
+}
diff --git a/apps/yaak-client/components/core/Toast.tsx b/apps/yaak-client/components/core/Toast.tsx
new file mode 100644
index 0000000..b851a99
--- /dev/null
+++ b/apps/yaak-client/components/core/Toast.tsx
@@ -0,0 +1,148 @@
+import type { ShowToastRequest } from "@yaakapp-internal/plugins";
+import { Icon, type IconProps, VStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import * as m from "motion/react-m";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useKey } from "react-use";
+import { IconButton } from "./IconButton";
+
+export interface ToastProps {
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+  className?: string;
+  timeout: number | null;
+  action?: (args: { hide: () => void }) => ReactNode;
+  icon?: ShowToastRequest["icon"] | null;
+  color?: ShowToastRequest["color"];
+  // Grow with the content (up to the viewport) instead of scrolling internally
+  // past the default max height
+  dynamicHeight?: boolean;
+  // Hide the close button, for toasts that render their own dismiss action.
+  // Escape still closes the toast
+  hideDismiss?: boolean;
+}
+
+const ICONS: Record<NonNullable<ToastProps["color"] | "custom">, IconProps["icon"] | null> = {
+  custom: null,
+  danger: "alert_triangle",
+  info: "info",
+  notice: "alert_triangle",
+  primary: "info",
+  secondary: "info",
+  success: "check_circle",
+  warning: "alert_triangle",
+};
+
+export function Toast({
+  children,
+  open,
+  onClose,
+  timeout,
+  action,
+  icon,
+  color,
+  dynamicHeight,
+  hideDismiss,
+}: ToastProps) {
+  const onCloseRef = useRef(onClose);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [autoHideCanceled, setAutoHideCanceled] = useState(false);
+
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  const cancelAutoHide = useCallback(() => {
+    if (timeoutRef.current == null) return;
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
+    setAutoHideCanceled(true);
+  }, []);
+
+  useEffect(() => {
+    if (!open || timeout == null || autoHideCanceled) return;
+
+    timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = null;
+      onCloseRef.current();
+    }, timeout);
+
+    return () => {
+      if (timeoutRef.current == null) return;
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    };
+  }, [autoHideCanceled, open, timeout]);
+
+  useKey(
+    "Escape",
+    () => {
+      if (!open) return;
+      onClose();
+    },
+    {},
+    [open],
+  );
+
+  const toastIcon = icon === null ? null : (icon ?? (color && color in ICONS && ICONS[color]));
+
+  return (
+    <m.div
+      initial={{ opacity: 0, right: "-10%" }}
+      animate={{ opacity: 100, right: 0 }}
+      exit={{ opacity: 0, right: "-100%" }}
+      transition={{ duration: 0.2 }}
+      className={classNames("bg-surface m-2 rounded-lg")}
+    >
+      <div
+        className={classNames(
+          `x-theme-toast x-theme-toast--${color}`,
+          "pointer-events-auto overflow-hidden",
+          "relative pointer-events-auto bg-surface text-text rounded-lg",
+          "border border-border shadow-lg w-100",
+        )}
+        onFocusCapture={cancelAutoHide}
+        onKeyDownCapture={cancelAutoHide}
+        onPointerDownCapture={cancelAutoHide}
+      >
+        <div
+          className={classNames(
+            "pl-3 py-3 flex items-start gap-2 w-full overflow-auto",
+            hideDismiss ? "pr-3" : "pr-10",
+            dynamicHeight ? "max-h-[80vh]" : "max-h-44",
+          )}
+        >
+          {toastIcon && <Icon icon={toastIcon} color={color} className="mt-1 shrink-0" />}
+          <VStack space={2} className="w-full min-w-0">
+            <div className="select-auto">{children}</div>
+            {action?.({ hide: onClose })}
+          </VStack>
+        </div>
+
+        {!hideDismiss && (
+          <IconButton
+            color={color}
+            variant="border"
+            className="opacity-60 border-0 absolute! top-2 right-2"
+            title="Dismiss"
+            icon="x"
+            onClick={onClose}
+          />
+        )}
+
+        {timeout != null && !autoHideCanceled && (
+          <div className="w-full absolute bottom-0 left-0 right-0">
+            <m.div
+              className="bg-surface-highlight h-[3px]"
+              initial={{ width: "100%" }}
+              animate={{ width: "0%", opacity: 0.2 }}
+              transition={{ duration: timeout / 1000, ease: "linear" }}
+            />
+          </div>
+        )}
+      </div>
+    </m.div>
+  );
+}
diff --git a/apps/yaak-client/components/core/Tooltip.tsx b/apps/yaak-client/components/core/Tooltip.tsx
new file mode 100644
index 0000000..e2274b2
--- /dev/null
+++ b/apps/yaak-client/components/core/Tooltip.tsx
@@ -0,0 +1,165 @@
+import classNames from "classnames";
+import type { CSSProperties, KeyboardEvent, ReactNode } from "react";
+import { useRef, useState } from "react";
+import { generateId } from "../../lib/generateId";
+import { Portal } from "@yaakapp-internal/ui";
+
+export interface TooltipProps {
+  children: ReactNode;
+  content: ReactNode;
+  tabIndex?: number;
+  size?: "md" | "lg";
+  className?: string;
+}
+
+const hiddenStyles: CSSProperties = {
+  left: -99999,
+  top: -99999,
+  visibility: "hidden",
+  pointerEvents: "none",
+  opacity: 0,
+};
+
+type TooltipPosition = "top" | "bottom";
+
+interface TooltipOpenState {
+  styles: CSSProperties;
+  position: TooltipPosition;
+}
+
+export function Tooltip({ children, className, content, tabIndex, size = "md" }: TooltipProps) {
+  const [openState, setOpenState] = useState<TooltipOpenState | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const showTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const handleOpenImmediate = () => {
+    if (triggerRef.current == null || tooltipRef.current == null) return;
+    clearTimeout(showTimeout.current);
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const viewportHeight = document.documentElement.clientHeight;
+
+    const margin = 8;
+    const spaceAbove = Math.max(0, triggerRect.top - margin);
+    const spaceBelow = Math.max(0, viewportHeight - triggerRect.bottom - margin);
+    const preferBottom = spaceAbove < tooltipRect.height + margin && spaceBelow > spaceAbove;
+    const position: TooltipPosition = preferBottom ? "bottom" : "top";
+
+    const styles: CSSProperties = {
+      left: Math.max(0, triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2),
+      maxHeight: position === "top" ? spaceAbove : spaceBelow,
+      ...(position === "top"
+        ? { bottom: viewportHeight - triggerRect.top }
+        : { top: triggerRect.bottom }),
+    };
+
+    setOpenState({ styles, position });
+  };
+
+  const handleOpen = () => {
+    clearTimeout(showTimeout.current);
+    showTimeout.current = setTimeout(handleOpenImmediate, 500);
+  };
+
+  const handleClose = () => {
+    clearTimeout(showTimeout.current);
+    setOpenState(null);
+  };
+
+  const handleToggleImmediate = () => {
+    if (openState) handleClose();
+    else handleOpenImmediate();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (openState && e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClose();
+    }
+  };
+
+  const id = useRef(`tooltip-${generateId()}`);
+
+  return (
+    <>
+      <Portal name="tooltip">
+        <div
+          ref={tooltipRef}
+          style={openState?.styles ?? hiddenStyles}
+          id={id.current}
+          role="tooltip"
+          aria-hidden={openState == null}
+          onMouseEnter={handleOpenImmediate}
+          onMouseLeave={handleClose}
+          className="p-2 fixed z-50 text-sm transition-opacity grid grid-rows-[minmax(0,1fr)]"
+        >
+          <div
+            className={classNames(
+              "bg-surface-highlight rounded-md px-3 py-2 z-50 border border-border overflow-auto",
+              size === "md" && "max-w-sm",
+              size === "lg" && "max-w-md",
+            )}
+          >
+            {content}
+          </div>
+          <Triangle
+            className="text-border"
+            position={openState?.position === "bottom" ? "top" : "bottom"}
+          />
+        </div>
+      </Portal>
+      {/* oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- Needs to be usable in other buttons */}
+      <span
+        ref={triggerRef}
+        role="button"
+        aria-describedby={openState ? id.current : undefined}
+        tabIndex={tabIndex ?? -1}
+        className={classNames(className, "grow-0 flex items-center")}
+        onClick={handleToggleImmediate}
+        onMouseEnter={handleOpen}
+        onMouseLeave={handleClose}
+        onFocus={handleOpenImmediate}
+        onBlur={handleClose}
+        onKeyDown={handleKeyDown}
+      >
+        {children}
+      </span>
+    </>
+  );
+}
+
+function Triangle({ className, position }: { className?: string; position: "top" | "bottom" }) {
+  const isBottom = position === "bottom";
+
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 30 10"
+      preserveAspectRatio="none"
+      shapeRendering="crispEdges"
+      className={classNames(
+        className,
+        "absolute z-50 left-[calc(50%-0.4rem)] h-2 w-[0.8rem]",
+        isBottom
+          ? "border-t-2 border-surface-highlight -bottom-[calc(0.5rem-3px)] mb-2"
+          : "border-b-2 border-surface-highlight -top-[calc(0.5rem-3px)] mt-2",
+      )}
+    >
+      <title>Triangle</title>
+      <polygon
+        className="fill-surface-highlight"
+        points={isBottom ? "0,0 30,0 15,10" : "0,10 30,10 15,0"}
+      />
+      <path
+        d={isBottom ? "M0 0 L15 9 L30 0" : "M0 10 L15 1 L30 10"}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinejoin="miter"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+}
diff --git a/apps/yaak-client/components/core/WebsocketStatusTag.tsx b/apps/yaak-client/components/core/WebsocketStatusTag.tsx
new file mode 100644
index 0000000..2ad3278
--- /dev/null
+++ b/apps/yaak-client/components/core/WebsocketStatusTag.tsx
@@ -0,0 +1,31 @@
+import type { WebsocketConnection } from "@yaakapp-internal/models";
+import classNames from "classnames";
+
+interface Props {
+  connection: WebsocketConnection;
+  className?: string;
+}
+
+export function WebsocketStatusTag({ connection, className }: Props) {
+  const { state, error } = connection;
+
+  let label: string;
+  let colorClass = "text-text-subtle";
+
+  if (error) {
+    label = "ERROR";
+    colorClass = "text-danger";
+  } else if (state === "connected") {
+    label = "CONNECTED";
+    colorClass = "text-success";
+  } else if (state === "closing") {
+    label = "CLOSING";
+  } else if (state === "closed") {
+    label = "CLOSED";
+    colorClass = "text-warning";
+  } else {
+    label = "CONNECTING";
+  }
+
+  return <span className={classNames(className, "font-mono", colorClass)}>{label}</span>;
+}
diff --git a/apps/yaak-client/components/git/BranchSelectionDialog.tsx b/apps/yaak-client/components/git/BranchSelectionDialog.tsx
new file mode 100644
index 0000000..0a3be09
--- /dev/null
+++ b/apps/yaak-client/components/git/BranchSelectionDialog.tsx
@@ -0,0 +1,43 @@
+import { HStack, VStack } from "@yaakapp-internal/ui";
+import { useState } from "react";
+import { Button } from "../core/Button";
+import { Select } from "../core/Select";
+
+interface Props {
+  branches: string[];
+  onCancel: () => void;
+  onSelect: (branch: string) => void;
+  selectText: string;
+}
+
+export function BranchSelectionDialog({ branches, onCancel, onSelect, selectText }: Props) {
+  const [branch, setBranch] = useState<string>("__NONE__");
+  return (
+    <VStack
+      className="mb-4"
+      as="form"
+      space={4}
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSelect(branch);
+      }}
+    >
+      <Select
+        name="branch"
+        hideLabel
+        label="Branch"
+        value={branch}
+        options={branches.map((b) => ({ label: b, value: b }))}
+        onChange={setBranch}
+      />
+      <HStack space={2} justifyContent="end">
+        <Button onClick={onCancel} variant="border" color="secondary">
+          Cancel
+        </Button>
+        <Button type="submit" color="primary">
+          {selectText}
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}
diff --git a/apps/yaak-client/components/git/FileHistoryDialog.tsx b/apps/yaak-client/components/git/FileHistoryDialog.tsx
new file mode 100644
index 0000000..6bc7e6e
--- /dev/null
+++ b/apps/yaak-client/components/git/FileHistoryDialog.tsx
@@ -0,0 +1,131 @@
+import { useGitFileDiffForCommit, useGitLog, useGitMutations } from "@yaakapp-internal/git";
+import type { GitCommit } from "@yaakapp-internal/git";
+import { SplitLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { formatDistanceToNowStrict } from "date-fns";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { sync } from "../../init/sync";
+import { showConfirm } from "../../lib/confirm";
+import { EmptyStateText } from "../EmptyStateText";
+import { Button } from "../core/Button";
+import { DiffViewer } from "../core/Editor/DiffViewer";
+import { useGitCallbacks } from "./callbacks";
+
+export function FileHistoryDialog({ dir, relaPath }: { dir: string; relaPath: string }) {
+  const callbacks = useGitCallbacks(dir);
+  const { restoreFileFromCommit } = useGitMutations(dir, callbacks);
+  const log = useGitLog(dir, undefined, relaPath);
+  const commits = log.data ?? [];
+  const [selectedOid, setSelectedOid] = useState<string | null>(null);
+  const selectedCommit = useMemo(
+    () => commits.find((commit) => commit.oid === selectedOid) ?? null,
+    [commits, selectedOid],
+  );
+  const diff = useGitFileDiffForCommit(dir, relaPath, selectedCommit?.oid);
+
+  useEffect(() => {
+    if (commits.length === 0) {
+      setSelectedOid(null);
+    } else if (selectedOid == null || !commits.some((commit) => commit.oid === selectedOid)) {
+      setSelectedOid(commits[0]?.oid ?? null);
+    }
+  }, [commits, selectedOid]);
+
+  const handleRestoreCommit = useCallback(
+    async (commit: GitCommit) => {
+      const confirmed = await showConfirm({
+        id: "git-restore-file-history-entry",
+        title: "Restore File",
+        description: "This will restore the file to the selected commit.",
+        confirmText: "Restore",
+        color: "warning",
+      });
+      if (!confirmed) return;
+
+      await restoreFileFromCommit.mutateAsync({ commitOid: commit.oid, relaPath });
+      await sync({ force: true });
+    },
+    [relaPath, restoreFileFromCommit],
+  );
+
+  if (commits.length === 0 && !log.isLoading) {
+    return <EmptyStateText>No history for this file</EmptyStateText>;
+  }
+
+  return (
+    <div className="h-full px-2 pb-4">
+      <SplitLayout
+        storageKey="git-file-history-horizontal"
+        layout="horizontal"
+        defaultRatio={0.6}
+        firstSlot={({ style }) => (
+          <div style={style} className="h-full overflow-y-auto px-4 pb-2 transform-cpu">
+            <div className="flex flex-col pt-1.5">
+              {commits.map((commit) => (
+                <CommitListItem
+                  key={commit.oid}
+                  commit={commit}
+                  selected={commit.oid === selectedCommit?.oid}
+                  onSelect={() => setSelectedOid(commit.oid)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+        secondSlot={({ style }) => (
+          <div style={style} className="h-full min-w-0 border-l border-l-border-subtle px-4">
+            {selectedCommit == null ? (
+              <EmptyStateText>Select a commit to view diff</EmptyStateText>
+            ) : (
+              <div className="h-full flex flex-col">
+                <div className="mb-2 min-w-0 text-text-subtle grid items-center gap-2 grid-cols-[minmax(0,1fr)_auto]">
+                  <div className="min-w-0 truncate">{selectedCommit.message || "No message"}</div>
+                  <Button
+                    className="ml-auto"
+                    color="warning"
+                    size="2xs"
+                    variant="border"
+                    onClick={() => handleRestoreCommit(selectedCommit)}
+                  >
+                    Restore File
+                  </Button>
+                </div>
+                <DiffViewer
+                  original={diff.data?.original ?? ""}
+                  modified={diff.data?.modified ?? ""}
+                  className="flex-1 min-h-0"
+                />
+              </div>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+function CommitListItem({
+  commit,
+  selected,
+  onSelect,
+}: {
+  commit: GitCommit;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={classNames(
+        "w-full min-w-0 text-left rounded-sm px-2 py-1.5",
+        selected && "bg-surface-active",
+      )}
+      onClick={onSelect}
+    >
+      <div className="truncate flex-1">{commit.message || "No message"}</div>
+      <div className="text-text-subtle text-sm truncate">
+        {commit.author.name || "Unknown"} - {formatDistanceToNowStrict(commit.when)} ago - <span className="shrink-0 text-2xs text-text-subtle font-mono">{commit.oid.slice(0, 7)}</span>
+      </div>
+    </button>
+  );
+}
diff --git a/apps/yaak-client/components/git/GitCommitDialog.tsx b/apps/yaak-client/components/git/GitCommitDialog.tsx
new file mode 100644
index 0000000..08aa163
--- /dev/null
+++ b/apps/yaak-client/components/git/GitCommitDialog.tsx
@@ -0,0 +1,481 @@
+import type { GitStatusEntry } from "@yaakapp-internal/git";
+import { useGit } from "@yaakapp-internal/git";
+import type {
+  Environment,
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from "@yaakapp-internal/models";
+import { Banner, HStack, Icon, InlineCode, SplitLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import { modelToYaml } from "../../lib/diffYaml";
+import { trackFeatureUsage } from "../../lib/featureFeedback";
+import { resolvedModelName } from "../../lib/resolvedModelName";
+import { showConfirm } from "../../lib/confirm";
+import { showErrorToast } from "../../lib/toast";
+import { sync } from "../../init/sync";
+import { CommercialUseBanner } from "../CommercialUseBanner";
+import { Button } from "../core/Button";
+import type { CheckboxProps } from "../core/Checkbox";
+import { Checkbox } from "../core/Checkbox";
+import type { CheckboxTreeNode } from "../core/CheckboxTree";
+import { CheckboxTree } from "../core/CheckboxTree";
+import { DiffViewer } from "../core/Editor/DiffViewer";
+import { Input } from "../core/Input";
+import { Separator } from "../core/Separator";
+import { EmptyStateText } from "../EmptyStateText";
+import { useGitCallbacks } from "./callbacks";
+import { handlePushResult } from "./git-util";
+
+interface Props {
+  syncDir: string;
+  onDone: () => void;
+  workspace: Workspace;
+}
+
+interface CommitTreeNode {
+  model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Environment | Workspace;
+  status: GitStatusEntry;
+  children: CommitTreeNode[];
+  ancestors: CommitTreeNode[];
+}
+
+export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
+  const callbacks = useGitCallbacks(syncDir);
+  const [{ status }, { commit, commitAndPush, add, unstage, restore }] = useGit(syncDir, callbacks);
+  const [isPushing, setIsPushing] = useState(false);
+  const [commitError, setCommitError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string>("");
+  const [selectedEntry, setSelectedEntry] = useState<GitStatusEntry | null>(null);
+
+  const handleCreateCommit = async () => {
+    setCommitError(null);
+    try {
+      await commit.mutateAsync({ message });
+      trackFeatureUsage("git-sync");
+      onDone();
+    } catch (err) {
+      setCommitError(String(err));
+    }
+  };
+
+  const handleCreateCommitAndPush = async () => {
+    setIsPushing(true);
+    try {
+      const r = await commitAndPush.mutateAsync({ message });
+      handlePushResult(r);
+      trackFeatureUsage("git-sync");
+      onDone();
+    } catch (err) {
+      showErrorToast({
+        id: "git-commit-and-push-error",
+        title: "Error committing and pushing",
+        message: String(err),
+      });
+    } finally {
+      setIsPushing(false);
+    }
+  };
+
+  const { internalEntries, externalEntries, allEntries } = useMemo(() => {
+    const allEntries = [];
+    const yaakEntries = [];
+    const externalEntries = [];
+
+    for (const entry of status.data?.entries ?? []) {
+      allEntries.push(entry);
+      if (entry.next == null && entry.prev == null) {
+        externalEntries.push(entry);
+      } else {
+        yaakEntries.push(entry);
+      }
+    }
+    return { internalEntries: yaakEntries, externalEntries, allEntries };
+  }, [status.data?.entries]);
+
+  const hasAddedAnything = allEntries.find((e) => e.staged) != null;
+  const hasAnythingToAdd = allEntries.find((e) => e.status !== "current") != null;
+
+  const tree: CommitTreeNode | null = useMemo(() => {
+    const next = (
+      model: CommitTreeNode["model"],
+      ancestors: CommitTreeNode[],
+    ): CommitTreeNode | null => {
+      const statusEntry = internalEntries?.find((s) => s.relaPath.includes(model.id));
+      if (statusEntry == null) {
+        return null;
+      }
+
+      const node: CommitTreeNode = {
+        model,
+        status: statusEntry,
+        children: [],
+        ancestors,
+      };
+
+      for (const entry of internalEntries) {
+        const childModel = entry.next ?? entry.prev;
+
+        // Should never happen because we're iterating internalEntries
+        if (childModel == null) continue;
+
+        // TODO: Figure out why not all of these show up
+        if ("folderId" in childModel && childModel.folderId != null) {
+          if (childModel.folderId === model.id) {
+            const c = next(childModel, [...ancestors, node]);
+            if (c != null) node.children.push(c);
+          }
+        } else if ("workspaceId" in childModel && childModel.workspaceId === model.id) {
+          const c = next(childModel, [...ancestors, node]);
+          if (c != null) node.children.push(c);
+        } else {
+          // Do nothing
+        }
+      }
+
+      return node;
+    };
+
+    return next(workspace, []);
+  }, [workspace, internalEntries]);
+
+  const treeNode: CheckboxTreeNode<CommitTreeNode> | null = useMemo(() => {
+    const toTreeNode = (n: CommitTreeNode): CheckboxTreeNode<CommitTreeNode> => ({
+      key: n.status.relaPath + n.status.status + n.status.staged,
+      data: n,
+      children: n.children.map(toTreeNode),
+    });
+    return tree == null ? null : toTreeNode(tree);
+  }, [tree]);
+
+  const checkNode = useCallback(
+    (treeNode: CommitTreeNode) => {
+      const checked = nodeCheckedStatus(treeNode);
+      const newChecked = checked === "indeterminate" ? true : !checked;
+      setCheckedAndChildren(treeNode, newChecked, unstage.mutate, add.mutate);
+      // TODO: Also ensure parents are added properly
+    },
+    [add.mutate, unstage.mutate],
+  );
+
+  const checkEntry = useCallback(
+    (entry: GitStatusEntry) => {
+      if (entry.staged) unstage.mutate({ relaPaths: [entry.relaPath] });
+      else add.mutate({ relaPaths: [entry.relaPath] });
+    },
+    [add.mutate, unstage.mutate],
+  );
+
+  const handleSelectChild = useCallback(
+    (entry: GitStatusEntry) => {
+      if (entry === selectedEntry) {
+        setSelectedEntry(null);
+      } else {
+        setSelectedEntry(entry);
+      }
+    },
+    [selectedEntry],
+  );
+
+  const handleDiscardChanges = useCallback(
+    async (entry: GitStatusEntry) => {
+      const confirmed = await showConfirm({
+        id: "git-restore-commit-entry",
+        title: "Discard Changes",
+        description: "Do you really want to discard uncommitted changes for the selected item?",
+        confirmText: "Discard",
+        color: "danger",
+      });
+      if (!confirmed) return;
+
+      await restore.mutateAsync({ relaPaths: [entry.relaPath] });
+      await sync({ force: true });
+      setSelectedEntry(null);
+    },
+    [restore],
+  );
+
+  if (tree == null || treeNode == null) {
+    return null;
+  }
+
+  if (!hasAnythingToAdd) {
+    return (
+      <div className="h-full px-6 pb-4">
+        <EmptyStateText>No changes since last commit</EmptyStateText>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full px-2 pb-4">
+      <SplitLayout
+        storageKey="commit-horizontal"
+        layout="horizontal"
+        defaultRatio={0.6}
+        firstSlot={({ style }) => (
+          <div style={style} className="h-full px-4 flex flex-col gap-3">
+            <CommercialUseBanner source="git-commit" title="Using Git for work?" />
+            <SplitLayout
+              className="min-h-0 flex-1"
+              storageKey="commit-vertical"
+              layout="vertical"
+              defaultRatio={0.35}
+              firstSlot={({ style: innerStyle }) => (
+                <div
+                  style={innerStyle}
+                  className="h-full overflow-y-auto pb-3 pr-0.5 transform-cpu"
+                >
+                  <CheckboxTree
+                    node={treeNode}
+                    checked={(n) => nodeCheckedStatus(n.data)}
+                    onCheck={(n) => checkNode(n.data)}
+                    checkboxTitle={(n) =>
+                      nodeCheckedStatus(n.data) ? "Unstage change" : "Stage change"
+                    }
+                    isRelevant={(n) => n.data.status.status !== "current"}
+                    canSelectRow={(n) => n.data.status.status !== "current"}
+                    onSelectRow={(n) => handleSelectChild(n.data.status)}
+                    isRowSelected={(n) => selectedEntry?.relaPath === n.data.status.relaPath}
+                    renderRow={(n) => <CommitTreeRow node={n.data} />}
+                  />
+                  {externalEntries.find((e) => e.status !== "current") && (
+                    <>
+                      <Separator className="mt-3 mb-1">Other files</Separator>
+                      {externalEntries.map((entry) => (
+                        <ExternalTreeNode
+                          key={entry.relaPath + entry.status}
+                          entry={entry}
+                          relaDir={status.data?.relaDir ?? ""}
+                          onCheck={checkEntry}
+                        />
+                      ))}
+                    </>
+                  )}
+                </div>
+              )}
+              secondSlot={({ style: innerStyle }) => (
+                <div style={innerStyle} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2">
+                  <Input
+                    className="text-base! font-sans rounded-md"
+                    placeholder="Commit message..."
+                    onChange={setMessage}
+                    stateKey={null}
+                    label="Commit message"
+                    fullHeight
+                    multiLine
+                    hideLabel
+                  />
+                  {commitError && <Banner color="danger">{commitError}</Banner>}
+                  <HStack alignItems="center" space={2}>
+                    <InlineCode>{status.data?.headRefShorthand}</InlineCode>
+                    <HStack space={2} className="ml-auto">
+                      <Button
+                        color="secondary"
+                        size="sm"
+                        onClick={handleCreateCommit}
+                        disabled={!hasAddedAnything || message.trim().length === 0}
+                        isLoading={isPushing}
+                      >
+                        Commit
+                      </Button>
+                      <Button
+                        color="primary"
+                        size="sm"
+                        disabled={!hasAddedAnything || message.trim().length === 0}
+                        onClick={handleCreateCommitAndPush}
+                        isLoading={isPushing}
+                      >
+                        Commit and Push
+                      </Button>
+                    </HStack>
+                  </HStack>
+                </div>
+              )}
+            />
+          </div>
+        )}
+        secondSlot={({ style }) => (
+          <div style={style} className="h-full px-4 border-l border-l-border-subtle">
+            {selectedEntry ? (
+              <DiffPanel entry={selectedEntry} onDiscardChanges={handleDiscardChanges} />
+            ) : (
+              <EmptyStateText>Select a change to view diff</EmptyStateText>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+function CommitTreeRow({ node }: { node: CommitTreeNode }) {
+  return (
+    <>
+      {node.model.model !== "http_request" &&
+      node.model.model !== "grpc_request" &&
+      node.model.model !== "websocket_request" ? (
+        <Icon
+          color="secondary"
+          icon={
+            node.model.model === "folder"
+              ? "folder"
+              : node.model.model === "environment"
+                ? "variable"
+                : "house"
+          }
+        />
+      ) : (
+        <span aria-hidden className="w-4" />
+      )}
+      <div className="truncate flex-1">{resolvedModelName(node.model)}</div>
+      {node.status.status !== "current" && (
+        <InlineCode
+          className={classNames(
+            "py-0 bg-transparent w-24 text-center shrink-0",
+            node.status.status === "modified" && "text-info",
+            node.status.status === "untracked" && "text-success",
+            node.status.status === "removed" && "text-danger",
+          )}
+        >
+          {node.status.status}
+        </InlineCode>
+      )}
+    </>
+  );
+}
+
+function ExternalTreeNode({
+  entry,
+  relaDir,
+  onCheck,
+}: {
+  entry: GitStatusEntry;
+  relaDir: string;
+  onCheck: (entry: GitStatusEntry) => void;
+}) {
+  if (entry.status === "current") {
+    return null;
+  }
+
+  // Show paths relative to the sync directory when inside it
+  const displayPath = entry.relaPath.startsWith(`${relaDir}/`)
+    ? entry.relaPath.slice(relaDir.length + 1)
+    : entry.relaPath;
+
+  return (
+    <Checkbox
+      fullWidth
+      className="h-xs w-full hover:bg-surface-highlight rounded-sm px-1 group"
+      checked={entry.staged}
+      onChange={() => onCheck(entry)}
+      title={
+        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-1 w-full items-center">
+          <Icon color="secondary" icon="file_code" />
+          <div className="truncate">{displayPath}</div>
+          <InlineCode
+            className={classNames(
+              "py-0 ml-auto bg-transparent w-24 text-center",
+              entry.status === "modified" && "text-info",
+              entry.status === "untracked" && "text-success",
+              entry.status === "removed" && "text-danger",
+            )}
+          >
+            {entry.status}
+          </InlineCode>
+        </div>
+      }
+    />
+  );
+}
+
+function nodeCheckedStatus(root: CommitTreeNode): CheckboxProps["checked"] {
+  let numVisited = 0;
+  let numChecked = 0;
+  let numCurrent = 0;
+
+  const visitChildren = (n: CommitTreeNode) => {
+    numVisited += 1;
+    if (n.status.status === "current") {
+      numCurrent += 1;
+    } else if (n.status.staged) {
+      numChecked += 1;
+    }
+    for (const child of n.children) {
+      visitChildren(child);
+    }
+  };
+
+  visitChildren(root);
+
+  if (numVisited === numChecked + numCurrent) {
+    return true;
+  }
+  if (numChecked === 0) {
+    return false;
+  }
+  return "indeterminate";
+}
+
+function setCheckedAndChildren(
+  node: CommitTreeNode,
+  checked: boolean,
+  unstage: (args: { relaPaths: string[] }) => void,
+  add: (args: { relaPaths: string[] }) => void,
+) {
+  const toAdd: string[] = [];
+  const toUnstage: string[] = [];
+
+  const next = (node: CommitTreeNode) => {
+    for (const child of node.children) {
+      next(child);
+    }
+
+    if (node.status.status === "current") {
+      // Nothing required
+    } else if (checked && !node.status.staged) {
+      toAdd.push(node.status.relaPath);
+    } else if (!checked && node.status.staged) {
+      toUnstage.push(node.status.relaPath);
+    }
+  };
+
+  next(node);
+
+  if (toAdd.length > 0) add({ relaPaths: toAdd });
+  if (toUnstage.length > 0) unstage({ relaPaths: toUnstage });
+}
+
+function DiffPanel({
+  entry,
+  onDiscardChanges,
+}: {
+  entry: GitStatusEntry;
+  onDiscardChanges: (entry: GitStatusEntry) => void | Promise<void>;
+}) {
+  const prevYaml = modelToYaml(entry.prev);
+  const nextYaml = modelToYaml(entry.next);
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="text-text-subtle mb-2 px-1 grid items-center gap-2 grid-cols-[minmax(0,1fr)_auto]">
+        <div className="min-w-0 truncate">
+          {resolvedModelName(entry.next ?? entry.prev)} ({entry.status})
+        </div>
+        <Button
+          className="ml-auto"
+          color="warning"
+          size="2xs"
+          variant="border"
+          onClick={() => onDiscardChanges(entry)}
+        >
+          Discard Changes
+        </Button>
+      </div>
+      <DiffViewer original={prevYaml ?? ""} modified={nextYaml ?? ""} className="flex-1 min-h-0" />
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/git/GitDropdown.tsx b/apps/yaak-client/components/git/GitDropdown.tsx
new file mode 100644
index 0000000..3c275b3
--- /dev/null
+++ b/apps/yaak-client/components/git/GitDropdown.tsx
@@ -0,0 +1,681 @@
+import { useGitBranchInfo, useGitMutations } from "@yaakapp-internal/git";
+import type { WorkspaceMeta } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
+import { openWorkspaceSettings } from "../../commands/openWorkspaceSettings";
+import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from "../../hooks/useActiveWorkspace";
+import { useKeyValue } from "../../hooks/useKeyValue";
+import { useRandomKey } from "../../hooks/useRandomKey";
+import { sync } from "../../init/sync";
+import { showConfirm, showConfirmDelete } from "../../lib/confirm";
+import { fireAndForget } from "../../lib/fireAndForget";
+import { showDialog } from "../../lib/dialog";
+import { gitWorktreeStatusAtom } from "../../lib/gitWorktreeStatus";
+import { showPrompt } from "../../lib/prompt";
+import { showErrorToast, showToast } from "../../lib/toast";
+import type { DropdownItem } from "../core/Dropdown";
+import { Dropdown } from "../core/Dropdown";
+import { Banner, Icon, InlineCode } from "@yaakapp-internal/ui";
+import { useGitCallbacks } from "./callbacks";
+import { GitCommitDialog } from "./GitCommitDialog";
+import { GitRemotesDialog } from "./GitRemotesDialog";
+import { handlePullResult, handlePushResult } from "./git-util";
+import { HistoryDialog } from "./HistoryDialog";
+
+const EMPTY_BRANCHES: string[] = [];
+
+export function GitDropdown() {
+  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
+  if (workspaceMeta == null) return null;
+
+  if (workspaceMeta.settingSyncDir == null) {
+    return <SetupSyncDropdown workspaceMeta={workspaceMeta} />;
+  }
+
+  return <SyncDropdownWithSyncDir syncDir={workspaceMeta.settingSyncDir} />;
+}
+
+function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
+  const workspace = useAtomValue(activeWorkspaceAtom);
+  const worktreeStatus = useAtomValue(gitWorktreeStatusAtom);
+  const [refreshKey, regenerateKey] = useRandomKey();
+  const branchInfo = useGitBranchInfo(syncDir, refreshKey);
+  const callbacks = useGitCallbacks(syncDir);
+  const {
+    createBranch,
+    deleteBranch,
+    deleteRemoteBranch,
+    renameBranch,
+    mergeBranch,
+    push,
+    pull,
+    checkout,
+    resetChanges,
+    init,
+  } = useGitMutations(syncDir, callbacks);
+
+  const localBranches = branchInfo.data?.localBranches ?? EMPTY_BRANCHES;
+  const remoteBranches = branchInfo.data?.remoteBranches ?? EMPTY_BRANCHES;
+  const remoteOnlyBranches = useMemo(
+    () => remoteBranches.filter((b) => !localBranches.includes(b.replace(/^origin\//, ""))),
+    [localBranches, remoteBranches],
+  );
+  const currentBranch = branchInfo.data?.headRefShorthand;
+  const hasChanges = worktreeStatus?.entries.some((e) => e.status !== "current") ?? false;
+  const ahead = branchInfo.data?.ahead ?? 0;
+  const behind = branchInfo.data?.behind ?? 0;
+  const initRepo = useCallback(() => {
+    init.mutate();
+  }, [init]);
+
+  const items: DropdownItem[] = useMemo(() => {
+    if (workspace == null || branchInfo.data == null) return [];
+
+    const tryCheckout = (branch: string, force: boolean) => {
+      checkout.mutate(
+        { branch, force },
+        {
+          disableToastError: true,
+          async onError(err) {
+            if (!force) {
+              // Checkout failed so ask user if they want to force it
+              const forceCheckout = await showConfirm({
+                id: "git-force-checkout",
+                title: "Conflicts Detected",
+                description:
+                  "Your branch has conflicts. Either make a commit or force checkout to discard changes.",
+                confirmText: "Force Checkout",
+                color: "warning",
+              });
+              if (forceCheckout) {
+                tryCheckout(branch, true);
+              }
+            } else {
+              // Checkout failed
+              showErrorToast({
+                id: "git-checkout-error",
+                title: "Error checking out branch",
+                message: String(err),
+              });
+            }
+          },
+          async onSuccess(branchName) {
+            showToast({
+              id: "git-checkout-success",
+              message: (
+                <>
+                  Switched branch <InlineCode>{branchName}</InlineCode>
+                </>
+              ),
+              color: "success",
+            });
+            await sync({ force: true });
+          },
+        },
+      );
+    };
+
+    return [
+      {
+        label: "View History...",
+        leftSlot: <Icon icon="history" />,
+        onSelect: async () => {
+          showDialog({
+            id: "git-history",
+            size: "md",
+            title: "Commit History",
+            noPadding: true,
+            render: () => <HistoryDialog dir={syncDir} />,
+          });
+        },
+      },
+      {
+        label: "Manage Remotes...",
+        leftSlot: <Icon icon="hard_drive_download" />,
+        onSelect: () => GitRemotesDialog.show(syncDir),
+      },
+      { type: "separator" },
+      {
+        label: "New Branch...",
+        leftSlot: <Icon icon="git_branch_plus" />,
+        async onSelect() {
+          const name = await showPrompt({
+            id: "git-branch-name",
+            title: "Create Branch",
+            label: "Branch Name",
+          });
+          if (!name) return;
+
+          await createBranch.mutateAsync(
+            { branch: name },
+            {
+              disableToastError: true,
+              onError: (err) => {
+                showErrorToast({
+                  id: "git-branch-error",
+                  title: "Error creating branch",
+                  message: String(err),
+                });
+              },
+            },
+          );
+          tryCheckout(name, false);
+        },
+      },
+      { type: "separator" },
+      {
+        label: "Push",
+        leftSlot: <Icon icon="arrow_up_from_line" />,
+        waitForOnSelect: true,
+        async onSelect() {
+          await push.mutateAsync(undefined, {
+            disableToastError: true,
+            onSuccess: handlePushResult,
+            onError(err) {
+              showErrorToast({
+                id: "git-push-error",
+                title: "Error pushing changes",
+                message: String(err),
+              });
+            },
+          });
+        },
+      },
+      {
+        label: "Pull",
+        leftSlot: <Icon icon="arrow_down_to_line" />,
+        waitForOnSelect: true,
+        async onSelect() {
+          await pull.mutateAsync(undefined, {
+            disableToastError: true,
+            onSuccess: handlePullResult,
+            onError(err) {
+              showErrorToast({
+                id: "git-pull-error",
+                title: "Error pulling changes",
+                message: String(err),
+              });
+            },
+          });
+        },
+      },
+      {
+        label: "Commit...",
+
+        leftSlot: <Icon icon="git_commit_vertical" />,
+        onSelect() {
+          showDialog({
+            id: "commit",
+            title: "Commit Changes",
+            size: "full",
+            noPadding: true,
+            render: ({ hide }) => (
+              <GitCommitDialog syncDir={syncDir} onDone={hide} workspace={workspace} />
+            ),
+          });
+        },
+      },
+      {
+        label: "Reset Changes",
+        hidden: !hasChanges,
+        leftSlot: <Icon icon="rotate_ccw" />,
+        color: "danger",
+        async onSelect() {
+          const confirmed = await showConfirm({
+            id: "git-reset-changes",
+            title: "Reset Changes",
+            description: "This will discard all uncommitted changes. This cannot be undone.",
+            confirmText: "Reset",
+            color: "danger",
+          });
+          if (!confirmed) return;
+
+          await resetChanges.mutateAsync(undefined, {
+            disableToastError: true,
+            onSuccess() {
+              showToast({
+                id: "git-reset-success",
+                message: "Changes have been reset",
+                color: "success",
+              });
+              fireAndForget(sync({ force: true }));
+            },
+            onError(err) {
+              showErrorToast({
+                id: "git-reset-error",
+                title: "Error resetting changes",
+                message: String(err),
+              });
+            },
+          });
+        },
+      },
+      { type: "separator", label: "Branches", hidden: localBranches.length < 1 },
+      ...localBranches.map((branch) => {
+        const isCurrent = currentBranch === branch;
+        return {
+          label: branch,
+          leftSlot: <Icon icon={isCurrent ? "check" : "empty"} />,
+          submenuOpenOnClick: true,
+          submenu: [
+            {
+              label: "Checkout",
+              hidden: isCurrent,
+              onSelect: () => tryCheckout(branch, false),
+            },
+            {
+              label: (
+                <>
+                  Merge into <InlineCode>{currentBranch}</InlineCode>
+                </>
+              ),
+              hidden: isCurrent,
+              async onSelect() {
+                await mergeBranch.mutateAsync(
+                  { branch },
+                  {
+                    disableToastError: true,
+                    onSuccess() {
+                      showToast({
+                        id: "git-merged-branch",
+                        message: (
+                          <>
+                            Merged <InlineCode>{branch}</InlineCode> into{" "}
+                            <InlineCode>{currentBranch}</InlineCode>
+                          </>
+                        ),
+                      });
+                      fireAndForget(sync({ force: true }));
+                    },
+                    onError(err) {
+                      showErrorToast({
+                        id: "git-merged-branch-error",
+                        title: "Error merging branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+              },
+            },
+            {
+              label: "New Branch...",
+              async onSelect() {
+                const name = await showPrompt({
+                  id: "git-new-branch-from",
+                  title: "New Branch",
+                  description: (
+                    <>
+                      Create a new branch from <InlineCode>{branch}</InlineCode>
+                    </>
+                  ),
+                  label: "Branch Name",
+                });
+                if (!name) return;
+
+                await createBranch.mutateAsync(
+                  { branch: name, base: branch },
+                  {
+                    disableToastError: true,
+                    onError: (err) => {
+                      showErrorToast({
+                        id: "git-branch-error",
+                        title: "Error creating branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+                tryCheckout(name, false);
+              },
+            },
+            {
+              label: "Rename...",
+              async onSelect() {
+                const newName = await showPrompt({
+                  id: "git-rename-branch",
+                  title: "Rename Branch",
+                  label: "New Branch Name",
+                  defaultValue: branch,
+                });
+                if (!newName || newName === branch) return;
+
+                await renameBranch.mutateAsync(
+                  { oldName: branch, newName },
+                  {
+                    disableToastError: true,
+                    onSuccess() {
+                      showToast({
+                        id: "git-rename-branch-success",
+                        message: (
+                          <>
+                            Renamed <InlineCode>{branch}</InlineCode> to{" "}
+                            <InlineCode>{newName}</InlineCode>
+                          </>
+                        ),
+                        color: "success",
+                      });
+                    },
+                    onError(err) {
+                      showErrorToast({
+                        id: "git-rename-branch-error",
+                        title: "Error renaming branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+              },
+            },
+            { type: "separator", hidden: isCurrent },
+            {
+              label: "Delete",
+              color: "danger",
+              hidden: isCurrent,
+              onSelect: async () => {
+                const confirmed = await showConfirmDelete({
+                  id: "git-delete-branch",
+                  title: "Delete Branch",
+                  description: (
+                    <>
+                      Permanently delete <InlineCode>{branch}</InlineCode>?
+                    </>
+                  ),
+                });
+                if (!confirmed) {
+                  return;
+                }
+
+                const result = await deleteBranch.mutateAsync(
+                  { branch },
+                  {
+                    disableToastError: true,
+                    onError(err) {
+                      showErrorToast({
+                        id: "git-delete-branch-error",
+                        title: "Error deleting branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+
+                if (result.type === "not_fully_merged") {
+                  const confirmed = await showConfirm({
+                    id: "force-branch-delete",
+                    title: "Branch not fully merged",
+                    description: (
+                      <>
+                        <p>
+                          Branch <InlineCode>{branch}</InlineCode> is not fully merged.
+                        </p>
+                        <p>Do you want to delete it anyway?</p>
+                      </>
+                    ),
+                  });
+                  if (confirmed) {
+                    await deleteBranch.mutateAsync(
+                      { branch, force: true },
+                      {
+                        disableToastError: true,
+                        onError(err) {
+                          showErrorToast({
+                            id: "git-force-delete-branch-error",
+                            title: "Error force deleting branch",
+                            message: String(err),
+                          });
+                        },
+                      },
+                    );
+                  }
+                }
+              },
+            },
+          ],
+        } satisfies DropdownItem;
+      }),
+      ...remoteOnlyBranches.map((branch) => {
+        const isCurrent = currentBranch === branch;
+        return {
+          label: branch,
+          leftSlot: <Icon icon={isCurrent ? "check" : "empty"} />,
+          submenuOpenOnClick: true,
+          submenu: [
+            {
+              label: "Checkout",
+              hidden: isCurrent,
+              onSelect: () => tryCheckout(branch, false),
+            },
+            {
+              label: "Delete",
+              color: "danger",
+              async onSelect() {
+                const confirmed = await showConfirmDelete({
+                  id: "git-delete-remote-branch",
+                  title: "Delete Remote Branch",
+                  description: (
+                    <>
+                      Permanently delete <InlineCode>{branch}</InlineCode> from the remote?
+                    </>
+                  ),
+                });
+                if (!confirmed) return;
+
+                await deleteRemoteBranch.mutateAsync(
+                  { branch },
+                  {
+                    disableToastError: true,
+                    onSuccess() {
+                      showToast({
+                        id: "git-delete-remote-branch-success",
+                        message: (
+                          <>
+                            Deleted remote branch <InlineCode>{branch}</InlineCode>
+                          </>
+                        ),
+                        color: "success",
+                      });
+                    },
+                    onError(err) {
+                      showErrorToast({
+                        id: "git-delete-remote-branch-error",
+                        title: "Error deleting remote branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+              },
+            },
+          ],
+        } satisfies DropdownItem;
+      }),
+    ];
+  }, [
+    branchInfo.data,
+    checkout,
+    createBranch,
+    currentBranch,
+    deleteBranch,
+    deleteRemoteBranch,
+    hasChanges,
+    localBranches,
+    mergeBranch,
+    pull,
+    push,
+    remoteOnlyBranches,
+    renameBranch,
+    resetChanges,
+    syncDir,
+    workspace,
+  ]);
+
+  if (workspace == null) {
+    return null;
+  }
+
+  const noRepo = branchInfo.error?.includes("not found");
+  if (noRepo) {
+    return <SetupGitDropdown workspaceId={workspace.id} initRepo={initRepo} />;
+  }
+
+  // Still loading
+  if (branchInfo.data == null) {
+    return null;
+  }
+
+  return (
+    <Dropdown fullWidth items={items} onOpen={regenerateKey}>
+      <GitMenuButton>
+        <InlineCode className="flex items-center gap-1">
+          <Icon icon="git_branch" size="xs" className="opacity-50" />
+          {currentBranch}
+        </InlineCode>
+        <div className="flex items-center gap-1.5">
+          {ahead > 0 && (
+            <span className="text-xs flex items-center gap-0.5">
+              <span className="text-primary">↗</span>
+              {ahead}
+            </span>
+          )}
+          {behind > 0 && (
+            <span className="text-xs flex items-center gap-0.5">
+              <span className="text-info">↙</span>
+              {behind}
+            </span>
+          )}
+        </div>
+      </GitMenuButton>
+    </Dropdown>
+  );
+}
+
+const GitMenuButton = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  function GitMenuButton({ className, ...props }: HTMLAttributes<HTMLButtonElement>, ref) {
+    return (
+      <button
+        ref={ref}
+        className={classNames(
+          className,
+          "px-3 h-md border-t border-border flex items-center justify-between text-text-subtle outline-hidden focus-visible:bg-surface-highlight",
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+function SetupSyncDropdown({ workspaceMeta }: { workspaceMeta: WorkspaceMeta }) {
+  const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
+    key: "setup_sync",
+    fallback: {},
+  });
+
+  if (hidden == null || hidden[workspaceMeta.workspaceId]) {
+    return null;
+  }
+
+  const banner = (
+    <Banner color="info">
+      When enabled, workspace data syncs to the chosen folder as text files, ideal for backup and
+      Git collaboration.
+    </Banner>
+  );
+
+  return (
+    <Dropdown
+      fullWidth
+      items={[
+        {
+          type: "content",
+          label: banner,
+        },
+        {
+          color: "success",
+          label: "Open Workspace Settings",
+          leftSlot: <Icon icon="settings" />,
+          onSelect: () => openWorkspaceSettings("settings"),
+        },
+        { type: "separator" },
+        {
+          label: "Hide This Message",
+          leftSlot: <Icon icon="eye_closed" />,
+          async onSelect() {
+            const confirmed = await showConfirm({
+              id: "hide-sync-menu-prompt",
+              title: "Hide Setup Message",
+              description: "You can configure filesystem sync or Git it in the workspace settings",
+            });
+            if (confirmed) {
+              await setHidden((prev) => ({ ...prev, [workspaceMeta.workspaceId]: true }));
+            }
+          },
+        },
+      ]}
+    >
+      <GitMenuButton>
+        <div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
+          <Icon icon="wrench" />
+          <div className="truncate">Setup FS Sync or Git</div>
+        </div>
+      </GitMenuButton>
+    </Dropdown>
+  );
+}
+
+function SetupGitDropdown({
+  workspaceId,
+  initRepo,
+}: {
+  workspaceId: string;
+  initRepo: () => void;
+}) {
+  const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
+    key: "setup_git_repo",
+    fallback: {},
+  });
+
+  if (hidden == null || hidden[workspaceId]) {
+    return null;
+  }
+
+  const banner = <Banner color="info">Initialize local repo to start versioning with Git</Banner>;
+
+  return (
+    <Dropdown
+      fullWidth
+      items={[
+        { type: "content", label: banner },
+        {
+          label: "Initialize Git Repo",
+          leftSlot: <Icon icon="magic_wand" />,
+          onSelect: initRepo,
+        },
+        { type: "separator" },
+        {
+          label: "Hide This Message",
+          leftSlot: <Icon icon="eye_closed" />,
+          async onSelect() {
+            const confirmed = await showConfirm({
+              id: "hide-git-init-prompt",
+              title: "Hide Git Setup",
+              description: "You can initialize a git repo outside of Yaak to bring this back",
+            });
+            if (confirmed) {
+              await setHidden((prev) => ({ ...prev, [workspaceId]: true }));
+            }
+          },
+        },
+      ]}
+    >
+      <GitMenuButton>
+        <div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
+          <Icon icon="folder_git" />
+          <div className="truncate">Setup Git</div>
+        </div>
+      </GitMenuButton>
+    </Dropdown>
+  );
+}
diff --git a/apps/yaak-client/components/git/GitRemotesDialog.tsx b/apps/yaak-client/components/git/GitRemotesDialog.tsx
new file mode 100644
index 0000000..8a9be72
--- /dev/null
+++ b/apps/yaak-client/components/git/GitRemotesDialog.tsx
@@ -0,0 +1,73 @@
+import { useGit } from "@yaakapp-internal/git";
+import { showDialog } from "../../lib/dialog";
+import { Button } from "../core/Button";
+import { IconButton } from "../core/IconButton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "@yaakapp-internal/ui";
+import { useGitCallbacks } from "./callbacks";
+import { addGitRemote } from "./showAddRemoteDialog";
+
+interface Props {
+  dir: string;
+  onDone: () => void;
+}
+
+export function GitRemotesDialog({ dir }: Props) {
+  const callbacks = useGitCallbacks(dir);
+  const [{ remotes }, { rmRemote }] = useGit(dir, callbacks);
+
+  return (
+    <Table scrollable>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>URL</TableHeaderCell>
+          <TableHeaderCell>
+            <Button
+              className="text-text-subtle ml-auto"
+              size="2xs"
+              color="primary"
+              title="Add remote"
+              variant="border"
+              onClick={() => addGitRemote(dir)}
+            >
+              Add Remote
+            </Button>
+          </TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {remotes.data?.map((r) => (
+          <TableRow key={r.name + r.url}>
+            <TableCell>{r.name}</TableCell>
+            <TableCell>{r.url}</TableCell>
+            <TableCell>
+              <IconButton
+                size="sm"
+                className="text-text-subtle ml-auto"
+                icon="trash"
+                title="Remove remote"
+                onClick={() => rmRemote.mutate({ name: r.name })}
+              />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+GitRemotesDialog.show = (dir: string) => {
+  showDialog({
+    id: "git-remotes",
+    title: "Manage Remotes",
+    size: "md",
+    render: ({ hide }) => <GitRemotesDialog onDone={hide} dir={dir} />,
+  });
+};
diff --git a/apps/yaak-client/components/git/HistoryDialog.tsx b/apps/yaak-client/components/git/HistoryDialog.tsx
new file mode 100644
index 0000000..9032402
--- /dev/null
+++ b/apps/yaak-client/components/git/HistoryDialog.tsx
@@ -0,0 +1,44 @@
+import { useGitLog } from "@yaakapp-internal/git";
+import { formatDistanceToNowStrict } from "date-fns";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  TruncatedWideTableCell,
+} from "@yaakapp-internal/ui";
+
+export function HistoryDialog({ dir }: { dir: string }) {
+  const log = useGitLog(dir);
+
+  return (
+    <div className="pl-5 pr-1 pb-1">
+      <Table scrollable className="px-1">
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell>Message</TableHeaderCell>
+            <TableHeaderCell>Author</TableHeaderCell>
+            <TableHeaderCell>When</TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {(log.data ?? []).map((l) => (
+            <TableRow key={l.oid}>
+              <TruncatedWideTableCell>
+                {l.message || <em className="text-text-subtle">No message</em>}
+              </TruncatedWideTableCell>
+              <TableCell>
+                <span title={`Email: ${l.author.email}`}>{l.author.name || "Unknown"}</span>
+              </TableCell>
+              <TableCell className="text-text-subtle">
+                <span title={l.when}>{formatDistanceToNowStrict(l.when)} ago</span>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/git/callbacks.tsx b/apps/yaak-client/components/git/callbacks.tsx
new file mode 100644
index 0000000..b788c67
--- /dev/null
+++ b/apps/yaak-client/components/git/callbacks.tsx
@@ -0,0 +1,31 @@
+import type { GitCallbacks } from "@yaakapp-internal/git";
+import { useMemo } from "react";
+import { sync } from "../../init/sync";
+import { promptCredentials } from "./credentials";
+import { promptDivergedStrategy } from "./diverged";
+import { addGitRemote } from "./showAddRemoteDialog";
+import { promptUncommittedChangesStrategy } from "./uncommitted";
+
+export function gitCallbacks(dir: string): GitCallbacks {
+  return {
+    addRemote: async () => {
+      return addGitRemote(dir, "origin");
+    },
+    promptCredentials: async ({ url, error }) => {
+      const creds = await promptCredentials({ url, error });
+      if (creds == null) throw new Error("Cancelled credentials prompt");
+      return creds;
+    },
+    promptDiverged: async ({ remote, branch }) => {
+      return promptDivergedStrategy({ remote, branch });
+    },
+    promptUncommittedChanges: async () => {
+      return promptUncommittedChangesStrategy();
+    },
+    forceSync: () => sync({ force: true }),
+  };
+}
+
+export function useGitCallbacks(dir: string): GitCallbacks {
+  return useMemo(() => gitCallbacks(dir), [dir]);
+}
diff --git a/apps/yaak-client/components/git/credentials.tsx b/apps/yaak-client/components/git/credentials.tsx
new file mode 100644
index 0000000..4476271
--- /dev/null
+++ b/apps/yaak-client/components/git/credentials.tsx
@@ -0,0 +1,49 @@
+import { showPromptForm } from "../../lib/prompt-form";
+import { Banner, InlineCode } from "@yaakapp-internal/ui";
+
+export interface GitCredentials {
+  username: string;
+  password: string;
+}
+
+export async function promptCredentials({
+  url: remoteUrl,
+  error,
+}: {
+  url: string;
+  error: string | null;
+}): Promise<GitCredentials | null> {
+  const isGitHub = /github\.com/i.test(remoteUrl);
+  const userLabel = isGitHub ? "GitHub Username" : "Username";
+  const passLabel = isGitHub ? "GitHub Personal Access Token" : "Password / Token";
+  const userDescription = isGitHub ? "Use your GitHub username (not your email)." : undefined;
+  const passDescription = isGitHub
+    ? "GitHub requires a Personal Access Token (PAT) for write operations over HTTPS. Passwords are not supported."
+    : "Enter your password or access token for this Git server.";
+  const r = await showPromptForm({
+    id: "git-credentials",
+    title: "Credentials Required",
+    description: error ? (
+      <Banner color="danger">{error}</Banner>
+    ) : (
+      <>
+        Enter credentials for <InlineCode>{remoteUrl}</InlineCode>
+      </>
+    ),
+    inputs: [
+      { type: "text", name: "username", label: userLabel, description: userDescription },
+      {
+        type: "text",
+        name: "password",
+        label: passLabel,
+        description: passDescription,
+        password: true,
+      },
+    ],
+  });
+  if (r == null) return null;
+
+  const username = String(r.username || "");
+  const password = String(r.password || "");
+  return { username, password };
+}
diff --git a/apps/yaak-client/components/git/diverged.tsx b/apps/yaak-client/components/git/diverged.tsx
new file mode 100644
index 0000000..26d778a
--- /dev/null
+++ b/apps/yaak-client/components/git/diverged.tsx
@@ -0,0 +1,100 @@
+import type { DivergedStrategy } from "@yaakapp-internal/git";
+import { HStack, InlineCode } from "@yaakapp-internal/ui";
+import { useState } from "react";
+import { showDialog } from "../../lib/dialog";
+import { Button } from "../core/Button";
+import { RadioCards } from "../core/RadioCards";
+
+type Resolution = "force_reset" | "merge";
+
+const resolutionLabel: Record<Resolution, string> = {
+  force_reset: "Force Pull",
+  merge: "Merge",
+};
+
+interface DivergedDialogProps {
+  remote: string;
+  branch: string;
+  onResult: (strategy: DivergedStrategy) => void;
+  onHide: () => void;
+}
+
+function DivergedDialog({ remote, branch, onResult, onHide }: DivergedDialogProps) {
+  const [selected, setSelected] = useState<Resolution | null>(null);
+
+  const handleSubmit = () => {
+    if (selected == null) return;
+    onResult(selected);
+    onHide();
+  };
+
+  const handleCancel = () => {
+    onResult("cancel");
+    onHide();
+  };
+
+  return (
+    <div className="flex flex-col gap-4 mb-4">
+      <p className="text-text-subtle">
+        Your local branch has diverged from{" "}
+        <InlineCode>
+          {remote}/{branch}
+        </InlineCode>
+        . How would you like to resolve this?
+      </p>
+      <RadioCards
+        name="diverged-strategy"
+        value={selected}
+        onChange={setSelected}
+        options={[
+          {
+            value: "merge",
+            label: "Merge Commit",
+            description: "Combining local and remote changes into a single merge commit",
+          },
+          {
+            value: "force_reset",
+            label: "Force Pull",
+            description: "Discard local commits and reset to match the remote branch",
+          },
+        ]}
+      />
+      <HStack space={2} justifyContent="start" className="flex-row-reverse">
+        <Button
+          color={selected === "force_reset" ? "danger" : "primary"}
+          disabled={selected == null}
+          onClick={handleSubmit}
+        >
+          {selected != null ? resolutionLabel[selected] : "Select an option"}
+        </Button>
+        <Button variant="border" onClick={handleCancel}>
+          Cancel
+        </Button>
+      </HStack>
+    </div>
+  );
+}
+
+export async function promptDivergedStrategy({
+  remote,
+  branch,
+}: {
+  remote: string;
+  branch: string;
+}): Promise<DivergedStrategy> {
+  return new Promise((resolve) => {
+    showDialog({
+      id: "git-diverged",
+      title: "Branches Diverged",
+      size: "sm",
+      disableClose: true,
+      render: ({ hide }) =>
+        DivergedDialog({
+          remote,
+          branch,
+          onHide: hide,
+          onResult: resolve,
+        }),
+    });
+  });
+}
diff --git a/apps/yaak-client/components/git/git-util.ts b/apps/yaak-client/components/git/git-util.ts
new file mode 100644
index 0000000..b6d79f0
--- /dev/null
+++ b/apps/yaak-client/components/git/git-util.ts
@@ -0,0 +1,36 @@
+import type { PullResult, PushResult } from "@yaakapp-internal/git";
+import { showToast } from "../../lib/toast";
+
+export function handlePushResult(r: PushResult) {
+  switch (r.type) {
+    case "needs_credentials":
+      showToast({ id: "push-error", message: "Credentials not found", color: "danger" });
+      break;
+    case "success":
+      showToast({ id: "push-success", message: r.message, color: "success" });
+      break;
+    case "up_to_date":
+      showToast({ id: "push-nothing", message: "Already up-to-date", color: "info" });
+      break;
+  }
+}
+
+export function handlePullResult(r: PullResult) {
+  switch (r.type) {
+    case "needs_credentials":
+      showToast({ id: "pull-error", message: "Credentials not found", color: "danger" });
+      break;
+    case "success":
+      showToast({ id: "pull-success", message: r.message, color: "success" });
+      break;
+    case "up_to_date":
+      showToast({ id: "pull-nothing", message: "Already up-to-date", color: "info" });
+      break;
+    case "diverged":
+      // Handled by mutation callback before reaching here
+      break;
+    case "uncommitted_changes":
+      // Handled by mutation callback before reaching here
+      break;
+  }
+}
diff --git a/apps/yaak-client/components/git/showAddRemoteDialog.tsx b/apps/yaak-client/components/git/showAddRemoteDialog.tsx
new file mode 100644
index 0000000..d11410e
--- /dev/null
+++ b/apps/yaak-client/components/git/showAddRemoteDialog.tsx
@@ -0,0 +1,20 @@
+import type { GitRemote } from "@yaakapp-internal/git";
+import { gitMutations } from "@yaakapp-internal/git";
+import { showPromptForm } from "../../lib/prompt-form";
+import { gitCallbacks } from "./callbacks";
+
+export async function addGitRemote(dir: string, defaultName?: string): Promise<GitRemote> {
+  const r = await showPromptForm({
+    id: "add-remote",
+    title: "Add Remote",
+    inputs: [
+      { type: "text", label: "Name", name: "name", defaultValue: defaultName },
+      { type: "text", label: "URL", name: "url", placeholder: "git@github.com:org/repo.git" },
+    ],
+  });
+  if (r == null) throw new Error("Cancelled remote prompt");
+
+  const name = String(r.name ?? "");
+  const url = String(r.url ?? "");
+  return gitMutations(dir, gitCallbacks(dir)).addRemote.mutateAsync({ name, url });
+}
diff --git a/apps/yaak-client/components/git/uncommitted.tsx b/apps/yaak-client/components/git/uncommitted.tsx
new file mode 100644
index 0000000..c46827c
--- /dev/null
+++ b/apps/yaak-client/components/git/uncommitted.tsx
@@ -0,0 +1,13 @@
+import type { UncommittedChangesStrategy } from "@yaakapp-internal/git";
+import { showConfirm } from "../../lib/confirm";
+
+export async function promptUncommittedChangesStrategy(): Promise<UncommittedChangesStrategy> {
+  const confirmed = await showConfirm({
+    id: "git-uncommitted-changes",
+    title: "Uncommitted Changes",
+    description: "You have uncommitted changes. Commit or reset your changes before pulling.",
+    confirmText: "Reset and Pull",
+    color: "danger",
+  });
+  return confirmed ? "reset" : "cancel";
+}
diff --git a/apps/yaak-client/components/graphql/GraphQLDocsExplorer.tsx b/apps/yaak-client/components/graphql/GraphQLDocsExplorer.tsx
new file mode 100644
index 0000000..f89bbc3
--- /dev/null
+++ b/apps/yaak-client/components/graphql/GraphQLDocsExplorer.tsx
@@ -0,0 +1,1008 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import classNames from "classnames";
+import { fuzzyMatch } from "fuzzbunny";
+import type {
+  GraphQLField,
+  GraphQLInputField,
+  GraphQLNamedType,
+  GraphQLSchema,
+  GraphQLType,
+} from "graphql";
+import {
+  getNamedType,
+  isEnumType,
+  isInputObjectType,
+  isInterfaceType,
+  isListType,
+  isNamedType,
+  isNonNullType,
+  isObjectType,
+  isScalarType,
+  isUnionType,
+} from "graphql";
+import { useAtomValue } from "jotai";
+import type { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode } from "react";
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useClickOutside } from "../../hooks/useClickOutside";
+import { Banner, useContainerSize } from "@yaakapp-internal/ui";
+import { Icon, useDebouncedValue } from "@yaakapp-internal/ui";
+import { useStateWithDeps } from "../../hooks/useStateWithDeps";
+import { jotaiStore } from "../../lib/jotai";
+import { CountBadge } from "../core/CountBadge";
+import { IconButton } from "../core/IconButton";
+import { PlainInput } from "../core/PlainInput";
+import { Markdown } from "../Markdown";
+import { showGraphQLDocExplorerAtom } from "./graphqlAtoms";
+
+interface Props {
+  style?: CSSProperties;
+  schema: GraphQLSchema;
+  requestId: string;
+  className?: string;
+}
+
+type ExplorerItem =
+  | { kind: "type"; type: GraphQLType; from: ExplorerItem }
+  // oxlint-disable-next-line no-explicit-any -- none
+  | { kind: "field"; type: GraphQLField<any, any>; from: ExplorerItem }
+  | { kind: "input_field"; type: GraphQLInputField; from: ExplorerItem }
+  | null;
+
+export const GraphQLDocsExplorer = memo(function GraphQLDocsExplorer({
+  style,
+  schema,
+  requestId,
+  className,
+}: Props) {
+  const [activeItem, setActiveItem] = useState<ExplorerItem>(null);
+
+  const qryType = schema.getQueryType();
+  const mutType = schema.getMutationType();
+  const subType = schema.getSubscriptionType();
+  const showField = useAtomValue(showGraphQLDocExplorerAtom)[requestId] ?? null;
+
+  useEffect(() => {
+    if (showField === null) {
+      setActiveItem(null);
+    } else {
+      const isRootParentType =
+        showField.parentType === "Query" ||
+        showField.parentType === "Mutation" ||
+        showField.parentType === "Subscription";
+      walkTypeGraph(schema, null, (t, from) => {
+        if (
+          showField.field === t.name &&
+          // For input fields, CodeMirror seems to set parentType to the root type of the field they belong to.
+          (isRootParentType || from?.name === showField.parentType)
+        ) {
+          setActiveItem(toExplorerItem(t, toExplorerItem(from, null)));
+          return false;
+        }
+        if (showField.type === t.name && from?.name === showField.parentType) {
+          setActiveItem(toExplorerItem(t, toExplorerItem(from, null)));
+          return false;
+        }
+        return true;
+      });
+    }
+  }, [schema, showField]);
+
+  const qryItem: ExplorerItem = qryType ? { kind: "type", type: qryType, from: null } : null;
+  const mutItem: ExplorerItem = mutType ? { kind: "type", type: mutType, from: null } : null;
+  const subItem: ExplorerItem = subType ? { kind: "type", type: subType, from: null } : null;
+  const allTypes = schema.getTypeMap();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerSize = useContainerSize(containerRef);
+
+  return (
+    <div ref={containerRef} className={classNames(className, "py-3 mx-3")} style={style}>
+      <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full border border-dashed border-border rounded-lg overflow-hidden">
+        <GraphQLExplorerHeader
+          containerHeight={containerSize.height}
+          item={activeItem}
+          onClose={() => {
+            jotaiStore.set(showGraphQLDocExplorerAtom, (v) => ({ ...v, [requestId]: undefined }));
+          }}
+          setItem={setActiveItem}
+          schema={schema}
+        />
+        {activeItem == null ? (
+          <div className="flex flex-col gap-3 overflow-y-auto h-full w-full px-3 pb-6">
+            <Heading>Root Types</Heading>
+            <GqlTypeRow
+              name={{ value: "query", color: "primary" }}
+              item={qryItem}
+              setItem={setActiveItem}
+              className="my-0!"
+            />
+            <GqlTypeRow
+              name={{ value: "mutation", color: "primary" }}
+              item={mutItem}
+              setItem={setActiveItem}
+              className="my-0!"
+            />
+            <GqlTypeRow
+              name={{ value: "subscription", color: "primary" }}
+              item={subItem}
+              setItem={setActiveItem}
+              className="my-0!"
+            />
+            <Subheading count={Object.keys(allTypes).length}>All Schema Types</Subheading>
+            <DocMarkdown>{schema.description ?? null}</DocMarkdown>
+            <div className="flex flex-col gap-1">
+              {Object.values(allTypes).map((t) => {
+                return (
+                  <GqlTypeLink
+                    key={t.name}
+                    color="notice"
+                    item={{ kind: "type", type: t, from: null }}
+                    setItem={setActiveItem}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        ) : (
+          <div
+            key={"name" in activeItem.type ? activeItem.type.name : String(activeItem.type)} // Reset scroll position to top
+            className="overflow-y-auto h-full w-full p-3 grid grid-cols-[minmax(0,1fr)]"
+          >
+            <GqlTypeInfo item={activeItem} setItem={setActiveItem} schema={schema} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+function GraphQLExplorerHeader({
+  item,
+  setItem,
+  schema,
+  onClose,
+  containerHeight,
+}: {
+  item: ExplorerItem;
+  setItem: (t: ExplorerItem) => void;
+  schema: GraphQLSchema;
+  onClose: () => void;
+  containerHeight: number;
+}) {
+  const findIt = (t: ExplorerItem): ExplorerItem[] => {
+    if (t == null) return [null];
+    return [...findIt(t.from), t];
+  };
+  const crumbs = findIt(item);
+  return (
+    <nav className="pl-2 pr-1 h-lg grid grid-rows-1 grid-cols-[minmax(0,1fr)_auto] items-center min-w-0 gap-1 z-10">
+      <div className="@container w-full relative pl-2 pr-1 h-lg grid grid-rows-1 grid-cols-[minmax(0,min-content)_auto] items-center gap-1">
+        <div className="whitespace-nowrap flex items-center gap-2 text-text-subtle text-sm overflow-x-auto hide-scrollbars">
+          <Icon icon="book_open_text" />
+          {crumbs.map((crumb, i) => {
+            return (
+              // oxlint-disable-next-line no-array-index-key -- none
+              <Fragment key={i}>
+                {i > 0 && <Icon icon="chevron_right" className="text-text-subtlest" />}
+                {crumb === item || item == null ? (
+                  <GqlTypeLabel noTruncate item={item} />
+                ) : crumb === item ? null : (
+                  <GqlTypeLink
+                    // oxlint-disable-next-line no-array-index-key -- none
+                    key={i}
+                    noTruncate
+                    item={crumb}
+                    setItem={setItem}
+                    className="font-sans! text-sm! shrink-0"
+                  />
+                )}
+              </Fragment>
+            );
+          })}
+        </div>
+        <GqlSchemaSearch
+          key={item != null && "name" in item.type ? item.type.name : "search"} // Force reset when changing items
+          maxHeight={containerHeight}
+          currentItem={item}
+          schema={schema}
+          setItem={(item) => setItem(item)}
+          className="hidden @[10rem]:block"
+        />
+      </div>
+      <div className="ml-auto flex gap-1 *:text-text-subtle">
+        <IconButton icon="x" size="sm" title="Close documentation explorer" onClick={onClose} />
+      </div>
+    </nav>
+  );
+}
+
+function GqlTypeInfo({
+  item,
+  setItem,
+  schema,
+}: {
+  item: ExplorerItem | null;
+  setItem: (t: ExplorerItem) => void;
+  schema: GraphQLSchema;
+}) {
+  if (item == null) return null;
+
+  const description =
+    item.kind === "type" ? getNamedType(item.type).description : item.type.description;
+
+  const heading = (
+    <div className="mb-3">
+      <Heading>
+        <GqlTypeLabel item={item} />
+      </Heading>
+      <DocMarkdown>{description || "No description"}</DocMarkdown>
+      {"deprecationReason" in item.type && item.type.deprecationReason && (
+        <Banner color="notice">
+          <DocMarkdown>{item.type.deprecationReason}</DocMarkdown>
+        </Banner>
+      )}
+    </div>
+  );
+
+  if (isScalarType(item.type)) {
+    return heading;
+  }
+  if (isNonNullType(item.type) || isListType(item.type)) {
+    // kinda a hack, but we'll just unwrap there and show the named type
+    return (
+      <GqlTypeInfo
+        item={toExplorerItem(item.type.ofType, item)}
+        setItem={setItem}
+        schema={schema}
+      />
+    );
+  }
+  if (isInterfaceType(item.type)) {
+    const fields = item.type.getFields();
+    const possibleTypes = schema.getPossibleTypes(item.type) ?? [];
+
+    return (
+      <div>
+        {heading}
+
+        <Subheading count={Object.keys(fields).length}>Fields</Subheading>
+        {Object.entries(fields).map(([fieldName, field]) => {
+          const fieldItem: ExplorerItem = toExplorerItem(field, item);
+          return (
+            <div key={`${String(field.type)}::${field.name}`} className="my-4">
+              <GqlTypeRow
+                item={fieldItem}
+                setItem={setItem}
+                name={{ value: fieldName, color: "primary" }}
+              />
+            </div>
+          );
+        })}
+
+        {possibleTypes.length > 0 && (
+          <>
+            <Subheading>Implemented By</Subheading>
+            {possibleTypes.map((t) => (
+              <GqlTypeRow key={t.name} item={toExplorerItem(t, item)} setItem={setItem} />
+            ))}
+          </>
+        )}
+      </div>
+    );
+  }
+  if (isUnionType(item.type)) {
+    const types = item.type.getTypes();
+
+    return (
+      <div>
+        {heading}
+
+        <Subheading>Possible Types</Subheading>
+        {types.map((t) => (
+          <GqlTypeRow key={t.name} item={{ kind: "type", type: t, from: item }} setItem={setItem} />
+        ))}
+      </div>
+    );
+  }
+  if (isEnumType(item.type)) {
+    const values = item.type.getValues();
+
+    return (
+      <div>
+        {heading}
+        <Subheading>Values</Subheading>
+        {values.map((v) => (
+          <div key={v.name} className="my-4 font-mono text-editor truncate">
+            <span className="text-primary">{v.value}</span>
+            <DocMarkdown>{v.description ?? null}</DocMarkdown>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  if (item.kind === "input_field") {
+    return (
+      <div className="flex flex-col gap-3">
+        {heading}
+
+        {item.type.defaultValue !== undefined && (
+          <div>
+            <Subheading>Default Value</Subheading>
+            <div className="font-mono text-editor">{JSON.stringify(item.type.defaultValue)}</div>
+          </div>
+        )}
+
+        <div>
+          <Subheading>Type</Subheading>
+          <GqlTypeRow
+            className="mt-4"
+            item={{ kind: "type", type: item.type.type, from: item }}
+            setItem={setItem}
+          />
+        </div>
+      </div>
+    );
+  }
+  if (item.kind === "field") {
+    return (
+      <div className="flex flex-col gap-3">
+        {heading}
+
+        <div>
+          <Subheading>Type</Subheading>
+          <GqlTypeRow
+            className="mt-4"
+            item={{ kind: "type", type: item.type.type, from: item }}
+            setItem={setItem}
+          />
+        </div>
+
+        {item.type.args.length > 0 && (
+          <div>
+            <Subheading>Arguments</Subheading>
+            {item.type.args.map((a) => {
+              return (
+                <div key={`${String(a.type)}::${a.name}`} className="my-4">
+                  <GqlTypeRow
+                    name={{ value: a.name, color: "info" }}
+                    item={{ kind: "type", type: a.type, from: item }}
+                    setItem={setItem}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+  if (isInputObjectType(item.type)) {
+    const fields = item.type.getFields();
+    return (
+      <div>
+        {heading}
+
+        <Subheading count={Object.keys(fields).length}>Fields</Subheading>
+        {Object.keys(fields).map((fieldName) => {
+          const field = fields[fieldName];
+          if (field == null) return null;
+          const fieldItem: ExplorerItem = {
+            kind: "input_field",
+            type: field,
+            from: item,
+          };
+          return (
+            <div key={`${String(field.type)}::${field.name}`} className="my-4">
+              <GqlTypeRow
+                item={fieldItem}
+                setItem={setItem}
+                name={{ value: fieldName, color: "primary" }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+  if (isObjectType(item.type)) {
+    const fields = item.type.getFields();
+    const interfaces = item.type.getInterfaces();
+
+    return (
+      <div>
+        {heading}
+        {interfaces.length > 0 && (
+          <>
+            <Subheading>Implements</Subheading>
+            {interfaces.map((i) => (
+              <GqlTypeRow
+                key={i.name}
+                item={{ kind: "type", type: i, from: item }}
+                setItem={setItem}
+              />
+            ))}
+          </>
+        )}
+
+        <Subheading count={Object.keys(fields).length}>Fields</Subheading>
+        {Object.keys(fields).map((fieldName) => {
+          const field = fields[fieldName];
+          if (field == null) return null;
+          const fieldItem: ExplorerItem = { kind: "field", type: field, from: item };
+          return (
+            <div key={`${String(field.type)}::${field.name}`} className="my-4">
+              <GqlTypeRow
+                item={fieldItem}
+                setItem={setItem}
+                name={{ value: fieldName, color: "primary" }}
+              />
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  console.log("Unknown GraphQL Type", item);
+  return <div>Unknown GraphQL type</div>;
+}
+
+function GqlTypeRow({
+  item,
+  setItem,
+  name,
+  description,
+  className,
+  hideDescription,
+}: {
+  item: ExplorerItem;
+  name?: { value: string; color: Color };
+  description?: string | null;
+  setItem: (t: ExplorerItem) => void;
+  className?: string;
+  hideDescription?: boolean;
+}) {
+  if (item == null) return null;
+
+  let child: ReactNode = <>Unknown Type</>;
+
+  if (item.kind === "type") {
+    child = (
+      <>
+        <div className="font-mono text-editor">
+          {name && (
+            <span
+              className={classNames(
+                name?.color === "danger" && "text-danger",
+                name?.color === "primary" && "text-primary",
+                name?.color === "success" && "text-success",
+                name?.color === "warning" && "text-warning",
+                name?.color === "notice" && "text-notice",
+                name?.color === "info" && "text-info",
+              )}
+            >
+              {name.value}: 
+            </span>
+          )}
+          <GqlTypeLink color="notice" item={item} setItem={setItem} />
+        </div>
+        {!hideDescription && (
+          <DocMarkdown>
+            {(description === undefined ? getNamedType(item.type).description : description) ??
+              null}
+          </DocMarkdown>
+        )}
+      </>
+    );
+  } else if (item.kind === "field") {
+    const returnItem: ExplorerItem = {
+      kind: "type",
+      type: item.type.type,
+      from: item.from,
+    };
+    child = (
+      <div>
+        <div className="font-mono text-editor">
+          <GqlTypeLink color="info" item={item} setItem={setItem}>
+            {name?.value}
+          </GqlTypeLink>
+          {item.type.args.length > 0 && (
+            <>
+              <span className="text-text-subtle">(</span>
+              {item.type.args.map((arg) => (
+                <div
+                  key={`${String(arg.type)}::${arg.name}`}
+                  className={classNames(item.type.args.length === 1 && "inline-flex")}
+                >
+                  {item.type.args.length > 1 && <>  </>}
+                  <span className="text-primary">{arg.name}:</span> 
+                  <GqlTypeLink
+                    color="notice"
+                    item={{ kind: "type", type: arg.type, from: item.from }}
+                    setItem={setItem}
+                  />
+                </div>
+              ))}
+              <span className="text-text-subtle">)</span>
+            </>
+          )}
+          <span className="text-text-subtle">:</span>{" "}
+          <GqlTypeLink color="notice" item={returnItem} setItem={setItem} />
+        </div>
+        <DocMarkdown className="text-text-subtle! mt-0.5">
+          {item.type.description ?? null}
+        </DocMarkdown>
+      </div>
+    );
+  } else if (item.kind === "input_field") {
+    child = (
+      <>
+        <div className="font-mono text-editor">
+          {name && <span className="text-primary">{name.value}:</span>}{" "}
+          <GqlTypeLink color="notice" item={item} setItem={setItem} />
+        </div>
+        <DocMarkdown>{item.type.description ?? null}</DocMarkdown>
+      </>
+    );
+  }
+
+  return <div className={classNames(className, "w-full min-w-0")}>{child}</div>;
+}
+
+function GqlTypeLink({
+  item,
+  setItem,
+  color,
+  children,
+  leftSlot,
+  rightSlot,
+  onNavigate,
+  className,
+  noTruncate,
+}: {
+  item: ExplorerItem;
+  color?: Color;
+  setItem: (item: ExplorerItem) => void;
+  onNavigate?: () => void;
+  children?: ReactNode;
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
+  className?: string;
+  noTruncate?: boolean;
+}) {
+  if (item?.kind === "type" && isListType(item.type)) {
+    return (
+      <span className="font-mono text-editor">
+        <span className="text-text-subtle">[</span>
+        <GqlTypeLink
+          item={{ ...item, type: item.type.ofType }}
+          setItem={setItem}
+          color={color}
+          leftSlot={leftSlot}
+          rightSlot={rightSlot}
+        >
+          {children}
+        </GqlTypeLink>
+        <span className="text-text-subtle">]</span>
+      </span>
+    );
+  }
+  if (item?.kind === "type" && isNonNullType(item.type)) {
+    return (
+      <span className="font-mono text-editor">
+        <GqlTypeLink
+          item={{ ...item, type: item.type.ofType }}
+          setItem={setItem}
+          color={color}
+          leftSlot={leftSlot}
+          rightSlot={rightSlot}
+        >
+          {children}
+        </GqlTypeLink>
+        <span className="text-text-subtle">!</span>
+      </span>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={classNames(
+        className,
+        "hover:underline text-left mr-auto gap-2 max-w-full",
+        "inline-flex items-center",
+        "font-mono text-editor",
+        !noTruncate && "truncate",
+        color === "danger" && "text-danger",
+        color === "primary" && "text-primary",
+        color === "success" && "text-success",
+        color === "warning" && "text-warning",
+        color === "notice" && "text-notice",
+        color === "info" && "text-info",
+      )}
+      onClick={() => {
+        setItem(item);
+        onNavigate?.();
+      }}
+    >
+      {leftSlot}
+      <GqlTypeLabel item={item} noTruncate={noTruncate}>
+        {children}
+      </GqlTypeLabel>
+      {rightSlot}
+    </button>
+  );
+}
+
+function GqlTypeLabel({
+  item,
+  children,
+  className,
+  noTruncate,
+}: {
+  item: ExplorerItem;
+  children?: ReactNode;
+  className?: string;
+  noTruncate?: boolean;
+}) {
+  let inner: ReactNode;
+  if (children) {
+    inner = children;
+  } else if (item == null) {
+    inner = "Root";
+  } else if (item.kind === "field") {
+    inner = item.type.name + (item.type.args.length > 0 ? "(…)" : "");
+  } else if ("name" in item.type) {
+    inner = item.type.name;
+  } else {
+    console.error("Unknown item type", item);
+    inner = "UNKNOWN";
+  }
+
+  return <span className={classNames(className, !noTruncate && "truncate")}>{inner}</span>;
+}
+
+function Subheading({ children, count }: { children: ReactNode; count?: number }) {
+  return (
+    <h2 className="font-bold text-lg mt-6 flex items-center">
+      <div className="truncate min-w-0">{children}</div>
+      {count && <CountBadge count={count} />}
+    </h2>
+  );
+}
+
+interface SearchResult {
+  name: string;
+  // oxlint-disable-next-line no-explicit-any -- none
+  type: GraphQLNamedType | GraphQLField<any, any> | GraphQLInputField;
+  score: number;
+  from: GraphQLNamedType | null;
+  depth: string[];
+}
+
+function GqlSchemaSearch({
+  schema,
+  currentItem,
+  setItem,
+  className,
+  maxHeight,
+}: {
+  currentItem: ExplorerItem | null;
+  schema: GraphQLSchema;
+  setItem: (t: ExplorerItem) => void;
+  className?: string;
+  maxHeight: number;
+}) {
+  const [activeResult, setActiveResult] = useStateWithDeps<SearchResult | null>(null, [
+    currentItem,
+  ]);
+  const [focused, setOpen] = useState<boolean>(false);
+  const [value, setValue] = useState<string>("");
+  const debouncedValue = useDebouncedValue(value, 300);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const canSearch =
+    currentItem == null ||
+    (isNamedType(currentItem.type) &&
+      !isEnumType(currentItem.type) &&
+      !isScalarType(currentItem.type));
+
+  const results = useMemo(() => {
+    const results: SearchResult[] = [];
+    walkTypeGraph(schema, currentItem?.type ?? null, (type, from, depth) => {
+      if (type === currentItem?.type) {
+        return true; // Skip the current type and continue
+      }
+
+      const match = fuzzyMatch(type.name, debouncedValue);
+      if (match == null) {
+        // Do nothing
+      } else {
+        results.push({ name: type.name, type, score: match.score, from, depth });
+      }
+      return true;
+    });
+    results.sort((a, b) => {
+      if (value === "") {
+        if (a.name.startsWith("_") && !b.name.startsWith("_")) {
+          // Always sort __<NAME> types to the end when there is no query
+          return 1;
+        }
+        if (a.depth.length !== b.depth.length) {
+          return a.depth.length - b.depth.length;
+        }
+        return a.name.localeCompare(b.name);
+      }
+      if (a.depth.length !== b.depth.length) {
+        return a.depth.length - b.depth.length;
+      }
+      if (a.score === 0 && b.score === 0) {
+        return a.name.localeCompare(b.name);
+      }
+      if (a.score === b.score && a.name.length === b.name.length) {
+        return a.name.localeCompare(b.name);
+      }
+      if (a.score === b.score) {
+        return a.name.length - b.type.name.length;
+      }
+      return b.score - a.score;
+    });
+    return results.slice(0, 100);
+  }, [currentItem, schema, debouncedValue, value]);
+
+  const activeIndex = useMemo(() => {
+    const index = (activeResult ? results.indexOf(activeResult) : 0) ?? 0;
+    return index === -1 ? 0 : index;
+  }, [activeResult, results]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  useClickOutside(menuRef, () => setOpen(false));
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "ArrowDown" || (e.ctrlKey && e.key === "n")) {
+        e.preventDefault();
+        const next = results[activeIndex + 1] ?? results[results.length - 1] ?? null;
+        setActiveResult(next);
+      } else if (e.key === "ArrowUp" || (e.ctrlKey && e.key === "k")) {
+        e.preventDefault();
+        const prev = results[activeIndex - 1] ?? results[0] ?? null;
+        setActiveResult(prev);
+      } else if (e.key === "Escape") {
+        inputRef.current?.blur();
+      } else if (e.key === "Enter") {
+        const result = activeResult ?? results[0] ?? null;
+        if (result) {
+          setItem(toExplorerItem(result?.type, currentItem));
+          inputRef.current?.blur();
+        }
+      }
+    },
+    [results, activeIndex, setActiveResult, activeResult, setItem, currentItem],
+  );
+
+  if (!canSearch) return <span />;
+
+  return (
+    <div
+      className={classNames(
+        className,
+        "relative flex items-center bg-surface z-20 min-w-0",
+        !focused && "max-w-24 ml-auto",
+        focused && "absolute! top-0 left-1.5 right-1.5 bottom-0 pt-1.5",
+      )}
+    >
+      <PlainInput
+        ref={inputRef}
+        size="sm"
+        label="search"
+        hideLabel
+        defaultValue={value}
+        placeholder={
+          focused
+            ? `Search ${currentItem != null && "name" in currentItem.type ? currentItem.type.name : "Schema"}`
+            : "Search"
+        }
+        leftSlot={
+          <div className="w-10 flex justify-center items-center">
+            <Icon size="sm" icon="search" color="secondary" />
+          </div>
+        }
+        onChange={setValue}
+        onKeyDownCapture={handleKeyDown}
+        onFocus={() => {
+          setOpen(true);
+        }}
+      />
+      <div
+        ref={menuRef}
+        style={{ maxHeight: maxHeight - 60 }}
+        className={classNames(
+          "x-theme-menu absolute z-10 mt-0.5 p-1.5 top-full right-0 bg-surface",
+          "border border-border rounded-lg overflow-y-auto w-full shadow-lg",
+          !focused && "hidden",
+        )}
+      >
+        {results.length === 0 && (
+          <SearchResult isActive={false} className="text-text-subtle">
+            No results found
+          </SearchResult>
+        )}
+        {results.map((r, i) => {
+          const item = toExplorerItem(r.type, currentItem);
+          if (item === currentItem) return null;
+          return (
+            <SearchResult
+              key={`${i}::${r.type.name}`}
+              onMouseDown={() => {
+                setItem(item);
+                setOpen(false);
+              }}
+              onMouseEnter={() => setActiveResult(r)}
+              isActive={i === activeIndex}
+            >
+              {r.from !== currentItem?.type && r.from != null && (
+                <>
+                  <GqlTypeLabel
+                    item={toExplorerItem(r.from, currentItem)}
+                    className="text-text-subtle"
+                  />
+                  .
+                </>
+              )}
+              <GqlTypeLabel item={item} className="text-text" />
+            </SearchResult>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function SearchResult({
+  isActive,
+  className,
+  ...extraProps
+}: {
+  isActive: boolean;
+  children: ReactNode;
+} & HTMLAttributes<HTMLButtonElement>) {
+  const initRef = useCallback(
+    (el: HTMLButtonElement | null) => {
+      if (el === null) return;
+      if (isActive) {
+        el.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
+      }
+    },
+    [isActive],
+  );
+  return (
+    <button
+      ref={initRef}
+      className={classNames(
+        className,
+        "px-3 truncate w-full text-left h-sm rounded-sm text-editor font-mono",
+        isActive && "bg-surface-highlight",
+      )}
+      {...extraProps}
+    />
+  );
+}
+
+function Heading({ children }: { children: ReactNode }) {
+  return <h1 className="font-bold text-2xl truncate">{children}</h1>;
+}
+
+function DocMarkdown({ children, className }: { children: string | null; className?: string }) {
+  return (
+    <Markdown className={classNames(className, "text-text-subtle! italic")}>{children}</Markdown>
+  );
+}
+
+function walkTypeGraph(
+  schema: GraphQLSchema,
+  // oxlint-disable-next-line no-explicit-any -- none
+  start: GraphQLType | GraphQLField<any, any> | GraphQLInputField | null,
+  cb: (
+    // oxlint-disable-next-line no-explicit-any -- none
+    type: GraphQLNamedType | GraphQLField<any, any> | GraphQLInputField,
+    from: GraphQLNamedType | null,
+    path: string[],
+  ) => boolean,
+) {
+  const visited = new Set<string>();
+  const queue: Array<{
+    // oxlint-disable-next-line no-explicit-any -- none
+    current: GraphQLType | GraphQLField<any, any> | GraphQLInputField;
+    from: GraphQLNamedType | null;
+    path: string[];
+  }> = [];
+
+  const initial = start
+    ? [start]
+    : [
+        ...Object.values(schema.getTypeMap()),
+        schema.getQueryType(),
+        schema.getMutationType(),
+        schema.getSubscriptionType(),
+      ].filter((t) => t != null);
+
+  for (const type of initial) {
+    queue.push({ current: type, from: null, path: [] });
+  }
+
+  while (queue.length > 0) {
+    // oxlint-disable-next-line no-non-null-assertion -- none
+    const { current, from, path } = queue.shift()!;
+    if (!isNamedType(current)) continue;
+
+    const name = current.name;
+    if (visited.has(name)) continue;
+    visited.add(name);
+
+    const cont = cb(current, from, path);
+    if (!cont) break;
+
+    if (isObjectType(current) || isInterfaceType(current)) {
+      for (const field of Object.values(current.getFields())) {
+        cb(field, current, [...path, current.name]);
+
+        const fieldType = getNamedType(field.type);
+        const next = schema.getType(fieldType.name);
+        if (next && !visited.has(fieldType.name)) {
+          queue.push({
+            current: next,
+            from: current,
+            path: [...path, current.name, field.name],
+          });
+        }
+      }
+    } else if (isInputObjectType(current)) {
+      for (const inputField of Object.values(current.getFields())) {
+        cb(inputField, current, [...path, current.name]);
+
+        const fieldType = getNamedType(inputField.type);
+        const next = schema.getType(fieldType.name);
+        if (next && !visited.has(fieldType.name)) {
+          queue.push({
+            current: next,
+            from: current,
+            path: [...path, current.name, inputField.name],
+          });
+        }
+      }
+    } else if (isUnionType(current)) {
+      for (const subtype of current.getTypes()) {
+        if (!visited.has(subtype.name)) {
+          queue.push({
+            current: subtype,
+            from: current,
+            path: [...path, current.name, subtype.name],
+          });
+        }
+      }
+    }
+  }
+}
+
+// oxlint-disable-next-line no-explicit-any -- none
+function toExplorerItem(t: any, from: ExplorerItem | null): ExplorerItem | null {
+  if (t == null) return null;
+
+  // GraphQLField-like: has `args` (array) and `type`
+  if (typeof t === "object" && Array.isArray(t.args) && t.type) {
+    return { kind: "field", type: t, from };
+  }
+
+  // GraphQLInputField-like: has `type`, no `args`, maybe `defaultValue`, and no `resolve`
+  if (
+    typeof t === "object" &&
+    t.type &&
+    !("args" in t) &&
+    !("resolve" in t) &&
+    ("defaultValue" in t || "description" in t)
+  ) {
+    return { kind: "input_field", type: t, from };
+  }
+
+  // Fallback: treat as GraphQLNamedType (object, scalar, enum, etc.)
+  return { kind: "type", type: t, from };
+}
diff --git a/apps/yaak-client/components/graphql/GraphQLEditor.tsx b/apps/yaak-client/components/graphql/GraphQLEditor.tsx
new file mode 100644
index 0000000..a7adabd
--- /dev/null
+++ b/apps/yaak-client/components/graphql/GraphQLEditor.tsx
@@ -0,0 +1,434 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import { platform } from "@yaakapp-internal/platform";
+
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useMemo } from "react";
+import { useLocalStorage } from "react-use";
+import { useIntrospectGraphQL } from "../../hooks/useIntrospectGraphQL";
+import { useStateWithDeps } from "../../hooks/useStateWithDeps";
+import { showDialog } from "../../lib/dialog";
+import { Button } from "../core/Button";
+import type { DropdownItem } from "../core/Dropdown";
+import { Dropdown } from "../core/Dropdown";
+import type { EditorProps } from "../core/Editor/Editor";
+import { Editor } from "../core/Editor/LazyEditor";
+import { IconButton } from "../core/IconButton";
+import type { RadioDropdownItem } from "../core/RadioDropdown";
+import { RadioDropdown } from "../core/RadioDropdown";
+import { Banner, FormattedError, Icon } from "@yaakapp-internal/ui";
+import { Separator } from "../core/Separator";
+import { tryFormatGraphql } from "../../lib/formatters";
+import { parseGraphQLOperationNames } from "../../lib/graphqlOperationNames";
+import { normalizeGraphQLBody } from "../../lib/requestBodyConversion";
+import { revealInFinderText } from "../../lib/reveal";
+import { showGraphQLDocExplorerAtom } from "./graphqlAtoms";
+
+type Props = Pick<EditorProps, "heightMode" | "className" | "forceUpdateKey"> & {
+  baseRequest: HttpRequest;
+  onChange: (body: HttpRequest["body"]) => void;
+  request: HttpRequest;
+};
+
+const OPERATION_NAME_NOT_SPECIFIED = "";
+
+// How much of the end of a schema filename is pinned when middle-truncating it.
+// Enough to keep the extension and a little of the name before it.
+const FILE_NAME_TAIL_CHARS = 12;
+
+export function GraphQLEditor(props: Props) {
+  // There's some weirdness with stale onChange being called when switching requests, so we'll
+  // key on the request ID as a workaround for now.
+  return <GraphQLEditorInner key={props.request.id} {...props} />;
+}
+
+function GraphQLEditorInner({ request, onChange, baseRequest, ...extraEditorProps }: Props) {
+  const [autoIntrospectDisabled, setAutoIntrospectDisabled] = useLocalStorage<
+    Record<string, boolean>
+  >("graphQLAutoIntrospectDisabled", {});
+  const {
+    schema,
+    isLoading,
+    error,
+    refetch,
+    clear,
+    loadFromFile,
+    reloadFromFile,
+    removeSchemaFile,
+    filePath,
+  } = useIntrospectGraphQL(baseRequest, {
+    disabled: autoIntrospectDisabled?.[baseRequest.id],
+  });
+
+  // Last path segment, for display only. The host owns real path semantics; this
+  // just needs something short enough to label the divider with.
+  const fileName = useMemo(() => filePath?.split(/[/\\]/).pop() || filePath, [filePath]);
+
+  // Selecting a file is all it takes — the request's source becomes that file,
+  // which is what keeps automatic introspection from overwriting it.
+  const handleLoadFromFile = useCallback(async () => {
+    const selected = await platform.dialog.open({
+      title: "Load GraphQL Schema",
+      multiple: false,
+      filters: [
+        {
+          name: "GraphQL Schema",
+          extensions: ["graphql", "graphqls", "gql", "json"],
+        },
+      ],
+    });
+    if (selected == null) return;
+
+    await loadFromFile(selected);
+  }, [loadFromFile]);
+  const [currentBody, setCurrentBody] = useStateWithDeps<{
+    query: string;
+    variables: string | undefined;
+    operationName?: string;
+  }>(() => {
+    // Migrate text bodies to GraphQL format
+    // NOTE: This is how GraphQL used to be stored
+    return normalizeGraphQLBody(request.body);
+  }, [extraEditorProps.forceUpdateKey]);
+
+  const [isDocOpenRecord, setGraphqlDocStateAtomValue] = useAtom(showGraphQLDocExplorerAtom);
+  const isDocOpen = isDocOpenRecord[request.id] !== undefined;
+  const parsedOperationNames = useMemo(
+    () => parseGraphQLOperationNames(currentBody.query),
+    [currentBody.query],
+  );
+  const operationNames = useMemo(() => parsedOperationNames ?? [], [parsedOperationNames]);
+
+  const handleChangeQuery = useCallback(
+    (query: string) => {
+      setCurrentBody(({ variables, operationName }) => {
+        const newBody = buildGraphQLBody({ query, variables, operationName });
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
+
+  const handleChangeVariables = useCallback(
+    (variables: string) => {
+      setCurrentBody(({ query, operationName }) => {
+        const newBody = buildGraphQLBody({ query, variables, operationName });
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
+
+  const handleChangeOperationName = useCallback(
+    (operationName: string) => {
+      setCurrentBody(({ query, variables }) => {
+        const newBody = buildGraphQLBody({ query, variables, operationName });
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
+
+  useEffect(() => {
+    if (parsedOperationNames == null) {
+      return;
+    }
+
+    if (currentBody.operationName === OPERATION_NAME_NOT_SPECIFIED) {
+      return;
+    }
+
+    if (currentBody.operationName && operationNames.includes(currentBody.operationName)) {
+      return;
+    }
+
+    // Keep the saved body aligned with the visible default, so send/copy use the selected operation.
+    const operationName = operationNames[0];
+    if (currentBody.operationName === operationName) {
+      return;
+    }
+
+    setCurrentBody(({ query, variables }) => {
+      const newBody = buildGraphQLBody({ query, variables, operationName });
+      onChange(newBody);
+      return newBody;
+    });
+  }, [
+    currentBody.operationName,
+    onChange,
+    operationNames,
+    parsedOperationNames,
+    setCurrentBody,
+  ]);
+
+  const actions = useMemo<EditorProps["actions"]>(
+    () => [
+      operationNames.length > 0 ? (
+        <div key="operation" className="opacity-100!">
+          <RadioDropdown
+            value={currentBody.operationName ?? operationNames[0] ?? OPERATION_NAME_NOT_SPECIFIED}
+            onChange={handleChangeOperationName}
+            items={[
+              { type: "separator", label: "Operation Name" },
+              {
+                label: <span className="text-text-subtle italic">Not specified</span>,
+                value: OPERATION_NAME_NOT_SPECIFIED,
+              },
+              ...operationNames.map((operationName) => ({
+                label: operationName,
+                value: operationName,
+              })),
+            ] satisfies RadioDropdownItem<string>[]}
+          >
+            <Button size="sm" variant="border" title="Select Operation" forDropdown>
+              {currentBody.operationName === OPERATION_NAME_NOT_SPECIFIED ? (
+                <span className="text-text-subtle italic">Not specified</span>
+              ) : (
+                currentBody.operationName ?? operationNames[0]
+              )}
+            </Button>
+          </RadioDropdown>
+        </div>
+      ) : null,
+      <div key="introspection" className="opacity-100!">
+        {schema === undefined ? null /* Initializing */ : (
+          <Dropdown
+            items={[
+              ...((schema != null
+                ? [
+                    {
+                      label: "Clear Schema",
+                      onSelect: clear,
+                      color: "danger",
+                      leftSlot: <Icon icon="trash" />,
+                    },
+                  ]
+                : []) satisfies DropdownItem[]),
+              {
+                // Labels the source actions below it, so the menu says where the
+                // schema came from without spending a row on it.
+                type: "separator",
+                hidden: schema == null && filePath == null,
+                label:
+                  fileName == null || filePath == null ? undefined : (
+                    // Middle truncation: the head shrinks and ellipsizes while the
+                    // tail is pinned, so the extension always survives. Full path
+                    // on hover.
+                    <div className="flex min-w-0 max-w-[16rem] font-mono text-xs" title={filePath}>
+                      <span className="truncate">{fileName.slice(0, -FILE_NAME_TAIL_CHARS)}</span>
+                      <span className="shrink-0">{fileName.slice(-FILE_NAME_TAIL_CHARS)}</span>
+                    </div>
+                  ),
+                action:
+                  filePath == null
+                    ? undefined
+                    : {
+                        icon: "folder_symlink",
+                        title: revealInFinderText,
+                        onClick: () => platform.revealItemInDir(filePath),
+                      },
+              },
+              {
+                hidden: !error,
+                label: (
+                  <Banner color="danger">
+                    <p className="mb-1">Schema introspection failed</p>
+                    <Button
+                      size="xs"
+                      color="danger"
+                      variant="border"
+                      onClick={() => {
+                        showDialog({
+                          title: "Introspection Failed",
+                          size: "sm",
+                          id: "introspection-failed",
+                          render: ({ hide }) => (
+                            <>
+                              <FormattedError>{error ?? "unknown"}</FormattedError>
+                              <div className="w-full my-4">
+                                <Button
+                                  onClick={async () => {
+                                    hide();
+                                    await refetch();
+                                  }}
+                                  className="ml-auto"
+                                  color="primary"
+                                  size="sm"
+                                >
+                                  Retry Request
+                                </Button>
+                              </div>
+                            </>
+                          ),
+                        });
+                      }}
+                    >
+                      View Error
+                    </Button>
+                  </Banner>
+                ),
+                type: "content",
+              },
+              {
+                // One refresh action for either source: re-read the file, or
+                // re-introspect the server.
+                label: "Reload Schema",
+                leftSlot: <Icon icon="refresh" spin={isLoading} />,
+                keepOpenOnSelect: true,
+                // Failures surface through the hook's error state either way.
+                onSelect: async () => {
+                  if (filePath != null) await reloadFromFile();
+                  else await refetch();
+                },
+              },
+              {
+                label: filePath == null ? "Load Schema from File…" : "Load a Different File…",
+                leftSlot: <Icon icon="import" />,
+                onSelect: handleLoadFromFile,
+              },
+              {
+                hidden: filePath == null,
+                label: "Stop Using File",
+                leftSlot: <Icon icon="x" />,
+                onSelect: removeSchemaFile,
+              },
+              { type: "separator", label: "Settings" },
+              {
+                // Governs both sources: re-introspecting the server, and
+                // re-reading the file when the request is opened.
+                label: filePath == null ? "Automatic Introspection" : "Automatic Reload",
+                keepOpenOnSelect: true,
+                onSelect: () => {
+                  setAutoIntrospectDisabled({
+                    ...autoIntrospectDisabled,
+                    [baseRequest.id]: !autoIntrospectDisabled?.[baseRequest.id],
+                  });
+                },
+                leftSlot: (
+                  <Icon
+                    icon={
+                      autoIntrospectDisabled?.[baseRequest.id]
+                        ? "check_square_unchecked"
+                        : "check_square_checked"
+                    }
+                  />
+                ),
+              },
+            ]}
+          >
+            <Button
+              size="sm"
+              variant="border"
+              title="Refetch Schema"
+              isLoading={isLoading}
+              color={error ? "danger" : "default"}
+              forDropdown
+            >
+              {error ? "Introspection Failed" : schema ? "Schema" : "No Schema"}
+            </Button>
+          </Dropdown>
+        )}
+      </div>,
+      // Sits after the schema control it depends on. Always rendered, disabled
+      // without a schema, so the row never changes shape.
+      <div key="documentation" className="opacity-100!">
+          <IconButton
+            size="sm"
+            variant="border"
+            icon="book_open_text"
+            disabled={schema == null}
+            title={
+              schema == null
+                ? "Documentation unavailable without a schema"
+                : isDocOpen
+                  ? "Hide Documentation"
+                  : "Show Documentation"
+            }
+            onClick={() => {
+              setGraphqlDocStateAtomValue((v) => ({
+                ...v,
+                [request.id]: isDocOpen ? undefined : null,
+              }));
+            }}
+          />
+      </div>,
+    ],
+    [
+      schema,
+      clear,
+      error,
+      currentBody.operationName,
+      handleChangeOperationName,
+      isDocOpen,
+      isLoading,
+      operationNames,
+      refetch,
+      handleLoadFromFile,
+      reloadFromFile,
+      removeSchemaFile,
+      filePath,
+      fileName,
+      autoIntrospectDisabled,
+      baseRequest.id,
+      setGraphqlDocStateAtomValue,
+      request.id,
+      setAutoIntrospectDisabled,
+    ],
+  );
+
+  return (
+    <div className="h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto]">
+      <Editor
+        language="graphql"
+        heightMode="auto"
+        graphQLSchema={schema}
+        format={tryFormatGraphql}
+        defaultValue={currentBody.query}
+        onChange={handleChangeQuery}
+        placeholder="..."
+        actions={actions}
+        stateKey={`graphql_body.${request.id}`}
+        {...extraEditorProps}
+      />
+      <div className="grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 min-h-20">
+        <Separator dashed className="pb-1">
+          Variables
+        </Separator>
+        <Editor
+          language="json"
+          heightMode="auto"
+          defaultValue={currentBody.variables}
+          onChange={handleChangeVariables}
+          placeholder="{}"
+          stateKey={`graphql_vars.${request.id}`}
+          autocompleteFunctions
+          autocompleteVariables
+          {...extraEditorProps}
+        />
+      </div>
+    </div>
+  );
+}
+
+function buildGraphQLBody(body: {
+  query: string;
+  variables: string | undefined;
+  operationName?: string;
+}) {
+  const result: {
+    query: string;
+    variables: string | undefined;
+    operationName?: string;
+  } = {
+    query: body.query,
+    variables: body.variables || undefined,
+  };
+
+  if (typeof body.operationName === "string") {
+    result.operationName = body.operationName;
+  }
+
+  return result;
+}
diff --git a/apps/yaak-client/components/graphql/graphqlAtoms.ts b/apps/yaak-client/components/graphql/graphqlAtoms.ts
new file mode 100644
index 0000000..010f027
--- /dev/null
+++ b/apps/yaak-client/components/graphql/graphqlAtoms.ts
@@ -0,0 +1,14 @@
+import { atomWithKVStorage } from "../../lib/atoms/atomWithKVStorage";
+
+export const showGraphQLDocExplorerAtom = atomWithKVStorage<
+  Record<
+    string,
+    | {
+        type?: string;
+        field?: string;
+        parentType?: string;
+      }
+    | null
+    | undefined
+  >
+>("show_graphql_docs", {});
diff --git a/apps/yaak-client/components/responseViewers/AudioViewer.tsx b/apps/yaak-client/components/responseViewers/AudioViewer.tsx
new file mode 100644
index 0000000..f72f9fe
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/AudioViewer.tsx
@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+interface Props {
+  /** A URL for the body the host already stored. */
+  bodyUrl?: string;
+  data?: Uint8Array;
+  mimeType?: string;
+}
+
+export function AudioViewer({ bodyUrl, data, mimeType }: Props) {
+  const [src, setSrc] = useState<string>();
+
+  useEffect(() => {
+    if (bodyUrl) {
+      setSrc(bodyUrl);
+    } else if (data) {
+      // The type matters here in a way it doesn't for an image: a media element goes by what
+      // the blob declares rather than sniffing it, so an Ogg labelled as MP3 won't play
+      const blob = new Blob([new Uint8Array(data)], { type: mimeType ?? "audio/mpeg" });
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
+    } else {
+      setSrc(undefined);
+    }
+  }, [bodyUrl, data, mimeType]);
+
+  // oxlint-disable-next-line jsx-a11y/media-has-caption
+  return <audio className="w-full" controls src={src} />;
+}
diff --git a/apps/yaak-client/components/responseViewers/BinaryViewer.tsx b/apps/yaak-client/components/responseViewers/BinaryViewer.tsx
new file mode 100644
index 0000000..6815c63
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/BinaryViewer.tsx
@@ -0,0 +1,37 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { useSaveResponse } from "../../hooks/useSaveResponse";
+import { getContentTypeFromHeaders } from "../../lib/model_util";
+import { Button } from "../core/Button";
+import { Banner, InlineCode, LoadingIcon } from "@yaakapp-internal/ui";
+import { EmptyStateText } from "../EmptyStateText";
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function BinaryViewer({ response }: Props) {
+  const saveResponse = useSaveResponse(response);
+  const contentType = getContentTypeFromHeaders(response.headers) ?? "unknown";
+
+  // Wait until the response has been fully-downloaded
+  if (response.state !== "closed") {
+    return (
+      <EmptyStateText>
+        <LoadingIcon size="sm" />
+      </EmptyStateText>
+    );
+  }
+
+  return (
+    <Banner color="primary" className="h-full flex flex-col gap-3">
+      <p>
+        Content type <InlineCode>{contentType}</InlineCode> cannot be previewed
+      </p>
+      <div>
+        <Button variant="border" size="sm" onClick={() => saveResponse.mutate()}>
+          Save to File
+        </Button>
+      </div>
+    </Banner>
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/CsvViewer.test.tsx b/apps/yaak-client/components/responseViewers/CsvViewer.test.tsx
new file mode 100644
index 0000000..e3df58c
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/CsvViewer.test.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, test, vi } from "vite-plus/test";
+import { CsvViewerInner } from "./CsvViewer";
+
+vi.mock("@yaakapp-internal/ui", () => ({
+  Table: ({ children }: { children: ReactNode }) => <table>{children}</table>,
+  TableBody: ({ children }: { children: ReactNode }) => <tbody>{children}</tbody>,
+  TableCell: ({ children }: { children: ReactNode }) => <td>{children}</td>,
+  TableHead: ({ children }: { children: ReactNode }) => <thead>{children}</thead>,
+  TableHeaderCell: ({ children }: { children: ReactNode }) => <th>{children}</th>,
+  TableRow: ({ children }: { children: ReactNode }) => <tr>{children}</tr>,
+}));
+
+describe("CsvViewer", () => {
+  test("renders columns that extend beyond the first row", () => {
+    const markup = renderToStaticMarkup(
+      <CsvViewerInner
+        text={[
+          "startDate,2026-02-03T00:00-03:00",
+          "endDate,2026-02-03T23:59:59-03:00",
+          "id,Fecha de inicio,Nombre,Estado,Perfil de puesto,ID de sucursal,Sucursal,Fecha de fin,ID de usuario",
+          "391118210,2026-02-03 12:58:55,atencion1,Disponible,ATD,3549,sucursal,2026-02-03 12:59:08,42041",
+        ].join("\n")}
+      />,
+    );
+
+    expect(markup).toContain("ID de usuario");
+    expect(markup).toContain("42041");
+    expect(markup.match(/<td>/g)).toHaveLength(20);
+  });
+});
diff --git a/apps/yaak-client/components/responseViewers/CsvViewer.tsx b/apps/yaak-client/components/responseViewers/CsvViewer.tsx
new file mode 100644
index 0000000..f318a43
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/CsvViewer.tsx
@@ -0,0 +1,63 @@
+import classNames from "classnames";
+import Papa from "papaparse";
+import { useMemo } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "@yaakapp-internal/ui";
+
+interface Props {
+  text: string | null;
+  className?: string;
+}
+
+export function CsvViewer({ text, className }: Props) {
+  return (
+    <div className="overflow-auto h-full">
+      <CsvViewerInner text={text} className={className} />
+    </div>
+  );
+}
+
+export function CsvViewerInner({ text, className }: { text: string | null; className?: string }) {
+  const parsed = useMemo(() => {
+    if (text == null) return null;
+    return Papa.parse<string[]>(text, { skipEmptyLines: true });
+  }, [text]);
+
+  if (parsed === null) return null;
+
+  const header = parsed.data[0] ?? [];
+  const rows = parsed.data.slice(1);
+  const columnCount = parsed.data.reduce((count, row) => Math.max(count, row.length), 0);
+  const columnIndexes = Array.from({ length: columnCount }, (_, index) => index);
+
+  return (
+    <div className="overflow-auto h-full">
+      <Table className={classNames(className, "text-sm")}>
+        <TableHead>
+          <TableRow>
+            {columnIndexes.map((columnIndex) => (
+              <TableHeaderCell key={columnIndex}>{header[columnIndex] ?? ""}</TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, i) => (
+            // oxlint-disable-next-line react/no-array-index-key
+            <TableRow key={i}>
+              {row.map((cell, columnIndex) => (
+                // oxlint-disable-next-line react/no-array-index-key
+                <TableCell key={columnIndex}>{cell}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/EventStreamViewer.tsx b/apps/yaak-client/components/responseViewers/EventStreamViewer.tsx
new file mode 100644
index 0000000..bd563a6
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/EventStreamViewer.tsx
@@ -0,0 +1,428 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { extractSseValueAtPath, type ServerSentEvent } from "@yaakapp-internal/sse";
+import { HStack, Icon, InlineCode, SplitLayout, VStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { CSSProperties, ReactNode } from "react";
+import { Fragment, useMemo, useState } from "react";
+import { useKeyValue } from "../../hooks/useKeyValue";
+import { useFormatText } from "../../hooks/useFormatText";
+import { useResponseBodyEventSource } from "../../hooks/useResponseBodyEventSource";
+import { useResponseBodySseSummary } from "../../hooks/useResponseBodySseSummary";
+import {
+  sseSummaryResultKeyPathAutocomplete,
+  useSseSummaryResultKeyPath,
+} from "../../hooks/useSseSummaryResultKeyPath";
+import { isJSON } from "../../lib/contentType";
+import { EmptyStateText } from "../EmptyStateText";
+import { Markdown } from "../Markdown";
+import { Button } from "../core/Button";
+import type { DropdownItem } from "../core/Dropdown";
+import { Dropdown } from "../core/Dropdown";
+import type { EditorProps } from "../core/Editor/Editor";
+import { Editor } from "../core/Editor/LazyEditor";
+import { EventDetailHeader, EventViewer } from "../core/EventViewer";
+import { EventViewerRow } from "../core/EventViewerRow";
+import { IconButton } from "../core/IconButton";
+import { IconTooltip } from "../core/IconTooltip";
+import { Input } from "../core/Input";
+import { Select } from "../core/Select";
+
+interface Props {
+  response: HttpResponse;
+}
+
+const DEFAULT_EXTRACTED_TEXT_RATIO = 0.28;
+
+export function EventStreamViewer({ response }: Props) {
+  return (
+    <Fragment
+      key={response.id} // force a refresh when the response changes
+    >
+      <ActualEventStreamViewer response={response} />
+    </Fragment>
+  );
+}
+
+function ActualEventStreamViewer({ response }: Props) {
+  const [showLarge, setShowLarge] = useState<boolean>(false);
+  const [showingLarge, setShowingLarge] = useState<boolean>(false);
+  const filterEventPreviewsSetting = useKeyValue<boolean>({
+    namespace: "no_sync",
+    key: ["sse_filter_event_previews", response.requestId],
+    fallback: false,
+  });
+  const applyToDetailsSetting = useKeyValue<boolean>({
+    namespace: "no_sync",
+    key: ["sse_apply_to_details", response.requestId],
+    fallback: false,
+  });
+  const renderMarkdownSetting = useKeyValue<boolean>({
+    namespace: "no_sync",
+    key: ["sse_render_markdown", response.requestId],
+    fallback: false,
+  });
+  const summarySettings = useSseSummaryResultKeyPath({ response });
+  const events = useResponseBodyEventSource(response);
+  const summary = useResponseBodySseSummary(response, summarySettings.resultKeyPath);
+  const showExtractedText = summarySettings.resultKeyPath != null;
+  const showResultKeyPathWarning =
+    showExtractedText &&
+    summary.data != null &&
+    summary.data.fragmentCount === 0 &&
+    !summary.isFetching &&
+    summary.error == null;
+
+  const filterEventPreviews = showExtractedText && filterEventPreviewsSetting.value === true;
+  const applyToDetails = showExtractedText && applyToDetailsSetting.value === true;
+  const renderMarkdown = showExtractedText && renderMarkdownSetting.value === true;
+  const settingsItems = useMemo<DropdownItem[]>(
+    () => [
+      {
+        label: "Apply to Previews",
+        keepOpenOnSelect: true,
+        onSelect: () => filterEventPreviewsSetting.set(filterEventPreviewsSetting.value !== true),
+        leftSlot: (
+          <Icon
+            icon={
+              filterEventPreviewsSetting.value === true
+                ? "check_square_checked"
+                : "check_square_unchecked"
+            }
+          />
+        ),
+      },
+      {
+        label: "Apply to Details",
+        keepOpenOnSelect: true,
+        onSelect: () => applyToDetailsSetting.set(applyToDetailsSetting.value !== true),
+        leftSlot: (
+          <Icon
+            icon={
+              applyToDetailsSetting.value === true
+                ? "check_square_checked"
+                : "check_square_unchecked"
+            }
+          />
+        ),
+      },
+    ],
+    [
+      applyToDetailsSetting,
+      filterEventPreviewsSetting,
+    ],
+  );
+
+  return (
+    <div className="h-full min-h-0 grid grid-rows-[auto_minmax(0,1fr)]">
+      <HStack space={2} alignItems="center" className="pt-1 pb-1 border-b border-border-subtle">
+        <div className={classNames(summarySettings.enabled ? "w-44 shrink-0" : "min-w-40 flex-1")}>
+          <Select
+            name={`sse-summary-result-key-path-enabled::${response.requestId}`}
+            label="Extracted text"
+            hideLabel
+            size="xs"
+            value={summarySettings.enabled ? "jsonpath" : "off"}
+            options={[
+              { label: "Full events", value: "off" },
+              { label: "JSONPath", value: "jsonpath" },
+            ]}
+            onChange={(value) => summarySettings.setEnabled(value === "jsonpath")}
+          />
+        </div>
+        {summarySettings.enabled && (
+          <>
+            <div className="min-w-40 flex-1">
+              <Input
+                label="Result JSON path"
+                hideLabel
+                size="xs"
+                autocomplete={sseSummaryResultKeyPathAutocomplete}
+                defaultValue={summarySettings.resultKeyPathInputValue}
+                forceUpdateKey={`${response.requestId}:${summarySettings.inferredResultKeyPath ?? ""}`}
+                placeholder="$.choices[0].delta.content"
+                rightSlot={
+                  showResultKeyPathWarning ? (
+                    <div className="flex items-center px-2">
+                      <IconTooltip
+                        tabIndex={-1}
+                        icon="alert_triangle"
+                        iconColor="notice"
+                        content="No text fragments matched this JSONPath."
+                      />
+                    </div>
+                  ) : null
+                }
+                stateKey={`sse-summary-result-key-path::${response.requestId}`}
+                tint={showResultKeyPathWarning ? "notice" : undefined}
+                onChange={summarySettings.setResultKeyPath}
+              />
+            </div>
+            <Dropdown items={settingsItems}>
+              <IconButton
+                size="xs"
+                variant="border"
+                icon="settings"
+                title="Extracted text settings"
+              />
+            </Dropdown>
+          </>
+        )}
+      </HStack>
+      <SplitLayout
+        layout="vertical"
+        storageKey={`sse_extracted_text::${response.requestId}`}
+        defaultRatio={DEFAULT_EXTRACTED_TEXT_RATIO}
+        minHeightPx={72}
+        resizeHandleClassName="hover:bg-surface-highlight active:bg-surface-highlight"
+        firstSlot={({ style }) => (
+          <div style={style} className="min-h-0">
+            <EventViewer
+              events={events.data ?? []}
+              getEventKey={(_, index) => String(index)}
+              error={events.error ? String(events.error) : null}
+              splitLayoutStorageKey="sse_events"
+              defaultRatio={0.4}
+              renderRow={({ event, index, isActive, onClick }) => (
+                <EventViewerRow
+                  isActive={isActive}
+                  onClick={onClick}
+                  icon={<Icon color="info" title="Server Message" icon="arrow_big_down_dash" />}
+                  content={
+                    <HStack space={2} className="items-center">
+                      <EventLabels event={event} index={index} isActive={isActive} />
+                      <span className="truncate text-xs">
+                        {getEventPreview(event, summarySettings.resultKeyPath, filterEventPreviews)}
+                      </span>
+                    </HStack>
+                  }
+                />
+              )}
+              renderDetail={({ event, index, onClose }) => (
+                <EventDetail
+                  event={event}
+                  index={index}
+                  applyJsonPath={applyToDetails}
+                  resultKeyPath={summarySettings.resultKeyPath}
+                  showLarge={showLarge}
+                  showingLarge={showingLarge}
+                  setShowLarge={setShowLarge}
+                  setShowingLarge={setShowingLarge}
+                  onClose={onClose}
+                />
+              )}
+            />
+          </div>
+        )}
+        secondSlot={
+          showExtractedText
+            ? ({ style }) => (
+                <SseSummaryFooter
+                  style={style}
+                  error={summary.error ? String(summary.error) : null}
+                  isLoading={summary.isLoading && summary.data == null}
+                  onRenderMarkdownChange={renderMarkdownSetting.set}
+                  renderMarkdown={renderMarkdown}
+                  resultKeyPath={summarySettings.resultKeyPath ?? ""}
+                  summary={summary.data?.summary ?? ""}
+                  fragmentCount={summary.data?.fragmentCount ?? 0}
+                />
+              )
+            : null
+        }
+      />
+    </div>
+  );
+}
+
+function SseSummaryFooter({
+  error,
+  fragmentCount,
+  isLoading,
+  onRenderMarkdownChange,
+  renderMarkdown,
+  resultKeyPath,
+  style,
+  summary,
+}: {
+  error: string | null;
+  fragmentCount: number;
+  isLoading: boolean;
+  onRenderMarkdownChange: (renderMarkdown: boolean) => void;
+  renderMarkdown: boolean;
+  resultKeyPath: string;
+  style: CSSProperties;
+  summary: string;
+}) {
+  const hasSummary = fragmentCount > 0;
+  const actions = useMemo(
+    () => [
+      {
+        key: "sse-summary-format",
+        label: "Extracted text format",
+        type: "select" as const,
+        value: renderMarkdown ? "markdown" : "text",
+        options: [
+          { label: "Text", value: "text" },
+          { label: "Markdown", value: "markdown" },
+        ],
+        onChange: (value: string) => onRenderMarkdownChange(value === "markdown"),
+      },
+    ],
+    [onRenderMarkdownChange, renderMarkdown],
+  );
+
+  return (
+    <div
+      style={style}
+      className="min-h-0 overflow-hidden border-t border-border-subtle bg-surface grid grid-rows-[auto_minmax(0,1fr)]"
+    >
+      <div className="pt-2">
+        <EventDetailHeader
+          actions={actions}
+          title="Extracted Text"
+          copyText={hasSummary ? summary : undefined}
+        />
+      </div>
+      <div
+        className={classNames(
+          "min-h-0 py-2 overflow-auto",
+          (error != null || isLoading || (hasSummary && !renderMarkdown)) && "text-xs",
+        )}
+      >
+        {error != null ? (
+          <span className="text-danger">{error}</span>
+        ) : isLoading ? (
+          <span className="italic text-text-subtlest">Loading extracted text...</span>
+        ) : hasSummary ? (
+          renderMarkdown ? (
+            <div className="min-h-0">
+              <Markdown className="select-auto cursor-auto">{summary}</Markdown>
+            </div>
+          ) : (
+            <pre className="font-mono whitespace-pre-wrap wrap-break-word select-auto cursor-auto">
+              {summary}
+            </pre>
+          )
+        ) : (
+          <EmptyStateText className="gap-1.5">
+            No fragments for <InlineCode className="py-0">{resultKeyPath}</InlineCode>
+          </EmptyStateText>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function getEventPreview(
+  event: ServerSentEvent,
+  resultKeyPath: string | null,
+  filterEventPreview: boolean,
+): string {
+  if (filterEventPreview && resultKeyPath != null) {
+    return (extractSseValueAtPath(event.data, resultKeyPath) ?? event.data).slice(0, 1000);
+  }
+
+  return event.data.slice(0, 1000);
+}
+
+function EventDetail({
+  applyJsonPath,
+  event,
+  index,
+  resultKeyPath,
+  showLarge,
+  showingLarge,
+  setShowLarge,
+  setShowingLarge,
+  onClose,
+}: {
+  applyJsonPath: boolean;
+  event: ServerSentEvent;
+  index: number;
+  resultKeyPath: string | null;
+  showLarge: boolean;
+  showingLarge: boolean;
+  setShowLarge: (v: boolean) => void;
+  setShowingLarge: (v: boolean) => void;
+  onClose: () => void;
+}) {
+  const detailText = useMemo(
+    () =>
+      applyJsonPath && resultKeyPath != null
+        ? (extractSseValueAtPath(event.data, resultKeyPath) ?? event.data)
+        : event.data,
+    [applyJsonPath, event.data, resultKeyPath],
+  );
+  const language = useMemo<"text" | "json">(() => {
+    if (!detailText) return "text";
+    return isJSON(detailText) ? "json" : "text";
+  }, [detailText]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <EventDetailHeader
+        title="Message Received"
+        prefix={<EventLabels event={event} index={index} />}
+        onClose={onClose}
+      />
+      {!showLarge && detailText.length > 1000 * 1000 ? (
+        <VStack space={2} className="italic text-text-subtlest">
+          Message previews larger than 1MB are hidden
+          <div>
+            <Button
+              onClick={() => {
+                setShowingLarge(true);
+                setTimeout(() => {
+                  setShowLarge(true);
+                  setShowingLarge(false);
+                }, 500);
+              }}
+              isLoading={showingLarge}
+              color="secondary"
+              variant="border"
+              size="xs"
+            >
+              Try Showing
+            </Button>
+          </div>
+        </VStack>
+      ) : (
+        <FormattedEditor language={language} text={detailText} />
+      )}
+    </div>
+  );
+}
+
+function FormattedEditor({ text, language }: { text: string; language: EditorProps["language"] }) {
+  const formatted = useFormatText({ text, language, pretty: true });
+  if (formatted == null) return null;
+  return <Editor readOnly defaultValue={formatted} language={language} stateKey={null} />;
+}
+
+function EventLabels({
+  className,
+  event,
+  index,
+  isActive,
+}: {
+  event: ServerSentEvent;
+  index: number;
+  className?: string;
+  isActive?: boolean;
+}) {
+  return (
+    <HStack space={1.5} alignItems="center" className={className}>
+      <EventLabel isActive={isActive}>{event.id ?? index}</EventLabel>
+      {event.eventType && <EventLabel isActive={isActive}>{event.eventType}</EventLabel>}
+    </HStack>
+  );
+}
+
+function EventLabel({ children, isActive }: { children: ReactNode; isActive?: boolean }) {
+  return (
+    <InlineCode className={classNames("py-0", isActive && "relative overflow-hidden")}>
+      {isActive && <span className="absolute inset-0 bg-text opacity-5 pointer-events-none" />}
+      <span className="relative">{children}</span>
+    </InlineCode>
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/HTMLOrTextViewer.tsx b/apps/yaak-client/components/responseViewers/HTMLOrTextViewer.tsx
new file mode 100644
index 0000000..a82d0ae
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/HTMLOrTextViewer.tsx
@@ -0,0 +1,106 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { useCopyHttpResponse } from "../../hooks/useCopyHttpResponse";
+import { responseBodyTextQuery, useResponseBodyText } from "../../hooks/useResponseBodyText";
+import { useResponseFilter } from "../../hooks/useResponseFilter";
+import { useSaveResponse } from "../../hooks/useSaveResponse";
+import { languageFromContentType } from "../../lib/contentType";
+import { getContentTypeFromHeaders } from "../../lib/model_util";
+import type { EditorProps } from "../core/Editor/Editor";
+import { IconButton } from "../core/IconButton";
+import { EmptyStateText } from "../EmptyStateText";
+import { TextViewer } from "./TextViewer";
+import { WebPageViewer } from "./WebPageViewer";
+
+interface Props {
+  response: HttpResponse;
+  pretty: boolean;
+  textViewerClassName?: string;
+}
+
+export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Props) {
+  const rawTextBody = useResponseBodyText({ response, filter: null });
+  const contentType = getContentTypeFromHeaders(response.headers);
+  const language = languageFromContentType(contentType, rawTextBody.data ?? "");
+
+  if (rawTextBody.isLoading || response.state === "initialized") {
+    return null;
+  }
+
+  if (language === "html" && pretty) {
+    return <WebPageViewer html={rawTextBody.data ?? ""} baseUrl={response.url} />;
+  }
+  if (rawTextBody.data == null) {
+    return <EmptyStateText>Empty response</EmptyStateText>;
+  }
+  return (
+    <HttpTextViewer
+      response={response}
+      text={rawTextBody.data}
+      language={language}
+      pretty={pretty}
+      className={textViewerClassName}
+    />
+  );
+}
+
+interface HttpTextViewerProps {
+  response: HttpResponse;
+  text: string;
+  language: EditorProps["language"];
+  pretty: boolean;
+  className?: string;
+}
+
+function HttpTextViewer({ response, text, language, pretty, className }: HttpTextViewerProps) {
+  const queryClient = useQueryClient();
+  const filter = useResponseFilter({
+    stateKey: `response.body.${response.requestId}`,
+    // Shares the display query's cache entry, so the verdict costs no extra RPC
+    runFilter: useCallback(
+      (f: string) => queryClient.fetchQuery(responseBodyTextQuery({ response, filter: f })),
+      [queryClient, response],
+    ),
+  });
+  const filteredBody = useResponseBodyText({ response, filter: filter.appliedFilter });
+  const saveResponse = useSaveResponse(response);
+  const copyResponse = useCopyHttpResponse(response);
+  const actionsDisabled = response.state !== "closed" && response.status >= 100;
+
+  return (
+    <TextViewer
+      text={text}
+      language={language}
+      stateKey={`response.body.${response.id}`}
+      pretty={pretty}
+      className={className}
+      footerActions={[
+        <IconButton
+          key="save"
+          size="sm"
+          icon="save"
+          title="Save response to file"
+          disabled={actionsDisabled}
+          onClick={() => saveResponse.mutate()}
+          className="border !border-border-subtle"
+        />,
+        <IconButton
+          key="copy"
+          size="sm"
+          icon="copy"
+          title="Copy response body"
+          disabled={actionsDisabled}
+          onClick={() => copyResponse.mutate()}
+          className="border !border-border-subtle"
+        />,
+      ]}
+      filter={filter}
+      filterResult={{
+        data: filteredBody.data,
+        isPending: filteredBody.isPending,
+        error: !!filteredBody.error,
+      }}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/ImageViewer.tsx b/apps/yaak-client/components/responseViewers/ImageViewer.tsx
new file mode 100644
index 0000000..75a6e0c
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/ImageViewer.tsx
@@ -0,0 +1,39 @@
+import classNames from "classnames";
+import { useEffect, useState } from "react";
+
+type Props = { className?: string; mimeType?: string } & (
+  | {
+      /** A URL for the body the host already stored. */
+      bodyUrl: string;
+    }
+  | {
+      data: ArrayBuffer;
+    }
+);
+
+export function ImageViewer({ className, mimeType, ...props }: Props) {
+  const [src, setSrc] = useState<string>();
+  const bodyUrl = "bodyUrl" in props ? props.bodyUrl : null;
+  const data = "data" in props ? props.data : null;
+
+  useEffect(() => {
+    if (bodyUrl != null) {
+      setSrc(bodyUrl);
+    } else if (data != null) {
+      const blob = new Blob([data], { type: mimeType ?? "image/png" });
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
+    } else {
+      setSrc(undefined);
+    }
+  }, [bodyUrl, data, mimeType]);
+
+  return (
+    <img
+      src={src}
+      alt="Response preview"
+      className={classNames(className, "max-w-full max-h-full")}
+    />
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/JsonViewer.tsx b/apps/yaak-client/components/responseViewers/JsonViewer.tsx
new file mode 100644
index 0000000..3cd0283
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/JsonViewer.tsx
@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import { JsonAttributeTree } from "../core/JsonAttributeTree";
+
+interface Props {
+  text: string;
+  className?: string;
+}
+
+export function JsonViewer({ text, className }: Props) {
+  let parsed = {};
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    // Nothing yet
+  }
+
+  return (
+    <div className={classNames(className, "overflow-x-auto h-full")}>
+      <JsonAttributeTree attrValue={parsed} />
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/MultipartViewer.tsx b/apps/yaak-client/components/responseViewers/MultipartViewer.tsx
new file mode 100644
index 0000000..821b337
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/MultipartViewer.tsx
@@ -0,0 +1,136 @@
+import { type MultipartPart, parseMultipart } from "@mjackson/multipart-parser";
+import { lazy, Suspense, useMemo } from "react";
+import { languageFromContentType } from "../../lib/contentType";
+import { Banner, Icon, LoadingIcon } from "@yaakapp-internal/ui";
+import { TabContent, Tabs } from "../core/Tabs/Tabs";
+import { AudioViewer } from "./AudioViewer";
+import { CsvViewer } from "./CsvViewer";
+import { ImageViewer } from "./ImageViewer";
+import { SvgViewer } from "./SvgViewer";
+import { TextViewer } from "./TextViewer";
+import { VideoViewer } from "./VideoViewer";
+import { WebPageViewer } from "./WebPageViewer";
+
+const PdfViewer = lazy(() => import("./PdfViewer").then((m) => ({ default: m.PdfViewer })));
+
+interface Props {
+  data: Uint8Array;
+  boundary: string;
+  idPrefix?: string;
+}
+
+export function MultipartViewer({ data, boundary, idPrefix = "multipart" }: Props) {
+  const parseResult = useMemo(() => {
+    try {
+      const maxFileSize = 1024 * 1024 * 10; // 10MB
+      const parsed = parseMultipart(data, { boundary, maxFileSize });
+      const parts = Array.from(parsed);
+      return { parts, error: null };
+    } catch (err) {
+      return { parts: [], error: err instanceof Error ? err.message : String(err) };
+    }
+  }, [data, boundary]);
+
+  const { parts, error } = parseResult;
+
+  if (error) {
+    return (
+      <Banner color="danger" className="m-3">
+        Failed to parse multipart data: {error}
+      </Banner>
+    );
+  }
+
+  if (parts.length === 0) {
+    return (
+      <Banner color="info" className="m-3">
+        No multipart parts found
+      </Banner>
+    );
+  }
+
+  return (
+    <Tabs
+      addBorders
+      label="Multipart"
+      layout="horizontal"
+      tabListClassName="border-r border-r-border -ml-3"
+      tabs={parts.map((part, i) => ({
+        label: part.name ?? "",
+        value: tabValue(part, i),
+        rightSlot:
+          part.filename && part.headers.contentType.mediaType?.startsWith("image/") ? (
+            <div className="h-5 w-5 overflow-auto flex items-center justify-end">
+              <ImageViewer
+                data={part.arrayBuffer}
+                className="ml-auto w-auto rounded-sm overflow-hidden"
+              />
+            </div>
+          ) : part.filename ? (
+            <Icon icon="file" />
+          ) : null,
+      }))}
+    >
+      {parts.map((part, i) => (
+        <TabContent
+          // oxlint-disable-next-line react/no-array-index-key -- Nothing else to key on
+          key={idPrefix + part.name + i}
+          value={tabValue(part, i)}
+          className="pl-3 pt-0!"
+        >
+          <Part part={part} />
+        </TabContent>
+      ))}
+    </Tabs>
+  );
+}
+
+function Part({ part }: { part: MultipartPart }) {
+  const mimeType = part.headers.contentType.mediaType ?? null;
+  const contentTypeHeader = part.headers.get("content-type");
+
+  const { uint8Array, content, detectedLanguage } = useMemo(() => {
+    const uint8Array = new Uint8Array(part.arrayBuffer);
+    const content = new TextDecoder().decode(part.arrayBuffer);
+    const detectedLanguage = languageFromContentType(contentTypeHeader, content);
+    return { uint8Array, content, detectedLanguage };
+  }, [part, contentTypeHeader]);
+
+  if (mimeType?.match(/^image\/svg/i)) {
+    return <SvgViewer text={content} className="pb-2" />;
+  }
+
+  if (mimeType?.match(/^image/i)) {
+    return <ImageViewer data={part.arrayBuffer} className="pb-2" />;
+  }
+
+  if (mimeType?.match(/^audio/i)) {
+    return <AudioViewer data={uint8Array} />;
+  }
+
+  if (mimeType?.match(/^video/i)) {
+    return <VideoViewer data={uint8Array} />;
+  }
+
+  if (mimeType?.match(/csv|tab-separated/i)) {
+    return <CsvViewer text={content} className="bg-primary h-10 w-10" />;
+  }
+
+  if (mimeType?.match(/^text\/html/i) || detectedLanguage === "html") {
+    return <WebPageViewer html={content} />;
+  }
+
+  if (mimeType?.match(/pdf/i)) {
+    return (
+      <Suspense fallback={<LoadingIcon />}>
+        <PdfViewer data={uint8Array} />
+      </Suspense>
+    );
+  }
+
+  return <TextViewer text={content} language={detectedLanguage} stateKey={null} />;
+}
+
+function tabValue(part: MultipartPart, i: number) {
+  return `${part.name ?? ""}::${i}`;
+}
diff --git a/apps/yaak-client/components/responseViewers/PdfViewer.css b/apps/yaak-client/components/responseViewers/PdfViewer.css
new file mode 100644
index 0000000..ec7dac8
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/PdfViewer.css
@@ -0,0 +1,3 @@
+.react-pdf__Document * {
+  user-select: text;
+}
diff --git a/apps/yaak-client/components/responseViewers/PdfViewer.tsx b/apps/yaak-client/components/responseViewers/PdfViewer.tsx
new file mode 100644
index 0000000..f85507d
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/PdfViewer.tsx
@@ -0,0 +1,81 @@
+import "react-pdf/dist/Page/TextLayer.css";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "./PdfViewer.css";
+import type { PDFDocumentProxy } from "pdfjs-dist";
+import { useMemo, useRef, useState } from "react";
+import { Document, Page } from "react-pdf";
+import { useContainerSize } from "@yaakapp-internal/ui";
+import { fireAndForget } from "../../lib/fireAndForget";
+
+fireAndForget(
+  import("react-pdf").then(({ pdfjs }) => {
+    pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+      "pdfjs-dist/build/pdf.worker.min.mjs",
+      import.meta.url,
+    ).toString();
+  }),
+);
+
+interface Props {
+  /** A URL for the body the host already stored. */
+  bodyUrl?: string;
+  data?: Uint8Array;
+}
+
+const options = {
+  cMapUrl: "/cmaps/",
+  standardFontDataUrl: "/standard_fonts/",
+};
+
+export function PdfViewer({ bodyUrl, data }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [numPages, setNumPages] = useState<number>();
+
+  const { width: containerWidth } = useContainerSize(containerRef);
+
+  // During render, not in an effect: an effect leaves the first paint with no file, and
+  // `Document` renders its "Failed to load PDF file" state for that frame before recovering
+  const src = useMemo(() => {
+    if (bodyUrl) {
+      return bodyUrl;
+    }
+    if (data) {
+      // Create a copy to avoid "Buffer is already detached" errors
+      // This happens when the ArrayBuffer is transferred/detached elsewhere
+      return { data: new Uint8Array(data) };
+    }
+    return undefined;
+  }, [bodyUrl, data]);
+
+  const onDocumentLoadSuccess = ({ numPages: nextNumPages }: PDFDocumentProxy): void => {
+    setNumPages(nextNumPages);
+  };
+
+  // Nothing to show yet, rather than the failure state `Document` renders for an empty file
+  if (src == null) {
+    return null;
+  }
+
+  return (
+    <div ref={containerRef} className="w-full h-full overflow-y-auto">
+      <Document
+        file={src}
+        options={options}
+        onLoadSuccess={onDocumentLoadSuccess}
+        externalLinkTarget="_blank"
+        externalLinkRel="noopener noreferrer"
+      >
+        {Array.from({ length: numPages ?? 0 }, (_, index) => (
+          <Page
+            className="mb-6 select-all"
+            renderTextLayer
+            renderAnnotationLayer
+            key={`page_${index + 1}`}
+            pageNumber={index + 1}
+            width={containerWidth}
+          />
+        ))}
+      </Document>
+    </div>
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/RecentFiltersDropdown.tsx b/apps/yaak-client/components/responseViewers/RecentFiltersDropdown.tsx
new file mode 100644
index 0000000..507928f
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/RecentFiltersDropdown.tsx
@@ -0,0 +1,96 @@
+import { Icon } from "@yaakapp-internal/ui";
+import type { RecentFilter } from "../../hooks/useRecentFilters";
+import { Dropdown, type DropdownItem } from "../core/Dropdown";
+import { IconButton } from "../core/IconButton";
+
+interface Props {
+  recentFilters: RecentFilter[];
+  activeFilter: string | null;
+  onSelect: (value: string) => void;
+  onRemove: (value: string) => void;
+  onTogglePin: (value: string) => void;
+  onClear: () => void;
+}
+
+export function RecentFiltersDropdown({
+  recentFilters,
+  activeFilter,
+  onSelect,
+  onRemove,
+  onTogglePin,
+  onClear,
+}: Props) {
+  const pinned = recentFilters.filter((f) => f.pinned);
+  const unpinned = recentFilters.filter((f) => !f.pinned);
+
+  const toItem = (filter: RecentFilter): DropdownItem => ({
+    label: (
+      <div className="font-mono text-sm truncate max-w-sm" title={filter.value}>
+        {filter.value}
+      </div>
+    ),
+    leftSlot: <Icon icon={filter.value === activeFilter ? "check" : "empty"} />,
+    onSelect: () => onSelect(filter.value),
+    submenuTrigger: "button",
+    submenu: [
+      {
+        label: filter.pinned ? "Unpin" : "Pin",
+        icon: filter.pinned ? "unpin" : "pin",
+        keepOpenOnSelect: true,
+        onSelect: () => onTogglePin(filter.value),
+      },
+      {
+        label: "Remove",
+        icon: "trash",
+        color: "danger",
+        keepOpenOnSelect: true,
+        onSelect: () => onRemove(filter.value),
+      },
+    ],
+  });
+
+  const items: DropdownItem[] = [];
+
+  if (recentFilters.length === 0) {
+    items.push({
+      type: "content",
+      label: (
+        <span className="block px-4 py-1 text-sm text-text-subtle">
+          Filters you use are remembered here
+        </span>
+      ),
+    });
+  }
+
+  if (pinned.length > 0) {
+    items.push({ type: "separator", label: "Pinned" }, ...pinned.map(toItem));
+  }
+
+  if (unpinned.length > 0) {
+    items.push({ type: "separator", label: "Recent" }, ...unpinned.map(toItem));
+  }
+
+  if (recentFilters.length > 0) {
+    items.push(
+      { type: "separator" },
+      {
+        label: "Clear All",
+        leftSlot: <Icon icon="trash" />,
+        color: "danger",
+        onSelect: onClear,
+      },
+    );
+  }
+
+  return (
+    <Dropdown items={items}>
+      <IconButton
+        size="xs"
+        icon="filter"
+        title="Recent filters"
+        iconColor="secondary"
+        className="w-8 ml-0.5 mr-1 h-auto!"
+      />
+    </Dropdown>
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/ResponseBreadcrumbBar.tsx b/apps/yaak-client/components/responseViewers/ResponseBreadcrumbBar.tsx
new file mode 100644
index 0000000..ba03595
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/ResponseBreadcrumbBar.tsx
@@ -0,0 +1,192 @@
+import { Icon } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { JsonPathSegment } from "../core/Editor/json/jsonPath";
+import { IconButton } from "../core/IconButton";
+import { Tooltip } from "../core/Tooltip";
+
+interface Props {
+  segments: JsonPathSegment[];
+  appliedFilter: string | null;
+  /**
+   * How many leading segments make up the applied filter. `null` when unfiltered, or
+   * when the filter isn't a plain path and is shown as raw text instead.
+   */
+  appliedDepth: number | null;
+  filterError: boolean;
+  /** Called with the number of leading segments to filter to. `0` clears the filter. */
+  onSelect: (count: number) => void;
+}
+
+/**
+ * Shows where the cursor sits inside a response (`$ > sort > [0] > id`). An applied
+ * plain-path filter is the start of the trail, so any crumb moves it. While filtered,
+ * the bar is tinted so a lingering filter is hard to miss.
+ */
+export function ResponseBreadcrumbBar({
+  segments,
+  appliedFilter,
+  appliedDepth,
+  filterError,
+  onSelect,
+}: Props) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [overflow, setOverflow] = useState({ left: false, right: false });
+
+  const measure = useCallback(() => {
+    const el = scrollRef.current;
+    if (el == null) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    setOverflow({
+      left: el.scrollLeft > 1,
+      right: el.scrollLeft < maxScroll - 1,
+    });
+  }, []);
+
+  // Keep the deepest crumb (where the cursor is) in view as the path changes.
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (el == null) return;
+    el.scrollLeft = el.scrollWidth;
+    measure();
+  }, [segments, measure]);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el == null) return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [measure]);
+
+  const scrollBy = useCallback((direction: -1 | 1) => {
+    const el = scrollRef.current;
+    if (el == null) return;
+    el.scrollBy({ left: direction * Math.max(120, el.clientWidth * 0.6), behavior: "smooth" });
+  }, []);
+
+  const isFiltered = appliedFilter != null;
+
+  return (
+    <div className="rounded bg-surface shadow pointer-events-auto">
+      <div
+        className={classNames(
+          "flex items-stretch h-6 rounded border overflow-hidden font-mono text-xs text-text-subtle select-none",
+          !isFiltered && "border-border-subtle",
+          isFiltered && !filterError && "border-primary/40 bg-primary/10",
+          filterError && "border-danger/40 bg-danger/10",
+        )}
+      >
+        {isFiltered && appliedDepth == null ? (
+          <span
+            className={classNames(
+              "flex items-center min-w-0 truncate px-2",
+              filterError ? "text-danger" : "text-primary",
+            )}
+          >
+            {appliedFilter}
+          </span>
+        ) : (
+          <Crumb
+            label="$"
+            tooltip="Clear filter"
+            isApplied={isFiltered}
+            onClick={appliedDepth != null && appliedDepth > 0 ? () => onSelect(0) : null}
+          />
+        )}
+        {overflow.left && (
+          <IconButton
+            size="xs"
+            icon="chevron_left"
+            title="Scroll breadcrumbs left"
+            iconColor="secondary"
+            onClick={() => scrollBy(-1)}
+            className="shrink-0 h-auto!"
+          />
+        )}
+        <div
+          ref={scrollRef}
+          onScroll={measure}
+          className="flex items-stretch min-w-0 overflow-x-auto hide-scrollbars whitespace-nowrap"
+        >
+          {segments.map((segment, i) => {
+            const count = i + 1;
+            const isApplied = appliedDepth != null && count <= appliedDepth;
+            const isClickable = (!isFiltered || appliedDepth != null) && count !== appliedDepth;
+            return (
+              <div key={i} className="flex items-stretch shrink-0">
+                <Icon
+                  icon="chevron_right"
+                  size="xs"
+                  className="text-text-subtlest shrink-0 self-center"
+                />
+                <Crumb
+                  label={segment.kind === "index" ? `[${segment.index}]` : segment.key}
+                  tooltip={
+                    segment.kind === "index"
+                      ? `Filter to element ${segment.index}`
+                      : `Filter to ${segment.key}`
+                  }
+                  isApplied={isApplied}
+                  onClick={isClickable ? () => onSelect(count) : null}
+                />
+              </div>
+            );
+          })}
+        </div>
+        {overflow.right && (
+          <IconButton
+            size="xs"
+            icon="chevron_right"
+            title="Scroll breadcrumbs right"
+            iconColor="secondary"
+            onClick={() => scrollBy(1)}
+            className="shrink-0 h-auto!"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Crumb({
+  label,
+  tooltip,
+  isApplied,
+  onClick,
+}: {
+  label: string;
+  tooltip: string;
+  isApplied: boolean;
+  onClick: (() => void) | null;
+}) {
+  const outerClassName = classNames("flex items-center px-0.5 py-0.5", isApplied && "text-primary");
+  const innerClassName = "flex items-center h-full px-1 rounded-sm";
+  if (onClick == null) {
+    return (
+      <span className={classNames(outerClassName, "shrink-0")}>
+        <span className={innerClassName}>{label}</span>
+      </span>
+    );
+  }
+
+  return (
+    <Tooltip content={tooltip} className="shrink-0 items-stretch!">
+      <button
+        type="button"
+        onClick={onClick}
+        className={classNames(outerClassName, "group/crumb focus-visible:outline-none")}
+      >
+        <span
+          className={classNames(
+            innerClassName,
+            "transition-colors group-hover/crumb:text-text group-hover/crumb:bg-surface-highlight",
+            "group-focus-visible/crumb:ring-1 group-focus-visible/crumb:ring-border-focus",
+          )}
+        >
+          {label}
+        </span>
+      </button>
+    </Tooltip>
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/SvgViewer.tsx b/apps/yaak-client/components/responseViewers/SvgViewer.tsx
new file mode 100644
index 0000000..08f4391
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/SvgViewer.tsx
@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+interface Props {
+  text: string;
+  className?: string;
+}
+
+export function SvgViewer({ text, className }: Props) {
+  const [src, setSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!text) {
+      return setSrc(null);
+    }
+
+    const blob = new Blob([text], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    setSrc(url);
+
+    return () => URL.revokeObjectURL(url);
+  }, [text]);
+
+  if (src == null) {
+    return null;
+  }
+
+  return (
+    <img src={src} alt="Response preview" className={className ?? "max-w-full max-h-full pb-2"} />
+  );
+}
diff --git a/apps/yaak-client/components/responseViewers/TextViewer.tsx b/apps/yaak-client/components/responseViewers/TextViewer.tsx
new file mode 100644
index 0000000..41052be
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/TextViewer.tsx
@@ -0,0 +1,222 @@
+import type { ReactNode } from "react";
+import { Children, useCallback, useMemo, useState } from "react";
+import { useFormatText } from "../../hooks/useFormatText";
+import type { ResponseFilterApi } from "../../hooks/useResponseFilter";
+import type { EditorProps } from "../core/Editor/Editor";
+import { jsonBreadcrumbExtension } from "../core/Editor/json/breadcrumbExtension";
+import type { JsonPathSegment } from "../core/Editor/json/jsonPath";
+import { jsonPathToSegments, segmentsToJsonPath } from "../core/Editor/json/jsonPath";
+import { hyperlink } from "../core/Editor/hyperlink/extension";
+import { Editor } from "../core/Editor/LazyEditor";
+import { IconButton } from "../core/IconButton";
+import { Input } from "../core/Input";
+import { ResponseBreadcrumbBar } from "./ResponseBreadcrumbBar";
+import { RecentFiltersDropdown } from "./RecentFiltersDropdown";
+
+interface Props {
+  text: string;
+  language: EditorProps["language"];
+  stateKey: string | null;
+  pretty?: boolean;
+  className?: string;
+  footerActions?: ReactNode;
+  filter?: ResponseFilterApi;
+  filterResult?: {
+    data: string | null | undefined;
+    isPending: boolean;
+    error: boolean;
+  };
+}
+
+export function TextViewer({
+  language,
+  text,
+  stateKey,
+  pretty,
+  className,
+  footerActions,
+  filter,
+  filterResult,
+}: Props) {
+  // Track the JSON path under the cursor to drive the breadcrumb bar. Selection
+  // works even in this read-only editor, so it updates as the user clicks around.
+  const [breadcrumbSegments, setBreadcrumbSegments] = useState<JsonPathSegment[]>([]);
+  const handleBreadcrumbUpdate = useCallback(
+    ({ segments }: { segments: JsonPathSegment[] | null }) =>
+      setBreadcrumbSegments((prev) => {
+        const next = segments ?? [];
+        return segmentsToJsonPath(prev) === segmentsToJsonPath(next) ? prev : next;
+      }),
+    [],
+  );
+  const extraExtensions = useMemo(
+    () =>
+      language === "json"
+        ? [hyperlink, jsonBreadcrumbExtension(handleBreadcrumbUpdate)]
+        : [hyperlink],
+    [language, handleBreadcrumbUpdate],
+  );
+
+  const canFilter =
+    filter != null && (language === "json" || language === "xml" || language === "html");
+  const isSearching = filter?.isSearching ?? false;
+  const appliedFilter = filter?.appliedFilter ?? null;
+  const resultError = filterResult?.error ?? false;
+
+  // Filter output is always an array of matches, so under a plain-path filter the
+  // cursor's leading index is that single match and the rest extends the filter.
+  const appliedSegments =
+    appliedFilter != null && language === "json" ? jsonPathToSegments(appliedFilter) : null;
+  const pathSegments =
+    appliedSegments != null
+      ? [...appliedSegments, ...breadcrumbSegments.slice(1)]
+      : breadcrumbSegments;
+  const showBreadcrumbs =
+    filter != null &&
+    (appliedFilter != null || (language === "json" && breadcrumbSegments.length > 0));
+
+  const handleFilterKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (filter == null) return;
+      if (e.key === "Escape") {
+        filter.toggleSearch();
+      } else if (e.key === "Enter" && filter.filterText != null) {
+        filter.applyFilter(filter.filterText);
+      }
+    },
+    [filter],
+  );
+
+  const actions = useMemo<ReactNode[]>(() => {
+    const nodes: ReactNode[] = isSearching ? [] : Children.toArray(footerActions);
+
+    if (!canFilter) return nodes;
+
+    if (isSearching) {
+      nodes.push(
+        <div key="input" className="w-full opacity-100!">
+          <Input
+            key={filter.stateKey ?? "filter"}
+            validate={!resultError}
+            hideLabel
+            autoFocus
+            containerClassName="bg-surface"
+            size="sm"
+            placeholder={language === "json" ? "JSONPath expression" : "XPath expression"}
+            label="Filter expression"
+            name="filter"
+            defaultValue={filter.filterText}
+            forceUpdateKey={filter.filterUpdateKey}
+            onKeyDown={handleFilterKeyDown}
+            onChange={filter.setFilterText}
+            stateKey={filter.stateKey ? `filter.${filter.stateKey}` : null}
+            leftSlot={
+              <div className="py-0.5 flex">
+                <RecentFiltersDropdown
+                  recentFilters={filter.recentFilters}
+                  activeFilter={filter.appliedFilter}
+                  onSelect={filter.replaceFilter}
+                  onRemove={filter.removeRecentFilter}
+                  onTogglePin={filter.togglePinRecentFilter}
+                  onClear={filter.clearRecentFilters}
+                />
+              </div>
+            }
+            rightSlot={
+              <div className="py-0.5 flex">
+                <IconButton
+                  size="xs"
+                  icon="x"
+                  title="Close filter"
+                  iconColor="secondary"
+                  onClick={filter.toggleSearch}
+                  className="w-8 mr-0.5 h-auto!"
+                />
+              </div>
+            }
+          />
+        </div>,
+      );
+    } else {
+      nodes.push(
+        <IconButton
+          key="icon"
+          size="sm"
+          isLoading={filterResult?.isPending ?? false}
+          icon="filter"
+          title="Filter response"
+          onClick={filter.toggleSearch}
+          className="border border-border-subtle!"
+        />,
+      );
+    }
+
+    return nodes;
+  }, [
+    canFilter,
+    footerActions,
+    filter,
+    filterResult?.isPending,
+    resultError,
+    isSearching,
+    language,
+    handleFilterKeyDown,
+  ]);
+
+  const formattedBody = useFormatText({ text, language, pretty: pretty ?? false });
+  if (formattedBody == null) {
+    return null;
+  }
+
+  let body: string;
+  if (appliedFilter) {
+    if (resultError) {
+      body = "";
+    } else {
+      body = filterResult?.data != null ? filterResult.data : "";
+    }
+  } else {
+    body = formattedBody;
+  }
+
+  // Decode unicode sequences in the text to readable characters
+  if (language === "json" && pretty) {
+    body = decodeUnicodeLiterals(body);
+    body = body.replace(/\\\//g, "/"); // Hide unnecessary escaping of '/' by some older frameworks
+  }
+
+  return (
+    <div className="relative h-full w-full">
+      <Editor
+        readOnly
+        className={className}
+        defaultValue={body}
+        language={language}
+        actions={actions}
+        extraExtensions={extraExtensions}
+        stateKey={stateKey}
+      />
+      {showBreadcrumbs && (
+        <div className="absolute top-0 right-3 max-w-[70%] pointer-events-none">
+          <ResponseBreadcrumbBar
+            segments={language === "json" ? pathSegments : []}
+            appliedFilter={appliedFilter}
+            appliedDepth={appliedSegments?.length ?? null}
+            filterError={resultError}
+            onSelect={(count) =>
+              filter.replaceFilter(count === 0 ? "" : segmentsToJsonPath(pathSegments, count))
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Convert \uXXXX to actual Unicode characters */
+function decodeUnicodeLiterals(text: string): string {
+  return text.replace(/\\u([0-9a-fA-F]{4})/g, (_, hex) => {
+    const charCode = Number.parseInt(hex, 16);
+    return String.fromCharCode(charCode);
+  });
+}
diff --git a/apps/yaak-client/components/responseViewers/VideoViewer.tsx b/apps/yaak-client/components/responseViewers/VideoViewer.tsx
new file mode 100644
index 0000000..003d174
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/VideoViewer.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+interface Props {
+  /** A URL for the body the host already stored. */
+  bodyUrl?: string;
+  data?: Uint8Array;
+  mimeType?: string;
+}
+
+export function VideoViewer({ bodyUrl, data, mimeType }: Props) {
+  const [src, setSrc] = useState<string>();
+
+  useEffect(() => {
+    if (bodyUrl) {
+      setSrc(bodyUrl);
+    } else if (data) {
+      // As in AudioViewer: a media element trusts the declared type instead of sniffing
+      const blob = new Blob([new Uint8Array(data)], { type: mimeType ?? "video/mp4" });
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
+    } else {
+      setSrc(undefined);
+    }
+  }, [bodyUrl, data, mimeType]);
+
+  // oxlint-disable-next-line jsx-a11y/media-has-caption
+  return <video className="w-full" controls src={src} />;
+}
diff --git a/apps/yaak-client/components/responseViewers/WebPageViewer.tsx b/apps/yaak-client/components/responseViewers/WebPageViewer.tsx
new file mode 100644
index 0000000..269f995
--- /dev/null
+++ b/apps/yaak-client/components/responseViewers/WebPageViewer.tsx
@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+
+interface Props {
+  html: string;
+  baseUrl?: string;
+}
+
+export function WebPageViewer({ html, baseUrl }: Props) {
+  const contentForIframe: string | undefined = useMemo(() => {
+    if (baseUrl && html.includes("<head>")) {
+      return html.replace(/<head>/gi, `<head><base href="${baseUrl}"/>`);
+    }
+    return html;
+  }, [baseUrl, html]);
+
+  return (
+    <div className="h-full pb-3">
+      <iframe
+        key={html ? "has-body" : "no-body"}
+        title="Yaak response preview"
+        srcDoc={contentForIframe}
+        sandbox="allow-scripts allow-forms"
+        referrerPolicy="no-referrer"
+        className="h-full w-full rounded-lg border border-border-subtle"
+      />
+    </div>
+  );
+}
diff --git a/apps/yaak-client/font-size.ts b/apps/yaak-client/font-size.ts
new file mode 100644
index 0000000..0369555
--- /dev/null
+++ b/apps/yaak-client/font-size.ts
@@ -0,0 +1,19 @@
+// Listen for settings changes, the re-compute theme
+import { platform } from "@yaakapp-internal/platform";
+import type { ModelPayload } from "@yaakapp-internal/models";
+import { fireAndForget } from "./lib/fireAndForget";
+import { getSettings } from "./lib/settings";
+
+function setFontSizeOnDocument(fontSize: number) {
+  document.documentElement.style.fontSize = `${fontSize}px`;
+}
+
+platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+  for (const payload of payloads) {
+    if (payload.change.type !== "upsert") continue;
+    if (payload.model.model !== "settings") continue;
+    setFontSizeOnDocument(payload.model.interfaceFontSize);
+  }
+});
+
+fireAndForget(getSettings().then((settings) => setFontSizeOnDocument(settings.interfaceFontSize)));
diff --git a/apps/yaak-client/font.ts b/apps/yaak-client/font.ts
new file mode 100644
index 0000000..7cb1ece
--- /dev/null
+++ b/apps/yaak-client/font.ts
@@ -0,0 +1,23 @@
+// Listen for settings changes, the re-compute theme
+import { platform } from "@yaakapp-internal/platform";
+import type { ModelPayload, Settings } from "@yaakapp-internal/models";
+import { fireAndForget } from "./lib/fireAndForget";
+import { getSettings } from "./lib/settings";
+
+function setFonts(settings: Settings) {
+  document.documentElement.style.setProperty("--font-family-editor", settings.editorFont ?? "");
+  document.documentElement.style.setProperty(
+    "--font-family-interface",
+    settings.interfaceFont ?? "",
+  );
+}
+
+platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+  for (const payload of payloads) {
+    if (payload.change.type !== "upsert") continue;
+    if (payload.model.model !== "settings") continue;
+    setFonts(payload.model);
+  }
+});
+
+fireAndForget(getSettings().then((settings) => setFonts(settings)));
diff --git a/apps/yaak-client/hooks/useActiveCookieJar.ts b/apps/yaak-client/hooks/useActiveCookieJar.ts
new file mode 100644
index 0000000..0e4d79e
--- /dev/null
+++ b/apps/yaak-client/hooks/useActiveCookieJar.ts
@@ -0,0 +1,58 @@
+import { useSearch } from "@tanstack/react-router";
+import type { CookieJar } from "@yaakapp-internal/models";
+import { cookieJarsAtom } from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { jotaiStore } from "../lib/jotai";
+import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";
+
+export const activeCookieJarAtom = atom<CookieJar | null>(null);
+
+export function useActiveCookieJar() {
+  return useAtomValue(activeCookieJarAtom);
+}
+
+export function useSubscribeActiveCookieJarId() {
+  const search = useSearch({ strict: false });
+  const cookieJarId = search.cookie_jar_id;
+  const cookieJars = useAtomValue(cookieJarsAtom);
+
+  useEffect(() => {
+    if (search == null) return; // Happens during Vite hot reload
+    const activeCookieJar = cookieJars?.find((j) => j.id === cookieJarId) ?? null;
+    jotaiStore.set(activeCookieJarAtom, activeCookieJar);
+  }, [cookieJarId, cookieJars, search]);
+}
+
+export function getActiveCookieJar() {
+  return jotaiStore.get(activeCookieJarAtom);
+}
+
+export function useEnsureActiveCookieJar() {
+  const cookieJars = useAtomValue(cookieJarsAtom);
+  const { cookie_jar_id: activeCookieJarId } = useSearch({ from: "/workspaces/$workspaceId/" });
+
+  // Set the active cookie jar to the first one, if none set
+  // NOTE: We only run this on cookieJars to prevent data races when switching workspaces since a lot of
+  //  things change when switching workspaces, and we don't currently have a good way to ensure that all
+  //  stores have updated.
+  // TODO: Create a global data store that can handle this case
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (cookieJars == null) return; // Hasn't loaded yet
+
+    if (cookieJars.find((j) => j.id === activeCookieJarId)) {
+      return; // There's an active jar
+    }
+
+    const firstJar = cookieJars[0];
+    if (firstJar == null) {
+      console.log(`Workspace doesn't have any cookie jars to activate`);
+      return;
+    }
+
+    // There's no active jar, so set it to the first one
+    console.log("Defaulting active cookie jar to first jar", firstJar);
+    setWorkspaceSearchParams({ cookie_jar_id: firstJar.id });
+  }, [cookieJars]);
+}
diff --git a/apps/yaak-client/hooks/useActiveEnvironment.ts b/apps/yaak-client/hooks/useActiveEnvironment.ts
new file mode 100644
index 0000000..32102eb
--- /dev/null
+++ b/apps/yaak-client/hooks/useActiveEnvironment.ts
@@ -0,0 +1,29 @@
+import { useSearch } from "@tanstack/react-router";
+import type { Environment } from "@yaakapp-internal/models";
+import { environmentsAtom } from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { jotaiStore } from "../lib/jotai";
+
+export const activeEnvironmentIdAtom = atom<string>();
+
+export const activeEnvironmentAtom = atom<Environment | null>((get) => {
+  const activeEnvironmentId = get(activeEnvironmentIdAtom);
+  return get(environmentsAtom).find((e) => e.id === activeEnvironmentId) ?? null;
+});
+
+export function useActiveEnvironment() {
+  return useAtomValue(activeEnvironmentAtom);
+}
+
+export function getActiveEnvironment() {
+  return jotaiStore.get(activeEnvironmentAtom);
+}
+
+export function useSubscribeActiveEnvironmentId() {
+  const { environment_id } = useSearch({ strict: false });
+  useEffect(
+    () => jotaiStore.set(activeEnvironmentIdAtom, environment_id ?? undefined),
+    [environment_id],
+  );
+}
diff --git a/apps/yaak-client/hooks/useActiveEnvironmentVariables.ts b/apps/yaak-client/hooks/useActiveEnvironmentVariables.ts
new file mode 100644
index 0000000..8882003
--- /dev/null
+++ b/apps/yaak-client/hooks/useActiveEnvironmentVariables.ts
@@ -0,0 +1,8 @@
+import { useAtomValue } from "jotai";
+import { activeEnvironmentAtom } from "./useActiveEnvironment";
+import { useEnvironmentVariables } from "./useEnvironmentVariables";
+
+export function useActiveEnvironmentVariables() {
+  const activeEnvironment = useAtomValue(activeEnvironmentAtom);
+  return useEnvironmentVariables(activeEnvironment?.id ?? null).map((v) => v.variable);
+}
diff --git a/apps/yaak-client/hooks/useActiveFolder.ts b/apps/yaak-client/hooks/useActiveFolder.ts
new file mode 100644
index 0000000..3cbec64
--- /dev/null
+++ b/apps/yaak-client/hooks/useActiveFolder.ts
@@ -0,0 +1,9 @@
+import { foldersAtom } from "@yaakapp-internal/models";
+import { atom } from "jotai";
+import { activeFolderIdAtom } from "./useActiveFolderId";
+
+export const activeFolderAtom = atom((get) => {
+  const activeFolderId = get(activeFolderIdAtom);
+  const folders = get(foldersAtom);
+  return folders.find((r) => r.id === activeFolderId) ?? null;
+});
diff --git a/apps/yaak-client/hooks/useActiveFolderId.ts b/apps/yaak-client/hooks/useActiveFolderId.ts
new file mode 100644
index 0000000..e8f7a0b
--- /dev/null
+++ b/apps/yaak-client/hooks/useActiveFolderId.ts
@@ -0,0 +1,11 @@
+import { useSearch } from "@tanstack/react-router";
+import { atom } from "jotai";
+import { useEffect } from "react";
+import { jotaiStore } from "../lib/jotai";
+
+export const activeFolderIdAtom = atom<string | null>(null);
+
+export function useSubscribeActiveFolderId() {
+  const { folder_id } = useSearch({ strict: false });
+  useEffect(() => jotaiStore.set(activeFolderIdAtom, folder_id ?? null), [folder_id]);
+}
diff --git a/apps/yaak-client/hooks/useActiveRequest.ts b/apps/yaak-client/hooks/useActiveRequest.ts
new file mode 100644
index 0000000..0f648f6
--- /dev/null
+++ b/apps/yaak-client/hooks/useActiveRequest.ts
@@ -0,0 +1,23 @@
+import type { GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+import { activeRequestIdAtom } from "./useActiveRequestId";
+import { allRequestsAtom } from "./useAllRequests";
+
+export const activeRequestAtom = atom((get) => {
+  const activeRequestId = get(activeRequestIdAtom);
+  const requests = get(allRequestsAtom);
+  return requests.find((r) => r.id === activeRequestId) ?? null;
+});
+
+interface TypeMap {
+  http_request: HttpRequest;
+  grpc_request: GrpcRequest;
+  websocket_request: WebsocketRequest;
+}
+
+export function useActiveRequest<T extends keyof TypeMap>(model?: T): TypeMap[T] | null {
+  const activeRequest = useAtomValue(activeRequestAtom);
+  if (model == null) return activeRequest as TypeMap[T];
+  if (activeRequest?.model === model) return activeRequest as TypeMap[T];
+  return null;
+}
diff --git a/apps/yaak-client/hooks/useActiveRequestId.ts b/apps/yaak-client/hooks/useActiveRequestId.ts
new file mode 100644
index 0000000..5bafaa6
--- /dev/null
+++ b/apps/yaak-client/hooks/useActiveRequestId.ts
@@ -0,0 +1,11 @@
+import { useSearch } from "@tanstack/react-router";
+import { atom } from "jotai";
+import { useEffect } from "react";
+import { jotaiStore } from "../lib/jotai";
+
+export const activeRequestIdAtom = atom<string | null>(null);
+
+export function useSubscribeActiveRequestId() {
+  const { request_id } = useSearch({ strict: false });
+  useEffect(() => jotaiStore.set(activeRequestIdAtom, request_id ?? null), [request_id]);
+}
diff --git a/apps/yaak-client/hooks/useActiveWorkspace.ts b/apps/yaak-client/hooks/useActiveWorkspace.ts
new file mode 100644
index 0000000..60795b5
--- /dev/null
+++ b/apps/yaak-client/hooks/useActiveWorkspace.ts
@@ -0,0 +1,24 @@
+import { useParams } from "@tanstack/react-router";
+import { workspaceMetasAtom, workspacesAtom } from "@yaakapp-internal/models";
+import { atom } from "jotai";
+import { useEffect } from "react";
+import { jotaiStore } from "../lib/jotai";
+
+export const activeWorkspaceIdAtom = atom<string | null>(null);
+
+export const activeWorkspaceAtom = atom((get) => {
+  const activeWorkspaceId = get(activeWorkspaceIdAtom);
+  const workspaces = get(workspacesAtom);
+  return workspaces.find((w) => w.id === activeWorkspaceId) ?? null;
+});
+
+export const activeWorkspaceMetaAtom = atom((get) => {
+  const activeWorkspaceId = get(activeWorkspaceIdAtom);
+  const workspaceMetas = get(workspaceMetasAtom);
+  return workspaceMetas.find((m) => m.workspaceId === activeWorkspaceId) ?? null;
+});
+
+export function useSubscribeActiveWorkspaceId() {
+  const { workspaceId } = useParams({ strict: false });
+  useEffect(() => jotaiStore.set(activeWorkspaceIdAtom, workspaceId ?? null), [workspaceId]);
+}
diff --git a/apps/yaak-client/hooks/useActiveWorkspaceChangedToast.tsx b/apps/yaak-client/hooks/useActiveWorkspaceChangedToast.tsx
new file mode 100644
index 0000000..fbd577c
--- /dev/null
+++ b/apps/yaak-client/hooks/useActiveWorkspaceChangedToast.tsx
@@ -0,0 +1,31 @@
+import { useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { showToast } from "../lib/toast";
+import { activeWorkspaceAtom } from "./useActiveWorkspace";
+
+export function useActiveWorkspaceChangedToast() {
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  const [id, setId] = useState<string | null>(activeWorkspace?.id ?? null);
+
+  useEffect(() => {
+    // Early return if same or invalid active workspace
+    if (id === activeWorkspace?.id || activeWorkspace == null) return;
+
+    setId(activeWorkspace?.id ?? null);
+
+    // Don't notify on the first load
+    if (id === null) return;
+
+    showToast({
+      id: `workspace-changed-${activeWorkspace.id}`,
+      timeout: 3000,
+      message: (
+        <>
+          Activated workspace{" "}
+          <InlineCode className="whitespace-nowrap">{activeWorkspace.name}</InlineCode>
+        </>
+      ),
+    });
+  }, [activeWorkspace, id]);
+}
diff --git a/apps/yaak-client/hooks/useAllRequests.ts b/apps/yaak-client/hooks/useAllRequests.ts
new file mode 100644
index 0000000..9dd20d4
--- /dev/null
+++ b/apps/yaak-client/hooks/useAllRequests.ts
@@ -0,0 +1,40 @@
+import {
+  grpcRequestsAtom,
+  httpRequestsAtom,
+  websocketRequestsAtom,
+} from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+import { selectAtom } from "jotai/utils";
+
+export const allRequestsAtom = atom((get) => [
+  ...get(httpRequestsAtom),
+  ...get(grpcRequestsAtom),
+  ...get(websocketRequestsAtom),
+]);
+
+export function useAllRequests() {
+  return useAtomValue(allRequestsAtom);
+}
+
+const stringArrayEqual = (a: string[], b: string[]) =>
+  a.length === b.length && a.every((v, i) => v === b[i]);
+
+// Identity-stable derivations so subscribers don't recompute or re-render when
+// unrelated request fields change (eg. every debounced edit of a request)
+export const allRequestIdsAtom = selectAtom(
+  allRequestsAtom,
+  (requests) => requests.map((r) => r.id),
+  stringArrayEqual,
+);
+
+export const allRequestUrlsAtom = selectAtom(
+  allRequestsAtom,
+  (requests) => {
+    const urls = new Set<string>();
+    for (const r of requests) {
+      if (r.url) urls.add(r.url);
+    }
+    return Array.from(urls);
+  },
+  stringArrayEqual,
+);
diff --git a/apps/yaak-client/hooks/useAuthTab.tsx b/apps/yaak-client/hooks/useAuthTab.tsx
new file mode 100644
index 0000000..e094b6e
--- /dev/null
+++ b/apps/yaak-client/hooks/useAuthTab.tsx
@@ -0,0 +1,206 @@
+import type { Folder } from "@yaakapp-internal/models";
+import { modelTypeLabel, patchModel } from "@yaakapp-internal/models";
+import { HStack, Icon, InlineCode } from "@yaakapp-internal/ui";
+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";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { useHttpAuthenticationSummaries } from "./useHttpAuthentication";
+import type { AuthenticatedModel } from "./useInheritedAuthentication";
+import { useInheritedAuthentication } from "./useInheritedAuthentication";
+import { useModelAncestors } from "./useModelAncestors";
+
+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(() => {
+    if (model == null) return null;
+
+    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>;
+            }
+        )[] = [];
+
+        // 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" });
+          }
+          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 });
+      },
+    };
+  }, [authentication, inheritedAuth, model, parentModel, ancestors]);
+}
diff --git a/apps/yaak-client/hooks/useCancelHttpResponse.ts b/apps/yaak-client/hooks/useCancelHttpResponse.ts
new file mode 100644
index 0000000..3e40086
--- /dev/null
+++ b/apps/yaak-client/hooks/useCancelHttpResponse.ts
@@ -0,0 +1,9 @@
+import { platform } from "@yaakapp-internal/platform";
+import { useFastMutation } from "./useFastMutation";
+
+export function useCancelHttpResponse(id: string | null) {
+  return useFastMutation<void>({
+    mutationKey: ["cancel_http_response", id],
+    mutationFn: () => platform.emit(`cancel_http_response_${id}`),
+  });
+}
diff --git a/apps/yaak-client/hooks/useCheckForUpdates.tsx b/apps/yaak-client/hooks/useCheckForUpdates.tsx
new file mode 100644
index 0000000..2a428fd
--- /dev/null
+++ b/apps/yaak-client/hooks/useCheckForUpdates.tsx
@@ -0,0 +1,26 @@
+import { useMutation } from "@tanstack/react-query";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { showAlert } from "../lib/alert";
+import { appInfo } from "../lib/appInfo";
+import { minPromiseMillis } from "../lib/minPromiseMillis";
+import { rpc } from "../lib/rpc";
+
+export function useCheckForUpdates() {
+  return useMutation({
+    mutationKey: ["check_for_updates"],
+    mutationFn: async () => {
+      const hasUpdate: boolean = await minPromiseMillis(rpc("cmd_check_for_updates"), 500);
+      if (!hasUpdate) {
+        showAlert({
+          id: "no-updates",
+          title: "No Update Available",
+          body: (
+            <>
+              You are currently on the latest version <InlineCode>{appInfo.version}</InlineCode>
+            </>
+          ),
+        });
+      }
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useClickOutside.ts b/apps/yaak-client/hooks/useClickOutside.ts
new file mode 100644
index 0000000..665ddc7
--- /dev/null
+++ b/apps/yaak-client/hooks/useClickOutside.ts
@@ -0,0 +1,41 @@
+import type { RefObject } from "react";
+import { useEffect, useRef } from "react";
+
+/**
+ * Get notified when a mouse click happens outside the target ref
+ * @param ref The element to be notified when a mouse click happens outside it
+ * @param onClickAway
+ * @param ignored Optional outside element to ignore (useful for dropdown triggers)
+ */
+export function useClickOutside(
+  ref: RefObject<HTMLElement | null>,
+  onClickAway: (event: MouseEvent) => void,
+  ignored?: RefObject<HTMLElement | null>,
+) {
+  const savedCallback = useRef(onClickAway);
+
+  useEffect(() => {
+    savedCallback.current = onClickAway;
+  }, [onClickAway]);
+
+  useEffect(() => {
+    const handler = (event: MouseEvent) => {
+      if (ref.current == null || !(event.target instanceof HTMLElement)) {
+        return;
+      }
+      const isIgnored = ignored?.current?.contains(event.target);
+      const clickedOutside = !ref.current.contains(event.target);
+      if (!isIgnored && clickedOutside) {
+        savedCallback.current(event);
+      }
+    };
+    // NOTE: We're using mousedown instead of click to handle some edge cases like when a context
+    //  menu is open with the ctrl key.
+    document.addEventListener("mousedown", handler, { capture: true });
+    document.addEventListener("contextmenu", handler, { capture: true });
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("contextmenu", handler);
+    };
+  }, [ignored, ref]);
+}
diff --git a/apps/yaak-client/hooks/useCopyHttpResponse.ts b/apps/yaak-client/hooks/useCopyHttpResponse.ts
new file mode 100644
index 0000000..04e6d77
--- /dev/null
+++ b/apps/yaak-client/hooks/useCopyHttpResponse.ts
@@ -0,0 +1,16 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { copyToClipboard } from "../lib/copy";
+import { getResponseBodyText } from "../lib/responseBody";
+import { useFastMutation } from "./useFastMutation";
+
+export function useCopyHttpResponse(response: HttpResponse | null) {
+  return useFastMutation({
+    mutationKey: ["copy_http_response", response?.id],
+    async mutationFn() {
+      if (response == null) return;
+
+      const body = await getResponseBodyText({ response, filter: null });
+      copyToClipboard(body);
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useCreateCookieJar.ts b/apps/yaak-client/hooks/useCreateCookieJar.ts
new file mode 100644
index 0000000..90de27a
--- /dev/null
+++ b/apps/yaak-client/hooks/useCreateCookieJar.ts
@@ -0,0 +1,33 @@
+import { createWorkspaceModel } from "@yaakapp-internal/models";
+import { jotaiStore } from "../lib/jotai";
+import { showPrompt } from "../lib/prompt";
+import { setWorkspaceSearchParams } from "../lib/setWorkspaceSearchParams";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+import { useFastMutation } from "./useFastMutation";
+
+export function useCreateCookieJar() {
+  return useFastMutation({
+    mutationKey: ["create_cookie_jar"],
+    mutationFn: async () => {
+      const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+      if (workspaceId == null) {
+        throw new Error("Cannot create cookie jar when there's no active workspace");
+      }
+
+      const name = await showPrompt({
+        id: "new-cookie-jar",
+        title: "New CookieJar",
+        placeholder: "My Jar",
+        confirmText: "Create",
+        label: "Name",
+        defaultValue: "My Jar",
+      });
+      if (name == null) return null;
+
+      return createWorkspaceModel({ model: "cookie_jar", workspaceId, name });
+    },
+    onSuccess: async (cookieJarId) => {
+      setWorkspaceSearchParams({ cookie_jar_id: cookieJarId });
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useCreateDropdownItems.tsx b/apps/yaak-client/hooks/useCreateDropdownItems.tsx
new file mode 100644
index 0000000..795432c
--- /dev/null
+++ b/apps/yaak-client/hooks/useCreateDropdownItems.tsx
@@ -0,0 +1,118 @@
+import type { HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import type { GrpcRequest } from "@yaakapp-internal/sync";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+import { createFolder } from "../commands/commands";
+import type { DropdownItem } from "../components/core/Dropdown";
+import { Icon } from "@yaakapp-internal/ui";
+import { createRequestAndNavigate } from "../lib/createRequestAndNavigate";
+import { generateId } from "../lib/generateId";
+import { BODY_TYPE_GRAPHQL } from "../lib/model_util";
+import { activeRequestAtom } from "./useActiveRequest";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+
+export function useCreateDropdownItems({
+  hideFolder,
+  hideIcons,
+  folderId,
+}: {
+  hideFolder?: boolean;
+  hideIcons?: boolean;
+  folderId?: string | null;
+} = {}): DropdownItem[] {
+  const workspaceId = useAtomValue(activeWorkspaceIdAtom);
+  const activeRequest = useAtomValue(activeRequestAtom);
+
+  const items = useMemo((): DropdownItem[] => {
+    return getCreateDropdownItems({ hideFolder, hideIcons, folderId, activeRequest, workspaceId });
+  }, [activeRequest, folderId, hideFolder, hideIcons, workspaceId]);
+
+  return items;
+}
+
+export function getCreateDropdownItems({
+  hideFolder,
+  hideIcons,
+  folderId: folderIdOption,
+  workspaceId,
+  activeRequest,
+  onCreate,
+}: {
+  hideFolder?: boolean;
+  hideIcons?: boolean;
+  folderId?: string | null;
+  workspaceId: string | null;
+  activeRequest: HttpRequest | GrpcRequest | WebsocketRequest | null;
+  onCreate?: (
+    model: "http_request" | "grpc_request" | "websocket_request" | "folder",
+    id: string,
+  ) => void;
+}): DropdownItem[] {
+  const folderId =
+    (folderIdOption === "active-folder" ? activeRequest?.folderId : folderIdOption) ?? null;
+
+  if (workspaceId == null) {
+    return [];
+  }
+
+  return [
+    {
+      label: "HTTP",
+      leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({ model: "http_request", workspaceId, folderId });
+        onCreate?.("http_request", id);
+      },
+    },
+    {
+      label: "GraphQL",
+      leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({
+          model: "http_request",
+          workspaceId,
+          folderId,
+          bodyType: BODY_TYPE_GRAPHQL,
+          method: "POST",
+          headers: [{ name: "Content-Type", value: "application/json", id: generateId() }],
+        });
+        onCreate?.("http_request", id);
+      },
+    },
+    {
+      label: "gRPC",
+      leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({ model: "grpc_request", workspaceId, folderId });
+        onCreate?.("grpc_request", id);
+      },
+    },
+    {
+      label: "WebSocket",
+      leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({
+          model: "websocket_request",
+          workspaceId,
+          folderId,
+        });
+        onCreate?.("websocket_request", id);
+      },
+    },
+    ...((hideFolder
+      ? []
+      : [
+          { type: "separator" },
+          {
+            label: "Folder",
+            leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+            onSelect: async () => {
+              const id = await createFolder.mutateAsync({ folderId });
+              if (id != null) {
+                onCreate?.("folder", id);
+              }
+            },
+          },
+        ]) as DropdownItem[]),
+  ];
+}
diff --git a/apps/yaak-client/hooks/useCreateWorkspace.tsx b/apps/yaak-client/hooks/useCreateWorkspace.tsx
new file mode 100644
index 0000000..081e4dc
--- /dev/null
+++ b/apps/yaak-client/hooks/useCreateWorkspace.tsx
@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { CreateWorkspaceDialog } from "../components/CreateWorkspaceDialog";
+import { showDialog } from "../lib/dialog";
+
+export function useCreateWorkspace() {
+  return useCallback(() => {
+    showDialog({
+      id: "create-workspace",
+      title: "Create Workspace",
+      size: "sm",
+      render: ({ hide }) => <CreateWorkspaceDialog hide={hide} />,
+    });
+  }, []);
+}
diff --git a/apps/yaak-client/hooks/useDeleteGrpcConnections.ts b/apps/yaak-client/hooks/useDeleteGrpcConnections.ts
new file mode 100644
index 0000000..96b6564
--- /dev/null
+++ b/apps/yaak-client/hooks/useDeleteGrpcConnections.ts
@@ -0,0 +1,12 @@
+import { rpc } from "../lib/rpc";
+import { useFastMutation } from "./useFastMutation";
+
+export function useDeleteGrpcConnections(requestId?: string) {
+  return useFastMutation({
+    mutationKey: ["delete_grpc_connections", requestId],
+    mutationFn: async () => {
+      if (requestId === undefined) return;
+      await rpc("cmd_delete_all_grpc_connections", { requestId });
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useDeleteHttpResponses.ts b/apps/yaak-client/hooks/useDeleteHttpResponses.ts
new file mode 100644
index 0000000..5099d5b
--- /dev/null
+++ b/apps/yaak-client/hooks/useDeleteHttpResponses.ts
@@ -0,0 +1,12 @@
+import { rpc } from "../lib/rpc";
+import { useFastMutation } from "./useFastMutation";
+
+export function useDeleteHttpResponses(requestId?: string) {
+  return useFastMutation({
+    mutationKey: ["delete_http_responses", requestId],
+    mutationFn: async () => {
+      if (requestId === undefined) return;
+      await rpc("cmd_delete_all_http_responses", { requestId });
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useDeleteSendHistory.tsx b/apps/yaak-client/hooks/useDeleteSendHistory.tsx
new file mode 100644
index 0000000..d64f886
--- /dev/null
+++ b/apps/yaak-client/hooks/useDeleteSendHistory.tsx
@@ -0,0 +1,52 @@
+import {
+  grpcConnectionsAtom,
+  httpResponsesAtom,
+  websocketConnectionsAtom,
+} from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { showAlert } from "../lib/alert";
+import { showConfirmDelete } from "../lib/confirm";
+import { jotaiStore } from "../lib/jotai";
+import { pluralizeCount } from "../lib/pluralize";
+import { rpc } from "../lib/rpc";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+import { useFastMutation } from "./useFastMutation";
+
+export function useDeleteSendHistory() {
+  const httpResponses = useAtomValue(httpResponsesAtom);
+  const grpcConnections = useAtomValue(grpcConnectionsAtom);
+  const websocketConnections = useAtomValue(websocketConnectionsAtom);
+
+  const labels = [
+    httpResponses.length > 0 ? pluralizeCount("Http Response", httpResponses.length) : null,
+    grpcConnections.length > 0 ? pluralizeCount("Grpc Connection", grpcConnections.length) : null,
+    websocketConnections.length > 0
+      ? pluralizeCount("WebSocket Connection", websocketConnections.length)
+      : null,
+  ].filter((l) => l != null);
+
+  return useFastMutation({
+    mutationKey: ["delete_send_history", labels],
+    mutationFn: async () => {
+      if (labels.length === 0) {
+        showAlert({
+          id: "no-responses",
+          title: "Nothing to Delete",
+          body: "There is no Http, Grpc, or Websocket history",
+        });
+        return;
+      }
+
+      const confirmed = await showConfirmDelete({
+        id: "delete-send-history",
+        title: "Clear Send History",
+        description: <>Delete {labels.join(" and ")}?</>,
+      });
+      if (!confirmed) return false;
+
+      const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+      await rpc("cmd_delete_send_history", { workspaceId });
+      return true;
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useEnvironmentValueVisibility.ts b/apps/yaak-client/hooks/useEnvironmentValueVisibility.ts
new file mode 100644
index 0000000..ea12838
--- /dev/null
+++ b/apps/yaak-client/hooks/useEnvironmentValueVisibility.ts
@@ -0,0 +1,10 @@
+import type { Environment } from "@yaakapp-internal/models";
+import { useKeyValue } from "./useKeyValue";
+
+export function useEnvironmentValueVisibility(environment: Environment) {
+  return useKeyValue<boolean>({
+    namespace: "global",
+    key: ["environmentValueVisibility", environment.workspaceId],
+    fallback: false,
+  });
+}
diff --git a/apps/yaak-client/hooks/useEnvironmentVariables.ts b/apps/yaak-client/hooks/useEnvironmentVariables.ts
new file mode 100644
index 0000000..4777ca0
--- /dev/null
+++ b/apps/yaak-client/hooks/useEnvironmentVariables.ts
@@ -0,0 +1,66 @@
+import type { Environment, EnvironmentVariable } from "@yaakapp-internal/models";
+import { foldersAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+import { jotaiStore } from "../lib/jotai";
+import { isBaseEnvironment, isFolderEnvironment } from "../lib/model_util";
+import { useActiveEnvironment } from "./useActiveEnvironment";
+import { useActiveRequest } from "./useActiveRequest";
+import { useEnvironmentsBreakdown } from "./useEnvironmentsBreakdown";
+import { useParentFolders } from "./useParentFolders";
+
+export function useEnvironmentVariables(targetEnvironmentId: string | null) {
+  const { baseEnvironment, folderEnvironments, allEnvironments } = useEnvironmentsBreakdown();
+  const activeEnvironment = useActiveEnvironment();
+  const targetEnvironment = allEnvironments.find((e) => e.id === targetEnvironmentId) ?? null;
+  const activeRequest = useActiveRequest();
+  const folders = useAtomValue(foldersAtom);
+  const activeFolder = folders.find((f) => f.id === targetEnvironment?.parentId) ?? null;
+  const parentFolders = useParentFolders(activeFolder ?? activeRequest);
+
+  return useMemo(() => {
+    const varMap: Record<string, WrappedEnvironmentVariable> = {};
+    const folderVariables = parentFolders.flatMap((f) =>
+      wrapVariables(folderEnvironments.find((fe) => fe.parentId === f.id) ?? null),
+    );
+
+    // Add active environment variables to everything except sub environments
+    const activeEnvironmentVariables =
+      targetEnvironment == null || // Editing request
+      isFolderEnvironment(targetEnvironment) || // Editing folder variables
+      isBaseEnvironment(targetEnvironment) // Editing global variables
+        ? wrapVariables(activeEnvironment)
+        : wrapVariables(targetEnvironment); // Add own variables for sub environments
+
+    const allVariables = [
+      ...folderVariables,
+      ...activeEnvironmentVariables,
+      ...wrapVariables(baseEnvironment),
+    ];
+
+    for (const v of allVariables) {
+      if (!v.variable.enabled || !v.variable.name || v.variable.name in varMap) {
+        continue;
+      }
+      varMap[v.variable.name] = v;
+    }
+
+    return Object.values(varMap);
+  }, [activeEnvironment, baseEnvironment, folderEnvironments, parentFolders, targetEnvironment]);
+}
+
+export interface WrappedEnvironmentVariable {
+  variable: EnvironmentVariable;
+  environment: Environment;
+  source: string;
+}
+
+function wrapVariables(e: Environment | null): WrappedEnvironmentVariable[] {
+  if (e == null) return [];
+  const folders = jotaiStore.get(foldersAtom);
+  return e.variables.map((v) => {
+    const folder = e.parentModel === "folder" ? folders.find((f) => f.id === e.parentId) : null;
+    const source = folder?.name ?? e.name;
+    return { variable: v, environment: e, source };
+  });
+}
diff --git a/apps/yaak-client/hooks/useEnvironmentsBreakdown.ts b/apps/yaak-client/hooks/useEnvironmentsBreakdown.ts
new file mode 100644
index 0000000..133ed92
--- /dev/null
+++ b/apps/yaak-client/hooks/useEnvironmentsBreakdown.ts
@@ -0,0 +1,35 @@
+import { environmentsAtom } from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+
+export const environmentsBreakdownAtom = atom((get) => {
+  const allEnvironments = get(environmentsAtom);
+  const baseEnvironments = allEnvironments.filter((e) => e.parentModel === "workspace") ?? [];
+
+  const subEnvironments =
+    allEnvironments
+      .filter((e) => e.parentModel === "environment")
+      ?.sort((a, b) => {
+        if (a.sortPriority === b.sortPriority) {
+          return a.updatedAt > b.updatedAt ? 1 : -1;
+        }
+        return a.sortPriority - b.sortPriority;
+      }) ?? [];
+
+  const folderEnvironments =
+    allEnvironments.filter((e) => e.parentModel === "folder" && e.parentId != null) ?? [];
+
+  const baseEnvironment = baseEnvironments[0] ?? null;
+  const otherBaseEnvironments = baseEnvironments.filter((e) => e.id !== baseEnvironment?.id) ?? [];
+  return {
+    allEnvironments,
+    baseEnvironment,
+    subEnvironments,
+    folderEnvironments,
+    otherBaseEnvironments,
+    baseEnvironments,
+  };
+});
+
+export function useEnvironmentsBreakdown() {
+  return useAtomValue(environmentsBreakdownAtom);
+}
diff --git a/apps/yaak-client/hooks/useEventViewerKeyboard.ts b/apps/yaak-client/hooks/useEventViewerKeyboard.ts
new file mode 100644
index 0000000..dcd202c
--- /dev/null
+++ b/apps/yaak-client/hooks/useEventViewerKeyboard.ts
@@ -0,0 +1,85 @@
+import type { Virtualizer } from "@tanstack/react-virtual";
+import { useCallback } from "react";
+import { useKey } from "react-use";
+
+interface UseEventViewerKeyboardProps {
+  totalCount: number;
+  activeIndex: number | null;
+  setActiveIndex: (index: number | null) => void;
+  virtualizer?: Virtualizer<HTMLDivElement, Element> | null;
+  isContainerFocused: () => boolean;
+  enabled?: boolean;
+  closePanel?: () => void;
+  openPanel?: () => void;
+}
+
+export function useEventViewerKeyboard({
+  totalCount,
+  activeIndex,
+  setActiveIndex,
+  virtualizer,
+  isContainerFocused,
+  enabled = true,
+  closePanel,
+  openPanel,
+}: UseEventViewerKeyboardProps) {
+  const selectPrev = useCallback(() => {
+    if (totalCount === 0) return;
+
+    const newIndex = activeIndex == null ? 0 : Math.max(0, activeIndex - 1);
+    setActiveIndex(newIndex);
+    virtualizer?.scrollToIndex(newIndex, { align: "auto" });
+  }, [activeIndex, setActiveIndex, totalCount, virtualizer]);
+
+  const selectNext = useCallback(() => {
+    if (totalCount === 0) return;
+
+    const newIndex = activeIndex == null ? 0 : Math.min(totalCount - 1, activeIndex + 1);
+    setActiveIndex(newIndex);
+    virtualizer?.scrollToIndex(newIndex, { align: "auto" });
+  }, [activeIndex, setActiveIndex, totalCount, virtualizer]);
+
+  useKey(
+    (e) => e.key === "ArrowUp" || e.key === "k",
+    (e) => {
+      if (!enabled || !isContainerFocused()) return;
+      e.preventDefault();
+      selectPrev();
+    },
+    undefined,
+    [enabled, isContainerFocused, selectPrev],
+  );
+
+  useKey(
+    (e) => e.key === "ArrowDown" || e.key === "j",
+    (e) => {
+      if (!enabled || !isContainerFocused()) return;
+      e.preventDefault();
+      selectNext();
+    },
+    undefined,
+    [enabled, isContainerFocused, selectNext],
+  );
+
+  useKey(
+    (e) => e.key === "Escape",
+    (e) => {
+      if (!enabled || !isContainerFocused()) return;
+      e.preventDefault();
+      closePanel?.();
+    },
+    undefined,
+    [enabled, isContainerFocused, closePanel],
+  );
+
+  useKey(
+    (e) => e.key === "Enter" || e.key === " ",
+    (e) => {
+      if (!enabled || !isContainerFocused() || activeIndex == null) return;
+      e.preventDefault();
+      openPanel?.();
+    },
+    undefined,
+    [enabled, isContainerFocused, activeIndex, openPanel],
+  );
+}
diff --git a/apps/yaak-client/hooks/useExportData.tsx b/apps/yaak-client/hooks/useExportData.tsx
new file mode 100644
index 0000000..8cf8ebb
--- /dev/null
+++ b/apps/yaak-client/hooks/useExportData.tsx
@@ -0,0 +1,41 @@
+import { workspacesAtom } from "@yaakapp-internal/models";
+import { ExportDataDialog } from "../components/ExportDataDialog";
+import { showAlert } from "../lib/alert";
+import { showDialog } from "../lib/dialog";
+import { jotaiStore } from "../lib/jotai";
+import { showToast } from "../lib/toast";
+import { activeWorkspaceAtom } from "./useActiveWorkspace";
+import { useFastMutation } from "./useFastMutation";
+
+export function useExportData() {
+  return useFastMutation({
+    mutationKey: ["export_data"],
+    onError: (err: string) => {
+      showAlert({ id: "export-failed", title: "Export Failed", body: err });
+    },
+    mutationFn: async () => {
+      const activeWorkspace = jotaiStore.get(activeWorkspaceAtom);
+      const workspaces = jotaiStore.get(workspacesAtom);
+
+      if (activeWorkspace == null || workspaces.length === 0) return;
+
+      showDialog({
+        id: "export-data",
+        title: "Export Data",
+        size: "md",
+        noPadding: true,
+        render: ({ hide }) => (
+          <ExportDataDialog
+            onHide={hide}
+            onSuccess={() => {
+              showToast({
+                color: "success",
+                message: "Data export successful",
+              });
+            }}
+          />
+        ),
+      });
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useFastMutation.ts b/apps/yaak-client/hooks/useFastMutation.ts
new file mode 100644
index 0000000..c9e83d4
--- /dev/null
+++ b/apps/yaak-client/hooks/useFastMutation.ts
@@ -0,0 +1,76 @@
+import type { MutationKey } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { showToast } from "../lib/toast";
+
+interface MutationOptions<TData, TError, TVariables> {
+  mutationKey: MutationKey;
+  mutationFn: (vars: TVariables) => Promise<TData>;
+  onSettled?: () => void;
+  onError?: (err: TError) => void;
+  onSuccess?: (data: TData) => void;
+  disableToastError?: boolean;
+}
+
+type CallbackMutationOptions<TData, TError, TVariables> = Omit<
+  MutationOptions<TData, TError, TVariables>,
+  "mutationKey" | "mutationFn"
+>;
+
+export function createFastMutation<TData = unknown, TError = unknown, TVariables = void>(
+  defaultArgs: MutationOptions<TData, TError, TVariables>,
+) {
+  const mutateAsync = async (
+    variables: TVariables,
+    args?: CallbackMutationOptions<TData, TError, TVariables>,
+  ) => {
+    const { mutationKey, mutationFn, disableToastError } = {
+      ...defaultArgs,
+      ...args,
+    };
+    try {
+      const data = await mutationFn(variables);
+      // Run both default and custom onSuccess callbacks
+      defaultArgs.onSuccess?.(data);
+      args?.onSuccess?.(data);
+      defaultArgs.onSettled?.();
+      args?.onSettled?.();
+      return data;
+    } catch (err: unknown) {
+      const stringKey = mutationKey.join(".");
+      const e = err as TError;
+      console.log("mutation error", stringKey, e);
+      if (!disableToastError) {
+        showToast({
+          id: stringKey,
+          message: err instanceof Error ? err.message : String(err),
+          color: "danger",
+          timeout: 5000,
+        });
+      }
+      // Run both default and custom onError callbacks
+      defaultArgs.onError?.(e);
+      args?.onError?.(e);
+      defaultArgs.onSettled?.();
+      args?.onSettled?.();
+      throw e;
+    }
+  };
+
+  const mutate = (
+    variables: TVariables,
+    args?: CallbackMutationOptions<TData, TError, TVariables>,
+  ) => {
+    setTimeout(() => mutateAsync(variables, args));
+  };
+
+  return { mutateAsync, mutate };
+}
+
+export function useFastMutation<TData = unknown, TError = unknown, TVariables = void>(
+  defaultArgs: MutationOptions<TData, TError, TVariables>,
+) {
+  return useMemo(() => {
+    return createFastMutation(defaultArgs);
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- Force it!
+  }, defaultArgs.mutationKey);
+}
diff --git a/apps/yaak-client/hooks/useFloatingSidebarHidden.ts b/apps/yaak-client/hooks/useFloatingSidebarHidden.ts
new file mode 100644
index 0000000..6422f9b
--- /dev/null
+++ b/apps/yaak-client/hooks/useFloatingSidebarHidden.ts
@@ -0,0 +1,14 @@
+import { useAtomValue } from "jotai";
+import { activeWorkspaceAtom } from "./useActiveWorkspace";
+import { useKeyValue } from "./useKeyValue";
+
+export function useFloatingSidebarHidden() {
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  const { set, value } = useKeyValue<boolean>({
+    namespace: "no_sync",
+    key: ["floating_sidebar_hidden", activeWorkspace?.id ?? "n/a"],
+    fallback: false,
+  });
+
+  return [value, set] as const;
+}
diff --git a/apps/yaak-client/hooks/useFolderActions.ts b/apps/yaak-client/hooks/useFolderActions.ts
new file mode 100644
index 0000000..8c1425b
--- /dev/null
+++ b/apps/yaak-client/hooks/useFolderActions.ts
@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Folder } from "@yaakapp-internal/models";
+import type {
+  CallFolderActionRequest,
+  FolderAction,
+  GetFolderActionsResponse,
+} from "@yaakapp-internal/plugins";
+import { useMemo } from "react";
+import { rpc } from "../lib/rpc";
+import { usePluginsKey } from "./usePlugins";
+
+export type CallableFolderAction = Pick<FolderAction, "label" | "icon"> & {
+  call: (folder: Folder) => Promise<void>;
+};
+
+export function useFolderActions() {
+  const pluginsKey = usePluginsKey();
+
+  const actionsResult = useQuery<CallableFolderAction[]>({
+    queryKey: ["folder_actions", pluginsKey],
+    queryFn: () => getFolderActions(),
+  });
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  const actions = useMemo(() => {
+    return actionsResult.data ?? [];
+  }, [JSON.stringify(actionsResult.data)]);
+
+  return actions;
+}
+
+export async function getFolderActions() {
+  const responses = await rpc<GetFolderActionsResponse[]>("cmd_folder_actions");
+  const actions = responses.flatMap((r) =>
+    r.actions.map((a, i) => ({
+      label: a.label,
+      icon: a.icon,
+      call: async (folder: Folder) => {
+        const payload: CallFolderActionRequest = {
+          index: i,
+          pluginRefId: r.pluginRefId,
+          args: { folder },
+        };
+        await rpc("cmd_call_folder_action", { req: payload });
+      },
+    })),
+  );
+
+  return actions;
+}
diff --git a/apps/yaak-client/hooks/useFormatText.ts b/apps/yaak-client/hooks/useFormatText.ts
new file mode 100644
index 0000000..ddb3d86
--- /dev/null
+++ b/apps/yaak-client/hooks/useFormatText.ts
@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import type { EditorProps } from "../components/core/Editor/Editor";
+import { tryFormatJson, tryFormatXml } from "../lib/formatters";
+
+export function useFormatText({
+  text,
+  language,
+  pretty,
+}: {
+  text: string;
+  language: EditorProps["language"];
+  pretty: boolean;
+}) {
+  return useQuery({
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryKey: [text, language, pretty],
+    queryFn: async () => {
+      if (text === "" || !pretty) {
+        return text;
+      }
+      if (language === "json") {
+        return tryFormatJson(text);
+      }
+      if (language === "xml" || language === "html") {
+        return tryFormatXml(text);
+      }
+      return text;
+    },
+  }).data;
+}
diff --git a/apps/yaak-client/hooks/useGraphQLSchemaFile.ts b/apps/yaak-client/hooks/useGraphQLSchemaFile.ts
new file mode 100644
index 0000000..9cdebe2
--- /dev/null
+++ b/apps/yaak-client/hooks/useGraphQLSchemaFile.ts
@@ -0,0 +1,18 @@
+import { useKeyValue } from "./useKeyValue";
+
+// The file a request's GraphQL schema is loaded from, or null when the schema
+// comes from an introspection request.
+//
+// This is the *source*, not the schema. The introspection row it produces is a
+// cache that expires on its own; this outlives it and regenerates it, the same
+// way gRPC keeps its proto file list separate from a reflection result.
+export function graphqlSchemaFileArgs(requestId: string | null) {
+  return {
+    namespace: "global" as const,
+    key: ["graphql_schema_file", requestId ?? "n/a"],
+  };
+}
+
+export function useGraphQLSchemaFile(requestId: string | null) {
+  return useKeyValue<string | null>({ ...graphqlSchemaFileArgs(requestId), fallback: null });
+}
diff --git a/apps/yaak-client/hooks/useGrpc.ts b/apps/yaak-client/hooks/useGrpc.ts
new file mode 100644
index 0000000..7de842c
--- /dev/null
+++ b/apps/yaak-client/hooks/useGrpc.ts
@@ -0,0 +1,78 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { platform } from "@yaakapp-internal/platform";
+import type { GrpcConnection, GrpcRequest } from "@yaakapp-internal/models";
+import { flushAllModelWrites } from "@yaakapp-internal/models";
+import { jotaiStore } from "../lib/jotai";
+import { minPromiseMillis } from "../lib/minPromiseMillis";
+import { rpc } from "../lib/rpc";
+import { activeEnvironmentIdAtom, useActiveEnvironment } from "./useActiveEnvironment";
+import { useDebouncedValue } from "@yaakapp-internal/ui";
+
+export interface ReflectResponseService {
+  name: string;
+  methods: { name: string; schema: string; serverStreaming: boolean; clientStreaming: boolean }[];
+}
+
+export function useGrpc(
+  req: GrpcRequest | null,
+  conn: GrpcConnection | null,
+  protoFiles: string[],
+) {
+  const requestId = req?.id ?? "n/a";
+  const environment = useActiveEnvironment();
+
+  const go = useMutation<void, string>({
+    mutationKey: ["grpc_go", conn?.id],
+    mutationFn: async () => {
+      await flushAllModelWrites(); // The backend reads the request from the DB
+      return rpc<void>("cmd_grpc_go", {
+        requestId,
+        environmentId: environment?.id,
+        protoFiles,
+      });
+    },
+  });
+
+  const send = useMutation({
+    mutationKey: ["grpc_send", conn?.id],
+    mutationFn: ({ message }: { message: string }) =>
+      platform.emit(`grpc_client_msg_${conn?.id ?? "none"}`, { Message: message }),
+  });
+
+  const cancel = useMutation({
+    mutationKey: ["grpc_cancel", conn?.id ?? "n/a"],
+    mutationFn: () => platform.emit(`grpc_client_msg_${conn?.id ?? "none"}`, "Cancel"),
+  });
+
+  const commit = useMutation({
+    mutationKey: ["grpc_commit", conn?.id ?? "n/a"],
+    mutationFn: () => platform.emit(`grpc_client_msg_${conn?.id ?? "none"}`, "Commit"),
+  });
+
+  const debouncedUrl = useDebouncedValue<string>(req?.url ?? "", 1000);
+
+  const reflect = useQuery<ReflectResponseService[], string>({
+    enabled: req != null,
+    queryKey: ["grpc_reflect", req?.id ?? "n/a", debouncedUrl, protoFiles],
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    queryFn: () => {
+      const environmentId = jotaiStore.get(activeEnvironmentIdAtom);
+      return minPromiseMillis<ReflectResponseService[]>(
+        rpc("cmd_grpc_reflect", { requestId, protoFiles, environmentId }),
+        300,
+      );
+    },
+  });
+
+  return {
+    go,
+    reflect,
+    cancel,
+    commit,
+    isStreaming: conn != null && conn.state !== "closed",
+    send,
+  };
+}
diff --git a/apps/yaak-client/hooks/useGrpcProtoFiles.ts b/apps/yaak-client/hooks/useGrpcProtoFiles.ts
new file mode 100644
index 0000000..fea5b12
--- /dev/null
+++ b/apps/yaak-client/hooks/useGrpcProtoFiles.ts
@@ -0,0 +1,17 @@
+import { getKeyValue } from "../lib/keyValueStore";
+import { useKeyValue } from "./useKeyValue";
+
+export function protoFilesArgs(requestId: string | null) {
+  return {
+    namespace: "global" as const,
+    key: ["proto_files", requestId ?? "n/a"],
+  };
+}
+
+export function useGrpcProtoFiles(activeRequestId: string | null) {
+  return useKeyValue<string[]>({ ...protoFilesArgs(activeRequestId), fallback: [] });
+}
+
+export async function getGrpcProtoFiles(activeRequestId: string | null) {
+  return getKeyValue<string[]>({ ...protoFilesArgs(activeRequestId), fallback: [] });
+}
diff --git a/apps/yaak-client/hooks/useGrpcRequestActions.ts b/apps/yaak-client/hooks/useGrpcRequestActions.ts
new file mode 100644
index 0000000..8ed72a7
--- /dev/null
+++ b/apps/yaak-client/hooks/useGrpcRequestActions.ts
@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import type { GrpcRequest } from "@yaakapp-internal/models";
+import type {
+  CallGrpcRequestActionRequest,
+  GetGrpcRequestActionsResponse,
+  GrpcRequestAction,
+} from "@yaakapp-internal/plugins";
+import { useMemo } from "react";
+import { rpc } from "../lib/rpc";
+import { getGrpcProtoFiles } from "./useGrpcProtoFiles";
+import { usePluginsKey } from "./usePlugins";
+
+export type CallableGrpcRequestAction = Pick<GrpcRequestAction, "label" | "icon"> & {
+  call: (grpcRequest: GrpcRequest) => Promise<void>;
+};
+
+export function useGrpcRequestActions() {
+  const pluginsKey = usePluginsKey();
+
+  const actionsResult = useQuery<CallableGrpcRequestAction[]>({
+    queryKey: ["grpc_request_actions", pluginsKey],
+    queryFn: async () => {
+      return getGrpcRequestActions();
+    },
+  });
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  const actions = useMemo(() => {
+    return actionsResult.data ?? [];
+  }, [JSON.stringify(actionsResult.data)]);
+
+  return actions;
+}
+
+export async function getGrpcRequestActions() {
+  const responses = await rpc<GetGrpcRequestActionsResponse[]>("cmd_grpc_request_actions");
+
+  return responses.flatMap((r) =>
+    r.actions.map((a, i) => ({
+      label: a.label,
+      icon: a.icon,
+      call: async (grpcRequest: GrpcRequest) => {
+        const protoFiles = await getGrpcProtoFiles(grpcRequest.id);
+        const payload: CallGrpcRequestActionRequest = {
+          index: i,
+          pluginRefId: r.pluginRefId,
+          args: { grpcRequest, protoFiles },
+        };
+        await rpc("cmd_call_grpc_request_action", { req: payload });
+      },
+    })),
+  );
+}
diff --git a/apps/yaak-client/hooks/useHeadersTab.tsx b/apps/yaak-client/hooks/useHeadersTab.tsx
new file mode 100644
index 0000000..70849f0
--- /dev/null
+++ b/apps/yaak-client/hooks/useHeadersTab.tsx
@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { CountBadge } from "../components/core/CountBadge";
+import type { TabItem } from "../components/core/Tabs/Tabs";
+import type { HeaderModel } from "./useInheritedHeaders";
+import { useInheritedHeaders } from "./useInheritedHeaders";
+
+export function useHeadersTab<T extends string>(
+  tabValue: T,
+  model: HeaderModel | null,
+  label?: string,
+) {
+  const inheritedHeaders = useInheritedHeaders(model);
+
+  return useMemo<TabItem[]>(() => {
+    if (model == null) return [];
+
+    const allHeaders = [
+      ...inheritedHeaders,
+      ...(model.model === "grpc_request" ? model.metadata : model.headers),
+    ];
+    const numHeaders = allHeaders.filter((h) => h.name).length;
+
+    const tab: TabItem = {
+      value: tabValue,
+      label: label ?? "Headers",
+      rightSlot: <CountBadge count={numHeaders} />,
+    };
+
+    return [tab];
+  }, [inheritedHeaders, label, model, tabValue]);
+}
diff --git a/apps/yaak-client/hooks/useHotKey.ts b/apps/yaak-client/hooks/useHotKey.ts
new file mode 100644
index 0000000..237786b
--- /dev/null
+++ b/apps/yaak-client/hooks/useHotKey.ts
@@ -0,0 +1,442 @@
+import { platform } from "@yaakapp-internal/platform";
+import { debounce } from "@yaakapp-internal/lib";
+import { settingsAtom } from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { capitalize } from "../lib/capitalize";
+import { jotaiStore } from "../lib/jotai";
+
+const HOLD_KEYS = ["Shift", "Control", "Command", "Alt", "Meta"];
+const SINGLE_WHITELIST = ["Delete", "Enter", "Backspace"];
+
+export type HotkeyAction =
+  | "app.zoom_in"
+  | "app.zoom_out"
+  | "app.zoom_reset"
+  | "command_palette.toggle"
+  | "cookies_editor.show"
+  | "editor.autocomplete"
+  | "environment_editor.toggle"
+  | "hotkeys.showHelp"
+  | "model.create"
+  | "model.duplicate"
+  | "request.send"
+  | "request.rename"
+  | "switcher.next"
+  | "switcher.prev"
+  | "switcher.toggle"
+  | "settings.show"
+  | "sidebar.filter"
+  | "sidebar.selected.delete"
+  | "sidebar.selected.duplicate"
+  | "sidebar.selected.move"
+  | "sidebar.selected.rename"
+  | "sidebar.expand_all"
+  | "sidebar.collapse_all"
+  | "sidebar.focus"
+  | "sidebar.context_menu"
+  | "url_bar.focus"
+  | "workspace_settings.show";
+
+/** Default hotkeys for macOS (uses Meta for Cmd) */
+const defaultHotkeysMac: Record<HotkeyAction, string[]> = {
+  "app.zoom_in": ["Meta+Equal"],
+  "app.zoom_out": ["Meta+Minus"],
+  "app.zoom_reset": ["Meta+0"],
+  "command_palette.toggle": ["Meta+k"],
+  "cookies_editor.show": ["Meta+Shift+k"],
+  "editor.autocomplete": ["Control+Space"],
+  "environment_editor.toggle": ["Meta+Shift+e"],
+  "request.rename": ["Control+Shift+r"],
+  "request.send": ["Meta+Enter", "Meta+r"],
+  "hotkeys.showHelp": ["Meta+Shift+/"],
+  "model.create": ["Meta+n"],
+  "model.duplicate": ["Meta+d"],
+  "switcher.next": ["Control+Shift+Tab"],
+  "switcher.prev": ["Control+Tab"],
+  "switcher.toggle": ["Meta+p"],
+  "settings.show": ["Meta+,"],
+  "sidebar.filter": ["Meta+f"],
+  "sidebar.expand_all": ["Meta+Shift+Equal"],
+  "sidebar.collapse_all": ["Meta+Shift+Minus"],
+  "sidebar.selected.delete": ["Delete", "Meta+Backspace"],
+  "sidebar.selected.duplicate": ["Meta+d"],
+  "sidebar.selected.move": [],
+  "sidebar.selected.rename": ["Enter"],
+  "sidebar.focus": ["Meta+b"],
+  "sidebar.context_menu": ["Control+Enter"],
+  "url_bar.focus": ["Meta+l"],
+  "workspace_settings.show": ["Meta+;"],
+};
+
+/** Default hotkeys for Windows/Linux (uses Control for Ctrl) */
+const defaultHotkeysOther: Record<HotkeyAction, string[]> = {
+  "app.zoom_in": ["Control+Equal"],
+  "app.zoom_out": ["Control+Minus"],
+  "app.zoom_reset": ["Control+0"],
+  "command_palette.toggle": ["Control+k"],
+  "cookies_editor.show": ["Control+Shift+k"],
+  "editor.autocomplete": ["Control+Space"],
+  "environment_editor.toggle": ["Control+Shift+e"],
+  "request.rename": ["F2"],
+  "request.send": ["Control+Enter", "Control+r"],
+  "hotkeys.showHelp": ["Control+Shift+/"],
+  "model.create": ["Control+n"],
+  "model.duplicate": ["Control+d"],
+  "switcher.next": ["Control+Shift+Tab"],
+  "switcher.prev": ["Control+Tab"],
+  "switcher.toggle": ["Control+p"],
+  "settings.show": ["Control+,"],
+  "sidebar.filter": ["Control+f"],
+  "sidebar.expand_all": ["Control+Shift+Equal"],
+  "sidebar.collapse_all": ["Control+Shift+Minus"],
+  "sidebar.selected.delete": ["Delete", "Control+Backspace"],
+  "sidebar.selected.duplicate": ["Control+d"],
+  "sidebar.selected.move": [],
+  "sidebar.selected.rename": ["Enter"],
+  "sidebar.focus": ["Control+b"],
+  "sidebar.context_menu": ["Alt+Insert"],
+  "url_bar.focus": ["Control+l"],
+  "workspace_settings.show": ["Control+;"],
+};
+
+/** Get the default hotkeys for the current platform */
+export const defaultHotkeys: Record<HotkeyAction, string[]> =
+  platform.osType() === "macos" ? defaultHotkeysMac : defaultHotkeysOther;
+
+/** Atom that provides the effective hotkeys by merging defaults with user settings */
+export const hotkeysAtom = atom((get) => {
+  const settings = get(settingsAtom);
+  const customHotkeys = settings?.hotkeys ?? {};
+
+  // Merge default hotkeys with custom hotkeys from settings
+  // Custom hotkeys override defaults for the same action
+  // An empty array means the hotkey is intentionally disabled
+  const merged: Partial<Record<HotkeyAction, string[]>> = {};
+  for (const action of hotkeyActions) {
+    merged[action] = defaultHotkeys[action];
+  }
+  for (const [action, keys] of Object.entries(customHotkeys)) {
+    if (action in merged && Array.isArray(keys)) {
+      merged[action as HotkeyAction] = keys;
+    }
+  }
+  return merged;
+});
+
+/** Helper function to get current hotkeys from the store */
+function getHotkeys(): Partial<Record<HotkeyAction, string[]>> {
+  return jotaiStore.get(hotkeysAtom);
+}
+
+const hotkeyLabels: Record<HotkeyAction, string> = {
+  "app.zoom_in": "Zoom In",
+  "app.zoom_out": "Zoom Out",
+  "app.zoom_reset": "Zoom to Actual Size",
+  "command_palette.toggle": "Toggle Command Palette",
+  "cookies_editor.show": "Show Cookies",
+  "editor.autocomplete": "Trigger Autocomplete",
+  "environment_editor.toggle": "Edit Environments",
+  "hotkeys.showHelp": "Show Keyboard Shortcuts",
+  "model.create": "New Request",
+  "model.duplicate": "Duplicate Request",
+  "request.rename": "Rename Active Request",
+  "request.send": "Send Active Request",
+  "switcher.next": "Go To Previous Request",
+  "switcher.prev": "Go To Next Request",
+  "switcher.toggle": "Toggle Request Switcher",
+  "settings.show": "Open Settings",
+  "sidebar.filter": "Filter Sidebar",
+  "sidebar.expand_all": "Expand All Folders",
+  "sidebar.collapse_all": "Collapse All Folders",
+  "sidebar.selected.delete": "Delete Selected Sidebar Item",
+  "sidebar.selected.duplicate": "Duplicate Selected Sidebar Item",
+  "sidebar.selected.move": "Move Selected to Workspace",
+  "sidebar.selected.rename": "Rename Selected Sidebar Item",
+  "sidebar.focus": "Focus or Toggle Sidebar",
+  "sidebar.context_menu": "Show Context Menu",
+  "url_bar.focus": "Focus URL",
+  "workspace_settings.show": "Open Workspace Settings",
+};
+
+const layoutInsensitiveKeys = [
+  "Equal",
+  "Minus",
+  "BracketLeft",
+  "BracketRight",
+  "Backquote",
+  "Space",
+];
+
+/** Zoom is the browser's own on these keys, so the app has no such action there. */
+const ZOOM_ACTIONS: HotkeyAction[] = ["app.zoom_in", "app.zoom_out", "app.zoom_reset"];
+
+/**
+ * The actions this host actually has. An action left out of here has no keys in
+ * `hotkeysAtom`, so it never matches and never claims the keystroke.
+ */
+export const hotkeyActions: HotkeyAction[] = (
+  Object.keys(defaultHotkeys) as (keyof typeof defaultHotkeys)[]
+)
+  .filter((a) => platform.capabilities.interfaceZoom || !ZOOM_ACTIONS.includes(a))
+  .sort((a, b) => {
+    const scopeA = a.split(".")[0] || "";
+    const scopeB = b.split(".")[0] || "";
+    if (scopeA !== scopeB) {
+      return scopeA.localeCompare(scopeB);
+    }
+    return hotkeyLabels[a].localeCompare(hotkeyLabels[b]);
+  });
+
+export type HotKeyOptions = {
+  enable?: boolean | (() => boolean);
+  priority?: number;
+  allowDefault?: boolean;
+};
+
+interface Callback {
+  action: HotkeyAction;
+  callback: (e: KeyboardEvent) => void;
+  options: HotKeyOptions;
+}
+
+const callbacksAtom = atom<Callback[]>([]);
+const currentKeysAtom = atom<Set<string>>(new Set([]));
+export const sortedCallbacksAtom = atom((get) =>
+  [...get(callbacksAtom)].sort((a, b) => (b.options.priority ?? 0) - (a.options.priority ?? 0)),
+);
+
+const clearCurrentKeysDebounced = debounce(() => {
+  jotaiStore.set(currentKeysAtom, new Set([]));
+}, 5000);
+
+export function useHotKey(
+  action: HotkeyAction | null,
+  callback: (e: KeyboardEvent) => void,
+  options: HotKeyOptions = {},
+) {
+  useEffect(() => {
+    if (action == null) return;
+    jotaiStore.set(callbacksAtom, (prev) => {
+      const without = prev.filter((cb) => {
+        const isTheSame = cb.action === action && cb.options.priority === options.priority;
+        return !isTheSame;
+      });
+      const newCb: Callback = { action, callback, options };
+      return [...without, newCb];
+    });
+    return () => {
+      jotaiStore.set(callbacksAtom, (prev) => prev.filter((cb) => cb.callback !== callback));
+    };
+  }, [action, callback, options]);
+}
+
+export function useSubscribeHotKeys() {
+  useEffect(() => {
+    document.addEventListener("keyup", handleKeyUp, { capture: true });
+    document.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, { capture: true });
+      document.removeEventListener("keyup", handleKeyUp, { capture: true });
+    };
+  }, []);
+}
+
+function handleKeyUp(e: KeyboardEvent) {
+  const keyToRemove = layoutInsensitiveKeys.includes(e.code) ? e.code : e.key;
+  const currentKeys = new Set(jotaiStore.get(currentKeysAtom));
+  currentKeys.delete(keyToRemove);
+
+  // Clear all keys if no longer holding modifier
+  // HACK: This is to get around the case of DOWN SHIFT -> DOWN : -> UP SHIFT -> UP ;
+  //  As you see, the ":" is not removed because it turned into ";" when shift was released
+  const isHoldingModifier = e.altKey || e.ctrlKey || e.metaKey || e.shiftKey;
+  if (!isHoldingModifier) {
+    currentKeys.clear();
+  }
+
+  jotaiStore.set(currentKeysAtom, currentKeys);
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  // Don't add key if not holding modifier
+  const isValidKeymapKey =
+    e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || SINGLE_WHITELIST.includes(e.key);
+  if (!isValidKeymapKey) {
+    return;
+  }
+
+  // Don't add hold keys
+  if (HOLD_KEYS.includes(e.key)) {
+    return;
+  }
+
+  const keyToAdd = layoutInsensitiveKeys.includes(e.code) ? e.code : e.key;
+  const currentKeys = new Set(jotaiStore.get(currentKeysAtom));
+  currentKeys.add(keyToAdd);
+
+  const currentKeysWithModifiers = new Set(currentKeys);
+  if (e.altKey) currentKeysWithModifiers.add("Alt");
+  if (e.ctrlKey) currentKeysWithModifiers.add("Control");
+  if (e.metaKey) currentKeysWithModifiers.add("Meta");
+  if (e.shiftKey) currentKeysWithModifiers.add("Shift");
+
+  // Don't trigger if the user is focused within an element that explicitly disableds hotkeys
+  if (document.activeElement?.closest("[data-disable-hotkey]")) {
+    return;
+  }
+
+  // Don't support certain single-key combinations within inputs
+  if (
+    (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) &&
+    currentKeysWithModifiers.size === 1 &&
+    (currentKeysWithModifiers.has("Backspace") || currentKeysWithModifiers.has("Delete"))
+  ) {
+    return;
+  }
+
+  const executed: string[] = [];
+  for (const { action, callback, options } of jotaiStore.get(sortedCallbacksAtom)) {
+    const enable = typeof options.enable === "function" ? options.enable() : options.enable;
+    if (enable === false) {
+      continue;
+    }
+
+    if (keysMatchAction(Array.from(currentKeysWithModifiers), action)) {
+      if (!options.allowDefault) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      callback(e);
+      executed.push(`${action} ${options.priority ?? 0}`);
+      break;
+    }
+  }
+
+  if (executed.length > 0) {
+    console.log("Executed hotkey", executed.join(", "));
+    jotaiStore.set(currentKeysAtom, new Set([]));
+  }
+  clearCurrentKeysDebounced();
+}
+
+export function useHotkeyLabel(action: HotkeyAction): string {
+  return hotkeyLabels[action];
+}
+
+export function getHotkeyScope(action: HotkeyAction): string {
+  const scope = action.split(".")[0];
+  return scope || "";
+}
+
+export function formatHotkeyString(trigger: string): string[] {
+  const os = platform.osType();
+  const parts = trigger.split("+");
+  const labelParts: string[] = [];
+
+  for (const p of parts) {
+    if (os === "macos") {
+      if (p === "Meta") {
+        labelParts.push("⌘");
+      } else if (p === "Shift") {
+        labelParts.push("⇧");
+      } else if (p === "Control") {
+        labelParts.push("⌃");
+      } else if (p === "Alt") {
+        labelParts.push("⌥");
+      } else if (p === "Enter") {
+        // U+21A9 has an emoji presentation, which Chromium's font fallback picks
+        // (a blue glyph among monochrome ones). U+FE0E forces the text form.
+        labelParts.push("↩︎");
+      } else if (p === "Tab") {
+        labelParts.push("⇥");
+      } else if (p === "Backspace") {
+        labelParts.push("⌫");
+      } else if (p === "Delete") {
+        labelParts.push("⌦");
+      } else if (p === "Minus") {
+        labelParts.push("-");
+      } else if (p === "Plus") {
+        labelParts.push("+");
+      } else if (p === "Equal") {
+        labelParts.push("=");
+      } else if (p === "Space") {
+        labelParts.push("Space");
+      } else {
+        labelParts.push(capitalize(p));
+      }
+    } else {
+      if (p === "Control") {
+        labelParts.push("Ctrl");
+      } else if (p === "Space") {
+        labelParts.push("Space");
+      } else {
+        labelParts.push(capitalize(p));
+      }
+    }
+  }
+
+  if (os === "macos") {
+    return labelParts;
+  }
+  return [labelParts.join("+")];
+}
+
+export function useFormattedHotkey(action: HotkeyAction | null): string[] | null {
+  const hotkeys = useAtomValue(hotkeysAtom);
+  const trigger = action != null ? (hotkeys[action]?.[0] ?? null) : null;
+  if (trigger == null) {
+    return null;
+  }
+
+  return formatHotkeyString(trigger);
+}
+
+function compareKeys(keysA: string[], keysB: string[]) {
+  if (keysA.length !== keysB.length) return false;
+  const sortedA = keysA
+    .map((k) => k.toLowerCase())
+    .sort()
+    .join("::");
+  const sortedB = keysB
+    .map((k) => k.toLowerCase())
+    .sort()
+    .join("::");
+  return sortedA === sortedB;
+}
+
+/** Build the full key combination from a KeyboardEvent including modifiers */
+function getKeysFromEvent(e: KeyboardEvent): string[] {
+  const keys: string[] = [];
+  if (e.altKey) keys.push("Alt");
+  if (e.ctrlKey) keys.push("Control");
+  if (e.metaKey) keys.push("Meta");
+  if (e.shiftKey) keys.push("Shift");
+
+  // Add the actual key (use code for layout-insensitive keys)
+  const keyToAdd = layoutInsensitiveKeys.includes(e.code) ? e.code : e.key;
+  keys.push(keyToAdd);
+
+  return keys;
+}
+
+/** Check if a set of pressed keys matches any hotkey for the given action */
+function keysMatchAction(keys: string[], action: HotkeyAction): boolean {
+  const hotkeys = getHotkeys();
+  const hkKeys = hotkeys[action];
+  if (!hkKeys || hkKeys.length === 0) return false;
+
+  for (const hkKey of hkKeys) {
+    const hotkeyParts = hkKey.split("+");
+    if (compareKeys(hotkeyParts, keys)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/** Check if a KeyboardEvent matches a hotkey action */
+export function eventMatchesHotkey(e: KeyboardEvent, action: HotkeyAction): boolean {
+  const keys = getKeysFromEvent(e);
+  return keysMatchAction(keys, action);
+}
diff --git a/apps/yaak-client/hooks/useHttpAuthentication.ts b/apps/yaak-client/hooks/useHttpAuthentication.ts
new file mode 100644
index 0000000..ce2fad1
--- /dev/null
+++ b/apps/yaak-client/hooks/useHttpAuthentication.ts
@@ -0,0 +1,49 @@
+import { useQuery } from "@tanstack/react-query";
+import type { GetHttpAuthenticationSummaryResponse } from "@yaakapp-internal/plugins";
+import { atom, useAtomValue } from "jotai";
+import { useState } from "react";
+import { jotaiStore } from "../lib/jotai";
+import { rpc } from "../lib/rpc";
+import { showErrorToast } from "../lib/toast";
+import { usePluginsKey } from "./usePlugins";
+
+const httpAuthenticationSummariesAtom = atom<GetHttpAuthenticationSummaryResponse[]>([]);
+const orderedHttpAuthenticationAtom = atom((get) =>
+  get(httpAuthenticationSummariesAtom)?.sort((a, b) => a.name.localeCompare(b.name)),
+);
+
+export function useHttpAuthenticationSummaries() {
+  return useAtomValue(orderedHttpAuthenticationAtom);
+}
+
+export function useSubscribeHttpAuthentication() {
+  const [numResults, setNumResults] = useState<number>(0);
+  const pluginsKey = usePluginsKey();
+
+  useQuery({
+    queryKey: ["http_authentication_summaries", pluginsKey],
+    // Fetch periodically until functions are returned
+    // NOTE: visibilitychange (refetchOnWindowFocus) does not work on Windows, so we'll rely on this logic
+    //  to refetch things until that's working again
+    // TODO: Update plugin system to wait for plugins to initialize before sending the first event to them
+    refetchInterval: numResults > 0 ? Number.POSITIVE_INFINITY : 1000,
+    refetchOnMount: true,
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryFn: async () => {
+      try {
+        const result = await rpc<GetHttpAuthenticationSummaryResponse[]>(
+          "cmd_get_http_authentication_summaries",
+        );
+        setNumResults(result.length);
+        jotaiStore.set(httpAuthenticationSummariesAtom, result);
+        return result;
+      } catch (err) {
+        showErrorToast({
+          id: "http-authentication-error",
+          title: "HTTP Authentication Error",
+          message: err,
+        });
+      }
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useHttpAuthenticationConfig.ts b/apps/yaak-client/hooks/useHttpAuthenticationConfig.ts
new file mode 100644
index 0000000..ef661af
--- /dev/null
+++ b/apps/yaak-client/hooks/useHttpAuthenticationConfig.ts
@@ -0,0 +1,84 @@
+import { useQuery } from "@tanstack/react-query";
+import type {
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from "@yaakapp-internal/models";
+import { httpResponsesAtom } from "@yaakapp-internal/models";
+import type { GetHttpAuthenticationConfigResponse, JsonPrimitive } from "@yaakapp-internal/plugins";
+import { useAtomValue } from "jotai";
+import { md5 } from "js-md5";
+import { useState } from "react";
+import { rpc } from "../lib/rpc";
+import { activeEnvironmentIdAtom } from "./useActiveEnvironment";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+
+export function useHttpAuthenticationConfig(
+  authName: string | null,
+  values: Record<string, JsonPrimitive>,
+  model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace,
+) {
+  const workspaceId = useAtomValue(activeWorkspaceIdAtom);
+  const environmentId = useAtomValue(activeEnvironmentIdAtom);
+  const responses = useAtomValue(httpResponsesAtom);
+  const [forceRefreshCounter, setForceRefreshCounter] = useState<number>(0);
+
+  // Some auth handlers like OAuth 2.0 show the current token after a successful request. To
+  // handle that, we'll force the auth to re-fetch after each new response closes
+  const responseKey = md5(
+    responses
+      .filter((r) => r.state === "closed")
+      .map((r) => r.id)
+      .join(":"),
+  );
+
+  return useQuery({
+    queryKey: [
+      "http_authentication_config",
+      model,
+      authName,
+      values,
+      responseKey,
+      forceRefreshCounter,
+      workspaceId,
+      environmentId,
+    ],
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryFn: async () => {
+      if (authName == null || authName === "inherit") return null;
+      const config = await rpc<GetHttpAuthenticationConfigResponse>(
+        "cmd_get_http_authentication_config",
+        {
+          authName,
+          values,
+          model,
+          environmentId,
+        },
+      );
+
+      return {
+        ...config,
+        actions: config.actions?.map((a, i) => ({
+          ...a,
+          call: async (
+            model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace,
+          ) => {
+            await rpc("cmd_call_http_authentication_action", {
+              pluginRefId: config.pluginRefId,
+              actionIndex: i,
+              authName,
+              values,
+              model,
+              environmentId,
+            });
+
+            // Ensure the config is refreshed after the action is done
+            setForceRefreshCounter((c) => c + 1);
+          },
+        })),
+      };
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useHttpRequestActions.ts b/apps/yaak-client/hooks/useHttpRequestActions.ts
new file mode 100644
index 0000000..11efe70
--- /dev/null
+++ b/apps/yaak-client/hooks/useHttpRequestActions.ts
@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+import type { HttpRequest } from "@yaakapp-internal/models";
+import type {
+  CallHttpRequestActionRequest,
+  GetHttpRequestActionsResponse,
+  HttpRequestAction,
+} from "@yaakapp-internal/plugins";
+import { useMemo } from "react";
+import { rpc } from "../lib/rpc";
+import { usePluginsKey } from "./usePlugins";
+
+export type CallableHttpRequestAction = Pick<HttpRequestAction, "label" | "icon"> & {
+  call: (httpRequest: HttpRequest) => Promise<void>;
+};
+
+export function useHttpRequestActions() {
+  const pluginsKey = usePluginsKey();
+
+  const actionsResult = useQuery<CallableHttpRequestAction[]>({
+    queryKey: ["http_request_actions", pluginsKey],
+    queryFn: () => getHttpRequestActions(),
+  });
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  const actions = useMemo(() => {
+    return actionsResult.data ?? [];
+  }, [JSON.stringify(actionsResult.data)]);
+
+  return actions;
+}
+
+export async function getHttpRequestActions() {
+  const responses = await rpc<GetHttpRequestActionsResponse[]>("cmd_http_request_actions");
+  const actions = responses.flatMap((r) =>
+    r.actions.map((a, i) => ({
+      label: a.label,
+      icon: a.icon,
+      call: async (httpRequest: HttpRequest) => {
+        const payload: CallHttpRequestActionRequest = {
+          index: i,
+          pluginRefId: r.pluginRefId,
+          args: { httpRequest },
+        };
+        await rpc("cmd_call_http_request_action", { req: payload });
+      },
+    })),
+  );
+
+  return actions;
+}
diff --git a/apps/yaak-client/hooks/useHttpRequestBody.ts b/apps/yaak-client/hooks/useHttpRequestBody.ts
new file mode 100644
index 0000000..eb86ef0
--- /dev/null
+++ b/apps/yaak-client/hooks/useHttpRequestBody.ts
@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { rpc } from "../lib/rpc";
+
+export function useHttpRequestBody(response: HttpResponse | null) {
+  return useQuery({
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryKey: ["request_body", response?.id, response?.state, response?.requestContentLength],
+    enabled: (response?.requestContentLength ?? 0) > 0,
+    queryFn: async () => {
+      return getRequestBodyText(response);
+    },
+  });
+}
+
+export async function getRequestBodyText(response: HttpResponse | null) {
+  if (response?.id == null) {
+    return null;
+  }
+
+  const data = await rpc<number[] | null>("cmd_http_request_body", {
+    responseId: response.id,
+  });
+
+  if (data == null) {
+    return null;
+  }
+
+  const body = new Uint8Array(data);
+  const bodyText = new TextDecoder("utf-8", { fatal: false }).decode(body);
+  return { body, bodyText };
+}
diff --git a/apps/yaak-client/hooks/useHttpResponseEvents.ts b/apps/yaak-client/hooks/useHttpResponseEvents.ts
new file mode 100644
index 0000000..1e39a43
--- /dev/null
+++ b/apps/yaak-client/hooks/useHttpResponseEvents.ts
@@ -0,0 +1,32 @@
+import type { HttpResponse, HttpResponseEvent } from "@yaakapp-internal/models";
+import {
+  httpResponseEventsAtom,
+  mergeModelsInStore,
+  replaceModelsInStore,
+} from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { fireAndForget } from "../lib/fireAndForget";
+import { rpc } from "../lib/rpc";
+
+export function useHttpResponseEvents(response: HttpResponse | null) {
+  const allEvents = useAtomValue(httpResponseEventsAtom);
+
+  useEffect(() => {
+    if (response?.id == null) {
+      replaceModelsInStore("http_response_event", []);
+      return;
+    }
+
+    // Fetch events from database, filtering out events from other responses and merging atomically
+    fireAndForget(
+      rpc<HttpResponseEvent[]>("cmd_get_http_response_events", { responseId: response.id }).then(
+        (events) =>
+          mergeModelsInStore("http_response_event", events, (e) => e.responseId === response.id),
+      ),
+    );
+  }, [response?.id]);
+
+  const events = allEvents.filter((e) => e.responseId === response?.id);
+  return { data: events, error: null, isLoading: false };
+}
diff --git a/apps/yaak-client/hooks/useInheritedAuthentication.ts b/apps/yaak-client/hooks/useInheritedAuthentication.ts
new file mode 100644
index 0000000..e8f4127
--- /dev/null
+++ b/apps/yaak-client/hooks/useInheritedAuthentication.ts
@@ -0,0 +1,46 @@
+import type {
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from "@yaakapp-internal/models";
+import { foldersAtom, workspacesAtom } from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+
+const ancestorsAtom = atom((get) => [...get(foldersAtom), ...get(workspacesAtom)]);
+
+export type AuthenticatedModel = HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace;
+
+export function useInheritedAuthentication(baseModel: AuthenticatedModel | null) {
+  const parents = useAtomValue(ancestorsAtom);
+
+  if (baseModel == null) return null;
+
+  const next = (child: AuthenticatedModel) => {
+    // We hit the top
+    if (child.model === "workspace") {
+      return child.authenticationType == null ? null : child;
+    }
+
+    // Has valid auth
+    if (child.authenticationType !== null) {
+      return child;
+    }
+
+    // Recurse up the tree
+    const parent = parents.find((p) => {
+      if (child.folderId) return p.id === child.folderId;
+      return p.id === child.workspaceId;
+    });
+
+    // Failed to find parent (should never happen)
+    if (parent == null) {
+      return null;
+    }
+
+    return next(parent);
+  };
+
+  return next(baseModel);
+}
diff --git a/apps/yaak-client/hooks/useInheritedHeaders.ts b/apps/yaak-client/hooks/useInheritedHeaders.ts
new file mode 100644
index 0000000..c8ff511
--- /dev/null
+++ b/apps/yaak-client/hooks/useInheritedHeaders.ts
@@ -0,0 +1,53 @@
+import type {
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  HttpRequestHeader,
+  WebsocketRequest,
+  Workspace,
+} from "@yaakapp-internal/models";
+import { foldersAtom, workspacesAtom } from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+import { defaultHeaders } from "../lib/defaultHeaders";
+
+const ancestorsAtom = atom((get) => [...get(foldersAtom), ...get(workspacesAtom)]);
+
+export type HeaderModel = HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace;
+
+export function useInheritedHeaders(baseModel: HeaderModel | null) {
+  const parents = useAtomValue(ancestorsAtom);
+
+  if (baseModel == null) return [];
+  if (baseModel.model === "workspace") return defaultHeaders;
+
+  const next = (child: HeaderModel): HttpRequestHeader[] => {
+    // Short-circuit at workspace level - return global defaults + workspace headers
+    if (child.model === "workspace") {
+      return [...defaultHeaders, ...child.headers];
+    }
+
+    // Recurse up the tree
+    const parent = parents.find((p) => {
+      if (child.folderId) return p.id === child.folderId;
+      return p.id === child.workspaceId;
+    });
+
+    // Failed to find parent (should never happen)
+    if (parent == null) {
+      return [];
+    }
+
+    const headers = next(parent);
+    return [...headers, ...parent.headers];
+  };
+
+  const allHeaders = next(baseModel);
+
+  // Deduplicate by header name (case-insensitive), keeping the latest (most specific) value
+  const headersByName = new Map<string, HttpRequestHeader>();
+  for (const header of allHeaders) {
+    headersByName.set(header.name.toLowerCase(), header);
+  }
+
+  return Array.from(headersByName.values());
+}
diff --git a/apps/yaak-client/hooks/useInstallPlugin.ts b/apps/yaak-client/hooks/useInstallPlugin.ts
new file mode 100644
index 0000000..70f1518
--- /dev/null
+++ b/apps/yaak-client/hooks/useInstallPlugin.ts
@@ -0,0 +1,11 @@
+import { installPluginFromDirectory } from "@yaakapp-internal/plugins";
+import { useFastMutation } from "./useFastMutation";
+
+export function useInstallPlugin() {
+  return useFastMutation<void, unknown, string>({
+    mutationKey: ["install_plugin"],
+    mutationFn: async (directory: string) => {
+      await installPluginFromDirectory(directory);
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useIntrospectGraphQL.ts b/apps/yaak-client/hooks/useIntrospectGraphQL.ts
new file mode 100644
index 0000000..40550ee
--- /dev/null
+++ b/apps/yaak-client/hooks/useIntrospectGraphQL.ts
@@ -0,0 +1,268 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import type { GraphQlIntrospection, HttpRequest } from "@yaakapp-internal/models";
+import { platform } from "@yaakapp-internal/platform";
+import type { GraphQLSchema, IntrospectionQuery } from "graphql";
+import { buildClientSchema, getIntrospectionQuery } from "graphql";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { tryBuildIntrospectionFromFile } from "../lib/graphqlSchema";
+import { minPromiseMillis } from "../lib/minPromiseMillis";
+import { sendEphemeralRequest } from "../lib/sendEphemeralRequest";
+import { useActiveEnvironment } from "./useActiveEnvironment";
+import { useGraphQLSchemaFile } from "./useGraphQLSchemaFile";
+import { useDebouncedValue } from "@yaakapp-internal/ui";
+import { rpc } from "../lib/rpc";
+
+const introspectionRequestBody = JSON.stringify({
+  query: getIntrospectionQuery(),
+  operationName: "IntrospectionQuery",
+});
+
+export function useIntrospectGraphQL(
+  baseRequest: HttpRequest,
+  options: { disabled?: boolean } = {},
+) {
+  // Debounce the request because it can change rapidly, and we don't
+  // want to send so too many requests.
+  const debouncedRequest = useDebouncedValue(baseRequest);
+  const activeEnvironment = useActiveEnvironment();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>();
+  const [schema, setSchema] = useState<GraphQLSchema | null>(null);
+  const queryClient = useQueryClient();
+
+  const introspection = useIntrospectionResult(baseRequest);
+
+  // The schema's source. Outlives the introspection row it produces, so a
+  // request configured with a file keeps working after the row is swept.
+  const schemaFile = useGraphQLSchemaFile(baseRequest.id);
+  const filePath = schemaFile.value ?? null;
+
+  const upsertIntrospection = useCallback(
+    async (content: string | null) => {
+      const v = await rpc<GraphQlIntrospection>("models_upsert_graphql_introspection", {
+        requestId: baseRequest.id,
+        workspaceId: baseRequest.workspaceId,
+        content: content ?? "",
+      });
+
+      // Update local introspection
+      queryClient.setQueryData(["introspection", baseRequest.id], v);
+    },
+    [baseRequest.id, baseRequest.workspaceId, queryClient],
+  );
+
+  const refetch = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(undefined);
+
+      const args = {
+        ...baseRequest,
+        bodyType: "application/json",
+        body: { text: introspectionRequestBody },
+      };
+      const { response, body } = await minPromiseMillis(
+        sendEphemeralRequest(args, activeEnvironment?.id ?? null),
+        700,
+      );
+
+      if (response.error) {
+        return setError(response.error);
+      }
+
+      // The send hands back the only copy of the body — an unsaved response has
+      // nothing on disk and no row to read it back from
+      const bodyText = new TextDecoder("utf-8").decode(new Uint8Array(body));
+      if (response.status < 200 || response.status >= 300) {
+        return setError(
+          `Request failed with status ${response.status}.\nThe response text is:\n\n${bodyText}`,
+        );
+      }
+
+      if (bodyText === "") {
+        return setError("Empty body returned in response");
+      }
+
+      console.log(`Got introspection response for ${baseRequest.url}`, bodyText);
+      await upsertIntrospection(bodyText);
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [activeEnvironment?.id, baseRequest, upsertIntrospection]);
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    // Skip introspection if automatic is disabled and we already have one
+    if (options.disabled) {
+      return;
+    }
+
+    // A request pointed at a file gets its schema from that file. Introspecting
+    // here would overwrite it on the next URL edit.
+    if (filePath != null) {
+      return;
+    }
+
+    refetch().catch(console.error);
+  }, [
+    baseRequest.id,
+    debouncedRequest.url,
+    debouncedRequest.method,
+    activeEnvironment?.id,
+    filePath,
+  ]);
+
+  // Clears the schema, not the source. Removing a file source is a separate
+  // action, because the source is what would rebuild this a moment later.
+  const clear = useCallback(async () => {
+    setError("");
+    setSchema(null);
+    await upsertIntrospection(null);
+  }, [upsertIntrospection]);
+
+  // Reads a schema file and produces an introspection row from it, the same way
+  // `refetch` produces one from a server. Does not touch the stored source.
+  const introspectFromFile = useCallback(
+    async (path: string): Promise<{ ok: true } | { ok: false; error: string }> => {
+      try {
+        setIsLoading(true);
+        setError(undefined);
+
+        const fileContent = await platform.files.readText(path);
+        const result = tryBuildIntrospectionFromFile(fileContent);
+
+        if ("error" in result) {
+          setError(result.error);
+          return { ok: false, error: result.error };
+        }
+
+        await upsertIntrospection(result.content);
+        return { ok: true };
+      } catch (err) {
+        // The host rejects with a bare string for a missing or unreadable path,
+        // so this can't assume an Error.
+        const message = err instanceof Error ? err.message : String(err);
+        setError(message);
+        return { ok: false, error: message };
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [upsertIntrospection],
+  );
+
+  // Points the request at a file and immediately builds its schema from it.
+  const loadFromFile = useCallback(
+    async (path: string) => {
+      const result = await introspectFromFile(path);
+      if (result.ok) await schemaFile.set(path);
+      return result;
+    },
+    [introspectFromFile, schemaFile],
+  );
+
+  const reloadFromFile = useCallback(async () => {
+    if (filePath == null) return { ok: false as const, error: "No schema file to reload" };
+    return introspectFromFile(filePath);
+  }, [filePath, introspectFromFile]);
+
+  // The file-source counterpart of automatic introspection: re-read the file
+  // when the request is opened, so an edited schema is picked up without asking.
+  //
+  // A missing row is repaired even with the setting off — that is recovering
+  // from the 7-day sweep, not keeping the schema fresh, and skipping it would
+  // make the schema disappear with no visible cause.
+  const reloadedFor = useRef<string | null>(null);
+  useEffect(() => {
+    if (filePath == null || introspection.isLoading) return;
+    // Only attempt once per path, so an unreadable file doesn't spin.
+    if (reloadedFor.current === filePath) return;
+
+    const hasContent = (introspection.data?.content ?? "") !== "";
+    if (hasContent && options.disabled) return;
+
+    reloadedFor.current = filePath;
+    introspectFromFile(filePath).catch(console.error);
+  }, [
+    filePath,
+    introspection.data?.content,
+    introspection.isLoading,
+    introspectFromFile,
+    options.disabled,
+  ]);
+
+  // Stops using the file. The schema goes with it, since the file is what
+  // produced it; introspection repopulates if it's set to run automatically.
+  const removeSchemaFile = useCallback(async () => {
+    setError("");
+    setSchema(null);
+    await schemaFile.set(null);
+    await upsertIntrospection(null);
+  }, [schemaFile, upsertIntrospection]);
+
+  useEffect(() => {
+    if (introspection.data?.content == null || introspection.data.content === "") {
+      return;
+    }
+
+    const parseResult = tryParseIntrospectionToSchema(introspection.data.content);
+    if ("error" in parseResult) {
+      setError(parseResult.error);
+    } else {
+      setSchema(parseResult.schema);
+    }
+  }, [introspection.data?.content]);
+
+  return {
+    schema,
+    isLoading,
+    error,
+    refetch,
+    clear,
+    loadFromFile,
+    reloadFromFile,
+    removeSchemaFile,
+    filePath,
+  };
+}
+
+function useIntrospectionResult(request: HttpRequest) {
+  return useQuery({
+    queryKey: ["introspection", request.id],
+    queryFn: async () =>
+      rpc<GraphQlIntrospection | null>("models_get_graphql_introspection", {
+        requestId: request.id,
+      }),
+  });
+}
+
+export function useCurrentGraphQLSchema(request: HttpRequest) {
+  const result = useIntrospectionResult(request);
+  return useMemo(() => {
+    if (result.data == null) return null;
+    if (result.data.content == null || result.data.content === "") return null;
+    const r = tryParseIntrospectionToSchema(result.data.content);
+    return "error" in r ? null : r.schema;
+  }, [result.data]);
+}
+
+function tryParseIntrospectionToSchema(
+  content: string,
+): { schema: GraphQLSchema } | { error: string } {
+  let parsedResponse: IntrospectionQuery;
+  try {
+    parsedResponse = JSON.parse(content).data;
+    // oxlint-disable-next-line no-explicit-any
+  } catch (e: any) {
+    return { error: String("message" in e ? e.message : e) };
+  }
+
+  try {
+    return { schema: buildClientSchema(parsedResponse, {}) };
+    // oxlint-disable-next-line no-explicit-any
+  } catch (e: any) {
+    return { error: String("message" in e ? e.message : e) };
+  }
+}
diff --git a/apps/yaak-client/hooks/useIsEncryptionEnabled.ts b/apps/yaak-client/hooks/useIsEncryptionEnabled.ts
new file mode 100644
index 0000000..6a71779
--- /dev/null
+++ b/apps/yaak-client/hooks/useIsEncryptionEnabled.ts
@@ -0,0 +1,7 @@
+import { useAtomValue } from "jotai";
+import { activeWorkspaceMetaAtom } from "./useActiveWorkspace";
+
+export function useIsEncryptionEnabled() {
+  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
+  return workspaceMeta?.encryptionKey != null;
+}
diff --git a/apps/yaak-client/hooks/useKeyValue.ts b/apps/yaak-client/hooks/useKeyValue.ts
new file mode 100644
index 0000000..8059a9f
--- /dev/null
+++ b/apps/yaak-client/hooks/useKeyValue.ts
@@ -0,0 +1,90 @@
+import deepEqual from "@gilbarbara/deep-equal";
+import { useMutation } from "@tanstack/react-query";
+import { keyValuesAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { useCallback, useMemo } from "react";
+import { jotaiStore } from "../lib/jotai";
+import { buildKeyValueKey, extractKeyValueOrFallback, setKeyValue } from "../lib/keyValueStore";
+
+const DEFAULT_NAMESPACE = "global";
+
+export function useKeyValue<T extends object | boolean | number | string | null>({
+  namespace = DEFAULT_NAMESPACE,
+  key,
+  fallback,
+}: {
+  namespace?: "global" | "no_sync" | "license";
+  key: string | string[];
+  fallback: T;
+}) {
+  const { value, isLoading } = useAtomValue(
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- Only create a new atom when the key changes. Fallback might not be a stable reference, so we don't want to refresh on that.
+    useMemo(
+      () =>
+        selectAtom(
+          keyValuesAtom,
+          (keyValues) => {
+            const keyValue =
+              keyValues?.find((kv) => buildKeyValueKey(kv.key) === buildKeyValueKey(key)) ?? null;
+            const value = keyValues == null ? null : extractKeyValueOrFallback(keyValue, fallback);
+            const isLoading = keyValues == null;
+            return { value, isLoading };
+          },
+          (a, b) => deepEqual(a, b),
+        ),
+      [buildKeyValueKey(key)],
+    ),
+  );
+
+  const { mutateAsync } = useMutation<void, unknown, T>({
+    mutationKey: ["set_key_value", namespace, key],
+    mutationFn: (value) => setKeyValue<T>({ namespace, key, value }),
+  });
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  const set = useCallback(
+    async (valueOrUpdate: ((v: T) => T) | T) => {
+      if (typeof valueOrUpdate === "function") {
+        const newV = valueOrUpdate(value ?? fallback);
+        if (newV === value) return;
+        await mutateAsync(newV);
+      } else {
+        // TODO: Make this only update if the value is different. I tried this but it seems query.data
+        //  is stale.
+        await mutateAsync(valueOrUpdate);
+      }
+    },
+    [typeof key === "string" ? key : key.join("::"), namespace, value],
+  );
+
+  const reset = useCallback(async () => mutateAsync(fallback), [fallback, mutateAsync]);
+
+  return useMemo(
+    () => ({
+      value,
+      isLoading,
+      set,
+      reset,
+    }),
+    [isLoading, reset, set, value],
+  );
+}
+
+export function getKeyValue<T extends object | boolean | number | string | null>({
+  namespace,
+  key,
+  fallback,
+}: {
+  namespace?: "global" | "no_sync" | "license";
+  key: string | string[];
+  fallback: T;
+}) {
+  const keyValues = jotaiStore.get(keyValuesAtom);
+  const keyValue =
+    keyValues?.find(
+      (kv) => kv.namespace === namespace && buildKeyValueKey(kv.key) === buildKeyValueKey(key),
+    ) ?? null;
+  const value = extractKeyValueOrFallback(keyValue, fallback);
+  return value;
+}
diff --git a/apps/yaak-client/hooks/useKeyboardEvent.ts b/apps/yaak-client/hooks/useKeyboardEvent.ts
new file mode 100644
index 0000000..4e8ec78
--- /dev/null
+++ b/apps/yaak-client/hooks/useKeyboardEvent.ts
@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+export function useKeyboardEvent(
+  event: "keyup" | "keydown",
+  key: KeyboardEvent["key"],
+  cb: () => void,
+) {
+  // oxlint-disable-next-line react-hooks/exhaustive-deps -- Don't have `cb` as a dep for caller convenience
+  useEffect(() => {
+    const fn = (e: KeyboardEvent) => {
+      if (e.key === key) cb();
+    };
+    document.addEventListener(event, fn);
+    return () => document.removeEventListener(event, fn);
+  }, [event]);
+}
diff --git a/apps/yaak-client/hooks/useLatestGrpcConnection.ts b/apps/yaak-client/hooks/useLatestGrpcConnection.ts
new file mode 100644
index 0000000..75740d8
--- /dev/null
+++ b/apps/yaak-client/hooks/useLatestGrpcConnection.ts
@@ -0,0 +1,7 @@
+import type { GrpcConnection } from "@yaakapp-internal/models";
+import { grpcConnectionsAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+
+export function useLatestGrpcConnection(requestId: string | null): GrpcConnection | null {
+  return useAtomValue(grpcConnectionsAtom).find((c) => c.requestId === requestId) ?? null;
+}
diff --git a/apps/yaak-client/hooks/useLatestHttpResponse.ts b/apps/yaak-client/hooks/useLatestHttpResponse.ts
new file mode 100644
index 0000000..219e5f1
--- /dev/null
+++ b/apps/yaak-client/hooks/useLatestHttpResponse.ts
@@ -0,0 +1,7 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { httpResponsesAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+
+export function useLatestHttpResponse(requestId: string | null): HttpResponse | null {
+  return useAtomValue(httpResponsesAtom).find((r) => r.requestId === requestId) ?? null;
+}
diff --git a/apps/yaak-client/hooks/useModelAncestors.ts b/apps/yaak-client/hooks/useModelAncestors.ts
new file mode 100644
index 0000000..fe7a938
--- /dev/null
+++ b/apps/yaak-client/hooks/useModelAncestors.ts
@@ -0,0 +1,41 @@
+import type { AnyModel, Folder, Workspace } from "@yaakapp-internal/models";
+import { foldersAtom, workspacesAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+
+type ModelAncestor = Folder | Workspace;
+
+export function useModelAncestors(m: AnyModel | null) {
+  const folders = useAtomValue(foldersAtom);
+  const workspaces = useAtomValue(workspacesAtom);
+
+  return useMemo(() => getModelAncestors(folders, workspaces, m), [folders, workspaces, m]);
+}
+
+export function getModelAncestors(
+  folders: Folder[],
+  workspaces: Workspace[],
+  currentModel: AnyModel | null,
+): ModelAncestor[] {
+  if (currentModel == null) return [];
+
+  const parentFolder =
+    "folderId" in currentModel && currentModel.folderId
+      ? folders.find((f) => f.id === currentModel.folderId)
+      : null;
+
+  if (parentFolder != null) {
+    return [parentFolder, ...getModelAncestors(folders, workspaces, parentFolder)];
+  }
+
+  const parentWorkspace =
+    "workspaceId" in currentModel && currentModel.workspaceId
+      ? workspaces.find((w) => w.id === currentModel.workspaceId)
+      : null;
+
+  if (parentWorkspace != null) {
+    return [parentWorkspace, ...getModelAncestors(folders, workspaces, parentWorkspace)];
+  }
+
+  return [];
+}
diff --git a/apps/yaak-client/hooks/useParentFolders.ts b/apps/yaak-client/hooks/useParentFolders.ts
new file mode 100644
index 0000000..9cea73a
--- /dev/null
+++ b/apps/yaak-client/hooks/useParentFolders.ts
@@ -0,0 +1,24 @@
+import type { Folder, GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import { foldersAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+
+export function useParentFolders(m: Folder | HttpRequest | GrpcRequest | WebsocketRequest | null) {
+  const folders = useAtomValue(foldersAtom);
+
+  // Key on folderId, not the model itself, so edits to the model (eg. every URL
+  // keystroke replacing the active request) don't produce a new array identity
+  const folderId = m?.folderId ?? null;
+  return useMemo(() => getParentFolders(folders, folderId), [folders, folderId]);
+}
+
+function getParentFolders(folders: Folder[], folderId: string | null): Folder[] {
+  if (folderId == null) return [];
+
+  const parentFolder = folders.find((f) => f.id === folderId);
+  if (parentFolder == null) {
+    return [];
+  }
+
+  return [parentFolder, ...getParentFolders(folders, parentFolder.folderId ?? null)];
+}
diff --git a/apps/yaak-client/hooks/usePinnedGrpcConnection.ts b/apps/yaak-client/hooks/usePinnedGrpcConnection.ts
new file mode 100644
index 0000000..de3e940
--- /dev/null
+++ b/apps/yaak-client/hooks/usePinnedGrpcConnection.ts
@@ -0,0 +1,84 @@
+import type { GrpcConnection, GrpcEvent } from "@yaakapp-internal/models";
+import {
+  grpcConnectionsAtom,
+  grpcEventsAtom,
+  mergeModelsInStore,
+  replaceModelsInStore,
+} from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+import { useEffect, useMemo } from "react";
+import { fireAndForget } from "../lib/fireAndForget";
+import { atomWithKVStorage } from "../lib/atoms/atomWithKVStorage";
+import { activeRequestIdAtom } from "./useActiveRequestId";
+import { rpc } from "../lib/rpc";
+
+const pinnedGrpcConnectionIdsAtom = atomWithKVStorage<Record<string, string | null>>(
+  "pinned-grpc-connection-ids",
+  {},
+);
+
+export const pinnedGrpcConnectionIdAtom = atom(
+  (get) => {
+    const activeRequestId = get(activeRequestIdAtom);
+    const activeConnections = get(activeGrpcConnections);
+    const latestConnection = activeConnections[0] ?? null;
+    if (!activeRequestId) return null;
+
+    const key = recordKey(activeRequestId, latestConnection);
+    return get(pinnedGrpcConnectionIdsAtom)[key] ?? null;
+  },
+  (get, set, id: string | null) => {
+    const activeRequestId = get(activeRequestIdAtom);
+    const activeConnections = get(activeGrpcConnections);
+    const latestConnection = activeConnections[0] ?? null;
+    if (!activeRequestId) return;
+
+    const key = recordKey(activeRequestId, latestConnection);
+    set(pinnedGrpcConnectionIdsAtom, (prev) => ({
+      ...prev,
+      [key]: id,
+    }));
+  },
+);
+
+function recordKey(activeRequestId: string | null, latestConnection: GrpcConnection | null) {
+  return `${activeRequestId}-${latestConnection?.id ?? "none"}`;
+}
+
+export const activeGrpcConnections = atom<GrpcConnection[]>((get) => {
+  const activeRequestId = get(activeRequestIdAtom) ?? "n/a";
+  return get(grpcConnectionsAtom).filter((c) => c.requestId === activeRequestId) ?? [];
+});
+
+export const activeGrpcConnectionAtom = atom<GrpcConnection | null>((get) => {
+  const activeRequestId = get(activeRequestIdAtom) ?? "n/a";
+  const activeConnections = get(activeGrpcConnections);
+  const latestConnection = activeConnections[0] ?? null;
+  const pinnedConnectionId = get(pinnedGrpcConnectionIdsAtom)[
+    recordKey(activeRequestId, latestConnection)
+  ];
+  return activeConnections.find((c) => c.id === pinnedConnectionId) ?? activeConnections[0] ?? null;
+});
+
+export function useGrpcEvents(connectionId: string | null) {
+  const allEvents = useAtomValue(grpcEventsAtom);
+
+  useEffect(() => {
+    if (connectionId == null) {
+      replaceModelsInStore("grpc_event", []);
+      return;
+    }
+
+    // Fetch events from database, filtering out events from other connections and merging atomically
+    fireAndForget(
+      rpc<GrpcEvent[]>("models_grpc_events", { connectionId }).then((events) =>
+        mergeModelsInStore("grpc_event", events, (e) => e.connectionId === connectionId),
+      ),
+    );
+  }, [connectionId]);
+
+  return useMemo(
+    () => allEvents.filter((e) => e.connectionId === connectionId),
+    [allEvents, connectionId],
+  );
+}
diff --git a/apps/yaak-client/hooks/usePinnedHttpResponse.ts b/apps/yaak-client/hooks/usePinnedHttpResponse.ts
new file mode 100644
index 0000000..b1ecc5c
--- /dev/null
+++ b/apps/yaak-client/hooks/usePinnedHttpResponse.ts
@@ -0,0 +1,29 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { httpResponsesAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useKeyValue } from "./useKeyValue";
+import { useLatestHttpResponse } from "./useLatestHttpResponse";
+
+export function usePinnedHttpResponse(activeRequestId: string) {
+  const latestResponse = useLatestHttpResponse(activeRequestId);
+  const { set, value: pinnedResponseId } = useKeyValue<string | null>({
+    // Key on the latest response instead of activeRequest because responses change out of band of active request
+    key: ["pinned_http_response_id", latestResponse?.id ?? "n/a"],
+    fallback: null,
+    namespace: "global",
+  });
+  const allResponses = useAtomValue(httpResponsesAtom);
+  const responses = allResponses.filter((r) => r.requestId === activeRequestId);
+  const activeResponse: HttpResponse | null =
+    responses.find((r) => r.id === pinnedResponseId) ?? latestResponse;
+
+  const setPinnedResponseId = async (id: string) => {
+    if (pinnedResponseId === id) {
+      await set(null);
+    } else {
+      await set(id);
+    }
+  };
+
+  return { activeResponse, setPinnedResponseId, pinnedResponseId, responses } as const;
+}
diff --git a/apps/yaak-client/hooks/usePinnedWebsocketConnection.ts b/apps/yaak-client/hooks/usePinnedWebsocketConnection.ts
new file mode 100644
index 0000000..bf590da
--- /dev/null
+++ b/apps/yaak-client/hooks/usePinnedWebsocketConnection.ts
@@ -0,0 +1,71 @@
+import type { WebsocketConnection, WebsocketEvent } from "@yaakapp-internal/models";
+import {
+  mergeModelsInStore,
+  replaceModelsInStore,
+  websocketConnectionsAtom,
+  websocketEventsAtom,
+} from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+import { useEffect, useMemo } from "react";
+import { fireAndForget } from "../lib/fireAndForget";
+import { atomWithKVStorage } from "../lib/atoms/atomWithKVStorage";
+import { jotaiStore } from "../lib/jotai";
+import { activeRequestIdAtom } from "./useActiveRequestId";
+import { rpc } from "../lib/rpc";
+
+const pinnedWebsocketConnectionIdAtom = atomWithKVStorage<Record<string, string | null>>(
+  "pinned-websocket-connection-ids",
+  {},
+);
+
+function recordKey(activeRequestId: string | null, latestConnection: WebsocketConnection | null) {
+  return `${activeRequestId}-${latestConnection?.id ?? "none"}`;
+}
+
+export const activeWebsocketConnectionsAtom = atom<WebsocketConnection[]>((get) => {
+  const activeRequestId = get(activeRequestIdAtom) ?? "n/a";
+  return get(websocketConnectionsAtom).filter((c) => c.requestId === activeRequestId) ?? [];
+});
+
+export const activeWebsocketConnectionAtom = atom<WebsocketConnection | null>((get) => {
+  const activeRequestId = get(activeRequestIdAtom) ?? "n/a";
+  const activeConnections = get(activeWebsocketConnectionsAtom);
+  const latestConnection = activeConnections[0] ?? null;
+  const pinnedConnectionId = get(pinnedWebsocketConnectionIdAtom)[
+    recordKey(activeRequestId, latestConnection)
+  ];
+  return activeConnections.find((c) => c.id === pinnedConnectionId) ?? activeConnections[0] ?? null;
+});
+
+export function setPinnedWebsocketConnectionId(id: string | null) {
+  const activeRequestId = jotaiStore.get(activeRequestIdAtom);
+  const activeConnections = jotaiStore.get(activeWebsocketConnectionsAtom);
+  const latestConnection = activeConnections[0] ?? null;
+  if (activeRequestId == null) return;
+  jotaiStore.set(pinnedWebsocketConnectionIdAtom, (prev) => {
+    return { ...prev, [recordKey(activeRequestId, latestConnection)]: id };
+  });
+}
+
+export function useWebsocketEvents(connectionId: string | null) {
+  const allEvents = useAtomValue(websocketEventsAtom);
+
+  useEffect(() => {
+    if (connectionId == null) {
+      replaceModelsInStore("websocket_event", []);
+      return;
+    }
+
+    // Fetch events from database, filtering out events from other connections and merging atomically
+    fireAndForget(
+      rpc<WebsocketEvent[]>("models_websocket_events", { connectionId }).then((events) =>
+        mergeModelsInStore("websocket_event", events, (e) => e.connectionId === connectionId),
+      ),
+    );
+  }, [connectionId]);
+
+  return useMemo(
+    () => allEvents.filter((e) => e.connectionId === connectionId),
+    [allEvents, connectionId],
+  );
+}
diff --git a/apps/yaak-client/hooks/usePlatformEvent.ts b/apps/yaak-client/hooks/usePlatformEvent.ts
new file mode 100644
index 0000000..0c2253f
--- /dev/null
+++ b/apps/yaak-client/hooks/usePlatformEvent.ts
@@ -0,0 +1,12 @@
+import { platform } from "@yaakapp-internal/platform";
+import { useEffect, useRef } from "react";
+
+/** Subscribe to a backend event for the lifetime of the component. */
+export function usePlatformEvent<T>(event: string, fn: (payload: T) => void) {
+  const handlerRef = useRef(fn);
+  useEffect(() => {
+    handlerRef.current = fn;
+  }, [fn]);
+
+  useEffect(() => platform.listen<T>(event, (payload) => handlerRef.current(payload)), [event]);
+}
diff --git a/apps/yaak-client/hooks/usePluginInfo.ts b/apps/yaak-client/hooks/usePluginInfo.ts
new file mode 100644
index 0000000..4a7f345
--- /dev/null
+++ b/apps/yaak-client/hooks/usePluginInfo.ts
@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Plugin } from "@yaakapp-internal/models";
+import { pluginsAtom } from "@yaakapp-internal/models";
+import type { PluginMetadata } from "@yaakapp-internal/plugins";
+import { useAtomValue } from "jotai";
+import { queryClient } from "../lib/queryClient";
+import { rpc } from "../lib/rpc";
+
+function pluginInfoKey(id: string | null, plugin: Plugin | null) {
+  return ["plugin_info", id ?? "n/a", plugin?.updatedAt ?? "n/a"];
+}
+
+export function usePluginInfo(id: string | null) {
+  const plugins = useAtomValue(pluginsAtom);
+  // Get the plugin so we can refetch whenever it's updated
+  const plugin = plugins.find((p) => p.id === id);
+  return useQuery({
+    queryKey: pluginInfoKey(id, plugin ?? null),
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryFn: () => {
+      if (id == null) return null;
+      return rpc<PluginMetadata>("cmd_plugin_info", { id });
+    },
+  });
+}
+
+export function invalidateAllPluginInfo() {
+  queryClient.invalidateQueries({ queryKey: ["plugin_info"] }).catch(console.error);
+}
diff --git a/apps/yaak-client/hooks/usePlugins.ts b/apps/yaak-client/hooks/usePlugins.ts
new file mode 100644
index 0000000..f6fc1a4
--- /dev/null
+++ b/apps/yaak-client/hooks/usePlugins.ts
@@ -0,0 +1,37 @@
+import { useMutation } from "@tanstack/react-query";
+import { changeModelStoreWorkspace, pluginsAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { jotaiStore } from "../lib/jotai";
+import { minPromiseMillis } from "../lib/minPromiseMillis";
+import { rpc } from "../lib/rpc";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+import { useDebouncedValue } from "@yaakapp-internal/ui";
+import { invalidateAllPluginInfo } from "./usePluginInfo";
+
+export function usePluginsKey() {
+  const pluginKey = useAtomValue(pluginsAtom)
+    .map((p) => p.id + p.updatedAt)
+    .join(",");
+
+  // Debounce plugins both for efficiency and to give plugins a chance to reload after the DB updates
+  return useDebouncedValue(pluginKey, 1000);
+}
+
+/**
+ * Reload all plugins and refresh the list of plugins
+ */
+export function useRefreshPlugins() {
+  return useMutation({
+    mutationKey: ["refresh_plugins"],
+    mutationFn: async () => {
+      await minPromiseMillis(
+        (async () => {
+          await rpc("cmd_reload_plugins");
+          const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+          await changeModelStoreWorkspace(workspaceId); // Force refresh models
+          invalidateAllPluginInfo();
+        })(),
+      );
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/usePreferredAppearance.ts b/apps/yaak-client/hooks/usePreferredAppearance.ts
new file mode 100644
index 0000000..266e057
--- /dev/null
+++ b/apps/yaak-client/hooks/usePreferredAppearance.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+import type { Appearance } from "@yaakapp-internal/theme";
+import {
+  getCSSAppearance,
+  getSystemAppearance,
+  subscribeToPreferredAppearance,
+} from "@yaakapp-internal/theme";
+
+export function usePreferredAppearance() {
+  const [preferredAppearance, setPreferredAppearance] = useState<Appearance>(
+    getSystemAppearance() ?? getCSSAppearance(),
+  );
+  useEffect(() => subscribeToPreferredAppearance(setPreferredAppearance), []);
+  return preferredAppearance;
+}
diff --git a/apps/yaak-client/hooks/useRandomKey.ts b/apps/yaak-client/hooks/useRandomKey.ts
new file mode 100644
index 0000000..a615088
--- /dev/null
+++ b/apps/yaak-client/hooks/useRandomKey.ts
@@ -0,0 +1,8 @@
+import { useCallback, useState } from "react";
+import { generateId } from "../lib/generateId";
+
+export function useRandomKey(initialValue?: string) {
+  const [value, setValue] = useState<string>(initialValue ?? generateId());
+  const regenerate = useCallback(() => setValue(generateId()), []);
+  return [value, regenerate] as const;
+}
diff --git a/apps/yaak-client/hooks/useRecentCookieJars.ts b/apps/yaak-client/hooks/useRecentCookieJars.ts
new file mode 100644
index 0000000..4eb0c34
--- /dev/null
+++ b/apps/yaak-client/hooks/useRecentCookieJars.ts
@@ -0,0 +1,53 @@
+import { cookieJarsAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useEffect, useMemo } from "react";
+import { jotaiStore } from "../lib/jotai";
+import { getKeyValue, setKeyValue } from "../lib/keyValueStore";
+import { activeCookieJarAtom } from "./useActiveCookieJar";
+import { useKeyValue } from "./useKeyValue";
+
+const kvKey = (workspaceId: string) => `recent_cookie_jars::${workspaceId}`;
+const namespace = "global";
+const fallback: string[] = [];
+
+export function useRecentCookieJars() {
+  const cookieJars = useAtomValue(cookieJarsAtom);
+  const kv = useKeyValue<string[]>({
+    key: kvKey(cookieJars[0]?.workspaceId ?? "n/a"),
+    namespace,
+    fallback,
+  });
+
+  const onlyValidIds = useMemo(
+    () => kv.value?.filter((id) => cookieJars?.some((e) => e.id === id)) ?? [],
+    [kv.value, cookieJars],
+  );
+
+  return onlyValidIds;
+}
+
+export function useSubscribeRecentCookieJars() {
+  useEffect(() => {
+    return jotaiStore.sub(activeCookieJarAtom, async () => {
+      const activeCookieJar = jotaiStore.get(activeCookieJarAtom);
+      if (activeCookieJar == null) return;
+
+      const key = kvKey(activeCookieJar.workspaceId);
+
+      const recentIds = getKeyValue<string[]>({ namespace, key, fallback });
+      if (recentIds[0] === activeCookieJar.id) return; // Short-circuit
+
+      const withoutActiveId = recentIds.filter((id) => id !== activeCookieJar.id);
+      const value = [activeCookieJar.id, ...withoutActiveId];
+      await setKeyValue({ namespace, key, value });
+    });
+  }, []);
+}
+
+export async function getRecentCookieJars(workspaceId: string) {
+  return getKeyValue<string[]>({
+    namespace,
+    key: kvKey(workspaceId),
+    fallback,
+  });
+}
diff --git a/apps/yaak-client/hooks/useRecentEnvironments.ts b/apps/yaak-client/hooks/useRecentEnvironments.ts
new file mode 100644
index 0000000..904a6b9
--- /dev/null
+++ b/apps/yaak-client/hooks/useRecentEnvironments.ts
@@ -0,0 +1,51 @@
+import { useEffect, useMemo } from "react";
+import { jotaiStore } from "../lib/jotai";
+import { getKeyValue, setKeyValue } from "../lib/keyValueStore";
+import { activeEnvironmentAtom } from "./useActiveEnvironment";
+import { useEnvironmentsBreakdown } from "./useEnvironmentsBreakdown";
+import { useKeyValue } from "./useKeyValue";
+
+const kvKey = (workspaceId: string) => `recent_environments::${workspaceId}`;
+const namespace = "global";
+const fallback: string[] = [];
+
+export function useRecentEnvironments() {
+  const { subEnvironments, allEnvironments } = useEnvironmentsBreakdown();
+  const kv = useKeyValue<string[]>({
+    key: kvKey(allEnvironments[0]?.workspaceId ?? "n/a"),
+    namespace,
+    fallback,
+  });
+
+  const onlyValidIds = useMemo(
+    () => kv.value?.filter((id) => subEnvironments.some((e) => e.id === id)) ?? [],
+    [kv.value, subEnvironments],
+  );
+
+  return onlyValidIds;
+}
+
+export function useSubscribeRecentEnvironments() {
+  useEffect(() => {
+    return jotaiStore.sub(activeEnvironmentAtom, async () => {
+      const activeEnvironment = jotaiStore.get(activeEnvironmentAtom);
+      if (activeEnvironment == null) return;
+
+      const key = kvKey(activeEnvironment.workspaceId);
+      const recentIds = getKeyValue<string[]>({ namespace, key, fallback });
+      if (recentIds[0] === activeEnvironment.id) return; // Short-circuit
+
+      const withoutActiveId = recentIds.filter((id) => id !== activeEnvironment.id);
+      const value = [activeEnvironment.id, ...withoutActiveId];
+      await setKeyValue({ namespace, key, value });
+    });
+  }, []);
+}
+
+export async function getRecentEnvironments(workspaceId: string) {
+  return getKeyValue<string[]>({
+    namespace,
+    key: kvKey(workspaceId),
+    fallback,
+  });
+}
diff --git a/apps/yaak-client/hooks/useRecentFilters.ts b/apps/yaak-client/hooks/useRecentFilters.ts
new file mode 100644
index 0000000..77a9fc8
--- /dev/null
+++ b/apps/yaak-client/hooks/useRecentFilters.ts
@@ -0,0 +1,67 @@
+import { useCallback } from "react";
+import { useKeyValue } from "./useKeyValue";
+
+export interface RecentFilter {
+  value: string;
+  pinned?: boolean;
+}
+
+const MAX_RECENT_FILTERS = 20;
+const kvKey = (filterStateKey: string) => `recent_filters::${filterStateKey}`;
+const namespace = "global";
+const fallback: RecentFilter[] = [];
+
+export function useRecentFilters(filterStateKey: string | null) {
+  const { value, set } = useKeyValue<RecentFilter[]>({
+    key: kvKey(filterStateKey ?? "n/a"),
+    namespace,
+    fallback,
+  });
+
+  const addFilter = useCallback(
+    async (rawValue: string) => {
+      const value = rawValue.trim();
+      if (filterStateKey == null || value === "") return;
+      await set((prev) => {
+        // Returning the same reference skips the write, so re-committing the
+        // expression already at the top (on every blur) costs nothing
+        if (prev[0]?.value === value) return prev;
+        const existing = prev.find((f) => f.value === value);
+        const rest = prev.filter((f) => f.value !== value);
+        return trim([{ value, pinned: existing?.pinned }, ...rest]);
+      });
+    },
+    [filterStateKey, set],
+  );
+
+  const removeFilter = useCallback(
+    async (value: string) => set((prev) => prev.filter((f) => f.value !== value)),
+    [set],
+  );
+
+  const togglePin = useCallback(
+    async (value: string) =>
+      set((prev) => prev.map((f) => (f.value === value ? { ...f, pinned: !f.pinned } : f))),
+    [set],
+  );
+
+  const clearFilters = useCallback(async () => set([]), [set]);
+
+  return { recentFilters: value ?? fallback, addFilter, removeFilter, togglePin, clearFilters };
+}
+
+/** Bound the list, evicting the oldest unpinned entries before any pinned ones */
+function trim(filters: RecentFilter[]): RecentFilter[] {
+  const excess = filters.length - MAX_RECENT_FILTERS;
+  if (excess <= 0) return filters;
+
+  const evicted = new Set<number>();
+  for (let i = filters.length - 1; i >= 0 && evicted.size < excess; i--) {
+    if (!filters[i]?.pinned) evicted.add(i);
+  }
+  for (let i = filters.length - 1; i >= 0 && evicted.size < excess; i--) {
+    evicted.add(i);
+  }
+
+  return filters.filter((_, i) => !evicted.has(i));
+}
diff --git a/apps/yaak-client/hooks/useRecentRequests.ts b/apps/yaak-client/hooks/useRecentRequests.ts
new file mode 100644
index 0000000..6806743
--- /dev/null
+++ b/apps/yaak-client/hooks/useRecentRequests.ts
@@ -0,0 +1,53 @@
+import { useEffect, useMemo } from "react";
+import { jotaiStore } from "../lib/jotai";
+import { getKeyValue, setKeyValue } from "../lib/keyValueStore";
+import { activeRequestAtom } from "./useActiveRequest";
+import { useAllRequests } from "./useAllRequests";
+import { useKeyValue } from "./useKeyValue";
+
+const kvKey = (workspaceId: string) => `recent_requests::${workspaceId}`;
+const namespace = "global";
+const fallback: string[] = [];
+
+export function useRecentRequests() {
+  const requests = useAllRequests();
+
+  const { set: setRecentRequests, value: recentRequests } = useKeyValue<string[]>({
+    key: kvKey(requests[0]?.workspaceId ?? "n/a"),
+    namespace,
+    fallback,
+  });
+
+  const onlyValidIds = useMemo(
+    () => recentRequests?.filter((id) => requests.some((r) => r.id === id)) ?? [],
+    [recentRequests, requests],
+  );
+
+  return [onlyValidIds, setRecentRequests] as const;
+}
+
+export function useSubscribeRecentRequests() {
+  useEffect(() => {
+    return jotaiStore.sub(activeRequestAtom, async () => {
+      const activeRequest = jotaiStore.get(activeRequestAtom);
+      if (activeRequest == null) return;
+
+      const key = kvKey(activeRequest.workspaceId);
+
+      const recentIds = getKeyValue<string[]>({ namespace, key, fallback });
+      if (recentIds[0] === activeRequest.id) return; // Short-circuit
+
+      const withoutActiveId = recentIds.filter((id) => id !== activeRequest.id);
+      const value = [activeRequest.id, ...withoutActiveId];
+      await setKeyValue({ namespace, key, value });
+    });
+  }, []);
+}
+
+export async function getRecentRequests(workspaceId: string) {
+  return getKeyValue<string[]>({
+    namespace,
+    key: kvKey(workspaceId),
+    fallback,
+  });
+}
diff --git a/apps/yaak-client/hooks/useRecentWorkspaces.ts b/apps/yaak-client/hooks/useRecentWorkspaces.ts
new file mode 100644
index 0000000..c5b1399
--- /dev/null
+++ b/apps/yaak-client/hooks/useRecentWorkspaces.ts
@@ -0,0 +1,48 @@
+import { workspacesAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useEffect, useMemo } from "react";
+import { jotaiStore } from "../lib/jotai";
+import { getKeyValue, setKeyValue } from "../lib/keyValueStore";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+import { useKeyValue } from "./useKeyValue";
+
+const kvKey = () => "recent_workspaces";
+const namespace = "global";
+const fallback: string[] = [];
+
+export function useRecentWorkspaces() {
+  const workspaces = useAtomValue(workspacesAtom);
+  const { value, isLoading } = useKeyValue<string[]>({ key: kvKey(), namespace, fallback });
+
+  const onlyValidIds = useMemo(
+    () => value?.filter((id) => workspaces.some((w) => w.id === id)) ?? [],
+    [value, workspaces],
+  );
+
+  if (isLoading) return null;
+
+  return onlyValidIds;
+}
+
+export function useSubscribeRecentWorkspaces() {
+  useEffect(() => {
+    const unsub = jotaiStore.sub(activeWorkspaceIdAtom, updateRecentWorkspaces);
+    updateRecentWorkspaces().catch(console.error); // Update when opened in a new window
+    return unsub;
+  }, []);
+}
+
+async function updateRecentWorkspaces() {
+  const activeWorkspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+  if (activeWorkspaceId == null) return;
+
+  const key = kvKey();
+
+  const recentIds = getKeyValue<string[]>({ namespace, key, fallback });
+  if (recentIds[0] === activeWorkspaceId) return; // Short-circuit
+
+  const withoutActiveId = recentIds.filter((id) => id !== activeWorkspaceId);
+  const value = [activeWorkspaceId, ...withoutActiveId];
+  console.log("Recent workspaces update", activeWorkspaceId);
+  await setKeyValue({ namespace, key, value });
+}
diff --git a/apps/yaak-client/hooks/useRenderTemplate.ts b/apps/yaak-client/hooks/useRenderTemplate.ts
new file mode 100644
index 0000000..c3b372a
--- /dev/null
+++ b/apps/yaak-client/hooks/useRenderTemplate.ts
@@ -0,0 +1,71 @@
+import { useQuery } from "@tanstack/react-query";
+import type { RenderPurpose } from "@yaakapp-internal/plugins";
+import { useAtomValue } from "jotai";
+import { minPromiseMillis } from "../lib/minPromiseMillis";
+import { rpc } from "../lib/rpc";
+import { useActiveEnvironment } from "./useActiveEnvironment";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+
+export function useRenderTemplate({
+  template,
+  enabled,
+  purpose,
+  refreshKey,
+  ignoreError,
+  preservePreviousValue,
+}: {
+  template: string;
+  enabled: boolean;
+  purpose: RenderPurpose;
+  refreshKey?: string | null;
+  ignoreError?: boolean;
+  preservePreviousValue?: boolean;
+}) {
+  const workspaceId = useAtomValue(activeWorkspaceIdAtom) ?? "n/a";
+  const environmentId = useActiveEnvironment()?.id ?? null;
+  return useQuery<string>({
+    refetchOnWindowFocus: false,
+    enabled,
+    placeholderData: preservePreviousValue ? (prev) => prev : undefined,
+    queryKey: ["render_template", workspaceId, environmentId, refreshKey, purpose, ignoreError],
+    queryFn: () =>
+      minPromiseMillis(
+        renderTemplate({ template, workspaceId, environmentId, purpose, ignoreError }),
+        300,
+      ),
+  });
+}
+
+export async function renderTemplate({
+  template,
+  workspaceId,
+  environmentId,
+  purpose,
+  ignoreError,
+}: {
+  template: string;
+  workspaceId: string;
+  environmentId: string | null;
+  purpose: RenderPurpose;
+  ignoreError?: boolean;
+}): Promise<string> {
+  return rpc("cmd_render_template", {
+    template,
+    workspaceId,
+    environmentId,
+    purpose,
+    ignoreError,
+  });
+}
+
+export async function decryptTemplate({
+  template,
+  workspaceId,
+  environmentId,
+}: {
+  template: string;
+  workspaceId: string;
+  environmentId: string | null;
+}): Promise<string> {
+  return rpc("cmd_decrypt_template", { template, workspaceId, environmentId });
+}
diff --git a/apps/yaak-client/hooks/useRequestEditor.tsx b/apps/yaak-client/hooks/useRequestEditor.tsx
new file mode 100644
index 0000000..128a65e
--- /dev/null
+++ b/apps/yaak-client/hooks/useRequestEditor.tsx
@@ -0,0 +1,85 @@
+import EventEmitter from "eventemitter3";
+import { atom, useAtom } from "jotai";
+import type { DependencyList } from "react";
+import { useCallback, useEffect } from "react";
+
+type EventDataMap = {
+  "request_params.focus_value": string;
+  "request_pane.focus_tab": undefined;
+};
+
+export function useRequestEditorEvent<
+  Event extends keyof EventDataMap,
+  Data extends EventDataMap[Event],
+>(event: Event, fn: (data: Data) => void, deps?: DependencyList) {
+  useEffect(() => {
+    emitter.on(event, fn);
+    return () => {
+      emitter.off(event, fn);
+    };
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- We're handing deps manually
+  }, deps);
+}
+
+export const urlKeyAtom = atom<string>(Math.random().toString());
+export const urlParamsKeyAtom = atom<string>(Math.random().toString());
+
+export function useRequestEditor() {
+  const [urlParametersKey, setUrlParametersKey] = useAtom(urlParamsKeyAtom);
+  const [urlKey, setUrlKey] = useAtom(urlKeyAtom);
+  const focusParamsTab = useCallback(() => {
+    emitter.emit("request_pane.focus_tab", undefined);
+  }, []);
+
+  const focusParamValue = useCallback(
+    (name: string) => {
+      focusParamsTab();
+      requestAnimationFrame(() => emitter.emit("request_params.focus_value", name));
+    },
+    [focusParamsTab],
+  );
+
+  const forceUrlRefresh = useCallback(() => setUrlKey(Math.random().toString()), [setUrlKey]);
+  const forceParamsRefresh = useCallback(
+    () => setUrlParametersKey(Math.random().toString()),
+    [setUrlParametersKey],
+  );
+
+  return [
+    {
+      urlParametersKey,
+      urlKey,
+    },
+    {
+      focusParamValue,
+      focusParamsTab,
+      forceParamsRefresh,
+      forceUrlRefresh,
+    },
+  ] as const;
+}
+
+const emitter = new (class RequestEditorEventEmitter {
+  #emitter: EventEmitter = new EventEmitter();
+
+  emit<Event extends keyof EventDataMap, Data extends EventDataMap[Event]>(
+    event: Event,
+    data: Data,
+  ) {
+    this.#emitter.emit(event, data);
+  }
+
+  on<Event extends keyof EventDataMap, Data extends EventDataMap[Event]>(
+    event: Event,
+    fn: (data: Data) => void,
+  ) {
+    this.#emitter.on(event, fn);
+  }
+
+  off<Event extends keyof EventDataMap, Data extends EventDataMap[Event]>(
+    event: Event,
+    fn: (data: Data) => void,
+  ) {
+    this.#emitter.off(event, fn);
+  }
+})();
diff --git a/apps/yaak-client/hooks/useRequestUpdateKey.ts b/apps/yaak-client/hooks/useRequestUpdateKey.ts
new file mode 100644
index 0000000..dd57012
--- /dev/null
+++ b/apps/yaak-client/hooks/useRequestUpdateKey.ts
@@ -0,0 +1,41 @@
+import { platform } from "@yaakapp-internal/platform";
+import type { ModelPayload } from "@yaakapp-internal/models";
+import { atom, useAtomValue } from "jotai";
+import { generateId } from "../lib/generateId";
+import { jotaiStore } from "../lib/jotai";
+
+const requestUpdateKeyAtom = atom<Record<string, string>>({});
+
+platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+  const changedIds: string[] = [];
+  for (const payload of payloads) {
+    if (payload.change.type !== "upsert") continue;
+
+    if (
+      (payload.model.model === "http_request" ||
+        payload.model.model === "grpc_request" ||
+        payload.model.model === "websocket_request") &&
+      ((payload.updateSource.type === "window" &&
+        payload.updateSource.label !== platform.window.label) ||
+        payload.updateSource.type !== "window")
+    ) {
+      changedIds.push(payload.model.id);
+    }
+  }
+  if (changedIds.length > 0) wasUpdatedExternally(changedIds);
+});
+
+export function wasUpdatedExternally(changedRequestIds: string | string[]) {
+  const ids = Array.isArray(changedRequestIds) ? changedRequestIds : [changedRequestIds];
+  jotaiStore.set(requestUpdateKeyAtom, (m) => {
+    const next = { ...m };
+    for (const id of ids) next[id] = generateId();
+    return next;
+  });
+}
+
+export function useRequestUpdateKey(requestId: string | null) {
+  const keys = useAtomValue(requestUpdateKeyAtom);
+  const key = keys[requestId ?? "n/a"];
+  return `${requestId}::${key ?? "default"}`;
+}
diff --git a/apps/yaak-client/hooks/useResolvedAppearance.ts b/apps/yaak-client/hooks/useResolvedAppearance.ts
new file mode 100644
index 0000000..f5789a5
--- /dev/null
+++ b/apps/yaak-client/hooks/useResolvedAppearance.ts
@@ -0,0 +1,10 @@
+import { settingsAtom } from "@yaakapp-internal/models";
+import { resolveAppearance } from "@yaakapp-internal/theme";
+import { useAtomValue } from "jotai";
+import { usePreferredAppearance } from "./usePreferredAppearance";
+
+export function useResolvedAppearance() {
+  const preferredAppearance = usePreferredAppearance();
+  const settings = useAtomValue(settingsAtom);
+  return resolveAppearance(preferredAppearance, settings.appearance);
+}
diff --git a/apps/yaak-client/hooks/useResolvedTheme.ts b/apps/yaak-client/hooks/useResolvedTheme.ts
new file mode 100644
index 0000000..35349a8
--- /dev/null
+++ b/apps/yaak-client/hooks/useResolvedTheme.ts
@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+import { settingsAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { getResolvedTheme, getThemes } from "../lib/themes";
+import { usePluginsKey } from "./usePlugins";
+import { usePreferredAppearance } from "./usePreferredAppearance";
+
+export function useResolvedTheme() {
+  const preferredAppearance = usePreferredAppearance();
+  const settings = useAtomValue(settingsAtom);
+  const pluginKey = usePluginsKey();
+  return useQuery({
+    placeholderData: (prev) => prev,
+    queryKey: ["resolved_theme", preferredAppearance, settings.updatedAt, pluginKey],
+    queryFn: async () => {
+      const data = await getResolvedTheme(
+        preferredAppearance,
+        settings.appearance,
+        settings.themeLight,
+        settings.themeDark,
+      );
+      return { ...data, ...(await getThemes()) };
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useResponseBodyEventSource.ts b/apps/yaak-client/hooks/useResponseBodyEventSource.ts
new file mode 100644
index 0000000..d0c9a2a
--- /dev/null
+++ b/apps/yaak-client/hooks/useResponseBodyEventSource.ts
@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import type { HttpResponse } from "@yaakapp-internal/models";
+import type { ServerSentEvent } from "@yaakapp-internal/sse";
+import { getResponseBodyEventSource } from "../lib/responseBody";
+
+export function useResponseBodyEventSource(response: HttpResponse) {
+  return useQuery<ServerSentEvent[]>({
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryKey: [
+      "response-body-event-source",
+      response.id,
+      response.updatedAt,
+      response.contentLength,
+    ],
+    queryFn: () => getResponseBodyEventSource(response),
+  });
+}
diff --git a/apps/yaak-client/hooks/useResponseBodySseSummary.ts b/apps/yaak-client/hooks/useResponseBodySseSummary.ts
new file mode 100644
index 0000000..45d9c85
--- /dev/null
+++ b/apps/yaak-client/hooks/useResponseBodySseSummary.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import type { HttpResponse } from "@yaakapp-internal/models";
+import type { SseSummary } from "@yaakapp-internal/sse";
+import { getResponseBodySseSummary } from "../lib/responseBody";
+
+export function useResponseBodySseSummary(response: HttpResponse, resultKeyPath: string | null) {
+  return useQuery<SseSummary>({
+    enabled: resultKeyPath != null,
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryKey: [
+      "response-body-sse-summary",
+      response.id,
+      response.updatedAt,
+      response.contentLength,
+      resultKeyPath,
+    ],
+    queryFn: () => getResponseBodySseSummary(response, resultKeyPath ?? ""),
+  });
+}
diff --git a/apps/yaak-client/hooks/useResponseBodyText.ts b/apps/yaak-client/hooks/useResponseBodyText.ts
new file mode 100644
index 0000000..c4d25df
--- /dev/null
+++ b/apps/yaak-client/hooks/useResponseBodyText.ts
@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { getResponseBodyBytes, getResponseBodyText } from "../lib/responseBody";
+
+export function responseBodyTextQuery({
+  response,
+  filter,
+}: {
+  response: HttpResponse;
+  filter: string | null;
+}) {
+  return {
+    queryKey: [
+      "response_body_text",
+      response.id,
+      response.updatedAt,
+      response.contentLength,
+      filter ?? "",
+    ],
+    queryFn: () => getResponseBodyText({ response, filter }),
+  };
+}
+
+export function useResponseBodyText({
+  response,
+  filter,
+}: {
+  response: HttpResponse;
+  filter: string | null;
+}) {
+  return useQuery({
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    ...responseBodyTextQuery({ response, filter }),
+  });
+}
+
+export function useResponseBodyBytes({ response }: { response: HttpResponse }) {
+  return useQuery({
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryKey: ["response_body_bytes", response.id, response.updatedAt, response.contentLength],
+    queryFn: () => getResponseBodyBytes(response),
+  });
+}
diff --git a/apps/yaak-client/hooks/useResponseBodyUrl.ts b/apps/yaak-client/hooks/useResponseBodyUrl.ts
new file mode 100644
index 0000000..01e47c7
--- /dev/null
+++ b/apps/yaak-client/hooks/useResponseBodyUrl.ts
@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { platform } from "@yaakapp-internal/platform";
+
+/**
+ * A URL for a stored response body, for the viewers that hand one to an element
+ * instead of reading the bytes themselves.
+ *
+ * Resolved once here rather than inside each viewer: the host may have to ask
+ * the backend where the body is, and a viewer that computes its source during
+ * render (the PDF one, deliberately) needs it settled before it mounts.
+ *
+ * Null data means the response has no stored body.
+ */
+export function useResponseBodyUrl(response: HttpResponse | null) {
+  const responseId = response?.id ?? null;
+
+  return useQuery({
+    queryKey: ["response_body_url", responseId, response?.updatedAt ?? ""],
+    enabled: responseId != null,
+    // A response body is stored under the response's own id
+    queryFn: () => (responseId == null ? null : platform.blobs.url(responseId)),
+  });
+}
diff --git a/apps/yaak-client/hooks/useResponseFilter.ts b/apps/yaak-client/hooks/useResponseFilter.ts
new file mode 100644
index 0000000..bc6cd00
--- /dev/null
+++ b/apps/yaak-client/hooks/useResponseFilter.ts
@@ -0,0 +1,129 @@
+import { useCallback, useState } from "react";
+import { createGlobalState } from "react-use";
+import type { RecentFilter } from "./useRecentFilters";
+import { useRecentFilters } from "./useRecentFilters";
+
+/** What's typed in the filter box. `null` means the filter box is closed */
+const useFilterTextMap = createGlobalState<Record<string, string | null>>({});
+
+/** What's actually applied to the response. Only changes on an explicit apply */
+const useAppliedFilterMap = createGlobalState<Record<string, string | null>>({});
+
+export interface ResponseFilterApi {
+  stateKey: string | null;
+  /** Draft text in the filter box, or `null` when the box is closed */
+  filterText: string | null;
+  /** The expression currently filtering the response */
+  appliedFilter: string | null;
+  isSearching: boolean;
+  /** The box holds an expression that isn't the one currently applied */
+  isDirty: boolean;
+  /** Bumped when the (uncontrolled) filter input must re-read its defaultValue */
+  filterUpdateKey: number;
+  setFilterText: (value: string | null) => void;
+  /** Apply the expression to the response, recording it if the filter accepts it */
+  applyFilter: (value: string) => void;
+  /** Like applyFilter, but also replaces what's shown in the filter box */
+  replaceFilter: (value: string) => void;
+  toggleSearch: () => void;
+  recentFilters: RecentFilter[];
+  removeRecentFilter: (value: string) => void;
+  togglePinRecentFilter: (value: string) => void;
+  clearRecentFilters: () => void;
+}
+
+/**
+ * Draft/applied state and history for a response filter (JSONPath/XPath).
+ *
+ * History records at most one entry per apply gesture, and only after `runFilter`
+ * confirms the plugin accepts the expression — the plugin is the sole judge of
+ * validity. Because nothing but the gesture ever writes, refetches can't resurrect
+ * deleted entries and a gesture can't record into another request's history.
+ */
+export function useResponseFilter({
+  stateKey,
+  runFilter,
+}: {
+  stateKey: string | null;
+  /** Evaluate an expression, rejecting if the filter plugin reports an error */
+  runFilter: (filter: string) => Promise<unknown>;
+}): ResponseFilterApi {
+  const [filterTextMap, setFilterTextMap] = useFilterTextMap();
+  const [appliedFilterMap, setAppliedFilterMap] = useAppliedFilterMap();
+  const filterText = stateKey ? (filterTextMap[stateKey] ?? null) : null;
+  const appliedFilter = stateKey ? (appliedFilterMap[stateKey] ?? null) : null;
+
+  const setFilterText = useCallback(
+    (v: string | null) => {
+      if (!stateKey) return;
+      setFilterTextMap((m) => ({ ...m, [stateKey]: v }));
+    },
+    [stateKey, setFilterTextMap],
+  );
+
+  const setAppliedFilter = useCallback(
+    (v: string | null) => {
+      if (!stateKey) return;
+      setAppliedFilterMap((m) => ({ ...m, [stateKey]: v }));
+    },
+    [stateKey, setAppliedFilterMap],
+  );
+
+  const {
+    recentFilters,
+    addFilter,
+    removeFilter: removeRecentFilter,
+    togglePin: togglePinRecentFilter,
+    clearFilters: clearRecentFilters,
+  } = useRecentFilters(stateKey);
+
+  const applyFilter = useCallback(
+    (value: string) => {
+      setFilterText(value);
+      const applied = value.trim() === "" ? null : value.trim();
+      setAppliedFilter(applied);
+      if (applied == null) return;
+      runFilter(applied).then(
+        () => addFilter(applied),
+        () => {}, // Rejected by the filter plugin — don't record
+      );
+    },
+    [setFilterText, setAppliedFilter, runFilter, addFilter],
+  );
+
+  const [filterUpdateKey, setFilterUpdateKey] = useState(0);
+  const replaceFilter = useCallback(
+    (value: string) => {
+      applyFilter(value);
+      setFilterUpdateKey((k) => k + 1);
+    },
+    [applyFilter],
+  );
+
+  const isSearching = filterText != null;
+  const toggleSearch = useCallback(() => {
+    if (isSearching) {
+      setFilterText(null);
+      setAppliedFilter(null);
+    } else {
+      setFilterText("");
+    }
+  }, [isSearching, setFilterText, setAppliedFilter]);
+
+  return {
+    stateKey,
+    filterText,
+    appliedFilter,
+    isSearching,
+    isDirty: filterText != null && filterText.trim() !== (appliedFilter ?? ""),
+    filterUpdateKey,
+    setFilterText,
+    applyFilter,
+    replaceFilter,
+    toggleSearch,
+    recentFilters,
+    removeRecentFilter,
+    togglePinRecentFilter,
+    clearRecentFilters,
+  };
+}
diff --git a/apps/yaak-client/hooks/useResponseViewMode.ts b/apps/yaak-client/hooks/useResponseViewMode.ts
new file mode 100644
index 0000000..ae93a29
--- /dev/null
+++ b/apps/yaak-client/hooks/useResponseViewMode.ts
@@ -0,0 +1,8 @@
+import { useLocalStorage } from "react-use";
+
+const DEFAULT_VIEW_MODE = "pretty";
+
+export function useResponseViewMode(requestId?: string): [string, (m: "pretty" | "raw") => void] {
+  const [value, setValue] = useLocalStorage<"pretty" | "raw">(`response_view_mode::${requestId}`);
+  return [value ?? DEFAULT_VIEW_MODE, setValue];
+}
diff --git a/apps/yaak-client/hooks/useSaveResponse.tsx b/apps/yaak-client/hooks/useSaveResponse.tsx
new file mode 100644
index 0000000..eda2c9b
--- /dev/null
+++ b/apps/yaak-client/hooks/useSaveResponse.tsx
@@ -0,0 +1,42 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { getModel } from "@yaakapp-internal/models";
+import mime from "mime";
+import slugify from "slugify";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { getContentTypeFromHeaders } from "../lib/model_util";
+import { rpc } from "../lib/rpc";
+import { showToast } from "../lib/toast";
+import { useFastMutation } from "./useFastMutation";
+import { platform } from "@yaakapp-internal/platform";
+
+export function useSaveResponse(response: HttpResponse | null) {
+  return useFastMutation({
+    mutationKey: ["save_response", response?.id],
+    mutationFn: async () => {
+      if (response == null) return null;
+
+      const request = getModel("http_request", response.requestId);
+      if (request == null) return null;
+
+      const contentType = getContentTypeFromHeaders(response.headers) ?? "unknown";
+      const ext = mime.getExtension(contentType);
+      const slug = slugify(request.name || "response", { lower: true });
+      const filepath = await platform.dialog.save({
+        defaultPath: ext ? `${slug}.${ext}` : slug,
+        title: "Save Response",
+      });
+      if (filepath == null) {
+        return; // Cancelled
+      }
+
+      await rpc("cmd_save_response", { responseId: response.id, filepath });
+      showToast({
+        message: (
+          <>
+            Response saved to <InlineCode>{filepath}</InlineCode>
+          </>
+        ),
+      });
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useScrollIntoView.ts b/apps/yaak-client/hooks/useScrollIntoView.ts
new file mode 100644
index 0000000..afda6f1
--- /dev/null
+++ b/apps/yaak-client/hooks/useScrollIntoView.ts
@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+
+export function useScrollIntoView<T extends HTMLElement>(node: T | null, enabled: boolean) {
+  useEffect(() => {
+    if (enabled) {
+      node?.scrollIntoView({ block: "nearest" });
+    }
+  }, [enabled, node]);
+}
diff --git a/apps/yaak-client/hooks/useSendAnyHttpRequest.test.ts b/apps/yaak-client/hooks/useSendAnyHttpRequest.test.ts
new file mode 100644
index 0000000..fac2d23
--- /dev/null
+++ b/apps/yaak-client/hooks/useSendAnyHttpRequest.test.ts
@@ -0,0 +1,133 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vite-plus/test";
+
+const mocks = vi.hoisted(() => ({
+  platform: { httpProxyUrl: "https://web.yaak.test" as string | null },
+  showConfirm: vi.fn<() => Promise<boolean>>(),
+  flushAllModelWrites: vi.fn(),
+  rpc: vi.fn(),
+}));
+
+vi.mock("@yaakapp-internal/platform", () => ({ platform: mocks.platform }));
+vi.mock("@yaakapp-internal/models", () => ({ flushAllModelWrites: mocks.flushAllModelWrites }));
+vi.mock("../lib/confirm", () => ({ showConfirm: mocks.showConfirm }));
+vi.mock("../lib/appInfo", () => ({ appInfo: { identifier: "app.yaak.web" } }));
+vi.mock("../lib/rpc", () => ({ rpc: mocks.rpc }));
+vi.mock("../lib/toast", () => ({ showToast: vi.fn() }));
+vi.mock("./useActiveCookieJar", () => ({ getActiveCookieJar: () => ({ id: "cj_test" }) }));
+vi.mock("./useActiveEnvironment", () => ({ getActiveEnvironment: () => ({ id: "ev_test" }) }));
+
+async function sender() {
+  return (await import("./useSendAnyHttpRequest")).sendAnyHttpRequest;
+}
+
+describe("web proxy confirmation before sending", () => {
+  let stored: Map<string, string>;
+
+  beforeEach(() => {
+    vi.resetModules();
+    vi.resetAllMocks();
+    mocks.platform.httpProxyUrl = "https://web.yaak.test";
+    mocks.rpc.mockResolvedValue({ id: "rs_test" });
+    stored = new Map();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => stored.get(key) ?? null,
+      setItem: (key: string, value: string) => stored.set(key, value),
+    });
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  test("blocks all pending sends until one shared confirmation is accepted", async () => {
+    let decide!: (accepted: boolean) => void;
+    mocks.showConfirm.mockReturnValue(
+      new Promise((resolve) => {
+        decide = resolve;
+      }),
+    );
+    const send = await sender();
+    const first = send.mutateAsync("rq_one");
+    const second = send.mutateAsync("rq_two");
+
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(1);
+    expect(mocks.flushAllModelWrites).not.toHaveBeenCalled();
+    expect(mocks.rpc).not.toHaveBeenCalled();
+    decide(true);
+    await Promise.all([first, second]);
+
+    expect(mocks.rpc).toHaveBeenCalledTimes(2);
+    expect(mocks.rpc).toHaveBeenCalledWith("cmd_send_http_request", {
+      requestId: "rq_one",
+      environmentId: "ev_test",
+      cookieJarId: "cj_test",
+    });
+    expect(stored.size).toBe(1);
+  });
+
+  test("cancel sends nothing, remembers nothing, and asks again next time", async () => {
+    mocks.showConfirm.mockResolvedValue(false);
+    const send = await sender();
+    expect(await send.mutateAsync("rq_one")).toBeNull();
+    expect(await send.mutateAsync("rq_one")).toBeNull();
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(2);
+    expect(mocks.flushAllModelWrites).not.toHaveBeenCalled();
+    expect(mocks.rpc).not.toHaveBeenCalled();
+    expect(stored.size).toBe(0);
+  });
+
+  test("cancel applies to every send waiting on the dialog", async () => {
+    mocks.showConfirm.mockResolvedValue(false);
+    const send = await sender();
+    expect(await Promise.all([send.mutateAsync("rq_one"), send.mutateAsync("rq_two")])).toEqual([
+      null,
+      null,
+    ]);
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(1);
+    expect(mocks.rpc).not.toHaveBeenCalled();
+  });
+
+  test("remembers acceptance across module reloads for the same proxy", async () => {
+    mocks.showConfirm.mockResolvedValue(true);
+    await (await sender()).mutateAsync("rq_one");
+    vi.resetModules();
+    await (await sender()).mutateAsync("rq_two");
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(1);
+    expect(mocks.rpc).toHaveBeenCalledTimes(2);
+  });
+
+  test("requires a new decision when the proxy changes", async () => {
+    mocks.showConfirm.mockResolvedValueOnce(true).mockResolvedValueOnce(false);
+    const send = await sender();
+    await send.mutateAsync("rq_one");
+    mocks.platform.httpProxyUrl = "https://another-proxy.test";
+    expect(await send.mutateAsync("rq_two")).toBeNull();
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(2);
+    expect(mocks.rpc).toHaveBeenCalledTimes(1);
+  });
+
+  test("still asks and remembers in this tab if browser storage is unavailable", async () => {
+    const unavailable = () => {
+      throw new Error("Storage unavailable");
+    };
+    vi.stubGlobal("localStorage", { getItem: unavailable, setItem: unavailable });
+    mocks.showConfirm.mockResolvedValue(true);
+    const send = await sender();
+    await send.mutateAsync("rq_one");
+    await send.mutateAsync("rq_two");
+    expect(mocks.showConfirm).toHaveBeenCalledTimes(1);
+    expect(mocks.rpc).toHaveBeenCalledTimes(2);
+  });
+
+  test("desktop sends directly without confirmation", async () => {
+    mocks.platform.httpProxyUrl = null;
+    await (await sender()).mutateAsync("rq_one");
+    expect(mocks.showConfirm).not.toHaveBeenCalled();
+    expect(mocks.rpc).toHaveBeenCalledTimes(1);
+    expect(stored.size).toBe(0);
+  });
+
+  test("an empty selection does not prompt or send", async () => {
+    expect(await (await sender()).mutateAsync(null)).toBeNull();
+    expect(mocks.showConfirm).not.toHaveBeenCalled();
+    expect(mocks.rpc).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/yaak-client/hooks/useSendAnyHttpRequest.ts b/apps/yaak-client/hooks/useSendAnyHttpRequest.ts
new file mode 100644
index 0000000..f980276
--- /dev/null
+++ b/apps/yaak-client/hooks/useSendAnyHttpRequest.ts
@@ -0,0 +1,37 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import { flushAllModelWrites } from "@yaakapp-internal/models";
+import { confirmWebProxy } from "../lib/confirmWebProxy";
+import { rpc } from "../lib/rpc";
+import { getActiveCookieJar } from "./useActiveCookieJar";
+import { getActiveEnvironment } from "./useActiveEnvironment";
+import { createFastMutation, useFastMutation } from "./useFastMutation";
+
+async function sendAnyHttpRequestById(id: string | null): Promise<HttpResponse | null> {
+  if (id == null) {
+    return null;
+  }
+
+  if (!(await confirmWebProxy())) {
+    return null;
+  }
+
+  await flushAllModelWrites();
+
+  return rpc("cmd_send_http_request", {
+    requestId: id,
+    environmentId: getActiveEnvironment()?.id,
+    cookieJarId: getActiveCookieJar()?.id,
+  });
+}
+
+export function useSendAnyHttpRequest() {
+  return useFastMutation<HttpResponse | null, string, string | null>({
+    mutationKey: ["send_any_request"],
+    mutationFn: sendAnyHttpRequestById,
+  });
+}
+
+export const sendAnyHttpRequest = createFastMutation<HttpResponse | null, string, string | null>({
+  mutationKey: ["send_any_request"],
+  mutationFn: sendAnyHttpRequestById,
+});
diff --git a/apps/yaak-client/hooks/useSendManyRequests.ts b/apps/yaak-client/hooks/useSendManyRequests.ts
new file mode 100644
index 0000000..17ccaf7
--- /dev/null
+++ b/apps/yaak-client/hooks/useSendManyRequests.ts
@@ -0,0 +1,14 @@
+import { useFastMutation } from "./useFastMutation";
+import { useSendAnyHttpRequest } from "./useSendAnyHttpRequest";
+
+export function useSendManyRequests() {
+  const sendAnyRequest = useSendAnyHttpRequest();
+  return useFastMutation<void, string, string[]>({
+    mutationKey: ["send_many_requests"],
+    mutationFn: async (requestIds: string[]) => {
+      for (const id of requestIds) {
+        sendAnyRequest.mutate(id);
+      }
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useSidebarHidden.ts b/apps/yaak-client/hooks/useSidebarHidden.ts
new file mode 100644
index 0000000..eb4c0d0
--- /dev/null
+++ b/apps/yaak-client/hooks/useSidebarHidden.ts
@@ -0,0 +1,14 @@
+import { useAtomValue } from "jotai";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+import { useKeyValue } from "./useKeyValue";
+
+export function useSidebarHidden() {
+  const activeWorkspaceId = useAtomValue(activeWorkspaceIdAtom);
+  const { set, value } = useKeyValue<boolean>({
+    namespace: "no_sync",
+    key: ["sidebar_hidden", activeWorkspaceId ?? "n/a"],
+    fallback: false,
+  });
+
+  return [value, set] as const;
+}
diff --git a/apps/yaak-client/hooks/useSidebarItemCollapsed.ts b/apps/yaak-client/hooks/useSidebarItemCollapsed.ts
new file mode 100644
index 0000000..98b2ffc
--- /dev/null
+++ b/apps/yaak-client/hooks/useSidebarItemCollapsed.ts
@@ -0,0 +1,12 @@
+import { atom } from "jotai";
+import { atomWithKVStorage } from "../lib/atoms/atomWithKVStorage";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+
+function kvKey(workspaceId: string | null) {
+  return ["sidebar_collapsed", workspaceId ?? "n/a"];
+}
+
+export const sidebarCollapsedAtom = atom((get) => {
+  const workspaceId = get(activeWorkspaceIdAtom);
+  return atomWithKVStorage<Record<string, boolean>>(kvKey(workspaceId), {});
+});
diff --git a/apps/yaak-client/hooks/useSidebarWidth.ts b/apps/yaak-client/hooks/useSidebarWidth.ts
new file mode 100644
index 0000000..ff07e22
--- /dev/null
+++ b/apps/yaak-client/hooks/useSidebarWidth.ts
@@ -0,0 +1,14 @@
+import { useAtomValue } from "jotai";
+import { useCallback } from "react";
+import { useLocalStorage } from "react-use";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+
+export function useSidebarWidth() {
+  const activeWorkspaceId = useAtomValue(activeWorkspaceIdAtom);
+  const [width, setWidth] = useLocalStorage<number>(
+    `sidebar_width::${activeWorkspaceId ?? "n/a"}`,
+    250,
+  );
+  const resetWidth = useCallback(() => setWidth(250), [setWidth]);
+  return [width ?? null, setWidth, resetWidth] as const;
+}
diff --git a/apps/yaak-client/hooks/useSseSummaryResultKeyPath.ts b/apps/yaak-client/hooks/useSseSummaryResultKeyPath.ts
new file mode 100644
index 0000000..40d02dc
--- /dev/null
+++ b/apps/yaak-client/hooks/useSseSummaryResultKeyPath.ts
@@ -0,0 +1,98 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import { useMemo } from "react";
+import type { GenericCompletionConfig } from "../components/core/Editor/genericCompletion";
+import { useKeyValue } from "./useKeyValue";
+
+const OPENAI_CHAT_COMPLETIONS_RESULT_KEY_PATH = "$.choices[0].delta.content";
+const OPENAI_RESPONSES_RESULT_KEY_PATH = "$.delta";
+const ANTHROPIC_RESULT_KEY_PATH = "$.delta.text";
+const GOOGLE_RESULT_KEY_PATH = "$.candidates[0].content.parts[0].text";
+
+const sseSummaryResultKeyPathOptions: GenericCompletionOption[] = [
+  {
+    label: OPENAI_CHAT_COMPLETIONS_RESULT_KEY_PATH,
+    detail: "ChatGPT (OpenAI)",
+    type: "constant",
+    boost: 1,
+  },
+  {
+    label: OPENAI_RESPONSES_RESULT_KEY_PATH,
+    detail: "Responses (OpenAI)",
+    type: "constant",
+    boost: 1,
+  },
+  {
+    label: ANTHROPIC_RESULT_KEY_PATH,
+    detail: "Claude (Anthropic)",
+    type: "constant",
+    boost: 1,
+  },
+  {
+    label: GOOGLE_RESULT_KEY_PATH,
+    detail: "Gemini (Google)",
+    type: "constant",
+    boost: 1,
+  },
+];
+
+export const sseSummaryResultKeyPathAutocomplete: GenericCompletionConfig = {
+  minMatch: 0,
+  options: sseSummaryResultKeyPathOptions,
+};
+
+export function useSseSummaryResultKeyPath({ response }: { response: HttpResponse }) {
+  const storedResultKeyPath = useKeyValue<string | null>({
+    namespace: "no_sync",
+    key: ["sse_summary_result_key_path", response.requestId],
+    fallback: null,
+  });
+  const enabled = useKeyValue<boolean | null>({
+    namespace: "no_sync",
+    key: ["sse_summary_result_key_path_enabled", response.requestId],
+    fallback: null,
+  });
+  const inferredResultKeyPath = useMemo(() => inferSseSummaryResultKeyPath(response), [response.url]);
+  const resultKeyPath = storedResultKeyPath.value ?? inferredResultKeyPath;
+  const trimmedResultKeyPath = resultKeyPath?.trim() ?? "";
+  const isEnabled = enabled.value ?? inferredResultKeyPath != null;
+
+  return {
+    enabled: isEnabled,
+    inferredResultKeyPath,
+    resultKeyPath: isEnabled && trimmedResultKeyPath.length > 0 ? trimmedResultKeyPath : null,
+    resultKeyPathInputValue: resultKeyPath ?? "",
+    setEnabled: enabled.set,
+    setResultKeyPath: storedResultKeyPath.set,
+  };
+}
+
+function inferSseSummaryResultKeyPath(response: HttpResponse): string | null {
+  let url: URL;
+  try {
+    url = new URL(response.url);
+  } catch {
+    return null;
+  }
+
+  const hostname = url.hostname.toLowerCase();
+  const pathname = url.pathname.toLowerCase();
+
+  if (hostname === "api.openai.com" && pathname === "/v1/chat/completions") {
+    return OPENAI_CHAT_COMPLETIONS_RESULT_KEY_PATH;
+  }
+  if (hostname === "api.openai.com" && pathname === "/v1/responses") {
+    return OPENAI_RESPONSES_RESULT_KEY_PATH;
+  }
+  if (hostname === "api.anthropic.com" && pathname === "/v1/messages") {
+    return ANTHROPIC_RESULT_KEY_PATH;
+  }
+  if (
+    hostname === "generativelanguage.googleapis.com" &&
+    pathname.includes(":streamgeneratecontent")
+  ) {
+    return GOOGLE_RESULT_KEY_PATH;
+  }
+
+  return null;
+}
diff --git a/apps/yaak-client/hooks/useStateWithDeps.ts b/apps/yaak-client/hooks/useStateWithDeps.ts
new file mode 100644
index 0000000..2cb0bc1
--- /dev/null
+++ b/apps/yaak-client/hooks/useStateWithDeps.ts
@@ -0,0 +1,14 @@
+import type { DependencyList } from "react";
+import { useEffect, useState } from "react";
+
+/**
+ * Like useState, except it will update the value when the default value changes
+ */
+export function useStateWithDeps<T>(defaultValue: T | (() => T), deps: DependencyList) {
+  const [value, setValue] = useState(defaultValue);
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [...deps]);
+  return [value, setValue] as const;
+}
diff --git a/apps/yaak-client/hooks/useStoplightsVisible.ts b/apps/yaak-client/hooks/useStoplightsVisible.ts
new file mode 100644
index 0000000..6a5ea1c
--- /dev/null
+++ b/apps/yaak-client/hooks/useStoplightsVisible.ts
@@ -0,0 +1,8 @@
+import { platform } from "@yaakapp-internal/platform";
+import { useIsFullscreen } from "@yaakapp-internal/ui";
+
+export function useStoplightsVisible() {
+  const fullscreen = useIsFullscreen();
+  const stoplightsVisible = platform.osType() === "macos" && !fullscreen;
+  return stoplightsVisible;
+}
diff --git a/apps/yaak-client/hooks/useSyncFontSizeSetting.ts b/apps/yaak-client/hooks/useSyncFontSizeSetting.ts
new file mode 100644
index 0000000..de52acd
--- /dev/null
+++ b/apps/yaak-client/hooks/useSyncFontSizeSetting.ts
@@ -0,0 +1,17 @@
+import { platform } from "@yaakapp-internal/platform";
+import { settingsAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+
+export function useSyncFontSizeSetting() {
+  const settings = useAtomValue(settingsAtom);
+  useEffect(() => {
+    if (settings == null) {
+      return;
+    }
+
+    const { interfaceScale, editorFontSize } = settings;
+    platform.window.setZoom(interfaceScale).catch(console.error);
+    document.documentElement.style.setProperty("--editor-font-size", `${editorFontSize}px`);
+  }, [settings]);
+}
diff --git a/apps/yaak-client/hooks/useSyncWorkspaceChildModels.ts b/apps/yaak-client/hooks/useSyncWorkspaceChildModels.ts
new file mode 100644
index 0000000..4835e9a
--- /dev/null
+++ b/apps/yaak-client/hooks/useSyncWorkspaceChildModels.ts
@@ -0,0 +1,17 @@
+import { changeModelStoreWorkspace } from "@yaakapp-internal/models";
+import { useEffect } from "react";
+import { jotaiStore } from "../lib/jotai";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+
+export function useSyncWorkspaceChildModels() {
+  useEffect(() => {
+    const unsub = jotaiStore.sub(activeWorkspaceIdAtom, sync);
+    sync().catch(console.error);
+    return unsub;
+  }, []);
+}
+
+async function sync() {
+  const workspaceId = jotaiStore.get(activeWorkspaceIdAtom) ?? null;
+  changeModelStoreWorkspace(workspaceId).catch(console.error);
+}
diff --git a/apps/yaak-client/hooks/useSyncWorkspaceRequestTitle.ts b/apps/yaak-client/hooks/useSyncWorkspaceRequestTitle.ts
new file mode 100644
index 0000000..43d80b5
--- /dev/null
+++ b/apps/yaak-client/hooks/useSyncWorkspaceRequestTitle.ts
@@ -0,0 +1,34 @@
+import { setWindowTitle } from "@yaakapp-internal/mac-window";
+import { settingsAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { appInfo } from "../lib/appInfo";
+import { jotaiStore } from "../lib/jotai";
+import { resolvedModelName } from "../lib/resolvedModelName";
+import { useActiveEnvironment } from "./useActiveEnvironment";
+import { activeRequestAtom } from "./useActiveRequest";
+import { activeWorkspaceAtom } from "./useActiveWorkspace";
+
+export function useSyncWorkspaceRequestTitle() {
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
+  const activeEnvironment = useActiveEnvironment();
+  const activeRequest = useAtomValue(activeRequestAtom);
+
+  useEffect(() => {
+    const settings = jotaiStore.get(settingsAtom);
+    let newTitle = activeWorkspace ? activeWorkspace.name : "Yaak";
+    if (activeEnvironment) {
+      newTitle += ` (${activeEnvironment.name})`;
+    }
+
+    if (!settings.useNativeTitlebar && activeRequest) {
+      newTitle += ` › ${resolvedModelName(activeRequest)}`;
+    }
+
+    if (appInfo.isDev) {
+      newTitle = `[DEV] ${newTitle}`;
+    }
+
+    setWindowTitle(newTitle);
+  }, [activeEnvironment, activeRequest, activeWorkspace]);
+}
diff --git a/apps/yaak-client/hooks/useSyncZoomSetting.ts b/apps/yaak-client/hooks/useSyncZoomSetting.ts
new file mode 100644
index 0000000..a814ad2
--- /dev/null
+++ b/apps/yaak-client/hooks/useSyncZoomSetting.ts
@@ -0,0 +1,16 @@
+import { useHotKey } from "./useHotKey";
+import { usePlatformEvent } from "./usePlatformEvent";
+import { useZoom } from "./useZoom";
+
+export function useSyncZoomSetting() {
+  // Handle Zoom.
+  // Note, Mac handles it in the app menu, so need to also handle keyboard
+  // shortcuts for Windows/Linux
+  const zoom = useZoom();
+  useHotKey("app.zoom_in", zoom.zoomIn);
+  usePlatformEvent("zoom_in", zoom.zoomIn);
+  useHotKey("app.zoom_out", zoom.zoomOut);
+  usePlatformEvent("zoom_out", zoom.zoomOut);
+  useHotKey("app.zoom_reset", zoom.zoomReset);
+  usePlatformEvent("zoom_reset", zoom.zoomReset);
+}
diff --git a/apps/yaak-client/hooks/useTemplateFunctionConfig.ts b/apps/yaak-client/hooks/useTemplateFunctionConfig.ts
new file mode 100644
index 0000000..223d1c9
--- /dev/null
+++ b/apps/yaak-client/hooks/useTemplateFunctionConfig.ts
@@ -0,0 +1,76 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  environmentsAtom,
+  type Folder,
+  type GrpcRequest,
+  type HttpRequest,
+  httpResponsesAtom,
+  pluginsAtom,
+  type WebsocketRequest,
+  type Workspace,
+} from "@yaakapp-internal/models";
+import type { GetTemplateFunctionConfigResponse, JsonPrimitive } from "@yaakapp-internal/plugins";
+import { useAtomValue } from "jotai";
+import { md5 } from "js-md5";
+import { rpc } from "../lib/rpc";
+import { activeEnvironmentIdAtom } from "./useActiveEnvironment";
+import { activeWorkspaceIdAtom } from "./useActiveWorkspace";
+
+export function useTemplateFunctionConfig(
+  functionName: string | null,
+  values: Record<string, JsonPrimitive>,
+  model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace,
+) {
+  const pluginsKey = useAtomValue(pluginsAtom);
+  const workspaceId = useAtomValue(activeWorkspaceIdAtom);
+  const environmentId = useAtomValue(activeEnvironmentIdAtom);
+  const responses = useAtomValue(httpResponsesAtom);
+  const environments = useAtomValue(environmentsAtom);
+  const environmentsKey = environments.map((e) => e.id + e.updatedAt).join(":");
+
+  // Some auth handlers like OAuth 2.0 show the current token after a successful request. To
+  // handle that, we'll force the auth to re-fetch after each new response closes
+  const responseKey = md5(
+    responses
+      .filter((r) => r.state === "closed")
+      .map((r) => r.id)
+      .join(":"),
+  );
+
+  return useQuery({
+    queryKey: [
+      "template_function_config",
+      model,
+      functionName,
+      values,
+      workspaceId, // Refresh when the active workspace changes
+      environmentId, // Refresh when the active environment changes
+      environmentsKey, // Refresh when environments change
+      responseKey, // Refresh when responses change
+      pluginsKey, // Refresh when plugins reload
+    ],
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryFn: async () => {
+      if (functionName == null) return null;
+      return getTemplateFunctionConfig(functionName, values, model, environmentId);
+    },
+  });
+}
+
+export async function getTemplateFunctionConfig(
+  functionName: string,
+  values: Record<string, JsonPrimitive>,
+  model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace,
+  environmentId: string | undefined,
+) {
+  const config = await rpc<GetTemplateFunctionConfigResponse>(
+    "cmd_template_function_config",
+    {
+      functionName,
+      values,
+      model,
+      environmentId,
+    },
+  );
+  return config.function;
+}
diff --git a/apps/yaak-client/hooks/useTemplateFunctions.tsx b/apps/yaak-client/hooks/useTemplateFunctions.tsx
new file mode 100644
index 0000000..651938c
--- /dev/null
+++ b/apps/yaak-client/hooks/useTemplateFunctions.tsx
@@ -0,0 +1,61 @@
+import { useQuery } from "@tanstack/react-query";
+import type {
+  GetTemplateFunctionSummaryResponse,
+  TemplateFunction,
+} from "@yaakapp-internal/plugins";
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { useMemo, useState } from "react";
+import type { TwigCompletionOption } from "../components/core/Editor/twig/completion";
+import { rpc } from "../lib/rpc";
+import { usePluginsKey } from "./usePlugins";
+
+const templateFunctionsAtom = atom<TemplateFunction[]>([]);
+
+export function useTemplateFunctionCompletionOptions(
+  onClick: (fn: TemplateFunction, ragTag: string, pos: number) => void,
+  enabled: boolean,
+) {
+  const templateFunctions = useAtomValue(templateFunctionsAtom);
+  return useMemo<TwigCompletionOption[]>(() => {
+    if (!enabled) {
+      return [];
+    }
+    return templateFunctions.map((fn) => {
+      const argsLabel = fn.args.length > 0 ? "…" : "";
+      const fn2: TwigCompletionOption = {
+        type: "function",
+        onClick: (rawTag: string, startPos: number) => onClick(fn, rawTag, startPos),
+        label: `${fn.name}(${argsLabel})`,
+        invalid: false,
+        value: null,
+        ...fn,
+      };
+      return fn2;
+    });
+  }, [enabled, onClick, templateFunctions]);
+}
+
+export function useSubscribeTemplateFunctions() {
+  const pluginsKey = usePluginsKey();
+  const [numFns, setNumFns] = useState<number>(0);
+  const setAtom = useSetAtom(templateFunctionsAtom);
+
+  useQuery({
+    queryKey: ["template_functions", pluginsKey],
+    // Fetch periodically until functions are returned
+    // NOTE: visibilitychange (refetchOnWindowFocus) does not work on Windows, so we'll rely on this logic
+    //  to refetch things until that's working again
+    // TODO: Update plugin system to wait for plugins to initialize before sending the first event to them
+    refetchInterval: numFns > 0 ? Number.POSITIVE_INFINITY : 1000,
+    refetchOnMount: true,
+    queryFn: async () => {
+      const result = await rpc<GetTemplateFunctionSummaryResponse[]>(
+        "cmd_template_function_summaries",
+      );
+      setNumFns(result.length);
+      const functions = result.flatMap((r) => r.functions) ?? [];
+      setAtom(functions);
+      return functions;
+    },
+  });
+}
diff --git a/apps/yaak-client/hooks/useTemplateTokensToString.ts b/apps/yaak-client/hooks/useTemplateTokensToString.ts
new file mode 100644
index 0000000..7016cb9
--- /dev/null
+++ b/apps/yaak-client/hooks/useTemplateTokensToString.ts
@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Tokens } from "@yaakapp-internal/templates";
+import { rpc } from "../lib/rpc";
+
+export function useTemplateTokensToString(tokens: Tokens) {
+  return useQuery<string>({
+    refetchOnWindowFocus: false,
+    queryKey: ["template_tokens_to_string", tokens],
+    queryFn: () => templateTokensToString(tokens),
+  });
+}
+
+export async function templateTokensToString(tokens: Tokens): Promise<string> {
+  return rpc("cmd_template_tokens_to_string", { tokens });
+}
diff --git a/apps/yaak-client/hooks/useTimelineViewMode.ts b/apps/yaak-client/hooks/useTimelineViewMode.ts
new file mode 100644
index 0000000..65c8b58
--- /dev/null
+++ b/apps/yaak-client/hooks/useTimelineViewMode.ts
@@ -0,0 +1,14 @@
+import type { TimelineViewMode } from "../components/HttpResponsePane";
+import { useKeyValue } from "./useKeyValue";
+
+const DEFAULT_VIEW_MODE: TimelineViewMode = "timeline";
+
+export function useTimelineViewMode() {
+  const { set, value } = useKeyValue<TimelineViewMode>({
+    namespace: "no_sync",
+    key: "timeline_view_mode",
+    fallback: DEFAULT_VIEW_MODE,
+  });
+
+  return [value ?? DEFAULT_VIEW_MODE, set] as const;
+}
diff --git a/apps/yaak-client/hooks/useToggle.ts b/apps/yaak-client/hooks/useToggle.ts
new file mode 100644
index 0000000..e611d38
--- /dev/null
+++ b/apps/yaak-client/hooks/useToggle.ts
@@ -0,0 +1,7 @@
+import { useCallback, useState } from "react";
+
+export function useToggle(initialValue = false) {
+  const [value, setValue] = useState<boolean>(initialValue);
+  const toggle = useCallback(() => setValue((v) => !v), []);
+  return [value, toggle, setValue] as const;
+}
diff --git a/apps/yaak-client/hooks/useToggleCommandPalette.tsx b/apps/yaak-client/hooks/useToggleCommandPalette.tsx
new file mode 100644
index 0000000..4aead1b
--- /dev/null
+++ b/apps/yaak-client/hooks/useToggleCommandPalette.tsx
@@ -0,0 +1,20 @@
+import { useCallback } from "react";
+import { CommandPaletteDialog } from "../components/CommandPaletteDialog";
+import { toggleDialog } from "../lib/dialog";
+
+export function useToggleCommandPalette() {
+  const togglePalette = useCallback(() => {
+    toggleDialog({
+      id: "command_palette",
+      size: "dynamic",
+      hideX: true,
+      className: "mb-auto mt-16 max-h-[min(30rem,calc(100vh-4rem))]!",
+      vAlign: "top",
+      noPadding: true,
+      noScroll: true,
+      render: ({ hide }) => <CommandPaletteDialog onClose={hide} />,
+    });
+  }, []);
+
+  return togglePalette;
+}
diff --git a/apps/yaak-client/hooks/useWebsocketRequestActions.ts b/apps/yaak-client/hooks/useWebsocketRequestActions.ts
new file mode 100644
index 0000000..250664a
--- /dev/null
+++ b/apps/yaak-client/hooks/useWebsocketRequestActions.ts
@@ -0,0 +1,52 @@
+import { useQuery } from "@tanstack/react-query";
+import type { WebsocketRequest } from "@yaakapp-internal/models";
+import type {
+  CallWebsocketRequestActionRequest,
+  GetWebsocketRequestActionsResponse,
+  WebsocketRequestAction,
+} from "@yaakapp-internal/plugins";
+import { useMemo } from "react";
+import { rpc } from "../lib/rpc";
+import { usePluginsKey } from "./usePlugins";
+
+export type CallableWebSocketRequestAction = Pick<WebsocketRequestAction, "label" | "icon"> & {
+  call: (request: WebsocketRequest) => Promise<void>;
+};
+
+export function useWebsocketRequestActions() {
+  const pluginsKey = usePluginsKey();
+
+  const actionsResult = useQuery<CallableWebSocketRequestAction[]>({
+    queryKey: ["websocket_request_actions", pluginsKey],
+    queryFn: () => getWebsocketRequestActions(),
+  });
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  const actions = useMemo(() => {
+    return actionsResult.data ?? [];
+  }, [JSON.stringify(actionsResult.data)]);
+
+  return actions;
+}
+
+export async function getWebsocketRequestActions() {
+  const responses = await rpc<GetWebsocketRequestActionsResponse[]>(
+    "cmd_websocket_request_actions",
+  );
+  const actions = responses.flatMap((r) =>
+    r.actions.map((a: WebsocketRequestAction, i: number) => ({
+      label: a.label,
+      icon: a.icon,
+      call: async (websocketRequest: WebsocketRequest) => {
+        const payload: CallWebsocketRequestActionRequest = {
+          index: i,
+          pluginRefId: r.pluginRefId,
+          args: { websocketRequest },
+        };
+        await rpc("cmd_call_websocket_request_action", { req: payload });
+      },
+    })),
+  );
+
+  return actions;
+}
diff --git a/apps/yaak-client/hooks/useWindowFocus.ts b/apps/yaak-client/hooks/useWindowFocus.ts
new file mode 100644
index 0000000..c8b4575
--- /dev/null
+++ b/apps/yaak-client/hooks/useWindowFocus.ts
@@ -0,0 +1,12 @@
+import { platform } from "@yaakapp-internal/platform";
+import { useEffect, useState } from "react";
+
+export function useWindowFocus() {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    return platform.window.onFocusChanged(setVisible);
+  }, []);
+
+  return visible;
+}
diff --git a/apps/yaak-client/hooks/useWorkspaceActions.ts b/apps/yaak-client/hooks/useWorkspaceActions.ts
new file mode 100644
index 0000000..d1eb9ec
--- /dev/null
+++ b/apps/yaak-client/hooks/useWorkspaceActions.ts
@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Workspace } from "@yaakapp-internal/models";
+import type {
+  CallWorkspaceActionRequest,
+  GetWorkspaceActionsResponse,
+  WorkspaceAction,
+} from "@yaakapp-internal/plugins";
+import { useMemo } from "react";
+import { rpc } from "../lib/rpc";
+import { usePluginsKey } from "./usePlugins";
+
+export type CallableWorkspaceAction = Pick<WorkspaceAction, "label" | "icon"> & {
+  call: (workspace: Workspace) => Promise<void>;
+};
+
+export function useWorkspaceActions() {
+  const pluginsKey = usePluginsKey();
+
+  const actionsResult = useQuery<CallableWorkspaceAction[]>({
+    queryKey: ["workspace_actions", pluginsKey],
+    queryFn: () => getWorkspaceActions(),
+  });
+
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  const actions = useMemo(() => {
+    return actionsResult.data ?? [];
+  }, [JSON.stringify(actionsResult.data)]);
+
+  return actions;
+}
+
+export async function getWorkspaceActions() {
+  const responses = await rpc<GetWorkspaceActionsResponse[]>("cmd_workspace_actions");
+  const actions = responses.flatMap((r) =>
+    r.actions.map((a, i) => ({
+      label: a.label,
+      icon: a.icon,
+      call: async (workspace: Workspace) => {
+        const payload: CallWorkspaceActionRequest = {
+          index: i,
+          pluginRefId: r.pluginRefId,
+          args: { workspace },
+        };
+        await rpc("cmd_call_workspace_action", { req: payload });
+      },
+    })),
+  );
+
+  return actions;
+}
diff --git a/apps/yaak-client/hooks/useZoom.ts b/apps/yaak-client/hooks/useZoom.ts
new file mode 100644
index 0000000..0422647
--- /dev/null
+++ b/apps/yaak-client/hooks/useZoom.ts
@@ -0,0 +1,27 @@
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { useCallback } from "react";
+
+export function useZoom() {
+  const settings = useAtomValue(settingsAtom);
+
+  const zoomIn = useCallback(async () => {
+    if (!settings) return;
+    await patchModel(settings, {
+      interfaceScale: Math.min(1.8, settings.interfaceScale * 1.1),
+    });
+  }, [settings]);
+
+  const zoomOut = useCallback(async () => {
+    if (!settings) return;
+    await patchModel(settings, {
+      interfaceScale: Math.max(0.4, settings.interfaceScale * 0.9),
+    });
+  }, [settings]);
+
+  const zoomReset = useCallback(async () => {
+    await patchModel(settings, { interfaceScale: 1 });
+  }, [settings]);
+
+  return { zoomIn, zoomOut, zoomReset };
+}
diff --git a/apps/yaak-client/index.html b/apps/yaak-client/index.html
new file mode 100644
index 0000000..deaeb43
--- /dev/null
+++ b/apps/yaak-client/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" type="image/png" href="/icon-128.png" sizes="128x128" />
+    <link rel="apple-touch-icon" href="/icon-128.png" />
+    <title>Yaak App</title>
+    
+
+    
+    <style>
+      html,
+      body {
+        background-color: white;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html,
+        body {
+          background-color: #1b1a29;
+        }
+      }
+    </style>
+  </head>
+
+  <body class="text-base">
+    <div id="root"></div>
+    <div id="cm-portal" class="cm-portal"></div>
+    <div id="react-portal"></div>
+    <div id="radix-portal" class="cm-portal"></div>
+    <script type="module" src="/theme.ts"></script>
+    <script type="module" src="/font-size.ts"></script>
+    <script type="module" src="/font.ts"></script>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/yaak-client/init/git.ts b/apps/yaak-client/init/git.ts
new file mode 100644
index 0000000..7267691
--- /dev/null
+++ b/apps/yaak-client/init/git.ts
@@ -0,0 +1,38 @@
+import { watchGitWorktreeStatus, type GitWorktreeStatusEntry } from "@yaakapp-internal/git";
+import { activeWorkspaceMetaAtom } from "../hooks/useActiveWorkspace";
+import { gitWorktreeStatusAtom, gitWorktreeStatusByModelIdAtom } from "../lib/gitWorktreeStatus";
+import { jotaiStore } from "../lib/jotai";
+
+export function initGit() {
+  let watchedDir: string | null = null;
+  let unwatch: null | ReturnType<typeof watchGitWorktreeStatus> = null;
+
+  const watchActiveWorkspace = () => {
+    const syncDir = jotaiStore.get(activeWorkspaceMetaAtom)?.settingSyncDir ?? null;
+    if (syncDir === watchedDir) return;
+
+    void unwatch?.();
+    unwatch = null;
+    watchedDir = syncDir;
+    jotaiStore.set(gitWorktreeStatusAtom, null);
+    jotaiStore.set(gitWorktreeStatusByModelIdAtom, {});
+
+    if (syncDir == null) return;
+
+    unwatch = watchGitWorktreeStatus(syncDir, (status) => {
+      if (syncDir !== watchedDir) return;
+
+      jotaiStore.set(gitWorktreeStatusAtom, status);
+
+      const statusByModelId: Record<string, GitWorktreeStatusEntry> = {};
+      for (const entry of status.entries) {
+        if (entry.modelId == null) continue;
+        statusByModelId[entry.modelId] = entry;
+      }
+      jotaiStore.set(gitWorktreeStatusByModelIdAtom, statusByModelId);
+    });
+  };
+
+  watchActiveWorkspace();
+  jotaiStore.sub(activeWorkspaceMetaAtom, watchActiveWorkspace);
+}
diff --git a/apps/yaak-client/init/sync.ts b/apps/yaak-client/init/sync.ts
new file mode 100644
index 0000000..55a0663
--- /dev/null
+++ b/apps/yaak-client/init/sync.ts
@@ -0,0 +1,78 @@
+import { debounce, eagerDebounceAsync } from "@yaakapp-internal/lib";
+import type { AnyModel, ModelPayload } from "@yaakapp-internal/models";
+import { watchWorkspaceFiles } from "@yaakapp-internal/sync";
+import { syncWorkspace } from "../commands/commands";
+import { activeWorkspaceIdAtom, activeWorkspaceMetaAtom } from "../hooks/useActiveWorkspace";
+import { platform } from "@yaakapp-internal/platform";
+import { jotaiStore } from "../lib/jotai";
+
+export function initSync() {
+  initModelListeners();
+  initFileChangeListeners();
+  sync().catch(console.error);
+}
+
+export async function sync({ force }: { force?: boolean } = {}) {
+  const workspaceMeta = jotaiStore.get(activeWorkspaceMetaAtom);
+  if (workspaceMeta == null || workspaceMeta.settingSyncDir == null) {
+    return;
+  }
+
+  await syncWorkspace.mutateAsync({
+    workspaceId: workspaceMeta.workspaceId,
+    syncDir: workspaceMeta.settingSyncDir,
+    force,
+  });
+}
+
+const syncAfterFileChange = debounce(sync, 1000);
+const syncAfterModelWrite = eagerDebounceAsync(sync, 1000);
+
+/**
+ * Subscribe to model change events. Since we check the workspace ID on sync, we can
+ * simply add long-lived subscribers for the lifetime of the app.
+ */
+function initModelListeners() {
+  platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+    if (payloads.some((payload) => isModelRelevant(payload.model))) syncAfterModelWrite();
+  });
+}
+
+/**
+ * Subscribe to relevant files for a workspace. Since the workspace can change, this will
+ * keep track of the active workspace, as well as changes to the sync directory of the
+ * current workspace, and re-subscribe when necessary.
+ */
+function initFileChangeListeners() {
+  let unsub: null | ReturnType<typeof watchWorkspaceFiles> = null;
+  jotaiStore.sub(activeWorkspaceMetaAtom, async () => {
+    await unsub?.(); // Unsub to previous
+    const workspaceMeta = jotaiStore.get(activeWorkspaceMetaAtom);
+    if (workspaceMeta == null || workspaceMeta.settingSyncDir == null) return;
+    syncAfterFileChange(); // Perform an initial sync when switching workspace
+    unsub = watchWorkspaceFiles(
+      workspaceMeta.workspaceId,
+      workspaceMeta.settingSyncDir,
+      syncAfterFileChange,
+    );
+  });
+}
+
+function isModelRelevant(m: AnyModel) {
+  const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+
+  if (
+    m.model !== "workspace" &&
+    m.model !== "folder" &&
+    m.model !== "environment" &&
+    m.model !== "http_request" &&
+    m.model !== "grpc_request" &&
+    m.model !== "websocket_request"
+  ) {
+    return false;
+  }
+  if (m.model === "workspace") {
+    return m.id === workspaceId;
+  }
+  return m.workspaceId === workspaceId;
+}
diff --git a/apps/yaak-client/lib/alert.ts b/apps/yaak-client/lib/alert.ts
new file mode 100644
index 0000000..4b41518
--- /dev/null
+++ b/apps/yaak-client/lib/alert.ts
@@ -0,0 +1,29 @@
+import type { AlertProps } from "../components/core/Alert";
+import { Alert } from "../components/core/Alert";
+import type { DialogProps } from "../components/core/Dialog";
+import { showDialog } from "./dialog";
+
+interface AlertArgs {
+  id: string;
+  title: DialogProps["title"];
+  body: AlertProps["body"];
+  size?: DialogProps["size"];
+}
+
+export function showAlert({ id, title, body, size = "sm" }: AlertArgs) {
+  showDialog({
+    id,
+    title,
+    size,
+    disableClose: true,
+    render: ({ hide }) => Alert({ onHide: hide, body }),
+  });
+}
+
+export function showSimpleAlert(title: string, message: string) {
+  showAlert({
+    id: "simple-alert",
+    body: message,
+    title: title,
+  });
+}
diff --git a/apps/yaak-client/lib/appInfo.ts b/apps/yaak-client/lib/appInfo.ts
new file mode 100644
index 0000000..87fa8c4
--- /dev/null
+++ b/apps/yaak-client/lib/appInfo.ts
@@ -0,0 +1,23 @@
+import { platform } from "@yaakapp-internal/platform";
+import { rpc } from "./rpc";
+
+export interface AppInfo {
+  isDev: boolean;
+  version: string;
+  cliVersion: string | null;
+  name: string;
+  appDataDir: string;
+  appLogDir: string;
+  vendoredPluginDir: string;
+  defaultProjectDir: string;
+  identifier: string;
+  featureLicense: boolean;
+  featureUpdater: boolean;
+}
+
+export const appInfo = {
+  ...(await rpc("cmd_metadata")),
+  identifier: await platform.appIdentifier(),
+} as AppInfo;
+
+console.log("App info", appInfo);
diff --git a/apps/yaak-client/lib/atoms.ts b/apps/yaak-client/lib/atoms.ts
new file mode 100644
index 0000000..3345f9d
--- /dev/null
+++ b/apps/yaak-client/lib/atoms.ts
@@ -0,0 +1,22 @@
+import deepEqual from "@gilbarbara/deep-equal";
+import type { UpdateInfo } from "@yaakapp-internal/tauri-client";
+import type { Atom } from "jotai";
+import { atom } from "jotai";
+import { selectAtom } from "jotai/utils";
+import type { SplitLayoutLayout } from "@yaakapp-internal/ui";
+import { atomWithKVStorage } from "./atoms/atomWithKVStorage";
+
+export function deepEqualAtom<T>(a: Atom<T>) {
+  return selectAtom(
+    a,
+    (v) => v,
+    (a, b) => deepEqual(a, b),
+  );
+}
+
+export const workspaceLayoutAtom = atomWithKVStorage<SplitLayoutLayout>(
+  "workspace_layout",
+  "horizontal",
+);
+
+export const updateAvailableAtom = atom<Omit<UpdateInfo, "replyEventId"> | null>(null);
diff --git a/apps/yaak-client/lib/atoms/atomWithKVStorage.ts b/apps/yaak-client/lib/atoms/atomWithKVStorage.ts
new file mode 100644
index 0000000..70f9889
--- /dev/null
+++ b/apps/yaak-client/lib/atoms/atomWithKVStorage.ts
@@ -0,0 +1,25 @@
+import { atom } from "jotai";
+import { getKeyValue, setKeyValue } from "../keyValueStore";
+
+export function atomWithKVStorage<T extends object | boolean | number | string | null>(
+  key: string | string[],
+  fallback: T,
+  namespace = "global",
+) {
+  const baseAtom = atom<T>(fallback);
+
+  baseAtom.onMount = (setValue) => {
+    setValue(getKeyValue<T>({ namespace, key, fallback }));
+  };
+
+  const derivedAtom = atom<T, [T | ((prev: T) => T)], void>(
+    (get) => get(baseAtom),
+    (get, set, update) => {
+      const nextValue = typeof update === "function" ? update(get(baseAtom)) : update;
+      set(baseAtom, nextValue);
+      setKeyValue({ namespace, key, value: nextValue }).catch(console.error);
+    },
+  );
+
+  return derivedAtom;
+}
diff --git a/apps/yaak-client/lib/capitalize.ts b/apps/yaak-client/lib/capitalize.ts
new file mode 100644
index 0000000..1abff11
--- /dev/null
+++ b/apps/yaak-client/lib/capitalize.ts
@@ -0,0 +1,6 @@
+export function capitalize(str: string): string {
+  return str
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
diff --git a/apps/yaak-client/lib/color.ts b/apps/yaak-client/lib/color.ts
new file mode 100644
index 0000000..1bc1efe
--- /dev/null
+++ b/apps/yaak-client/lib/color.ts
@@ -0,0 +1,20 @@
+import type { Color } from "@yaakapp-internal/plugins";
+
+const colors: Record<Color, boolean> = {
+  primary: true,
+  secondary: true,
+  success: true,
+  notice: true,
+  warning: true,
+  danger: true,
+  info: true,
+};
+
+export function stringToColor(str: string | null): Color | null {
+  if (!str) return null;
+  const strLower = str.toLowerCase();
+  if (strLower in colors) {
+    return strLower as Color;
+  }
+  return null;
+}
diff --git a/apps/yaak-client/lib/confirm.ts b/apps/yaak-client/lib/confirm.ts
new file mode 100644
index 0000000..00d0d5c
--- /dev/null
+++ b/apps/yaak-client/lib/confirm.ts
@@ -0,0 +1,34 @@
+import type { ConfirmProps } from "../components/core/Confirm";
+import { Confirm } from "../components/core/Confirm";
+import type { DialogProps } from "../components/core/Dialog";
+import { showDialog } from "./dialog";
+
+type ConfirmArgs = {
+  id: string;
+} & Pick<DialogProps, "title" | "description" | "size"> &
+  Pick<ConfirmProps, "color" | "confirmText" | "requireTyping">;
+
+export async function showConfirm({
+  color,
+  confirmText,
+  requireTyping,
+  size = "sm",
+  ...extraProps
+}: ConfirmArgs) {
+  return new Promise((onResult: ConfirmProps["onResult"]) => {
+    showDialog({
+      ...extraProps,
+      size,
+      disableClose: true,
+      render: ({ hide }) => Confirm({ onHide: hide, color, onResult, confirmText, requireTyping }),
+    });
+  });
+}
+
+export async function showConfirmDelete({ confirmText, color, ...extraProps }: ConfirmArgs) {
+  return showConfirm({
+    color: color ?? "danger",
+    confirmText: confirmText ?? "Delete",
+    ...extraProps,
+  });
+}
diff --git a/apps/yaak-client/lib/confirmWebProxy.test.tsx b/apps/yaak-client/lib/confirmWebProxy.test.tsx
new file mode 100644
index 0000000..9ea0a1a
--- /dev/null
+++ b/apps/yaak-client/lib/confirmWebProxy.test.tsx
@@ -0,0 +1,64 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vite-plus/test";
+import type { DialogInstance } from "../components/Dialogs";
+
+const mocks = vi.hoisted(() => ({
+  platform: { httpProxyUrl: "https://web.yaak.app" },
+  showDialog: vi.fn<(dialog: DialogInstance) => void>(),
+}));
+
+vi.mock("@yaakapp-internal/platform", () => ({ platform: mocks.platform }));
+vi.mock("./appInfo", () => ({ appInfo: { identifier: "app.yaak.web" } }));
+vi.mock("./dialog", () => ({ showDialog: mocks.showDialog }));
+vi.mock("../hooks/useHotKey", () => ({
+  useHotKey: vi.fn(),
+  useFormattedHotkey: () => null,
+}));
+
+describe("proxy consent disclosure", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.clearAllMocks();
+    vi.stubGlobal("localStorage", { getItem: () => null });
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  test.each([
+    ["Yaak-hosted", "https://web.yaak.app"],
+    ["self-hosted", "https://yaak.example.com"],
+    ["local", "http://localhost:8080"],
+    ["split deployment", "https://send.example.com/relay"],
+  ])("identifies the %s proxy and requires an explicit decision", async (_, proxyUrl) => {
+    mocks.platform.httpProxyUrl = proxyUrl;
+    const { confirmWebProxy } = await import("./confirmWebProxy");
+    void confirmWebProxy();
+
+    const dialog = mocks.showDialog.mock.calls[0]?.[0];
+    expect(dialog).toMatchObject({
+      id: "web-proxy-consent",
+      title: "Requests in Yaak Web use a proxy",
+      size: "sm",
+      disableClose: true,
+    });
+    if (dialog == null) throw new Error("Expected the proxy consent dialog");
+
+    const disclosure = renderToStaticMarkup(<>{dialog.description}</>);
+    expect(disclosure).toContain(`>${proxyUrl}</code>`);
+    expect(disclosure).toMatch(/request and response data/i);
+    expect(disclosure).toContain("credentials");
+    expect(disclosure).toContain("server shown below");
+    expect(disclosure).not.toContain("Yaak’s servers");
+    expect(disclosure).toContain(
+      'href="https://yaak.app/docs/getting-started/web-proxy?ref=app.yaak.web"',
+    );
+    expect(disclosure).toContain('target="_blank"');
+    expect(disclosure).toContain("how the proxy works");
+
+    const Actions = dialog.render;
+    const actions = renderToStaticMarkup(<Actions hide={vi.fn()} />);
+    expect(actions).toMatch(/<button[^>]*type="submit"/);
+    expect(actions).toContain(">Send via Proxy<");
+    expect(actions).toContain(">Cancel<");
+  });
+});
diff --git a/apps/yaak-client/lib/confirmWebProxy.tsx b/apps/yaak-client/lib/confirmWebProxy.tsx
new file mode 100644
index 0000000..796e8fa
--- /dev/null
+++ b/apps/yaak-client/lib/confirmWebProxy.tsx
@@ -0,0 +1,60 @@
+import { platform } from "@yaakapp-internal/platform";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { Link } from "../components/core/Link";
+import { showConfirm } from "./confirm";
+
+const acceptedProxies = new Set<string>();
+const pendingConfirmations = new Map<string, Promise<boolean>>();
+
+/** One decision for all pending sends; only acceptance is remembered. */
+export function confirmWebProxy(): Promise<boolean> {
+  const proxyUrl = platform.httpProxyUrl;
+  if (proxyUrl == null) return Promise.resolve(true);
+
+  const key = `yaak.webProxyConsent.v1:${proxyUrl}`;
+  try {
+    if (localStorage.getItem(key) === "accepted") return Promise.resolve(true);
+  } catch {
+    // Storage can be unavailable in private or restricted browsing.
+  }
+  if (acceptedProxies.has(proxyUrl)) return Promise.resolve(true);
+
+  const pending = pendingConfirmations.get(proxyUrl);
+  if (pending != null) return pending;
+
+  const confirmation = showConfirm({
+    id: "web-proxy-consent",
+    title: "Requests in Yaak Web use a proxy",
+    confirmText: "Send via Proxy",
+    description: (
+      <div className="space-y-3">
+        <p>
+          Yaak Web sends requests through a hosted proxy. Request and response data, including
+          credentials, pass through the server shown below.
+        </p>
+        <p>
+          <InlineCode className="break-all">{proxyUrl}</InlineCode>
+        </p>
+        <p>
+          Learn more about{" "}
+          <Link href="https://yaak.app/docs/getting-started/web-proxy">how the proxy works</Link>.
+        </p>
+      </div>
+    ),
+  })
+    .then((accepted) => {
+      if (accepted) {
+        acceptedProxies.add(proxyUrl);
+        try {
+          localStorage.setItem(key, "accepted");
+        } catch {
+          // Keep acceptance for this tab if it cannot be persisted.
+        }
+      }
+      return accepted;
+    })
+    .finally(() => pendingConfirmations.delete(proxyUrl));
+
+  pendingConfirmations.set(proxyUrl, confirmation);
+  return confirmation;
+}
diff --git a/apps/yaak-client/lib/contentType.ts b/apps/yaak-client/lib/contentType.ts
new file mode 100644
index 0000000..326f8a8
--- /dev/null
+++ b/apps/yaak-client/lib/contentType.ts
@@ -0,0 +1,99 @@
+import MimeType from "whatwg-mimetype";
+import type { EditorProps } from "../components/core/Editor/Editor";
+
+export function languageFromContentType(
+  contentType: string | null,
+  content: string | null = null,
+): EditorProps["language"] {
+  const justContentType = contentType?.split(";")[0] ?? contentType ?? "";
+  if (justContentType.includes("json")) {
+    return "json";
+  }
+  if (justContentType.includes("xml")) {
+    return "xml";
+  }
+  if (justContentType.includes("html")) {
+    const detected = languageFromContent(content);
+    if (detected === "xml") {
+      // If it's detected as XML, but is already HTML, don't change it
+      return "html";
+    }
+    return detected;
+  }
+  if (justContentType.includes("javascript")) {
+    // Sometimes `application/javascript` returns JSON, so try detecting that
+    return languageFromContent(content, "javascript");
+  }
+  if (justContentType.includes("markdown")) {
+    return "markdown";
+  }
+
+  return languageFromContent(content, "text");
+}
+
+export function languageFromContent(
+  content: string | null,
+  fallback?: EditorProps["language"],
+): EditorProps["language"] {
+  if (content == null) return "text";
+
+  const firstBytes = content.slice(0, 20).trim();
+
+  if (firstBytes.startsWith("{") || firstBytes.startsWith("[")) {
+    return "json";
+  }
+  if (
+    firstBytes.toLowerCase().startsWith("<!doctype") ||
+    firstBytes.toLowerCase().startsWith("<html")
+  ) {
+    return "html";
+  }
+  if (firstBytes.startsWith("<")) {
+    return "xml";
+  }
+
+  return fallback;
+}
+
+export function isJSON(content: string | null | undefined): boolean {
+  if (typeof content !== "string") return false;
+
+  try {
+    JSON.parse(content);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function isProbablyTextContentType(contentType: string | null): boolean {
+  if (contentType == null) return false;
+
+  const mimeType = getMimeTypeFromContentType(contentType).essence;
+  const normalized = mimeType.toLowerCase();
+
+  // Check if it starts with "text/"
+  if (normalized.startsWith("text/")) {
+    return true;
+  }
+
+  // Common text mimetypes and suffixes
+  return [
+    "application/json",
+    "application/xml",
+    "application/javascript",
+    "application/yaml",
+    "+json",
+    "+xml",
+    "+yaml",
+    "+text",
+  ].some((textType) => normalized === textType || normalized.endsWith(textType));
+}
+
+export function getMimeTypeFromContentType(contentType: string): MimeType {
+  try {
+    return new MimeType(contentType);
+  } catch {
+    return new MimeType("text/plain");
+  }
+}
diff --git a/apps/yaak-client/lib/contextMenu.ts b/apps/yaak-client/lib/contextMenu.ts
new file mode 100644
index 0000000..cfff79f
--- /dev/null
+++ b/apps/yaak-client/lib/contextMenu.ts
@@ -0,0 +1,46 @@
+import { atom } from "jotai";
+import type { DropdownItem } from "../components/core/Dropdown";
+import { jotaiStore } from "./jotai";
+
+/**
+ * A menu opened from somewhere that can't render React.
+ *
+ * Most menus in the app are a `Dropdown` wrapped around their own trigger. This is for the
+ * cases where the trigger isn't a React component at all — a CodeMirror widget builds its DOM
+ * synchronously, so it can only hand over a position and a list of items. Same shape as
+ * {@link showDialog}.
+ */
+export interface ContextMenuInstance {
+  id: string;
+  /** Where to open, in viewport coordinates */
+  triggerPosition: { x: number; y: number };
+  /** The trigger's box, when it has one, so placement can align to its edges */
+  triggerRect?: Pick<DOMRect, "top" | "bottom" | "left" | "right">;
+  /** The element it belongs to, so clicking that doesn't read as a click outside */
+  triggerEl?: HTMLElement | null;
+  items: DropdownItem[];
+}
+
+export const contextMenusAtom = atom<ContextMenuInstance[]>([]);
+
+export function showContextMenu({ id, ...props }: ContextMenuInstance) {
+  jotaiStore.set(contextMenusAtom, (m) => [...m.filter((c) => c.id !== id), { id, ...props }]);
+}
+
+/**
+ * Opens the menu, or closes it if this one is already open.
+ *
+ * What a trigger wants: pressing it a second time should put the menu away. Same shape as
+ * {@link toggleDialog}.
+ */
+export function toggleContextMenu({ id, ...props }: ContextMenuInstance) {
+  if (jotaiStore.get(contextMenusAtom).some((c) => c.id === id)) {
+    hideContextMenu(id);
+  } else {
+    showContextMenu({ id, ...props });
+  }
+}
+
+export function hideContextMenu(id: string) {
+  jotaiStore.set(contextMenusAtom, (m) => m.filter((c) => c.id !== id));
+}
diff --git a/apps/yaak-client/lib/copy.ts b/apps/yaak-client/lib/copy.ts
new file mode 100644
index 0000000..27f553d
--- /dev/null
+++ b/apps/yaak-client/lib/copy.ts
@@ -0,0 +1,22 @@
+import { showToast } from "./toast";
+import { platform } from "@yaakapp-internal/platform";
+
+export function copyToClipboard(
+  text: string | null,
+  { disableToast }: { disableToast?: boolean } = {},
+) {
+  if (text == null) {
+    platform.clipboard.clear().catch(console.error);
+  } else {
+    platform.clipboard.writeText(text).catch(console.error);
+  }
+
+  if (text !== "" && !disableToast) {
+    showToast({
+      id: "copied",
+      color: "success",
+      icon: "copy",
+      message: "Copied to clipboard",
+    });
+  }
+}
diff --git a/apps/yaak-client/lib/createRequestAndNavigate.tsx b/apps/yaak-client/lib/createRequestAndNavigate.tsx
new file mode 100644
index 0000000..7e229fc
--- /dev/null
+++ b/apps/yaak-client/lib/createRequestAndNavigate.tsx
@@ -0,0 +1,31 @@
+import type { GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import { createWorkspaceModel } from "@yaakapp-internal/models";
+import { activeRequestAtom } from "../hooks/useActiveRequest";
+import { jotaiStore } from "./jotai";
+import { router } from "./router";
+
+export async function createRequestAndNavigate<
+  T extends HttpRequest | GrpcRequest | WebsocketRequest,
+>(patch: Partial<T> & Pick<T, "model" | "workspaceId">) {
+  const activeRequest = jotaiStore.get(activeRequestAtom);
+
+  if (patch.sortPriority === undefined) {
+    if (activeRequest != null) {
+      // Place below the currently active request
+      patch.sortPriority = activeRequest.sortPriority;
+    } else {
+      // Place at the very top
+      patch.sortPriority = -Date.now();
+    }
+  }
+  patch.folderId = patch.folderId || activeRequest?.folderId;
+
+  const newId = await createWorkspaceModel(patch);
+
+  await router.navigate({
+    to: "/workspaces/$workspaceId",
+    params: { workspaceId: patch.workspaceId },
+    search: (prev) => ({ ...prev, request_id: newId }),
+  });
+  return newId;
+}
diff --git a/apps/yaak-client/lib/data/acceptLanguages.ts b/apps/yaak-client/lib/data/acceptLanguages.ts
new file mode 100644
index 0000000..2f0b5a3
--- /dev/null
+++ b/apps/yaak-client/lib/data/acceptLanguages.ts
@@ -0,0 +1,15 @@
+// Common Accept-Language values.
+export const acceptLanguages = [
+  "*",
+  "en",
+  "en-US",
+  "en-US,en;q=0.9",
+  "en-GB,en;q=0.9",
+  "de-DE,de;q=0.9,en;q=0.8",
+  "fr-FR,fr;q=0.9,en;q=0.8",
+  "es-ES,es;q=0.9,en;q=0.8",
+  "ru-RU,ru;q=0.9,en;q=0.8",
+  "uk-UA,uk;q=0.9,en;q=0.8",
+  "zh-CN,zh;q=0.9,en;q=0.8",
+  "ja-JP,ja;q=0.9,en;q=0.8",
+];
diff --git a/apps/yaak-client/lib/data/cacheControl.ts b/apps/yaak-client/lib/data/cacheControl.ts
new file mode 100644
index 0000000..ea69436
--- /dev/null
+++ b/apps/yaak-client/lib/data/cacheControl.ts
@@ -0,0 +1,16 @@
+// Common Cache-Control directives (request and response).
+export const cacheControlDirectives = [
+  "no-cache",
+  "no-store",
+  "no-transform",
+  "max-age=0",
+  "max-age=3600",
+  "max-age=86400",
+  "s-maxage=3600",
+  "must-revalidate",
+  "proxy-revalidate",
+  "stale-while-revalidate=60",
+  "public",
+  "private",
+  "immutable",
+];
diff --git a/apps/yaak-client/lib/data/charsets.ts b/apps/yaak-client/lib/data/charsets.ts
new file mode 100644
index 0000000..3e3f560
--- /dev/null
+++ b/apps/yaak-client/lib/data/charsets.ts
@@ -0,0 +1,121 @@
+export const charsets = [
+  "utf-8",
+  "us-ascii",
+  "950",
+  "ASMO-708",
+  "CP1026",
+  "CP870",
+  "DOS-720",
+  "DOS-862",
+  "EUC-CN",
+  "IBM437",
+  "Johab",
+  "Windows-1252",
+  "X-EBCDIC-Spain",
+  "big5",
+  "cp866",
+  "csISO2022JP",
+  "ebcdic-cp-us",
+  "euc-kr",
+  "gb2312",
+  "hz-gb-2312",
+  "ibm737",
+  "ibm775",
+  "ibm850",
+  "ibm852",
+  "ibm857",
+  "ibm861",
+  "ibm869",
+  "iso-2022-jp",
+  "iso-2022-jp",
+  "iso-2022-kr",
+  "iso-8859-1",
+  "iso-8859-15",
+  "iso-8859-2",
+  "iso-8859-3",
+  "iso-8859-4",
+  "iso-8859-5",
+  "iso-8859-6",
+  "iso-8859-7",
+  "iso-8859-8",
+  "iso-8859-8-i",
+  "iso-8859-9",
+  "koi8-r",
+  "koi8-u",
+  "ks_c_5601-1987",
+  "macintosh",
+  "shift_jis",
+  "unicode",
+  "unicodeFFFE",
+  "utf-7",
+  "windows-1250",
+  "windows-1251",
+  "windows-1253",
+  "windows-1254",
+  "windows-1255",
+  "windows-1256",
+  "windows-1257",
+  "windows-1258",
+  "windows-874",
+  "x-Chinese-CNS",
+  "x-Chinese-Eten",
+  "x-EBCDIC-Arabic",
+  "x-EBCDIC-CyrillicRussian",
+  "x-EBCDIC-CyrillicSerbianBulgarian",
+  "x-EBCDIC-DenmarkNorway",
+  "x-EBCDIC-FinlandSweden",
+  "x-EBCDIC-Germany",
+  "x-EBCDIC-Greek",
+  "x-EBCDIC-GreekModern",
+  "x-EBCDIC-Hebrew",
+  "x-EBCDIC-Icelandic",
+  "x-EBCDIC-Italy",
+  "x-EBCDIC-JapaneseAndJapaneseLatin",
+  "x-EBCDIC-JapaneseAndKana",
+  "x-EBCDIC-JapaneseAndUSCanada",
+  "x-EBCDIC-JapaneseKatakana",
+  "x-EBCDIC-KoreanAndKoreanExtended",
+  "x-EBCDIC-KoreanExtended",
+  "x-EBCDIC-SimplifiedChinese",
+  "x-EBCDIC-Thai",
+  "x-EBCDIC-TraditionalChinese",
+  "x-EBCDIC-Turkish",
+  "x-EBCDIC-UK",
+  "x-Europa",
+  "x-IA5",
+  "x-IA5-German",
+  "x-IA5-Norwegian",
+  "x-IA5-Swedish",
+  "x-ebcdic-cp-us-euro",
+  "x-ebcdic-denmarknorway-euro",
+  "x-ebcdic-finlandsweden-euro",
+  "x-ebcdic-finlandsweden-euro",
+  "x-ebcdic-france-euro",
+  "x-ebcdic-germany-euro",
+  "x-ebcdic-icelandic-euro",
+  "x-ebcdic-international-euro",
+  "x-ebcdic-italy-euro",
+  "x-ebcdic-spain-euro",
+  "x-ebcdic-uk-euro",
+  "x-euc-jp",
+  "x-iscii-as",
+  "x-iscii-be",
+  "x-iscii-de",
+  "x-iscii-gu",
+  "x-iscii-ka",
+  "x-iscii-ma",
+  "x-iscii-or",
+  "x-iscii-pa",
+  "x-iscii-ta",
+  "x-iscii-te",
+  "x-mac-arabic",
+  "x-mac-ce",
+  "x-mac-chinesesimp",
+  "x-mac-cyrillic",
+  "x-mac-greek",
+  "x-mac-hebrew",
+  "x-mac-icelandic",
+  "x-mac-japanese",
+  "x-mac-korean",
+  "x-mac-turkish",
+];
diff --git a/apps/yaak-client/lib/data/connections.ts b/apps/yaak-client/lib/data/connections.ts
new file mode 100644
index 0000000..89dddad
--- /dev/null
+++ b/apps/yaak-client/lib/data/connections.ts
@@ -0,0 +1 @@
+export const connections = ["close", "keep-alive"];
diff --git a/apps/yaak-client/lib/data/encodings.ts b/apps/yaak-client/lib/data/encodings.ts
new file mode 100644
index 0000000..cb90d68
--- /dev/null
+++ b/apps/yaak-client/lib/data/encodings.ts
@@ -0,0 +1 @@
+export const encodings = ["*", "gzip", "compress", "deflate", "br", "zstd", "identity"];
diff --git a/apps/yaak-client/lib/data/headerNames.ts b/apps/yaak-client/lib/data/headerNames.ts
new file mode 100644
index 0000000..6d62448
--- /dev/null
+++ b/apps/yaak-client/lib/data/headerNames.ts
@@ -0,0 +1,70 @@
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+
+export const headerNames: (GenericCompletionOption | string)[] = [
+  {
+    type: "constant",
+    label: "Content-Type",
+    info: "The original media type of the resource (prior to any content encoding applied for sending)",
+  },
+  {
+    type: "constant",
+    label: "Content-Length",
+    info: "The size of the message body, in bytes, sent to the recipient",
+  },
+  {
+    type: "constant",
+    label: "Accept",
+    info:
+      "The content types, expressed as MIME types, the client is able to understand. " +
+      "The server uses content negotiation to select one of the proposals and informs " +
+      "the client of the choice with the Content-Type response header. Browsers set required " +
+      "values for this header based on the context of the request. For example, a browser uses " +
+      "different values in a request when fetching a CSS stylesheet, image, video, or a script.",
+  },
+  {
+    type: "constant",
+    label: "Accept-Encoding",
+    info:
+      "The content encoding (usually a compression algorithm) that the client can understand. " +
+      "The server uses content negotiation to select one of the proposals and informs the client " +
+      "of that choice with the Content-Encoding response header.",
+  },
+  {
+    type: "constant",
+    label: "Accept-Language",
+    info:
+      "The natural language and locale that the client prefers. The server uses content " +
+      "negotiation to select one of the proposals and informs the client of the choice with " +
+      "the Content-Language response header.",
+  },
+  {
+    type: "constant",
+    label: "Authorization",
+    info: "Provide credentials that authenticate a user agent with a server, allowing access to a protected resource.",
+  },
+  "Cache-Control",
+  "Cookie",
+  "Connection",
+  "Content-MD5",
+  "Date",
+  "Expect",
+  "Forwarded",
+  "From",
+  "Host",
+  "If-Match",
+  "If-Modified-Since",
+  "If-None-Match",
+  "If-Range",
+  "If-Unmodified-Since",
+  "Max-Forwards",
+  "Origin",
+  "Pragma",
+  "Proxy-Authorization",
+  "Range",
+  "Referer",
+  "TE",
+  "User-Agent",
+  "Upgrade",
+  "Via",
+  "Warning",
+];
diff --git a/apps/yaak-client/lib/data/headerValuePresets.ts b/apps/yaak-client/lib/data/headerValuePresets.ts
new file mode 100644
index 0000000..7fef3ab
--- /dev/null
+++ b/apps/yaak-client/lib/data/headerValuePresets.ts
@@ -0,0 +1,7 @@
+/**
+ * A suggested value for a header. A plain string is used when the displayed
+ * label and the inserted value are the same (e.g. mime types). The object form
+ * lets us show a short, readable `label` (e.g. "Chrome (Windows)") while
+ * inserting a longer `value` (the full User-Agent string).
+ */
+export type HeaderValuePreset = string | { label: string; value: string };
diff --git a/apps/yaak-client/lib/data/mimetypes.ts b/apps/yaak-client/lib/data/mimetypes.ts
new file mode 100644
index 0000000..3c97c5f
--- /dev/null
+++ b/apps/yaak-client/lib/data/mimetypes.ts
@@ -0,0 +1,213 @@
+export const mimeTypes = [
+  "application/json",
+  "application/xml",
+  "application/x-www-form-urlencoded",
+  "multipart/form-data",
+  "multipart/byteranges",
+  "application/octet-stream",
+  "text/plain",
+  "application/javascript",
+  "application/pdf",
+  "text/html",
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+  "text/css",
+  "application/x-pkcs12",
+  "application/xhtml+xml",
+  "application/andrew-inset",
+  "application/applixware",
+  "application/atom+xml",
+  "application/atomcat+xml",
+  "application/atomsvc+xml",
+  "application/bdoc",
+  "application/cu-seeme",
+  "application/davmount+xml",
+  "application/docbook+xml",
+  "application/dssc+xml",
+  "application/ecmascript",
+  "application/epub+zip",
+  "application/exi",
+  "application/font-tdpfr",
+  "application/font-woff",
+  "application/font-woff2",
+  "application/geo+json",
+  "application/graphql",
+  "application/java-serialized-object",
+  "application/json5",
+  "application/jsonml+json",
+  "application/ld+json",
+  "application/lost+xml",
+  "application/manifest+json",
+  "application/mp4",
+  "application/msword",
+  "application/mxf",
+  "application/n-triples",
+  "application/n-quads",
+  "application/oda",
+  "application/ogg",
+  "application/pgp-encrypted",
+  "application/pgp-signature",
+  "application/pics-rules",
+  "application/pkcs10",
+  "application/pkcs7-mime",
+  "application/pkcs7-signature",
+  "application/pkcs8",
+  "application/postscript",
+  "application/pskc+xml",
+  "application/rdf+xml",
+  "application/resource-lists+xml",
+  "application/resource-lists-diff+xml",
+  "application/rls-services+xml",
+  "application/rsd+xml",
+  "application/rss+xml",
+  "application/rtf",
+  "application/sdp",
+  "application/shf+xml",
+  "application/timestamped-data",
+  "application/trig",
+  "application/vnd.android.package-archive",
+  "application/vnd.api+json",
+  "application/vnd.apple.installer+xml",
+  "application/vnd.apple.mpegurl",
+  "application/vnd.apple.pkpass",
+  "application/vnd.bmi",
+  "application/vnd.curl.car",
+  "application/vnd.curl.pcurl",
+  "application/vnd.dna",
+  "application/vnd.google-apps.document",
+  "application/vnd.google-apps.presentation",
+  "application/vnd.google-apps.spreadsheet",
+  "application/vnd.hal+xml",
+  "application/vnd.handheld-entertainment+xml",
+  "application/vnd.macports.portpkg",
+  "application/vnd.unity",
+  "application/vnd.zul",
+  "application/widget",
+  "application/wsdl+xml",
+  "application/x-7z-compressed",
+  "application/x-ace-compressed",
+  "application/x-bittorrent",
+  "application/x-bzip",
+  "application/x-bzip2",
+  "application/x-cfs-compressed",
+  "application/x-chrome-extension",
+  "application/x-cocoa",
+  "application/x-envoy",
+  "application/x-eva",
+  "font/opentype",
+  "application/x-gca-compressed",
+  "application/x-gtar",
+  "application/x-hdf",
+  "application/x-httpd-php",
+  "application/x-install-instructions",
+  "application/x-latex",
+  "application/x-lua-bytecode",
+  "application/x-lzh-compressed",
+  "application/x-ms-application",
+  "application/x-ms-shortcut",
+  "application/x-ndjson",
+  "application/x-perl",
+  "application/x-pkcs7-certificates",
+  "application/x-pkcs7-certreqresp",
+  "application/x-rar-compressed",
+  "application/x-sh",
+  "application/x-sql",
+  "application/x-subrip",
+  "application/x-t3vm-image",
+  "application/x-tads",
+  "application/x-tar",
+  "application/x-tcl",
+  "application/x-tex",
+  "application/x-x509-ca-cert",
+  "application/xop+xml",
+  "application/xslt+xml",
+  "application/zip",
+  "audio/3gpp",
+  "audio/adpcm",
+  "audio/basic",
+  "audio/midi",
+  "audio/mpeg",
+  "audio/mp4",
+  "audio/ogg",
+  "audio/silk",
+  "audio/wave",
+  "audio/webm",
+  "audio/x-aac",
+  "audio/x-aiff",
+  "audio/x-caf",
+  "audio/x-flac",
+  "audio/xm",
+  "image/bmp",
+  "image/cgm",
+  "image/sgi",
+  "image/svg+xml",
+  "image/tiff",
+  "image/x-3ds",
+  "image/x-freehand",
+  "image/x-icon",
+  "image/x-jng",
+  "image/x-mrsid-image",
+  "image/x-pcx",
+  "image/x-pict",
+  "image/x-rgb",
+  "image/x-tga",
+  "message/rfc822",
+  "text/cache-manifest",
+  "text/calendar",
+  "text/coffeescript",
+  "text/csv",
+  "text/hjson",
+  "text/jade",
+  "text/jsx",
+  "text/less",
+  "text/mathml",
+  "text/n3",
+  "text/richtext",
+  "text/sgml",
+  "text/slim",
+  "text/stylus",
+  "text/tab-separated-values",
+  "text/turtle",
+  "text/uri-list",
+  "text/vcard",
+  "text/vnd.curl",
+  "text/vnd.fly",
+  "text/vtt",
+  "text/x-asm",
+  "text/x-c",
+  "text/x-component",
+  "text/x-fortran",
+  "text/x-handlebars-template",
+  "text/x-java-source",
+  "text/x-lua",
+  "text/x-markdown",
+  "text/x-nfo",
+  "text/x-opml",
+  "text/x-pascal",
+  "text/x-processing",
+  "text/x-sass",
+  "text/x-scss",
+  "text/x-vcalendar",
+  "text/xml",
+  "text/yaml",
+  "video/3gpp",
+  "video/3gpp2",
+  "video/h261",
+  "video/h263",
+  "video/h264",
+  "video/jpeg",
+  "video/jpm",
+  "video/mj2",
+  "video/mp2t",
+  "video/mp4",
+  "video/mpeg",
+  "video/ogg",
+  "video/quicktime",
+  "video/webm",
+  "video/x-f4v",
+  "video/x-fli",
+  "video/x-flv",
+  "video/x-m4v",
+];
diff --git a/apps/yaak-client/lib/data/userAgents.ts b/apps/yaak-client/lib/data/userAgents.ts
new file mode 100644
index 0000000..f7e45b2
--- /dev/null
+++ b/apps/yaak-client/lib/data/userAgents.ts
@@ -0,0 +1,51 @@
+import type { HeaderValuePreset } from "./headerValuePresets";
+
+// Common, real-world User-Agent strings. The short `label` is shown in the
+// dropdown/autocomplete, while the full UA string is what gets inserted.
+//
+// Browsers freeze parts of their UA: Chrome reports its minor version as 0.0.0
+// and Safari reports macOS as 10_15_7, regardless of the actual version.
+export const userAgents: HeaderValuePreset[] = [
+  {
+    label: "Chrome 151 · Windows 10/11 · x64",
+    value:
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36",
+  },
+  {
+    label: "Edge 151 · Windows 10/11 · x64",
+    value:
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36 Edg/151.0.0.0",
+  },
+  {
+    label: "Firefox 153 · Windows 10/11 · x64",
+    value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:153.0) Gecko/20100101 Firefox/153.0",
+  },
+  {
+    label: "Chrome 151 · macOS",
+    value:
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36",
+  },
+  {
+    label: "Safari 27 · macOS",
+    value:
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/27.0 Safari/605.1.15",
+  },
+  {
+    label: "Chrome 151 · Linux · x64",
+    value:
+      "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36",
+  },
+  {
+    label: "Safari 27 · iOS 27 · iPhone",
+    value:
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 27_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/27.0 Mobile/15E148 Safari/604.1",
+  },
+  {
+    label: "Chrome 151 · Android 16 · Pixel 10",
+    value:
+      "Mozilla/5.0 (Linux; Android 16; Pixel 10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Mobile Safari/537.36",
+  },
+  { label: "curl 8.21.0 · CLI", value: "curl/8.21.0" },
+  { label: "Postman 7.56 · API client", value: "PostmanRuntime/7.56.1" },
+  { label: "Insomnia 13.1 · API client", value: "insomnia/13.1.0" },
+];
diff --git a/apps/yaak-client/lib/defaultHeaders.ts b/apps/yaak-client/lib/defaultHeaders.ts
new file mode 100644
index 0000000..fa51146
--- /dev/null
+++ b/apps/yaak-client/lib/defaultHeaders.ts
@@ -0,0 +1,8 @@
+import type { HttpRequestHeader } from "@yaakapp-internal/models";
+import { rpc } from "./rpc";
+
+/**
+ * Global default headers fetched from the backend.
+ * These are static and fetched once on module load.
+ */
+export const defaultHeaders: HttpRequestHeader[] = await rpc("cmd_default_headers");
diff --git a/apps/yaak-client/lib/deleteModelWithConfirm.tsx b/apps/yaak-client/lib/deleteModelWithConfirm.tsx
new file mode 100644
index 0000000..ac4d504
--- /dev/null
+++ b/apps/yaak-client/lib/deleteModelWithConfirm.tsx
@@ -0,0 +1,65 @@
+import type { AnyModel } from "@yaakapp-internal/models";
+import { deleteModel, modelTypeLabel } from "@yaakapp-internal/models";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { Prose } from "../components/Prose";
+import { showConfirmDelete } from "./confirm";
+import { pluralizeCount } from "./pluralize";
+import { resolvedModelName } from "./resolvedModelName";
+
+export async function deleteModelWithConfirm(
+  model: AnyModel | AnyModel[] | null,
+  options: { confirmName?: string } = {},
+): Promise<boolean> {
+  if (model == null) {
+    console.warn("Tried to delete null model");
+    return false;
+  }
+  const models = Array.isArray(model) ? model : [model];
+  const firstModel = models[0];
+  if (firstModel == null) return false;
+
+  const descriptor =
+    models.length === 1 ? modelTypeLabel(firstModel) : pluralizeCount("Item", models.length);
+  const confirmed = await showConfirmDelete({
+    id: `delete-model-${models.map((m) => m.id).join(",")}`,
+    title: `Delete ${descriptor}`,
+    requireTyping: options.confirmName,
+    description: (
+      <>
+        Permanently delete{" "}
+        {models.length === 1 ? (
+          <>
+            <InlineCode>{resolvedModelName(firstModel)}</InlineCode>?
+          </>
+        ) : models.length < 10 ? (
+          <>
+            the following?
+            <Prose className="mt-2">
+              <ul className="space-y-1">
+                {models.map((m) => (
+                  <li key={m.id}>
+                    <InlineCode
+                      className="inline-block truncate align-bottom max-w-full"
+                      title={resolvedModelName(m)}
+                    >
+                      {resolvedModelName(m)}
+                    </InlineCode>
+                  </li>
+                ))}
+              </ul>
+            </Prose>
+          </>
+        ) : (
+          `all ${pluralizeCount("item", models.length)}?`
+        )}
+      </>
+    ),
+  });
+
+  if (!confirmed) {
+    return false;
+  }
+
+  await Promise.allSettled(models.map((m) => deleteModel(m)));
+  return true;
+}
diff --git a/apps/yaak-client/lib/dialog.ts b/apps/yaak-client/lib/dialog.ts
new file mode 100644
index 0000000..4c09e01
--- /dev/null
+++ b/apps/yaak-client/lib/dialog.ts
@@ -0,0 +1,22 @@
+import { atom } from "jotai";
+import type { DialogInstance } from "../components/Dialogs";
+import { jotaiStore } from "./jotai";
+
+export const dialogsAtom = atom<DialogInstance[]>([]);
+
+export function toggleDialog({ id, ...props }: DialogInstance) {
+  const dialogs = jotaiStore.get(dialogsAtom);
+  if (dialogs.some((d) => d.id === id)) {
+    hideDialog(id);
+  } else {
+    showDialog({ id, ...props });
+  }
+}
+
+export function showDialog({ id, ...props }: DialogInstance) {
+  jotaiStore.set(dialogsAtom, (a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
+}
+
+export function hideDialog(id: string) {
+  jotaiStore.set(dialogsAtom, (a) => a.filter((d) => d.id !== id));
+}
diff --git a/apps/yaak-client/lib/diffYaml.ts b/apps/yaak-client/lib/diffYaml.ts
new file mode 100644
index 0000000..42a1202
--- /dev/null
+++ b/apps/yaak-client/lib/diffYaml.ts
@@ -0,0 +1,14 @@
+import type { SyncModel } from "@yaakapp-internal/git";
+import { stringify } from "yaml";
+
+/**
+ * Convert a SyncModel to a YAML string for diffing.
+ */
+export function modelToYaml(model: SyncModel | null): string {
+  if (!model) return "";
+
+  return stringify(model, {
+    indent: 2,
+    lineWidth: 0,
+  });
+}
diff --git a/apps/yaak-client/lib/dnd.ts b/apps/yaak-client/lib/dnd.ts
new file mode 100644
index 0000000..fc18b81
--- /dev/null
+++ b/apps/yaak-client/lib/dnd.ts
@@ -0,0 +1,39 @@
+import type { DragMoveEvent } from "@dnd-kit/core";
+
+export function computeSideForDragMove(
+  id: string,
+  e: DragMoveEvent,
+  orientation: "vertical" | "horizontal" = "vertical",
+): "before" | "after" | null {
+  if (e.over == null || e.over.id !== id) {
+    return null;
+  }
+  if (e.active.rect.current.initial == null) return null;
+
+  const overRect = e.over.rect;
+
+  if (orientation === "horizontal") {
+    // For horizontal layouts (tabs side-by-side), use left/right logic
+    const activeLeft =
+      e.active.rect.current.translated?.left ?? e.active.rect.current.initial.left + e.delta.x;
+    const pointerX = activeLeft + e.active.rect.current.initial.width / 2;
+
+    const hoverLeft = overRect.left;
+    const hoverRight = overRect.right;
+    const hoverMiddleX = hoverLeft + (hoverRight - hoverLeft) / 2;
+
+    return pointerX < hoverMiddleX ? "before" : "after"; // 'before' = left, 'after' = right
+  } else {
+    // For vertical layouts, use top/bottom logic
+    const activeTop =
+      e.active.rect.current.translated?.top ?? e.active.rect.current.initial.top + e.delta.y;
+    const pointerY = activeTop + e.active.rect.current.initial.height / 2;
+
+    const hoverTop = overRect.top;
+    const hoverBottom = overRect.bottom;
+    const hoverMiddleY = (hoverBottom - hoverTop) / 2;
+    const hoverClientY = pointerY - hoverTop;
+
+    return hoverClientY < hoverMiddleY ? "before" : "after";
+  }
+}
diff --git a/apps/yaak-client/lib/docFingerprint.test.ts b/apps/yaak-client/lib/docFingerprint.test.ts
new file mode 100644
index 0000000..51b335e
--- /dev/null
+++ b/apps/yaak-client/lib/docFingerprint.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, test } from "vite-plus/test";
+import { docFingerprint } from "./docFingerprint";
+
+const sampled = (text: string) => docFingerprint(text, { exact: false });
+const exact = (text: string) => docFingerprint(text, { exact: true });
+
+/** Same length as `text`, with one character changed at `at` */
+const changeAt = (text: string, at: number) =>
+  `${text.slice(0, at)}${text[at] === "b" ? "c" : "b"}${text.slice(at + 1)}`;
+
+describe("docFingerprint", () => {
+  test("is stable for the same text", () => {
+    expect(sampled("hello")).toBe(sampled("hello"));
+    expect(exact("hello")).toBe(exact("hello"));
+  });
+
+  test("differs on different short text", () => {
+    expect(sampled("hello")).not.toBe(sampled("world"));
+  });
+
+  test("differs on length alone", () => {
+    expect(sampled("a".repeat(1_000_000))).not.toBe(sampled("a".repeat(1_000_001)));
+  });
+
+  test("hashes small documents in full, so any change is caught", () => {
+    const doc = "a".repeat(100);
+    for (let i = 0; i < doc.length; i++) {
+      expect(sampled(doc)).not.toBe(sampled(changeAt(doc, i)));
+    }
+  });
+
+  describe("sampled", () => {
+    const doc = "a".repeat(1_000_000);
+
+    test("notices a change at the start", () => {
+      expect(sampled(doc)).not.toBe(sampled(changeAt(doc, 0)));
+    });
+
+    test("notices a change at the end", () => {
+      expect(sampled(doc)).not.toBe(sampled(changeAt(doc, doc.length - 1)));
+    });
+
+    test("notices a change in the middle", () => {
+      expect(sampled(doc)).not.toBe(sampled(changeAt(doc, doc.length / 2)));
+    });
+
+    test("misses a same-length change between the samples", () => {
+      // The documented cost of sampling. Read-only editors accept it because the worst a
+      // collision can do there is restore a fold or the cursor to the wrong place.
+      expect(sampled(doc)).toBe(sampled(changeAt(doc, 250_000)));
+    });
+  });
+
+  describe("exact", () => {
+    const doc = "a".repeat(1_000_000);
+
+    test("catches a same-length change anywhere, which is why editable docs use it", () => {
+      for (const at of [0, 250_000, doc.length / 2, 750_000, doc.length - 1]) {
+        expect(exact(doc)).not.toBe(exact(changeAt(doc, at)));
+      }
+    });
+
+    test("does not collide with the sampled fingerprint of the same text", () => {
+      expect(exact(doc)).not.toBe(sampled(doc));
+    });
+  });
+});
diff --git a/apps/yaak-client/lib/docFingerprint.ts b/apps/yaak-client/lib/docFingerprint.ts
new file mode 100644
index 0000000..3e555c7
--- /dev/null
+++ b/apps/yaak-client/lib/docFingerprint.ts
@@ -0,0 +1,33 @@
+import { md5 } from "js-md5";
+
+/** How much of each end and the middle to hash */
+const SAMPLE_CHARS = 512;
+
+/**
+ * Identifies a document, so a cached editor state is never restored onto different content.
+ *
+ * Hashing the whole document costs about 4 ms per megabyte and is paid on every editor update
+ * as well as on restore, which is a lot of work for a document nobody can edit.
+ *
+ * `exact` decides how much certainty that buys. Editable documents get a full hash, because a
+ * collision there would restore undo history belonging to other content and let an undo write
+ * nonsense into the body. Read-only documents get a sampled one: they hold the megabyte-sized
+ * responses this exists for, their history can never be applied, and the worst a collision can
+ * do is put a fold or the cursor in the wrong place.
+ *
+ * Sampling still pins the exact length plus three windows, so a colliding pair has to agree on
+ * all four and differ only in between. Documents small enough to hash outright still are.
+ */
+export function docFingerprint(text: string, { exact }: { exact: boolean }): string {
+  if (exact || text.length <= SAMPLE_CHARS * 3) {
+    return `${text.length}:${md5(text)}`;
+  }
+
+  const middle = Math.floor((text.length - SAMPLE_CHARS) / 2);
+  return [
+    text.length,
+    md5(text.slice(0, SAMPLE_CHARS)),
+    md5(text.slice(middle, middle + SAMPLE_CHARS)),
+    md5(text.slice(-SAMPLE_CHARS)),
+  ].join(":");
+}
diff --git a/apps/yaak-client/lib/duplicateRequestOrFolderAndNavigate.tsx b/apps/yaak-client/lib/duplicateRequestOrFolderAndNavigate.tsx
new file mode 100644
index 0000000..1ae07d6
--- /dev/null
+++ b/apps/yaak-client/lib/duplicateRequestOrFolderAndNavigate.tsx
@@ -0,0 +1,19 @@
+import type { Folder, GrpcRequest, HttpRequest, WebsocketRequest } from "@yaakapp-internal/models";
+import { duplicateModel } from "@yaakapp-internal/models";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { jotaiStore } from "./jotai";
+import { navigateToRequestOrFolderOrWorkspace } from "./setWorkspaceSearchParams";
+
+export async function duplicateRequestOrFolderAndNavigate(
+  model: Folder | HttpRequest | GrpcRequest | WebsocketRequest | null,
+) {
+  if (model == null) {
+    throw new Error("Cannot duplicate null item");
+  }
+
+  const newId = await duplicateModel(model);
+  const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+  if (workspaceId == null || model.model === "folder") return;
+
+  navigateToRequestOrFolderOrWorkspace(newId, model.model);
+}
diff --git a/apps/yaak-client/lib/editEnvironment.tsx b/apps/yaak-client/lib/editEnvironment.tsx
new file mode 100644
index 0000000..cb1fc8a
--- /dev/null
+++ b/apps/yaak-client/lib/editEnvironment.tsx
@@ -0,0 +1,62 @@
+import type { Environment, EnvironmentVariable } from "@yaakapp-internal/models";
+import { updateModel } from "@yaakapp-internal/models";
+import { openFolderSettings } from "../commands/openFolderSettings";
+import type { PairEditorHandle } from "../components/core/PairEditor";
+import { ensurePairId } from "../components/core/PairEditor.util";
+import { EnvironmentEditDialog } from "../components/EnvironmentEditDialog";
+import { environmentsBreakdownAtom } from "../hooks/useEnvironmentsBreakdown";
+import { toggleDialog } from "./dialog";
+import { jotaiStore } from "./jotai";
+
+interface Options {
+  addOrFocusVariable?: EnvironmentVariable;
+}
+
+export async function editEnvironment(
+  initialEnvironment: Environment | null,
+  options: Options = {},
+) {
+  if (initialEnvironment?.parentModel === "folder" && initialEnvironment.parentId != null) {
+    openFolderSettings(initialEnvironment.parentId, "variables");
+  } else {
+    const { addOrFocusVariable } = options;
+    const { baseEnvironment } = jotaiStore.get(environmentsBreakdownAtom);
+    let environment = initialEnvironment ?? baseEnvironment;
+    let focusId: string | null = null;
+
+    if (addOrFocusVariable && environment != null) {
+      const existing = environment.variables.find(
+        (v) => v.id === addOrFocusVariable.id || v.name === addOrFocusVariable.name,
+      );
+      if (existing) {
+        focusId = existing.id ?? null;
+      } else {
+        const newVar = ensurePairId(addOrFocusVariable);
+        environment = { ...environment, variables: [...environment.variables, newVar] };
+        await updateModel(environment);
+        environment.variables.push(newVar);
+        focusId = newVar.id;
+      }
+    }
+
+    let didFocusVariable = false;
+
+    toggleDialog({
+      id: "environment-editor",
+      noPadding: true,
+      size: "lg",
+      className: "h-[90vh] max-h-240",
+      render: () => (
+        <EnvironmentEditDialog
+          initialEnvironmentId={environment?.id ?? null}
+          setRef={(pairEditor: PairEditorHandle | null) => {
+            if (focusId && !didFocusVariable) {
+              pairEditor?.focusValue(focusId);
+              didFocusVariable = true;
+            }
+          }}
+        />
+      ),
+    });
+  }
+}
diff --git a/apps/yaak-client/lib/encryption.ts b/apps/yaak-client/lib/encryption.ts
new file mode 100644
index 0000000..3c83fd8
--- /dev/null
+++ b/apps/yaak-client/lib/encryption.ts
@@ -0,0 +1,57 @@
+import { parseTemplate } from "@yaakapp-internal/templates";
+import { activeEnvironmentIdAtom } from "../hooks/useActiveEnvironment";
+import { activeWorkspaceIdAtom } from "../hooks/useActiveWorkspace";
+import { jotaiStore } from "./jotai";
+import { rpc } from "./rpc";
+
+export function analyzeTemplate(template: string): "global_secured" | "local_secured" | "insecure" {
+  let secureTags = 0;
+  let insecureTags = 0;
+  let totalTags = 0;
+  for (const t of parseTemplate(template).tokens) {
+    if (t.type === "eof") continue;
+
+    totalTags++;
+    if (t.type === "tag" && t.val.type === "fn" && t.val.name === "secure") {
+      secureTags++;
+    } else if (t.type === "tag" && t.val.type === "var") {
+      // Variables are secure
+    } else if (t.type === "tag" && t.val.type === "bool") {
+      // Booleans are secure
+    } else {
+      insecureTags++;
+    }
+  }
+
+  if (secureTags === 1 && totalTags === 1) {
+    return "global_secured";
+  }
+  if (insecureTags === 0) {
+    return "local_secured";
+  }
+  return "insecure";
+}
+
+export async function convertTemplateToInsecure(template: string) {
+  if (template === "") {
+    return "";
+  }
+
+  const workspaceId = jotaiStore.get(activeWorkspaceIdAtom) ?? "n/a";
+  const environmentId = jotaiStore.get(activeEnvironmentIdAtom) ?? null;
+  return rpc<string>("cmd_decrypt_template", { template, workspaceId, environmentId });
+}
+
+export async function convertTemplateToSecure(template: string): Promise<string> {
+  if (template === "") {
+    return "";
+  }
+
+  if (analyzeTemplate(template) === "global_secured") {
+    return template;
+  }
+
+  const workspaceId = jotaiStore.get(activeWorkspaceIdAtom) ?? "n/a";
+  const environmentId = jotaiStore.get(activeEnvironmentIdAtom) ?? null;
+  return rpc<string>("cmd_secure_template", { template, workspaceId, environmentId });
+}
diff --git a/apps/yaak-client/lib/featureFeedback.tsx b/apps/yaak-client/lib/featureFeedback.tsx
new file mode 100644
index 0000000..598fee4
--- /dev/null
+++ b/apps/yaak-client/lib/featureFeedback.tsx
@@ -0,0 +1,103 @@
+import { settingsAtom } from "@yaakapp-internal/models";
+import { FeedbackToast } from "../components/FeedbackToast";
+import { appInfo } from "./appInfo";
+import type { FeedbackFeature } from "./featureFeedbackConstants";
+import { dialogsAtom } from "./dialog";
+import { jotaiStore } from "./jotai";
+import { getKeyValue, setKeyValue } from "./keyValueStore";
+import { showToast } from "./toast";
+
+interface FeatureFeedbackState {
+  uses: number;
+  done: boolean;
+}
+
+const FEEDBACK_PROMPT_DELAY_MS = 1500;
+const FEEDBACK_PROMPT_TIMEOUT_MS = 8000;
+
+// Ask once the user has used a feature enough times to have formed an opinion
+const PROMPT_AFTER_USES = 3;
+
+// Show at most one feedback prompt per app session to stay unobtrusive
+let promptedThisSession = false;
+
+const lastTrackedAt: Partial<Record<FeedbackFeature, number>> = {};
+const FEATURE_USE_DEBOUNCE_MS = 10_000;
+
+const kvArgs = (feature: FeedbackFeature) => ({
+  namespace: "global",
+  key: ["feature-feedback", feature],
+});
+
+function getFeatureFeedbackState(feature: FeedbackFeature): FeatureFeedbackState {
+  return getKeyValue<FeatureFeedbackState>({
+    ...kvArgs(feature),
+    fallback: { uses: 0, done: false },
+  });
+}
+
+function patchFeatureFeedbackState(feature: FeedbackFeature, patch: Partial<FeatureFeedbackState>) {
+  const value = { ...getFeatureFeedbackState(feature), ...patch };
+  setKeyValue({ ...kvArgs(feature), value }).catch(console.error);
+}
+
+function markFeatureFeedbackDone(feature: FeedbackFeature) {
+  patchFeatureFeedbackState(feature, { done: true });
+}
+
+function showFeedbackToast(feature: FeedbackFeature) {
+  if (!jotaiStore.get(settingsAtom).promptFeedback) return;
+
+  showToast({
+    id: `feature-feedback-${feature}`,
+    timeout: FEEDBACK_PROMPT_TIMEOUT_MS,
+    dynamicHeight: true,
+    hideDismiss: true,
+    message: (
+      <FeedbackToast feature={feature} onDone={() => markFeatureFeedbackDone(feature)} />
+    ),
+  });
+}
+
+function showFeedbackToastWhenReady(feature: FeedbackFeature) {
+  setTimeout(() => {
+    if (!jotaiStore.get(settingsAtom).promptFeedback) return;
+
+    if (jotaiStore.get(dialogsAtom).length === 0) {
+      showFeedbackToast(feature);
+      return;
+    }
+
+    const unsubscribe = jotaiStore.sub(dialogsAtom, () => {
+      if (jotaiStore.get(dialogsAtom).length > 0) return;
+
+      unsubscribe();
+      showFeedbackToast(feature);
+    });
+  }, FEEDBACK_PROMPT_DELAY_MS);
+}
+
+// Record a successful use of a feature, and prompt for feedback on the Nth use.
+// Nothing is ever sent to the server from here; showing the toast is local-only
+// and a submission only happens when the user clicks Send in it.
+export function trackFeatureUsage(feature: FeedbackFeature) {
+  if (appInfo.featureLicense !== true || !jotaiStore.get(settingsAtom).promptFeedback) return;
+
+  const now = Date.now();
+  if (lastTrackedAt[feature] != null && now - lastTrackedAt[feature] < FEATURE_USE_DEBOUNCE_MS) {
+    return;
+  }
+  lastTrackedAt[feature] = now;
+
+  const state = getFeatureFeedbackState(feature);
+  if (state.done) return;
+
+  const uses = state.uses + 1;
+  const shouldPrompt = uses >= PROMPT_AFTER_USES && !promptedThisSession;
+
+  patchFeatureFeedbackState(feature, { uses });
+  if (!shouldPrompt) return;
+
+  promptedThisSession = true;
+  showFeedbackToastWhenReady(feature);
+}
diff --git a/apps/yaak-client/lib/featureFeedbackConstants.ts b/apps/yaak-client/lib/featureFeedbackConstants.ts
new file mode 100644
index 0000000..51289f3
--- /dev/null
+++ b/apps/yaak-client/lib/featureFeedbackConstants.ts
@@ -0,0 +1,8 @@
+// Feature keys are sent to the server and used to group feedback for analysis.
+// NEVER rename a key once it has shipped, or historical feedback will be split
+// across the old and new names.
+export const FEEDBACK_FEATURES = {
+  "git-sync": "How is Git sync working for you?",
+} as const;
+
+export type FeedbackFeature = keyof typeof FEEDBACK_FEATURES;
diff --git a/apps/yaak-client/lib/fireAndForget.ts b/apps/yaak-client/lib/fireAndForget.ts
new file mode 100644
index 0000000..9aba86d
--- /dev/null
+++ b/apps/yaak-client/lib/fireAndForget.ts
@@ -0,0 +1,16 @@
+import { showErrorToast } from "./toast";
+
+/**
+ * Handles a fire-and-forget promise by catching and reporting errors
+ * via console.error and a toast notification.
+ */
+export function fireAndForget(promise: Promise<unknown>) {
+  promise.catch((err: unknown) => {
+    console.error("Unhandled async error:", err);
+    showErrorToast({
+      id: "async-error",
+      title: "Unexpected Error",
+      message: err instanceof Error ? err.message : String(err),
+    });
+  });
+}
diff --git a/apps/yaak-client/lib/formatters.ts b/apps/yaak-client/lib/formatters.ts
new file mode 100644
index 0000000..a5a09b5
--- /dev/null
+++ b/apps/yaak-client/lib/formatters.ts
@@ -0,0 +1,45 @@
+import vkBeautify from "vkbeautify";
+import { rpc } from "./rpc";
+
+export async function tryFormatJson(text: string): Promise<string> {
+  if (text === "") return text;
+
+  try {
+    const result = await rpc<string>("cmd_format_json", { text });
+    return result;
+  } catch (err) {
+    console.warn("Failed to format JSON", err);
+  }
+
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2);
+  } catch (err) {
+    console.log("JSON beautify failed", err);
+  }
+
+  return text;
+}
+
+export async function tryFormatGraphql(text: string): Promise<string> {
+  if (text === "") return text;
+
+  try {
+    return await rpc<string>("cmd_format_graphql", { text });
+  } catch (err) {
+    console.warn("Failed to format GraphQL", err);
+  }
+
+  return text;
+}
+
+export async function tryFormatXml(text: string): Promise<string> {
+  if (text === "") return text;
+
+  try {
+    return vkBeautify.xml(text, "  ");
+  } catch (err) {
+    console.warn("Failed to format XML", err);
+  }
+
+  return text;
+}
diff --git a/apps/yaak-client/lib/generateId.ts b/apps/yaak-client/lib/generateId.ts
new file mode 100644
index 0000000..a4d2c07
--- /dev/null
+++ b/apps/yaak-client/lib/generateId.ts
@@ -0,0 +1,7 @@
+import { customAlphabet } from "nanoid";
+
+const nanoid = customAlphabet("023456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKMNPQRSTUVWXYZ", 10);
+
+export function generateId(): string {
+  return nanoid();
+}
diff --git a/apps/yaak-client/lib/getNodeText.ts b/apps/yaak-client/lib/getNodeText.ts
new file mode 100644
index 0000000..96a1274
--- /dev/null
+++ b/apps/yaak-client/lib/getNodeText.ts
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+/**
+ * Get the text content from a ReactNode
+ * https://stackoverflow.com/questions/50428910/get-text-content-from-node-in-react
+ */
+export function getNodeText(node: ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(getNodeText).join("");
+  }
+
+  if (typeof node === "object" && node) {
+    // oxlint-disable-next-line no-explicit-any
+    return getNodeText((node as any).props.children);
+  }
+
+  return "";
+}
diff --git a/apps/yaak-client/lib/gitWorktreeStatus.ts b/apps/yaak-client/lib/gitWorktreeStatus.ts
new file mode 100644
index 0000000..0829e75
--- /dev/null
+++ b/apps/yaak-client/lib/gitWorktreeStatus.ts
@@ -0,0 +1,22 @@
+import type { GitWorktreeStatus, GitWorktreeStatusEntry } from "@yaakapp-internal/git";
+import { atom } from "jotai";
+import { atomFamily } from "jotai-family";
+import { selectAtom } from "jotai/utils";
+
+export const gitWorktreeStatusAtom = atom<GitWorktreeStatus | null>(null);
+
+export const gitWorktreeStatusByModelIdAtom = atom<Record<string, GitWorktreeStatusEntry>>({});
+
+export const gitWorktreeStatusFamily = atomFamily(
+  (modelId: string) =>
+    selectAtom(
+      gitWorktreeStatusByModelIdAtom,
+      (statusByModelId) => statusByModelId[modelId] ?? null,
+      (a, b) =>
+        a?.relaPath === b?.relaPath &&
+        a?.status === b?.status &&
+        a?.staged === b?.staged &&
+        a?.modelId === b?.modelId,
+  ),
+  Object.is,
+);
diff --git a/apps/yaak-client/lib/graphqlOperationNames.test.ts b/apps/yaak-client/lib/graphqlOperationNames.test.ts
new file mode 100644
index 0000000..f6b04ce
--- /dev/null
+++ b/apps/yaak-client/lib/graphqlOperationNames.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, test } from "vite-plus/test";
+import { getGraphQLOperationNames, parseGraphQLOperationNames } from "./graphqlOperationNames";
+
+describe("getGraphQLOperationNames", () => {
+  test("returns named operations from a GraphQL document", () => {
+    expect(
+      getGraphQLOperationNames(`
+        query GetUser { user { id } }
+        mutation UpdateUser { updateUser { id } }
+        subscription UserChanged { userChanged { id } }
+        fragment UserFields on User { id }
+      `),
+    ).toEqual(["GetUser", "UpdateUser", "UserChanged"]);
+  });
+
+  test("ignores anonymous operations", () => {
+    expect(getGraphQLOperationNames(`{ user { id } }`)).toEqual([]);
+  });
+
+  test("returns unique operation names in document order", () => {
+    expect(
+      getGraphQLOperationNames(`
+        query GetUser { user { id } }
+        query GetUser { user { name } }
+        query ListUsers { users { id } }
+      `),
+    ).toEqual(["GetUser", "ListUsers"]);
+  });
+
+  test("returns no operations for invalid in-progress documents", () => {
+    expect(getGraphQLOperationNames(`query GetUser { user {`)).toEqual([]);
+  });
+
+  test("returns null when parsing invalid in-progress documents", () => {
+    expect(parseGraphQLOperationNames(`query GetUser { user {`)).toBeNull();
+  });
+});
diff --git a/apps/yaak-client/lib/graphqlOperationNames.ts b/apps/yaak-client/lib/graphqlOperationNames.ts
new file mode 100644
index 0000000..7ae9e36
--- /dev/null
+++ b/apps/yaak-client/lib/graphqlOperationNames.ts
@@ -0,0 +1,26 @@
+import { Kind, parse } from "graphql";
+
+export function getGraphQLOperationNames(query: string): string[] {
+  return parseGraphQLOperationNames(query) ?? [];
+}
+
+export function parseGraphQLOperationNames(query: string): string[] | null {
+  try {
+    const names: string[] = [];
+
+    for (const definition of parse(query).definitions) {
+      if (definition.kind !== Kind.OPERATION_DEFINITION || definition.name == null) {
+        continue;
+      }
+
+      const name = definition.name.value;
+      if (!names.includes(name)) {
+        names.push(name);
+      }
+    }
+
+    return names;
+  } catch {
+    return null;
+  }
+}
diff --git a/apps/yaak-client/lib/graphqlSchema.test.ts b/apps/yaak-client/lib/graphqlSchema.test.ts
new file mode 100644
index 0000000..32b459f
--- /dev/null
+++ b/apps/yaak-client/lib/graphqlSchema.test.ts
@@ -0,0 +1,85 @@
+import { buildSchema, introspectionFromSchema } from "graphql";
+import { describe, expect, test } from "vite-plus/test";
+import { tryBuildIntrospectionFromFile } from "./graphqlSchema";
+
+const sdl = `
+  type Query {
+    hello: String!
+    user(id: ID!): User
+  }
+
+  type User {
+    id: ID!
+    name: String
+  }
+`;
+
+const introspection = introspectionFromSchema(buildSchema(sdl));
+
+describe("tryBuildIntrospectionFromFile", () => {
+  test("accepts introspection JSON wrapped in { data: ... }", () => {
+    const input = JSON.stringify({ data: introspection });
+    const result = tryBuildIntrospectionFromFile(input);
+
+    expect("schema" in result).toBe(true);
+    if ("schema" in result) {
+      expect(result.schema.getQueryType()?.getFields()).toHaveProperty("hello");
+      // Output content is the normalized, persistable shape.
+      expect(JSON.parse(result.content)).toHaveProperty("data.__schema");
+    }
+  });
+
+  test("accepts bare introspection JSON without a data wrapper", () => {
+    const input = JSON.stringify(introspection);
+    const result = tryBuildIntrospectionFromFile(input);
+
+    expect("schema" in result).toBe(true);
+    if ("schema" in result) {
+      expect(result.schema.getQueryType()?.getFields()).toHaveProperty("user");
+      // Bare input is wrapped on the way out.
+      expect(JSON.parse(result.content)).toHaveProperty("data.__schema");
+    }
+  });
+
+  test("accepts a GraphQL SDL string", () => {
+    const result = tryBuildIntrospectionFromFile(sdl);
+
+    expect("schema" in result).toBe(true);
+    if ("schema" in result) {
+      const fields = result.schema.getQueryType()?.getFields() ?? {};
+      expect(fields).toHaveProperty("hello");
+      expect(fields).toHaveProperty("user");
+      // SDL is converted to introspection JSON for storage.
+      expect(JSON.parse(result.content)).toHaveProperty("data.__schema");
+    }
+  });
+
+  test("returns an error for JSON that is neither introspection nor SDL", () => {
+    const result = tryBuildIntrospectionFromFile('{"unrelated":"value"}');
+
+    expect("error" in result).toBe(true);
+    if ("error" in result) {
+      expect(result.error).toMatch(/Could not parse file as introspection JSON or GraphQL SDL/);
+    }
+  });
+
+  test("returns an error for content that is neither valid JSON nor valid SDL", () => {
+    const result = tryBuildIntrospectionFromFile("not a schema!@#$");
+
+    expect("error" in result).toBe(true);
+    if ("error" in result) {
+      expect(result.error).toMatch(/Could not parse file as introspection JSON or GraphQL SDL/);
+    }
+  });
+
+  test("returns an error when introspection JSON has a malformed __schema", () => {
+    // Has the data.__schema shape but the contents are invalid for buildClientSchema.
+    const input = JSON.stringify({ data: { __schema: { broken: true } } });
+    const result = tryBuildIntrospectionFromFile(input);
+
+    expect("error" in result).toBe(true);
+    if ("error" in result) {
+      expect(result.error).toMatch(/Failed to build schema from introspection JSON/);
+    }
+  });
+});
diff --git a/apps/yaak-client/lib/graphqlSchema.ts b/apps/yaak-client/lib/graphqlSchema.ts
new file mode 100644
index 0000000..8e7bf30
--- /dev/null
+++ b/apps/yaak-client/lib/graphqlSchema.ts
@@ -0,0 +1,51 @@
+import type { GraphQLSchema, IntrospectionQuery } from "graphql";
+import { buildClientSchema, buildSchema, introspectionFromSchema } from "graphql";
+
+// Accepts either a GraphQL introspection JSON ({ data: { __schema } } or
+// { __schema }) or an SDL string and normalizes both into the wrapped
+// { data: <introspection> } JSON shape used by the introspection store.
+export function tryBuildIntrospectionFromFile(
+  fileContent: string,
+): { schema: GraphQLSchema; content: string } | { error: string } {
+  let parsedJson: unknown;
+  try {
+    parsedJson = JSON.parse(fileContent);
+  } catch {
+    parsedJson = undefined;
+  }
+
+  if (parsedJson != null && typeof parsedJson === "object") {
+    const candidates: unknown[] = [(parsedJson as { data?: unknown }).data, parsedJson];
+
+    for (const candidate of candidates) {
+      if (
+        candidate != null &&
+        typeof candidate === "object" &&
+        "__schema" in (candidate as Record<string, unknown>)
+      ) {
+        try {
+          const schema = buildClientSchema(candidate as IntrospectionQuery, {});
+          return { schema, content: JSON.stringify({ data: candidate }) };
+        } catch (e) {
+          return {
+            error: `Failed to build schema from introspection JSON: ${errorMessage(e)}`,
+          };
+        }
+      }
+    }
+  }
+
+  try {
+    const schema = buildSchema(fileContent);
+    const introspection = introspectionFromSchema(schema);
+    return { schema, content: JSON.stringify({ data: introspection }) };
+  } catch (e) {
+    return {
+      error: `Could not parse file as introspection JSON or GraphQL SDL: ${errorMessage(e)}`,
+    };
+  }
+}
+
+function errorMessage(e: unknown): string {
+  return e instanceof Error ? e.message : String(e);
+}
diff --git a/apps/yaak-client/lib/importData.tsx b/apps/yaak-client/lib/importData.tsx
new file mode 100644
index 0000000..b4296ee
--- /dev/null
+++ b/apps/yaak-client/lib/importData.tsx
@@ -0,0 +1,136 @@
+import {
+  type BatchUpsertResult,
+  type ImportDestination,
+  type ImportPlan,
+  type ImportSource,
+  workspacesAtom,
+} from "@yaakapp-internal/models";
+import { FormattedError, VStack } from "@yaakapp-internal/ui";
+import { Button } from "../components/core/Button";
+import { ImportDataDialog } from "../components/ImportDataDialog";
+import { activeFolderAtom } from "../hooks/useActiveFolder";
+import { activeWorkspaceAtom } from "../hooks/useActiveWorkspace";
+import { createFastMutation } from "../hooks/useFastMutation";
+import { showAlert } from "./alert";
+import { showDialog } from "./dialog";
+import { jotaiStore } from "./jotai";
+import { pluralizeCount } from "./pluralize";
+import { router } from "./router";
+import { rpc } from "./rpc";
+
+// Stable identities so the dialog's effects don't re-run (and cancel in-flight
+// fetches) every time the dialog container re-renders.
+const planFile = (filePath: string, destination: ImportDestination) =>
+  rpc<ImportPlan>("cmd_import_data", { filePath, destination });
+const planUrl = (url: string, destination: ImportDestination) =>
+  rpc<ImportPlan>("cmd_import_url", { url, destination });
+const listSources = (workspaceId: string) =>
+  rpc<ImportSource[]>("cmd_list_import_sources", { workspaceId });
+const findSourcesForOrigin = (args: { filePath?: string; url?: string }) =>
+  rpc<ImportSource[]>("cmd_import_sources_for_origin", args);
+
+export const importData = createFastMutation({
+  mutationKey: ["import_data"],
+  onError: (err: string) => {
+    showAlert({
+      id: "import-failed",
+      title: "Import Failed",
+      size: "md",
+      body: <FormattedError>{err}</FormattedError>,
+    });
+  },
+  mutationFn: async () => {
+    return new Promise<void>((resolve, reject) => {
+      const currentWorkspace = jotaiStore.get(activeWorkspaceAtom);
+      const workspaces = jotaiStore.get(workspacesAtom);
+      const selectedFolder = jotaiStore.get(activeFolderAtom);
+      showDialog({
+        id: "import",
+        title: "Import Data",
+        size: "lg",
+        disableClose: true,
+        render: ({ hide }) => {
+          const cancel = () => {
+            hide();
+            resolve();
+          };
+          const fail = (err: unknown) => {
+            hide();
+            reject(err);
+          };
+          const commit = async (plan: ImportPlan) => {
+            const imported = await rpc<BatchUpsertResult>("cmd_commit_import", { plan });
+            hide();
+            await finishImport(imported);
+            resolve();
+          };
+          return (
+            <ImportDataDialog
+              currentWorkspace={currentWorkspace}
+              workspaces={workspaces}
+              selectedFolder={selectedFolder}
+              planFile={planFile}
+              planUrl={planUrl}
+              listSources={listSources}
+              findSourcesForOrigin={findSourcesForOrigin}
+              commit={commit}
+              cancel={cancel}
+              onError={fail}
+            />
+          );
+        },
+      });
+    });
+  },
+});
+
+async function finishImport(imported: BatchUpsertResult): Promise<void> {
+  const importedWorkspace = imported.workspaces[0];
+
+  showDialog({
+    id: "import-complete",
+    title: "Import Complete",
+    size: "sm",
+    hideX: true,
+    render: ({ hide }) => {
+      return (
+        <VStack space={3} className="pb-4">
+          <ul className="list-disc pl-6">
+            {imported.workspaces.length > 0 && (
+              <li>{pluralizeCount("Workspace", imported.workspaces.length)}</li>
+            )}
+            {imported.environments.length > 0 && (
+              <li>{pluralizeCount("Environment", imported.environments.length)}</li>
+            )}
+            {imported.folders.length > 0 && (
+              <li>{pluralizeCount("Folder", imported.folders.length)}</li>
+            )}
+            {imported.httpRequests.length > 0 && (
+              <li>{pluralizeCount("HTTP Request", imported.httpRequests.length)}</li>
+            )}
+            {imported.grpcRequests.length > 0 && (
+              <li>{pluralizeCount("GRPC Request", imported.grpcRequests.length)}</li>
+            )}
+            {imported.websocketRequests.length > 0 && (
+              <li>{pluralizeCount("Websocket Request", imported.websocketRequests.length)}</li>
+            )}
+          </ul>
+          <div>
+            <Button className="ml-auto" onClick={hide} color="primary">
+              Done
+            </Button>
+          </div>
+        </VStack>
+      );
+    },
+  });
+
+  if (importedWorkspace != null) {
+    const environmentId = imported.environments[0]?.id ?? null;
+    await router.navigate({
+      to: "/workspaces/$workspaceId",
+      params: { workspaceId: importedWorkspace.id },
+      search: { environment_id: environmentId },
+    });
+  }
+}
diff --git a/apps/yaak-client/lib/initGlobalListeners.tsx b/apps/yaak-client/lib/initGlobalListeners.tsx
new file mode 100644
index 0000000..4486387
--- /dev/null
+++ b/apps/yaak-client/lib/initGlobalListeners.tsx
@@ -0,0 +1,370 @@
+import { debounce } from "@yaakapp-internal/lib";
+import type {
+  FormInput,
+  InternalEvent,
+  JsonPrimitive,
+  ShowToastRequest,
+} from "@yaakapp-internal/plugins";
+import { updateAllPlugins } from "@yaakapp-internal/plugins";
+import type {
+  PluginUpdateNotification,
+  UpdateInfo,
+  UpdateResponse,
+  YaakNotification,
+} from "@yaakapp-internal/tauri-client";
+import { HStack, Icon, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { openSettings } from "../commands/openSettings";
+import { Button } from "../components/core/Button";
+import { ButtonInfiniteLoading } from "../components/core/ButtonInfiniteLoading";
+
+// Listen for toasts
+import { platform } from "@yaakapp-internal/platform";
+import { updateAvailableAtom } from "./atoms";
+import { stringToColor } from "./color";
+import { generateId } from "./generateId";
+import { jotaiStore } from "./jotai";
+import { showPrompt } from "./prompt";
+import { showPromptForm } from "./prompt-form";
+import { rpc } from "./rpc";
+import { showToast } from "./toast";
+
+export function initGlobalListeners() {
+  platform.listen<ShowToastRequest>("show_toast", (payload) => {
+    showToast({ ...payload });
+  });
+
+  // Show errors for any plugins that failed to load during startup
+  void rpc<[string, string][]>("cmd_plugin_init_errors").then((errors) => {
+    for (const [dir, err] of errors) {
+      const name = dir.split(/[/\\]/).pop() ?? dir;
+      showToast({
+        id: `plugin-init-error-${name}`,
+        color: "danger",
+        timeout: null,
+        message: `Failed to load plugin "${name}": ${err}`,
+        action: ({ hide }) => (
+          <Button
+            size="xs"
+            color="danger"
+            variant="border"
+            onClick={() => {
+              hide();
+              openSettings.mutate("plugins:installed");
+            }}
+          >
+            Manage Plugins
+          </Button>
+        ),
+      });
+    }
+  });
+
+  platform.listen("settings", () => openSettings.mutate(null));
+
+  // Track active dynamic form dialogs so follow-up input updates can reach them
+  const activeForms = new Map<string, (inputs: FormInput[]) => void>();
+
+  // Listen for plugin events
+  platform.listen<InternalEvent>("plugin_event", async (event) => {
+    if (event.payload.type === "prompt_text_request") {
+      const value = await showPrompt(event.payload);
+      const result: InternalEvent = {
+        id: generateId(),
+        replyId: event.id,
+        pluginName: event.pluginName,
+        pluginRefId: event.pluginRefId,
+        context: event.context,
+        payload: {
+          type: "prompt_text_response",
+          value,
+        },
+      };
+      await platform.emit(event.id, result);
+    } else if (event.payload.type === "prompt_form_request") {
+      if (event.replyId != null) {
+        // Follow-up update from plugin runtime — update the active dialog's inputs
+        const updateInputs = activeForms.get(event.replyId);
+        if (updateInputs) {
+          updateInputs(event.payload.inputs);
+        }
+        return;
+      }
+
+      // Initial request — show the dialog with bidirectional support
+      const emitFormResponse = (values: Record<string, JsonPrimitive> | null, done: boolean) => {
+        const result: InternalEvent = {
+          id: generateId(),
+          replyId: event.id,
+          pluginName: event.pluginName,
+          pluginRefId: event.pluginRefId,
+          context: event.context,
+          payload: {
+            type: "prompt_form_response",
+            values,
+            done,
+          },
+        };
+        void platform.emit(event.id, result);
+      };
+
+      const values = await showPromptForm({
+        id: event.payload.id,
+        title: event.payload.title,
+        description: event.payload.description,
+        size: event.payload.size,
+        inputs: event.payload.inputs,
+        confirmText: event.payload.confirmText,
+        cancelText: event.payload.cancelText,
+        onValuesChange: debounce((values) => emitFormResponse(values, false), 150),
+        onInputsUpdated: (cb) => activeForms.set(event.id, cb),
+      });
+
+      // Clean up and send final response
+      activeForms.delete(event.id);
+      emitFormResponse(values, true);
+    }
+  });
+
+  platform.listen<string>("update_installed", async (version) => {
+    console.log("Got update installed event", version);
+    showUpdateInstalledToast(version);
+  });
+
+  // Listen for update events
+  platform.listen<UpdateInfo>("update_available", async (payload) => {
+    console.log("Got update available", payload);
+    void showUpdateAvailableToast(payload);
+  });
+
+  platform.listen<YaakNotification>("notification", (payload) => {
+    console.log("Got notification event", payload);
+    showNotificationToast(payload);
+  });
+
+  // Listen for plugin update events
+  platform.listen<PluginUpdateNotification>("plugin_updates_available", (payload) => {
+    console.log("Got plugin updates event", payload);
+    showPluginUpdatesToast(payload);
+  });
+}
+
+function showUpdateInstalledToast(version: string) {
+  const UPDATE_TOAST_ID = "update-info";
+
+  showToast({
+    id: UPDATE_TOAST_ID,
+    color: "primary",
+    timeout: null,
+    message: (
+      <VStack>
+        <h2 className="font-semibold">Yaak {version} was installed</h2>
+        <p className="text-text-subtle text-sm">Start using the new version now?</p>
+      </VStack>
+    ),
+    action: ({ hide }) => (
+      <ButtonInfiniteLoading
+        size="xs"
+        className="mr-auto min-w-20"
+        color="primary"
+        loadingChildren="Restarting..."
+        onClick={() => {
+          hide();
+          setTimeout(() => rpc("cmd_restart", {}), 200);
+        }}
+      >
+        Relaunch Yaak
+      </ButtonInfiniteLoading>
+    ),
+  });
+}
+
+async function showUpdateAvailableToast(updateInfo: UpdateInfo) {
+  const UPDATE_TOAST_ID = "update-info";
+  const { version, replyEventId, downloaded, install } = updateInfo;
+
+  jotaiStore.set(updateAvailableAtom, { version, downloaded, install });
+
+  const whatsNewButton = (
+    <Button
+      size="xs"
+      color="info"
+      variant="border"
+      rightSlot={<Icon icon="external_link" />}
+      onClick={async () => {
+        await platform.openUrl(`https://yaak.app/changelog/${version}`);
+      }}
+    >
+      What's New
+    </Button>
+  );
+
+  if (install !== "integrated") {
+    // Nothing to reply to here; the backend only told us so we can say how to update
+    const flatpak = install === "flatpak";
+    showToast({
+      id: UPDATE_TOAST_ID,
+      color: "info",
+      timeout: null,
+      message: (
+        <VStack>
+          <h2 className="font-semibold">Yaak {version} is available</h2>
+          <p className="text-text-subtle text-sm">
+            {flatpak ? (
+              <>
+                Update with <InlineCode>flatpak update</InlineCode> or your software center.
+              </>
+            ) : (
+              "Download the new version to upgrade."
+            )}
+          </p>
+        </VStack>
+      ),
+      action: () => (
+        <HStack space={1.5}>
+          {!flatpak && (
+            <Button
+              size="xs"
+              color="info"
+              rightSlot={<Icon icon="external_link" />}
+              onClick={async () => {
+                await platform.openUrl("https://yaak.app/download");
+              }}
+            >
+              Download
+            </Button>
+          )}
+          {whatsNewButton}
+        </HStack>
+      ),
+    });
+    return;
+  }
+
+  // Acknowledge the event, so we don't time out and try the fallback update logic
+  await platform.emit(replyEventId, { type: "ack" } satisfies UpdateResponse);
+
+  showToast({
+    id: UPDATE_TOAST_ID,
+    color: "info",
+    timeout: null,
+    message: (
+      <VStack>
+        <h2 className="font-semibold">Yaak {version} is available</h2>
+        <p className="text-text-subtle text-sm">
+          {downloaded ? "Do you want to install" : "Download and install"} the update?
+        </p>
+      </VStack>
+    ),
+    action: () => (
+      <HStack space={1.5}>
+        <ButtonInfiniteLoading
+          size="xs"
+          color="info"
+          className="min-w-40"
+          loadingChildren={downloaded ? "Installing..." : "Downloading..."}
+          onClick={async () => {
+            await platform.emit(replyEventId, {
+              type: "action",
+              action: "install",
+            } satisfies UpdateResponse);
+          }}
+        >
+          {downloaded ? "Install Now" : "Download and Install"}
+        </ButtonInfiniteLoading>
+        {whatsNewButton}
+      </HStack>
+    ),
+  });
+}
+
+function showPluginUpdatesToast(updateInfo: PluginUpdateNotification) {
+  const PLUGIN_UPDATE_TOAST_ID = "plugin-updates";
+  const count = updateInfo.updateCount;
+  const pluginNames = updateInfo.plugins.map((p: { name: string }) => p.name);
+
+  showToast({
+    id: PLUGIN_UPDATE_TOAST_ID,
+    color: "info",
+    timeout: null,
+    message: (
+      <VStack>
+        <h2 className="font-semibold">
+          {count === 1 ? "1 plugin update" : `${count} plugin updates`} available
+        </h2>
+        <p className="text-text-subtle text-sm">
+          {count === 1
+            ? pluginNames[0]
+            : `${pluginNames.slice(0, 2).join(", ")}${count > 2 ? `, and ${count - 2} more` : ""}`}
+        </p>
+      </VStack>
+    ),
+    action: ({ hide }) => (
+      <HStack space={1.5}>
+        <ButtonInfiniteLoading
+          size="xs"
+          color="info"
+          className="min-w-20"
+          loadingChildren="Updating..."
+          onClick={async () => {
+            const updated = await updateAllPlugins();
+            hide();
+            if (updated.length > 0) {
+              showToast({
+                color: "success",
+                message: `Successfully updated ${updated.length} plugin${updated.length === 1 ? "" : "s"}`,
+              });
+            }
+          }}
+        >
+          Update All
+        </ButtonInfiniteLoading>
+        <Button
+          size="xs"
+          color="info"
+          variant="border"
+          onClick={() => {
+            hide();
+            openSettings.mutate("plugins:installed");
+          }}
+        >
+          View Updates
+        </Button>
+      </HStack>
+    ),
+  });
+}
+
+function showNotificationToast(n: YaakNotification) {
+  const actionUrl = n.action?.url;
+  const actionLabel = n.action?.label;
+  showToast({
+    id: n.id,
+    timeout: n.timeout ?? null,
+    color: stringToColor(n.color) ?? undefined,
+    message: (
+      <VStack>
+        {n.title && <h2 className="font-semibold">{n.title}</h2>}
+        <p className="text-text-subtle text-sm">{n.message}</p>
+      </VStack>
+    ),
+    onClose: () => {
+      rpc("cmd_dismiss_notification", { notificationId: n.id }).catch(console.error);
+    },
+    action: ({ hide }) => {
+      return actionLabel && actionUrl ? (
+        <Button
+          size="xs"
+          color={stringToColor(n.color) ?? undefined}
+          className="mr-auto min-w-20"
+          rightSlot={<Icon icon="external_link" />}
+          onClick={() => {
+            hide();
+            return platform.openUrl(actionUrl);
+          }}
+        >
+          {actionLabel}
+        </Button>
+      ) : null;
+    },
+  });
+}
diff --git a/apps/yaak-client/lib/jotai.ts b/apps/yaak-client/lib/jotai.ts
new file mode 100644
index 0000000..ff582b7
--- /dev/null
+++ b/apps/yaak-client/lib/jotai.ts
@@ -0,0 +1,3 @@
+import { createStore } from "jotai";
+
+export const jotaiStore = createStore();
diff --git a/apps/yaak-client/lib/jsonComments.ts b/apps/yaak-client/lib/jsonComments.ts
new file mode 100644
index 0000000..b954d02
--- /dev/null
+++ b/apps/yaak-client/lib/jsonComments.ts
@@ -0,0 +1,30 @@
+/**
+ * Simple heuristic to detect if a string likely contains JSON/JSONC comments.
+ * Checks for // and /* patterns that are NOT inside double-quoted strings.
+ * Used for UI hints only — doesn't need to be perfect.
+ */
+export function textLikelyContainsJsonComments(text: string): boolean {
+  let inString = false;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (inString) {
+      if (ch === '"') {
+        inString = false;
+      } else if (ch === "\\") {
+        i++; // skip escaped char
+      }
+      continue;
+    }
+    if (ch === '"') {
+      inString = true;
+      continue;
+    }
+    if (ch === "/" && i + 1 < text.length) {
+      const next = text[i + 1];
+      if (next === "/" || next === "*") {
+        return true;
+      }
+    }
+  }
+  return false;
+}
diff --git a/apps/yaak-client/lib/jsonSchemaExample.test.ts b/apps/yaak-client/lib/jsonSchemaExample.test.ts
new file mode 100644
index 0000000..6cb349e
--- /dev/null
+++ b/apps/yaak-client/lib/jsonSchemaExample.test.ts
@@ -0,0 +1,251 @@
+import { describe, expect, test } from "vite-plus/test";
+import type { JsonSchema } from "./jsonSchemaExample";
+import { buildExampleFromSchema } from "./jsonSchemaExample";
+
+describe("buildExampleFromSchema", () => {
+  test("fills scalar fields with placeholders", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        name: { type: "string" },
+        age: { type: "number", format: "int32" },
+        active: { type: "boolean" },
+        data: { type: "string", format: "byte" },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({
+      name: "",
+      age: 0,
+      active: false,
+      data: "",
+    });
+  });
+
+  test("encodes 64-bit integers as strings", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        id: { type: "string", format: "int64" },
+        count: { type: "string", format: "uint64" },
+        offset: { type: "string", format: "sfixed64" },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({ id: "0", count: "0", offset: "0" });
+  });
+
+  test("fills date-time with a parseable timestamp", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: { createdAt: { type: "string", format: "date-time" } },
+    };
+
+    const example = buildExampleFromSchema(schema) as { createdAt: string };
+    expect(Number.isNaN(Date.parse(example.createdAt))).toBe(false);
+  });
+
+  test("fills a duration with a value that parses", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: { timeout: { type: "string", format: "duration" } },
+    };
+
+    // An empty string fails protobuf's Duration parsing, so the message wouldn't send
+    expect(buildExampleFromSchema(schema)).toEqual({ timeout: "0s" });
+  });
+
+  test("expands nested messages through $defs", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: { user: { $ref: "#/$defs/example.User" } },
+      $defs: {
+        "example.User": {
+          type: "object",
+          properties: {
+            name: { type: "string" },
+            address: { $ref: "#/$defs/example.Address" },
+          },
+        },
+        "example.Address": {
+          type: "object",
+          properties: { city: { type: "string" } },
+        },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({
+      user: { name: "", address: { city: "" } },
+    });
+  });
+
+  test("gives repeated fields a single placeholder item", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        tags: { type: "array", items: { type: "string" } },
+        users: { type: "array", items: { $ref: "#/$defs/example.User" } },
+        unknown: { type: "array" },
+      },
+      $defs: {
+        "example.User": { type: "object", properties: { name: { type: "string" } } },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({
+      tags: [""],
+      users: [{ name: "" }],
+      unknown: [],
+    });
+  });
+
+  test("uses the first value of an enum", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        status: { type: "string", enum: ["STATUS_UNSPECIFIED", "STATUS_ACTIVE"] },
+        empty: { type: "string", enum: [] },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({ status: "STATUS_UNSPECIFIED", empty: "" });
+  });
+
+  test("gives maps a single placeholder entry", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        labels: { type: "object", additionalProperties: { type: "string" } },
+        users: { type: "object", additionalProperties: { $ref: "#/$defs/example.User" } },
+      },
+      $defs: {
+        "example.User": { type: "object", properties: { name: { type: "string" } } },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({
+      labels: { key: "" },
+      users: { key: { name: "" } },
+    });
+  });
+
+  test("stops at the root self-reference", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        value: { type: "string" },
+        children: { type: "array", items: { $ref: "#" } },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({ value: "", children: [{}] });
+  });
+
+  test("stops at a cycle between messages", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: { node: { $ref: "#/$defs/example.Node" } },
+      $defs: {
+        "example.Node": {
+          type: "object",
+          properties: {
+            name: { type: "string" },
+            parent: { $ref: "#/$defs/example.Node" },
+            leaf: { $ref: "#/$defs/example.Leaf" },
+          },
+        },
+        "example.Leaf": {
+          type: "object",
+          properties: { node: { $ref: "#/$defs/example.Node" } },
+        },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({
+      node: { name: "", parent: {}, leaf: { node: {} } },
+    });
+  });
+
+  test("expands the same message twice when it is not on the same path", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        from: { $ref: "#/$defs/example.User" },
+        to: { $ref: "#/$defs/example.User" },
+      },
+      $defs: {
+        "example.User": { type: "object", properties: { name: { type: "string" } } },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({ from: { name: "" }, to: { name: "" } });
+  });
+
+  test("fills every branch of a flattened oneof", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        id: { type: "string" },
+        text: { type: "string" },
+        image: { $ref: "#/$defs/example.Image" },
+      },
+      $defs: {
+        "example.Image": { type: "object", properties: { url: { type: "string" } } },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({
+      id: "",
+      text: "",
+      image: { url: "" },
+    });
+  });
+
+  test("stops expanding once the node budget runs out", () => {
+    // Every level references the next one twice, so an unbounded walk would build 2^depth
+    // nodes without ever repeating a ref on the same path.
+    const depth = 16;
+    const $defs: Record<string, JsonSchema> = { [`d${depth}`]: { type: "string" } };
+    for (let i = 0; i < depth; i++) {
+      $defs[`d${i}`] = {
+        type: "object",
+        properties: {
+          a: { $ref: `#/$defs/d${i + 1}` },
+          b: { $ref: `#/$defs/d${i + 1}` },
+        },
+      };
+    }
+
+    const example = buildExampleFromSchema({
+      type: "object",
+      properties: { root: { $ref: "#/$defs/d0" } },
+      $defs,
+    });
+
+    // 2 ** 16 nodes unbounded; the budget holds it to a couple of thousand
+    expect(countNodes(example)).toBeLessThan(10_000);
+  });
+
+  test("handles messages without a known type", () => {
+    const schema: JsonSchema = {
+      type: "object",
+      properties: {
+        empty: {},
+        struct: { type: "object" },
+        missing: { $ref: "#/$defs/example.Nope" },
+      },
+    };
+
+    expect(buildExampleFromSchema(schema)).toEqual({ empty: null, struct: {}, missing: {} });
+  });
+});
+
+function countNodes(value: unknown): number {
+  if (Array.isArray(value)) {
+    return 1 + value.reduce((total: number, v) => total + countNodes(v), 0);
+  }
+  if (value !== null && typeof value === "object") {
+    return 1 + Object.values(value).reduce((total: number, v) => total + countNodes(v), 0);
+  }
+  return 1;
+}
diff --git a/apps/yaak-client/lib/jsonSchemaExample.ts b/apps/yaak-client/lib/jsonSchemaExample.ts
new file mode 100644
index 0000000..98b28ce
--- /dev/null
+++ b/apps/yaak-client/lib/jsonSchemaExample.ts
@@ -0,0 +1,121 @@
+/**
+ * Subset of JSON Schema emitted by the gRPC reflection layer for a method's
+ * input message. See `message_to_json_schema` in the `yaak-grpc` crate.
+ */
+export type JsonSchema = {
+  type?: string;
+  format?: string;
+  properties?: Record<string, JsonSchema>;
+  items?: JsonSchema;
+  additionalProperties?: JsonSchema;
+  enum?: unknown[];
+  $defs?: Record<string, JsonSchema>;
+  $ref?: string;
+};
+
+const DEFS_PREFIX = "#/$defs/";
+const ROOT_REF = "#";
+
+// Protobuf 64-bit integers are encoded as strings in the JSON mapping
+const STRING_NUMBER_FORMATS = ["int64", "uint64", "sint64", "fixed64", "sfixed64"];
+
+// Refs on sibling branches each expand their own subtree, so a schema that references the
+// same messages repeatedly can produce exponentially many nodes without ever cycling.
+const MAX_NODES = 5000;
+
+type Budget = { remaining: number };
+
+/** Build a sample message with placeholder values for every field in the schema */
+export function buildExampleFromSchema(schema: JsonSchema): unknown {
+  // The root is already being built, so a `#` ref anywhere below it is a cycle
+  return buildValue(schema, schema, new Set([ROOT_REF]), { remaining: MAX_NODES });
+}
+
+function buildValue(
+  schema: JsonSchema,
+  root: JsonSchema,
+  refPath: Set<string>,
+  budget: Budget,
+): unknown {
+  if (schema == null || typeof schema !== "object" || budget.remaining <= 0) {
+    return null;
+  }
+
+  budget.remaining -= 1;
+
+  if (typeof schema.$ref === "string") {
+    if (refPath.has(schema.$ref)) {
+      return {};
+    }
+    const resolved = resolveRef(schema.$ref, root);
+    if (resolved == null) {
+      return {};
+    }
+    return buildValue(resolved, root, new Set(refPath).add(schema.$ref), budget);
+  }
+
+  if (Array.isArray(schema.enum)) {
+    return schema.enum[0] ?? "";
+  }
+
+  switch (schema.type) {
+    case "object":
+      return buildObject(schema, root, refPath, budget);
+    case "array":
+      return schema.items == null ? [] : [buildValue(schema.items, root, refPath, budget)];
+    case "string":
+      return buildString(schema.format);
+    case "number":
+      return 0;
+    case "boolean":
+      return false;
+    default:
+      return null;
+  }
+}
+
+function buildObject(
+  schema: JsonSchema,
+  root: JsonSchema,
+  refPath: Set<string>,
+  budget: Budget,
+): unknown {
+  if (schema.properties != null && typeof schema.properties === "object") {
+    const example: Record<string, unknown> = {};
+    for (const [name, propertySchema] of Object.entries(schema.properties)) {
+      example[name] = buildValue(propertySchema, root, refPath, budget);
+    }
+    return example;
+  }
+
+  // Maps have no properties, only a value schema
+  if (schema.additionalProperties != null) {
+    return { key: buildValue(schema.additionalProperties, root, refPath, budget) };
+  }
+
+  return {};
+}
+
+function buildString(format: string | undefined): string {
+  if (format === "date-time") {
+    return new Date().toISOString();
+  }
+  // Duration JSON is a decimal string with an `s` suffix, and an empty one fails to parse
+  if (format === "duration") {
+    return "0s";
+  }
+  if (format != null && STRING_NUMBER_FORMATS.includes(format)) {
+    return "0";
+  }
+  return "";
+}
+
+function resolveRef(ref: string, root: JsonSchema): JsonSchema | null {
+  if (ref === ROOT_REF) {
+    return root;
+  }
+  if (!ref.startsWith(DEFS_PREFIX)) {
+    return null;
+  }
+  return root.$defs?.[ref.slice(DEFS_PREFIX.length)] ?? null;
+}
diff --git a/apps/yaak-client/lib/keyValueStore.ts b/apps/yaak-client/lib/keyValueStore.ts
new file mode 100644
index 0000000..7453e7b
--- /dev/null
+++ b/apps/yaak-client/lib/keyValueStore.ts
@@ -0,0 +1,70 @@
+import type { KeyValue } from "@yaakapp-internal/models";
+import { createGlobalModel, keyValuesAtom, patchModel } from "@yaakapp-internal/models";
+import { jotaiStore } from "./jotai";
+
+export async function setKeyValue<T>({
+  namespace = "global",
+  key: keyOrKeys,
+  value: rawValue,
+}: {
+  namespace?: string;
+  key: string | string[];
+  value: T;
+}): Promise<void> {
+  const kv = getKeyValueRaw({ namespace, key: keyOrKeys });
+  const key = buildKeyValueKey(keyOrKeys);
+  const value = JSON.stringify(rawValue);
+
+  if (kv) {
+    await patchModel(kv, { namespace, key, value });
+  } else {
+    await createGlobalModel({ model: "key_value", namespace, key, value });
+  }
+}
+
+export function getKeyValueRaw({
+  namespace = "global",
+  key: keyOrKeys,
+}: {
+  namespace?: string;
+  key: string | string[];
+}) {
+  const key = buildKeyValueKey(keyOrKeys);
+  const keyValues = jotaiStore.get(keyValuesAtom);
+  const kv = keyValues.find((kv) => kv.namespace === namespace && kv?.key === key);
+  return kv ?? null;
+}
+
+export function getKeyValue<T>({
+  namespace = "global",
+  key,
+  fallback,
+}: {
+  namespace?: string;
+  key: string | string[];
+  fallback: T;
+}) {
+  const kv = getKeyValueRaw({ namespace, key });
+  return extractKeyValueOrFallback(kv, fallback);
+}
+
+export function extractKeyValue<T>(kv: KeyValue | null): T | undefined {
+  if (kv === null) return undefined;
+  try {
+    return JSON.parse(kv.value) as T;
+  } catch (err) {
+    console.log("Failed to parse kv value", kv.value, err);
+    return undefined;
+  }
+}
+
+export function extractKeyValueOrFallback<T>(kv: KeyValue | null, fallback: T): T {
+  const v = extractKeyValue<T>(kv);
+  if (v === undefined) return fallback;
+  return v;
+}
+
+export function buildKeyValueKey(key: string | string[]): string {
+  if (typeof key === "string") return key;
+  return key.join("::");
+}
diff --git a/apps/yaak-client/lib/largeValue.ts b/apps/yaak-client/lib/largeValue.ts
new file mode 100644
index 0000000..ecbf737
--- /dev/null
+++ b/apps/yaak-client/lib/largeValue.ts
@@ -0,0 +1,236 @@
+import { Icon } from "@yaakapp-internal/ui";
+import mime from "mime";
+import { createElement } from "react";
+import type { DropdownItem } from "../components/core/Dropdown";
+import type { SniffedValue } from "../components/core/Editor/sniffValue";
+import { isEncodedRun } from "../components/core/Editor/sniffValue";
+import { copyToClipboard } from "./copy";
+import { fireAndForget } from "./fireAndForget";
+import { showToast } from "./toast";
+import { platform } from "@yaakapp-internal/platform";
+
+/**
+ * How the value is written, which is the thing worth knowing about it — that it is base64
+ * explains why it reads as gibberish far better than its length does.
+ *
+ * A value we couldn't identify may still be plainly encoded, so it is checked here too: an
+ * unrecognised format and an unrecognised encoding are different things to be told.
+ *
+ * `head` need only be the first {@link SNIFF_HEAD_CHARS} characters of the value.
+ */
+export function encodingLabel(head: string, sniffed: SniffedValue | null, chars: number): string {
+  const size = `${chars.toLocaleString()} chars`;
+  if (sniffed?.encoding === "percent") {
+    return `Percent-encoded · ${size}`;
+  }
+  const encoded = sniffed?.encoding === "base64" || isEncodedRun(head, sniffed?.offset ?? 0);
+  return encoded ? `Base64 · ${size}` : size;
+}
+
+interface ActionOptions {
+  /** The whole value. A function, so opening a menu never copies megabytes to build it. */
+  value: () => string;
+  sniffed: SniffedValue | null;
+  /** What to copy. The tag copies only what it hides; the viewer copies what it shows. */
+  copyText: () => string;
+  /** Left out inside the viewer itself, where there is nothing further to open */
+  onView?: () => void;
+}
+
+/**
+ * The things you can do with a collapsed value, as menu items.
+ *
+ * Shared so the tag in the editor and the dialog it opens offer the same list, rather than
+ * drifting apart.
+ */
+export function largeValueActions({
+  value,
+  sniffed,
+  copyText,
+  onView,
+}: ActionOptions): DropdownItem[] {
+  const items: DropdownItem[] = [];
+
+  if (onView != null) {
+    items.push({
+      label: sniffed == null ? "View" : `View ${sniffed.label}`,
+      leftSlot: createElement(Icon, { icon: "eye" }),
+      onSelect: onView,
+    });
+  }
+
+  // Two ways to copy a picture, because either can be the one you wanted: the image to paste
+  // somewhere that takes one, or the text to paste back into a request
+  const image = isCopyableImage(sniffed);
+  if (image) {
+    items.push({
+      label: "Copy Image",
+      leftSlot: createElement(Icon, { icon: "copy" }),
+      onSelect: () => copyImage(value(), sniffed, copyText()),
+    });
+  }
+
+  items.push({
+    label: sniffed?.encoding === "base64" ? "Copy Base64" : "Copy",
+    // Second of a pair reads as one thing with two options, so it keeps the indent without
+    // repeating the icon above it
+    leftSlot: createElement(Icon, { icon: image ? "empty" : "copy" }),
+    onSelect: () => copyToClipboard(copyText()),
+  });
+
+  items.push({
+    label: "Save to File",
+    leftSlot: createElement(Icon, { icon: "download" }),
+    onSelect: () =>
+      fireAndForget(saveValue(value(), sniffed, sniffed?.label.toLowerCase() ?? "value")),
+  });
+
+  return items;
+}
+
+/** The payload, with the `data:` header taken off. */
+function payloadOf(text: string, sniffed: SniffedValue): string {
+  return text.slice(sniffed.offset);
+}
+
+/**
+ * A payload every strict base64 decoder will accept.
+ *
+ * The url-safe alphabet stands for the same bytes, and a ragged final group is dropped rather
+ * than padded — it can only ever be worth a single byte, and both `atob` and the Rust decoder
+ * behind the save command reject one outright.
+ */
+function normalizeBase64(payload: string): string {
+  const clean = payload.replace(/\s+/g, "").replaceAll("-", "+").replaceAll("_", "/");
+  return clean.slice(0, clean.length - (clean.length % 4));
+}
+
+/**
+ * The bytes a collapsed value stands for.
+ *
+ * `atob` rather than `Uint8Array.fromBase64`, which is too new to rely on across the webviews we
+ * ship on. Only ever called for something the user asked to see, never during layout.
+ */
+export function decodeValue(text: string, sniffed: SniffedValue): Uint8Array<ArrayBuffer> {
+  const payload = payloadOf(text, sniffed);
+  if (sniffed.encoding === "percent") {
+    return new TextEncoder().encode(decodeURIComponent(payload));
+  }
+
+  const binary = atob(normalizeBase64(payload));
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+/**
+ * Whether the clipboard can take this as a picture rather than as text.
+ *
+ * SVG is left out on purpose: it is markup, so it pastes usefully as text, and rasterising it
+ * would throw away the thing that makes it worth having.
+ */
+function isCopyableImage(sniffed: SniffedValue | null): sniffed is SniffedValue {
+  return (
+    sniffed != null && sniffed.mime.startsWith("image/") && !sniffed.mime.startsWith("image/svg")
+  );
+}
+
+/**
+ * The value as a PNG.
+ *
+ * Not a preference: PNG is the only image format the Clipboard API requires a browser to accept
+ * on write — `text/plain`, `text/html` and `image/png` are the spec's mandatory data types — and
+ * engines reject `image/jpeg` outright. So anything else is rasterised through a canvas, which
+ * costs a decode and an encode but means a JPEG or a WEBP pastes just as readily as a PNG.
+ *
+ * `ClipboardItem.supports()` exists to ask whether a format could be written as it stands, and
+ * skipping the conversion would be worth real time on a large photo. It was tried: WebKit says
+ * no to `image/jpeg`, so the check only ever chose PNG and was removed again.
+ *
+ * The re-encode is lossless, so nothing is degraded, but a photograph lands on the clipboard far
+ * larger than its JPEG. That matters less than it looks: the system pasteboard holds images
+ * uncompressed regardless of what we hand it.
+ */
+async function toPngBlob(text: string, sniffed: SniffedValue): Promise<Blob> {
+  const blob = new Blob([decodeValue(text, sniffed)], { type: sniffed.mime });
+  if (sniffed.mime === "image/png") {
+    return blob;
+  }
+
+  const bitmap = await createImageBitmap(blob);
+  const canvas = document.createElement("canvas");
+  canvas.width = bitmap.width;
+  canvas.height = bitmap.height;
+  const ctx = canvas.getContext("2d");
+  if (ctx == null) {
+    throw new Error("Could not get a canvas to convert the image");
+  }
+  ctx.drawImage(bitmap, 0, 0);
+  bitmap.close();
+
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (png) => (png == null ? reject(new Error("Could not encode the image")) : resolve(png)),
+      "image/png",
+    );
+  });
+}
+
+/**
+ * Puts the picture on the clipboard, so it can be pasted anywhere that takes an image.
+ *
+ * Not awaited, and deliberately so. The webview only allows a clipboard write that starts inside
+ * the click that asked for it, and decoding a few megabytes takes longer than that lasts — so
+ * the item is handed the still-pending promise rather than a finished blob.
+ */
+export function copyImage(text: string, sniffed: SniffedValue, fallback: string) {
+  if (typeof ClipboardItem === "undefined") {
+    copyToClipboard(fallback);
+    return;
+  }
+
+  const png = toPngBlob(text, sniffed);
+  navigator.clipboard
+    .write([new ClipboardItem({ "image/png": png })])
+    .then(() =>
+      showToast({
+        id: "copied",
+        color: "success",
+        icon: "copy",
+        // Says PNG because that is what lands on the clipboard, whatever the value held
+        message: "Copied as PNG",
+      }),
+    )
+    .catch((err: unknown) => {
+      // Anything from a webview that won't take an image to a file we couldn't decode. The
+      // encoded text is always there to fall back on.
+      console.error("Failed to copy image, copying text instead", err);
+      copyToClipboard(fallback);
+    });
+}
+
+/**
+ * Writes a collapsed value to a file the user picks.
+ *
+ * A value that is already base64 is handed over as base64. These are the values
+ * the editor collapsed for being large, so decoding one here only for a host to
+ * encode it again would walk megabytes twice for nothing.
+ */
+export async function saveValue(text: string, sniffed: SniffedValue | null, name: string) {
+  const ext = sniffed == null ? "txt" : (mime.getExtension(sniffed.mime) ?? "bin");
+  const content =
+    sniffed == null
+      ? new TextEncoder().encode(text)
+      : sniffed.encoding === "base64"
+        ? { base64: normalizeBase64(payloadOf(text, sniffed)) }
+        : decodeValue(text, sniffed);
+
+  const savedTo = await platform.files.save(`${name}.${ext}`, content);
+  if (savedTo == null) {
+    return; // Cancelled
+  }
+
+  showToast({ message: `Saved to ${savedTo}` });
+}
diff --git a/apps/yaak-client/lib/markdown.ts b/apps/yaak-client/lib/markdown.ts
new file mode 100644
index 0000000..3f73640
--- /dev/null
+++ b/apps/yaak-client/lib/markdown.ts
@@ -0,0 +1,27 @@
+import rehypeStringify from "rehype-stringify";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+
+const renderer = unified()
+  .use(remarkParse)
+  .use(remarkGfm)
+  .use(remarkRehype, {
+    // handlers: {
+    //   link: (state, node, parent) => {
+    //     return node;
+    //   },
+    // },
+  })
+  .use(rehypeStringify);
+
+export async function renderMarkdown(md: string): Promise<string> {
+  try {
+    const r = await renderer.process(md);
+    return r.toString();
+  } catch (err) {
+    console.log("FAILED TO RENDER MARKDOWN", err);
+    return "error";
+  }
+}
diff --git a/apps/yaak-client/lib/minPromiseMillis.ts b/apps/yaak-client/lib/minPromiseMillis.ts
new file mode 100644
index 0000000..b05793d
--- /dev/null
+++ b/apps/yaak-client/lib/minPromiseMillis.ts
@@ -0,0 +1,19 @@
+import { sleep } from "./sleep";
+
+/** Ensures a promise takes at least a certain number of milliseconds to resolve */
+export async function minPromiseMillis<T>(promise: Promise<T>, millis = 300) {
+  const start = Date.now();
+  let result: T;
+
+  try {
+    result = await promise;
+  } catch (e) {
+    const delayFor = millis - (Date.now() - start);
+    await sleep(delayFor);
+    throw e;
+  }
+
+  const delayFor = millis - (Date.now() - start);
+  await sleep(delayFor);
+  return result;
+}
diff --git a/apps/yaak-client/lib/model_util.test.ts b/apps/yaak-client/lib/model_util.test.ts
new file mode 100644
index 0000000..65bd55b
--- /dev/null
+++ b/apps/yaak-client/lib/model_util.test.ts
@@ -0,0 +1,91 @@
+import type { HttpResponseEvent } from "@yaakapp-internal/models";
+import { describe, expect, test } from "vite-plus/test";
+import { getCookieCounts } from "./model_util";
+
+function makeEvent(type: string, name: string, value: string): HttpResponseEvent {
+  return {
+    id: "test",
+    model: "http_response_event",
+    responseId: "resp",
+    workspaceId: "ws",
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    event: { type, name, value } as HttpResponseEvent["event"],
+  };
+}
+
+describe("getCookieCounts", () => {
+  test("returns zeros for undefined events", () => {
+    expect(getCookieCounts(undefined)).toEqual({ sent: 0, received: 0 });
+  });
+
+  test("returns zeros for empty events", () => {
+    expect(getCookieCounts([])).toEqual({ sent: 0, received: 0 });
+  });
+
+  test("counts single sent cookie", () => {
+    const events = [makeEvent("header_up", "Cookie", "session=abc123")];
+    expect(getCookieCounts(events)).toEqual({ sent: 1, received: 0 });
+  });
+
+  test("counts multiple sent cookies in one header", () => {
+    const events = [makeEvent("header_up", "Cookie", "a=1; b=2; c=3")];
+    expect(getCookieCounts(events)).toEqual({ sent: 3, received: 0 });
+  });
+
+  test("counts single received cookie", () => {
+    const events = [makeEvent("header_down", "Set-Cookie", "session=abc123; Path=/")];
+    expect(getCookieCounts(events)).toEqual({ sent: 0, received: 1 });
+  });
+
+  test("counts multiple received cookies from multiple headers", () => {
+    const events = [
+      makeEvent("header_down", "Set-Cookie", "a=1; Path=/"),
+      makeEvent("header_down", "Set-Cookie", "b=2; HttpOnly"),
+      makeEvent("header_down", "Set-Cookie", "c=3; Secure"),
+    ];
+    expect(getCookieCounts(events)).toEqual({ sent: 0, received: 3 });
+  });
+
+  test("deduplicates sent cookies by name", () => {
+    const events = [
+      makeEvent("header_up", "Cookie", "session=old"),
+      makeEvent("header_up", "Cookie", "session=new"),
+    ];
+    expect(getCookieCounts(events)).toEqual({ sent: 1, received: 0 });
+  });
+
+  test("deduplicates received cookies by name", () => {
+    const events = [
+      makeEvent("header_down", "Set-Cookie", "token=abc; Path=/"),
+      makeEvent("header_down", "Set-Cookie", "token=xyz; Path=/"),
+    ];
+    expect(getCookieCounts(events)).toEqual({ sent: 0, received: 1 });
+  });
+
+  test("counts both sent and received cookies", () => {
+    const events = [
+      makeEvent("header_up", "Cookie", "a=1; b=2; c=3"),
+      makeEvent("header_down", "Set-Cookie", "x=10; Path=/"),
+      makeEvent("header_down", "Set-Cookie", "y=20; Path=/"),
+      makeEvent("header_down", "Set-Cookie", "z=30; Path=/"),
+    ];
+    expect(getCookieCounts(events)).toEqual({ sent: 3, received: 3 });
+  });
+
+  test("ignores non-cookie headers", () => {
+    const events = [
+      makeEvent("header_up", "Content-Type", "application/json"),
+      makeEvent("header_down", "Content-Length", "123"),
+    ];
+    expect(getCookieCounts(events)).toEqual({ sent: 0, received: 0 });
+  });
+
+  test("handles case-insensitive header names", () => {
+    const events = [
+      makeEvent("header_up", "COOKIE", "a=1"),
+      makeEvent("header_down", "SET-COOKIE", "b=2; Path=/"),
+    ];
+    expect(getCookieCounts(events)).toEqual({ sent: 1, received: 1 });
+  });
+});
diff --git a/apps/yaak-client/lib/model_util.ts b/apps/yaak-client/lib/model_util.ts
new file mode 100644
index 0000000..9e55c92
--- /dev/null
+++ b/apps/yaak-client/lib/model_util.ts
@@ -0,0 +1,95 @@
+import type {
+  AnyModel,
+  Cookie,
+  Environment,
+  HttpResponseEvent,
+  HttpResponseHeader,
+} from "@yaakapp-internal/models";
+import { getMimeTypeFromContentType } from "./contentType";
+
+export const BODY_TYPE_NONE = null;
+export const BODY_TYPE_GRAPHQL = "graphql";
+export const BODY_TYPE_JSON = "application/json";
+export const BODY_TYPE_BINARY = "binary";
+export const BODY_TYPE_OTHER = "other";
+export const BODY_TYPE_FORM_URLENCODED = "application/x-www-form-urlencoded";
+export const BODY_TYPE_FORM_MULTIPART = "multipart/form-data";
+export const BODY_TYPE_XML = "text/xml";
+
+export function cookieDomain(cookie: Cookie): string {
+  if (cookie.domain === "NotPresent" || cookie.domain === "Empty") {
+    return "n/a";
+  }
+  if ("HostOnly" in cookie.domain) {
+    return cookie.domain.HostOnly;
+  }
+  if ("Suffix" in cookie.domain) {
+    return cookie.domain.Suffix;
+  }
+  return "unknown";
+}
+
+export function modelsEq(a: AnyModel, b: AnyModel) {
+  if (a.model !== b.model) {
+    return false;
+  }
+  if (a.model === "key_value" && b.model === "key_value") {
+    return a.key === b.key && a.namespace === b.namespace;
+  }
+  if ("id" in a && "id" in b) {
+    return a.id === b.id;
+  }
+  return false;
+}
+
+export function getContentTypeFromHeaders(headers: HttpResponseHeader[] | null): string | null {
+  return headers?.find((h) => h.name.toLowerCase() === "content-type")?.value ?? null;
+}
+
+export function getCharsetFromContentType(headers: HttpResponseHeader[]): string | null {
+  const contentType = getContentTypeFromHeaders(headers);
+  if (contentType == null) return null;
+
+  const mimeType = getMimeTypeFromContentType(contentType);
+  return mimeType.parameters.get("charset") ?? null;
+}
+
+export function isBaseEnvironment(environment: Environment): boolean {
+  return environment.parentModel === "workspace";
+}
+
+export function isSubEnvironment(environment: Environment): boolean {
+  return environment.parentModel === "environment";
+}
+
+export function isFolderEnvironment(environment: Environment): boolean {
+  return environment.parentModel === "folder";
+}
+
+export function getCookieCounts(events: HttpResponseEvent[] | undefined): {
+  sent: number;
+  received: number;
+} {
+  if (!events) return { sent: 0, received: 0 };
+
+  // Use Sets to deduplicate by cookie name
+  const sentNames = new Set<string>();
+  const receivedNames = new Set<string>();
+
+  for (const event of events) {
+    const e = event.event;
+    if (e.type === "header_up" && e.name.toLowerCase() === "cookie") {
+      // Parse "Cookie: name=value; name2=value2" format
+      for (const pair of e.value.split(";")) {
+        const name = pair.split("=")[0]?.trim();
+        if (name) sentNames.add(name);
+      }
+    } else if (e.type === "header_down" && e.name.toLowerCase() === "set-cookie") {
+      // Parse "Set-Cookie: name=value; ..." - first part before ; is name=value
+      const name = e.value.split(";")[0]?.split("=")[0]?.trim();
+      if (name) receivedNames.add(name);
+    }
+  }
+
+  return { sent: sentNames.size, received: receivedNames.size };
+}
diff --git a/apps/yaak-client/lib/onboarding.ts b/apps/yaak-client/lib/onboarding.ts
new file mode 100644
index 0000000..a36f6ed
--- /dev/null
+++ b/apps/yaak-client/lib/onboarding.ts
@@ -0,0 +1,44 @@
+import type { BatchUpsertResult } from "@yaakapp-internal/models";
+import { createGlobalModel } from "@yaakapp-internal/models";
+import { router } from "./router";
+import { rpc } from "./rpc";
+import { setKeyValue } from "./keyValueStore";
+
+export type OnboardingChoice =
+  | "import"
+  | "import_yaak"
+  | "example"
+  | "fresh"
+  | "open_folder"
+  | "clone_git";
+
+const NEW_WORKSPACE_NAME = "My Workspace";
+
+/**
+ * Remembered so later surfaces can lean toward what the user came for (an importer, the
+ * example, or a blank slate). Nothing reads it yet.
+ */
+export function recordOnboardingChoice(choice: OnboardingChoice) {
+  setKeyValue({
+    namespace: "global",
+    key: "onboarding",
+    value: { choice, at: new Date().toISOString() },
+  }).catch(console.error);
+}
+
+export async function createFreshWorkspace() {
+  const workspaceId = await createGlobalModel({ model: "workspace", name: NEW_WORKSPACE_NAME });
+  await router.navigate({ to: "/workspaces/$workspaceId", params: { workspaceId } });
+}
+
+export async function createExampleWorkspace() {
+  const created = await rpc<BatchUpsertResult>("cmd_create_example_workspace", {});
+  const workspace = created.workspaces[0];
+  if (workspace == null) throw new Error("Example workspace was not created");
+  const firstRequest = created.httpRequests.find((r) => r.name === "List posts");
+  await router.navigate({
+    to: "/workspaces/$workspaceId",
+    params: { workspaceId: workspace.id },
+    search: firstRequest ? { request_id: firstRequest.id } : {},
+  });
+}
diff --git a/apps/yaak-client/lib/pathPlaceholders.test.ts b/apps/yaak-client/lib/pathPlaceholders.test.ts
new file mode 100644
index 0000000..8130fbe
--- /dev/null
+++ b/apps/yaak-client/lib/pathPlaceholders.test.ts
@@ -0,0 +1,214 @@
+import { describe, expect, test } from "vite-plus/test";
+import {
+  derivePathPlaceholderPairs,
+  extractPathPlaceholders,
+  renamePathPlaceholder,
+} from "./pathPlaceholders";
+
+describe("extractPathPlaceholders", () => {
+  test("extracts a single placeholder", () => {
+    expect(extractPathPlaceholders("/users/:id")).toEqual([":id"]);
+  });
+
+  test("extracts multiple placeholders", () => {
+    expect(extractPathPlaceholders("/users/:id/posts/:postId")).toEqual([":id", ":postId"]);
+  });
+
+  test("stops at a literal `:` in the same segment", () => {
+    expect(extractPathPlaceholders("/tasks/:id:cancel")).toEqual([":id"]);
+  });
+
+  test("does not match `:foo` mid-segment", () => {
+    expect(extractPathPlaceholders("/users/abc:def")).toEqual([]);
+  });
+
+  test("does not match `:` in a host port", () => {
+    expect(extractPathPlaceholders("https://example.com:8080/users/:id")).toEqual([":id"]);
+  });
+
+  test("returns empty for a URL with no placeholders", () => {
+    expect(extractPathPlaceholders("https://example.com/foo/bar?q=1#hash")).toEqual([]);
+  });
+});
+
+describe("derivePathPlaceholderPairs", () => {
+  const neverRename = () => false;
+
+  test("adds a row for a placeholder with no parameter", () => {
+    const { urlParameterPairs } = derivePathPlaceholderPairs("/users/:id", [], neverRename);
+    expect(urlParameterPairs).toMatchObject([{ name: ":id", value: "", enabled: true }]);
+    expect(urlParameterPairs[0]?.commitName).toBeTypeOf("function");
+  });
+
+  test("gives the existing parameter for a placeholder a commitName, without mutating it", () => {
+    const parameter = { name: ":id", value: "123", enabled: true, id: "p1" };
+    const { urlParameterPairs } = derivePathPlaceholderPairs(
+      "/users/:id",
+      [parameter],
+      neverRename,
+    );
+    expect(urlParameterPairs[0]).toMatchObject({ name: ":id", value: "123", id: "p1" });
+    expect(urlParameterPairs[0]?.commitName).toBeTypeOf("function");
+    expect(parameter).toEqual({ name: ":id", value: "123", enabled: true, id: "p1" });
+  });
+
+  test("leaves query parameters alone", () => {
+    const { urlParameterPairs } = derivePathPlaceholderPairs(
+      "/users/:id",
+      [{ name: "q", value: "hi", enabled: true, id: "p1" }],
+      neverRename,
+    );
+    expect(urlParameterPairs[0]).toEqual({ name: "q", value: "hi", enabled: true, id: "p1" });
+    expect(urlParameterPairs[1]?.commitName).toBeTypeOf("function");
+  });
+
+  test("commitName renames this row's placeholder", () => {
+    const renames: [string, string][] = [];
+    const { urlParameterPairs } = derivePathPlaceholderPairs(
+      "/a/:x/b/:y",
+      [],
+      (oldName, newName) => {
+        renames.push([oldName, newName]);
+        return true;
+      },
+    );
+    urlParameterPairs[1]?.commitName?.(":z");
+    expect(renames).toEqual([[":y", ":z"]]);
+  });
+
+  test("drops empty parameters", () => {
+    const { urlParameterPairs } = derivePathPlaceholderPairs(
+      "/users",
+      [
+        { name: "", value: "", enabled: true, id: "p1" },
+        { name: "q", value: "", enabled: true, id: "p2" },
+      ],
+      neverRename,
+    );
+    expect(urlParameterPairs).toMatchObject([{ name: "q", id: "p2" }]);
+  });
+
+  test("collapses a placeholder that appears twice into one row", () => {
+    const { urlParameterPairs } = derivePathPlaceholderPairs("/a/:id/b/:id", [], neverRename);
+    expect(urlParameterPairs).toMatchObject([{ name: ":id" }]);
+  });
+
+  test("gives a derived row the same id every time, so re-deriving is stable", () => {
+    const first = derivePathPlaceholderPairs("/users/:id", [], neverRename);
+    const second = derivePathPlaceholderPairs("/users/:id", [], neverRename);
+    expect(first.urlParameterPairs[0]?.id).toEqual(second.urlParameterPairs[0]?.id);
+  });
+
+  test("derived row ids avoid colliding with a persisted derived id", () => {
+    // A derived id sticks to the parameter once the user gives the row a value. If its placeholder
+    // is then renamed away in the URL bar, the parameter survives as a stray still holding the id,
+    // and the replacement placeholder's row must not collide with it.
+    const stray = { name: ":old", value: "42", enabled: true, id: "path-placeholder:0" };
+    const { urlParameterPairs } = derivePathPlaceholderPairs("/pets/:new", [stray], neverRename);
+    const ids = urlParameterPairs.map((p) => p.id);
+    expect(new Set(ids).size).toEqual(ids.length);
+  });
+
+  test("keeps a derived row's id stable across a rename", () => {
+    const before = derivePathPlaceholderPairs("/a/:x/b/:y", [], neverRename);
+    const after = derivePathPlaceholderPairs("/a/:x2/b/:y", [], neverRename);
+    expect(after.urlParameterPairs.map((p) => p.id)).toEqual(
+      before.urlParameterPairs.map((p) => p.id),
+    );
+  });
+
+  test("keys off the placeholder names", () => {
+    expect(derivePathPlaceholderPairs("/a/:x/b/:y", [], neverRename).urlParametersKey).toEqual(
+      ":x,:y",
+    );
+    expect(derivePathPlaceholderPairs("/a/b", [], neverRename).urlParametersKey).toEqual("");
+  });
+});
+
+describe("renamePathPlaceholder", () => {
+  const model = (url: string, urlParameters: { name: string; value: string }[] = []) => ({
+    url,
+    urlParameters,
+  });
+
+  test("renames the placeholder in the URL", () => {
+    expect(
+      renamePathPlaceholder(model("https://x.com/pets/:petId/info"), ":petId", ":animalId"),
+    ).toEqual({ url: "https://x.com/pets/:animalId/info", urlParameters: [] });
+  });
+
+  test("carries the parameter value over to the new name", () => {
+    const patch = renamePathPlaceholder(
+      model("/pets/:petId", [
+        { name: "q", value: "1" },
+        { name: ":petId", value: "42" },
+      ]),
+      ":petId",
+      ":animalId",
+    );
+    expect(patch).toEqual({
+      url: "/pets/:animalId",
+      urlParameters: [
+        { name: "q", value: "1" },
+        { name: ":animalId", value: "42" },
+      ],
+    });
+  });
+
+  test("renames every occurrence of a repeated placeholder", () => {
+    expect(renamePathPlaceholder(model("/a/:id/b/:id"), ":id", ":key")?.url).toEqual(
+      "/a/:key/b/:key",
+    );
+  });
+
+  test("adds a missing leading colon", () => {
+    expect(renamePathPlaceholder(model("/pets/:petId"), ":petId", "animalId")?.url).toEqual(
+      "/pets/:animalId",
+    );
+  });
+
+  test("renames a placeholder followed by a literal colon", () => {
+    expect(renamePathPlaceholder(model("/tasks/:id:cancel"), ":id", ":taskId")?.url).toEqual(
+      "/tasks/:taskId:cancel",
+    );
+  });
+
+  test("does not rename a placeholder the new name is a prefix of", () => {
+    expect(renamePathPlaceholder(model("/a/:id/b/:idx"), ":id", ":key")?.url).toEqual(
+      "/a/:key/b/:idx",
+    );
+  });
+
+  test("does not touch a same-named segment that isn't a placeholder", () => {
+    expect(renamePathPlaceholder(model("/id/:id?x=:id"), ":id", ":key")?.url).toEqual(
+      "/id/:key?x=:id",
+    );
+  });
+
+  test("treats regex characters in the old name literally", () => {
+    expect(renamePathPlaceholder(model("/a/:i.d/b/:iXd"), ":i.d", ":key")?.url).toEqual(
+      "/a/:key/b/:iXd",
+    );
+  });
+
+  test.each([[""], [":"], [":a/b"], [":a?b"], [":a#b"], [":a:b"], [":a b"], [":a\tb"]])(
+    "rejects the unusable name %j",
+    (name) => {
+      expect(renamePathPlaceholder(model("/pets/:petId"), ":petId", name)).toBeNull();
+    },
+  );
+
+  test("rejects a name already used by another placeholder", () => {
+    expect(renamePathPlaceholder(model("/pets/:petId/:ownerId"), ":petId", ":ownerId")).toBeNull();
+  });
+
+  test("allows renaming a placeholder to itself", () => {
+    expect(renamePathPlaceholder(model("/pets/:petId"), ":petId", ":petId")?.url).toEqual(
+      "/pets/:petId",
+    );
+  });
+
+  test("rejects renaming a placeholder that isn't in the URL", () => {
+    expect(renamePathPlaceholder(model("/pets/:petId"), ":other", ":animalId")).toBeNull();
+  });
+});
diff --git a/apps/yaak-client/lib/pathPlaceholders.ts b/apps/yaak-client/lib/pathPlaceholders.ts
new file mode 100644
index 0000000..8cabab4
--- /dev/null
+++ b/apps/yaak-client/lib/pathPlaceholders.ts
@@ -0,0 +1,102 @@
+import type { HttpUrlParameter } from "@yaakapp-internal/models";
+import type { EditablePair } from "../components/core/PairEditor";
+
+/**
+ * Extract `:name`-style path placeholders from a URL string.
+ *
+ * A placeholder is `:` followed by one-or-more characters that are not `/`, `?`,
+ * `#`, or `:`. The `:` boundary means a placeholder ends where a literal colon
+ * starts in the same segment, e.g. `/tasks/:id:increment-importance` yields one
+ * placeholder `:id` and `:increment-importance` is literal text.
+ *
+ * Only `:` that sits at the start of a `/`-delimited segment counts — `/abc:def`
+ * has no placeholders. Returned names include the leading colon.
+ */
+export function extractPathPlaceholders(url: string): string[] {
+  return Array.from(url.matchAll(/\/(:[^/?#:]+)/g)).map((m) => m[1] ?? "");
+}
+
+/**
+ * Build the rows for the Params tab: the request's URL parameters, plus a row for each path
+ * placeholder in the URL that doesn't have one yet. A placeholder that appears more than once
+ * in the URL still gets a single row.
+ *
+ * Only placeholder rows get a `commitName`, which makes the editor hold name edits until blur and
+ * hand them to `renamePlaceholder` instead of writing on every keystroke — renaming has to rewrite
+ * the URL too. `renamePlaceholder` returns false to reject the new name, which reverts the field.
+ *
+ * `urlParametersKey` changes whenever the URL's placeholders do, and is used to reset the pair
+ * editor so derived rows appear and disappear along with the URL.
+ */
+export function derivePathPlaceholderPairs(
+  url: string,
+  urlParameters: HttpUrlParameter[],
+  renamePlaceholder: (oldName: string, newName: string) => boolean,
+): { urlParameterPairs: EditablePair[]; urlParametersKey: string } {
+  const placeholderNames = extractPathPlaceholders(url);
+  const commitNameFor = (oldName: string) => (newName: string) =>
+    renamePlaceholder(oldName, newName);
+
+  // NOTE: Copy each parameter because `commitName` is UI-only. Adding it in place would mutate the
+  //  persisted model.
+  const urlParameterPairs: EditablePair[] = urlParameters
+    .filter((p) => p.name || p.value)
+    .map((p) =>
+      placeholderNames.includes(p.name) ? { ...p, commitName: commitNameFor(p.name) } : { ...p },
+    );
+
+  // NOTE: Ids are derived from the placeholder's position instead of generated, so neither
+  //  re-deriving nor renaming hands a row a new identity. The pair editor keys rows by id, so a
+  //  changed id remounts the row and drops the user's focus.
+  //
+  //  A derived id sticks to the parameter once the user gives the row a value, so a parameter that
+  //  outlives its placeholder (renamed away in the URL bar) still holds one. Skip past taken ids
+  //  so a new placeholder at that position can't collide with it.
+  const takenIds = new Set(urlParameterPairs.map((p) => p.id));
+  const uniquePlaceholderNames = [...new Set(placeholderNames)];
+  for (const [index, name] of uniquePlaceholderNames.entries()) {
+    if (urlParameterPairs.some((p) => p.name === name)) continue;
+
+    let id = `path-placeholder:${index}`;
+    for (let bump = index + 1; takenIds.has(id); bump++) id = `path-placeholder:${bump}`;
+    takenIds.add(id);
+
+    urlParameterPairs.push({ name, value: "", enabled: true, commitName: commitNameFor(name), id });
+  }
+
+  return { urlParameterPairs, urlParametersKey: placeholderNames.join(",") };
+}
+
+/**
+ * Compute the patch for renaming a path placeholder: every occurrence replaced in the URL, and
+ * the matching URL parameter renamed so the user's value follows along. Both have to be applied
+ * together, or the value detaches from the placeholder.
+ *
+ * Returns `null` when the rename can't be applied, meaning the caller should leave the model
+ * alone. That's the case when the new name wouldn't parse as a placeholder anymore (empty, or
+ * containing `/`, `?`, `#`, `:`, or whitespace) or when it's already used by another placeholder
+ * in the URL. A missing leading `:` is added rather than rejected, since focusing the name field
+ * selects all of its text and typing over it is the natural way to rename.
+ */
+export function renamePathPlaceholder(
+  model: { url: string; urlParameters: HttpUrlParameter[] },
+  oldName: string,
+  newName: string,
+): { url: string; urlParameters: HttpUrlParameter[] } | null {
+  const name = newName.startsWith(":") ? newName : `:${newName}`;
+  if (!/^:[^/?#:\s]+$/.test(name)) return null;
+
+  const placeholderNames = extractPathPlaceholders(model.url);
+  if (!placeholderNames.includes(oldName)) return null;
+  if (name !== oldName && placeholderNames.includes(name)) return null;
+
+  const pattern = new RegExp(`(/)${escapeRegExp(oldName)}(?=[/?#:]|$)`, "g");
+  return {
+    url: model.url.replace(pattern, (_match, slash: string) => `${slash}${name}`),
+    urlParameters: model.urlParameters.map((p) => (p.name === oldName ? { ...p, name } : p)),
+  };
+}
+
+function escapeRegExp(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
diff --git a/apps/yaak-client/lib/pluralize.ts b/apps/yaak-client/lib/pluralize.ts
new file mode 100644
index 0000000..fbc158d
--- /dev/null
+++ b/apps/yaak-client/lib/pluralize.ts
@@ -0,0 +1,20 @@
+export function pluralize(word: string, count: number): string {
+  if (count === 1) {
+    return word;
+  }
+  return `${word}s`;
+}
+
+export function pluralizeCount(
+  word: string,
+  count: number,
+  opt: { omitSingle?: boolean; noneWord?: string } = {},
+): string {
+  if (opt.omitSingle && count === 1) {
+    return word;
+  }
+  if (opt.noneWord && count === 0) {
+    return opt.noneWord;
+  }
+  return `${count} ${pluralize(word, count)}`;
+}
diff --git a/apps/yaak-client/lib/prepareImportQuerystring.ts b/apps/yaak-client/lib/prepareImportQuerystring.ts
new file mode 100644
index 0000000..c6715ae
--- /dev/null
+++ b/apps/yaak-client/lib/prepareImportQuerystring.ts
@@ -0,0 +1,25 @@
+import type { HttpUrlParameter } from "@yaakapp-internal/models";
+import { generateId } from "./generateId";
+
+export function prepareImportQuerystring(
+  url: string,
+): { url: string; urlParameters: HttpUrlParameter[] } | null {
+  const split = url.split(/\?(.*)/s);
+  const baseUrl = split[0] ?? "";
+  const querystring = split[1] ?? "";
+
+  // No querystring in url
+  if (!querystring) {
+    return null;
+  }
+
+  const parsedParams = Array.from(new URLSearchParams(querystring).entries());
+  const urlParameters: HttpUrlParameter[] = parsedParams.map(([name, value]) => ({
+    name,
+    value,
+    enabled: true,
+    id: generateId(),
+  }));
+
+  return { url: baseUrl, urlParameters };
+}
diff --git a/apps/yaak-client/lib/pricingUrl.ts b/apps/yaak-client/lib/pricingUrl.ts
new file mode 100644
index 0000000..6351bfc
--- /dev/null
+++ b/apps/yaak-client/lib/pricingUrl.ts
@@ -0,0 +1,3 @@
+export function pricingUrl(intent: string): string {
+  return `https://yaak.app/pricing?intent=${encodeURIComponent(intent)}`;
+}
diff --git a/apps/yaak-client/lib/prompt-form.tsx b/apps/yaak-client/lib/prompt-form.tsx
new file mode 100644
index 0000000..d109bb6
--- /dev/null
+++ b/apps/yaak-client/lib/prompt-form.tsx
@@ -0,0 +1,47 @@
+import type { FormInput, JsonPrimitive } from "@yaakapp-internal/plugins";
+import type { DialogProps } from "../components/core/Dialog";
+import type { PromptProps } from "../components/core/Prompt";
+import { Prompt } from "../components/core/Prompt";
+import { showDialog } from "./dialog";
+
+type FormArgs = Pick<DialogProps, "title" | "description" | "size"> &
+  Omit<PromptProps, "onClose" | "onCancel" | "onResult"> & {
+    id: string;
+    onValuesChange?: (values: Record<string, JsonPrimitive>) => void;
+    onInputsUpdated?: (cb: (inputs: FormInput[]) => void) => void;
+  };
+
+export async function showPromptForm({
+  id,
+  title,
+  description,
+  size,
+  onValuesChange,
+  onInputsUpdated,
+  ...props
+}: FormArgs) {
+  return new Promise((resolve: PromptProps["onResult"]) => {
+    showDialog({
+      id,
+      title,
+      description,
+      size: size ?? "sm",
+      disableClose: true,
+      render: ({ hide }) =>
+        Prompt({
+          onCancel: () => {
+            // Click cancel button within dialog
+            resolve(null);
+            hide();
+          },
+          onResult: (v) => {
+            resolve(v);
+            hide();
+          },
+          onValuesChange,
+          onInputsUpdated,
+          ...props,
+        }),
+    });
+  });
+}
diff --git a/apps/yaak-client/lib/prompt.ts b/apps/yaak-client/lib/prompt.ts
new file mode 100644
index 0000000..c7d7acd
--- /dev/null
+++ b/apps/yaak-client/lib/prompt.ts
@@ -0,0 +1,45 @@
+import type { FormInput, PromptTextRequest } from "@yaakapp-internal/plugins";
+import type { ReactNode } from "react";
+import type { DialogProps } from "../components/core/Dialog";
+import { showPromptForm } from "./prompt-form";
+
+type PromptProps = Omit<PromptTextRequest, "id" | "title" | "description"> & {
+  description?: ReactNode;
+  onCancel: () => void;
+  onResult: (value: string | null) => void;
+};
+
+type PromptArgs = Pick<DialogProps, "title" | "description"> &
+  Omit<PromptProps, "onClose" | "onCancel" | "onResult"> & { id: string };
+
+export async function showPrompt({
+  id,
+  title,
+  description,
+  cancelText,
+  confirmText,
+  required,
+  ...props
+}: PromptArgs) {
+  const inputs: FormInput[] = [
+    {
+      ...props,
+      optional: !required,
+      type: "text",
+      name: "value",
+    },
+  ];
+
+  const result = await showPromptForm({
+    id,
+    title,
+    description,
+    inputs,
+    cancelText,
+    confirmText,
+  });
+
+  if (result == null) return null; // Cancelled
+  if (typeof result.value === "string") return result.value;
+  return props.defaultValue ?? "";
+}
diff --git a/apps/yaak-client/lib/queryClient.ts b/apps/yaak-client/lib/queryClient.ts
new file mode 100644
index 0000000..f5cfa2d
--- /dev/null
+++ b/apps/yaak-client/lib/queryClient.ts
@@ -0,0 +1,18 @@
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (err, query) => {
+      console.log("Query client error", { err, query });
+    },
+  }),
+  defaultOptions: {
+    queries: {
+      retry: false,
+      networkMode: "always",
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: false,
+      refetchOnMount: false, // Don't refetch when a hook mounts
+    },
+  },
+});
diff --git a/apps/yaak-client/lib/renameModelWithPrompt.tsx b/apps/yaak-client/lib/renameModelWithPrompt.tsx
new file mode 100644
index 0000000..d5b29f9
--- /dev/null
+++ b/apps/yaak-client/lib/renameModelWithPrompt.tsx
@@ -0,0 +1,32 @@
+import type { AnyModel } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import { InlineCode } from "@yaakapp-internal/ui";
+import { showPrompt } from "./prompt";
+
+export async function renameModelWithPrompt(model: Extract<AnyModel, { name: string }> | null) {
+  if (model == null) {
+    throw new Error("Tried to rename null model");
+  }
+
+  const name = await showPrompt({
+    id: "rename-request",
+    title: "Rename Request",
+    required: false,
+    description:
+      model.name === "" ? (
+        "Enter a new name"
+      ) : (
+        <>
+          Enter a new name for <InlineCode>{model.name}</InlineCode>
+        </>
+      ),
+    label: "Name",
+    placeholder: "New Name",
+    defaultValue: model.name,
+    confirmText: "Save",
+  });
+
+  if (name == null) return;
+
+  await patchModel(model, { name });
+}
diff --git a/apps/yaak-client/lib/requestBodyConversion.test.ts b/apps/yaak-client/lib/requestBodyConversion.test.ts
new file mode 100644
index 0000000..aeebda3
--- /dev/null
+++ b/apps/yaak-client/lib/requestBodyConversion.test.ts
@@ -0,0 +1,152 @@
+import { describe, expect, test } from "vite-plus/test";
+import {
+  BODY_TYPE_BINARY,
+  BODY_TYPE_FORM_URLENCODED,
+  BODY_TYPE_GRAPHQL,
+  BODY_TYPE_JSON,
+  BODY_TYPE_NONE,
+  BODY_TYPE_OTHER,
+  BODY_TYPE_XML,
+} from "./model_util";
+import { convertRequestBody } from "./requestBodyConversion";
+
+describe("convertRequestBody", () => {
+  test("converts imported JSON GraphQL bodies to GraphQL shape", () => {
+    const body = convertRequestBody({
+      fromBodyType: BODY_TYPE_JSON,
+      toBodyType: BODY_TYPE_GRAPHQL,
+      body: {
+        text: JSON.stringify({
+          query: "query GetUser($id: ID!) { user(id: $id) { name } }",
+          variables: { id: "123" },
+          operationName: "GetUser",
+        }),
+      },
+    });
+
+    expect(body).toEqual({
+      query: "query GetUser($id: ID!) { user(id: $id) { name } }",
+      variables: '{\n  "id": "123"\n}',
+      operationName: "GetUser",
+    });
+  });
+
+  test("converts GraphQL bodies to JSON text", () => {
+    const body = convertRequestBody({
+      fromBodyType: BODY_TYPE_GRAPHQL,
+      toBodyType: BODY_TYPE_JSON,
+      body: {
+        query: "query GetUser($id: ID!) { user(id: $id) { name } }",
+        variables: '{ "id": "123" }',
+        operationName: "GetUser",
+      },
+    });
+
+    expect(body).toEqual({
+      text: JSON.stringify(
+        {
+          query: "query GetUser($id: ID!) { user(id: $id) { name } }",
+          variables: { id: "123" },
+          operationName: "GetUser",
+        },
+        null,
+        2,
+      ),
+    });
+  });
+
+  test("converts urlencoded forms to urlencoded text for text-like bodies", () => {
+    const body = convertRequestBody({
+      fromBodyType: BODY_TYPE_FORM_URLENCODED,
+      toBodyType: BODY_TYPE_OTHER,
+      body: {
+        form: [
+          { enabled: true, name: "basic", value: "aaa" },
+          { enabled: true, name: "funky stuff", value: "*)%&#$)@ *$#)@&" },
+          { enabled: false, name: "disabled", value: "hidden" },
+          { enabled: true, name: "", value: "unnamed" },
+        ],
+      },
+    });
+
+    expect(body).toEqual({
+      text: "basic=aaa&funky+stuff=*%29%25%26%23%24%29%40+*%24%23%29%40%26",
+    });
+  });
+
+  test("converts urlencoded forms to JSON text for JSON bodies", () => {
+    const body = convertRequestBody({
+      fromBodyType: BODY_TYPE_FORM_URLENCODED,
+      toBodyType: BODY_TYPE_JSON,
+      body: {
+        form: [
+          { enabled: true, name: "tag", value: "one" },
+          { enabled: true, name: "tag", value: "two" },
+          { enabled: true, name: "limit", value: "10" },
+        ],
+      },
+    });
+
+    expect(body).toEqual({
+      text: JSON.stringify({ tag: ["one", "two"], limit: "10" }, null, 2),
+    });
+  });
+
+  test("preserves text when converting to form bodies cannot build form pairs", () => {
+    const body = convertRequestBody({
+      fromBodyType: BODY_TYPE_XML,
+      toBodyType: BODY_TYPE_FORM_URLENCODED,
+      body: { text: "a=1&b=two+words" },
+    });
+
+    expect(body).toEqual({
+      text: "a=1&b=two+words",
+    });
+  });
+
+  test("preserves JSON text that is not a GraphQL envelope", () => {
+    const body = convertRequestBody({
+      fromBodyType: BODY_TYPE_JSON,
+      toBodyType: BODY_TYPE_GRAPHQL,
+      body: { text: JSON.stringify({ name: "Yaak" }) },
+    });
+
+    expect(body).toEqual({
+      text: JSON.stringify({ name: "Yaak" }),
+    });
+  });
+
+  test("preserves JSON arrays and primitives when converting to GraphQL", () => {
+    for (const text of [JSON.stringify([1, 2, 3]), JSON.stringify("query"), "123", "null"]) {
+      const body = convertRequestBody({
+        fromBodyType: BODY_TYPE_JSON,
+        toBodyType: BODY_TYPE_GRAPHQL,
+        body: { text },
+      });
+
+      expect(body).toEqual({ text });
+    }
+  });
+
+  test("preserves text when converting to binary cannot build a file body", () => {
+    const body = convertRequestBody({
+      fromBodyType: BODY_TYPE_JSON,
+      toBodyType: BODY_TYPE_BINARY,
+      body: { text: '{ "name": "Yaak" }' },
+    });
+
+    expect(body).toEqual({
+      text: '{ "name": "Yaak" }',
+    });
+  });
+
+  test("clears body when converting to no body", () => {
+    const body = convertRequestBody({
+      fromBodyType: BODY_TYPE_JSON,
+      toBodyType: BODY_TYPE_NONE,
+      body: { text: '{ "name": "Yaak" }' },
+    });
+
+    expect(body).toEqual({});
+  });
+});
diff --git a/apps/yaak-client/lib/requestBodyConversion.ts b/apps/yaak-client/lib/requestBodyConversion.ts
new file mode 100644
index 0000000..26cff99
--- /dev/null
+++ b/apps/yaak-client/lib/requestBodyConversion.ts
@@ -0,0 +1,199 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import {
+  BODY_TYPE_BINARY,
+  BODY_TYPE_FORM_MULTIPART,
+  BODY_TYPE_FORM_URLENCODED,
+  BODY_TYPE_GRAPHQL,
+  BODY_TYPE_JSON,
+  BODY_TYPE_NONE,
+} from "./model_util";
+
+type Body = HttpRequest["body"];
+type BodyType = HttpRequest["bodyType"];
+type GraphQLBody = {
+  query: string;
+  variables: string | undefined;
+  operationName?: string;
+};
+
+export function convertRequestBody({
+  body,
+  fromBodyType,
+  toBodyType,
+}: {
+  body: Body;
+  fromBodyType: BodyType;
+  toBodyType: BodyType;
+}): Body {
+  if (toBodyType === BODY_TYPE_NONE) {
+    return {};
+  }
+
+  if (toBodyType === BODY_TYPE_GRAPHQL) {
+    return toGraphQLBody(body) ?? body;
+  }
+
+  if (toBodyType === BODY_TYPE_FORM_URLENCODED || toBodyType === BODY_TYPE_FORM_MULTIPART) {
+    return toFormBody(body) ?? body;
+  }
+
+  if (toBodyType === BODY_TYPE_BINARY) {
+    return typeof body.filePath === "string" ? { filePath: body.filePath } : body;
+  }
+
+  return toTextBody(body, fromBodyType, toBodyType) ?? body;
+}
+
+export function normalizeGraphQLBody(body: Body): GraphQLBody {
+  return toGraphQLBody(body) ?? { query: "", variables: undefined };
+}
+
+function toGraphQLBody(body: Body): GraphQLBody | null {
+  if (typeof body.query === "string") {
+    const result: GraphQLBody = {
+      query: body.query,
+      variables: typeof body.variables === "string" ? body.variables : undefined,
+    };
+    if (typeof body.operationName === "string") {
+      result.operationName = body.operationName;
+    }
+
+    return result;
+  }
+
+  if (typeof body.text === "string") {
+    try {
+      const parsed: unknown = JSON.parse(body.text);
+      if (!isRecord(parsed)) {
+        return null;
+      }
+
+      if (typeof parsed.query !== "string") {
+        return null;
+      }
+
+      const query = parsed.query;
+      const variables =
+        parsed.variables == null ? undefined : JSON.stringify(parsed.variables, null, 2);
+
+      const result: GraphQLBody = { query, variables };
+      if (typeof parsed.operationName === "string") {
+        result.operationName = parsed.operationName;
+      }
+
+      return result;
+    } catch {
+      return { query: body.text, variables: undefined };
+    }
+  }
+
+  return null;
+}
+
+function toFormBody(body: Body): Body | null {
+  if (Array.isArray(body.form)) {
+    return {
+      form: body.form.map((p) => ({
+        enabled: p.enabled !== false,
+        name: typeof p.name === "string" ? p.name : "",
+        value: stringifyFormValue(p.value ?? p.file),
+        contentType: typeof p.contentType === "string" ? p.contentType : undefined,
+        filename: typeof p.filename === "string" ? p.filename : undefined,
+        file: typeof p.file === "string" ? p.file : undefined,
+        id: typeof p.id === "string" ? p.id : undefined,
+      })),
+    };
+  }
+
+  return null;
+}
+
+function toTextBody(body: Body, fromBodyType: BodyType, toBodyType: BodyType): Body | null {
+  const sendJsonComments =
+    typeof body.sendJsonComments === "boolean" ? { sendJsonComments: body.sendJsonComments } : {};
+
+  if (typeof body.text === "string") {
+    return { text: body.text, ...sendJsonComments };
+  }
+
+  if (Array.isArray(body.form)) {
+    if (toBodyType === BODY_TYPE_JSON) {
+      return { text: JSON.stringify(formBodyToObject(body.form), null, 2) };
+    }
+
+    return { text: formBodyToUrlEncodedText(body.form) };
+  }
+
+  if (typeof body.query === "string") {
+    if (toBodyType === BODY_TYPE_JSON || fromBodyType === BODY_TYPE_GRAPHQL) {
+      const value: Record<string, unknown> = { query: body.query };
+      if (typeof body.variables === "string" && body.variables.trim() !== "") {
+        value.variables = parseJson(body.variables) ?? body.variables;
+      }
+      if (typeof body.operationName === "string" && body.operationName.trim() !== "") {
+        value.operationName = body.operationName;
+      }
+
+      return { text: JSON.stringify(value, null, 2) };
+    }
+
+    return { text: body.query };
+  }
+
+  if (typeof body.filePath === "string") {
+    return { text: body.filePath };
+  }
+
+  return null;
+}
+
+function formBodyToUrlEncodedText(form: unknown[]): string {
+  const params = new URLSearchParams();
+
+  for (const pair of form) {
+    if (!isRecord(pair)) continue;
+    if (pair.enabled === false) continue;
+    if (typeof pair.name !== "string" || pair.name === "") continue;
+    params.append(pair.name, stringifyFormValue(pair.value));
+  }
+
+  return params.toString();
+}
+
+function formBodyToObject(form: unknown[]) {
+  const result: Record<string, unknown> = {};
+
+  for (const pair of form) {
+    if (!isRecord(pair)) continue;
+    if (pair.enabled === false) continue;
+    if (typeof pair.name !== "string" || pair.name === "") continue;
+
+    const value = stringifyFormValue(pair.value);
+    if (pair.name in result) {
+      const existing = result[pair.name];
+      result[pair.name] = Array.isArray(existing) ? [...existing, value] : [existing, value];
+    } else {
+      result[pair.name] = value;
+    }
+  }
+
+  return result;
+}
+
+function stringifyFormValue(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  return JSON.stringify(value);
+}
+
+function parseJson(text: string): unknown | null {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value != null && typeof value === "object" && !Array.isArray(value);
+}
diff --git a/apps/yaak-client/lib/requestSettings.ts b/apps/yaak-client/lib/requestSettings.ts
new file mode 100644
index 0000000..a6d907d
--- /dev/null
+++ b/apps/yaak-client/lib/requestSettings.ts
@@ -0,0 +1,99 @@
+import type { AnyModel, Workspace } from "@yaakapp-internal/models";
+
+type ModelType = AnyModel["model"];
+
+type WorkspaceRequestSettings = Pick<
+  Workspace,
+  | "settingFollowRedirects"
+  | "settingHttpVersion"
+  | "settingRequestMessageSize"
+  | "settingRequestTimeout"
+  | "settingSendCookies"
+  | "settingStoreCookies"
+  | "settingValidateCertificates"
+>;
+
+type ModelForType<T extends ModelType> = Extract<AnyModel, { model: T }>;
+
+type ModelTypeWithSetting<K extends RequestSettingKey> = {
+  [M in ModelType]: K extends keyof ModelForType<M> ? M : never;
+}[ModelType];
+
+export type RequestSettingDefinition<K extends RequestSettingKey = RequestSettingKey> = {
+  defaultValue: WorkspaceRequestSettings[K];
+  description: string;
+  modelKey: K;
+  models: readonly ModelTypeWithSetting<K>[];
+  title: string;
+};
+
+export type RequestSettingKey = keyof WorkspaceRequestSettings;
+
+function defineRequestSetting<const K extends RequestSettingKey>(
+  setting: RequestSettingDefinition<K>,
+) {
+  return setting;
+}
+
+export const SETTING_REQUEST_TIMEOUT = defineRequestSetting({
+  defaultValue: 0,
+  description: "Maximum request duration in milliseconds. Set to 0 to disable.",
+  modelKey: "settingRequestTimeout",
+  models: ["workspace", "folder", "http_request"],
+  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"],
+  title: "Validate TLS certificates",
+});
+
+export const SETTING_FOLLOW_REDIRECTS = defineRequestSetting({
+  defaultValue: true,
+  description: "Follow HTTP redirects automatically.",
+  modelKey: "settingFollowRedirects",
+  models: ["workspace", "folder", "http_request"],
+  title: "Follow redirects",
+});
+
+export const SETTING_HTTP_VERSION = defineRequestSetting({
+  defaultValue: "auto",
+  description: "Force HTTP/1.1 or HTTP/2 for servers that don't negotiate the version correctly.",
+  modelKey: "settingHttpVersion",
+  models: ["workspace", "folder", "http_request"],
+  title: "HTTP version",
+});
+
+export const SETTING_SEND_COOKIES = defineRequestSetting({
+  defaultValue: true,
+  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",
+});
+
+export const SETTING_STORE_COOKIES = defineRequestSetting({
+  defaultValue: true,
+  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",
+});
+
+export function modelSupportsSetting<K extends RequestSettingKey>(
+  model: Pick<AnyModel, "model">,
+  setting: RequestSettingDefinition<K>,
+) {
+  return setting.models.some((modelType) => modelType === model.model);
+}
diff --git a/apps/yaak-client/lib/resolvedModelName.ts b/apps/yaak-client/lib/resolvedModelName.ts
new file mode 100644
index 0000000..1e84fc7
--- /dev/null
+++ b/apps/yaak-client/lib/resolvedModelName.ts
@@ -0,0 +1,61 @@
+import type { AnyModel } from "@yaakapp-internal/models";
+import { foldersAtom } from "@yaakapp-internal/models";
+import { jotaiStore } from "./jotai";
+
+export function resolvedModelName(r: AnyModel | null): string {
+  if (r == null) return "";
+
+  if (!("url" in r) || r.model === "plugin") {
+    return "name" in r ? r.name : "";
+  }
+
+  // Return name if it has one
+  if ("name" in r && r.name) {
+    return r.name;
+  }
+
+  // Replace variable syntax with variable name
+  const withoutVariables = r.url.replace(/\$\{\[\s*([^\]\s]+)\s*]}/g, "$1");
+  if (withoutVariables.trim() === "") {
+    return r.model === "http_request"
+      ? r.bodyType && r.bodyType === "graphql"
+        ? "GraphQL Request"
+        : "HTTP Request"
+      : r.model === "websocket_request"
+        ? "WebSocket Request"
+        : "gRPC Request";
+  }
+
+  // GRPC gets nice short names
+  if (r.model === "grpc_request" && r.service != null && r.method != null) {
+    const shortService = r.service.split(".").pop();
+    return `${shortService}/${r.method}`;
+  }
+
+  // Strip unnecessary protocol
+  const withoutProto = withoutVariables.replace(/^(http|https|ws|wss):\/\//, "");
+
+  return withoutProto;
+}
+
+export function resolvedModelNameWithFolders(model: AnyModel | null): string {
+  return resolvedModelNameWithFoldersArray(model).join(" / ");
+}
+
+export function resolvedModelNameWithFoldersArray(model: AnyModel | null): string[] {
+  if (model == null) return [];
+  const folders = jotaiStore.get(foldersAtom) ?? [];
+
+  const getParents = (m: AnyModel, names: string[]) => {
+    let newNames = [...names, resolvedModelName(m)];
+    if ("folderId" in m) {
+      const parent = folders.find((f) => f.id === m.folderId);
+      if (parent) {
+        newNames = [...resolvedModelNameWithFoldersArray(parent), ...newNames];
+      }
+    }
+    return newNames;
+  };
+
+  return getParents(model, []);
+}
diff --git a/apps/yaak-client/lib/responseBody.ts b/apps/yaak-client/lib/responseBody.ts
new file mode 100644
index 0000000..bc0fe23
--- /dev/null
+++ b/apps/yaak-client/lib/responseBody.ts
@@ -0,0 +1,78 @@
+import type { HttpResponse } from "@yaakapp-internal/models";
+import type { FilterResponse } from "@yaakapp-internal/plugins";
+import type { ServerSentEvent, SseSummary } from "@yaakapp-internal/sse";
+import { candidateJsonPayloadsFromSseText, computeSseSummary } from "@yaakapp-internal/sse";
+import { rpc } from "./rpc";
+import { platform } from "@yaakapp-internal/platform";
+
+/**
+ * Reading a response body means naming the response, never the file it lives
+ * in: the backend resolves an id against its own records, so nothing the UI
+ * says can point a read somewhere else.
+ */
+
+export async function getResponseBodyText({
+  response,
+  filter,
+}: {
+  response: HttpResponse;
+  filter: string | null;
+}): Promise<string | null> {
+  const result = await rpc<FilterResponse>("cmd_http_response_body", {
+    responseId: response.id,
+    filter,
+  });
+
+  if (result.error) {
+    throw new Error(result.error);
+  }
+
+  return result.content;
+}
+
+export async function getResponseBodyEventSource(
+  response: HttpResponse,
+): Promise<ServerSentEvent[]> {
+  try {
+    const events = await rpc<ServerSentEvent[]>("cmd_get_sse_events", {
+      responseId: response.id,
+    });
+    if (events.length > 0) {
+      return events;
+    }
+  } catch {
+    // Fall back to raw JSON frame parsing for non-standard SSE-like responses.
+  }
+
+  const text = await getResponseBodyDecoded(response);
+  if (text == null) return [];
+
+  return candidateJsonPayloadsFromSseText(text).map((data, index) => ({
+    data,
+    eventType: "",
+    id: String(index),
+    retry: null,
+  }));
+}
+
+export async function getResponseBodySseSummary(
+  response: HttpResponse,
+  resultKeyPath: string,
+): Promise<SseSummary> {
+  const text = await getResponseBodyDecoded(response);
+  if (text == null) return { fragmentCount: 0, summary: "" };
+
+  return computeSseSummary(text, resultKeyPath);
+}
+
+export async function getResponseBodyBytes(
+  response: HttpResponse,
+): Promise<Uint8Array<ArrayBuffer> | null> {
+  // A response body is stored under the response's own id
+  return platform.blobs.read(response.id);
+}
+
+async function getResponseBodyDecoded(response: HttpResponse): Promise<string | null> {
+  const bytes = await getResponseBodyBytes(response);
+  return bytes == null ? null : new TextDecoder("utf-8").decode(bytes);
+}
diff --git a/apps/yaak-client/lib/reveal.ts b/apps/yaak-client/lib/reveal.ts
new file mode 100644
index 0000000..57d7384
--- /dev/null
+++ b/apps/yaak-client/lib/reveal.ts
@@ -0,0 +1,9 @@
+import { platform } from "@yaakapp-internal/platform";
+
+const os = platform.osType();
+export const revealInFinderText =
+  os === "macos"
+    ? "Reveal in Finder"
+    : os === "windows"
+      ? "Show in Explorer"
+      : "Show in File Manager";
diff --git a/apps/yaak-client/lib/router.ts b/apps/yaak-client/lib/router.ts
new file mode 100644
index 0000000..d80e981
--- /dev/null
+++ b/apps/yaak-client/lib/router.ts
@@ -0,0 +1,12 @@
+// Create a new router instance
+import { createRouter } from "@tanstack/react-router";
+import { routeTree } from "../routeTree.gen";
+
+export const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
diff --git a/apps/yaak-client/lib/rpc.ts b/apps/yaak-client/lib/rpc.ts
new file mode 100644
index 0000000..e1a9eb2
--- /dev/null
+++ b/apps/yaak-client/lib/rpc.ts
@@ -0,0 +1,19 @@
+import type { RpcPayload } from "@yaakapp-internal/platform";
+import { platform } from "@yaakapp-internal/platform";
+import type { RpcSchema } from "@yaakapp-internal/rpc-schema";
+
+/**
+ * Every backend command the app can call: the generated wire schema, one field
+ * per `RpcRouter` registration on the Rust side. A typo'd or unregistered
+ * command name is a compile error. Host plugin commands (license, fonts,
+ * mac-window) don't appear here — each lives behind its own package's facade.
+ *
+ * `RpcSchema` also carries each command's request and response payload types;
+ * adopting them at call sites is an incremental follow-up.
+ */
+type AppCmd = keyof RpcSchema;
+
+/** Call a backend command. */
+export function rpc<T>(cmd: AppCmd, payload?: RpcPayload): Promise<T> {
+  return platform.rpc<T>(cmd, payload);
+}
diff --git a/apps/yaak-client/lib/scopes.ts b/apps/yaak-client/lib/scopes.ts
new file mode 100644
index 0000000..bd13d30
--- /dev/null
+++ b/apps/yaak-client/lib/scopes.ts
@@ -0,0 +1,3 @@
+export function isSidebarFocused() {
+  return document.activeElement?.closest(".x-theme-sidebar") != null;
+}
diff --git a/apps/yaak-client/lib/sendEphemeralRequest.ts b/apps/yaak-client/lib/sendEphemeralRequest.ts
new file mode 100644
index 0000000..1c9838b
--- /dev/null
+++ b/apps/yaak-client/lib/sendEphemeralRequest.ts
@@ -0,0 +1,17 @@
+import type { HttpRequest } from "@yaakapp-internal/models";
+import type { EphemeralHttpResponse } from "@yaakapp-internal/rpc-schema";
+import { getActiveCookieJar } from "../hooks/useActiveCookieJar";
+import { rpc } from "./rpc";
+
+export async function sendEphemeralRequest(
+  request: HttpRequest,
+  environmentId: string | null,
+): Promise<EphemeralHttpResponse> {
+  // Remove some things that we don't want to associate
+  const newRequest = { ...request };
+  return rpc("cmd_send_ephemeral_request", {
+    request: newRequest,
+    environmentId,
+    cookieJarId: getActiveCookieJar()?.id,
+  });
+}
diff --git a/apps/yaak-client/lib/setWorkspaceSearchParams.ts b/apps/yaak-client/lib/setWorkspaceSearchParams.ts
new file mode 100644
index 0000000..4b5f1d4
--- /dev/null
+++ b/apps/yaak-client/lib/setWorkspaceSearchParams.ts
@@ -0,0 +1,47 @@
+import type { Folder, GrpcRequest, WebsocketRequest, Workspace } from "@yaakapp-internal/models";
+import type { HttpRequest } from "@yaakapp-internal/sync";
+import { router } from "./router.js";
+
+/**
+ * Setting search params using "from" on the global router instance in tanstack router does not
+ * currently behave very well, so this is a wrapper function that gives a typesafe interface
+ * for the same thing.
+ */
+export function setWorkspaceSearchParams(
+  search: Partial<{
+    cookie_jar_id: string | null;
+    environment_id: string | null;
+    request_id: string | null;
+    folder_id: string | null;
+  }>,
+) {
+  // oxlint-disable-next-line no-explicit-any
+  (router as any)
+    .navigate({
+      // oxlint-disable-next-line no-explicit-any
+      search: (prev: any) => {
+        // console.log('Navigating to', { prev, search });
+        const o = { ...prev, ...search };
+        for (const k of Object.keys(o)) {
+          if (o[k] == null) {
+            delete o[k];
+          }
+        }
+        return o;
+      },
+    })
+    .catch(console.error);
+}
+
+export function navigateToRequestOrFolderOrWorkspace(
+  id: string,
+  model: (Workspace | Folder | HttpRequest | GrpcRequest | WebsocketRequest)["model"],
+) {
+  if (model === "workspace") {
+    setWorkspaceSearchParams({ request_id: null, folder_id: null });
+  } else if (model === "folder") {
+    setWorkspaceSearchParams({ request_id: null, folder_id: id });
+  } else {
+    setWorkspaceSearchParams({ request_id: id, folder_id: null });
+  }
+}
diff --git a/apps/yaak-client/lib/settings.ts b/apps/yaak-client/lib/settings.ts
new file mode 100644
index 0000000..efb297e
--- /dev/null
+++ b/apps/yaak-client/lib/settings.ts
@@ -0,0 +1,6 @@
+import type { Settings } from "@yaakapp-internal/models";
+import { rpc } from "./rpc";
+
+export function getSettings(): Promise<Settings> {
+  return rpc<Settings>("models_get_settings");
+}
diff --git a/apps/yaak-client/lib/setupOrConfigureEncryption.tsx b/apps/yaak-client/lib/setupOrConfigureEncryption.tsx
new file mode 100644
index 0000000..d62406f
--- /dev/null
+++ b/apps/yaak-client/lib/setupOrConfigureEncryption.tsx
@@ -0,0 +1,32 @@
+import { VStack } from "@yaakapp-internal/ui";
+import { WorkspaceEncryptionSetting } from "../components/WorkspaceEncryptionSetting";
+import { activeWorkspaceMetaAtom } from "../hooks/useActiveWorkspace";
+import { showDialog } from "./dialog";
+import { jotaiStore } from "./jotai";
+
+export function setupOrConfigureEncryption() {
+  setupOrConfigure();
+}
+
+export function withEncryptionEnabled(callback?: () => void) {
+  const workspaceMeta = jotaiStore.get(activeWorkspaceMetaAtom);
+  if (workspaceMeta?.encryptionKey != null) {
+    callback?.(); // Already set up
+    return;
+  }
+
+  setupOrConfigure(callback);
+}
+
+function setupOrConfigure(onEnable?: () => void) {
+  showDialog({
+    id: "workspace-encryption",
+    title: "Workspace Encryption",
+    size: "md",
+    render: ({ hide }) => (
+      <VStack space={3} className="pb-2" alignItems="end">
+        <WorkspaceEncryptionSetting expanded onDone={hide} onEnabledEncryption={onEnable} />
+      </VStack>
+    ),
+  });
+}
diff --git a/apps/yaak-client/lib/showColorPicker.tsx b/apps/yaak-client/lib/showColorPicker.tsx
new file mode 100644
index 0000000..3be421c
--- /dev/null
+++ b/apps/yaak-client/lib/showColorPicker.tsx
@@ -0,0 +1,23 @@
+import type { Environment } from "@yaakapp-internal/models";
+import { patchModel } from "@yaakapp-internal/models";
+import { EnvironmentColorPicker } from "../components/EnvironmentColorPicker";
+import { showDialog } from "./dialog";
+
+export function showColorPicker(environment: Environment) {
+  showDialog({
+    title: "Environment Color",
+    id: "color-picker",
+    size: "sm",
+    render: ({ hide }) => {
+      return (
+        <EnvironmentColorPicker
+          color={environment.color}
+          onChange={async (color) => {
+            await patchModel(environment, { color });
+            hide();
+          }}
+        />
+      );
+    },
+  });
+}
diff --git a/apps/yaak-client/lib/sleep.ts b/apps/yaak-client/lib/sleep.ts
new file mode 100644
index 0000000..8e339f3
--- /dev/null
+++ b/apps/yaak-client/lib/sleep.ts
@@ -0,0 +1,3 @@
+export async function sleep(millis: number) {
+  await new Promise((resolve) => setTimeout(resolve, millis));
+}
diff --git a/apps/yaak-client/lib/themes.ts b/apps/yaak-client/lib/themes.ts
new file mode 100644
index 0000000..9b6e8da
--- /dev/null
+++ b/apps/yaak-client/lib/themes.ts
@@ -0,0 +1,36 @@
+import type { GetThemesResponse } from "@yaakapp-internal/plugins";
+import {
+  defaultDarkTheme,
+  defaultLightTheme,
+  resolveAppearance,
+  type Appearance,
+} from "@yaakapp-internal/theme";
+import { rpc } from "./rpc";
+
+export async function getThemes() {
+  const themes = (await rpc<GetThemesResponse[]>("cmd_get_themes")).flatMap((t) => t.themes);
+  themes.sort((a, b) => a.label.localeCompare(b.label));
+  // Remove duplicates, in case multiple plugins provide the same theme
+  const uniqueThemes = Array.from(new Map(themes.map((t) => [t.id, t])).values());
+  return { themes: [defaultDarkTheme, defaultLightTheme, ...uniqueThemes] };
+}
+
+export async function getResolvedTheme(
+  preferredAppearance: Appearance,
+  appearanceSetting: string,
+  themeLight: string,
+  themeDark: string,
+) {
+  const appearance = resolveAppearance(preferredAppearance, appearanceSetting);
+  const { themes } = await getThemes();
+
+  const darkThemes = themes.filter((t) => t.dark);
+  const lightThemes = themes.filter((t) => !t.dark);
+
+  const dark = darkThemes.find((t) => t.id === themeDark) ?? darkThemes[0] ?? defaultDarkTheme;
+  const light = lightThemes.find((t) => t.id === themeLight) ?? lightThemes[0] ?? defaultLightTheme;
+
+  const active = appearance === "dark" ? dark : light;
+
+  return { dark, light, active };
+}
diff --git a/apps/yaak-client/lib/toast.tsx b/apps/yaak-client/lib/toast.tsx
new file mode 100644
index 0000000..613f658
--- /dev/null
+++ b/apps/yaak-client/lib/toast.tsx
@@ -0,0 +1,70 @@
+import { atom } from "jotai";
+import type { ToastInstance } from "../components/Toasts";
+import { generateId } from "./generateId";
+import { jotaiStore } from "./jotai";
+
+export const toastsAtom = atom<ToastInstance[]>([]);
+
+export function showToast({
+  id,
+  timeout = 5000,
+  ...props
+}: Omit<ToastInstance, "id" | "timeout" | "uniqueKey"> & {
+  id?: ToastInstance["id"];
+  timeout?: ToastInstance["timeout"];
+}) {
+  id = id ?? generateId();
+  const uniqueKey = generateId();
+
+  const toasts = jotaiStore.get(toastsAtom);
+  const toastWithSameId = toasts.find((t) => t.id === id);
+
+  let delay = 0;
+  if (toastWithSameId) {
+    hideToast(toastWithSameId);
+    // Allow enough time for old toast to animate out
+    delay = 200;
+  }
+
+  setTimeout(() => {
+    const newToast: ToastInstance = { id, uniqueKey, timeout, ...props };
+    jotaiStore.set(toastsAtom, (prev) => [...prev, newToast]);
+  }, delay);
+
+  return id;
+}
+
+export function hideToastById(id: string) {
+  const toast = jotaiStore.get(toastsAtom).find((t) => t.id === id);
+  if (toast) hideToast(toast);
+}
+
+export function hideToast(toHide: ToastInstance) {
+  jotaiStore.set(toastsAtom, (all) => {
+    const t = all.find((t) => t.uniqueKey === toHide.uniqueKey);
+    t?.onClose?.();
+    return all.filter((t) => t.uniqueKey !== toHide.uniqueKey);
+  });
+}
+
+export function showErrorToast<T>({
+  id,
+  title,
+  message,
+}: {
+  id: string;
+  title: string;
+  message: T;
+}) {
+  return showToast({
+    id,
+    color: "danger",
+    timeout: null,
+    message: (
+      <div className="w-full">
+        <h2 className="text-lg font-bold mb-2">{title}</h2>
+        <div className="whitespace-pre-wrap wrap-break-word">{String(message)}</div>
+      </div>
+    ),
+  });
+}
diff --git a/apps/yaak-client/lib/truncate.ts b/apps/yaak-client/lib/truncate.ts
new file mode 100644
index 0000000..5484b52
--- /dev/null
+++ b/apps/yaak-client/lib/truncate.ts
@@ -0,0 +1,4 @@
+export function truncate(text: string, len: number): string {
+  if (text.length <= len) return text;
+  return `${text.slice(0, len)}…`;
+}
diff --git a/apps/yaak-client/main.css b/apps/yaak-client/main.css
new file mode 100644
index 0000000..e77317a
--- /dev/null
+++ b/apps/yaak-client/main.css
@@ -0,0 +1,96 @@
+@import "tailwindcss";
+@import "../../packages/tailwind-config/index.css";
+@source "../../packages/ui/src";
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply w-full h-full overflow-hidden text-text bg-surface;
+  }
+
+  :root {
+    /* Must default these variables or the default will break */
+    --font-family-interface: "";
+    --font-family-editor: "";
+  }
+
+  /* Never show ligatures */
+  :root {
+    font-variant-ligatures: none;
+  }
+
+  /* The following fixes weird font rendering issues on Linux */
+  html[data-platform="linux"] {
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  ::selection {
+    @apply bg-selection;
+  }
+
+  /* Disable user selection to make it more "app-like" */
+  :not(a),
+  :not(input):not(textarea),
+  :not(input):not(textarea)::after,
+  :not(input):not(textarea)::before {
+    @apply select-none cursor-default;
+  }
+
+  input,
+  textarea {
+    &::placeholder {
+      @apply text-placeholder;
+    }
+  }
+
+  a,
+  a[href] * {
+    @apply cursor-pointer!;
+  }
+
+  table th {
+    @apply text-left;
+  }
+
+  :not(iframe) {
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-corner {
+      @apply w-[8px] h-[8px] bg-transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply bg-text-subtlest rounded-[4px] opacity-20;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      @apply opacity-40!;
+    }
+  }
+
+  .hide-scrollbars {
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar {
+      @apply hidden!;
+    }
+  }
+
+  .rtl {
+    direction: rtl;
+  }
+
+  :root {
+    color-scheme: light dark;
+    --transition-duration: 100ms ease-in-out;
+    --color-white: 255 100% 100%;
+    --color-black: 255 0% 0%;
+  }
+}
diff --git a/apps/yaak-client/main.tsx b/apps/yaak-client/main.tsx
new file mode 100644
index 0000000..8c23f77
--- /dev/null
+++ b/apps/yaak-client/main.tsx
@@ -0,0 +1,46 @@
+import "./main.css";
+import { RouterProvider } from "@tanstack/react-router";
+import { platform } from "@yaakapp-internal/platform";
+import { changeModelStoreWorkspace, initModelStore } from "@yaakapp-internal/models";
+import { setPlatformOnDocument } from "@yaakapp-internal/theme";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { initGit } from "./init/git";
+import { initSync } from "./init/sync";
+import { initGlobalListeners } from "./lib/initGlobalListeners";
+import { jotaiStore } from "./lib/jotai";
+import { router } from "./lib/router";
+
+const osType = platform.osType();
+setPlatformOnDocument(osType);
+
+window.addEventListener("keydown", (e) => {
+  const rx = /input|select|textarea/i;
+
+  const target = e.target;
+  if (e.key !== "Backspace") return;
+  if (!(target instanceof Element)) return;
+  if (target.getAttribute("contenteditable") !== null) return;
+
+  if (
+    !rx.test(target.tagName) ||
+    ("disabled" in target && target.disabled) ||
+    ("readOnly" in target && target.readOnly)
+  ) {
+    e.preventDefault();
+  }
+});
+
+// Initialize a bunch of watchers
+initGit();
+initSync();
+initModelStore(jotaiStore);
+initGlobalListeners();
+await changeModelStoreWorkspace(null); // Load global models
+
+console.log("Creating React root");
+createRoot(document.getElementById("root") as HTMLElement).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);
diff --git a/apps/yaak-client/modules.d.ts b/apps/yaak-client/modules.d.ts
new file mode 100644
index 0000000..1ba602b
--- /dev/null
+++ b/apps/yaak-client/modules.d.ts
@@ -0,0 +1 @@
+declare module "vkbeautify";
diff --git a/apps/yaak-client/package.json b/apps/yaak-client/package.json
new file mode 100644
index 0000000..3312834
--- /dev/null
+++ b/apps/yaak-client/package.json
@@ -0,0 +1,102 @@
+{
+  "name": "@yaakapp/yaak-client",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev --force",
+    "build": "vp build",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.3.2",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.11.0",
+    "@codemirror/merge": "^6.11.2",
+    "@codemirror/search": "^6.5.11",
+    "@dnd-kit/core": "^6.3.1",
+    "@gilbarbara/deep-equal": "^0.4.1",
+    "@lezer/highlight": "^1.1.3",
+    "@lezer/lr": "^1.3.3",
+    "@mjackson/multipart-parser": "^0.10.1",
+    "@replit/codemirror-emacs": "^6.1.0",
+    "@replit/codemirror-vim": "^6.3.0",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
+    "@shopify/lang-jsonc": "^1.0.1",
+    "@tanstack/react-query": "^5.90.5",
+    "@tanstack/react-router": "^1.133.13",
+    "@tanstack/react-virtual": "^3.14.9",
+    "@tauri-apps/api": "^2.11.0",
+    "@tauri-apps/plugin-clipboard-manager": "^2.3.2",
+    "@tauri-apps/plugin-dialog": "^2.7.1",
+    "@tauri-apps/plugin-fs": "^2.5.1",
+    "@tauri-apps/plugin-log": "^2.8.0",
+    "@tauri-apps/plugin-opener": "^2.5.4",
+    "@tauri-apps/plugin-os": "^2.3.2",
+    "@tauri-apps/plugin-shell": "^2.3.5",
+    "buffer": "^6.0.3",
+    "classnames": "^2.5.1",
+    "cm6-graphql": "^0.2.1",
+    "codemirror-json-schema": "0.6.1",
+    "date-fns": "^4.1.0",
+    "deep-equal": "^2.2.3",
+    "eventemitter3": "^5.0.1",
+    "focus-trap-react": "^11.0.4",
+    "fuzzbunny": "^1.0.1",
+    "graphql": "^17.0.2",
+    "hexy": "^0.4.0",
+    "history": "^5.3.0",
+    "jotai": "^2.18.0",
+    "jotai-family": "^1.0.1",
+    "js-md5": "^0.9.2",
+    "jsonc-parser": "^3.3.1",
+    "lucide-react": "^1.45.0",
+    "mime": "^4.0.4",
+    "motion": "^13.2.0",
+    "nanoid": "^6.0.1",
+    "papaparse": "^5.4.1",
+    "parse-color": "^1.0.0",
+    "react": "^19.2.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "react-pdf": "^11.0.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "react-use": "^17.6.1",
+    "rehype-stringify": "^10.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.1",
+    "slugify": "^1.6.6",
+    "uuid": "^14.0.0",
+    "vkbeautify": "^0.99.3",
+    "whatwg-mimetype": "^4.0.0",
+    "yaml": "^2.8.3"
+  },
+  "devDependencies": {
+    "@lezer/generator": "^1.8.0",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@tanstack/router-plugin": "^1.127.5",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.0.13",
+    "@types/papaparse": "^5.3.16",
+    "@types/parse-color": "^1.0.3",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/uuid": "^10.0.0",
+    "@types/whatwg-mimetype": "^3.0.2",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@yaakapp-internal/theme": "^1.0.0",
+    "@yaakapp-internal/ui": "^1.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "rollup": "^4.60.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@^0.3.2",
+    "vite-plugin-static-copy": "^4.1.1",
+    "vite-plugin-wasm": "^3.5.0",
+    "vite-plus": "^0.3.0"
+  }
+}
diff --git a/apps/yaak-client/postcss.config.cjs b/apps/yaak-client/postcss.config.cjs
new file mode 100644
index 0000000..972e996
--- /dev/null
+++ b/apps/yaak-client/postcss.config.cjs
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("@tailwindcss/postcss")],
+};
diff --git a/apps/yaak-client/react-augment.d.ts b/apps/yaak-client/react-augment.d.ts
new file mode 100644
index 0000000..4aaa353
--- /dev/null
+++ b/apps/yaak-client/react-augment.d.ts
@@ -0,0 +1,8 @@
+import "react";
+
+declare module "react" {
+  interface HTMLAttributes<T> {
+    // Not in @types/react yet; opts editable elements out of macOS Writing Tools
+    writingsuggestions?: "true" | "false";
+  }
+}
diff --git a/apps/yaak-client/routeTree.gen.ts b/apps/yaak-client/routeTree.gen.ts
new file mode 100644
index 0000000..e0029e1
--- /dev/null
+++ b/apps/yaak-client/routeTree.gen.ts
@@ -0,0 +1,151 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as WorkspacesIndexRouteImport } from './routes/workspaces/index'
+import { Route as WorkspacesWorkspaceIdIndexRouteImport } from './routes/workspaces/$workspaceId/index'
+import { Route as WorkspacesWorkspaceIdSettingsRouteImport } from './routes/workspaces/$workspaceId/settings'
+import { Route as WorkspacesWorkspaceIdRequestsRequestIdRouteImport } from './routes/workspaces/$workspaceId/requests/$requestId'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const WorkspacesIndexRoute = WorkspacesIndexRouteImport.update({
+  id: '/workspaces/',
+  path: '/workspaces/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const WorkspacesWorkspaceIdIndexRoute =
+  WorkspacesWorkspaceIdIndexRouteImport.update({
+    id: '/workspaces/$workspaceId/',
+    path: '/workspaces/$workspaceId/',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const WorkspacesWorkspaceIdSettingsRoute =
+  WorkspacesWorkspaceIdSettingsRouteImport.update({
+    id: '/workspaces/$workspaceId/settings',
+    path: '/workspaces/$workspaceId/settings',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const WorkspacesWorkspaceIdRequestsRequestIdRoute =
+  WorkspacesWorkspaceIdRequestsRequestIdRouteImport.update({
+    id: '/workspaces/$workspaceId/requests/$requestId',
+    path: '/workspaces/$workspaceId/requests/$requestId',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/workspaces/': typeof WorkspacesIndexRoute
+  '/workspaces/$workspaceId/settings': typeof WorkspacesWorkspaceIdSettingsRoute
+  '/workspaces/$workspaceId/': typeof WorkspacesWorkspaceIdIndexRoute
+  '/workspaces/$workspaceId/requests/$requestId': typeof WorkspacesWorkspaceIdRequestsRequestIdRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/workspaces': typeof WorkspacesIndexRoute
+  '/workspaces/$workspaceId/settings': typeof WorkspacesWorkspaceIdSettingsRoute
+  '/workspaces/$workspaceId': typeof WorkspacesWorkspaceIdIndexRoute
+  '/workspaces/$workspaceId/requests/$requestId': typeof WorkspacesWorkspaceIdRequestsRequestIdRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/workspaces/': typeof WorkspacesIndexRoute
+  '/workspaces/$workspaceId/settings': typeof WorkspacesWorkspaceIdSettingsRoute
+  '/workspaces/$workspaceId/': typeof WorkspacesWorkspaceIdIndexRoute
+  '/workspaces/$workspaceId/requests/$requestId': typeof WorkspacesWorkspaceIdRequestsRequestIdRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/workspaces/'
+    | '/workspaces/$workspaceId/settings'
+    | '/workspaces/$workspaceId/'
+    | '/workspaces/$workspaceId/requests/$requestId'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/workspaces'
+    | '/workspaces/$workspaceId/settings'
+    | '/workspaces/$workspaceId'
+    | '/workspaces/$workspaceId/requests/$requestId'
+  id:
+    | '__root__'
+    | '/'
+    | '/workspaces/'
+    | '/workspaces/$workspaceId/settings'
+    | '/workspaces/$workspaceId/'
+    | '/workspaces/$workspaceId/requests/$requestId'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  WorkspacesIndexRoute: typeof WorkspacesIndexRoute
+  WorkspacesWorkspaceIdSettingsRoute: typeof WorkspacesWorkspaceIdSettingsRoute
+  WorkspacesWorkspaceIdIndexRoute: typeof WorkspacesWorkspaceIdIndexRoute
+  WorkspacesWorkspaceIdRequestsRequestIdRoute: typeof WorkspacesWorkspaceIdRequestsRequestIdRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/workspaces/': {
+      id: '/workspaces/'
+      path: '/workspaces'
+      fullPath: '/workspaces/'
+      preLoaderRoute: typeof WorkspacesIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/workspaces/$workspaceId/': {
+      id: '/workspaces/$workspaceId/'
+      path: '/workspaces/$workspaceId'
+      fullPath: '/workspaces/$workspaceId/'
+      preLoaderRoute: typeof WorkspacesWorkspaceIdIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/workspaces/$workspaceId/settings': {
+      id: '/workspaces/$workspaceId/settings'
+      path: '/workspaces/$workspaceId/settings'
+      fullPath: '/workspaces/$workspaceId/settings'
+      preLoaderRoute: typeof WorkspacesWorkspaceIdSettingsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/workspaces/$workspaceId/requests/$requestId': {
+      id: '/workspaces/$workspaceId/requests/$requestId'
+      path: '/workspaces/$workspaceId/requests/$requestId'
+      fullPath: '/workspaces/$workspaceId/requests/$requestId'
+      preLoaderRoute: typeof WorkspacesWorkspaceIdRequestsRequestIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  WorkspacesIndexRoute: WorkspacesIndexRoute,
+  WorkspacesWorkspaceIdSettingsRoute: WorkspacesWorkspaceIdSettingsRoute,
+  WorkspacesWorkspaceIdIndexRoute: WorkspacesWorkspaceIdIndexRoute,
+  WorkspacesWorkspaceIdRequestsRequestIdRoute:
+    WorkspacesWorkspaceIdRequestsRequestIdRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
diff --git a/apps/yaak-client/routes/__root.tsx b/apps/yaak-client/routes/__root.tsx
new file mode 100644
index 0000000..14ad222
--- /dev/null
+++ b/apps/yaak-client/routes/__root.tsx
@@ -0,0 +1,54 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { platform } from "@yaakapp-internal/platform";
+import classNames from "classnames";
+import { Provider as JotaiProvider } from "jotai";
+import { LazyMotion, MotionConfig } from "motion/react";
+import { lazy, Suspense } from "react";
+import { GlobalHooks } from "../components/GlobalHooks";
+import RouteError from "../components/RouteError";
+import { jotaiStore } from "../lib/jotai";
+import { queryClient } from "../lib/queryClient";
+
+const Toasts = lazy(() => import("../components/Toasts").then((m) => ({ default: m.Toasts })));
+const Dialogs = lazy(() => import("../components/Dialogs").then((m) => ({ default: m.Dialogs })));
+const ContextMenus = lazy(() =>
+  import("../components/ContextMenus").then((m) => ({ default: m.ContextMenus })),
+);
+
+export const Route = createRootRoute({
+  component: RouteComponent,
+  errorComponent: RouteError,
+});
+
+const motionFeatures = () => import("framer-motion").then((mod) => mod.domAnimation);
+
+function RouteComponent() {
+  return (
+    <JotaiProvider store={jotaiStore}>
+      <QueryClientProvider client={queryClient}>
+        <LazyMotion strict features={motionFeatures}>
+          <MotionConfig transition={{ duration: 0.1 }}>
+            <Suspense>
+              <Toasts />
+              <Dialogs />
+              <ContextMenus />
+            </Suspense>
+            <Layout />
+            <GlobalHooks />
+          </MotionConfig>
+        </LazyMotion>
+      </QueryClientProvider>
+    </JotaiProvider>
+  );
+}
+
+function Layout() {
+  return (
+    <div
+      className={classNames("w-full h-full", platform.osType() === "linux" && "border border-border-subtle")}
+    >
+      <Outlet />
+    </div>
+  );
+}
diff --git a/apps/yaak-client/routes/index.tsx b/apps/yaak-client/routes/index.tsx
new file mode 100644
index 0000000..2fbb315
--- /dev/null
+++ b/apps/yaak-client/routes/index.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Onboarding } from "../components/Onboarding";
+import { RedirectToLatestWorkspace } from "../components/RedirectToLatestWorkspace";
+
+type IndexSearchSchema = {
+  /** Show the home screen even when workspaces exist. Set by the dev menu. */
+  home?: true;
+};
+
+export const Route = createFileRoute("/")({
+  component: RouteComponent,
+  validateSearch: (search: Record<string, unknown>): IndexSearchSchema =>
+    search.home === true ? { home: true } : {},
+});
+
+function RouteComponent() {
+  const { home } = Route.useSearch();
+  return home ? <Onboarding /> : <RedirectToLatestWorkspace />;
+}
diff --git a/apps/yaak-client/routes/workspaces/$workspaceId/index.tsx b/apps/yaak-client/routes/workspaces/$workspaceId/index.tsx
new file mode 100644
index 0000000..aafe3f0
--- /dev/null
+++ b/apps/yaak-client/routes/workspaces/$workspaceId/index.tsx
@@ -0,0 +1,40 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Workspace } from "../../../components/Workspace";
+
+type WorkspaceSearchSchema = {
+  environment_id?: string | null;
+  cookie_jar_id?: string | null;
+} & (
+  | {
+      request_id: string;
+    }
+  | {
+      folder_id: string;
+    }
+  // oxlint-disable-next-line no-restricted-types -- Needed to support empty
+  | {}
+);
+
+export const Route = createFileRoute("/workspaces/$workspaceId/")({
+  component: RouteComponent,
+  validateSearch: (search: Record<string, unknown>): WorkspaceSearchSchema => {
+    const base: Pick<WorkspaceSearchSchema, "environment_id" | "cookie_jar_id"> = {
+      environment_id: search.environment_id as string,
+      cookie_jar_id: search.cookie_jar_id as string,
+    };
+
+    const requestId = search.request_id as string | undefined;
+    const folderId = search.folder_id as string | undefined;
+    if (requestId != null) {
+      return { ...base, request_id: requestId };
+    }
+    if (folderId) {
+      return { ...base, folder_id: folderId };
+    }
+    return base;
+  },
+});
+
+function RouteComponent() {
+  return <Workspace />;
+}
diff --git a/apps/yaak-client/routes/workspaces/$workspaceId/requests/$requestId.tsx b/apps/yaak-client/routes/workspaces/$workspaceId/requests/$requestId.tsx
new file mode 100644
index 0000000..aadd4a1
--- /dev/null
+++ b/apps/yaak-client/routes/workspaces/$workspaceId/requests/$requestId.tsx
@@ -0,0 +1,23 @@
+import { createFileRoute, Navigate, useParams } from "@tanstack/react-router";
+
+// -----------------------------------------------------------------------------------
+// IMPORTANT: This is a deprecated route. Since the active request is optional, it was
+//   moved from a path param to a query parameter. This route does a redirect to the
+//   parent, while preserving the active request.
+
+export const Route = createFileRoute("/workspaces/$workspaceId/requests/$requestId")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { workspaceId, requestId } = useParams({
+    from: "/workspaces/$workspaceId/requests/$requestId",
+  });
+  return (
+    <Navigate
+      to="/workspaces/$workspaceId"
+      params={{ workspaceId }}
+      search={(prev) => ({ ...prev, requestId })}
+    />
+  );
+}
diff --git a/apps/yaak-client/routes/workspaces/$workspaceId/settings.tsx b/apps/yaak-client/routes/workspaces/$workspaceId/settings.tsx
new file mode 100644
index 0000000..0b3ab6d
--- /dev/null
+++ b/apps/yaak-client/routes/workspaces/$workspaceId/settings.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+import type { SettingsTab } from "../../../components/Settings/Settings";
+import Settings from "../../../components/Settings/Settings";
+
+interface SettingsSearchSchema {
+  tab?: SettingsTab;
+}
+
+export const Route = createFileRoute("/workspaces/$workspaceId/settings")({
+  component: RouteComponent,
+  validateSearch: (search: Record<string, unknown>): SettingsSearchSchema => ({
+    tab: (search.tab ?? "general") as SettingsTab,
+  }),
+});
+
+function RouteComponent() {
+  const { tab } = Route.useSearch();
+  return <Settings tab={tab} />;
+}
diff --git a/apps/yaak-client/routes/workspaces/index.tsx b/apps/yaak-client/routes/workspaces/index.tsx
new file mode 100644
index 0000000..20b1391
--- /dev/null
+++ b/apps/yaak-client/routes/workspaces/index.tsx
@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { RedirectToLatestWorkspace } from "../../components/RedirectToLatestWorkspace";
+
+export const Route = createFileRoute("/workspaces/")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <RedirectToLatestWorkspace />;
+}
diff --git a/apps/yaak-client/theme.ts b/apps/yaak-client/theme.ts
new file mode 100644
index 0000000..4803b2f
--- /dev/null
+++ b/apps/yaak-client/theme.ts
@@ -0,0 +1,81 @@
+import { platform } from "@yaakapp-internal/platform";
+import { setWindowTheme } from "@yaakapp-internal/mac-window";
+import type { ModelPayload } from "@yaakapp-internal/models";
+import type { Appearance } from "@yaakapp-internal/theme";
+import {
+  applyThemeToDocument,
+  getCSSAppearance,
+  getSystemAppearance,
+  getWindowAppearance,
+  subscribeToPreferredAppearanceChange,
+} from "@yaakapp-internal/theme";
+import { getSettings } from "./lib/settings";
+import { getResolvedTheme } from "./lib/themes";
+
+// NOTE: The appearance the OS prefers (never the one the settings force). The backend
+//  injects it on macOS and Linux; the CSS guess is only a fallback until the async
+//  window value arrives below.
+let preferredAppearance: Appearance = getSystemAppearance() ?? getCSSAppearance();
+let configureThemeGeneration = 0;
+let windowShown = false;
+
+configureThemeAndShow().catch((err) => console.log("Failed to configure theme", err));
+
+if (getSystemAppearance() == null) {
+  // The initial appearance is only a guess, so confirm it with the window once it's available
+  getWindowAppearance()
+    .then(async (a) => {
+      if (a === preferredAppearance) return;
+      preferredAppearance = a;
+      await configureThemeAndShow();
+    })
+    .catch((err) => console.log("Failed to get window appearance", err));
+}
+
+subscribeToPreferredAppearanceChange(async (a) => {
+  preferredAppearance = a;
+  await configureThemeAndShow();
+});
+
+async function configureThemeAndShow() {
+  const applied = await configureTheme();
+  if (applied && !windowShown) {
+    windowShown = true;
+    // To prevent theme flashing, the backend hides new windows by default, so we
+    // need to show it here, after configuring the theme for the first time.
+    await platform.window.show();
+  }
+}
+
+// Listen for settings changes, the re-compute theme
+platform.listen<ModelPayload[]>("model_writes", async (payloads) => {
+  const relevant = payloads.some(
+    (p) =>
+      p.change.type === "upsert" &&
+      (p.model.model === "settings" || p.model.model === "plugin"),
+  );
+  if (!relevant) return;
+  await configureThemeAndShow();
+});
+
+async function configureTheme(): Promise<boolean> {
+  const generation = ++configureThemeGeneration;
+  const settings = await getSettings();
+  const theme = await getResolvedTheme(
+    preferredAppearance,
+    settings.appearance,
+    settings.themeLight,
+    settings.themeDark,
+  );
+
+  if (generation !== configureThemeGeneration) {
+    return false;
+  }
+
+  applyThemeToDocument(theme.active);
+  if (theme.active.base.surface != null) {
+    setWindowTheme(theme.active.base.surface);
+  }
+
+  return true;
+}
diff --git a/apps/yaak-client/tsconfig.json b/apps/yaak-client/tsconfig.json
new file mode 100644
index 0000000..d1ff9c6
--- /dev/null
+++ b/apps/yaak-client/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "useDefineForClassFields": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@yaakapp-internal/theme": ["../../packages/theme/src/index.ts"],
+      "@yaakapp-internal/theme/*": ["../../packages/theme/src/*"],
+      "@yaakapp-internal/ui": ["../../packages/ui/src/index.ts"],
+      "@yaakapp-internal/ui/*": ["../../packages/ui/src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["vite.config.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/apps/yaak-client/tsconfig.node.json b/apps/yaak-client/tsconfig.node.json
new file mode 100644
index 0000000..4c74079
--- /dev/null
+++ b/apps/yaak-client/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/apps/yaak-client/tsr.config.json b/apps/yaak-client/tsr.config.json
new file mode 100644
index 0000000..8c43a24
--- /dev/null
+++ b/apps/yaak-client/tsr.config.json
@@ -0,0 +1,3 @@
+{
+  "autoCodeSplitting": false
+}
diff --git a/apps/yaak-client/vite-env.d.ts b/apps/yaak-client/vite-env.d.ts
new file mode 100644
index 0000000..bc2d8a3
--- /dev/null
+++ b/apps/yaak-client/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite-plus/client" />
diff --git a/apps/yaak-client/vite.config.ts b/apps/yaak-client/vite.config.ts
new file mode 100644
index 0000000..40e18e6
--- /dev/null
+++ b/apps/yaak-client/vite.config.ts
@@ -0,0 +1,226 @@
+// @ts-ignore
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
+import fs from "node:fs";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { defineConfig, normalizePath } from "vite-plus";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+import wasm from "vite-plugin-wasm";
+
+const require = createRequire(import.meta.url);
+const cMapsDir = normalizePath(
+  path.join(path.dirname(require.resolve("pdfjs-dist/package.json")), "cmaps"),
+);
+const standardFontsDir = normalizePath(
+  path.join(path.dirname(require.resolve("pdfjs-dist/package.json")), "standard_fonts"),
+);
+
+// The app's own icons, served as the page icon rather than copied into the client:
+// the bundled app and the tab should not be able to disagree about what Yaak looks like.
+const iconsDir = normalizePath(
+  path.join(import.meta.dirname, "../../crates-tauri/yaak-app-client/icons/release"),
+);
+
+/**
+ * Which host the platform package installs. `web` builds Yaak to run in a plain
+ * browser tab, with its own IndexedDB store instead of the Rust engine; anything
+ * else builds the desktop app exactly as before.
+ */
+const yaakTarget = process.env.YAAK_TARGET === "web" ? "web" : "desktop";
+
+const webUrl = "https://web.yaak.app";
+const webDir = normalizePath(path.join(import.meta.dirname, "web"));
+
+/** Link previews for the hosted web app. Meaningless inside the desktop window. */
+function webHead() {
+  return {
+    name: "web-head",
+    transformIndexHtml() {
+      const title = "Yaak in your browser";
+      const description = "No download, no setup. Open a tab and send your first request.";
+      return [
+        { tag: "meta", attrs: { name: "description", content: description } },
+        { tag: "meta", attrs: { property: "og:type", content: "website" } },
+        { tag: "meta", attrs: { property: "og:url", content: webUrl } },
+        { tag: "meta", attrs: { property: "og:title", content: title } },
+        { tag: "meta", attrs: { property: "og:description", content: description } },
+        { tag: "meta", attrs: { property: "og:image", content: `${webUrl}/og.png` } },
+        { tag: "meta", attrs: { property: "og:image:width", content: "1200" } },
+        { tag: "meta", attrs: { property: "og:image:height", content: "630" } },
+        { tag: "meta", attrs: { name: "twitter:card", content: "summary_large_image" } },
+        { tag: "meta", attrs: { name: "twitter:site", content: "@yaakapp" } },
+        { tag: "meta", attrs: { name: "twitter:title", content: title } },
+        { tag: "meta", attrs: { name: "twitter:description", content: description } },
+        { tag: "meta", attrs: { name: "twitter:image", content: `${webUrl}/og.png` } },
+      ];
+    },
+  };
+}
+
+/**
+ * Where `yaak-web` is listening, taken from the same variables that put it there.
+ *
+ * `HOST` is an instruction about what the server accepts rather than an address to
+ * dial, so a wildcard becomes loopback: the dev server and the send server share a
+ * machine.
+ */
+function sendServerUrl(): string {
+  const host = process.env.HOST?.trim();
+  const port = process.env.PORT?.trim() || "9227";
+  const wildcard = !host || host === "0.0.0.0" || host === "::" || host === "[::]";
+  return `http://${wildcard ? "127.0.0.1" : host}:${port}`;
+}
+
+/**
+ * Fails the build when a copied asset is not where the app fetches it from.
+ *
+ * `PdfViewer` and the page head address these by URL, but nothing ties those
+ * URLs to the copy targets below, and a target that mirrors its source path
+ * instead of landing at the root still builds cleanly — the miss only shows up
+ * as a 404 once the app runs.
+ */
+function verifyServedAssets(expected: string[]) {
+  let outDir = "";
+  return {
+    name: "verify-served-assets",
+    apply: "build" as const,
+    configResolved(config: { root: string; build: { outDir: string } }) {
+      outDir = path.resolve(config.root, config.build.outDir);
+    },
+    // After viteStaticCopy, which writes on `writeBundle`.
+    closeBundle() {
+      const missing = expected.filter((asset) => {
+        const full = path.join(outDir, asset);
+        if (!fs.existsSync(full)) return true;
+        const stat = fs.statSync(full);
+        return stat.isDirectory() && fs.readdirSync(full).length === 0;
+      });
+      if (missing.length > 0) {
+        throw new Error(
+          `Copied assets missing from ${outDir}: ${missing.join(", ")}. ` +
+            `Every viteStaticCopy target needs to strip its base path, or it lands ` +
+            `under a copy of the directories it came from instead.`,
+        );
+      }
+    },
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig(async () => {
+  return {
+    resolve: {
+      alias:
+        yaakTarget === "web"
+          ? {
+              // Resolve the platform package to its browser entry, so a web
+              // build never pulls `@tauri-apps/*` into the graph at all. A
+              // build-time branch inside the package would not manage that:
+              // the dead branch folds away, but the imports it guarded stay.
+              "@yaakapp-internal/platform": path.resolve(
+                import.meta.dirname,
+                "../../packages/platform/src/index.web.ts",
+              ),
+            }
+          : {},
+    },
+    // The browser host runs the model layer in a worker; that bundle needs the
+    // same wasm handling as the main one. Top-level await needs no transform
+    // because the build targets esnext.
+    worker: {
+      format: "es" as const,
+      plugins: () => [wasm()],
+    },
+    plugins: [
+      wasm(),
+      tanstackRouter({
+        target: "react",
+        routesDirectory: "./routes",
+        generatedRouteTree: "./routeTree.gen.ts",
+        autoCodeSplitting: true,
+      }),
+      react(),
+      viteStaticCopy({
+        // v4 matches only files and always mirrors the source tree into the
+        // output, so every target here needs stripBase to land where it is
+        // actually served from — without it these end up under a copy of the
+        // path they came from, and nothing fails until the request 404s.
+        targets: [
+          { src: `${cMapsDir}/*`, dest: "cmaps", rename: { stripBase: true } },
+          {
+            src: `${standardFontsDir}/*`,
+            dest: "standard_fonts",
+            rename: { stripBase: true },
+          },
+          // `/favicon.ico` is requested by browsers whether or not anything links to it,
+          // so it is served under that name to keep a 404 out of every console.
+          {
+            src: `${iconsDir}/icon.ico`,
+            dest: "",
+            rename: { name: "favicon.ico", stripBase: true },
+          },
+          {
+            src: `${iconsDir}/128x128.png`,
+            dest: "",
+            rename: { name: "icon-128.png", stripBase: true },
+          },
+          ...(yaakTarget === "web"
+            ? [{ src: `${webDir}/og.png`, dest: "", rename: { stripBase: true } }]
+            : []),
+        ],
+      }),
+      ...(yaakTarget === "web" ? [webHead()] : []),
+      verifyServedAssets([
+        "cmaps",
+        "standard_fonts",
+        "favicon.ico",
+        "icon-128.png",
+        ...(yaakTarget === "web" ? ["og.png"] : []),
+      ]),
+    ],
+    build: {
+      target: "esnext",
+      sourcemap: true,
+      outDir: "../../dist/apps/yaak-client",
+      emptyOutDir: true,
+      rolldownOptions: {
+        output: {
+          // Make chunk names readable
+          chunkFileNames: "assets/chunk-[name]-[hash].js",
+          entryFileNames: "assets/entry-[name]-[hash].js",
+          assetFileNames: "assets/asset-[name]-[hash][extname]",
+          // Vite-Plus/Rolldown 0.1.20 can emit a stale style-mod export when
+          // top-level var rewriting combines with OXC minification.
+          topLevelVar: false,
+        },
+      },
+    },
+    clearScreen: false,
+    server: {
+      // `HOST` names the interface, as it does most places: unset leaves Vite on
+      // loopback, `0.0.0.0` exposes it for reaching the dev server from another
+      // device.
+      host: process.env.HOST,
+      // Vite refuses a `Host` it does not recognise, which stops a page on a name the
+      // attacker controls from rebinding that name here and driving `/v1` as its own
+      // origin. Addresses are allowed already; only names need listing, so reaching
+      // this as `dev-box.example` means naming it. Deliberately not widened to "any
+      // host when exposed": the proxy below leads to an unauthenticated sender.
+      allowedHosts: process.env.ALLOWED_HOSTS?.split(",")
+        .map((h) => h.trim())
+        .filter(Boolean),
+      port: parseInt(process.env.YAAK_CLIENT_DEV_PORT ?? process.env.YAAK_DEV_PORT ?? "1420", 10),
+      strictPort: true,
+      // A web dev server is one origin, the way the built app is: `/v1` is passed
+      // through to `yaak-web` rather than the tab being told to call it directly.
+      // That is one address to open instead of two, no CORS in the loop, and a
+      // dev build that sends exactly the way a production build does.
+      proxy:
+        yaakTarget === "web"
+          ? { "/v1": { target: sendServerUrl(), changeOrigin: true } }
+          : undefined,
+    },
+    envPrefix: ["VITE_", "TAURI_"],
+  };
+});
diff --git a/apps/yaak-client/web/og.html b/apps/yaak-client/web/og.html
new file mode 100644
index 0000000..cb78ddb
--- /dev/null
+++ b/apps/yaak-client/web/og.html
@@ -0,0 +1,129 @@
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;800&family=JetBrains+Mono:wght@400;500&display=block"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1200px;
+        height: 630px;
+        overflow: hidden;
+      }
+      body {
+        font-family: Inter, sans-serif;
+        color: hsl(245, 23%, 85%);
+        background:
+          radial-gradient(900px 600px at 0% 100%, hsl(160, 40%, 16%) 0%, transparent 60%),
+          radial-gradient(900px 600px at 100% 0%, hsl(275, 40%, 20%) 0%, transparent 60%),
+          linear-gradient(135deg, hsl(244, 23%, 12%) 0%, hsl(244, 23%, 15%) 100%);
+        -webkit-font-smoothing: antialiased;
+      }
+      .dots {
+        position: absolute;
+        inset: 0;
+        background-image: radial-gradient(hsla(245, 23%, 85%, 0.07) 1.2px, transparent 1.2px);
+        background-size: 28px 28px;
+        mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
+      }
+      .page {
+        position: relative;
+        height: 100%;
+        padding: 56px 64px;
+        display: flex;
+        flex-direction: column;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        font-weight: 600;
+        font-size: 26px;
+      }
+      .brand img {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+      }
+      h1 {
+        margin-top: 52px;
+        font-size: 84px;
+        line-height: 1.05;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: hsl(245, 23%, 92%);
+      }
+      h1 em {
+        font-style: normal;
+        color: hsl(48, 80%, 63%);
+      }
+      p {
+        margin-top: 28px;
+        font-size: 34px;
+        line-height: 1.4;
+        font-weight: 500;
+        color: hsl(245, 18%, 68%);
+        max-width: 1040px;
+      }
+      .bar {
+        margin-top: auto;
+        display: flex;
+        align-items: center;
+        gap: 22px;
+        height: 72px;
+        padding: 0 28px;
+        border-radius: 12px;
+        background: hsla(244, 23%, 22%, 0.6);
+        border: 1px solid hsl(244, 23%, 28%);
+        font-family: "JetBrains Mono", monospace;
+        font-size: 28px;
+        box-shadow: 0 10px 40px hsla(244, 40%, 5%, 0.4);
+      }
+      .method {
+        color: hsl(245, 18%, 62%);
+        font-weight: 500;
+      }
+      .url .scheme {
+        color: hsl(245, 18%, 55%);
+      }
+      .url .host {
+        color: hsl(245, 23%, 92%);
+      }
+      .status {
+        margin-left: auto;
+        color: hsl(150, 99%, 44%);
+        font-weight: 500;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="dots"></div>
+    <div class="page">
+      <div class="brand">
+        <img src="../../../crates-tauri/yaak-app-client/icons/release/128x128@2x.png" alt="" />
+        <span>Yaak</span>
+      </div>
+      <h1>Your favorite API client<br /><em>in your browser</em></h1>
+      <p>No download, no setup. Open a tab and send your first request.</p>
+      <div class="bar">
+        <span class="method">GET</span>
+        <span class="url"><span class="scheme">https://</span><span class="host">web.yaak.app</span></span>
+        <span class="status">200 OK</span>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/apps/yaak-proxy/components/ActionButton.tsx b/apps/yaak-proxy/components/ActionButton.tsx
new file mode 100644
index 0000000..e747ff9
--- /dev/null
+++ b/apps/yaak-proxy/components/ActionButton.tsx
@@ -0,0 +1,31 @@
+import type { ActionInvocation } from "@yaakapp-internal/proxy-lib";
+import { Button, type ButtonProps } from "@yaakapp-internal/ui";
+import { useCallback } from "react";
+import { useRpcMutation } from "../hooks/useRpcMutation";
+import { useActionMetadata } from "../hooks/useActionMetadata";
+
+type ActionButtonProps = Omit<ButtonProps, "onClick" | "children"> & {
+  action: ActionInvocation;
+  /** Override the label from metadata */
+  children?: React.ReactNode;
+};
+
+export function ActionButton({ action, children, ...props }: ActionButtonProps) {
+  const meta = useActionMetadata(action);
+  const { mutate, isPending } = useRpcMutation("execute_action");
+
+  const onClick = useCallback(() => {
+    mutate(action);
+  }, [action, mutate]);
+
+  return (
+    <Button
+      {...props}
+      disabled={props.disabled || isPending}
+      isLoading={isPending}
+      onClick={onClick}
+    >
+      {children ?? meta?.label ?? "…"}
+    </Button>
+  );
+}
diff --git a/apps/yaak-proxy/components/ActionIconButton.tsx b/apps/yaak-proxy/components/ActionIconButton.tsx
new file mode 100644
index 0000000..1c5b2f0
--- /dev/null
+++ b/apps/yaak-proxy/components/ActionIconButton.tsx
@@ -0,0 +1,29 @@
+import type { ActionInvocation } from "@yaakapp-internal/proxy-lib";
+import { IconButton, type IconButtonProps } from "@yaakapp-internal/ui";
+import { useCallback } from "react";
+import { useRpcMutation } from "../hooks/useRpcMutation";
+import { useActionMetadata } from "../hooks/useActionMetadata";
+
+type ActionIconButtonProps = Omit<IconButtonProps, "onClick" | "title"> & {
+  action: ActionInvocation;
+  title?: string;
+};
+
+export function ActionIconButton({ action, ...props }: ActionIconButtonProps) {
+  const meta = useActionMetadata(action);
+  const { mutate, isPending } = useRpcMutation("execute_action");
+
+  const onClick = useCallback(() => {
+    mutate(action);
+  }, [action, mutate]);
+
+  return (
+    <IconButton
+      {...props}
+      title={props.title ?? meta?.label ?? "…"}
+      disabled={props.disabled || isPending}
+      isLoading={isPending}
+      onClick={onClick}
+    />
+  );
+}
diff --git a/apps/yaak-proxy/components/ExchangesTable.tsx b/apps/yaak-proxy/components/ExchangesTable.tsx
new file mode 100644
index 0000000..d87d5d5
--- /dev/null
+++ b/apps/yaak-proxy/components/ExchangesTable.tsx
@@ -0,0 +1,77 @@
+import type { HttpExchange, ProxyHeader } from "@yaakapp-internal/proxy-lib";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  TruncatedWideTableCell,
+} from "@yaakapp-internal/ui";
+import classNames from "classnames";
+
+interface Props {
+  exchanges: HttpExchange[];
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export function ExchangesTable({ exchanges, style, className }: Props) {
+  if (exchanges.length === 0) {
+    return <p className="text-text-subtlest text-sm">No traffic yet</p>;
+  }
+
+  return (
+    <div className={className} style={style}>
+      <Table scrollable className="px-2">
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell>Method</TableHeaderCell>
+            <TableHeaderCell>URL</TableHeaderCell>
+            <TableHeaderCell>Status</TableHeaderCell>
+            <TableHeaderCell>Type</TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {exchanges.map((ex) => (
+            <TableRow key={ex.id}>
+              <TableCell className="font-mono text-2xs">{ex.method}</TableCell>
+              <TruncatedWideTableCell className="font-mono text-2xs">
+                {ex.url}
+              </TruncatedWideTableCell>
+              <TableCell>
+                <StatusBadge status={ex.resStatus} error={ex.error} />
+              </TableCell>
+              <TableCell className="text-text-subtle text-xs">
+                {getContentType(ex.resHeaders)}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+function StatusBadge({ status, error }: { status: number | null; error: string | null }) {
+  if (error) return <span className="text-xs text-danger">Error</span>;
+  if (status == null) return <span className="text-xs text-text-subtlest">—</span>;
+
+  const color =
+    status >= 500
+      ? "text-danger"
+      : status >= 400
+        ? "text-warning"
+        : status >= 300
+          ? "text-notice"
+          : "text-success";
+
+  return <span className={classNames("text-xs font-mono", color)}>{status}</span>;
+}
+
+function getContentType(headers: ProxyHeader[]): string {
+  const ct = headers.find((h) => h.name.toLowerCase() === "content-type")?.value;
+  if (ct == null) return "—";
+  // Strip parameters (e.g. "; charset=utf-8")
+  return ct.split(";")[0]?.trim() ?? ct;
+}
diff --git a/apps/yaak-proxy/components/ProxyLayout.tsx b/apps/yaak-proxy/components/ProxyLayout.tsx
new file mode 100644
index 0000000..9a8f5f8
--- /dev/null
+++ b/apps/yaak-proxy/components/ProxyLayout.tsx
@@ -0,0 +1,146 @@
+import { HeaderSize, IconButton, SidebarLayout, SplitLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { useState } from "react";
+import { useLocalStorage } from "react-use";
+import { useRpcQueryWithEvent } from "../hooks/useRpcQueryWithEvent";
+import { getOsType } from "../lib/tauri";
+import { ActionIconButton } from "./ActionIconButton";
+import { ExchangesTable } from "./ExchangesTable";
+import { filteredExchangesAtom, Sidebar } from "./Sidebar";
+
+export function ProxyLayout() {
+  const os = getOsType();
+  const exchanges = useAtomValue(filteredExchangesAtom);
+  const [sidebarWidth, setSidebarWidth] = useLocalStorage("sidebar_width", 250);
+  const [sidebarHidden, setSidebarHidden] = useLocalStorage("sidebar_hidden", false);
+  const [floatingSidebarHidden, setFloatingSidebarHidden] = useLocalStorage(
+    "floating_sidebar_hidden",
+    true,
+  );
+  const [floating, setFloating] = useState(false);
+  const { data: proxyState } = useRpcQueryWithEvent("get_proxy_state", {}, "proxy_state_changed");
+  const isRunning = proxyState?.state === "running";
+  const isHidden = floating ? (floatingSidebarHidden ?? true) : (sidebarHidden ?? false);
+
+  return (
+    <div
+      className={classNames(
+        "h-full w-full grid grid-rows-[auto_1fr]",
+        os === "linux" && "border border-border-subtle",
+      )}
+    >
+      <HeaderSize
+        data-tauri-drag-region
+        size="lg"
+        osType={os}
+        hideWindowControls={false}
+        useNativeTitlebar={false}
+        interfaceScale={1}
+        className="x-theme-appHeader bg-surface"
+      >
+        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center w-full h-full pointer-events-none">
+          <div className="flex items-center pl-1 pointer-events-auto">
+            <IconButton
+              size="sm"
+              title="Toggle sidebar"
+              icon={isHidden ? "left_panel_hidden" : "left_panel_visible"}
+              iconColor="secondary"
+              onClick={() => {
+                if (floating) {
+                  setFloatingSidebarHidden(!floatingSidebarHidden);
+                } else {
+                  setSidebarHidden(!sidebarHidden);
+                }
+              }}
+            />
+          </div>
+          <div
+            data-tauri-drag-region
+            className="pointer-events-none flex items-center text-sm px-2"
+          >
+            Yaak Proxy
+          </div>
+          <div className="flex items-center gap-1 pr-1 pointer-events-auto">
+            {isRunning ? (
+              <>
+                <span className="text-2xs text-success">Running :9090</span>
+                <ActionIconButton
+                  action={{ scope: "global", action: "proxy_stop" }}
+                  icon="circle_stop"
+                  iconColor="secondary"
+                  size="sm"
+                />
+              </>
+            ) : (
+              <ActionIconButton
+                action={{ scope: "global", action: "proxy_start" }}
+                icon="circle_play"
+                iconColor="secondary"
+                size="sm"
+              />
+            )}
+          </div>
+        </div>
+      </HeaderSize>
+      <SidebarLayout
+        width={sidebarWidth ?? 250}
+        onWidthChange={setSidebarWidth}
+        hidden={sidebarHidden ?? false}
+        onHiddenChange={setSidebarHidden}
+        floatingHidden={floatingSidebarHidden ?? true}
+        onFloatingHiddenChange={setFloatingSidebarHidden}
+        onFloatingChange={setFloating}
+        sidebar={
+          floating ? (
+            <div
+              className={classNames(
+                "x-theme-sidebar",
+                "h-full bg-surface border-r border-border-subtle",
+                "grid grid-rows-[auto_1fr]",
+              )}
+            >
+              <HeaderSize
+                hideControls
+                size="lg"
+                className="border-transparent pl-1"
+                osType={os}
+                hideWindowControls={false}
+                useNativeTitlebar={false}
+                interfaceScale={1}
+              >
+                <IconButton
+                  size="sm"
+                  title="Toggle sidebar"
+                  icon="left_panel_visible"
+                  iconColor="secondary"
+                  onClick={() => setFloatingSidebarHidden(true)}
+                />
+              </HeaderSize>
+              <Sidebar />
+            </div>
+          ) : (
+            <Sidebar />
+          )
+        }
+      >
+        <SplitLayout
+          storageKey="proxy_detail"
+          layout="vertical"
+          defaultRatio={0.4}
+          firstSlot={({ style }) => (
+            <ExchangesTable exchanges={exchanges} style={style} className="overflow-auto" />
+          )}
+          secondSlot={({ style }) => (
+            <div
+              style={style}
+              className="p-3 text-text-subtlest text-sm border-t border-border-subtle"
+            >
+              Select a request to view details
+            </div>
+          )}
+        />
+      </SidebarLayout>
+    </div>
+  );
+}
diff --git a/apps/yaak-proxy/components/Sidebar.tsx b/apps/yaak-proxy/components/Sidebar.tsx
new file mode 100644
index 0000000..74c19cf
--- /dev/null
+++ b/apps/yaak-proxy/components/Sidebar.tsx
@@ -0,0 +1,219 @@
+import type { HttpExchange } from "@yaakapp-internal/proxy-lib";
+import type { TreeNode } from "@yaakapp-internal/ui";
+import { selectedIdsFamily, Tree } from "@yaakapp-internal/ui";
+import { atom, useAtomValue } from "jotai";
+import { atomFamily } from "jotai-family";
+import { useCallback } from "react";
+import { httpExchangesAtom } from "../lib/store";
+
+/** A node in the sidebar tree — either a domain or a path segment. */
+export type SidebarItem = {
+  id: string;
+  label: string;
+  exchangeIds: string[];
+};
+
+const collapsedAtom = atomFamily((_treeId: string) => atom<Record<string, boolean>>({}));
+
+export const SIDEBAR_TREE_ID = "proxy-sidebar";
+
+const sidebarTreeAtom = atom<TreeNode<SidebarItem>>((get) => {
+  const exchanges = get(httpExchangesAtom);
+  return buildTree(exchanges);
+});
+
+/** Exchanges filtered by the currently selected sidebar node(s). */
+export const filteredExchangesAtom = atom((get) => {
+  const exchanges = get(httpExchangesAtom);
+  const tree = get(sidebarTreeAtom);
+  const selectedIds = get(selectedIdsFamily(SIDEBAR_TREE_ID));
+
+  // Nothing selected or root selected → show all
+  if (selectedIds.length === 0 || selectedIds.includes("root")) {
+    return exchanges;
+  }
+
+  // Collect exchange IDs from all selected nodes
+  const allowedIds = new Set<string>();
+  const nodeMap = new Map<string, SidebarItem>();
+  collectNodes(tree, nodeMap);
+
+  for (const selectedId of selectedIds) {
+    const node = nodeMap.get(selectedId);
+    if (node) {
+      for (const id of node.exchangeIds) {
+        allowedIds.add(id);
+      }
+    }
+  }
+
+  return exchanges.filter((ex) => allowedIds.has(ex.id));
+});
+
+function collectNodes(node: TreeNode<SidebarItem>, map: Map<string, SidebarItem>) {
+  map.set(node.item.id, node.item);
+  for (const child of node.children ?? []) {
+    collectNodes(child, map);
+  }
+}
+
+/**
+ * Build a domain → path-segment trie from a flat list of exchanges.
+ *
+ * Example: Given URLs
+ *   GET https://api.example.com/v1/users
+ *   GET https://api.example.com/v1/users/123
+ *   POST https://api.example.com/v1/orders
+ *
+ * Produces:
+ *   api.example.com
+ *     /v1
+ *       /users
+ *         /123
+ *       /orders
+ */
+function buildTree(exchanges: HttpExchange[]): TreeNode<SidebarItem> {
+  const root: SidebarItem = { id: "root", label: "All Traffic", exchangeIds: [] };
+  const rootNode: TreeNode<SidebarItem> = {
+    item: root,
+    parent: null,
+    depth: 0,
+    children: [],
+    draggable: false,
+  };
+
+  // Intermediate trie structure for building
+  type TrieNode = {
+    id: string;
+    label: string;
+    exchangeIds: string[];
+    children: Map<string, TrieNode>;
+  };
+
+  const domainMap = new Map<string, TrieNode>();
+
+  for (const ex of exchanges) {
+    let hostname: string;
+    let segments: string[];
+    try {
+      const url = new URL(ex.url);
+      hostname = url.host;
+      segments = url.pathname.split("/").filter(Boolean);
+    } catch {
+      hostname = ex.url;
+      segments = [];
+    }
+
+    // Get or create domain node
+    let domainNode = domainMap.get(hostname);
+    if (!domainNode) {
+      domainNode = {
+        id: `domain:${hostname}`,
+        label: hostname,
+        exchangeIds: [],
+        children: new Map(),
+      };
+      domainMap.set(hostname, domainNode);
+    }
+    domainNode.exchangeIds.push(ex.id);
+
+    // Walk path segments
+    let current = domainNode;
+    const pathSoFar: string[] = [];
+    for (const seg of segments) {
+      pathSoFar.push(seg);
+      let child = current.children.get(seg);
+      if (!child) {
+        child = {
+          id: `path:${hostname}/${pathSoFar.join("/")}`,
+          label: `/${seg}`,
+          exchangeIds: [],
+          children: new Map(),
+        };
+        current.children.set(seg, child);
+      }
+      child.exchangeIds.push(ex.id);
+      current = child;
+    }
+  }
+
+  // Convert trie to TreeNode structure
+  function toTreeNode(
+    trie: TrieNode,
+    parent: TreeNode<SidebarItem>,
+    depth: number,
+  ): TreeNode<SidebarItem> {
+    const node: TreeNode<SidebarItem> = {
+      item: {
+        id: trie.id,
+        label: trie.label,
+        exchangeIds: trie.exchangeIds,
+      },
+      parent,
+      depth,
+      children: [],
+      draggable: false,
+    };
+    const sortedChildren = [...trie.children.values()].sort((a, b) =>
+      a.label.localeCompare(b.label),
+    );
+    for (const child of sortedChildren) {
+      node.children?.push(toTreeNode(child, node, depth + 1));
+    }
+    return node;
+  }
+
+  // Add a "Domains" folder between root and domain nodes
+  const allExchangeIds = exchanges.map((ex) => ex.id);
+  const domainsFolder: TreeNode<SidebarItem> = {
+    item: { id: "domains", label: "Domains", exchangeIds: allExchangeIds },
+    parent: rootNode,
+    depth: 1,
+    children: [],
+    draggable: false,
+  };
+
+  const sortedDomains = [...domainMap.values()].sort((a, b) => a.label.localeCompare(b.label));
+  for (const domain of sortedDomains) {
+    domainsFolder.children?.push(toTreeNode(domain, domainsFolder, 2));
+  }
+
+  rootNode.children?.push(domainsFolder);
+
+  return rootNode;
+}
+
+function ItemInner({ item }: { item: SidebarItem }) {
+  const count = item.exchangeIds.length;
+  return (
+    <div className="flex items-center gap-2 w-full min-w-0">
+      <span className="truncate">{item.label}</span>
+      {count > 0 && <span className="ml-auto text-text-subtlest text-2xs shrink-0">{count}</span>}
+    </div>
+  );
+}
+
+export function Sidebar() {
+  const tree = useAtomValue(sidebarTreeAtom);
+  const treeId = SIDEBAR_TREE_ID;
+
+  const getItemKey = useCallback(
+    (item: SidebarItem) => `${item.id}:${item.exchangeIds.length}`,
+    [],
+  );
+
+  return (
+    <aside className="x-theme-sidebar bg-surface h-full w-full min-w-0 overflow-y-auto border-r border-border-subtle">
+      <div className="pt-2 text-xs">
+        <Tree
+          treeId={treeId}
+          collapsedAtom={collapsedAtom(treeId)}
+          className="px-2 pb-10"
+          root={tree}
+          getItemKey={getItemKey}
+          ItemInner={ItemInner}
+        />
+      </div>
+    </aside>
+  );
+}
diff --git a/apps/yaak-proxy/font-size.ts b/apps/yaak-proxy/font-size.ts
new file mode 100644
index 0000000..9dea0ed
--- /dev/null
+++ b/apps/yaak-proxy/font-size.ts
@@ -0,0 +1,2 @@
+// Hardcode font size for now. In the future, this could be configurable.
+document.documentElement.style.fontSize = "15px";
diff --git a/apps/yaak-proxy/hooks/useActionMetadata.ts b/apps/yaak-proxy/hooks/useActionMetadata.ts
new file mode 100644
index 0000000..672472a
--- /dev/null
+++ b/apps/yaak-proxy/hooks/useActionMetadata.ts
@@ -0,0 +1,32 @@
+import type { ActionInvocation, ActionMetadata } from "@yaakapp-internal/proxy-lib";
+import { useEffect, useState } from "react";
+import { rpc } from "../lib/rpc";
+
+/** Look up metadata for a specific action invocation. */
+// oxlint-disable-next-line no-redundant-type-constituents -- ActionMetadata resolves at runtime
+export function useActionMetadata(action: ActionInvocation): ActionMetadata | null {
+  // oxlint-disable-next-line no-redundant-type-constituents -- ActionMetadata resolves at runtime
+  const [meta, setMeta] = useState<ActionMetadata | null>(null);
+
+  useEffect(() => {
+    void getActions().then((actions) => {
+      const match = actions.find(
+        ([inv]) => inv.scope === action.scope && inv.action === action.action,
+      );
+      setMeta(match?.[1] ?? null);
+    });
+  }, [action]);
+
+  return meta;
+}
+
+let cachedActions: [ActionInvocation, ActionMetadata][] | null = null;
+
+/** Fetch and cache all action metadata. */
+async function getActions(): Promise<[ActionInvocation, ActionMetadata][]> {
+  if (!cachedActions) {
+    const { actions } = await rpc("list_actions", {});
+    cachedActions = actions;
+  }
+  return cachedActions;
+}
diff --git a/apps/yaak-proxy/hooks/useRpcEvent.ts b/apps/yaak-proxy/hooks/useRpcEvent.ts
new file mode 100644
index 0000000..2c0759d
--- /dev/null
+++ b/apps/yaak-proxy/hooks/useRpcEvent.ts
@@ -0,0 +1,15 @@
+import type { RpcEventSchema } from "@yaakapp-internal/proxy-lib";
+import { useEffect } from "react";
+import { listen } from "../lib/rpc";
+
+/**
+ * Subscribe to an RPC event. Cleans up automatically on unmount.
+ */
+export function useRpcEvent<K extends keyof RpcEventSchema>(
+  event: K & string,
+  callback: (payload: RpcEventSchema[K]) => void,
+) {
+  useEffect(() => {
+    return listen(event, callback);
+  }, [event, callback]);
+}
diff --git a/apps/yaak-proxy/hooks/useRpcMutation.ts b/apps/yaak-proxy/hooks/useRpcMutation.ts
new file mode 100644
index 0000000..f6d4229
--- /dev/null
+++ b/apps/yaak-proxy/hooks/useRpcMutation.ts
@@ -0,0 +1,18 @@
+import { type UseMutationOptions, useMutation } from "@tanstack/react-query";
+import type { RpcSchema } from "@yaakapp-internal/proxy-lib";
+import { minPromiseMillis } from "@yaakapp-internal/ui";
+import type { Req, Res } from "../lib/rpc";
+import { rpc } from "../lib/rpc";
+
+/**
+ * React Query mutation wrapper for RPC commands.
+ */
+export function useRpcMutation<K extends keyof RpcSchema>(
+  cmd: K,
+  opts?: Omit<UseMutationOptions<Res<K>, Error, Req<K>>, "mutationFn">,
+) {
+  return useMutation<Res<K>, Error, Req<K>>({
+    mutationFn: (payload) => minPromiseMillis(rpc(cmd, payload)),
+    ...opts,
+  });
+}
diff --git a/apps/yaak-proxy/hooks/useRpcQuery.ts b/apps/yaak-proxy/hooks/useRpcQuery.ts
new file mode 100644
index 0000000..bbea9b7
--- /dev/null
+++ b/apps/yaak-proxy/hooks/useRpcQuery.ts
@@ -0,0 +1,20 @@
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { RpcSchema } from "@yaakapp-internal/proxy-lib";
+import type { Req, Res } from "../lib/rpc";
+import { rpc } from "../lib/rpc";
+
+/**
+ * React Query wrapper for RPC commands.
+ * Automatically caches by [cmd, payload] and supports all useQuery options.
+ */
+export function useRpcQuery<K extends keyof RpcSchema>(
+  cmd: K,
+  payload: Req<K>,
+  opts?: Omit<UseQueryOptions<Res<K>>, "queryKey" | "queryFn">,
+) {
+  return useQuery<Res<K>>({
+    queryKey: [cmd, payload],
+    queryFn: () => rpc(cmd, payload),
+    ...opts,
+  });
+}
diff --git a/apps/yaak-proxy/hooks/useRpcQueryWithEvent.ts b/apps/yaak-proxy/hooks/useRpcQueryWithEvent.ts
new file mode 100644
index 0000000..10d4143
--- /dev/null
+++ b/apps/yaak-proxy/hooks/useRpcQueryWithEvent.ts
@@ -0,0 +1,23 @@
+import { type UseQueryOptions, useQueryClient } from "@tanstack/react-query";
+import type { RpcEventSchema, RpcSchema } from "@yaakapp-internal/proxy-lib";
+import type { Req, Res } from "../lib/rpc";
+import { useRpcEvent } from "./useRpcEvent";
+import { useRpcQuery } from "./useRpcQuery";
+
+/**
+ * Combines useRpcQuery with an event listener that invalidates the query
+ * whenever the specified event fires, keeping data fresh automatically.
+ */
+export function useRpcQueryWithEvent<
+  K extends keyof RpcSchema,
+  E extends keyof RpcEventSchema,
+>(cmd: K, payload: Req<K>, event: E, opts?: Omit<UseQueryOptions<Res<K>>, "queryKey" | "queryFn">) {
+  const queryClient = useQueryClient();
+  const query = useRpcQuery(cmd, payload, opts);
+
+  useRpcEvent(event, () => {
+    void queryClient.invalidateQueries({ queryKey: [cmd, payload] });
+  });
+
+  return query;
+}
diff --git a/apps/yaak-proxy/index.html b/apps/yaak-proxy/index.html
new file mode 100644
index 0000000..60d8590
--- /dev/null
+++ b/apps/yaak-proxy/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Yaak Proxy</title>
+
+    <style>
+      html,
+      body {
+        background-color: white;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        html,
+        body {
+          background-color: #1b1a29;
+        }
+      }
+    </style>
+  </head>
+  <body class="text-base">
+    <div id="root"></div>
+    <script type="module" src="/font-size.ts"></script>
+    <script type="module" src="/lib/theme.ts"></script>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/yaak-proxy/lib/fireAndForget.ts b/apps/yaak-proxy/lib/fireAndForget.ts
new file mode 100644
index 0000000..050f4f6
--- /dev/null
+++ b/apps/yaak-proxy/lib/fireAndForget.ts
@@ -0,0 +1,5 @@
+export function fireAndForget(promise: Promise<unknown>) {
+  promise.catch((err: unknown) => {
+    console.error("Unhandled async error:", err);
+  });
+}
diff --git a/apps/yaak-proxy/lib/hotkeys.ts b/apps/yaak-proxy/lib/hotkeys.ts
new file mode 100644
index 0000000..5835137
--- /dev/null
+++ b/apps/yaak-proxy/lib/hotkeys.ts
@@ -0,0 +1,63 @@
+import type { ActionInvocation, ActionMetadata } from "@yaakapp-internal/proxy-lib";
+import { rpc } from "./rpc";
+
+type ActionBinding = {
+  invocation: ActionInvocation;
+  meta: ActionMetadata;
+  keys: { key: string; ctrl: boolean; shift: boolean; alt: boolean; meta: boolean };
+};
+
+/** Parse a hotkey string like "Ctrl+Shift+P" into its parts. */
+function parseHotkey(hotkey: string): ActionBinding["keys"] {
+  const parts = hotkey.split("+").map((p) => p.trim().toLowerCase());
+  return {
+    ctrl: parts.includes("ctrl") || parts.includes("control"),
+    shift: parts.includes("shift"),
+    alt: parts.includes("alt"),
+    meta: parts.includes("meta") || parts.includes("cmd") || parts.includes("command"),
+    key:
+      parts.filter(
+        (p) => !["ctrl", "control", "shift", "alt", "meta", "cmd", "command"].includes(p),
+      )[0] ?? "",
+  };
+}
+
+function matchesEvent(binding: ActionBinding["keys"], e: KeyboardEvent): boolean {
+  return (
+    e.ctrlKey === binding.ctrl &&
+    e.shiftKey === binding.shift &&
+    e.altKey === binding.alt &&
+    e.metaKey === binding.meta &&
+    e.key.toLowerCase() === binding.key
+  );
+}
+
+/** Fetch all actions from Rust and register a global keydown listener. */
+export async function initHotkeys(): Promise<() => void> {
+  const { actions } = await rpc("list_actions", {});
+
+  const bindings: ActionBinding[] = actions
+    .filter(
+      // oxlint-disable-next-line no-redundant-type-constituents -- ActionMetadata resolves at runtime
+      (entry): entry is [ActionInvocation, ActionMetadata & { defaultHotkey: string }] =>
+        entry[1].defaultHotkey != null,
+    )
+    .map(([invocation, meta]) => ({
+      invocation,
+      meta,
+      keys: parseHotkey(meta.defaultHotkey),
+    }));
+
+  function onKeyDown(e: KeyboardEvent) {
+    for (const binding of bindings) {
+      if (matchesEvent(binding.keys, e)) {
+        e.preventDefault();
+        void rpc("execute_action", binding.invocation);
+        return;
+      }
+    }
+  }
+
+  window.addEventListener("keydown", onKeyDown);
+  return () => window.removeEventListener("keydown", onKeyDown);
+}
diff --git a/apps/yaak-proxy/lib/rpc.ts b/apps/yaak-proxy/lib/rpc.ts
new file mode 100644
index 0000000..fa31c4f
--- /dev/null
+++ b/apps/yaak-proxy/lib/rpc.ts
@@ -0,0 +1,17 @@
+import type { RpcEventSchema, RpcSchema } from "@yaakapp-internal/proxy-lib";
+import { command, subscribe } from "./tauri";
+
+export type Req<K extends keyof RpcSchema> = RpcSchema[K][0];
+export type Res<K extends keyof RpcSchema> = RpcSchema[K][1];
+
+export async function rpc<K extends keyof RpcSchema>(cmd: K, payload: Req<K>): Promise<Res<K>> {
+  return command<Res<K>>("rpc", { cmd, payload });
+}
+
+/** Subscribe to a backend event. Returns an unsubscribe function. */
+export function listen<K extends keyof RpcEventSchema>(
+  event: K & string,
+  callback: (payload: RpcEventSchema[K]) => void,
+): () => void {
+  return subscribe<RpcEventSchema[K]>(event, callback);
+}
diff --git a/apps/yaak-proxy/lib/store.ts b/apps/yaak-proxy/lib/store.ts
new file mode 100644
index 0000000..fea413c
--- /dev/null
+++ b/apps/yaak-proxy/lib/store.ts
@@ -0,0 +1,11 @@
+import { createModelStore } from "@yaakapp-internal/model-store";
+import type { HttpExchange } from "@yaakapp-internal/proxy-lib";
+
+type ProxyModels = {
+  http_exchange: HttpExchange;
+};
+
+export const { dataAtom, applyChange, replaceAll, listAtom, orderedListAtom } =
+  createModelStore<ProxyModels>(["http_exchange"]);
+
+export const httpExchangesAtom = orderedListAtom("http_exchange", "createdAt", "desc");
diff --git a/apps/yaak-proxy/lib/tauri.ts b/apps/yaak-proxy/lib/tauri.ts
new file mode 100644
index 0000000..063a540
--- /dev/null
+++ b/apps/yaak-proxy/lib/tauri.ts
@@ -0,0 +1,30 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen as tauriListen } from "@tauri-apps/api/event";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { type as tauriOsType } from "@tauri-apps/plugin-os";
+
+/** Call a Tauri command. */
+export function command<T>(cmd: string, args?: Record<string, unknown>): Promise<T> {
+  return invoke(cmd, args) as Promise<T>;
+}
+
+/** Subscribe to a Tauri event. Returns an unsubscribe function. */
+export function subscribe<T>(event: string, callback: (payload: T) => void): () => void {
+  let unsub: (() => void) | null = null;
+  tauriListen<T>(event, (e) => callback(e.payload))
+    .then((fn) => {
+      unsub = fn;
+    })
+    .catch(console.error);
+  return () => unsub?.();
+}
+
+/** Show the current webview window. */
+export function showWindow(): Promise<void> {
+  return getCurrentWebviewWindow().show();
+}
+
+/** Get the current OS type (e.g. "macos", "linux", "windows"). */
+export function getOsType() {
+  return tauriOsType();
+}
diff --git a/apps/yaak-proxy/lib/theme.ts b/apps/yaak-proxy/lib/theme.ts
new file mode 100644
index 0000000..ef1e877
--- /dev/null
+++ b/apps/yaak-proxy/lib/theme.ts
@@ -0,0 +1,35 @@
+import { setWindowTheme } from "@yaakapp-internal/mac-window";
+import {
+  applyThemeToDocument,
+  defaultDarkTheme,
+  defaultLightTheme,
+  getCSSAppearance,
+  platformFromUserAgent,
+  setPlatformOnDocument,
+  subscribeToPreferredAppearance,
+  type Appearance,
+} from "@yaakapp-internal/theme";
+import { showWindow } from "./tauri";
+
+setPlatformOnDocument(platformFromUserAgent(navigator.userAgent));
+
+// Apply a quick initial theme based on CSS media query
+let preferredAppearance: Appearance = getCSSAppearance();
+applyTheme(preferredAppearance);
+
+// Then subscribe to accurate OS appearance detection and changes
+subscribeToPreferredAppearance((a) => {
+  preferredAppearance = a;
+  applyTheme(preferredAppearance);
+});
+
+// Show window after initial theme is applied (window starts hidden to prevent flash)
+showWindow().catch(console.error);
+
+function applyTheme(appearance: Appearance) {
+  const theme = appearance === "dark" ? defaultDarkTheme : defaultLightTheme;
+  applyThemeToDocument(theme);
+  if (theme.base.surface != null) {
+    setWindowTheme(theme.base.surface);
+  }
+}
diff --git a/apps/yaak-proxy/main.css b/apps/yaak-proxy/main.css
new file mode 100644
index 0000000..da1e53f
--- /dev/null
+++ b/apps/yaak-proxy/main.css
@@ -0,0 +1,92 @@
+@import "tailwindcss";
+@import "../../packages/tailwind-config/index.css";
+@source "../../packages/ui/src";
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply w-full h-full overflow-hidden text-text bg-surface;
+  }
+
+  :root {
+    --font-family-interface: "";
+    --font-family-editor: "";
+  }
+
+  :root {
+    font-variant-ligatures: none;
+  }
+
+  html[data-platform="linux"] {
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  ::selection {
+    @apply bg-selection;
+  }
+
+  :not(a),
+  :not(input):not(textarea),
+  :not(input):not(textarea)::after,
+  :not(input):not(textarea)::before {
+    @apply select-none cursor-default;
+  }
+
+  input,
+  textarea {
+    &::placeholder {
+      @apply text-placeholder;
+    }
+  }
+
+  a,
+  a[href] * {
+    @apply cursor-pointer!;
+  }
+
+  table th {
+    @apply text-left;
+  }
+
+  :not(iframe) {
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-corner {
+      @apply w-[8px] h-[8px] bg-transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply bg-text-subtlest rounded-[4px] opacity-20;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      @apply opacity-40!;
+    }
+  }
+
+  .hide-scrollbars {
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar {
+      @apply hidden!;
+    }
+  }
+
+  .rtl {
+    direction: rtl;
+  }
+
+  :root {
+    color-scheme: light dark;
+    --transition-duration: 100ms ease-in-out;
+    --color-white: 255 100% 100%;
+    --color-black: 255 0% 0%;
+  }
+}
diff --git a/apps/yaak-proxy/main.tsx b/apps/yaak-proxy/main.tsx
new file mode 100644
index 0000000..1e197fb
--- /dev/null
+++ b/apps/yaak-proxy/main.tsx
@@ -0,0 +1,44 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createStore, Provider } from "jotai";
+import { LazyMotion, MotionConfig } from "motion/react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { ProxyLayout } from "./components/ProxyLayout";
+import { listen, rpc } from "./lib/rpc";
+import { initHotkeys } from "./lib/hotkeys";
+import { applyChange, dataAtom, replaceAll } from "./lib/store";
+import "./main.css";
+
+const queryClient = new QueryClient();
+const jotaiStore = createStore();
+
+// Load initial models from the database
+void rpc("list_models", {}).then((res) => {
+  jotaiStore.set(dataAtom, (prev) => replaceAll(prev, "http_exchange", res.httpExchanges));
+});
+
+// Register hotkeys from action metadata
+void initHotkeys();
+
+// Subscribe to model change events from the backend
+void listen("model_write", (payload) => {
+  jotaiStore.set(dataAtom, (prev) =>
+    applyChange(prev, "http_exchange", payload.model, payload.change),
+  );
+});
+
+const motionFeatures = () => import("framer-motion").then((mod) => mod.domAnimation);
+
+createRoot(document.getElementById("root") as HTMLElement).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <Provider store={jotaiStore}>
+        <LazyMotion strict features={motionFeatures}>
+          <MotionConfig transition={{ duration: 0.1 }}>
+            <ProxyLayout />
+          </MotionConfig>
+        </LazyMotion>
+      </Provider>
+    </QueryClientProvider>
+  </StrictMode>,
+);
diff --git a/apps/yaak-proxy/package.json b/apps/yaak-proxy/package.json
new file mode 100644
index 0000000..d422756
--- /dev/null
+++ b/apps/yaak-proxy/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@yaakapp/yaak-proxy",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev --force",
+    "build": "vp build",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.5",
+    "@tauri-apps/api": "^2.11.0",
+    "@tauri-apps/plugin-os": "^2.3.2",
+    "@yaakapp-internal/model-store": "^1.0.0",
+    "@yaakapp-internal/proxy-lib": "^1.0.0",
+    "@yaakapp-internal/theme": "^1.0.0",
+    "@yaakapp-internal/ui": "^1.0.0",
+    "classnames": "^2.5.1",
+    "jotai": "^2.18.0",
+    "jotai-family": "^1.0.1",
+    "motion": "^13.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@types/babel__core": "^7.20.5",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@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.3.2",
+    "vite-plus": "^0.3.0"
+  }
+}
diff --git a/apps/yaak-proxy/postcss.config.cjs b/apps/yaak-proxy/postcss.config.cjs
new file mode 100644
index 0000000..972e996
--- /dev/null
+++ b/apps/yaak-proxy/postcss.config.cjs
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("@tailwindcss/postcss")],
+};
diff --git a/apps/yaak-proxy/tsconfig.json b/apps/yaak-proxy/tsconfig.json
new file mode 100644
index 0000000..2b0a7b8
--- /dev/null
+++ b/apps/yaak-proxy/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "useDefineForClassFields": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@yaakapp-internal/theme": ["../../packages/theme/src/index.ts"],
+      "@yaakapp-internal/theme/*": ["../../packages/theme/src/*"],
+      "@yaakapp-internal/ui": ["../../packages/ui/src/index.ts"],
+      "@yaakapp-internal/ui/*": ["../../packages/ui/src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["vite.config.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/apps/yaak-proxy/tsconfig.node.json b/apps/yaak-proxy/tsconfig.node.json
new file mode 100644
index 0000000..4c74079
--- /dev/null
+++ b/apps/yaak-proxy/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/apps/yaak-proxy/vite-env.d.ts b/apps/yaak-proxy/vite-env.d.ts
new file mode 100644
index 0000000..bc2d8a3
--- /dev/null
+++ b/apps/yaak-proxy/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite-plus/client" />
diff --git a/apps/yaak-proxy/vite.config.ts b/apps/yaak-proxy/vite.config.ts
new file mode 100644
index 0000000..3d56934
--- /dev/null
+++ b/apps/yaak-proxy/vite.config.ts
@@ -0,0 +1,16 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: "../../dist/apps/yaak-proxy",
+    emptyOutDir: true,
+  },
+  clearScreen: false,
+  server: {
+    port: parseInt(process.env.YAAK_PROXY_DEV_PORT ?? "2420", 10),
+    strictPort: true,
+  },
+  envPrefix: ["VITE_", "TAURI_"],
+});
diff --git a/crates-cli/yaak-cli/Cargo.toml b/crates-cli/yaak-cli/Cargo.toml
new file mode 100644
index 0000000..6ab3cf9
--- /dev/null
+++ b/crates-cli/yaak-cli/Cargo.toml
@@ -0,0 +1,59 @@
+[package]
+name = "yaak-cli"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[[bin]]
+name = "yaak"
+path = "src/main.rs"
+
+[dependencies]
+arboard = "3"
+base64 = "0.22"
+clap = { version = "4", features = ["derive"] }
+console = "0.15"
+dirs = "6"
+env_logger = "0.11"
+futures = "0.3"
+inquire = { version = "0.7", features = ["editor"] }
+hex = { workspace = true }
+include_dir = "0.7"
+keyring = { workspace = true, features = ["apple-native", "windows-native", "sync-secret-service"] }
+log = { workspace = true }
+rand = "0.8"
+reqwest = { workspace = true, features = ["form"] }
+rolldown = "0.1.0"
+# Pinned exactly: rolldown_resolver takes `oxc_resolver = "^11"`, so cargo
+# drifts it forward and breaks on 11.11 (TsconfigOptions became
+# TsconfigDiscovery). This dep exists only to hold that resolution.
+oxc_resolver = "=11.10.0"
+schemars = { workspace = true }
+serde = { workspace = true }
+serde_json = { workspace = true }
+sha2 = { workspace = true }
+tokio = { workspace = true, features = [
+  "rt-multi-thread",
+  "macros",
+  "io-util",
+  "net",
+  "signal",
+  "time",
+] }
+walkdir = "2"
+webbrowser = "1"
+zip = "7"
+yaak = { workspace = true }
+yaak-api = { workspace = true }
+yaak-core = { workspace = true }
+yaak-crypto = { workspace = true }
+yaak-http = { workspace = true }
+yaak-lifecycle = { workspace = true }
+yaak-models = { workspace = true }
+yaak-plugins = { workspace = true }
+yaak-templates = { workspace = true }
+
+[dev-dependencies]
+assert_cmd = "2"
+predicates = "3"
+tempfile = "3"
diff --git a/crates-cli/yaak-cli/README.md b/crates-cli/yaak-cli/README.md
new file mode 100644
index 0000000..32157e2
--- /dev/null
+++ b/crates-cli/yaak-cli/README.md
@@ -0,0 +1,66 @@
+# Yaak CLI
+
+The `yaak` CLI for publishing plugins and creating/updating/sending requests.
+
+## Installation
+
+```sh
+npm install @yaakapp/cli
+```
+
+## Agentic Workflows
+
+The `yaak` CLI is primarily meant to be used by AI agents, and has the following features:
+
+- `schema` subcommands to get the JSON Schema for any model (eg. `yaak request schema http`)
+- `--json '{...}'` input format to create and update data
+- `--verbose` mode for extracting debug info while sending requests
+- The ability to send entire workspaces and folders (Supports `--parallel` and `--fail-fast`)
+
+### Example Prompts
+
+Use the `yaak` CLI with agents like Claude or Codex to do useful things for you.
+
+Here are some example prompts:
+
+```text
+Scan my API routes and create a workspace (using yaak cli) with
+all the requests needed for me to do manual testing?
+```
+
+```text
+Send all the GraphQL requests in my workspace
+```
+
+## Description
+
+Here's the current print of `yaak --help`
+
+```text
+Yaak CLI - API client from the command line
+
+Usage: yaak [OPTIONS] <COMMAND>
+
+Commands:
+  auth         Authentication commands
+  plugin       Plugin development and publishing commands
+  send         Send a request, folder, or workspace by ID
+  workspace    Workspace commands
+  request      Request commands
+  folder       Folder commands
+  environment  Environment commands
+
+Options:
+      --data-dir <DATA_DIR>        Use a custom data directory
+  -e, --environment <ENVIRONMENT>  Environment ID to use for variable substitution
+  -v, --verbose                    Enable verbose send output (events and streamed response body)
+      --log [<LEVEL>]              Enable CLI logging; optionally set level (error|warn|info|debug|trace) [possible values: error, warn, info, debug, trace]
+  -h, --help                       Print help
+  -V, --version                    Print version
+
+Agent Hints:
+  - Template variable syntax is ${[ my_var ]}, not {{ ... }}
+  - Template function syntax is ${[ namespace.my_func(a='aaa',b='bbb') ]}
+  - View JSONSchema for models before creating or updating (eg. `yaak request schema http`)
+  - Deletion requires confirmation (--yes for non-interactive environments)
+```
diff --git a/crates-cli/yaak-cli/skills/use-yaak/SKILL.md b/crates-cli/yaak-cli/skills/use-yaak/SKILL.md
new file mode 100644
index 0000000..007713e
--- /dev/null
+++ b/crates-cli/yaak-cli/skills/use-yaak/SKILL.md
@@ -0,0 +1,168 @@
+---
+name: use-yaak
+description: >
+  Use when the user mentions Yaak, a Yaak workspace, or the `yaak` command, or
+  asks to call, hit, or smoke test HTTP/REST endpoints, save or organize API
+  requests for reuse or manual testing, configure auth on saved requests, import
+  an OpenAPI spec, a Postman or Insomnia collection, or a cURL command, or run
+  saved requests across environments. Prefer over one-off `curl` when requests
+  should be saved, reused, shared, or run as a set.
+allowed-tools: Bash(yaak:*), Bash(which:*), Bash(command:*), Bash(npm:*), Bash(npx:*)
+---
+
+# Use Yaak
+
+
+
+Yaak is a desktop API client. The `yaak` CLI reads and writes the **same local
+database as the desktop app**, so anything you create shows up in the app
+immediately, and vice versa. There is no server and no sign-in: `yaak auth` is
+only for publishing plugins to the Yaak registry.
+
+Two consequences worth holding onto. Requests you create are permanent user data
+in an app they use, not scratch files, so name them the way the user would and
+clean up anything created just to test. And because the app is right there, the
+CLI is usually the wrong place to _read_ a response in detail; it is the right
+place to build, organize, and run requests.
+
+## The CLI describes itself
+
+**This skill deliberately does not list fields, body types, auth strategies, or
+template functions.** The user's CLI version and installed plugins decide what
+exists, so any list written here would eventually be wrong. Ask the CLI:
+
+```bash
+yaak --help                          # commands, plus agent hints at the bottom
+yaak <command> --help                # flags for one command
+yaak request schema http --pretty    # full request model, with guidance per field
+yaak template-function list [filter] # template functions from installed plugins
+yaak template-function show <name>   # one function's arguments
+```
+
+`request schema http` is generated from the real model and merges in the auth
+strategies contributed by plugins, so it is the authoritative answer for what a
+request payload may contain and what each auth strategy needs. `workspace`,
+`environment`, and `folder` have `schema` subcommands too.
+
+Read the relevant schema before writing a JSON payload you are not certain of.
+That is faster than a failed send, and it stays correct as Yaak changes.
+
+## Resource model
+
+- **Workspace** (`wk_…`) is the top-level container.
+- **Folder** (`fl_…`) groups requests and can nest. Folders carry headers and
+  authentication that child requests inherit, which is the usual way to apply
+  one token to a whole group.
+- **Request** (`rq_…`) is a single HTTP, gRPC, or WebSocket request. The CLI can
+  currently only create and send HTTP ones.
+- **Environment** (`ev_…`) holds variables. Each workspace has a base
+  environment plus any number of sub-environments; a sub-environment overrides
+  base variables of the same name and is chosen per send with `-e`.
+- **Cookie jar** (`cj_…`) stores cookies per workspace. The oldest is used by
+  default, so this normally needs no attention.
+
+IDs are prefix-typed, so you can always tell what an ID refers to. Commands that
+take a workspace ID infer it when exactly one workspace exists.
+
+## Getting oriented
+
+```bash
+yaak --version || npm install -g @yaakapp/cli
+yaak workspace list
+```
+
+Pick the workspace matching the user's project before changing anything, and
+create one only when nothing fits.
+
+### Skill freshness
+
+The CLI writes this skill, so an upgraded CLI can leave it behind. That failure
+is silent: nothing errors, the skill just stops mentioning things the CLI can
+now do. Check once per session, alongside the commands above:
+
+```bash
+yaak --help 2>&1 | grep -A2 "Agent tooling:"
+```
+
+If it reports the skill is out of date, run `yaak agent install` and tell the
+user to restart their coding tool. This session keeps running on the old copy
+until they do, so finish the current request either way. Check once and do not
+re-run it after acting.
+
+**When the CLI and this skill disagree, the CLI is right.**
+
+## Core workflows
+
+**Start from a spec when one exists.** `yaak import <file>` auto-detects OpenAPI,
+Swagger, Postman, Insomnia, cURL, and Yaak exports, and beats authoring requests
+by hand every time.
+
+**Make the host swappable.** Put the base URL in a base-environment variable,
+reference it as `${[ base_url ]}`, then add a sub-environment per deployment
+target. Now `yaak -e ev_staging send <wk_id>` runs everything against staging.
+
+**Chain instead of shell-plumbing.** A request can read another request's
+response directly, and Yaak sends the dependency first if it needs to:
+
+```
+${[ response.body.path(request='rq_login', path='$.token') ]}
+```
+
+Run `yaak template-function show response.body.path` for its arguments,
+including how to control when the upstream request re-sends. Chain when a
+request genuinely depends on another's response; to merely run requests in
+order, `yaak send <fl_id>` already does that.
+
+**Run a set.** `yaak send` accepts a folder or workspace ID, with `--fail-fast`
+and `--parallel`. Workspace and request IDs survive an export/import, so a
+committed `yaak export` plus `--data-dir ./.yaak` gives a runnable suite in CI.
+
+## Reading results
+
+A plain send writes only the response body to stdout. Yaak also stores every
+response, so the reliable way to see what happened is to ask afterwards rather
+than to parse the send output:
+
+```bash
+yaak response show rq_abc123     # latest response for a request, as JSON
+yaak response list rq_abc123     # its history, newest first
+yaak response body rq_abc123     # just the body
+```
+
+`response show` gives status, reason, timing, headers, the final URL, and any
+transport error. Pass a response ID for a specific one.
+
+`-v` on a send prints the same information prefixed `*`, `>`, and `<`, with the
+body after the last `<` header line:
+
+```bash
+yaak -v request send rq_abc123 2>&1 | grep '^< HTTP'
+```
+
+That works, but `response show` is still better when you need to act on the
+result, since it gives you fields rather than text to parse.
+
+Exit code 1 means the send did not complete: an unresolved template variable, an
+unreachable host, a TLS failure. **HTTP error statuses are not failures.** Like
+`curl`, a 404 or 500 exits 0, and a folder of requests that all return 500
+reports success. Never tell the user an API is healthy based on a clean exit;
+check the status.
+
+## Execution rules
+
+1. Resolve the workspace before mutating, and prefer an existing one.
+2. Read the schema rather than guessing field names, auth fields, or body shapes.
+3. `update` takes a JSON merge patch keyed by `id`: send only what changes, and
+   note that arrays are replaced wholesale, not merged.
+4. Deletes need `--yes` in a non-interactive shell. Confirm with the user first.
+5. Never write a real secret into an environment variable on the user's behalf.
+   Reference one and let them fill in the value.
+6. Verify what you built by sending it, and report the real HTTP status.
+7. If the CLI warns on stderr that a newer version is available, offer to run
+   the upgrade command it prints, then re-run `yaak agent install` so this
+   skill updates too.
diff --git a/crates-cli/yaak-cli/src/cli.rs b/crates-cli/yaak-cli/src/cli.rs
new file mode 100644
index 0000000..b4754ac
--- /dev/null
+++ b/crates-cli/yaak-cli/src/cli.rs
@@ -0,0 +1,622 @@
+use clap::{Args, Parser, Subcommand, ValueEnum};
+use std::path::PathBuf;
+
+pub const AGENT_HINTS: &str = r#"Agent Hints:
+  - Template variable syntax is ${[ my_var ]}, not {{ ... }}
+  - Template function syntax is ${[ namespace.my_func(a='aaa',b='bbb') ]}
+  - View JSONSchema for models before creating or updating (eg. `yaak request schema http`)
+  - Deletion requires confirmation (--yes for non-interactive environments)"#;
+
+#[derive(Parser)]
+#[command(name = "yaak")]
+#[command(about = "Yaak CLI - API client from the command line")]
+#[command(version = crate::version::cli_version())]
+#[command(disable_help_subcommand = true)]
+pub struct Cli {
+    /// Use a custom data directory
+    #[arg(long, global = true)]
+    pub data_dir: Option<PathBuf>,
+
+    /// Environment ID to use for variable substitution
+    #[arg(long, short, global = true)]
+    pub environment: Option<String>,
+
+    /// Cookie jar ID to use when sending requests
+    #[arg(long = "cookie-jar", global = true, value_name = "COOKIE_JAR_ID")]
+    pub cookie_jar: Option<String>,
+
+    /// Enable verbose send output (events and streamed response body)
+    #[arg(long, short, global = true)]
+    pub verbose: bool,
+
+    /// Enable CLI logging; optionally set level (error|warn|info|debug|trace)
+    #[arg(long, global = true, value_name = "LEVEL", num_args = 0..=1, ignore_case = true)]
+    pub log: Option<Option<LogLevel>>,
+
+    #[command(subcommand)]
+    pub command: Commands,
+}
+
+#[derive(Subcommand)]
+pub enum Commands {
+    /// Install Yaak skills for AI coding agents
+    Agent(AgentArgs),
+
+    /// Authentication commands
+    Auth(AuthArgs),
+
+    /// Import API data from Yaak, OpenAPI, Postman, Insomnia, Swagger, or cURL
+    Import(ImportArgs),
+
+    /// Export Yaak workspace data
+    Export(ExportArgs),
+
+    /// Plugin development and publishing commands
+    Plugin(PluginArgs),
+
+    #[command(hide = true)]
+    Build(PluginPathArg),
+
+    #[command(hide = true)]
+    Dev(PluginPathArg),
+
+    /// Backward-compatible alias for `plugin generate`
+    #[command(hide = true)]
+    Generate(GenerateArgs),
+
+    /// Backward-compatible alias for `plugin publish`
+    #[command(hide = true)]
+    Publish(PluginPathArg),
+
+    /// Send a request, folder, or workspace by ID
+    Send(SendArgs),
+
+    /// Cookie jar commands
+    CookieJar(CookieJarArgs),
+
+    /// Workspace commands
+    Workspace(WorkspaceArgs),
+
+    /// Request commands
+    Request(RequestArgs),
+
+    /// Folder commands
+    Folder(FolderArgs),
+
+    /// Environment commands
+    Environment(EnvironmentArgs),
+
+    /// Template function commands
+    #[command(alias = "func")]
+    TemplateFunction(TemplateFunctionArgs),
+
+    /// Response commands
+    Response(ResponseArgs),
+}
+
+#[derive(Args)]
+pub struct ResponseArgs {
+    #[command(subcommand)]
+    pub command: ResponseCommands,
+}
+
+#[derive(Subcommand)]
+pub enum ResponseCommands {
+    /// List stored responses for a request or workspace
+    List {
+        /// Request or workspace ID (optional when exactly one workspace exists)
+        id: Option<String>,
+
+        /// Maximum number of responses to return, newest first
+        #[arg(long)]
+        limit: Option<u64>,
+    },
+
+    /// Show a response as JSON, including status, timing, and headers
+    Show {
+        /// Response ID, or a request ID to use its most recent response
+        id: String,
+    },
+
+    /// Write a stored response body to stdout
+    Body {
+        /// Response ID, or a request ID to use its most recent response
+        id: String,
+    },
+
+    /// Delete stored responses for a request or workspace
+    Delete {
+        /// Request or workspace ID
+        id: String,
+
+        /// Skip confirmation prompt
+        #[arg(short, long)]
+        yes: bool,
+    },
+}
+
+#[derive(Args)]
+pub struct TemplateFunctionArgs {
+    #[command(subcommand)]
+    pub command: TemplateFunctionCommands,
+}
+
+#[derive(Subcommand)]
+pub enum TemplateFunctionCommands {
+    /// List template functions provided by installed plugins
+    List {
+        /// Only show functions whose name contains this text
+        #[arg(value_name = "FILTER")]
+        filter: Option<String>,
+    },
+
+    /// Show a template function's arguments as JSON
+    Show {
+        /// Template function name (for example: response.body.path)
+        name: String,
+
+        /// Pretty-print JSON output
+        #[arg(long)]
+        pretty: bool,
+    },
+}
+
+#[derive(Args)]
+pub struct AgentArgs {
+    #[command(subcommand)]
+    pub command: AgentCommands,
+}
+
+#[derive(Subcommand)]
+pub enum AgentCommands {
+    /// Install the Yaak skill so coding agents know how to drive the CLI
+    #[command(alias = "update", alias = "add")]
+    Install {
+        /// Install for specific agents instead of all detected ones
+        #[arg(long = "agent", value_name = "AGENT")]
+        agent: Option<Vec<String>>,
+    },
+
+    /// Remove the Yaak skill
+    #[command(alias = "uninstall", alias = "rm")]
+    Remove {
+        /// Remove for specific agents instead of all detected ones
+        #[arg(long = "agent", value_name = "AGENT")]
+        agent: Option<Vec<String>>,
+    },
+}
+
+#[derive(Args)]
+pub struct SendArgs {
+    /// Request, folder, or workspace ID
+    pub id: String,
+
+    /// Execute requests in parallel
+    #[arg(long)]
+    pub parallel: bool,
+
+    /// Stop on first request failure when sending folders/workspaces
+    #[arg(long, conflicts_with = "parallel")]
+    pub fail_fast: bool,
+}
+
+#[derive(Args)]
+pub struct ImportArgs {
+    /// Path to the file to import
+    pub file: PathBuf,
+
+    /// Existing workspace ID to import into when supported by the importer
+    #[arg(long = "workspace-id", value_name = "WORKSPACE_ID")]
+    pub workspace_id: Option<String>,
+}
+
+#[derive(Args)]
+pub struct ExportArgs {
+    /// Path to write the Yaak export JSON file
+    pub file: PathBuf,
+
+    /// Workspace IDs to export (defaults to the only workspace when exactly one exists)
+    #[arg(value_name = "WORKSPACE_ID")]
+    pub workspace_ids: Vec<String>,
+
+    /// Export all workspaces
+    #[arg(long, conflicts_with = "workspace_ids")]
+    pub all: bool,
+
+    /// Include private environments in the export
+    #[arg(long)]
+    pub include_private_environments: bool,
+}
+
+#[derive(Args)]
+#[command(disable_help_subcommand = true)]
+pub struct CookieJarArgs {
+    #[command(subcommand)]
+    pub command: CookieJarCommands,
+}
+
+#[derive(Subcommand)]
+pub enum CookieJarCommands {
+    /// List cookie jars in a workspace
+    List {
+        /// Workspace ID (optional when exactly one workspace exists)
+        workspace_id: Option<String>,
+    },
+}
+
+#[derive(Args)]
+#[command(disable_help_subcommand = true)]
+pub struct WorkspaceArgs {
+    #[command(subcommand)]
+    pub command: WorkspaceCommands,
+}
+
+#[derive(Subcommand)]
+pub enum WorkspaceCommands {
+    /// List all workspaces
+    List,
+
+    /// Output JSON schema for workspace create/update payloads
+    Schema {
+        /// Pretty-print schema JSON output
+        #[arg(long)]
+        pretty: bool,
+    },
+
+    /// Show a workspace as JSON
+    Show {
+        /// Workspace ID
+        workspace_id: String,
+    },
+
+    /// Create a workspace
+    Create {
+        /// Workspace name
+        #[arg(short, long)]
+        name: Option<String>,
+
+        /// JSON payload
+        #[arg(long, conflicts_with = "json_input")]
+        json: Option<String>,
+
+        /// JSON payload shorthand
+        #[arg(value_name = "JSON", conflicts_with = "json")]
+        json_input: Option<String>,
+    },
+
+    /// Update a workspace
+    Update {
+        /// JSON payload
+        #[arg(long, conflicts_with = "json_input")]
+        json: Option<String>,
+
+        /// JSON payload shorthand
+        #[arg(value_name = "JSON", conflicts_with = "json")]
+        json_input: Option<String>,
+    },
+
+    /// Delete a workspace
+    Delete {
+        /// Workspace ID
+        workspace_id: String,
+
+        /// Skip confirmation prompt
+        #[arg(short, long)]
+        yes: bool,
+    },
+}
+
+#[derive(Args)]
+#[command(disable_help_subcommand = true)]
+pub struct RequestArgs {
+    #[command(subcommand)]
+    pub command: RequestCommands,
+}
+
+#[derive(Subcommand)]
+pub enum RequestCommands {
+    /// List requests in a workspace
+    List {
+        /// Workspace ID (optional when exactly one workspace exists)
+        workspace_id: Option<String>,
+    },
+
+    /// Show a request as JSON
+    Show {
+        /// Request ID
+        request_id: String,
+    },
+
+    /// Send a request by ID
+    Send {
+        /// Request ID
+        request_id: String,
+    },
+
+    /// Output JSON schema for request create/update payloads
+    Schema {
+        #[arg(value_enum)]
+        request_type: RequestSchemaType,
+
+        /// Pretty-print schema JSON output
+        #[arg(long)]
+        pretty: bool,
+    },
+
+    /// Create a new HTTP request
+    Create {
+        /// Workspace ID (or positional JSON payload shorthand)
+        workspace_id: Option<String>,
+
+        /// Request name
+        #[arg(short, long)]
+        name: Option<String>,
+
+        /// HTTP method
+        #[arg(short, long)]
+        method: Option<String>,
+
+        /// URL
+        #[arg(short, long)]
+        url: Option<String>,
+
+        /// JSON payload
+        #[arg(long)]
+        json: Option<String>,
+    },
+
+    /// Update an HTTP request
+    Update {
+        /// JSON payload
+        #[arg(long, conflicts_with = "json_input")]
+        json: Option<String>,
+
+        /// JSON payload shorthand
+        #[arg(value_name = "JSON", conflicts_with = "json")]
+        json_input: Option<String>,
+    },
+
+    /// Delete a request
+    Delete {
+        /// Request ID
+        request_id: String,
+
+        /// Skip confirmation prompt
+        #[arg(short, long)]
+        yes: bool,
+    },
+}
+
+#[derive(Clone, Copy, Debug, ValueEnum)]
+pub enum RequestSchemaType {
+    Http,
+    Grpc,
+    Websocket,
+}
+
+#[derive(Clone, Copy, Debug, ValueEnum)]
+pub enum LogLevel {
+    Error,
+    Warn,
+    Info,
+    Debug,
+    Trace,
+}
+
+impl LogLevel {
+    pub fn as_filter(self) -> log::LevelFilter {
+        match self {
+            LogLevel::Error => log::LevelFilter::Error,
+            LogLevel::Warn => log::LevelFilter::Warn,
+            LogLevel::Info => log::LevelFilter::Info,
+            LogLevel::Debug => log::LevelFilter::Debug,
+            LogLevel::Trace => log::LevelFilter::Trace,
+        }
+    }
+}
+
+#[derive(Args)]
+#[command(disable_help_subcommand = true)]
+pub struct FolderArgs {
+    #[command(subcommand)]
+    pub command: FolderCommands,
+}
+
+#[derive(Subcommand)]
+pub enum FolderCommands {
+    /// List folders in a workspace
+    List {
+        /// Workspace ID (optional when exactly one workspace exists)
+        workspace_id: Option<String>,
+    },
+
+    /// Output JSON schema for folder create/update payloads
+    Schema {
+        /// Pretty-print schema JSON output
+        #[arg(long)]
+        pretty: bool,
+    },
+
+    /// Show a folder as JSON
+    Show {
+        /// Folder ID
+        folder_id: String,
+    },
+
+    /// Create a folder
+    Create {
+        /// Workspace ID (or positional JSON payload shorthand)
+        workspace_id: Option<String>,
+
+        /// Folder name
+        #[arg(short, long)]
+        name: Option<String>,
+
+        /// JSON payload
+        #[arg(long)]
+        json: Option<String>,
+    },
+
+    /// Update a folder
+    Update {
+        /// JSON payload
+        #[arg(long, conflicts_with = "json_input")]
+        json: Option<String>,
+
+        /// JSON payload shorthand
+        #[arg(value_name = "JSON", conflicts_with = "json")]
+        json_input: Option<String>,
+    },
+
+    /// Delete a folder
+    Delete {
+        /// Folder ID
+        folder_id: String,
+
+        /// Skip confirmation prompt
+        #[arg(short, long)]
+        yes: bool,
+    },
+}
+
+#[derive(Args)]
+#[command(disable_help_subcommand = true)]
+pub struct EnvironmentArgs {
+    #[command(subcommand)]
+    pub command: EnvironmentCommands,
+}
+
+#[derive(Subcommand)]
+pub enum EnvironmentCommands {
+    /// List environments in a workspace
+    List {
+        /// Workspace ID (optional when exactly one workspace exists)
+        workspace_id: Option<String>,
+    },
+
+    /// Output JSON schema for environment create/update payloads
+    Schema {
+        /// Pretty-print schema JSON output
+        #[arg(long)]
+        pretty: bool,
+    },
+
+    /// Show an environment as JSON
+    Show {
+        /// Environment ID
+        environment_id: String,
+    },
+
+    /// Create an environment
+    #[command(after_help = r#"Modes (choose one):
+  1) yaak environment create <workspace_id> --name <name>
+  2) yaak environment create --json '{"workspaceId":"wk_abc","name":"Production"}'
+  3) yaak environment create '{"workspaceId":"wk_abc","name":"Production"}'
+  4) yaak environment create <workspace_id> --json '{"name":"Production"}'
+"#)]
+    Create {
+        /// Workspace ID for flag-based mode, or positional JSON payload shorthand
+        #[arg(value_name = "WORKSPACE_ID_OR_JSON")]
+        workspace_id: Option<String>,
+
+        /// Environment name
+        #[arg(short, long)]
+        name: Option<String>,
+
+        /// JSON payload (use instead of WORKSPACE_ID/--name)
+        #[arg(long)]
+        json: Option<String>,
+    },
+
+    /// Update an environment
+    Update {
+        /// JSON payload
+        #[arg(long, conflicts_with = "json_input")]
+        json: Option<String>,
+
+        /// JSON payload shorthand
+        #[arg(value_name = "JSON", conflicts_with = "json")]
+        json_input: Option<String>,
+    },
+
+    /// Delete an environment
+    Delete {
+        /// Environment ID
+        environment_id: String,
+
+        /// Skip confirmation prompt
+        #[arg(short, long)]
+        yes: bool,
+    },
+}
+
+#[derive(Args)]
+#[command(disable_help_subcommand = true)]
+pub struct AuthArgs {
+    #[command(subcommand)]
+    pub command: AuthCommands,
+}
+
+#[derive(Subcommand)]
+pub enum AuthCommands {
+    /// Login to Yaak via web browser
+    Login,
+
+    /// Sign out of the Yaak CLI
+    Logout,
+
+    /// Print the current logged-in user's info
+    Whoami,
+}
+
+#[derive(Args)]
+#[command(disable_help_subcommand = true)]
+pub struct PluginArgs {
+    #[command(subcommand)]
+    pub command: PluginCommands,
+}
+
+#[derive(Subcommand)]
+pub enum PluginCommands {
+    /// Transpile code into a runnable plugin bundle
+    Build(PluginPathArg),
+
+    /// Build plugin bundle continuously when the filesystem changes
+    Dev(PluginPathArg),
+
+    /// Generate a "Hello World" Yaak plugin
+    Generate(GenerateArgs),
+
+    /// Install a plugin from a local directory or from the registry
+    Install(InstallPluginArgs),
+
+    /// Generate plugin metadata for the registry
+    #[command(hide = true)]
+    Metadata(PluginPathArg),
+
+    /// Publish a Yaak plugin version to the plugin registry
+    Publish(PluginPathArg),
+}
+
+#[derive(Args, Clone)]
+pub struct PluginPathArg {
+    /// Path to plugin directory (defaults to current working directory)
+    pub path: Option<PathBuf>,
+}
+
+#[derive(Args, Clone)]
+pub struct GenerateArgs {
+    /// Plugin name (defaults to a generated name in interactive mode)
+    #[arg(long)]
+    pub name: Option<String>,
+
+    /// Output directory for the generated plugin (defaults to ./<name> in interactive mode)
+    #[arg(long)]
+    pub dir: Option<PathBuf>,
+}
+
+#[derive(Args, Clone)]
+pub struct InstallPluginArgs {
+    /// Local plugin directory path, or registry plugin spec (@org/plugin[@version])
+    pub source: String,
+}
diff --git a/crates-cli/yaak-cli/src/commands/agent.rs b/crates-cli/yaak-cli/src/commands/agent.rs
new file mode 100644
index 0000000..3bc4701
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/agent.rs
@@ -0,0 +1,269 @@
+use crate::cli::{AgentArgs, AgentCommands};
+use crate::ui;
+use crate::version;
+use include_dir::{Dir, include_dir};
+use std::fs;
+use std::path::{Path, PathBuf};
+
+static SKILL_DIR: Dir<'_> = include_dir!("$CARGO_MANIFEST_DIR/skills/use-yaak");
+
+const SKILL_NAME: &str = "use-yaak";
+
+/// Substituted at install time so the installed skill records which CLI wrote it,
+/// letting `--help` tell the user when an upgrade has left their copy behind.
+const VERSION_PLACEHOLDER: &str = "__YAAK_CLI_VERSION__";
+const VERSION_MARKER: &str = "yaak-cli-version:";
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+/// A coding tool that reads skills from a directory in the user's home.
+struct Target {
+    /// Display name used in output.
+    label: &'static str,
+    /// Directory holding all skills for this tool (`…/skills`).
+    skills_dir: PathBuf,
+}
+
+pub fn run(args: AgentArgs) -> i32 {
+    let result = match args.command {
+        AgentCommands::Install { agent } => install(agent),
+        AgentCommands::Remove { agent } => remove(agent),
+    };
+
+    match result {
+        Ok(()) => 0,
+        Err(error) => {
+            ui::error(&error);
+            1
+        }
+    }
+}
+
+fn install(agent: Option<Vec<String>>) -> CommandResult {
+    let targets = resolve_targets(agent)?;
+
+    let mut installed = 0usize;
+    for target in &targets {
+        let dir = target.skills_dir.join(SKILL_NAME);
+        match write_skill(&dir) {
+            Ok(()) => {
+                installed += 1;
+                ui::success(&format!("{} -> {}", target.label, dir.display()));
+            }
+            Err(error) => ui::warning_stderr(&format!("{}: {}", target.label, error)),
+        }
+    }
+
+    if installed == 0 {
+        return Err("Failed to install the Yaak skill anywhere".to_string());
+    }
+
+    ui::info("Restart your coding tool to pick up the skill");
+    Ok(())
+}
+
+fn remove(agent: Option<Vec<String>>) -> CommandResult {
+    let targets = resolve_targets(agent)?;
+
+    let mut removed = 0usize;
+    for target in &targets {
+        let dir = target.skills_dir.join(SKILL_NAME);
+        if !dir.exists() {
+            continue;
+        }
+        match fs::remove_dir_all(&dir) {
+            Ok(()) => {
+                removed += 1;
+                ui::success(&format!("Removed {}", dir.display()));
+            }
+            Err(error) => {
+                ui::warning_stderr(&format!("Failed to remove {}: {error}", dir.display()))
+            }
+        }
+    }
+
+    if removed == 0 {
+        ui::info("No Yaak skill was installed");
+    }
+    Ok(())
+}
+
+/// The skill directory belongs to the CLI, so every install overwrites what is there
+/// and prunes what this version no longer ships. Preserving local edits would be worse
+/// than losing them: an edited file would be skipped by every future install and go
+/// stale forever, against a CLI that keeps changing.
+///
+/// NOTE: atomicity is per file, not for the install as a whole. That is total today
+/// because the skill is a single file, but adding a second one would mean a reader
+/// could catch a mix of old and new files. Replacing the directory as a unit is not an
+/// option (`rename` refuses a non-empty destination), so a multi-file skill would need
+/// the published path to become a symlink swapped between versioned directories.
+fn write_skill(dir: &Path) -> CommandResult {
+    fs::create_dir_all(dir).map_err(|e| format!("Failed to create {}: {e}", dir.display()))?;
+
+    let mut written = Vec::new();
+    for file in walk(&SKILL_DIR) {
+        let relative = file.path().to_path_buf();
+        let destination = dir.join(&relative);
+        if let Some(parent) = destination.parent() {
+            fs::create_dir_all(parent)
+                .map_err(|e| format!("Failed to create {}: {e}", parent.display()))?;
+        }
+
+        let contents = stamp_version(file.contents());
+        write_atomic(&destination, &contents)?;
+        written.push(relative);
+    }
+
+    prune_unshipped(dir, &written);
+    Ok(())
+}
+
+/// Write via a sibling temp file and rename over the destination. `rename` replaces an
+/// existing file atomically, so a reader sees either the old copy or the new one, and a
+/// crash part way through cannot leave a half-written skill behind.
+fn write_atomic(destination: &Path, contents: &[u8]) -> CommandResult {
+    let parent = destination
+        .parent()
+        .ok_or_else(|| format!("Invalid skill path {}", destination.display()))?;
+    let name = destination
+        .file_name()
+        .and_then(|n| n.to_str())
+        .ok_or_else(|| format!("Invalid skill path {}", destination.display()))?;
+    let temp = parent.join(format!(".{name}.tmp-{}", std::process::id()));
+
+    fs::write(&temp, contents)
+        .map_err(|e| format!("Failed to write {}: {e}", destination.display()))?;
+
+    match fs::rename(&temp, destination) {
+        Ok(()) => Ok(()),
+        Err(error) => {
+            let _ = fs::remove_file(&temp);
+            Err(format!("Failed to write {}: {error}", destination.display()))
+        }
+    }
+}
+
+/// Stamp the running version into the skill so it carries its own provenance.
+fn stamp_version(contents: &[u8]) -> Vec<u8> {
+    match std::str::from_utf8(contents) {
+        Ok(text) => text.replace(VERSION_PLACEHOLDER, version::cli_version()).into_bytes(),
+        Err(_) => contents.to_vec(),
+    }
+}
+
+/// Drop anything this version does not ship, so files an older version wrote (or a
+/// leftover temp file) cannot linger beside the refreshed skill.
+fn prune_unshipped(dir: &Path, written: &[PathBuf]) {
+    let Ok(entries) = fs::read_dir(dir) else {
+        return;
+    };
+
+    for entry in entries.flatten() {
+        let path = entry.path();
+        let Ok(relative) = path.strip_prefix(dir) else {
+            continue;
+        };
+        if written.iter().any(|w| w == relative || w.starts_with(relative)) {
+            continue;
+        }
+        if path.is_dir() {
+            let _ = fs::remove_dir_all(&path);
+        } else {
+            let _ = fs::remove_file(&path);
+        }
+    }
+}
+
+/// Read the version an installed skill was stamped with.
+fn installed_version(dir: &Path) -> Option<String> {
+    let text = fs::read_to_string(dir.join("SKILL.md")).ok()?;
+    text.lines()
+        .find_map(|line| line.trim().strip_prefix(VERSION_MARKER))
+        .map(|v| v.trim().to_string())
+        .filter(|v| !v.is_empty() && v != VERSION_PLACEHOLDER)
+}
+
+/// Health summary appended to root `--help`, so an agent can notice in one command
+/// that an upgraded CLI has left the installed skill behind. Silent when nothing is
+/// installed anywhere, to avoid nagging users who do not use agent tooling.
+pub fn help_section() -> Option<String> {
+    let targets = resolve_targets(None).ok()?;
+    let current = version::cli_version();
+
+    let mut stale = Vec::new();
+    let mut installed = 0usize;
+    for target in &targets {
+        let dir = target.skills_dir.join(SKILL_NAME);
+        if !dir.join("SKILL.md").exists() {
+            continue;
+        }
+        installed += 1;
+
+        let found = installed_version(&dir).unwrap_or_default();
+        if found != current {
+            let found = if found.is_empty() { "unknown".to_string() } else { found };
+            stale.push(format!("{} ({found})", target.label));
+        }
+    }
+
+    if installed == 0 {
+        return None;
+    }
+
+    if stale.is_empty() {
+        return Some(format!(
+            "Agent tooling:\n  Yaak skill is installed and up to date ({current})"
+        ));
+    }
+
+    Some(format!(
+        "Agent tooling:\n  Yaak skill is out of date for {} — CLI is {current}\n  Run `yaak agent install`, then restart your coding tool",
+        stale.join(", ")
+    ))
+}
+
+/// Flatten the embedded skill directory into its files, recursing into subdirectories.
+fn walk<'a>(dir: &'a Dir<'a>) -> Vec<&'a include_dir::File<'a>> {
+    let mut files: Vec<_> = dir.files().collect();
+    for child in dir.dirs() {
+        files.extend(walk(child));
+    }
+    files
+}
+
+/// `~/.agents/skills` is the cross-tool location and is always written. Tool-specific
+/// directories are written only when that tool is already set up on this machine, so
+/// installing never creates a config directory for a tool the user does not use.
+fn resolve_targets(requested: Option<Vec<String>>) -> CommandResult<Vec<Target>> {
+    let home = dirs::home_dir().ok_or("Could not determine home directory")?;
+
+    let known: Vec<(&str, PathBuf, PathBuf)> = vec![
+        ("agents", home.join(".agents"), home.join(".agents").join("skills")),
+        ("claude-code", home.join(".claude"), home.join(".claude").join("skills")),
+        ("cursor", home.join(".cursor"), home.join(".cursor").join("skills")),
+        ("codex", home.join(".codex"), home.join(".codex").join("skills")),
+        ("opencode", home.join(".opencode"), home.join(".opencode").join("skills")),
+    ];
+
+    if let Some(requested) = requested {
+        let mut targets = Vec::new();
+        for name in requested {
+            let found =
+                known.iter().find(|(label, _, _)| *label == name.as_str()).ok_or_else(|| {
+                    let names: Vec<_> = known.iter().map(|(l, _, _)| *l).collect();
+                    format!("Unknown agent '{name}'. Known agents: {}", names.join(", "))
+                })?;
+            targets.push(Target { label: found.0, skills_dir: found.2.clone() });
+        }
+        return Ok(targets);
+    }
+
+    let targets: Vec<Target> = known
+        .into_iter()
+        .filter(|(label, marker, _)| *label == "agents" || marker.exists())
+        .map(|(label, _, skills_dir)| Target { label, skills_dir })
+        .collect();
+
+    Ok(targets)
+}
diff --git a/crates-cli/yaak-cli/src/commands/auth.rs b/crates-cli/yaak-cli/src/commands/auth.rs
new file mode 100644
index 0000000..b0ece3f
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/auth.rs
@@ -0,0 +1,596 @@
+use crate::cli::{AuthArgs, AuthCommands};
+use crate::ui;
+use crate::utils::http;
+use base64::Engine as _;
+use keyring::Entry;
+use rand::RngCore;
+use rand::rngs::OsRng;
+use reqwest::Url;
+use serde_json::Value;
+use sha2::{Digest, Sha256};
+use std::io::{self, IsTerminal, Write};
+use std::time::Duration;
+use tokio::io::{AsyncReadExt, AsyncWriteExt};
+use tokio::net::{TcpListener, TcpStream};
+
+const OAUTH_CLIENT_ID: &str = "a1fe44800c2d7e803cad1b4bf07a291c";
+const KEYRING_USER: &str = "yaak";
+const AUTH_TIMEOUT: Duration = Duration::from_secs(300);
+const CALLBACK_READ_TIMEOUT: Duration = Duration::from_secs(10);
+const MAX_REQUEST_BYTES: usize = 16 * 1024;
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+enum Environment {
+    Production,
+    Staging,
+    Development,
+}
+
+impl Environment {
+    fn app_base_url(self) -> &'static str {
+        match self {
+            Environment::Production => "https://yaak.app",
+            Environment::Staging => "https://todo.yaak.app",
+            Environment::Development => "http://localhost:9444",
+        }
+    }
+
+    fn api_base_url(self) -> &'static str {
+        match self {
+            Environment::Production => "https://api.yaak.app",
+            Environment::Staging => "https://todo.yaak.app",
+            Environment::Development => "http://localhost:9444",
+        }
+    }
+
+    fn keyring_service(self) -> &'static str {
+        match self {
+            Environment::Production => "app.yaak.cli.Token",
+            Environment::Staging => "app.yaak.cli.staging.Token",
+            Environment::Development => "app.yaak.cli.dev.Token",
+        }
+    }
+}
+
+struct OAuthFlow {
+    app_base_url: String,
+    auth_url: Url,
+    token_url: String,
+    redirect_url: String,
+    state: String,
+    code_verifier: String,
+}
+
+pub async fn run(args: AuthArgs) -> i32 {
+    let result = match args.command {
+        AuthCommands::Login => login().await,
+        AuthCommands::Logout => logout(),
+        AuthCommands::Whoami => whoami().await,
+    };
+
+    match result {
+        Ok(()) => 0,
+        Err(error) => {
+            ui::error(&error);
+            1
+        }
+    }
+}
+
+async fn login() -> CommandResult {
+    let environment = current_environment();
+
+    let listener = TcpListener::bind("127.0.0.1:0")
+        .await
+        .map_err(|e| format!("Failed to start OAuth callback server: {e}"))?;
+    let port = listener
+        .local_addr()
+        .map_err(|e| format!("Failed to determine callback server port: {e}"))?
+        .port();
+
+    let oauth = build_oauth_flow(environment, port)?;
+
+    ui::info(&format!("Initiating login to {}", oauth.auth_url));
+    if !confirm_open_browser()? {
+        ui::info("Login canceled");
+        return Ok(());
+    }
+
+    if let Err(err) = webbrowser::open(oauth.auth_url.as_ref()) {
+        ui::warning(&format!("Failed to open browser: {err}"));
+        ui::info(&format!("Open this URL manually:\n{}", oauth.auth_url));
+    }
+    ui::info("Waiting for authentication...");
+
+    let code = tokio::select! {
+        result = receive_oauth_code(listener, &oauth.state, &oauth.app_base_url) => result?,
+        _ = tokio::signal::ctrl_c() => {
+            return Err("Interrupted by user".to_string());
+        }
+        _ = tokio::time::sleep(AUTH_TIMEOUT) => {
+            return Err("Timeout waiting for authentication".to_string());
+        }
+    };
+
+    let token = exchange_access_token(&oauth, &code).await?;
+    store_auth_token(environment, &token)?;
+    ui::success("Authentication successful!");
+    Ok(())
+}
+
+fn logout() -> CommandResult {
+    delete_auth_token(current_environment())?;
+    ui::success("Signed out of Yaak");
+    Ok(())
+}
+
+async fn whoami() -> CommandResult {
+    let environment = current_environment();
+    let token = match get_auth_token(environment)? {
+        Some(token) => token,
+        None => {
+            ui::warning("Not logged in");
+            ui::info("Please run `yaak auth login`");
+            return Ok(());
+        }
+    };
+
+    let url = format!("{}/api/v1/whoami", environment.api_base_url());
+    let response = http::build_client(Some(&token))?
+        .get(url)
+        .send()
+        .await
+        .map_err(|e| format!("Failed to call whoami endpoint: {e}"))?;
+
+    let status = response.status();
+    let body =
+        response.text().await.map_err(|e| format!("Failed to read whoami response body: {e}"))?;
+
+    if !status.is_success() {
+        if status.as_u16() == 401 {
+            let _ = delete_auth_token(environment);
+            return Err(
+                "Unauthorized to access CLI. Run `yaak auth login` to refresh credentials."
+                    .to_string(),
+            );
+        }
+        return Err(http::parse_api_error(status.as_u16(), &body));
+    }
+
+    println!("{body}");
+    Ok(())
+}
+
+fn current_environment() -> Environment {
+    let value = std::env::var("ENVIRONMENT").ok();
+    parse_environment(value.as_deref())
+}
+
+fn parse_environment(value: Option<&str>) -> Environment {
+    match value {
+        Some("staging") => Environment::Staging,
+        Some("development") => Environment::Development,
+        _ => Environment::Production,
+    }
+}
+
+fn build_oauth_flow(environment: Environment, callback_port: u16) -> CommandResult<OAuthFlow> {
+    let code_verifier = random_hex(32);
+    let state = random_hex(24);
+    let redirect_url = format!("http://127.0.0.1:{callback_port}/oauth/callback");
+
+    let code_challenge = base64::engine::general_purpose::URL_SAFE_NO_PAD
+        .encode(Sha256::digest(code_verifier.as_bytes()));
+
+    let mut auth_url = Url::parse(&format!("{}/login/oauth/authorize", environment.app_base_url()))
+        .map_err(|e| format!("Failed to build OAuth authorize URL: {e}"))?;
+    auth_url
+        .query_pairs_mut()
+        .append_pair("response_type", "code")
+        .append_pair("client_id", OAUTH_CLIENT_ID)
+        .append_pair("redirect_uri", &redirect_url)
+        .append_pair("state", &state)
+        .append_pair("code_challenge_method", "S256")
+        .append_pair("code_challenge", &code_challenge);
+
+    Ok(OAuthFlow {
+        app_base_url: environment.app_base_url().to_string(),
+        auth_url,
+        token_url: format!("{}/login/oauth/access_token", environment.app_base_url()),
+        redirect_url,
+        state,
+        code_verifier,
+    })
+}
+
+async fn receive_oauth_code(
+    listener: TcpListener,
+    expected_state: &str,
+    app_base_url: &str,
+) -> CommandResult<String> {
+    // Browsers speculatively open extra connections that may never carry a
+    // request. Handle each connection concurrently so an idle socket can't
+    // block the one carrying the real callback.
+    let (tx, mut rx) = tokio::sync::mpsc::channel::<CommandResult<String>>(1);
+
+    loop {
+        tokio::select! {
+            accepted = listener.accept() => {
+                let (stream, _) = accepted
+                    .map_err(|e| format!("OAuth callback server accept error: {e}"))?;
+                tokio::spawn(handle_callback_connection(
+                    stream,
+                    expected_state.to_string(),
+                    app_base_url.to_string(),
+                    tx.clone(),
+                ));
+            }
+            result = rx.recv() => {
+                if let Some(result) = result {
+                    return result;
+                }
+            }
+        }
+    }
+}
+
+async fn handle_callback_connection(
+    mut stream: TcpStream,
+    expected_state: String,
+    app_base_url: String,
+    tx: tokio::sync::mpsc::Sender<CommandResult<String>>,
+) {
+    let parsed = match tokio::time::timeout(
+        CALLBACK_READ_TIMEOUT,
+        parse_callback_request(&mut stream),
+    )
+    .await
+    {
+        Ok(parsed) => parsed,
+        Err(_) => return, // Idle speculative connection; drop it
+    };
+
+    match parsed {
+        Ok((state, code)) => {
+            if state != expected_state {
+                let _ = write_bad_request(&mut stream, "Invalid OAuth state").await;
+                return;
+            }
+
+            let success_redirect = format!("{app_base_url}/login/oauth/success");
+            let result = match write_redirect(&mut stream, &success_redirect).await {
+                Ok(()) => Ok(code),
+                Err(e) => Err(format!("Failed responding to OAuth callback: {e}")),
+            };
+            let _ = tx.send(result).await;
+        }
+        Err(error) => {
+            let _ = write_bad_request(&mut stream, &error).await;
+            if error.starts_with("OAuth provider returned error:") {
+                let _ = tx.send(Err(error)).await;
+            }
+        }
+    }
+}
+
+async fn parse_callback_request(stream: &mut TcpStream) -> CommandResult<(String, String)> {
+    let target = read_http_target(stream).await?;
+    if !target.starts_with("/oauth/callback") {
+        return Err("Expected /oauth/callback path".to_string());
+    }
+
+    let url = Url::parse(&format!("http://127.0.0.1{target}"))
+        .map_err(|e| format!("Failed to parse callback URL: {e}"))?;
+    let mut state: Option<String> = None;
+    let mut code: Option<String> = None;
+    let mut oauth_error: Option<String> = None;
+    let mut oauth_error_description: Option<String> = None;
+
+    for (k, v) in url.query_pairs() {
+        if k == "state" {
+            state = Some(v.into_owned());
+        } else if k == "code" {
+            code = Some(v.into_owned());
+        } else if k == "error" {
+            oauth_error = Some(v.into_owned());
+        } else if k == "error_description" {
+            oauth_error_description = Some(v.into_owned());
+        }
+    }
+
+    if let Some(error) = oauth_error {
+        let mut message = format!("OAuth provider returned error: {error}");
+        if let Some(description) = oauth_error_description.filter(|d| !d.is_empty()) {
+            message.push_str(&format!(" ({description})"));
+        }
+        return Err(message);
+    }
+
+    let state = state.ok_or_else(|| "Missing 'state' query parameter".to_string())?;
+    let code = code.ok_or_else(|| "Missing 'code' query parameter".to_string())?;
+
+    if code.is_empty() {
+        return Err("Missing 'code' query parameter".to_string());
+    }
+
+    Ok((state, code))
+}
+
+async fn read_http_target(stream: &mut TcpStream) -> CommandResult<String> {
+    let mut buf = vec![0_u8; MAX_REQUEST_BYTES];
+    let mut total_read = 0_usize;
+
+    loop {
+        let n = stream
+            .read(&mut buf[total_read..])
+            .await
+            .map_err(|e| format!("Failed reading callback request: {e}"))?;
+        if n == 0 {
+            break;
+        }
+        total_read += n;
+
+        if buf[..total_read].windows(4).any(|w| w == b"\r\n\r\n") {
+            break;
+        }
+
+        if total_read == MAX_REQUEST_BYTES {
+            return Err("OAuth callback request too large".to_string());
+        }
+    }
+
+    let req = String::from_utf8_lossy(&buf[..total_read]);
+    let request_line =
+        req.lines().next().ok_or_else(|| "Invalid callback request line".to_string())?;
+    let mut parts = request_line.split_whitespace();
+    let method = parts.next().unwrap_or_default();
+    let target = parts.next().unwrap_or_default();
+
+    if method != "GET" {
+        return Err(format!("Expected GET callback request, got '{method}'"));
+    }
+    if target.is_empty() {
+        return Err("Missing callback request target".to_string());
+    }
+
+    Ok(target.to_string())
+}
+
+async fn write_bad_request(stream: &mut TcpStream, message: &str) -> std::io::Result<()> {
+    let body = format!("Failed to authenticate: {message}");
+    let response = format!(
+        "HTTP/1.1 400 Bad Request\r\nContent-Type: text/plain; charset=utf-8\r\nContent-Length: {}\r\nConnection: close\r\n\r\n{}",
+        body.len(),
+        body
+    );
+    stream.write_all(response.as_bytes()).await?;
+    stream.shutdown().await
+}
+
+async fn write_redirect(stream: &mut TcpStream, location: &str) -> std::io::Result<()> {
+    let response = format!(
+        "HTTP/1.1 302 Found\r\nLocation: {location}\r\nContent-Length: 0\r\nConnection: close\r\n\r\n"
+    );
+    stream.write_all(response.as_bytes()).await?;
+    stream.shutdown().await
+}
+
+async fn exchange_access_token(oauth: &OAuthFlow, code: &str) -> CommandResult<String> {
+    let response = http::build_client(None)?
+        .post(&oauth.token_url)
+        .form(&[
+            ("grant_type", "authorization_code"),
+            ("client_id", OAUTH_CLIENT_ID),
+            ("code", code),
+            ("redirect_uri", oauth.redirect_url.as_str()),
+            ("code_verifier", oauth.code_verifier.as_str()),
+        ])
+        .send()
+        .await
+        .map_err(|e| format!("Failed to exchange OAuth code for access token: {e}"))?;
+
+    let status = response.status();
+    let body =
+        response.text().await.map_err(|e| format!("Failed to read token response body: {e}"))?;
+
+    if !status.is_success() {
+        return Err(format!(
+            "Failed to fetch access token: status={} body={}",
+            status.as_u16(),
+            body
+        ));
+    }
+
+    let parsed: Value =
+        serde_json::from_str(&body).map_err(|e| format!("Invalid token response JSON: {e}"))?;
+    let token = parsed
+        .get("access_token")
+        .and_then(Value::as_str)
+        .filter(|s| !s.is_empty())
+        .ok_or_else(|| format!("Token response missing access_token: {body}"))?;
+
+    Ok(token.to_string())
+}
+
+fn keyring_entry(environment: Environment) -> CommandResult<Entry> {
+    Entry::new(environment.keyring_service(), KEYRING_USER)
+        .map_err(|e| format!("Failed to initialize auth keyring entry: {e}"))
+}
+
+fn get_auth_token(environment: Environment) -> CommandResult<Option<String>> {
+    let entry = keyring_entry(environment)?;
+    match entry.get_password() {
+        Ok(token) => Ok(Some(token)),
+        Err(keyring::Error::NoEntry) => Ok(None),
+        Err(err) => Err(format!("Failed to read auth token: {err}")),
+    }
+}
+
+fn store_auth_token(environment: Environment, token: &str) -> CommandResult {
+    let entry = keyring_entry(environment)?;
+    entry.set_password(token).map_err(|e| format!("Failed to store auth token: {e}"))
+}
+
+fn delete_auth_token(environment: Environment) -> CommandResult {
+    let entry = keyring_entry(environment)?;
+    match entry.delete_credential() {
+        Ok(()) | Err(keyring::Error::NoEntry) => Ok(()),
+        Err(err) => Err(format!("Failed to delete auth token: {err}")),
+    }
+}
+
+fn random_hex(bytes: usize) -> String {
+    let mut data = vec![0_u8; bytes];
+    OsRng.fill_bytes(&mut data);
+    hex::encode(data)
+}
+
+fn confirm_open_browser() -> CommandResult<bool> {
+    if !io::stdin().is_terminal() {
+        return Ok(true);
+    }
+
+    loop {
+        print!("Open default browser? [Y/n]: ");
+        io::stdout().flush().map_err(|e| format!("Failed to flush stdout: {e}"))?;
+
+        let mut input = String::new();
+        io::stdin().read_line(&mut input).map_err(|e| format!("Failed to read input: {e}"))?;
+
+        match input.trim().to_ascii_lowercase().as_str() {
+            "" | "y" | "yes" => return Ok(true),
+            "n" | "no" => return Ok(false),
+            _ => ui::warning("Please answer y or n"),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn environment_mapping() {
+        assert_eq!(parse_environment(Some("staging")), Environment::Staging);
+        assert_eq!(parse_environment(Some("development")), Environment::Development);
+        assert_eq!(parse_environment(Some("production")), Environment::Production);
+        assert_eq!(parse_environment(None), Environment::Production);
+    }
+
+    #[tokio::test]
+    async fn parses_callback_request() {
+        let listener = TcpListener::bind("127.0.0.1:0").await.expect("bind");
+        let addr = listener.local_addr().expect("local addr");
+
+        let server = tokio::spawn(async move {
+            let (mut stream, _) = listener.accept().await.expect("accept");
+            parse_callback_request(&mut stream).await
+        });
+
+        let mut client = TcpStream::connect(addr).await.expect("connect");
+        client
+            .write_all(
+                b"GET /oauth/callback?code=abc123&state=xyz HTTP/1.1\r\nHost: localhost\r\n\r\n",
+            )
+            .await
+            .expect("write");
+
+        let parsed = server.await.expect("join").expect("parse");
+        assert_eq!(parsed.0, "xyz");
+        assert_eq!(parsed.1, "abc123");
+    }
+
+    #[tokio::test]
+    async fn parse_callback_request_oauth_error() {
+        let listener = TcpListener::bind("127.0.0.1:0").await.expect("bind");
+        let addr = listener.local_addr().expect("local addr");
+
+        let server = tokio::spawn(async move {
+            let (mut stream, _) = listener.accept().await.expect("accept");
+            parse_callback_request(&mut stream).await
+        });
+
+        let mut client = TcpStream::connect(addr).await.expect("connect");
+        client
+            .write_all(
+                b"GET /oauth/callback?error=access_denied&error_description=User%20denied&state=xyz HTTP/1.1\r\nHost: localhost\r\n\r\n",
+            )
+            .await
+            .expect("write");
+
+        let err = server.await.expect("join").expect_err("should fail");
+        assert!(err.contains("OAuth provider returned error: access_denied"));
+        assert!(err.contains("User denied"));
+    }
+
+    #[tokio::test]
+    async fn receive_oauth_code_ignores_idle_speculative_connections() {
+        let listener = TcpListener::bind("127.0.0.1:0").await.expect("bind");
+        let addr = listener.local_addr().expect("local addr");
+
+        let server = tokio::spawn(async move {
+            receive_oauth_code(listener, "expected-state", "http://localhost:9444").await
+        });
+
+        // Browsers preconnect sockets that never carry a request; these must
+        // not block the connection carrying the real callback.
+        let _idle1 = TcpStream::connect(addr).await.expect("connect idle 1");
+        let _idle2 = TcpStream::connect(addr).await.expect("connect idle 2");
+        tokio::time::sleep(std::time::Duration::from_millis(100)).await;
+
+        let mut client = TcpStream::connect(addr).await.expect("connect");
+        client
+            .write_all(
+                b"GET /oauth/callback?code=abc123&state=expected-state HTTP/1.1\r\nHost: localhost\r\n\r\n",
+            )
+            .await
+            .expect("write");
+
+        let code = tokio::time::timeout(std::time::Duration::from_secs(2), server)
+            .await
+            .expect("idle connections must not block the real callback")
+            .expect("join")
+            .expect("should return code");
+        assert_eq!(code, "abc123");
+    }
+
+    #[tokio::test]
+    async fn receive_oauth_code_fails_fast_on_provider_error() {
+        let listener = TcpListener::bind("127.0.0.1:0").await.expect("bind");
+        let addr = listener.local_addr().expect("local addr");
+
+        let server = tokio::spawn(async move {
+            receive_oauth_code(listener, "expected-state", "http://localhost:9444").await
+        });
+
+        let mut client = TcpStream::connect(addr).await.expect("connect");
+        client
+            .write_all(
+                b"GET /oauth/callback?error=access_denied&state=expected-state HTTP/1.1\r\nHost: localhost\r\n\r\n",
+            )
+            .await
+            .expect("write");
+
+        let result = tokio::time::timeout(std::time::Duration::from_secs(2), server)
+            .await
+            .expect("should not timeout")
+            .expect("join");
+        let err = result.expect_err("should return oauth error");
+        assert!(err.contains("OAuth provider returned error: access_denied"));
+    }
+
+    #[test]
+    fn builds_oauth_flow_with_pkce() {
+        let flow = build_oauth_flow(Environment::Development, 8080).expect("flow");
+        assert!(flow.auth_url.as_str().contains("code_challenge_method=S256"));
+        assert!(
+            flow.auth_url
+                .as_str()
+                .contains("redirect_uri=http%3A%2F%2F127.0.0.1%3A8080%2Foauth%2Fcallback")
+        );
+        assert_eq!(flow.redirect_url, "http://127.0.0.1:8080/oauth/callback");
+        assert_eq!(flow.token_url, "http://localhost:9444/login/oauth/access_token");
+    }
+}
diff --git a/crates-cli/yaak-cli/src/commands/cookie_jar.rs b/crates-cli/yaak-cli/src/commands/cookie_jar.rs
new file mode 100644
index 0000000..3494cde
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/cookie_jar.rs
@@ -0,0 +1,42 @@
+use crate::cli::{CookieJarArgs, CookieJarCommands};
+use crate::context::CliContext;
+use crate::utils::workspace::resolve_workspace_id;
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+pub fn run(ctx: &CliContext, args: CookieJarArgs) -> i32 {
+    let result = match args.command {
+        CookieJarCommands::List { workspace_id } => list(ctx, workspace_id.as_deref()),
+    };
+
+    match result {
+        Ok(()) => 0,
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+fn list(ctx: &CliContext, workspace_id: Option<&str>) -> CommandResult {
+    let workspace_id = resolve_workspace_id(ctx, workspace_id, "cookie-jar list")?;
+    let cookie_jars = ctx
+        .db()
+        .list_cookie_jars(&workspace_id)
+        .map_err(|e| format!("Failed to list cookie jars: {e}"))?;
+
+    if cookie_jars.is_empty() {
+        println!("No cookie jars found in workspace {}", workspace_id);
+    } else {
+        for cookie_jar in cookie_jars {
+            println!(
+                "{} - {} ({} cookies)",
+                cookie_jar.id,
+                cookie_jar.name,
+                cookie_jar.cookies.len()
+            );
+        }
+    }
+
+    Ok(())
+}
diff --git a/crates-cli/yaak-cli/src/commands/environment.rs b/crates-cli/yaak-cli/src/commands/environment.rs
new file mode 100644
index 0000000..856417a
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/environment.rs
@@ -0,0 +1,179 @@
+use crate::cli::{EnvironmentArgs, EnvironmentCommands};
+use crate::context::CliContext;
+use crate::utils::confirm::confirm_delete;
+use crate::utils::json::{
+    apply_merge_patch, is_json_shorthand, merge_workspace_id_arg, parse_optional_json,
+    parse_required_json, require_id, validate_create_id,
+};
+use crate::utils::schema::append_agent_hints;
+use crate::utils::workspace::resolve_workspace_id;
+use schemars::schema_for;
+use yaak_models::models::Environment;
+use yaak_models::util::UpdateSource;
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+pub fn run(ctx: &CliContext, args: EnvironmentArgs) -> i32 {
+    let result = match args.command {
+        EnvironmentCommands::List { workspace_id } => list(ctx, workspace_id.as_deref()),
+        EnvironmentCommands::Schema { pretty } => schema(pretty),
+        EnvironmentCommands::Show { environment_id } => show(ctx, &environment_id),
+        EnvironmentCommands::Create { workspace_id, name, json } => {
+            create(ctx, workspace_id, name, json)
+        }
+        EnvironmentCommands::Update { json, json_input } => update(ctx, json, json_input),
+        EnvironmentCommands::Delete { environment_id, yes } => delete(ctx, &environment_id, yes),
+    };
+
+    match result {
+        Ok(()) => 0,
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+fn schema(pretty: bool) -> CommandResult {
+    let mut schema = serde_json::to_value(schema_for!(Environment))
+        .map_err(|e| format!("Failed to serialize environment schema: {e}"))?;
+    append_agent_hints(&mut schema);
+
+    let output =
+        if pretty { serde_json::to_string_pretty(&schema) } else { serde_json::to_string(&schema) }
+            .map_err(|e| format!("Failed to format environment schema JSON: {e}"))?;
+    println!("{output}");
+    Ok(())
+}
+
+fn list(ctx: &CliContext, workspace_id: Option<&str>) -> CommandResult {
+    let workspace_id = resolve_workspace_id(ctx, workspace_id, "environment list")?;
+    let environments = ctx
+        .query_manager()
+        .with_tx(|tx| {
+            tx.ensure_base_environment(&workspace_id)?;
+            tx.list_environments(&workspace_id)
+        })
+        .map_err(|e| format!("Failed to list environments: {e}"))?;
+
+    if environments.is_empty() {
+        println!("No environments found in workspace {}", workspace_id);
+    } else {
+        for environment in environments {
+            println!("{} - {} ({})", environment.id, environment.name, environment.parent_model);
+        }
+    }
+    Ok(())
+}
+
+fn show(ctx: &CliContext, environment_id: &str) -> CommandResult {
+    let environment = ctx
+        .db()
+        .get_environment(environment_id)
+        .map_err(|e| format!("Failed to get environment: {e}"))?;
+    let output = serde_json::to_string_pretty(&environment)
+        .map_err(|e| format!("Failed to serialize environment: {e}"))?;
+    println!("{output}");
+    Ok(())
+}
+
+fn create(
+    ctx: &CliContext,
+    workspace_id: Option<String>,
+    name: Option<String>,
+    json: Option<String>,
+) -> CommandResult {
+    let json_shorthand =
+        workspace_id.as_deref().filter(|v| is_json_shorthand(v)).map(str::to_owned);
+    let workspace_id_arg = workspace_id.filter(|v| !is_json_shorthand(v));
+
+    let payload = parse_optional_json(json, json_shorthand, "environment create")?;
+
+    if let Some(payload) = payload {
+        if name.is_some() {
+            return Err("environment create cannot combine --name with JSON payload".to_string());
+        }
+
+        validate_create_id(&payload, "environment")?;
+        let mut environment: Environment = serde_json::from_value(payload)
+            .map_err(|e| format!("Failed to parse environment create JSON: {e}"))?;
+        let fallback_workspace_id =
+            if workspace_id_arg.is_none() && environment.workspace_id.is_empty() {
+                Some(resolve_workspace_id(ctx, None, "environment create")?)
+            } else {
+                None
+            };
+        merge_workspace_id_arg(
+            workspace_id_arg.as_deref().or(fallback_workspace_id.as_deref()),
+            &mut environment.workspace_id,
+            "environment create",
+        )?;
+
+        if environment.parent_model.is_empty() {
+            environment.parent_model = "environment".to_string();
+        }
+
+        let created = ctx
+            .query_manager()
+            .with_tx(|tx| tx.upsert_environment(&environment, &UpdateSource::Sync))
+            .map_err(|e| format!("Failed to create environment: {e}"))?;
+
+        println!("Created environment: {}", created.id);
+        return Ok(());
+    }
+
+    let workspace_id =
+        resolve_workspace_id(ctx, workspace_id_arg.as_deref(), "environment create")?;
+    let name = name.ok_or_else(|| {
+        "environment create requires --name unless JSON payload is provided".to_string()
+    })?;
+
+    let environment = Environment {
+        workspace_id,
+        name,
+        parent_model: "environment".to_string(),
+        ..Default::default()
+    };
+
+    let created = ctx
+        .query_manager()
+        .with_tx(|tx| tx.upsert_environment(&environment, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to create environment: {e}"))?;
+
+    println!("Created environment: {}", created.id);
+    Ok(())
+}
+
+fn update(ctx: &CliContext, json: Option<String>, json_input: Option<String>) -> CommandResult {
+    let patch = parse_required_json(json, json_input, "environment update")?;
+    let id = require_id(&patch, "environment update")?;
+
+    let existing = ctx
+        .db()
+        .get_environment(&id)
+        .map_err(|e| format!("Failed to get environment for update: {e}"))?;
+    let updated = apply_merge_patch(&existing, &patch, &id, "environment update")?;
+
+    let saved = ctx
+        .query_manager()
+        .with_tx(|tx| tx.upsert_environment(&updated, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to update environment: {e}"))?;
+
+    println!("Updated environment: {}", saved.id);
+    Ok(())
+}
+
+fn delete(ctx: &CliContext, environment_id: &str, yes: bool) -> CommandResult {
+    if !yes && !confirm_delete("environment", environment_id) {
+        println!("Aborted");
+        return Ok(());
+    }
+
+    let deleted = ctx
+        .query_manager()
+        .with_tx(|tx| tx.delete_environment_by_id(environment_id, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to delete environment: {e}"))?;
+
+    println!("Deleted environment: {}", deleted.id);
+    Ok(())
+}
diff --git a/crates-cli/yaak-cli/src/commands/folder.rs b/crates-cli/yaak-cli/src/commands/folder.rs
new file mode 100644
index 0000000..7b90815
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/folder.rs
@@ -0,0 +1,159 @@
+use crate::cli::{FolderArgs, FolderCommands};
+use crate::context::CliContext;
+use crate::utils::confirm::confirm_delete;
+use crate::utils::json::{
+    apply_merge_patch, is_json_shorthand, merge_workspace_id_arg, parse_optional_json,
+    parse_required_json, require_id, validate_create_id,
+};
+use crate::utils::schema::append_agent_hints;
+use crate::utils::workspace::resolve_workspace_id;
+use schemars::schema_for;
+use yaak_models::models::Folder;
+use yaak_models::util::UpdateSource;
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+pub fn run(ctx: &CliContext, args: FolderArgs) -> i32 {
+    let result = match args.command {
+        FolderCommands::List { workspace_id } => list(ctx, workspace_id.as_deref()),
+        FolderCommands::Schema { pretty } => schema(pretty),
+        FolderCommands::Show { folder_id } => show(ctx, &folder_id),
+        FolderCommands::Create { workspace_id, name, json } => {
+            create(ctx, workspace_id, name, json)
+        }
+        FolderCommands::Update { json, json_input } => update(ctx, json, json_input),
+        FolderCommands::Delete { folder_id, yes } => delete(ctx, &folder_id, yes),
+    };
+
+    match result {
+        Ok(()) => 0,
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+fn schema(pretty: bool) -> CommandResult {
+    let mut schema = serde_json::to_value(schema_for!(Folder))
+        .map_err(|e| format!("Failed to serialize folder schema: {e}"))?;
+    append_agent_hints(&mut schema);
+
+    let output =
+        if pretty { serde_json::to_string_pretty(&schema) } else { serde_json::to_string(&schema) }
+            .map_err(|e| format!("Failed to format folder schema JSON: {e}"))?;
+    println!("{output}");
+    Ok(())
+}
+
+fn list(ctx: &CliContext, workspace_id: Option<&str>) -> CommandResult {
+    let workspace_id = resolve_workspace_id(ctx, workspace_id, "folder list")?;
+    let folders =
+        ctx.db().list_folders(&workspace_id).map_err(|e| format!("Failed to list folders: {e}"))?;
+    if folders.is_empty() {
+        println!("No folders found in workspace {}", workspace_id);
+    } else {
+        for folder in folders {
+            println!("{} - {}", folder.id, folder.name);
+        }
+    }
+    Ok(())
+}
+
+fn show(ctx: &CliContext, folder_id: &str) -> CommandResult {
+    let folder =
+        ctx.db().get_folder(folder_id).map_err(|e| format!("Failed to get folder: {e}"))?;
+    let output = serde_json::to_string_pretty(&folder)
+        .map_err(|e| format!("Failed to serialize folder: {e}"))?;
+    println!("{output}");
+    Ok(())
+}
+
+fn create(
+    ctx: &CliContext,
+    workspace_id: Option<String>,
+    name: Option<String>,
+    json: Option<String>,
+) -> CommandResult {
+    let json_shorthand =
+        workspace_id.as_deref().filter(|v| is_json_shorthand(v)).map(str::to_owned);
+    let workspace_id_arg = workspace_id.filter(|v| !is_json_shorthand(v));
+
+    let payload = parse_optional_json(json, json_shorthand, "folder create")?;
+
+    if let Some(payload) = payload {
+        if name.is_some() {
+            return Err("folder create cannot combine --name with JSON payload".to_string());
+        }
+
+        validate_create_id(&payload, "folder")?;
+        let mut folder: Folder = serde_json::from_value(payload)
+            .map_err(|e| format!("Failed to parse folder create JSON: {e}"))?;
+        let fallback_workspace_id = if workspace_id_arg.is_none() && folder.workspace_id.is_empty()
+        {
+            Some(resolve_workspace_id(ctx, None, "folder create")?)
+        } else {
+            None
+        };
+        merge_workspace_id_arg(
+            workspace_id_arg.as_deref().or(fallback_workspace_id.as_deref()),
+            &mut folder.workspace_id,
+            "folder create",
+        )?;
+
+        let created = ctx
+            .query_manager()
+            .with_tx(|tx| tx.upsert_folder(&folder, &UpdateSource::Sync))
+            .map_err(|e| format!("Failed to create folder: {e}"))?;
+
+        println!("Created folder: {}", created.id);
+        return Ok(());
+    }
+
+    let workspace_id = resolve_workspace_id(ctx, workspace_id_arg.as_deref(), "folder create")?;
+    let name = name.ok_or_else(|| {
+        "folder create requires --name unless JSON payload is provided".to_string()
+    })?;
+
+    let folder = Folder { workspace_id, name, ..Default::default() };
+
+    let created = ctx
+        .query_manager()
+        .with_tx(|tx| tx.upsert_folder(&folder, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to create folder: {e}"))?;
+
+    println!("Created folder: {}", created.id);
+    Ok(())
+}
+
+fn update(ctx: &CliContext, json: Option<String>, json_input: Option<String>) -> CommandResult {
+    let patch = parse_required_json(json, json_input, "folder update")?;
+    let id = require_id(&patch, "folder update")?;
+
+    let existing =
+        ctx.db().get_folder(&id).map_err(|e| format!("Failed to get folder for update: {e}"))?;
+    let updated = apply_merge_patch(&existing, &patch, &id, "folder update")?;
+
+    let saved = ctx
+        .query_manager()
+        .with_tx(|tx| tx.upsert_folder(&updated, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to update folder: {e}"))?;
+
+    println!("Updated folder: {}", saved.id);
+    Ok(())
+}
+
+fn delete(ctx: &CliContext, folder_id: &str, yes: bool) -> CommandResult {
+    if !yes && !confirm_delete("folder", folder_id) {
+        println!("Aborted");
+        return Ok(());
+    }
+
+    let deleted = ctx
+        .query_manager()
+        .with_tx(|tx| tx.delete_folder_by_id(folder_id, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to delete folder: {e}"))?;
+
+    println!("Deleted folder: {}", deleted.id);
+    Ok(())
+}
diff --git a/crates-cli/yaak-cli/src/commands/import_export.rs b/crates-cli/yaak-cli/src/commands/import_export.rs
new file mode 100644
index 0000000..abd534e
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/import_export.rs
@@ -0,0 +1,277 @@
+use crate::cli::{ExportArgs, ImportArgs};
+use crate::context::CliContext;
+use crate::utils::workspace::resolve_workspace_id;
+use std::fs;
+use std::io::ErrorKind;
+use yaak_models::export::{self, ExportDataParams};
+use yaak::import;
+use yaak_models::util::{
+    BatchUpsertResult, ImportDestination, ImportOrigin, ImportPlanAction, ImportPlanItem,
+};
+use yaak_plugins::events::{ImportResources, PluginContext};
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+pub async fn run_import(ctx: &CliContext, args: ImportArgs) -> i32 {
+    match import(ctx, args).await {
+        Ok((result, items)) => {
+            println!("Imported {}", format_counts(&result));
+            if let Some(skipped) = format_skipped(&items) {
+                println!("Skipped {skipped}");
+            }
+            0
+        }
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+pub fn run_export(ctx: &CliContext, args: ExportArgs) -> i32 {
+    match export(ctx, args) {
+        Ok(count) => {
+            println!("Exported {count} workspace(s)");
+            0
+        }
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+async fn import(
+    ctx: &CliContext,
+    args: ImportArgs,
+) -> CommandResult<(BatchUpsertResult, Vec<ImportPlanItem>)> {
+    if let Some(workspace_id) = args.workspace_id.as_deref() {
+        ctx.db()
+            .get_workspace(workspace_id)
+            .map_err(|e| format!("Failed to get workspace '{workspace_id}': {e}"))?;
+    }
+
+    let file_contents = read_import_file(&args.file)?;
+    let plugin_context = PluginContext::new(None, args.workspace_id.clone());
+    let plugin_manager = ctx.plugin_manager();
+    let import_result = plugin_manager
+        .import_data(&plugin_context, &file_contents)
+        .await
+        .map_err(|e| format!("Failed to import data: {e}"))?;
+    let importer = import_result.importer;
+    let resources = import_result.resources;
+    let workspace_id = args.workspace_id;
+    if workspace_id.is_none() && resources_need_current_workspace(&resources) {
+        return Err(
+            "This import requires a workspace context. Provide --workspace-id <WORKSPACE_ID>."
+                .to_string(),
+        );
+    }
+    let destination = match workspace_id {
+        Some(workspace_id) => {
+            ImportDestination::ExistingWorkspace { workspace_id, folder_id: None }
+        }
+        None => ImportDestination::NewWorkspace,
+    };
+    let plan = import::plan_import_resources(
+        ctx.query_manager(),
+        importer,
+        destination,
+        resources,
+        import_result.source_keys,
+        Some(file_origin(&args.file)),
+    )
+    .map_err(|e| format!("Failed to plan import: {e}"))?;
+    let items = plan.items.clone();
+    let imported = import::commit_import_plan(ctx.query_manager(), plan)
+        .map_err(|e| format!("Failed to import data: {e}"))?;
+    Ok((imported, items))
+}
+
+fn file_origin(path: &std::path::Path) -> ImportOrigin {
+    let canonical = fs::canonicalize(path).unwrap_or_else(|_| path.to_path_buf());
+    let label = canonical
+        .file_name()
+        .map(|name| name.to_string_lossy().to_string())
+        .unwrap_or_else(|| path.display().to_string());
+    ImportOrigin { origin: canonical.to_string_lossy().to_string(), label }
+}
+
+/// Summarize what the default selection left untouched during a merging re-import.
+fn format_skipped(items: &[ImportPlanItem]) -> Option<String> {
+    let count = |action: ImportPlanAction| items.iter().filter(|i| i.action == action).count();
+    let plural = |n: usize| if n == 1 { "" } else { "s" };
+
+    let mut parts = Vec::new();
+    let deletions = count(ImportPlanAction::Delete);
+    if deletions > 0 {
+        parts.push(format!("{deletions} removed from source (not deleted locally)"));
+    }
+    let conflicts = count(ImportPlanAction::Conflict);
+    if conflicts > 0 {
+        parts.push(format!("{conflicts} conflict{} (kept local changes)", plural(conflicts)));
+    }
+    let keep_local = count(ImportPlanAction::KeepLocal);
+    if keep_local > 0 {
+        parts.push(format!("{keep_local} with local edits"));
+    }
+    let ignored = count(ImportPlanAction::Ignored);
+    if ignored > 0 {
+        parts.push(format!("{ignored} ignored"));
+    }
+    let unchanged = count(ImportPlanAction::Unchanged);
+    if unchanged > 0 {
+        parts.push(format!("{unchanged} unchanged"));
+    }
+
+    if parts.is_empty() { None } else { Some(parts.join(", ")) }
+}
+
+/// Write a file so that afterwards it is either the old one or the whole new one.
+///
+/// Writing in place would truncate the previous export before the new one existed, so an
+/// interrupted run loses both. Instead the bytes go to a neighbouring file, are flushed, and
+/// take the target's name in one step. The directory is flushed too: `sync_all` on a file
+/// promises its contents, not that the name it just gained will survive a power cut.
+fn write_durably(path: &std::path::Path, bytes: &[u8]) -> std::io::Result<()> {
+    use std::io::Write;
+
+    let dir = match path.parent() {
+        Some(p) if !p.as_os_str().is_empty() => p,
+        _ => std::path::Path::new("."),
+    };
+    // Alongside the target, because a rename is only atomic within one filesystem.
+    let mut name = path.file_name().unwrap_or_default().to_os_string();
+    name.push(format!(".tmp{}", std::process::id()));
+    let tmp = dir.join(name);
+
+    let write = |tmp: &std::path::Path| -> std::io::Result<()> {
+        let mut file = std::fs::File::create(tmp)?;
+        file.write_all(bytes)?;
+        file.sync_all()
+    };
+    if let Err(e) = write(&tmp) {
+        let _ = std::fs::remove_file(&tmp);
+        return Err(e);
+    }
+    if let Err(e) = std::fs::rename(&tmp, path) {
+        let _ = std::fs::remove_file(&tmp);
+        return Err(e);
+    }
+
+    // Only Unix lets a directory be opened for this. Elsewhere the rename is as much as
+    // the platform offers, and the file itself is already flushed.
+    #[cfg(unix)]
+    std::fs::File::open(dir)?.sync_all()?;
+
+    Ok(())
+}
+
+fn export(ctx: &CliContext, args: ExportArgs) -> CommandResult<usize> {
+    let workspace_ids = resolve_export_workspace_ids(ctx, args.workspace_ids, args.all)?;
+    let workspace_id_refs: Vec<&str> = workspace_ids.iter().map(String::as_str).collect();
+    let document = export::export_data(ExportDataParams {
+        query_manager: ctx.query_manager(),
+        yaak_version: env!("CARGO_PKG_VERSION"),
+        workspace_ids: workspace_id_refs,
+        include_private_environments: args.include_private_environments,
+    })
+    .map_err(|e| format!("Failed to export data: {e}"))?;
+    // Flushed before reporting success: an export is a backup, and a backup that the
+    // command called done while it was still only in the page cache is the one case
+    // where saying nothing went wrong is worst.
+    write_durably(&args.file, document.as_bytes())
+        .map_err(|e| format!("Failed to write {}: {e}", args.file.display()))?;
+
+    Ok(workspace_ids.len())
+}
+
+fn resolve_export_workspace_ids(
+    ctx: &CliContext,
+    workspace_ids: Vec<String>,
+    all: bool,
+) -> CommandResult<Vec<String>> {
+    if all {
+        let workspaces =
+            ctx.db().list_workspaces().map_err(|e| format!("Failed to list workspaces: {e}"))?;
+        if workspaces.is_empty() {
+            return Err("No workspaces found to export".to_string());
+        }
+        return Ok(workspaces.into_iter().map(|w| w.id).collect());
+    }
+
+    if workspace_ids.is_empty() {
+        return resolve_workspace_id(ctx, None, "export").map(|id| vec![id]);
+    }
+
+    for workspace_id in &workspace_ids {
+        ctx.db()
+            .get_workspace(workspace_id)
+            .map_err(|e| format!("Failed to get workspace '{workspace_id}': {e}"))?;
+    }
+    Ok(workspace_ids)
+}
+
+fn read_import_file(path: &std::path::Path) -> CommandResult<String> {
+    fs::read_to_string(path).map_err(|err| {
+        if err.kind() == ErrorKind::InvalidData {
+            format!(
+                "Import file must be UTF-8 text; binary files are not supported: {}",
+                path.display()
+            )
+        } else {
+            format!("Unable to read import file {}: {err}", path.display())
+        }
+    })
+}
+
+fn resources_need_current_workspace(resources: &ImportResources) -> bool {
+    resources.workspaces.iter().any(|w| w.id == "CURRENT_WORKSPACE")
+        || resources.environments.iter().any(|e| {
+            e.workspace_id == "CURRENT_WORKSPACE"
+                || e.parent_id.as_deref() == Some("CURRENT_WORKSPACE")
+        })
+        || resources.folders.iter().any(|f| {
+            f.workspace_id == "CURRENT_WORKSPACE"
+                || f.folder_id.as_deref() == Some("CURRENT_WORKSPACE")
+        })
+        || resources.http_requests.iter().any(|r| {
+            r.workspace_id == "CURRENT_WORKSPACE"
+                || r.folder_id.as_deref() == Some("CURRENT_WORKSPACE")
+        })
+        || resources.grpc_requests.iter().any(|r| {
+            r.workspace_id == "CURRENT_WORKSPACE"
+                || r.folder_id.as_deref() == Some("CURRENT_WORKSPACE")
+        })
+        || resources.websocket_requests.iter().any(|r| {
+            r.workspace_id == "CURRENT_WORKSPACE"
+                || r.folder_id.as_deref() == Some("CURRENT_WORKSPACE")
+        })
+}
+
+fn format_counts(result: &BatchUpsertResult) -> String {
+    let names = [
+        "workspace",
+        "environment",
+        "folder",
+        "HTTP request",
+        "gRPC request",
+        "WebSocket request",
+    ];
+    let counts = [
+        (result.workspaces.len(), names[0]),
+        (result.environments.len(), names[1]),
+        (result.folders.len(), names[2]),
+        (result.http_requests.len(), names[3]),
+        (result.grpc_requests.len(), names[4]),
+        (result.websocket_requests.len(), names[5]),
+    ];
+
+    let non_zero: Vec<String> = counts
+        .into_iter()
+        .filter(|(count, _)| *count > 0)
+        .map(|(count, name)| format!("{count} {name}{}", if count == 1 { "" } else { "s" }))
+        .collect();
+
+    if non_zero.is_empty() { "nothing".to_string() } else { non_zero.join(", ") }
+}
diff --git a/crates-cli/yaak-cli/src/commands/mod.rs b/crates-cli/yaak-cli/src/commands/mod.rs
new file mode 100644
index 0000000..901371f
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/mod.rs
@@ -0,0 +1,12 @@
+pub mod agent;
+pub mod auth;
+pub mod cookie_jar;
+pub mod environment;
+pub mod folder;
+pub mod import_export;
+pub mod plugin;
+pub mod request;
+pub mod response;
+pub mod send;
+pub mod template_function;
+pub mod workspace;
diff --git a/crates-cli/yaak-cli/src/commands/plugin.rs b/crates-cli/yaak-cli/src/commands/plugin.rs
new file mode 100644
index 0000000..23e3845
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/plugin.rs
@@ -0,0 +1,1018 @@
+use crate::cli::{GenerateArgs, InstallPluginArgs, PluginPathArg};
+use crate::context::CliContext;
+use crate::ui;
+use crate::utils::http;
+use keyring::Entry;
+use rand::Rng;
+use rolldown::{
+    BundleEvent, Bundler, BundlerOptions, ExperimentalOptions, InputItem, LogLevel, OutputFormat,
+    Platform, WatchOption, Watcher, WatcherEvent,
+};
+use serde::Deserialize;
+use std::collections::HashSet;
+use std::fs;
+use std::io::{self, IsTerminal, Read, Write};
+use std::path::{Path, PathBuf};
+use std::process::Command;
+use std::sync::Arc;
+use tokio::sync::Mutex;
+use walkdir::WalkDir;
+use yaak_api::{ApiClientKind, yaak_api_client};
+use yaak_models::models::{Plugin, PluginSource};
+use yaak_models::util::UpdateSource;
+use yaak_plugins::events::PluginContext;
+use yaak_plugins::install::download_and_install;
+use zip::CompressionMethod;
+use zip::write::SimpleFileOptions;
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+const KEYRING_USER: &str = "yaak";
+const METADATA_NODE_BIN: &str = "node";
+const PLUGIN_RUNTIME_NODE_VERSION: &str = include_str!(concat!(
+    env!("CARGO_MANIFEST_DIR"),
+    "/../../packages/plugin-runtime/.node-version"
+));
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+enum Environment {
+    Production,
+    Staging,
+    Development,
+}
+
+impl Environment {
+    fn api_base_url(self) -> &'static str {
+        match self {
+            Environment::Production => "https://api.yaak.app",
+            Environment::Staging => "https://todo.yaak.app",
+            Environment::Development => "http://localhost:9444",
+        }
+    }
+
+    fn keyring_service(self) -> &'static str {
+        match self {
+            Environment::Production => "app.yaak.cli.Token",
+            Environment::Staging => "app.yaak.cli.staging.Token",
+            Environment::Development => "app.yaak.cli.dev.Token",
+        }
+    }
+}
+
+pub async fn run_build(args: PluginPathArg) -> i32 {
+    match build(args).await {
+        Ok(()) => 0,
+        Err(error) => {
+            ui::error(&error);
+            1
+        }
+    }
+}
+
+pub async fn run_install(context: &CliContext, args: InstallPluginArgs) -> i32 {
+    match install(context, args).await {
+        Ok(()) => 0,
+        Err(error) => {
+            ui::error(&error);
+            1
+        }
+    }
+}
+
+pub async fn run_dev(args: PluginPathArg) -> i32 {
+    match dev(args).await {
+        Ok(()) => 0,
+        Err(error) => {
+            ui::error(&error);
+            1
+        }
+    }
+}
+
+pub async fn run_generate(args: GenerateArgs) -> i32 {
+    match generate(args) {
+        Ok(()) => 0,
+        Err(error) => {
+            ui::error(&error);
+            1
+        }
+    }
+}
+
+pub async fn run_publish(args: PluginPathArg) -> i32 {
+    match publish(args).await {
+        Ok(()) => 0,
+        Err(error) => {
+            ui::error(&error);
+            1
+        }
+    }
+}
+
+pub async fn run_metadata(args: PluginPathArg) -> i32 {
+    match metadata(args) {
+        Ok(()) => 0,
+        Err(error) => {
+            ui::error(&error);
+            1
+        }
+    }
+}
+
+async fn build(args: PluginPathArg) -> CommandResult {
+    let plugin_dir = resolve_plugin_dir(args.path)?;
+    ensure_plugin_build_inputs(&plugin_dir)?;
+
+    ui::info(&format!("Building plugin {}...", plugin_dir.display()));
+    let warnings = build_plugin_bundle(&plugin_dir).await?;
+    for warning in warnings {
+        ui::warning(&warning);
+    }
+    generate_plugin_metadata(&plugin_dir)?;
+    ui::success(&format!("Built plugin bundle at {}", plugin_dir.join("build/index.js").display()));
+    Ok(())
+}
+
+fn metadata(args: PluginPathArg) -> CommandResult {
+    let plugin_dir = resolve_plugin_dir(args.path)?;
+    generate_plugin_metadata(&plugin_dir)?;
+    ui::success(&format!(
+        "Generated plugin metadata at {}",
+        plugin_dir.join("build/metadata.json").display()
+    ));
+    Ok(())
+}
+
+async fn dev(args: PluginPathArg) -> CommandResult {
+    let plugin_dir = resolve_plugin_dir(args.path)?;
+    ensure_plugin_build_inputs(&plugin_dir)?;
+
+    ui::info(&format!("Watching plugin {}...", plugin_dir.display()));
+
+    let bundler = Bundler::new(bundler_options(&plugin_dir, true))
+        .map_err(|err| format!("Failed to initialize Rolldown watcher: {err}"))?;
+    let watcher = Watcher::new(vec![Arc::new(Mutex::new(bundler))], None)
+        .map_err(|err| format!("Failed to start Rolldown watcher: {err}"))?;
+    let emitter = watcher.emitter();
+    let watch_root = plugin_dir.clone();
+    let _event_logger = tokio::spawn(async move {
+        loop {
+            let event = {
+                let rx = emitter.rx.lock().await;
+                rx.recv()
+            };
+
+            let Ok(event) = event else {
+                break;
+            };
+
+            match event {
+                WatcherEvent::Change(change) => {
+                    let changed_path = Path::new(change.path.as_str());
+                    let display_path = changed_path
+                        .strip_prefix(&watch_root)
+                        .map(|p| p.display().to_string())
+                        .unwrap_or_else(|_| {
+                            changed_path
+                                .file_name()
+                                .map(|name| name.to_string_lossy().into_owned())
+                                .unwrap_or_else(|| "unknown".to_string())
+                        });
+                    ui::info(&format!("Rebuilding plugin {display_path}"));
+                }
+                WatcherEvent::Event(BundleEvent::BundleEnd(_)) => {
+                    // Assets are staged on every rebuild, so a changed asset or
+                    // declaration is picked up without restarting.
+                    let result = copy_build_assets(&watch_root)
+                        .and_then(|()| generate_plugin_metadata(&watch_root));
+                    match result {
+                        Ok(()) => ui::success(&format!(
+                            "Generated plugin metadata at {}",
+                            watch_root.join("build/metadata.json").display()
+                        )),
+                        Err(error) => ui::error(&error),
+                    }
+                }
+                WatcherEvent::Event(BundleEvent::Error(event)) => {
+                    if event.error.diagnostics.is_empty() {
+                        ui::error("Plugin build failed");
+                    } else {
+                        for diagnostic in event.error.diagnostics {
+                            ui::error(&diagnostic.to_string());
+                        }
+                    }
+                }
+                WatcherEvent::Close => break,
+                _ => {}
+            }
+        }
+    });
+
+    watcher.start().await;
+    Ok(())
+}
+
+fn generate(args: GenerateArgs) -> CommandResult {
+    let default_name = random_name();
+    let name = match args.name {
+        Some(name) => name,
+        None => prompt_with_default("Plugin name", &default_name)?,
+    };
+
+    let default_dir = format!("./{name}");
+    let output_dir = match args.dir {
+        Some(dir) => dir,
+        None => PathBuf::from(prompt_with_default("Plugin dir", &default_dir)?),
+    };
+
+    if output_dir.exists() {
+        return Err(format!("Plugin directory already exists: {}", output_dir.display()));
+    }
+
+    ui::info(&format!("Generating plugin in {}", output_dir.display()));
+    fs::create_dir_all(output_dir.join("src"))
+        .map_err(|e| format!("Failed creating plugin directory {}: {e}", output_dir.display()))?;
+
+    write_file(&output_dir.join(".gitignore"), TEMPLATE_GITIGNORE)?;
+    write_file(
+        &output_dir.join("package.json"),
+        &TEMPLATE_PACKAGE_JSON.replace("yaak-plugin-name", &name),
+    )?;
+    write_file(&output_dir.join("tsconfig.json"), TEMPLATE_TSCONFIG)?;
+    write_file(&output_dir.join("README.md"), &TEMPLATE_README.replace("yaak-plugin-name", &name))?;
+    write_file(
+        &output_dir.join("src/index.ts"),
+        &TEMPLATE_INDEX_TS.replace("yaak-plugin-name", &name),
+    )?;
+    write_file(&output_dir.join("src/index.test.ts"), TEMPLATE_INDEX_TEST_TS)?;
+
+    ui::success("Plugin scaffold generated");
+    ui::info("Next steps:");
+    println!("  1. cd {}", output_dir.display());
+    println!("  2. npm install");
+    println!("  3. yaak plugin build");
+    Ok(())
+}
+
+async fn publish(args: PluginPathArg) -> CommandResult {
+    let plugin_dir = resolve_plugin_dir(args.path)?;
+    ensure_plugin_build_inputs(&plugin_dir)?;
+
+    let environment = current_environment();
+    let token = get_auth_token(environment)?
+        .ok_or_else(|| "Not logged in. Run `yaak auth login`.".to_string())?;
+
+    ui::info(&format!("Building plugin {}...", plugin_dir.display()));
+    let warnings = build_plugin_bundle(&plugin_dir).await?;
+    for warning in warnings {
+        ui::warning(&warning);
+    }
+    generate_plugin_metadata(&plugin_dir)?;
+
+    ui::info("Archiving plugin");
+    let archive = create_publish_archive(&plugin_dir)?;
+
+    ui::info("Uploading plugin");
+    let url = format!("{}/api/v1/plugins/publish", environment.api_base_url());
+    let response = http::build_client(Some(&token))?
+        .post(url)
+        .header(reqwest::header::CONTENT_TYPE, "application/zip")
+        .body(archive)
+        .send()
+        .await
+        .map_err(|e| format!("Failed to upload plugin: {e}"))?;
+
+    let status = response.status();
+    let body =
+        response.text().await.map_err(|e| format!("Failed reading publish response body: {e}"))?;
+
+    if !status.is_success() {
+        return Err(http::parse_api_error(status.as_u16(), &body));
+    }
+
+    let published: PublishResponse = serde_json::from_str(&body)
+        .map_err(|e| format!("Failed parsing publish response JSON: {e}\nResponse: {body}"))?;
+    ui::success(&format!("Plugin published {}", published.version));
+    println!(" -> {}", published.url);
+    Ok(())
+}
+
+async fn install(context: &CliContext, args: InstallPluginArgs) -> CommandResult {
+    if args.source.starts_with('@') {
+        let (name, version) =
+            parse_registry_install_spec(args.source.as_str()).ok_or_else(|| {
+                "Invalid registry plugin spec. Expected format: @org/plugin or @org/plugin@version"
+                    .to_string()
+            })?;
+        return install_from_registry(context, name, version).await;
+    }
+
+    install_from_directory(context, args.source.as_str()).await
+}
+
+async fn install_from_registry(
+    context: &CliContext,
+    name: String,
+    version: Option<String>,
+) -> CommandResult {
+    let current_version = crate::version::cli_version();
+    let http_client = yaak_api_client(ApiClientKind::Cli, current_version)
+        .map_err(|err| format!("Failed to initialize API client: {err}"))?;
+    let installing_version = version.clone().unwrap_or_else(|| "latest".to_string());
+    ui::info(&format!("Installing registry plugin {name}@{installing_version}"));
+
+    let plugin_context = PluginContext::new(Some("cli".to_string()), None);
+    let installed = download_and_install(
+        context.plugin_manager(),
+        context.query_manager(),
+        &http_client,
+        &plugin_context,
+        name.as_str(),
+        version,
+    )
+    .await
+    .map_err(|err| format!("Failed to install plugin: {err}"))?;
+
+    ui::success(&format!("Installed plugin {}@{}", installed.name, installed.version));
+    Ok(())
+}
+
+async fn install_from_directory(context: &CliContext, source: &str) -> CommandResult {
+    let plugin_dir = resolve_plugin_dir(Some(PathBuf::from(source)))?;
+    let plugin_dir_str = plugin_dir
+        .to_str()
+        .ok_or_else(|| {
+            format!("Plugin directory path is not valid UTF-8: {}", plugin_dir.display())
+        })?
+        .to_string();
+    ui::info(&format!("Installing plugin from directory {}", plugin_dir.display()));
+
+    let plugin = context
+        .query_manager()
+        .with_tx(|tx| {
+            tx.upsert_plugin(
+                &Plugin {
+                    directory: plugin_dir_str,
+                    url: None,
+                    enabled: true,
+                    source: PluginSource::Filesystem,
+                    ..Default::default()
+                },
+                &UpdateSource::Background,
+            )
+        })
+        .map_err(|err| format!("Failed to save plugin in database: {err}"))?;
+
+    let plugin_context = PluginContext::new(Some("cli".to_string()), None);
+    context
+        .plugin_manager()
+        .add_plugin(&plugin_context, &plugin)
+        .await
+        .map_err(|err| format!("Failed to load plugin runtime: {err}"))?;
+
+    ui::success(&format!("Installed plugin from {}", plugin.directory));
+    Ok(())
+}
+
+fn parse_registry_install_spec(source: &str) -> Option<(String, Option<String>)> {
+    if !source.starts_with('@') || !source.contains('/') {
+        return None;
+    }
+
+    let rest = source.get(1..)?;
+    let version_split = rest.rfind('@').map(|idx| idx + 1);
+    let (name, version) = match version_split {
+        Some(at_idx) => {
+            let (name, version) = source.split_at(at_idx);
+            let version = version.strip_prefix('@').unwrap_or_default();
+            if version.is_empty() {
+                return None;
+            }
+            (name.to_string(), Some(version.to_string()))
+        }
+        None => (source.to_string(), None),
+    };
+
+    if !name.starts_with('@') {
+        return None;
+    }
+
+    let without_scope = name.get(1..)?;
+    let (scope, plugin_name) = without_scope.split_once('/')?;
+    if scope.is_empty() || plugin_name.is_empty() {
+        return None;
+    }
+
+    Some((name, version))
+}
+
+#[derive(Deserialize)]
+struct PublishResponse {
+    version: String,
+    url: String,
+}
+
+async fn build_plugin_bundle(plugin_dir: &Path) -> CommandResult<Vec<String>> {
+    prepare_build_output_dir(plugin_dir)?;
+    copy_build_assets(plugin_dir)?;
+    let mut bundler = Bundler::new(bundler_options(plugin_dir, false))
+        .map_err(|err| format!("Failed to initialize Rolldown: {err}"))?;
+    let output = bundler.write().await.map_err(|err| format!("Plugin build failed:\n{err}"))?;
+
+    Ok(output.warnings.into_iter().map(|w| w.to_string()).collect())
+}
+
+fn generate_plugin_metadata(plugin_dir: &Path) -> CommandResult {
+    let entry_path = plugin_dir.join("build/index.js");
+    if !entry_path.is_file() {
+        return Err("build/index.js does not exist. Run `yaak plugin build` first.".to_string());
+    }
+
+    ensure_metadata_node_version()?;
+
+    let metadata_path = plugin_dir.join("build/metadata.json");
+    let output = Command::new(METADATA_NODE_BIN)
+        .arg("-e")
+        .arg(METADATA_SCRIPT)
+        .arg(entry_path.canonicalize().map_err(|e| {
+            format!("Failed to resolve plugin entrypoint {}: {e}", entry_path.display())
+        })?)
+        .arg(&metadata_path)
+        .current_dir(plugin_dir)
+        .output()
+        .map_err(|e| format!("Failed to run Node.js to generate plugin metadata: {e}"))?;
+
+    if !output.status.success() {
+        let stderr = String::from_utf8_lossy(&output.stderr).trim().to_string();
+        let message = if stderr.is_empty() {
+            format!("Node.js exited with status {}", output.status)
+        } else {
+            stderr
+        };
+        return Err(format!("Failed to generate plugin metadata: {message}"));
+    }
+
+    Ok(())
+}
+
+fn ensure_metadata_node_version() -> CommandResult {
+    let minimum_major = PLUGIN_RUNTIME_NODE_VERSION
+        .trim()
+        .trim_start_matches('v')
+        .split('.')
+        .next()
+        .and_then(|part| part.parse::<u32>().ok())
+        .ok_or_else(|| {
+            format!(
+                "Invalid plugin runtime Node.js version {:?} in packages/plugin-runtime/.node-version",
+                PLUGIN_RUNTIME_NODE_VERSION.trim()
+            )
+        })?;
+    let output = Command::new(METADATA_NODE_BIN)
+        .arg("--version")
+        .output()
+        .map_err(|e| format!("Node.js {minimum_major} or newer is required: {e}"))?;
+
+    if !output.status.success() {
+        return Err(format!(
+            "`{METADATA_NODE_BIN} --version` failed with status {}",
+            output.status
+        ));
+    }
+
+    let version = String::from_utf8_lossy(&output.stdout).trim().to_string();
+    let major = version
+        .trim_start_matches('v')
+        .split('.')
+        .next()
+        .and_then(|part| part.parse::<u32>().ok())
+        .ok_or_else(|| format!("Could not parse Node.js version {version:?}"))?;
+
+    if major >= minimum_major {
+        return Ok(());
+    }
+
+    Err(format!("Node.js {minimum_major} or newer is required. Found {version}."))
+}
+
+fn prepare_build_output_dir(plugin_dir: &Path) -> CommandResult {
+    let build_dir = plugin_dir.join("build");
+    if build_dir.exists() {
+        fs::remove_dir_all(&build_dir)
+            .map_err(|e| format!("Failed to clean build directory {}: {e}", build_dir.display()))?;
+    }
+    fs::create_dir_all(&build_dir)
+        .map_err(|e| format!("Failed to create build directory {}: {e}", build_dir.display()))
+}
+
+#[derive(Deserialize, Default)]
+struct PluginManifest {
+    #[serde(default)]
+    yaak: PluginManifestConfig,
+}
+
+#[derive(Deserialize, Default)]
+struct PluginManifestConfig {
+    /// Files to place beside the bundle, as paths relative to the plugin
+    /// directory. Publishing ships everything in `build/`, so these travel with
+    /// the plugin.
+    #[serde(default, rename = "buildAssets")]
+    build_assets: Vec<String>,
+}
+
+/// Copy the plugin's declared assets into `build/`.
+///
+/// This runs after the directory is cleared and before the bundle is written,
+/// because a bundle may read an asset from its own directory at import time and
+/// metadata generation imports the bundle.
+fn copy_build_assets(plugin_dir: &Path) -> CommandResult {
+    let manifest_path = plugin_dir.join("package.json");
+    let manifest: PluginManifest = serde_json::from_str(
+        &fs::read_to_string(&manifest_path)
+            .map_err(|e| format!("Failed to read {}: {e}", manifest_path.display()))?,
+    )
+    .map_err(|e| format!("Failed to parse {}: {e}", manifest_path.display()))?;
+
+    let build_dir = plugin_dir.join("build");
+    let mut names = HashSet::new();
+    for asset in manifest.yaak.build_assets {
+        let src = plugin_dir.join(&asset);
+        let name = src
+            .file_name()
+            .ok_or_else(|| format!("yaak.buildAssets entry is not a file path: {asset}"))?;
+        // A copy that later gets overwritten would pass the build and fail on
+        // load, so anything the build itself writes, or a second asset with
+        // the same name, is rejected up front. Names are compared without
+        // case, because a plugin is installed on case-insensitive filesystems
+        // wherever it was built.
+        let key = name.to_string_lossy().to_lowercase();
+        if key == "index.js" || key == "metadata.json" {
+            return Err(format!("Build asset {asset} would be overwritten by the build output"));
+        }
+        if !names.insert(key) {
+            return Err(format!("Two build assets share the name {}", name.display()));
+        }
+        if !src.is_file() {
+            return Err(format!("Build asset does not exist: {}", src.display()));
+        }
+        fs::copy(&src, build_dir.join(name))
+            .map_err(|e| format!("Failed to copy build asset {}: {e}", src.display()))?;
+    }
+
+    Ok(())
+}
+
+fn bundler_options(plugin_dir: &Path, watch: bool) -> BundlerOptions {
+    BundlerOptions {
+        input: Some(vec![InputItem { import: "./src/index.ts".to_string(), ..Default::default() }]),
+        cwd: Some(plugin_dir.to_path_buf()),
+        file: Some("build/index.js".to_string()),
+        format: Some(OutputFormat::Cjs),
+        platform: Some(Platform::Node),
+        log_level: Some(LogLevel::Info),
+        experimental: watch
+            .then_some(ExperimentalOptions { incremental_build: Some(true), ..Default::default() }),
+        watch: watch.then_some(WatchOption::default()),
+        ..Default::default()
+    }
+}
+
+fn resolve_plugin_dir(path: Option<PathBuf>) -> CommandResult<PathBuf> {
+    let cwd =
+        std::env::current_dir().map_err(|e| format!("Failed to read current directory: {e}"))?;
+    let candidate = match path {
+        Some(path) if path.is_absolute() => path,
+        Some(path) => cwd.join(path),
+        None => cwd,
+    };
+
+    if !candidate.exists() {
+        return Err(format!("Plugin directory does not exist: {}", candidate.display()));
+    }
+    if !candidate.is_dir() {
+        return Err(format!("Plugin path is not a directory: {}", candidate.display()));
+    }
+
+    candidate
+        .canonicalize()
+        .map_err(|e| format!("Failed to resolve plugin directory {}: {e}", candidate.display()))
+}
+
+fn ensure_plugin_build_inputs(plugin_dir: &Path) -> CommandResult {
+    let package_json = plugin_dir.join("package.json");
+    if !package_json.is_file() {
+        return Err(format!(
+            "{} does not exist. Ensure that you are in a plugin directory.",
+            package_json.display()
+        ));
+    }
+
+    let entry = plugin_dir.join("src/index.ts");
+    if !entry.is_file() {
+        return Err(format!("Required entrypoint missing: {}", entry.display()));
+    }
+
+    Ok(())
+}
+
+fn create_publish_archive(plugin_dir: &Path) -> CommandResult<Vec<u8>> {
+    let required_files = [
+        "README.md",
+        "package.json",
+        "build/index.js",
+        "src/index.ts",
+    ];
+    let optional_files = ["package-lock.json"];
+
+    let mut selected = HashSet::new();
+    for required in required_files {
+        let required_path = plugin_dir.join(required);
+        if !required_path.is_file() {
+            return Err(format!("Missing required file: {required}"));
+        }
+        selected.insert(required.to_string());
+    }
+    for optional in optional_files {
+        selected.insert(optional.to_string());
+    }
+
+    let cursor = std::io::Cursor::new(Vec::new());
+    let mut zip = zip::ZipWriter::new(cursor);
+    let options = SimpleFileOptions::default().compression_method(CompressionMethod::Deflated);
+
+    for entry in WalkDir::new(plugin_dir) {
+        let entry = entry.map_err(|e| format!("Failed walking plugin directory: {e}"))?;
+        if !entry.file_type().is_file() {
+            continue;
+        }
+
+        let path = entry.path();
+        let rel = path
+            .strip_prefix(plugin_dir)
+            .map_err(|e| format!("Failed deriving relative path for {}: {e}", path.display()))?;
+        let rel = rel.to_string_lossy().replace('\\', "/");
+
+        let keep = rel.starts_with("src/") || rel.starts_with("build/") || selected.contains(&rel);
+        if !keep {
+            continue;
+        }
+
+        zip.start_file(rel, options).map_err(|e| format!("Failed adding file to archive: {e}"))?;
+        let mut file = fs::File::open(path)
+            .map_err(|e| format!("Failed opening file {}: {e}", path.display()))?;
+        let mut contents = Vec::new();
+        file.read_to_end(&mut contents)
+            .map_err(|e| format!("Failed reading file {}: {e}", path.display()))?;
+        zip.write_all(&contents).map_err(|e| format!("Failed writing archive contents: {e}"))?;
+    }
+
+    let cursor = zip.finish().map_err(|e| format!("Failed finalizing plugin archive: {e}"))?;
+    Ok(cursor.into_inner())
+}
+
+fn write_file(path: &Path, contents: &str) -> CommandResult {
+    if let Some(parent) = path.parent() {
+        fs::create_dir_all(parent)
+            .map_err(|e| format!("Failed creating directory {}: {e}", parent.display()))?;
+    }
+    fs::write(path, contents).map_err(|e| format!("Failed writing file {}: {e}", path.display()))
+}
+
+fn prompt_with_default(label: &str, default: &str) -> CommandResult<String> {
+    if !io::stdin().is_terminal() {
+        return Ok(default.to_string());
+    }
+
+    print!("{label} [{default}]: ");
+    io::stdout().flush().map_err(|e| format!("Failed to flush stdout: {e}"))?;
+
+    let mut input = String::new();
+    io::stdin().read_line(&mut input).map_err(|e| format!("Failed to read input: {e}"))?;
+    let trimmed = input.trim();
+
+    if trimmed.is_empty() { Ok(default.to_string()) } else { Ok(trimmed.to_string()) }
+}
+
+fn current_environment() -> Environment {
+    match std::env::var("ENVIRONMENT").as_deref() {
+        Ok("staging") => Environment::Staging,
+        Ok("development") => Environment::Development,
+        _ => Environment::Production,
+    }
+}
+
+fn keyring_entry(environment: Environment) -> CommandResult<Entry> {
+    Entry::new(environment.keyring_service(), KEYRING_USER)
+        .map_err(|e| format!("Failed to initialize auth keyring entry: {e}"))
+}
+
+fn get_auth_token(environment: Environment) -> CommandResult<Option<String>> {
+    let entry = keyring_entry(environment)?;
+    match entry.get_password() {
+        Ok(token) => Ok(Some(token)),
+        Err(keyring::Error::NoEntry) => Ok(None),
+        Err(err) => Err(format!("Failed to read auth token: {err}")),
+    }
+}
+
+fn random_name() -> String {
+    const ADJECTIVES: &[&str] = &[
+        "young", "youthful", "yellow", "yielding", "yappy", "yawning", "yummy", "yucky", "yearly",
+        "yester", "yeasty", "yelling",
+    ];
+    const NOUNS: &[&str] = &[
+        "yak", "yarn", "year", "yell", "yoke", "yoga", "yam", "yacht", "yodel",
+    ];
+
+    let mut rng = rand::thread_rng();
+    let adjective = ADJECTIVES[rng.gen_range(0..ADJECTIVES.len())];
+    let noun = NOUNS[rng.gen_range(0..NOUNS.len())];
+    format!("{adjective}-{noun}")
+}
+
+const TEMPLATE_GITIGNORE: &str = "node_modules\n";
+
+const TEMPLATE_PACKAGE_JSON: &str = r#"{
+  "name": "yaak-plugin-name",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "build": "yaak plugin build",
+    "dev": "yaak plugin dev"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.14"
+  },
+  "dependencies": {
+    "@yaakapp/api": "^0.7.0"
+  }
+}
+"#;
+
+const METADATA_SCRIPT: &str = include_str!(concat!(
+    env!("CARGO_MANIFEST_DIR"),
+    "/../../packages/plugin-runtime/src/metadata.ts"
+));
+
+const TEMPLATE_TSCONFIG: &str = r#"{
+  "compilerOptions": {
+    "target": "es2021",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "useDefineForClassFields": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
+"#;
+
+const TEMPLATE_README: &str = r#"# yaak-plugin-name
+
+Describe what your plugin does.
+"#;
+
+const TEMPLATE_INDEX_TS: &str = r#"import type { PluginDefinition } from "@yaakapp/api";
+
+export const plugin: PluginDefinition = {
+  httpRequestActions: [
+    {
+      label: "Hello, From Plugin",
+      icon: "info",
+      async onSelect(ctx, args) {
+        await ctx.toast.show({
+          color: "success",
+          message: `You clicked the request ${args.httpRequest.id}`,
+        });
+      },
+    },
+  ],
+};
+"#;
+
+const TEMPLATE_INDEX_TEST_TS: &str = r#"import { describe, expect, test } from "vitest";
+import { plugin } from "./index";
+
+describe("Example Plugin", () => {
+  test("Exports plugin object", () => {
+    expect(plugin).toBeTypeOf("object");
+  });
+});
+"#;
+
+#[cfg(test)]
+mod tests {
+    use super::{
+        copy_build_assets, create_publish_archive, generate_plugin_metadata,
+        prepare_build_output_dir,
+    };
+    use serde_json::Value;
+    use std::collections::HashSet;
+    use std::fs;
+    use std::io::Cursor;
+    use tempfile::TempDir;
+    use zip::ZipArchive;
+
+    #[test]
+    fn publish_archive_includes_required_and_optional_files() {
+        let dir = TempDir::new().expect("temp dir");
+        let root = dir.path();
+
+        fs::create_dir_all(root.join("src")).expect("create src");
+        fs::create_dir_all(root.join("build")).expect("create build");
+        fs::create_dir_all(root.join("ignored")).expect("create ignored");
+
+        fs::write(root.join("README.md"), "# Demo\n").expect("write README");
+        fs::write(root.join("package.json"), "{}").expect("write package.json");
+        fs::write(root.join("package-lock.json"), "{}").expect("write package-lock.json");
+        fs::write(root.join("src/index.ts"), "export const plugin = {};\n")
+            .expect("write src/index.ts");
+        fs::write(root.join("build/index.js"), "exports.plugin = {};\n")
+            .expect("write build/index.js");
+        fs::write(root.join("build/metadata.json"), "{}\n").expect("write build/metadata.json");
+        fs::write(root.join("ignored/secret.txt"), "do-not-ship").expect("write ignored file");
+
+        let archive = create_publish_archive(root).expect("create archive");
+        let mut zip = ZipArchive::new(Cursor::new(archive)).expect("open zip");
+
+        let mut names = HashSet::new();
+        for i in 0..zip.len() {
+            let file = zip.by_index(i).expect("zip entry");
+            names.insert(file.name().to_string());
+        }
+
+        assert!(names.contains("README.md"));
+        assert!(names.contains("package.json"));
+        assert!(names.contains("package-lock.json"));
+        assert!(names.contains("build/metadata.json"));
+        assert!(names.contains("src/index.ts"));
+        assert!(names.contains("build/index.js"));
+        assert!(!names.contains("ignored/secret.txt"));
+    }
+
+    #[test]
+    fn prepare_build_output_dir_clears_stale_output() {
+        let dir = TempDir::new().expect("temp dir");
+        let root = dir.path();
+        let build = root.join("build");
+        fs::create_dir_all(&build).expect("create build");
+        fs::write(build.join("index.js"), "stale").expect("write index.js");
+        fs::write(build.join("left-behind.js"), "stale").expect("write extra");
+
+        prepare_build_output_dir(root).expect("prepare build dir");
+
+        // Publishing ships everything under build/, so nothing may survive.
+        assert!(build.is_dir());
+        assert_eq!(fs::read_dir(&build).expect("read build").count(), 0);
+    }
+
+    #[test]
+    fn copy_build_assets_places_declared_files_beside_the_bundle() {
+        let dir = TempDir::new().expect("temp dir");
+        let root = dir.path();
+        fs::create_dir_all(root.join("build")).expect("create build");
+        fs::create_dir_all(root.join("vendor")).expect("create vendor");
+        fs::write(root.join("vendor/core_bg.wasm"), "asset").expect("write asset");
+        fs::write(root.join("package.json"), r#"{"yaak":{"buildAssets":["vendor/core_bg.wasm"]}}"#)
+            .expect("write package.json");
+
+        copy_build_assets(root).expect("copy assets");
+
+        assert_eq!(
+            fs::read_to_string(root.join("build/core_bg.wasm")).expect("read copied asset"),
+            "asset"
+        );
+    }
+
+    #[test]
+    fn copy_build_assets_is_a_noop_without_declarations() {
+        let dir = TempDir::new().expect("temp dir");
+        let root = dir.path();
+        fs::create_dir_all(root.join("build")).expect("create build");
+        fs::write(root.join("package.json"), r#"{"name":"demo"}"#).expect("write package.json");
+
+        copy_build_assets(root).expect("copy assets");
+
+        assert_eq!(fs::read_dir(root.join("build")).expect("read build").count(), 0);
+    }
+
+    #[test]
+    fn copy_build_assets_rejects_names_the_build_writes() {
+        let dir = TempDir::new().expect("temp dir");
+        let root = dir.path();
+        fs::create_dir_all(root.join("build")).expect("create build");
+        fs::write(root.join("index.js"), "asset").expect("write asset");
+        fs::write(root.join("package.json"), r#"{"yaak":{"buildAssets":["index.js"]}}"#)
+            .expect("write package.json");
+
+        let err = copy_build_assets(root).expect_err("reserved name should fail");
+        assert!(err.contains("overwritten by the build output"), "unexpected error: {err}");
+    }
+
+    #[test]
+    fn copy_build_assets_rejects_duplicate_names() {
+        let dir = TempDir::new().expect("temp dir");
+        let root = dir.path();
+        fs::create_dir_all(root.join("build")).expect("create build");
+        fs::create_dir_all(root.join("a")).expect("create a");
+        fs::create_dir_all(root.join("b")).expect("create b");
+        // Differ only by case: one file on macOS and Windows.
+        fs::write(root.join("a/core.wasm"), "one").expect("write a");
+        fs::write(root.join("b/Core.wasm"), "two").expect("write b");
+        fs::write(
+            root.join("package.json"),
+            r#"{"yaak":{"buildAssets":["a/core.wasm","b/Core.wasm"]}}"#,
+        )
+        .expect("write package.json");
+
+        let err = copy_build_assets(root).expect_err("duplicate name should fail");
+        assert!(err.contains("share the name"), "unexpected error: {err}");
+    }
+
+    #[test]
+    fn copy_build_assets_fails_on_a_missing_asset() {
+        let dir = TempDir::new().expect("temp dir");
+        let root = dir.path();
+        fs::create_dir_all(root.join("build")).expect("create build");
+        fs::write(root.join("package.json"), r#"{"yaak":{"buildAssets":["nope.wasm"]}}"#)
+            .expect("write package.json");
+
+        let err = copy_build_assets(root).expect_err("missing asset should fail");
+        assert!(err.contains("Build asset does not exist"), "unexpected error: {err}");
+    }
+
+    #[test]
+    fn generate_plugin_metadata_detects_api_types() {
+        let dir = TempDir::new().expect("temp dir");
+        let root = dir.path();
+        fs::create_dir_all(root.join("build")).expect("create build");
+        fs::write(
+            root.join("build/index.js"),
+            r##"
+exports.plugin = {
+  themes: [{
+    id: "midnight",
+    label: "Midnight",
+    dark: true,
+    base: { surface: "#000000", text: "#ffffff" },
+  }],
+  templateFunctions: [{
+    name: "signature",
+    description: "Create a signature",
+    args: [{ type: "text", name: "secret", dynamic() {} }],
+    onRender() {},
+  }],
+  workspaceActions: [{
+    label: "Sync workspace",
+    icon: "info",
+    onSelect() {},
+  }],
+  folderActions: [{
+    label: "Export folder",
+    icon: "copy",
+    onSelect() {},
+  }],
+  async init() {},
+};
+"##,
+        )
+        .expect("write build/index.js");
+
+        generate_plugin_metadata(root).expect("generate metadata");
+
+        let contents = fs::read_to_string(root.join("build/metadata.json")).expect("read metadata");
+        let metadata: Value = serde_json::from_str(&contents).expect("metadata json");
+        let api_types = metadata["apiTypes"].as_array().expect("apiTypes array");
+
+        for expected in [
+            "folderActions",
+            "templateFunctions",
+            "themes",
+            "workspaceActions",
+            "lifecycle",
+        ] {
+            assert!(
+                api_types.iter().any(|value| value.as_str() == Some(expected)),
+                "missing api type {expected}: {api_types:?}"
+            );
+        }
+
+        assert_eq!(metadata["apis"]["themes"]["items"][0]["id"], "midnight");
+        assert_eq!(metadata["apis"]["workspaceActions"]["items"][0]["label"], "Sync workspace");
+        assert_eq!(metadata["apis"]["lifecycle"]["items"][0]["name"], "init");
+        assert!(metadata["apis"]["templateFunctions"]["items"][0]["onRender"].is_null());
+        assert!(metadata["apis"]["templateFunctions"]["items"][0]["args"][0]["dynamic"].is_null());
+    }
+}
diff --git a/crates-cli/yaak-cli/src/commands/request.rs b/crates-cli/yaak-cli/src/commands/request.rs
new file mode 100644
index 0000000..39070a7
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/request.rs
@@ -0,0 +1,620 @@
+use crate::cli::{RequestArgs, RequestCommands, RequestSchemaType};
+use crate::context::CliContext;
+use crate::utils::confirm::confirm_delete;
+use crate::utils::json::{
+    apply_merge_patch, is_json_shorthand, merge_workspace_id_arg, parse_optional_json,
+    parse_required_json, require_id, validate_create_id,
+};
+use crate::utils::schema::append_agent_hints;
+use crate::utils::workspace::resolve_workspace_id;
+use schemars::schema_for;
+use serde_json::{Map, Value, json};
+use std::collections::HashMap;
+use std::io::Write;
+use tokio::sync::mpsc;
+use yaak::send::{SendHttpRequestByIdWithPluginsParams, send_http_request_by_id_with_plugins};
+use yaak_http::sender::HttpResponseEvent as SenderHttpResponseEvent;
+use yaak_models::models::{GrpcRequest, HttpRequest, WebsocketRequest};
+use yaak_models::queries::any_request::AnyRequest;
+use yaak_models::util::UpdateSource;
+use yaak_plugins::events::{FormInput, FormInputBase, JsonPrimitive, PluginContext};
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+pub async fn run(
+    ctx: &CliContext,
+    args: RequestArgs,
+    environment: Option<&str>,
+    cookie_jar_id: Option<&str>,
+    verbose: bool,
+) -> i32 {
+    let result = match args.command {
+        RequestCommands::List { workspace_id } => list(ctx, workspace_id.as_deref()),
+        RequestCommands::Show { request_id } => show(ctx, &request_id),
+        RequestCommands::Send { request_id } => {
+            return match send_request_by_id(ctx, &request_id, environment, cookie_jar_id, verbose)
+                .await
+            {
+                Ok(()) => 0,
+                Err(error) => {
+                    eprintln!("Error: {error}");
+                    1
+                }
+            };
+        }
+        RequestCommands::Schema { request_type, pretty } => {
+            return match schema(ctx, request_type, pretty).await {
+                Ok(()) => 0,
+                Err(error) => {
+                    eprintln!("Error: {error}");
+                    1
+                }
+            };
+        }
+        RequestCommands::Create { workspace_id, name, method, url, json } => {
+            create(ctx, workspace_id, name, method, url, json)
+        }
+        RequestCommands::Update { json, json_input } => update(ctx, json, json_input),
+        RequestCommands::Delete { request_id, yes } => delete(ctx, &request_id, yes),
+    };
+
+    match result {
+        Ok(()) => 0,
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+fn list(ctx: &CliContext, workspace_id: Option<&str>) -> CommandResult {
+    let workspace_id = resolve_workspace_id(ctx, workspace_id, "request list")?;
+    let requests = ctx
+        .db()
+        .list_http_requests(&workspace_id)
+        .map_err(|e| format!("Failed to list requests: {e}"))?;
+    if requests.is_empty() {
+        println!("No requests found in workspace {}", workspace_id);
+    } else {
+        for request in requests {
+            println!("{} - {} {}", request.id, request.method, request.name);
+        }
+    }
+    Ok(())
+}
+
+async fn schema(ctx: &CliContext, request_type: RequestSchemaType, pretty: bool) -> CommandResult {
+    let mut schema = match request_type {
+        RequestSchemaType::Http => serde_json::to_value(schema_for!(HttpRequest))
+            .map_err(|e| format!("Failed to serialize HTTP request schema: {e}"))?,
+        RequestSchemaType::Grpc => serde_json::to_value(schema_for!(GrpcRequest))
+            .map_err(|e| format!("Failed to serialize gRPC request schema: {e}"))?,
+        RequestSchemaType::Websocket => serde_json::to_value(schema_for!(WebsocketRequest))
+            .map_err(|e| format!("Failed to serialize WebSocket request schema: {e}"))?,
+    };
+
+    enrich_schema_guidance(&mut schema, request_type);
+    append_agent_hints(&mut schema);
+
+    if let Err(error) = merge_auth_schema_from_plugins(ctx, &mut schema).await {
+        eprintln!("Warning: Failed to enrich authentication schema from plugins: {error}");
+    }
+
+    let output =
+        if pretty { serde_json::to_string_pretty(&schema) } else { serde_json::to_string(&schema) }
+            .map_err(|e| format!("Failed to format schema JSON: {e}"))?;
+    println!("{output}");
+    Ok(())
+}
+
+/// `request create` only builds HTTP requests, but `request schema` will happily hand
+/// out gRPC and WebSocket schemas. Without this, a gRPC payload deserializes into an
+/// HttpRequest with its unknown fields dropped, quietly producing a broken request
+/// (the gRPC method name lands in `method`, and `service` disappears).
+fn reject_non_http_payload(payload: &Value, context: &str) -> CommandResult {
+    let Some(object) = payload.as_object() else {
+        return Ok(());
+    };
+
+    if let Some(model) = object.get("model").and_then(Value::as_str)
+        && !model.is_empty()
+        && model != "http_request"
+    {
+        return Err(format!(
+            "{context} only supports HTTP requests, but the payload has \"model\": \"{model}\". The CLI cannot work with {model} requests yet; use the Yaak app instead."
+        ));
+    }
+
+    let known: std::collections::BTreeSet<String> = serde_json::to_value(schema_for!(HttpRequest))
+        .ok()
+        .and_then(|schema| schema.get("properties").and_then(Value::as_object).cloned())
+        .map(|properties| properties.keys().cloned().collect())
+        .unwrap_or_default();
+
+    if known.is_empty() {
+        return Ok(());
+    }
+
+    let unknown: Vec<&str> =
+        object.keys().filter(|key| !known.contains(*key)).map(String::as_str).collect();
+
+    if !unknown.is_empty() {
+        return Err(format!(
+            "{context} got fields that are not part of an HTTP request: {}. If this is a gRPC or WebSocket request, the CLI cannot work with it yet. Run `yaak request schema http` for the valid fields.",
+            unknown.join(", ")
+        ));
+    }
+
+    Ok(())
+}
+
+fn enrich_schema_guidance(schema: &mut Value, request_type: RequestSchemaType) {
+    if !matches!(request_type, RequestSchemaType::Http) {
+        return;
+    }
+
+    let Some(properties) = schema.get_mut("properties").and_then(Value::as_object_mut) else {
+        return;
+    };
+
+    if let Some(url_schema) = properties.get_mut("url").and_then(Value::as_object_mut) {
+        append_description(
+            url_schema,
+            "For path segments like `/foo/:id/comments/:commentId`, put concrete values in `urlParameters` using names that keep the leading `:` (for example `:id`, `:commentId`). A name without the `:` is sent as a query string parameter instead, leaving the placeholder in the path.",
+        );
+    }
+
+    if let Some(body_type_schema) = properties.get_mut("bodyType").and_then(Value::as_object_mut) {
+        append_description(
+            body_type_schema,
+            "Known values: `application/json`, `text/xml`, `application/x-www-form-urlencoded`, `multipart/form-data`, `graphql`, `binary`, `other`, or null for no body. This selects how `body` is encoded; it does NOT add a `Content-Type` header. Add that header yourself, matching the body type (`other` pairs with `text/plain` and `graphql` with `application/json`). Multipart is the exception: its header is generated at send time to carry the boundary.",
+        );
+    }
+
+    if let Some(body_schema) = properties.get_mut("body").and_then(Value::as_object_mut) {
+        append_description(
+            body_schema,
+            "Shape depends on `bodyType`. Text-ish types (`application/json`, `text/xml`, `other`) use `{\"text\": \"...\"}` where the value is a string, so JSON bodies are a JSON string containing JSON. Form types use `{\"form\": [{\"name\": \"a\", \"value\": \"1\", \"enabled\": true}]}`, and a multipart entry may use `file` (an absolute path) and `contentType` instead of `value`. `binary` uses `{\"filePath\": \"/abs/path\"}`. `graphql` uses `{\"query\": \"...\", \"variables\": \"{}\", \"operationName\": \"\"}` where `variables` is a string of JSON.",
+        );
+    }
+}
+
+fn append_description(schema: &mut Map<String, Value>, extra: &str) {
+    match schema.get_mut("description") {
+        Some(Value::String(existing)) if !existing.trim().is_empty() => {
+            if !existing.ends_with(' ') {
+                existing.push(' ');
+            }
+            existing.push_str(extra);
+        }
+        _ => {
+            schema.insert("description".to_string(), Value::String(extra.to_string()));
+        }
+    }
+}
+
+async fn merge_auth_schema_from_plugins(
+    ctx: &CliContext,
+    schema: &mut Value,
+) -> Result<(), String> {
+    let plugin_context = PluginContext::new_empty();
+    let plugin_manager = ctx.plugin_manager();
+    let summaries = plugin_manager
+        .get_http_authentication_summaries(&plugin_context)
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let mut auth_variants = Vec::new();
+    for (_, summary) in summaries {
+        let config = match plugin_manager
+            .get_http_authentication_config(
+                &plugin_context,
+                &summary.name,
+                HashMap::<String, JsonPrimitive>::new(),
+                "yaakcli_request_schema",
+            )
+            .await
+        {
+            Ok(config) => config,
+            Err(error) => {
+                eprintln!(
+                    "Warning: Failed to load auth config for strategy '{}': {}",
+                    summary.name, error
+                );
+                continue;
+            }
+        };
+
+        auth_variants.push(auth_variant_schema(&summary.name, &summary.label, &config.args));
+    }
+
+    let Some(properties) = schema.get_mut("properties").and_then(Value::as_object_mut) else {
+        return Ok(());
+    };
+
+    let Some(auth_schema) = properties.get_mut("authentication") else {
+        return Ok(());
+    };
+
+    if !auth_variants.is_empty() {
+        let mut one_of = vec![auth_schema.clone()];
+        one_of.extend(auth_variants);
+        *auth_schema = json!({ "oneOf": one_of });
+    }
+
+    Ok(())
+}
+
+fn auth_variant_schema(auth_name: &str, auth_label: &str, args: &[FormInput]) -> Value {
+    let mut properties = Map::new();
+    let mut required = Vec::new();
+    for input in args {
+        add_input_schema(input, &mut properties, &mut required);
+    }
+
+    let mut schema = json!({
+        "title": auth_label,
+        "description": format!("Authentication values for strategy '{}'", auth_name),
+        "type": "object",
+        "properties": properties,
+        "additionalProperties": true
+    });
+
+    if !required.is_empty() {
+        schema["required"] = json!(required);
+    }
+
+    schema
+}
+
+fn add_input_schema(
+    input: &FormInput,
+    properties: &mut Map<String, Value>,
+    required: &mut Vec<String>,
+) {
+    match input {
+        FormInput::Text(v) => add_base_schema(
+            &v.base,
+            json!({
+                "type": "string",
+                "writeOnly": v.password.unwrap_or(false),
+            }),
+            properties,
+            required,
+        ),
+        FormInput::Editor(v) => add_base_schema(
+            &v.base,
+            json!({
+                "type": "string",
+                "x-editorLanguage": v.language.clone(),
+            }),
+            properties,
+            required,
+        ),
+        FormInput::Select(v) => {
+            let options: Vec<Value> =
+                v.options.iter().map(|o| Value::String(o.value.clone())).collect();
+            add_base_schema(
+                &v.base,
+                json!({
+                    "type": "string",
+                    "enum": options,
+                }),
+                properties,
+                required,
+            );
+        }
+        FormInput::Checkbox(v) => {
+            add_base_schema(&v.base, json!({ "type": "boolean" }), properties, required);
+        }
+        FormInput::File(v) => {
+            if v.multiple.unwrap_or(false) {
+                add_base_schema(
+                    &v.base,
+                    json!({
+                        "type": "array",
+                        "items": { "type": "string" },
+                    }),
+                    properties,
+                    required,
+                );
+            } else {
+                add_base_schema(&v.base, json!({ "type": "string" }), properties, required);
+            }
+        }
+        FormInput::HttpRequest(v) => {
+            add_base_schema(&v.base, json!({ "type": "string" }), properties, required);
+        }
+        FormInput::KeyValue(v) => {
+            add_base_schema(
+                &v.base,
+                json!({
+                    "type": "object",
+                    "additionalProperties": true,
+                }),
+                properties,
+                required,
+            );
+        }
+        FormInput::Accordion(v) => {
+            if let Some(children) = &v.inputs {
+                for child in children {
+                    add_input_schema(child, properties, required);
+                }
+            }
+        }
+        FormInput::HStack(v) => {
+            if let Some(children) = &v.inputs {
+                for child in children {
+                    add_input_schema(child, properties, required);
+                }
+            }
+        }
+        FormInput::Banner(v) => {
+            if let Some(children) = &v.inputs {
+                for child in children {
+                    add_input_schema(child, properties, required);
+                }
+            }
+        }
+        FormInput::Markdown(_) => {}
+    }
+}
+
+fn add_base_schema(
+    base: &FormInputBase,
+    mut schema: Value,
+    properties: &mut Map<String, Value>,
+    required: &mut Vec<String>,
+) {
+    if base.hidden.unwrap_or(false) || base.name.trim().is_empty() {
+        return;
+    }
+
+    if let Some(description) = &base.description {
+        schema["description"] = Value::String(description.clone());
+    }
+    if let Some(label) = &base.label {
+        schema["title"] = Value::String(label.clone());
+    }
+    if let Some(default_value) = &base.default_value {
+        schema["default"] = Value::String(default_value.clone());
+    }
+
+    let name = base.name.clone();
+    properties.insert(name.clone(), schema);
+    if !base.optional.unwrap_or(false) {
+        required.push(name);
+    }
+}
+
+fn create(
+    ctx: &CliContext,
+    workspace_id: Option<String>,
+    name: Option<String>,
+    method: Option<String>,
+    url: Option<String>,
+    json: Option<String>,
+) -> CommandResult {
+    let json_shorthand =
+        workspace_id.as_deref().filter(|v| is_json_shorthand(v)).map(str::to_owned);
+    let workspace_id_arg = workspace_id.filter(|v| !is_json_shorthand(v));
+
+    let payload = parse_optional_json(json, json_shorthand, "request create")?;
+
+    if let Some(payload) = payload {
+        if name.is_some() || method.is_some() || url.is_some() {
+            return Err("request create cannot combine simple flags with JSON payload".to_string());
+        }
+
+        validate_create_id(&payload, "request")?;
+        reject_non_http_payload(&payload, "request create")?;
+        let mut request: HttpRequest = serde_json::from_value(payload)
+            .map_err(|e| format!("Failed to parse request create JSON: {e}"))?;
+        let fallback_workspace_id = if workspace_id_arg.is_none() && request.workspace_id.is_empty()
+        {
+            Some(resolve_workspace_id(ctx, None, "request create")?)
+        } else {
+            None
+        };
+        merge_workspace_id_arg(
+            workspace_id_arg.as_deref().or(fallback_workspace_id.as_deref()),
+            &mut request.workspace_id,
+            "request create",
+        )?;
+
+        let created = ctx
+            .query_manager()
+            .with_tx(|tx| tx.upsert_http_request(&request, &UpdateSource::Sync))
+            .map_err(|e| format!("Failed to create request: {e}"))?;
+
+        println!("Created request: {}", created.id);
+        return Ok(());
+    }
+
+    let workspace_id = resolve_workspace_id(ctx, workspace_id_arg.as_deref(), "request create")?;
+    let name = name.unwrap_or_default();
+    let url = url.unwrap_or_default();
+    let mut request = HttpRequest { workspace_id, name, url, ..Default::default() };
+    // Only override the method when one was given; `HttpRequest::default()` is the
+    // single place the fallback ("GET") is defined.
+    if let Some(method) = method {
+        request.method = method.to_uppercase();
+    }
+
+    let created = ctx
+        .query_manager()
+        .with_tx(|tx| tx.upsert_http_request(&request, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to create request: {e}"))?;
+
+    println!("Created request: {}", created.id);
+    Ok(())
+}
+
+fn update(ctx: &CliContext, json: Option<String>, json_input: Option<String>) -> CommandResult {
+    let patch = parse_required_json(json, json_input, "request update")?;
+    let id = require_id(&patch, "request update")?;
+    reject_non_http_payload(&patch, "request update")?;
+
+    let existing = ctx
+        .db()
+        .get_http_request(&id)
+        .map_err(|e| format!("Failed to get request for update: {e}"))?;
+    let updated = apply_merge_patch(&existing, &patch, &id, "request update")?;
+
+    let saved = ctx
+        .query_manager()
+        .with_tx(|tx| tx.upsert_http_request(&updated, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to update request: {e}"))?;
+
+    println!("Updated request: {}", saved.id);
+    Ok(())
+}
+
+fn show(ctx: &CliContext, request_id: &str) -> CommandResult {
+    let request =
+        ctx.db().get_http_request(request_id).map_err(|e| format!("Failed to get request: {e}"))?;
+    let output = serde_json::to_string_pretty(&request)
+        .map_err(|e| format!("Failed to serialize request: {e}"))?;
+    println!("{output}");
+    Ok(())
+}
+
+fn delete(ctx: &CliContext, request_id: &str, yes: bool) -> CommandResult {
+    if !yes && !confirm_delete("request", request_id) {
+        println!("Aborted");
+        return Ok(());
+    }
+
+    let deleted = ctx
+        .query_manager()
+        .with_tx(|tx| tx.delete_http_request_by_id(request_id, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to delete request: {e}"))?;
+    println!("Deleted request: {}", deleted.id);
+    Ok(())
+}
+
+/// Send a request by ID and print response in the same format as legacy `send`.
+pub async fn send_request_by_id(
+    ctx: &CliContext,
+    request_id: &str,
+    environment: Option<&str>,
+    cookie_jar_id: Option<&str>,
+    verbose: bool,
+) -> Result<(), String> {
+    let request =
+        ctx.db().get_any_request(request_id).map_err(|e| format!("Failed to get request: {e}"))?;
+    match request {
+        AnyRequest::HttpRequest(http_request) => {
+            send_http_request_by_id(
+                ctx,
+                &http_request.id,
+                &http_request.workspace_id,
+                environment,
+                cookie_jar_id,
+                verbose,
+            )
+            .await
+        }
+        AnyRequest::GrpcRequest(_) => {
+            Err("gRPC request send is not implemented yet in yaak-cli".to_string())
+        }
+        AnyRequest::WebsocketRequest(_) => {
+            Err("WebSocket request send is not implemented yet in yaak-cli".to_string())
+        }
+    }
+}
+
+async fn send_http_request_by_id(
+    ctx: &CliContext,
+    request_id: &str,
+    workspace_id: &str,
+    environment: Option<&str>,
+    cookie_jar_id: Option<&str>,
+    verbose: bool,
+) -> Result<(), String> {
+    let cookie_jar_id = resolve_cookie_jar_id(ctx, workspace_id, cookie_jar_id)?;
+
+    let plugin_context =
+        PluginContext::new(Some("cli".to_string()), Some(workspace_id.to_string()));
+
+    let (event_tx, mut event_rx) = mpsc::channel::<SenderHttpResponseEvent>(100);
+    let (body_chunk_tx, mut body_chunk_rx) = mpsc::unbounded_channel::<Vec<u8>>();
+    let event_handle = tokio::spawn(async move {
+        while let Some(event) = event_rx.recv().await {
+            if verbose && !matches!(event, SenderHttpResponseEvent::ChunkReceived { .. }) {
+                println!("{}", event);
+            }
+        }
+    });
+    // Verbose mode has a second writer on stdout (the event task above), and the two
+    // race: the body could land in the middle of the headers, or run onto the same
+    // line as the status. So buffer the body while verbose and write it once the
+    // events are done. Without -v nothing else writes, so stream it straight through.
+    let body_handle = tokio::task::spawn_blocking(move || {
+        let mut buffered = Vec::new();
+        let mut stdout = std::io::stdout();
+        while let Some(chunk) = body_chunk_rx.blocking_recv() {
+            if verbose {
+                buffered.extend_from_slice(&chunk);
+                continue;
+            }
+            if stdout.write_all(&chunk).is_err() {
+                break;
+            }
+            let _ = stdout.flush();
+        }
+        buffered
+    });
+    let response_dir = ctx.data_dir().join("responses");
+
+    let result = send_http_request_by_id_with_plugins(SendHttpRequestByIdWithPluginsParams {
+        query_manager: ctx.query_manager(),
+        blob_manager: ctx.blob_manager(),
+        request_id,
+        environment_id: environment,
+        update_source: UpdateSource::Sync,
+        cookie_jar_id,
+        response_dir: &response_dir,
+        emit_events_to: Some(event_tx),
+        emit_response_body_chunks_to: Some(body_chunk_tx),
+        plugin_manager: ctx.plugin_manager(),
+        encryption_manager: ctx.encryption_manager.clone(),
+        plugin_context: &plugin_context,
+        cancelled_rx: None,
+        connection_manager: ctx.connection_manager(),
+    })
+    .await;
+
+    // Await the events first so every `*`, `>`, and `<` line is out before the body.
+    let _ = event_handle.await;
+    if let Ok(buffered) = body_handle.await
+        && !buffered.is_empty()
+    {
+        let mut stdout = std::io::stdout();
+        let _ = stdout.write_all(&buffered);
+        let _ = stdout.flush();
+    }
+
+    result.map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+pub(crate) fn resolve_cookie_jar_id(
+    ctx: &CliContext,
+    workspace_id: &str,
+    explicit_cookie_jar_id: Option<&str>,
+) -> Result<Option<String>, String> {
+    if let Some(cookie_jar_id) = explicit_cookie_jar_id {
+        return Ok(Some(cookie_jar_id.to_string()));
+    }
+
+    let default_cookie_jar = ctx
+        .db()
+        .list_cookie_jars(workspace_id)
+        .map_err(|e| format!("Failed to list cookie jars: {e}"))?
+        .into_iter()
+        .min_by_key(|jar| jar.created_at)
+        .map(|jar| jar.id);
+    Ok(default_cookie_jar)
+}
diff --git a/crates-cli/yaak-cli/src/commands/response.rs b/crates-cli/yaak-cli/src/commands/response.rs
new file mode 100644
index 0000000..57177a5
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/response.rs
@@ -0,0 +1,141 @@
+use crate::cli::{ResponseArgs, ResponseCommands};
+use crate::context::CliContext;
+use crate::utils::confirm::confirm_delete;
+use crate::utils::workspace::resolve_workspace_id;
+use std::io::Write;
+use yaak_models::models::HttpResponse;
+use yaak_models::util::UpdateSource;
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+pub fn run(ctx: &CliContext, args: ResponseArgs) -> i32 {
+    let result = match args.command {
+        ResponseCommands::List { id, limit } => list(ctx, id.as_deref(), limit),
+        ResponseCommands::Show { id } => show(ctx, &id),
+        ResponseCommands::Body { id } => body(ctx, &id),
+        ResponseCommands::Delete { id, yes } => delete(ctx, &id, yes),
+    };
+
+    match result {
+        Ok(()) => 0,
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+/// Accepts a response ID, or a request ID meaning "the latest response for that request".
+fn resolve_response(ctx: &CliContext, id: &str) -> CommandResult<HttpResponse> {
+    if let Ok(response) = ctx.db().get_http_response(id) {
+        return Ok(response);
+    }
+
+    if ctx.db().get_http_request(id).is_ok() {
+        return ctx
+            .db()
+            .list_http_responses_for_request(id, Some(1))
+            .map_err(|e| format!("Failed to list responses: {e}"))?
+            .into_iter()
+            .next()
+            .ok_or_else(|| format!("Request {id} has no stored responses yet"));
+    }
+
+    Err(format!("Could not resolve ID '{id}' as a response or request"))
+}
+
+fn list(ctx: &CliContext, id: Option<&str>, limit: Option<u64>) -> CommandResult {
+    // An explicit request ID scopes to that request; anything else lists the workspace.
+    let responses = match id {
+        Some(id) if ctx.db().get_http_request(id).is_ok() => ctx
+            .db()
+            .list_http_responses_for_request(id, limit)
+            .map_err(|e| format!("Failed to list responses: {e}"))?,
+        other => {
+            let workspace_id = resolve_workspace_id(ctx, other, "response list")?;
+            ctx.db()
+                .list_http_responses(&workspace_id, limit)
+                .map_err(|e| format!("Failed to list responses: {e}"))?
+        }
+    };
+
+    if responses.is_empty() {
+        println!("No responses found");
+        return Ok(());
+    }
+
+    for response in responses {
+        let status = match response.error {
+            // Errors can be a paragraph of nested debug output; `show` has the full text.
+            Some(error) => {
+                let first_line = error.lines().next().unwrap_or_default();
+                let summary = match first_line.char_indices().nth(80) {
+                    Some((cut, _)) => format!("{}...", &first_line[..cut]),
+                    None => first_line.to_string(),
+                };
+                format!("ERROR {summary}")
+            }
+            None => {
+                let reason = response.status_reason.unwrap_or_default();
+                format!("{} {}", response.status, reason).trim_end().to_string()
+            }
+        };
+        println!("{} - {} {} ({}ms)", response.id, status, response.url, response.elapsed);
+    }
+
+    Ok(())
+}
+
+fn show(ctx: &CliContext, id: &str) -> CommandResult {
+    let response = resolve_response(ctx, id)?;
+    let output = serde_json::to_string_pretty(&response)
+        .map_err(|e| format!("Failed to serialize response: {e}"))?;
+    println!("{output}");
+    Ok(())
+}
+
+fn body(ctx: &CliContext, id: &str) -> CommandResult {
+    let response = resolve_response(ctx, id)?;
+    let Some(body_path) = response.body_path else {
+        return Err(format!("Response {} has no stored body", response.id));
+    };
+
+    let bytes = std::fs::read(&body_path)
+        .map_err(|e| format!("Failed to read response body at {body_path}: {e}"))?;
+
+    let mut stdout = std::io::stdout();
+    stdout.write_all(&bytes).map_err(|e| format!("Failed to write response body: {e}"))?;
+    stdout.flush().map_err(|e| format!("Failed to flush response body: {e}"))?;
+    Ok(())
+}
+
+fn delete(ctx: &CliContext, id: &str, yes: bool) -> CommandResult {
+    // Deleting is scoped to a whole request or workspace, since a single stored
+    // response is rarely the thing someone wants to remove.
+    if ctx.db().get_http_request(id).is_ok() {
+        if !yes && !confirm_delete("responses for request", id) {
+            println!("Aborted");
+            return Ok(());
+        }
+        let count = ctx
+            .query_manager()
+            .with_tx(|tx| tx.delete_all_http_responses_for_request(id, &UpdateSource::Sync))
+            .map_err(|e| format!("Failed to delete responses: {e}"))?;
+        println!("Deleted {count} responses for request {id}");
+        return Ok(());
+    }
+
+    let workspace_id = resolve_workspace_id(ctx, Some(id), "response delete")?;
+    if !yes && !confirm_delete("responses for workspace", &workspace_id) {
+        println!("Aborted");
+        return Ok(());
+    }
+    let count = ctx
+        .query_manager()
+        .with_tx(|tx| {
+            tx.delete_all_http_responses_for_workspace(&workspace_id, &UpdateSource::Sync)
+        })
+        .map_err(|e| format!("Failed to delete responses: {e}"))?;
+    println!("Deleted {count} responses for workspace {workspace_id}");
+    Ok(())
+}
diff --git a/crates-cli/yaak-cli/src/commands/send.rs b/crates-cli/yaak-cli/src/commands/send.rs
new file mode 100644
index 0000000..ba96235
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/send.rs
@@ -0,0 +1,242 @@
+use crate::cli::SendArgs;
+use crate::commands::request;
+use crate::context::CliContext;
+use futures::future::join_all;
+use yaak_models::queries::any_request::AnyRequest;
+
+enum ExecutionMode {
+    Sequential,
+    Parallel,
+}
+
+pub async fn run(
+    ctx: &CliContext,
+    args: SendArgs,
+    environment: Option<&str>,
+    cookie_jar_id: Option<&str>,
+    verbose: bool,
+) -> i32 {
+    match send_target(ctx, args, environment, cookie_jar_id, verbose).await {
+        Ok(()) => 0,
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+async fn send_target(
+    ctx: &CliContext,
+    args: SendArgs,
+    environment: Option<&str>,
+    cookie_jar_id: Option<&str>,
+    verbose: bool,
+) -> Result<(), String> {
+    let mode = if args.parallel { ExecutionMode::Parallel } else { ExecutionMode::Sequential };
+
+    if let Ok(request) = ctx.db().get_any_request(&args.id) {
+        let workspace_id = match &request {
+            AnyRequest::HttpRequest(r) => r.workspace_id.clone(),
+            AnyRequest::GrpcRequest(r) => r.workspace_id.clone(),
+            AnyRequest::WebsocketRequest(r) => r.workspace_id.clone(),
+        };
+        let resolved_cookie_jar_id =
+            request::resolve_cookie_jar_id(ctx, &workspace_id, cookie_jar_id)?;
+
+        return request::send_request_by_id(
+            ctx,
+            &args.id,
+            environment,
+            resolved_cookie_jar_id.as_deref(),
+            verbose,
+        )
+        .await;
+    }
+
+    if let Ok(folder) = ctx.db().get_folder(&args.id) {
+        let resolved_cookie_jar_id =
+            request::resolve_cookie_jar_id(ctx, &folder.workspace_id, cookie_jar_id)?;
+
+        let request_ids = collect_folder_request_ids(ctx, &args.id)?;
+        if request_ids.is_empty() {
+            println!("No requests found in folder {}", args.id);
+            return Ok(());
+        }
+        return send_many(
+            ctx,
+            request_ids,
+            mode,
+            args.fail_fast,
+            environment,
+            resolved_cookie_jar_id.as_deref(),
+            verbose,
+        )
+        .await;
+    }
+
+    if let Ok(workspace) = ctx.db().get_workspace(&args.id) {
+        let resolved_cookie_jar_id =
+            request::resolve_cookie_jar_id(ctx, &workspace.id, cookie_jar_id)?;
+
+        let request_ids = collect_workspace_request_ids(ctx, &args.id)?;
+        if request_ids.is_empty() {
+            println!("No requests found in workspace {}", args.id);
+            return Ok(());
+        }
+        return send_many(
+            ctx,
+            request_ids,
+            mode,
+            args.fail_fast,
+            environment,
+            resolved_cookie_jar_id.as_deref(),
+            verbose,
+        )
+        .await;
+    }
+
+    Err(format!("Could not resolve ID '{}' as request, folder, or workspace", args.id))
+}
+
+fn collect_folder_request_ids(ctx: &CliContext, folder_id: &str) -> Result<Vec<String>, String> {
+    let mut ids = Vec::new();
+
+    let mut http_ids = ctx
+        .db()
+        .list_http_requests_for_folder_recursive(folder_id)
+        .map_err(|e| format!("Failed to list HTTP requests in folder: {e}"))?
+        .into_iter()
+        .map(|r| r.id)
+        .collect::<Vec<_>>();
+    ids.append(&mut http_ids);
+
+    let mut grpc_ids = ctx
+        .db()
+        .list_grpc_requests_for_folder_recursive(folder_id)
+        .map_err(|e| format!("Failed to list gRPC requests in folder: {e}"))?
+        .into_iter()
+        .map(|r| r.id)
+        .collect::<Vec<_>>();
+    ids.append(&mut grpc_ids);
+
+    let mut websocket_ids = ctx
+        .db()
+        .list_websocket_requests_for_folder_recursive(folder_id)
+        .map_err(|e| format!("Failed to list WebSocket requests in folder: {e}"))?
+        .into_iter()
+        .map(|r| r.id)
+        .collect::<Vec<_>>();
+    ids.append(&mut websocket_ids);
+
+    Ok(ids)
+}
+
+fn collect_workspace_request_ids(
+    ctx: &CliContext,
+    workspace_id: &str,
+) -> Result<Vec<String>, String> {
+    let mut ids = Vec::new();
+
+    let mut http_ids = ctx
+        .db()
+        .list_http_requests(workspace_id)
+        .map_err(|e| format!("Failed to list HTTP requests in workspace: {e}"))?
+        .into_iter()
+        .map(|r| r.id)
+        .collect::<Vec<_>>();
+    ids.append(&mut http_ids);
+
+    let mut grpc_ids = ctx
+        .db()
+        .list_grpc_requests(workspace_id)
+        .map_err(|e| format!("Failed to list gRPC requests in workspace: {e}"))?
+        .into_iter()
+        .map(|r| r.id)
+        .collect::<Vec<_>>();
+    ids.append(&mut grpc_ids);
+
+    let mut websocket_ids = ctx
+        .db()
+        .list_websocket_requests(workspace_id)
+        .map_err(|e| format!("Failed to list WebSocket requests in workspace: {e}"))?
+        .into_iter()
+        .map(|r| r.id)
+        .collect::<Vec<_>>();
+    ids.append(&mut websocket_ids);
+
+    Ok(ids)
+}
+
+async fn send_many(
+    ctx: &CliContext,
+    request_ids: Vec<String>,
+    mode: ExecutionMode,
+    fail_fast: bool,
+    environment: Option<&str>,
+    cookie_jar_id: Option<&str>,
+    verbose: bool,
+) -> Result<(), String> {
+    let mut success_count = 0usize;
+    let mut failures: Vec<(String, String)> = Vec::new();
+
+    match mode {
+        ExecutionMode::Sequential => {
+            for request_id in request_ids {
+                match request::send_request_by_id(
+                    ctx,
+                    &request_id,
+                    environment,
+                    cookie_jar_id,
+                    verbose,
+                )
+                .await
+                {
+                    Ok(()) => success_count += 1,
+                    Err(error) => {
+                        failures.push((request_id, error));
+                        if fail_fast {
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        ExecutionMode::Parallel => {
+            let tasks = request_ids
+                .iter()
+                .map(|request_id| async move {
+                    (
+                        request_id.clone(),
+                        request::send_request_by_id(
+                            ctx,
+                            request_id,
+                            environment,
+                            cookie_jar_id,
+                            verbose,
+                        )
+                        .await,
+                    )
+                })
+                .collect::<Vec<_>>();
+
+            for (request_id, result) in join_all(tasks).await {
+                match result {
+                    Ok(()) => success_count += 1,
+                    Err(error) => failures.push((request_id, error)),
+                }
+            }
+        }
+    }
+
+    let failure_count = failures.len();
+    println!("Send summary: {success_count} succeeded, {failure_count} failed");
+
+    if failure_count == 0 {
+        return Ok(());
+    }
+
+    for (request_id, error) in failures {
+        eprintln!("  {}: {}", request_id, error);
+    }
+    Err("One or more requests failed".to_string())
+}
diff --git a/crates-cli/yaak-cli/src/commands/template_function.rs b/crates-cli/yaak-cli/src/commands/template_function.rs
new file mode 100644
index 0000000..c2666e1
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/template_function.rs
@@ -0,0 +1,111 @@
+use crate::cli::{TemplateFunctionArgs, TemplateFunctionCommands};
+use crate::context::CliContext;
+use yaak_plugins::events::{PluginContext, TemplateFunction};
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+pub async fn run(ctx: &CliContext, args: TemplateFunctionArgs) -> i32 {
+    let result = match args.command {
+        TemplateFunctionCommands::List { filter } => list(ctx, filter.as_deref()).await,
+        TemplateFunctionCommands::Show { name, pretty } => show(ctx, &name, pretty).await,
+    };
+
+    match result {
+        Ok(()) => 0,
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+/// Template functions come from plugins, so the only accurate list is the one the
+/// installed plugins report right now.
+async fn all(ctx: &CliContext) -> CommandResult<Vec<TemplateFunction>> {
+    let plugin_context = PluginContext::new_empty();
+    let summaries = ctx
+        .plugin_manager()
+        .get_template_function_summaries(&plugin_context)
+        .await
+        .map_err(|e| format!("Failed to list template functions: {e}"))?;
+
+    let mut functions: Vec<TemplateFunction> =
+        summaries.into_iter().flat_map(|summary| summary.functions).collect();
+    functions.sort_by(|a, b| a.name.cmp(&b.name));
+    Ok(functions)
+}
+
+async fn list(ctx: &CliContext, filter: Option<&str>) -> CommandResult {
+    let mut functions = all(ctx).await?;
+
+    if let Some(filter) = filter {
+        let needle = filter.to_lowercase();
+        functions.retain(|f| f.name.to_lowercase().contains(&needle));
+    }
+
+    if functions.is_empty() {
+        match filter {
+            Some(filter) => println!("No template functions matching '{filter}'"),
+            None => println!("No template functions found"),
+        }
+        return Ok(());
+    }
+
+    for function in functions {
+        let args = function.args.iter().filter_map(arg_name).collect::<Vec<_>>().join(", ");
+        match function.description {
+            Some(description) if !description.is_empty() => {
+                println!("{}({}) - {}", function.name, args, description)
+            }
+            _ => println!("{}({})", function.name, args),
+        }
+    }
+
+    Ok(())
+}
+
+async fn show(ctx: &CliContext, name: &str, pretty: bool) -> CommandResult {
+    let functions = all(ctx).await?;
+    let function = functions
+        .iter()
+        .find(|f| {
+            f.name == name
+                || f.aliases.as_ref().is_some_and(|aliases| aliases.iter().any(|a| a == name))
+        })
+        .ok_or_else(|| {
+            let names = functions.iter().map(|f| f.name.as_str()).collect::<Vec<_>>();
+            format!("No template function named '{name}'. Available: {}", names.join(", "))
+        })?;
+
+    let output = if pretty {
+        serde_json::to_string_pretty(function)
+    } else {
+        serde_json::to_string(function)
+    }
+    .map_err(|e| format!("Failed to serialize template function: {e}"))?;
+
+    println!("{output}");
+    Ok(())
+}
+
+fn arg_name(arg: &yaak_plugins::events::TemplateFunctionArg) -> Option<String> {
+    use yaak_plugins::events::{FormInput, TemplateFunctionArg};
+
+    let TemplateFunctionArg::FormInput(input) = arg;
+    let base = match input {
+        FormInput::Text(v) => &v.base,
+        FormInput::Editor(v) => &v.base,
+        FormInput::Select(v) => &v.base,
+        FormInput::Checkbox(v) => &v.base,
+        FormInput::File(v) => &v.base,
+        FormInput::HttpRequest(v) => &v.base,
+        FormInput::KeyValue(v) => &v.base,
+        // Layout-only inputs have no value of their own
+        FormInput::Accordion(_)
+        | FormInput::HStack(_)
+        | FormInput::Banner(_)
+        | FormInput::Markdown(_) => return None,
+    };
+
+    if base.name.trim().is_empty() { None } else { Some(base.name.clone()) }
+}
diff --git a/crates-cli/yaak-cli/src/commands/workspace.rs b/crates-cli/yaak-cli/src/commands/workspace.rs
new file mode 100644
index 0000000..cc1fc08
--- /dev/null
+++ b/crates-cli/yaak-cli/src/commands/workspace.rs
@@ -0,0 +1,140 @@
+use crate::cli::{WorkspaceArgs, WorkspaceCommands};
+use crate::context::CliContext;
+use crate::utils::confirm::confirm_delete;
+use crate::utils::json::{
+    apply_merge_patch, parse_optional_json, parse_required_json, require_id, validate_create_id,
+};
+use crate::utils::schema::append_agent_hints;
+use schemars::schema_for;
+use yaak_models::models::Workspace;
+use yaak_models::util::UpdateSource;
+
+type CommandResult<T = ()> = std::result::Result<T, String>;
+
+pub fn run(ctx: &CliContext, args: WorkspaceArgs) -> i32 {
+    let result = match args.command {
+        WorkspaceCommands::List => list(ctx),
+        WorkspaceCommands::Schema { pretty } => schema(pretty),
+        WorkspaceCommands::Show { workspace_id } => show(ctx, &workspace_id),
+        WorkspaceCommands::Create { name, json, json_input } => create(ctx, name, json, json_input),
+        WorkspaceCommands::Update { json, json_input } => update(ctx, json, json_input),
+        WorkspaceCommands::Delete { workspace_id, yes } => delete(ctx, &workspace_id, yes),
+    };
+
+    match result {
+        Ok(()) => 0,
+        Err(error) => {
+            eprintln!("Error: {error}");
+            1
+        }
+    }
+}
+
+fn schema(pretty: bool) -> CommandResult {
+    let mut schema = serde_json::to_value(schema_for!(Workspace))
+        .map_err(|e| format!("Failed to serialize workspace schema: {e}"))?;
+    append_agent_hints(&mut schema);
+
+    let output =
+        if pretty { serde_json::to_string_pretty(&schema) } else { serde_json::to_string(&schema) }
+            .map_err(|e| format!("Failed to format workspace schema JSON: {e}"))?;
+    println!("{output}");
+    Ok(())
+}
+
+fn list(ctx: &CliContext) -> CommandResult {
+    let workspaces =
+        ctx.db().list_workspaces().map_err(|e| format!("Failed to list workspaces: {e}"))?;
+    if workspaces.is_empty() {
+        println!("No workspaces found");
+    } else {
+        for workspace in workspaces {
+            println!("{} - {}", workspace.id, workspace.name);
+        }
+    }
+    Ok(())
+}
+
+fn show(ctx: &CliContext, workspace_id: &str) -> CommandResult {
+    let workspace = ctx
+        .db()
+        .get_workspace(workspace_id)
+        .map_err(|e| format!("Failed to get workspace: {e}"))?;
+    let output = serde_json::to_string_pretty(&workspace)
+        .map_err(|e| format!("Failed to serialize workspace: {e}"))?;
+    println!("{output}");
+    Ok(())
+}
+
+fn create(
+    ctx: &CliContext,
+    name: Option<String>,
+    json: Option<String>,
+    json_input: Option<String>,
+) -> CommandResult {
+    let payload = parse_optional_json(json, json_input, "workspace create")?;
+
+    if let Some(payload) = payload {
+        if name.is_some() {
+            return Err("workspace create cannot combine --name with JSON payload".to_string());
+        }
+
+        validate_create_id(&payload, "workspace")?;
+        let workspace: Workspace = serde_json::from_value(payload)
+            .map_err(|e| format!("Failed to parse workspace create JSON: {e}"))?;
+
+        let created = ctx
+            .query_manager()
+            .with_tx(|tx| tx.upsert_workspace(&workspace, &UpdateSource::Sync))
+            .map_err(|e| format!("Failed to create workspace: {e}"))?;
+        println!("Created workspace: {}", created.id);
+        return Ok(());
+    }
+
+    let name = name.ok_or_else(|| {
+        "workspace create requires --name unless JSON payload is provided".to_string()
+    })?;
+
+    let workspace = Workspace { name, ..Default::default() };
+    let created = ctx
+        .query_manager()
+        .with_tx(|tx| tx.upsert_workspace(&workspace, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to create workspace: {e}"))?;
+    println!("Created workspace: {}", created.id);
+    Ok(())
+}
+
+fn update(ctx: &CliContext, json: Option<String>, json_input: Option<String>) -> CommandResult {
+    let patch = parse_required_json(json, json_input, "workspace update")?;
+    let id = require_id(&patch, "workspace update")?;
+
+    let existing = ctx
+        .db()
+        .get_workspace(&id)
+        .map_err(|e| format!("Failed to get workspace for update: {e}"))?;
+    let updated = apply_merge_patch(&existing, &patch, &id, "workspace update")?;
+
+    let saved = ctx
+        .query_manager()
+        .with_tx(|tx| tx.upsert_workspace(&updated, &UpdateSource::Sync))
+        .map_err(|e| format!("Failed to update workspace: {e}"))?;
+
+    println!("Updated workspace: {}", saved.id);
+    Ok(())
+}
+
+fn delete(ctx: &CliContext, workspace_id: &str, yes: bool) -> CommandResult {
+    if !yes && !confirm_delete("workspace", workspace_id) {
+        println!("Aborted");
+        return Ok(());
+    }
+
+    let deleted = ctx
+        .query_manager()
+        .with_tx(|tx| {
+            tx.delete_workspace_by_id(workspace_id, &UpdateSource::Sync, ctx.blob_manager())
+        })
+        .map_err(|e| format!("Failed to delete workspace: {e}"))?;
+    println!("Deleted workspace: {}", deleted.id);
+    Ok(())
+}
diff --git a/crates-cli/yaak-cli/src/context.rs b/crates-cli/yaak-cli/src/context.rs
new file mode 100644
index 0000000..9822e0c
--- /dev/null
+++ b/crates-cli/yaak-cli/src/context.rs
@@ -0,0 +1,163 @@
+use crate::plugin_events::CliPluginEventBridge;
+use include_dir::{Dir, include_dir};
+use std::fs;
+use std::path::{Path, PathBuf};
+use std::sync::Arc;
+use tokio::sync::Mutex;
+use yaak_crypto::manager::EncryptionManager;
+use yaak_http::manager::HttpConnectionManager;
+use yaak_models::blob_manager::BlobManager;
+use yaak_models::client_db::ClientDb;
+use yaak_models::query_manager::QueryManager;
+use yaak_plugins::events::PluginContext;
+use yaak_plugins::manager::PluginManager;
+
+const EMBEDDED_PLUGIN_RUNTIME: &str = include_str!(concat!(
+    env!("CARGO_MANIFEST_DIR"),
+    "/../../crates-tauri/yaak-app-client/vendored/plugin-runtime/index.cjs"
+));
+static EMBEDDED_VENDORED_PLUGINS: Dir<'_> =
+    include_dir!("$CARGO_MANIFEST_DIR/../../crates-tauri/yaak-app-client/vendored/plugins");
+
+#[derive(Clone, Debug, Default)]
+pub struct CliExecutionContext {
+    pub request_id: Option<String>,
+    pub workspace_id: Option<String>,
+    pub environment_id: Option<String>,
+    pub cookie_jar_id: Option<String>,
+}
+
+pub struct CliContext {
+    data_dir: PathBuf,
+    query_manager: QueryManager,
+    blob_manager: BlobManager,
+    pub encryption_manager: Arc<EncryptionManager>,
+    connection_manager: Arc<HttpConnectionManager>,
+    plugin_manager: Option<Arc<PluginManager>>,
+    plugin_event_bridge: Mutex<Option<CliPluginEventBridge>>,
+}
+
+impl CliContext {
+    pub fn new(data_dir: PathBuf, app_id: &str) -> Self {
+        let db_path = data_dir.join("db.sqlite");
+        let blob_path = data_dir.join("blobs.sqlite");
+        let (query_manager, blob_manager, _rx) =
+            match yaak_models::init_standalone(&db_path, &blob_path) {
+                Ok(v) => v,
+                Err(err) => {
+                    eprintln!("Error: Failed to initialize database: {err}");
+                    std::process::exit(1);
+                }
+            };
+
+        // Guest: the desktop may have this DB open, so only what's safe beside a live session
+        let _ = query_manager.with_tx(|tx| {
+            yaak_lifecycle::on_launch(&yaak_lifecycle::Host::guest(), tx, &blob_manager)
+        });
+
+        let encryption_manager = Arc::new(EncryptionManager::new(query_manager.clone(), app_id));
+
+        Self {
+            data_dir,
+            query_manager,
+            blob_manager,
+            encryption_manager,
+            connection_manager: Arc::new(HttpConnectionManager::new()),
+            plugin_manager: None,
+            plugin_event_bridge: Mutex::new(None),
+        }
+    }
+
+    pub async fn init_plugins(&mut self, execution_context: CliExecutionContext) {
+        let vendored_plugin_dir = self.data_dir.join("vendored-plugins");
+        let installed_plugin_dir = self.data_dir.join("installed-plugins");
+        let node_bin_path = PathBuf::from("node");
+
+        prepare_embedded_vendored_plugins(&vendored_plugin_dir)
+            .expect("Failed to prepare bundled plugins");
+
+        let plugin_runtime_main =
+            std::env::var("YAAK_PLUGIN_RUNTIME").map(PathBuf::from).unwrap_or_else(|_| {
+                prepare_embedded_plugin_runtime(&self.data_dir)
+                    .expect("Failed to prepare embedded plugin runtime")
+            });
+
+        match PluginManager::new(
+            vendored_plugin_dir,
+            installed_plugin_dir,
+            node_bin_path,
+            plugin_runtime_main,
+            &self.query_manager,
+            &PluginContext::new_empty(),
+            false,
+        )
+        .await
+        {
+            Ok(plugin_manager) => {
+                let plugin_manager = Arc::new(plugin_manager);
+                let plugin_event_bridge = CliPluginEventBridge::start(
+                    plugin_manager.clone(),
+                    self.query_manager.clone(),
+                    self.blob_manager.clone(),
+                    self.encryption_manager.clone(),
+                    self.connection_manager.clone(),
+                    self.data_dir.clone(),
+                    execution_context,
+                )
+                .await;
+                self.plugin_manager = Some(plugin_manager);
+                *self.plugin_event_bridge.lock().await = Some(plugin_event_bridge);
+            }
+            Err(err) => {
+                eprintln!("Warning: Failed to initialize plugins: {err}");
+            }
+        }
+    }
+
+    pub fn data_dir(&self) -> &Path {
+        &self.data_dir
+    }
+
+    pub fn db(&self) -> ClientDb<'_> {
+        self.query_manager.connect()
+    }
+
+    pub fn query_manager(&self) -> &QueryManager {
+        &self.query_manager
+    }
+
+    pub fn blob_manager(&self) -> &BlobManager {
+        &self.blob_manager
+    }
+
+    pub fn connection_manager(&self) -> &HttpConnectionManager {
+        &self.connection_manager
+    }
+
+    pub fn plugin_manager(&self) -> Arc<PluginManager> {
+        self.plugin_manager.clone().expect("Plugin manager was not initialized for this command")
+    }
+
+    pub async fn shutdown(&self) {
+        if let Some(plugin_manager) = &self.plugin_manager {
+            if let Some(plugin_event_bridge) = self.plugin_event_bridge.lock().await.take() {
+                plugin_event_bridge.shutdown(plugin_manager).await;
+            }
+            plugin_manager.terminate().await;
+        }
+    }
+}
+
+fn prepare_embedded_plugin_runtime(data_dir: &Path) -> std::io::Result<PathBuf> {
+    let runtime_dir = data_dir.join("vendored").join("plugin-runtime");
+    fs::create_dir_all(&runtime_dir)?;
+    let runtime_main = runtime_dir.join("index.cjs");
+    fs::write(&runtime_main, EMBEDDED_PLUGIN_RUNTIME)?;
+    Ok(runtime_main)
+}
+
+fn prepare_embedded_vendored_plugins(vendored_plugin_dir: &Path) -> std::io::Result<()> {
+    fs::create_dir_all(vendored_plugin_dir)?;
+    EMBEDDED_VENDORED_PLUGINS.extract(vendored_plugin_dir)?;
+    Ok(())
+}
diff --git a/crates-cli/yaak-cli/src/main.rs b/crates-cli/yaak-cli/src/main.rs
new file mode 100644
index 0000000..b602037
--- /dev/null
+++ b/crates-cli/yaak-cli/src/main.rs
@@ -0,0 +1,331 @@
+mod cli;
+mod commands;
+mod context;
+mod plugin_events;
+mod ui;
+mod utils;
+mod version;
+mod version_check;
+
+use clap::{CommandFactory, FromArgMatches};
+use cli::{AGENT_HINTS, Cli, Commands, PluginCommands, RequestCommands};
+use context::{CliContext, CliExecutionContext};
+use std::path::PathBuf;
+use yaak_models::queries::any_request::AnyRequest;
+
+/// Built at runtime so root `--help` can report whether the installed agent skill is
+/// still in step with this CLI version.
+fn help_footer() -> String {
+    match commands::agent::help_section() {
+        Some(section) => format!("{AGENT_HINTS}\n\n{section}"),
+        None => format!(
+            "{AGENT_HINTS}\n  - Run `yaak agent install` to install the Yaak skill for AI coding agents"
+        ),
+    }
+}
+
+#[tokio::main]
+async fn main() {
+    let matches = Cli::command().after_help(help_footer()).get_matches();
+    let Cli { data_dir, environment, cookie_jar, verbose, log, command } =
+        match Cli::from_arg_matches(&matches) {
+            Ok(cli) => cli,
+            Err(error) => error.exit(),
+        };
+
+    if let Some(log_level) = log {
+        match log_level {
+            Some(level) => {
+                env_logger::Builder::new().filter_level(level.as_filter()).init();
+            }
+            None => {
+                env_logger::Builder::from_env(env_logger::Env::default().default_filter_or("info"))
+                    .init();
+            }
+        }
+    }
+
+    let app_id = if cfg!(debug_assertions) { "app.yaak.desktop.dev" } else { "app.yaak.desktop" };
+
+    let data_dir = data_dir.unwrap_or_else(|| resolve_data_dir(app_id));
+
+    version_check::maybe_check_for_updates().await;
+
+    let exit_code = match command {
+        Commands::Agent(args) => commands::agent::run(args),
+        Commands::Response(args) => {
+            let context = CliContext::new(data_dir.clone(), app_id);
+            let exit_code = commands::response::run(&context, args);
+            context.shutdown().await;
+            exit_code
+        }
+        Commands::TemplateFunction(args) => {
+            let mut context = CliContext::new(data_dir.clone(), app_id);
+            context.init_plugins(CliExecutionContext::default()).await;
+            let exit_code = commands::template_function::run(&context, args).await;
+            context.shutdown().await;
+            exit_code
+        }
+        Commands::Auth(args) => commands::auth::run(args).await,
+        Commands::Import(args) => {
+            let mut context = CliContext::new(data_dir.clone(), app_id);
+            let execution_context = CliExecutionContext {
+                workspace_id: args.workspace_id.clone(),
+                ..CliExecutionContext::default()
+            };
+            context.init_plugins(execution_context).await;
+            let exit_code = commands::import_export::run_import(&context, args).await;
+            context.shutdown().await;
+            exit_code
+        }
+        Commands::Export(args) => {
+            let context = CliContext::new(data_dir.clone(), app_id);
+            let exit_code = commands::import_export::run_export(&context, args);
+            context.shutdown().await;
+            exit_code
+        }
+        Commands::Plugin(args) => match args.command {
+            PluginCommands::Build(args) => commands::plugin::run_build(args).await,
+            PluginCommands::Dev(args) => commands::plugin::run_dev(args).await,
+            PluginCommands::Generate(args) => commands::plugin::run_generate(args).await,
+            PluginCommands::Publish(args) => commands::plugin::run_publish(args).await,
+            PluginCommands::Metadata(args) => commands::plugin::run_metadata(args).await,
+            PluginCommands::Install(install_args) => {
+                let mut context = CliContext::new(data_dir.clone(), app_id);
+                context.init_plugins(CliExecutionContext::default()).await;
+                let exit_code = commands::plugin::run_install(&context, install_args).await;
+                context.shutdown().await;
+                exit_code
+            }
+        },
+        Commands::Build(args) => commands::plugin::run_build(args).await,
+        Commands::Dev(args) => commands::plugin::run_dev(args).await,
+        Commands::Generate(args) => commands::plugin::run_generate(args).await,
+        Commands::Publish(args) => commands::plugin::run_publish(args).await,
+        Commands::Send(args) => {
+            let mut context = CliContext::new(data_dir.clone(), app_id);
+            match resolve_send_execution_context(
+                &context,
+                &args.id,
+                environment.as_deref(),
+                cookie_jar.as_deref(),
+            ) {
+                Ok(execution_context) => {
+                    context.init_plugins(execution_context).await;
+                    let exit_code = commands::send::run(
+                        &context,
+                        args,
+                        environment.as_deref(),
+                        cookie_jar.as_deref(),
+                        verbose,
+                    )
+                    .await;
+                    context.shutdown().await;
+                    exit_code
+                }
+                Err(error) => {
+                    eprintln!("Error: {error}");
+                    1
+                }
+            }
+        }
+        Commands::CookieJar(args) => {
+            let context = CliContext::new(data_dir.clone(), app_id);
+            let exit_code = commands::cookie_jar::run(&context, args);
+            context.shutdown().await;
+            exit_code
+        }
+        Commands::Workspace(args) => {
+            let context = CliContext::new(data_dir.clone(), app_id);
+            let exit_code = commands::workspace::run(&context, args);
+            context.shutdown().await;
+            exit_code
+        }
+        Commands::Request(args) => {
+            let mut context = CliContext::new(data_dir.clone(), app_id);
+            let execution_context_result = match &args.command {
+                RequestCommands::Send { request_id } => resolve_request_execution_context(
+                    &context,
+                    request_id,
+                    environment.as_deref(),
+                    cookie_jar.as_deref(),
+                ),
+                _ => Ok(CliExecutionContext::default()),
+            };
+            match execution_context_result {
+                Ok(execution_context) => {
+                    let with_plugins = matches!(
+                        &args.command,
+                        RequestCommands::Send { .. } | RequestCommands::Schema { .. }
+                    );
+                    if with_plugins {
+                        context.init_plugins(execution_context).await;
+                    }
+                    let exit_code = commands::request::run(
+                        &context,
+                        args,
+                        environment.as_deref(),
+                        cookie_jar.as_deref(),
+                        verbose,
+                    )
+                    .await;
+                    context.shutdown().await;
+                    exit_code
+                }
+                Err(error) => {
+                    eprintln!("Error: {error}");
+                    1
+                }
+            }
+        }
+        Commands::Folder(args) => {
+            let context = CliContext::new(data_dir.clone(), app_id);
+            let exit_code = commands::folder::run(&context, args);
+            context.shutdown().await;
+            exit_code
+        }
+        Commands::Environment(args) => {
+            let context = CliContext::new(data_dir.clone(), app_id);
+            let exit_code = commands::environment::run(&context, args);
+            context.shutdown().await;
+            exit_code
+        }
+    };
+
+    if exit_code != 0 {
+        std::process::exit(exit_code);
+    }
+}
+
+fn resolve_send_execution_context(
+    context: &CliContext,
+    id: &str,
+    environment: Option<&str>,
+    explicit_cookie_jar_id: Option<&str>,
+) -> Result<CliExecutionContext, String> {
+    if let Ok(request) = context.db().get_any_request(id) {
+        let (request_id, workspace_id) = match request {
+            AnyRequest::HttpRequest(r) => (Some(r.id), r.workspace_id),
+            AnyRequest::GrpcRequest(r) => (Some(r.id), r.workspace_id),
+            AnyRequest::WebsocketRequest(r) => (Some(r.id), r.workspace_id),
+        };
+        let cookie_jar_id = resolve_cookie_jar_id(context, &workspace_id, explicit_cookie_jar_id)?;
+        return Ok(CliExecutionContext {
+            request_id,
+            workspace_id: Some(workspace_id),
+            environment_id: environment.map(str::to_string),
+            cookie_jar_id,
+        });
+    }
+
+    if let Ok(folder) = context.db().get_folder(id) {
+        let cookie_jar_id =
+            resolve_cookie_jar_id(context, &folder.workspace_id, explicit_cookie_jar_id)?;
+        return Ok(CliExecutionContext {
+            request_id: None,
+            workspace_id: Some(folder.workspace_id),
+            environment_id: environment.map(str::to_string),
+            cookie_jar_id,
+        });
+    }
+
+    if let Ok(workspace) = context.db().get_workspace(id) {
+        let cookie_jar_id = resolve_cookie_jar_id(context, &workspace.id, explicit_cookie_jar_id)?;
+        return Ok(CliExecutionContext {
+            request_id: None,
+            workspace_id: Some(workspace.id),
+            environment_id: environment.map(str::to_string),
+            cookie_jar_id,
+        });
+    }
+
+    Err(format!("Could not resolve ID '{}' as request, folder, or workspace", id))
+}
+
+fn resolve_request_execution_context(
+    context: &CliContext,
+    request_id: &str,
+    environment: Option<&str>,
+    explicit_cookie_jar_id: Option<&str>,
+) -> Result<CliExecutionContext, String> {
+    let request = context
+        .db()
+        .get_any_request(request_id)
+        .map_err(|e| format!("Failed to get request: {e}"))?;
+
+    let workspace_id = match request {
+        AnyRequest::HttpRequest(r) => r.workspace_id,
+        AnyRequest::GrpcRequest(r) => r.workspace_id,
+        AnyRequest::WebsocketRequest(r) => r.workspace_id,
+    };
+    let cookie_jar_id = resolve_cookie_jar_id(context, &workspace_id, explicit_cookie_jar_id)?;
+
+    Ok(CliExecutionContext {
+        request_id: Some(request_id.to_string()),
+        workspace_id: Some(workspace_id),
+        environment_id: environment.map(str::to_string),
+        cookie_jar_id,
+    })
+}
+
+fn resolve_cookie_jar_id(
+    context: &CliContext,
+    workspace_id: &str,
+    explicit_cookie_jar_id: Option<&str>,
+) -> Result<Option<String>, String> {
+    if let Some(cookie_jar_id) = explicit_cookie_jar_id {
+        return Ok(Some(cookie_jar_id.to_string()));
+    }
+
+    let default_cookie_jar = context
+        .db()
+        .list_cookie_jars(workspace_id)
+        .map_err(|e| format!("Failed to list cookie jars: {e}"))?
+        .into_iter()
+        .min_by_key(|jar| jar.created_at)
+        .map(|jar| jar.id);
+    Ok(default_cookie_jar)
+}
+
+fn resolve_data_dir(app_id: &str) -> PathBuf {
+    if let Some(dir) = wsl_data_dir(app_id) {
+        return dir;
+    }
+    dirs::data_dir().expect("Could not determine data directory").join(app_id)
+}
+
+/// Detect WSL and resolve the Windows AppData\Roaming path for the Yaak data directory.
+fn wsl_data_dir(app_id: &str) -> Option<PathBuf> {
+    if !cfg!(target_os = "linux") {
+        return None;
+    }
+
+    let proc_version = std::fs::read_to_string("/proc/version").ok()?;
+    let is_wsl = proc_version.to_lowercase().contains("microsoft");
+    if !is_wsl {
+        return None;
+    }
+
+    // We're in WSL, so try to resolve the Yaak app's data directory in Windows
+
+    // Get the Windows %APPDATA% path via cmd.exe
+    let appdata_output =
+        std::process::Command::new("cmd.exe").args(["/C", "echo", "%APPDATA%"]).output().ok()?;
+
+    let win_path = String::from_utf8(appdata_output.stdout).ok()?.trim().to_string();
+    if win_path.is_empty() || win_path == "%APPDATA%" {
+        return None;
+    }
+
+    // Convert Windows path to WSL path using wslpath (handles custom mount points)
+    let wslpath_output = std::process::Command::new("wslpath").arg(&win_path).output().ok()?;
+
+    let wsl_appdata = String::from_utf8(wslpath_output.stdout).ok()?.trim().to_string();
+    if wsl_appdata.is_empty() {
+        return None;
+    }
+
+    let wsl_path = PathBuf::from(wsl_appdata).join(app_id);
+
+    if wsl_path.exists() { Some(wsl_path) } else { None }
+}
diff --git a/crates-cli/yaak-cli/src/plugin_events.rs b/crates-cli/yaak-cli/src/plugin_events.rs
new file mode 100644
index 0000000..09d59d3
--- /dev/null
+++ b/crates-cli/yaak-cli/src/plugin_events.rs
@@ -0,0 +1,1211 @@
+use crate::context::CliExecutionContext;
+use arboard::Clipboard;
+use base64::Engine;
+use base64::prelude::BASE64_STANDARD;
+use console::Term;
+use inquire::{Confirm, Editor, Password, PasswordDisplayMode, Select, Text};
+use serde_json::Value;
+use std::collections::HashMap;
+use std::io::IsTerminal;
+use std::path::PathBuf;
+use std::sync::Arc;
+use tokio::task::JoinHandle;
+use yaak::plugin_events::{
+    GroupedPluginEvent, HostRequest, SharedPluginEventContext, handle_shared_plugin_event,
+};
+use yaak::response_body::FileResponseBodyStore;
+use yaak::send::{SendHttpRequestWithPluginsParams, send_http_request_with_plugins};
+use yaak_crypto::manager::EncryptionManager;
+use yaak_http::cookies::get_cookie_value_from_jar;
+use yaak_http::manager::HttpConnectionManager;
+use yaak_models::blob_manager::BlobManager;
+use yaak_models::models::Environment;
+use yaak_models::queries::any_request::AnyRequest;
+use yaak_models::query_manager::QueryManager;
+use yaak_models::render::make_vars_hashmap;
+use yaak_models::render::{render_grpc_request, render_http_request};
+use yaak_models::util::UpdateSource;
+use yaak_plugins::events::{
+    EmptyPayload, ErrorResponse, FormInput, GetCookieValueResponse, InternalEvent,
+    InternalEventPayload, JsonPrimitive, ListCookieNamesResponse, ListOpenWorkspacesResponse,
+    PluginContext, PromptFormRequest, PromptFormResponse, PromptTextRequest, PromptTextResponse,
+    RenderGrpcRequestResponse, RenderHttpRequestResponse, SendHttpRequestResponse,
+    TemplateRenderResponse, WindowInfoResponse, WorkspaceInfo,
+};
+use yaak_plugins::manager::PluginManager;
+use yaak_plugins::template_callback::PluginTemplateCallback;
+use yaak_templates::{RenderOptions, TemplateCallback, render_json_value_raw};
+
+pub struct CliPluginEventBridge {
+    rx_id: String,
+    task: JoinHandle<()>,
+}
+
+struct CliHostContext {
+    query_manager: QueryManager,
+    blob_manager: BlobManager,
+    plugin_manager: Arc<PluginManager>,
+    encryption_manager: Arc<EncryptionManager>,
+    connection_manager: Arc<HttpConnectionManager>,
+    response_dir: PathBuf,
+    execution_context: CliExecutionContext,
+}
+
+impl CliPluginEventBridge {
+    pub async fn start(
+        plugin_manager: Arc<PluginManager>,
+        query_manager: QueryManager,
+        blob_manager: BlobManager,
+        encryption_manager: Arc<EncryptionManager>,
+        connection_manager: Arc<HttpConnectionManager>,
+        data_dir: PathBuf,
+        execution_context: CliExecutionContext,
+    ) -> Self {
+        let (rx_id, mut rx) = plugin_manager.subscribe("cli").await;
+        let rx_id_for_task = rx_id.clone();
+        let pm = plugin_manager.clone();
+        let host_context = Arc::new(CliHostContext {
+            query_manager,
+            blob_manager,
+            plugin_manager,
+            encryption_manager,
+            connection_manager,
+            response_dir: data_dir.join("responses"),
+            execution_context,
+        });
+
+        let task = tokio::spawn(async move {
+            while let Some(event) = rx.recv().await {
+                // Events with reply IDs are replies to app-originated requests.
+                if event.reply_id.is_some() {
+                    continue;
+                }
+
+                let Some(plugin_handle) = pm.get_plugin_by_ref_id(&event.plugin_ref_id).await
+                else {
+                    eprintln!(
+                        "Warning: Ignoring plugin event with unknown plugin ref '{}'",
+                        event.plugin_ref_id
+                    );
+                    continue;
+                };
+
+                let pm = pm.clone();
+                let host_context = host_context.clone();
+
+                // Avoid deadlocks for nested plugin-host requests (for example, template functions
+                // that trigger additional host requests during render) by handling each event in
+                // its own task.
+                tokio::spawn(async move {
+                    let plugin_name = plugin_handle.info().name;
+                    let Some(reply_payload) =
+                        build_plugin_reply(host_context.as_ref(), &event, &plugin_name).await
+                    else {
+                        return;
+                    };
+
+                    if let Err(err) = pm.reply(&event, &reply_payload).await {
+                        eprintln!("Warning: Failed replying to plugin event: {err}");
+                    }
+                });
+            }
+
+            pm.unsubscribe(&rx_id_for_task).await;
+        });
+
+        Self { rx_id, task }
+    }
+
+    pub async fn shutdown(self, plugin_manager: &PluginManager) {
+        plugin_manager.unsubscribe(&self.rx_id).await;
+        self.task.abort();
+        let _ = self.task.await;
+    }
+}
+
+async fn build_plugin_reply(
+    host_context: &CliHostContext,
+    event: &InternalEvent,
+    plugin_name: &str,
+) -> Option<InternalEventPayload> {
+    let execution_context = &host_context.execution_context;
+    let shared_workspace_id =
+        event.context.workspace_id.as_deref().or(execution_context.workspace_id.as_deref());
+
+    match handle_shared_plugin_event(
+        &host_context.query_manager,
+        &FileResponseBodyStore::new(&host_context.query_manager),
+        &event.payload,
+        SharedPluginEventContext { plugin_name, workspace_id: shared_workspace_id },
+    ) {
+        GroupedPluginEvent::Handled(payload) => payload,
+        GroupedPluginEvent::ToHandle(host_request) => match host_request {
+            HostRequest::ErrorResponse(resp) => {
+                eprintln!("[plugin:{}] error: {}", plugin_name, resp.error);
+                None
+            }
+            HostRequest::ReloadResponse(_) => None,
+            HostRequest::ShowToast(req) => {
+                eprintln!("[plugin:{}] {}", plugin_name, req.message);
+                Some(InternalEventPayload::ShowToastResponse(EmptyPayload {}))
+            }
+            HostRequest::ListOpenWorkspaces(_) => {
+                let workspaces = match host_context.query_manager.connect().list_workspaces() {
+                    Ok(workspaces) => workspaces
+                        .into_iter()
+                        .map(|w| WorkspaceInfo { id: w.id.clone(), name: w.name, label: w.id })
+                        .collect(),
+                    Err(err) => {
+                        return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                            error: format!("Failed to list workspaces in CLI: {err}"),
+                        }));
+                    }
+                };
+                Some(InternalEventPayload::ListOpenWorkspacesResponse(ListOpenWorkspacesResponse {
+                    workspaces,
+                }))
+            }
+            HostRequest::SendHttpRequest(send_http_request_request) => {
+                let mut http_request = send_http_request_request.http_request.clone();
+                if http_request.workspace_id.is_empty() {
+                    let Some(workspace_id) = event
+                        .context
+                        .workspace_id
+                        .clone()
+                        .or_else(|| execution_context.workspace_id.clone())
+                    else {
+                        return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                            error: "workspace_id is required to send HTTP requests in CLI"
+                                .to_string(),
+                        }));
+                    };
+                    http_request.workspace_id = workspace_id;
+                }
+
+                let environment_id = if let Some(environment_id) =
+                    send_http_request_request.environment_id.as_deref()
+                {
+                    if shared_workspace_id.is_some_and(|id| id != http_request.workspace_id) {
+                        return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                            error: "HTTP request does not belong to the selected workspace"
+                                .to_string(),
+                        }));
+                    }
+                    match host_context
+                        .query_manager
+                        .connect()
+                        .get_environment_for_workspace(&http_request.workspace_id, environment_id)
+                    {
+                        Ok(environment) => Some(environment.id),
+                        Err(err) => {
+                            return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: err.to_string(),
+                            }));
+                        }
+                    }
+                } else {
+                    execution_context.environment_id.clone()
+                };
+
+                let cookie_jar_id =
+                    if let Some(cookie_jar_id) = execution_context.cookie_jar_id.clone() {
+                        Some(cookie_jar_id)
+                    } else {
+                        match host_context
+                            .query_manager
+                            .connect()
+                            .list_cookie_jars(http_request.workspace_id.as_str())
+                        {
+                            Ok(cookie_jars) => cookie_jars
+                                .into_iter()
+                                .min_by_key(|jar| jar.created_at)
+                                .map(|jar| jar.id),
+                            Err(err) => {
+                                return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                                    error: format!("Failed to list cookie jars in CLI: {err}"),
+                                }));
+                            }
+                        }
+                    };
+                let plugin_context = PluginContext {
+                    workspace_id: Some(http_request.workspace_id.clone()),
+                    ..event.context.clone()
+                };
+
+                match send_http_request_with_plugins(SendHttpRequestWithPluginsParams {
+                    query_manager: &host_context.query_manager,
+                    blob_manager: &host_context.blob_manager,
+                    request: http_request,
+                    environment_id: environment_id.as_deref(),
+                    update_source: UpdateSource::Plugin,
+                    cookie_jar_id,
+                    response_dir: &host_context.response_dir,
+                    emit_events_to: None,
+                    emit_response_body_chunks_to: None,
+                    existing_response: None,
+                    plugin_manager: host_context.plugin_manager.clone(),
+                    encryption_manager: host_context.encryption_manager.clone(),
+                    plugin_context: &plugin_context,
+                    cancelled_rx: None,
+                    connection_manager: &host_context.connection_manager,
+                })
+                .await
+                {
+                    Ok(result) => Some(InternalEventPayload::SendHttpRequestResponse(
+                        SendHttpRequestResponse {
+                            http_response: result.response,
+                            // Nothing saved this body, so the reply is the only
+                            // place the plugin can get it.
+                            body: result
+                                .response_body
+                                .returned_bytes()
+                                .map(|b| BASE64_STANDARD.encode(b)),
+                        },
+                    )),
+                    Err(err) => Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: format!("Failed to send HTTP request in CLI: {err}"),
+                    })),
+                }
+            }
+            HostRequest::RenderGrpcRequest(render_grpc_request_request) => {
+                let mut grpc_request = render_grpc_request_request.grpc_request.clone();
+                if grpc_request.workspace_id.is_empty() {
+                    let Some(workspace_id) = event
+                        .context
+                        .workspace_id
+                        .clone()
+                        .or_else(|| execution_context.workspace_id.clone())
+                    else {
+                        return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                            error: "workspace_id is required to render gRPC requests in CLI"
+                                .to_string(),
+                        }));
+                    };
+                    grpc_request.workspace_id = workspace_id;
+                }
+
+                let plugin_context = PluginContext {
+                    workspace_id: Some(grpc_request.workspace_id.clone()),
+                    ..event.context.clone()
+                };
+
+                let environment_chain =
+                    match host_context.query_manager.connect().resolve_environments(
+                        &grpc_request.workspace_id,
+                        grpc_request.folder_id.as_deref(),
+                        execution_context.environment_id.as_deref(),
+                    ) {
+                        Ok(chain) => chain,
+                        Err(err) => {
+                            return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to resolve environments in CLI: {err}"),
+                            }));
+                        }
+                    };
+
+                let template_callback = PluginTemplateCallback::new(
+                    host_context.plugin_manager.clone(),
+                    host_context.encryption_manager.clone(),
+                    &plugin_context,
+                    render_grpc_request_request.purpose.clone(),
+                );
+                let render_options = RenderOptions::throw();
+
+                match render_grpc_request(
+                    &grpc_request,
+                    environment_chain,
+                    &template_callback,
+                    &render_options,
+                )
+                .await
+                {
+                    Ok(grpc_request) => Some(InternalEventPayload::RenderGrpcRequestResponse(
+                        RenderGrpcRequestResponse { grpc_request },
+                    )),
+                    Err(err) => Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: format!("Failed to render gRPC request in CLI: {err}"),
+                    })),
+                }
+            }
+            HostRequest::RenderHttpRequest(render_http_request_request) => {
+                let mut http_request = render_http_request_request.http_request.clone();
+                if http_request.workspace_id.is_empty() {
+                    let Some(workspace_id) = event
+                        .context
+                        .workspace_id
+                        .clone()
+                        .or_else(|| execution_context.workspace_id.clone())
+                    else {
+                        return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                            error: "workspace_id is required to render HTTP requests in CLI"
+                                .to_string(),
+                        }));
+                    };
+                    http_request.workspace_id = workspace_id;
+                }
+
+                let plugin_context = PluginContext {
+                    workspace_id: Some(http_request.workspace_id.clone()),
+                    ..event.context.clone()
+                };
+
+                let environment_chain =
+                    match host_context.query_manager.connect().resolve_environments(
+                        &http_request.workspace_id,
+                        http_request.folder_id.as_deref(),
+                        execution_context.environment_id.as_deref(),
+                    ) {
+                        Ok(chain) => chain,
+                        Err(err) => {
+                            return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to resolve environments in CLI: {err}"),
+                            }));
+                        }
+                    };
+
+                let template_callback = PluginTemplateCallback::new(
+                    host_context.plugin_manager.clone(),
+                    host_context.encryption_manager.clone(),
+                    &plugin_context,
+                    render_http_request_request.purpose.clone(),
+                );
+                let render_options = RenderOptions::throw();
+
+                match render_http_request(
+                    &http_request,
+                    environment_chain,
+                    &template_callback,
+                    &render_options,
+                )
+                .await
+                {
+                    Ok(http_request) => Some(InternalEventPayload::RenderHttpRequestResponse(
+                        RenderHttpRequestResponse { http_request },
+                    )),
+                    Err(err) => Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: format!("Failed to render HTTP request in CLI: {err}"),
+                    })),
+                }
+            }
+            HostRequest::TemplateRender(template_render_request) => {
+                let Some(workspace_id) = event
+                    .context
+                    .workspace_id
+                    .clone()
+                    .or_else(|| execution_context.workspace_id.clone())
+                else {
+                    return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: "workspace_id is required to render templates in CLI".to_string(),
+                    }));
+                };
+
+                let plugin_context = PluginContext {
+                    workspace_id: Some(workspace_id.clone()),
+                    ..event.context.clone()
+                };
+
+                let folder_id = execution_context.request_id.as_ref().and_then(|rid| {
+                    match host_context.query_manager.connect().get_any_request(rid) {
+                        Ok(AnyRequest::HttpRequest(r)) => r.folder_id,
+                        Ok(AnyRequest::GrpcRequest(r)) => r.folder_id,
+                        Ok(AnyRequest::WebsocketRequest(r)) => r.folder_id,
+                        Err(_) => None,
+                    }
+                });
+
+                let environment_chain =
+                    match host_context.query_manager.connect().resolve_environments(
+                        &workspace_id,
+                        folder_id.as_deref(),
+                        execution_context.environment_id.as_deref(),
+                    ) {
+                        Ok(chain) => chain,
+                        Err(err) => {
+                            return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to resolve environments in CLI: {err}"),
+                            }));
+                        }
+                    };
+
+                let template_callback = PluginTemplateCallback::new(
+                    host_context.plugin_manager.clone(),
+                    host_context.encryption_manager.clone(),
+                    &plugin_context,
+                    template_render_request.purpose.clone(),
+                );
+                let render_options = RenderOptions::throw();
+
+                match render_json_value_for_cli(
+                    template_render_request.data.clone(),
+                    environment_chain,
+                    &template_callback,
+                    &render_options,
+                )
+                .await
+                {
+                    Ok(data) => {
+                        Some(InternalEventPayload::TemplateRenderResponse(TemplateRenderResponse {
+                            data,
+                        }))
+                    }
+                    Err(err) => Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: format!("Failed to render template data in CLI: {err}"),
+                    })),
+                }
+            }
+            HostRequest::OpenExternalUrl(open_external_url_request) => {
+                match webbrowser::open(open_external_url_request.url.as_str()) {
+                    Ok(_) => Some(InternalEventPayload::OpenExternalUrlResponse(EmptyPayload {})),
+                    Err(err) => Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: format!("Failed to open external URL in CLI: {err}"),
+                    })),
+                }
+            }
+            HostRequest::CopyText(req) => match copy_text_to_clipboard(req.text.as_str()) {
+                Ok(()) => Some(InternalEventPayload::CopyTextResponse(EmptyPayload {})),
+                Err(error) => Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                    error: format!("Failed to copy text in CLI: {error}"),
+                })),
+            },
+            HostRequest::PromptText(req) => match prompt_text_for_cli(req) {
+                Ok(value) => {
+                    Some(InternalEventPayload::PromptTextResponse(PromptTextResponse { value }))
+                }
+                Err(error) => Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                    error: format!("Failed to prompt text in CLI: {error}"),
+                })),
+            },
+            HostRequest::PromptForm(req) => match prompt_form_for_cli(req) {
+                Ok(values) => Some(InternalEventPayload::PromptFormResponse(PromptFormResponse {
+                    values,
+                    done: Some(true),
+                })),
+                Err(error) => Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                    error: format!("Failed to prompt form in CLI: {error}"),
+                })),
+            },
+            HostRequest::OpenWindow(_) => {
+                Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                    error: "Unsupported plugin request in CLI: open_window_request".to_string(),
+                }))
+            }
+            HostRequest::CloseWindow(_) => {
+                Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                    error: "Unsupported plugin request in CLI: close_window_request".to_string(),
+                }))
+            }
+            HostRequest::ListCookieNames(_) => {
+                let Some(cookie_jar_id) = execution_context.cookie_jar_id.as_deref() else {
+                    return Some(InternalEventPayload::ListCookieNamesResponse(
+                        ListCookieNamesResponse { names: Vec::new() },
+                    ));
+                };
+
+                let cookie_jar =
+                    match host_context.query_manager.connect().get_cookie_jar(cookie_jar_id) {
+                        Ok(cookie_jar) => cookie_jar,
+                        Err(err) => {
+                            return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to load cookie jar in CLI: {err}"),
+                            }));
+                        }
+                    };
+
+                let names = cookie_jar.cookies.into_iter().map(|c| c.name).collect();
+
+                Some(InternalEventPayload::ListCookieNamesResponse(ListCookieNamesResponse {
+                    names,
+                }))
+            }
+            HostRequest::GetCookieValue(req) => {
+                let Some(cookie_jar_id) = execution_context.cookie_jar_id.as_deref() else {
+                    return Some(InternalEventPayload::GetCookieValueResponse(
+                        GetCookieValueResponse { value: None },
+                    ));
+                };
+
+                let cookie_jar =
+                    match host_context.query_manager.connect().get_cookie_jar(cookie_jar_id) {
+                        Ok(cookie_jar) => cookie_jar,
+                        Err(err) => {
+                            return Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to load cookie jar in CLI: {err}"),
+                            }));
+                        }
+                    };
+
+                let value =
+                    get_cookie_value_from_jar(cookie_jar.cookies, &req.name, req.domain.as_deref());
+                Some(InternalEventPayload::GetCookieValueResponse(GetCookieValueResponse { value }))
+            }
+            HostRequest::WindowInfo(req) => {
+                Some(InternalEventPayload::WindowInfoResponse(WindowInfoResponse {
+                    label: req.label.clone(),
+                    request_id: execution_context.request_id.clone(),
+                    workspace_id: execution_context
+                        .workspace_id
+                        .clone()
+                        .or_else(|| event.context.workspace_id.clone()),
+                    environment_id: execution_context.environment_id.clone(),
+                }))
+            }
+            HostRequest::OtherRequest(payload) => {
+                Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                    error: format!("Unsupported plugin request in CLI: {}", payload.type_name()),
+                }))
+            }
+        },
+    }
+}
+
+async fn render_json_value_for_cli<T: TemplateCallback>(
+    value: Value,
+    environment_chain: Vec<Environment>,
+    cb: &T,
+    opt: &RenderOptions,
+) -> yaak_templates::error::Result<Value> {
+    let vars = &make_vars_hashmap(environment_chain);
+    render_json_value_raw(value, vars, cb, opt).await
+}
+
+fn copy_text_to_clipboard(text: &str) -> Result<(), String> {
+    let mut clipboard = Clipboard::new().map_err(|e| e.to_string())?;
+    clipboard.set_text(text.to_string()).map_err(|e| e.to_string())
+}
+
+fn prompt_text_for_cli(req: &PromptTextRequest) -> Result<Option<String>, String> {
+    if !std::io::stdin().is_terminal() {
+        return Err("cannot prompt in non-interactive mode".to_string());
+    }
+
+    let term = Term::stdout();
+    if let Some(description) = &req.description {
+        if !description.is_empty() {
+            term.write_line(description.as_str()).map_err(|e| e.to_string())?;
+        }
+    }
+
+    let label = if req.label.is_empty() { req.id.as_str() } else { req.label.as_str() };
+    let value = if req.password.unwrap_or(false) {
+        prompt_password_with_inquire(
+            label,
+            req.default_value.clone(),
+            req.required.unwrap_or(false),
+        )?
+    } else {
+        prompt_text_with_inquire(
+            label,
+            req.default_value.clone(),
+            req.placeholder.clone(),
+            req.required.unwrap_or(false),
+        )?
+    };
+
+    match value {
+        PromptValue::Cancelled => Ok(None),
+        PromptValue::Value(v) => Ok(v),
+    }
+}
+
+fn prompt_form_for_cli(
+    req: &PromptFormRequest,
+) -> Result<Option<HashMap<String, JsonPrimitive>>, String> {
+    if !std::io::stdin().is_terminal() {
+        return Err("cannot prompt in non-interactive mode".to_string());
+    }
+
+    let term = Term::stdout();
+    if let Some(description) = &req.description {
+        if !description.is_empty() {
+            term.write_line(description.as_str()).map_err(|e| e.to_string())?;
+        }
+    }
+
+    let mut values = HashMap::new();
+    for input in &req.inputs {
+        if prompt_form_input_for_cli(input, &mut values)? == PromptOutcome::Cancelled {
+            return Ok(None);
+        }
+    }
+    Ok(Some(values))
+}
+
+#[derive(Clone, Copy, Eq, PartialEq)]
+enum PromptOutcome {
+    Continue,
+    Cancelled,
+}
+
+fn prompt_form_input_for_cli(
+    input: &FormInput,
+    values: &mut HashMap<String, JsonPrimitive>,
+) -> Result<PromptOutcome, String> {
+    match input {
+        FormInput::Text(input) => {
+            if input.base.hidden.unwrap_or(false) || input.base.disabled.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+
+            let label = prompt_label_for_base(&input.base);
+            let required = !input.base.optional.unwrap_or(false);
+            let value = if input.password.unwrap_or(false) {
+                prompt_password_with_inquire(
+                    label.as_str(),
+                    input.base.default_value.clone(),
+                    required,
+                )?
+            } else {
+                prompt_text_with_inquire(
+                    label.as_str(),
+                    input.base.default_value.clone(),
+                    input.placeholder.clone(),
+                    required,
+                )?
+            };
+
+            match value {
+                PromptValue::Cancelled => Ok(PromptOutcome::Cancelled),
+                PromptValue::Value(Some(v)) => {
+                    values.insert(input.base.name.clone(), JsonPrimitive::String(v));
+                    Ok(PromptOutcome::Continue)
+                }
+                PromptValue::Value(None) => Ok(PromptOutcome::Continue),
+            }
+        }
+        FormInput::Editor(input) => {
+            if input.base.hidden.unwrap_or(false) || input.base.disabled.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+
+            let label = prompt_label_for_base(&input.base);
+            let required = !input.base.optional.unwrap_or(false);
+            let value = prompt_editor_with_inquire(
+                label.as_str(),
+                input.base.default_value.clone(),
+                required,
+            )?;
+            match value {
+                PromptValue::Cancelled => Ok(PromptOutcome::Cancelled),
+                PromptValue::Value(Some(v)) => {
+                    values.insert(input.base.name.clone(), JsonPrimitive::String(v));
+                    Ok(PromptOutcome::Continue)
+                }
+                PromptValue::Value(None) => Ok(PromptOutcome::Continue),
+            }
+        }
+        FormInput::Select(input) => {
+            if input.base.hidden.unwrap_or(false) || input.base.disabled.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+
+            let label = prompt_label_for_base(&input.base);
+            let options = input.options.iter().map(|o| o.value.clone()).collect::<Vec<_>>();
+            let value = prompt_select_with_inquire(
+                label.as_str(),
+                options,
+                input.base.default_value.clone(),
+                !input.base.optional.unwrap_or(false),
+            )?;
+            match value {
+                PromptValue::Cancelled => Ok(PromptOutcome::Cancelled),
+                PromptValue::Value(Some(v)) => {
+                    values.insert(input.base.name.clone(), JsonPrimitive::String(v));
+                    Ok(PromptOutcome::Continue)
+                }
+                PromptValue::Value(None) => Ok(PromptOutcome::Continue),
+            }
+        }
+        FormInput::Checkbox(input) => {
+            if input.base.hidden.unwrap_or(false) || input.base.disabled.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+
+            let label = prompt_label_for_base(&input.base);
+            let default = input
+                .base
+                .default_value
+                .as_deref()
+                .map(|v| matches!(v, "1" | "true" | "yes" | "on"))
+                .unwrap_or(false);
+
+            match prompt_confirm_with_inquire(label.as_str(), default)? {
+                PromptValue::Cancelled => Ok(PromptOutcome::Cancelled),
+                PromptValue::Value(Some(v)) => {
+                    values.insert(input.base.name.clone(), JsonPrimitive::Boolean(v == "true"));
+                    Ok(PromptOutcome::Continue)
+                }
+                PromptValue::Value(None) => Ok(PromptOutcome::Continue),
+            }
+        }
+        FormInput::File(input) => {
+            if input.base.hidden.unwrap_or(false) || input.base.disabled.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+
+            let label = prompt_label_for_base(&input.base);
+            let value = prompt_text_with_inquire(
+                label.as_str(),
+                input.base.default_value.clone(),
+                Some("Path".to_string()),
+                !input.base.optional.unwrap_or(false),
+            )?;
+            match value {
+                PromptValue::Cancelled => Ok(PromptOutcome::Cancelled),
+                PromptValue::Value(Some(v)) => {
+                    values.insert(input.base.name.clone(), JsonPrimitive::String(v));
+                    Ok(PromptOutcome::Continue)
+                }
+                PromptValue::Value(None) => Ok(PromptOutcome::Continue),
+            }
+        }
+        FormInput::HttpRequest(input) => {
+            if input.base.hidden.unwrap_or(false) || input.base.disabled.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+            let label = prompt_label_for_base(&input.base);
+            let value = prompt_text_with_inquire(
+                label.as_str(),
+                input.base.default_value.clone(),
+                Some("Request ID".to_string()),
+                !input.base.optional.unwrap_or(false),
+            )?;
+            match value {
+                PromptValue::Cancelled => Ok(PromptOutcome::Cancelled),
+                PromptValue::Value(Some(v)) => {
+                    values.insert(input.base.name.clone(), JsonPrimitive::String(v));
+                    Ok(PromptOutcome::Continue)
+                }
+                PromptValue::Value(None) => Ok(PromptOutcome::Continue),
+            }
+        }
+        FormInput::KeyValue(input) => {
+            if input.base.hidden.unwrap_or(false) || input.base.disabled.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+            let label = prompt_label_for_base(&input.base);
+            let value = prompt_text_with_inquire(
+                label.as_str(),
+                input.base.default_value.clone(),
+                Some("JSON string".to_string()),
+                !input.base.optional.unwrap_or(false),
+            )?;
+            match value {
+                PromptValue::Cancelled => Ok(PromptOutcome::Cancelled),
+                PromptValue::Value(Some(v)) => {
+                    values.insert(input.base.name.clone(), JsonPrimitive::String(v));
+                    Ok(PromptOutcome::Continue)
+                }
+                PromptValue::Value(None) => Ok(PromptOutcome::Continue),
+            }
+        }
+        FormInput::Accordion(input) => {
+            if input.hidden.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+            if let Some(inputs) = &input.inputs {
+                for nested in inputs {
+                    if prompt_form_input_for_cli(nested, values)? == PromptOutcome::Cancelled {
+                        return Ok(PromptOutcome::Cancelled);
+                    }
+                }
+            }
+            Ok(PromptOutcome::Continue)
+        }
+        FormInput::HStack(input) => {
+            if input.hidden.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+            if let Some(inputs) = &input.inputs {
+                for nested in inputs {
+                    if prompt_form_input_for_cli(nested, values)? == PromptOutcome::Cancelled {
+                        return Ok(PromptOutcome::Cancelled);
+                    }
+                }
+            }
+            Ok(PromptOutcome::Continue)
+        }
+        FormInput::Banner(input) => {
+            if input.hidden.unwrap_or(false) {
+                return Ok(PromptOutcome::Continue);
+            }
+            if let Some(inputs) = &input.inputs {
+                for nested in inputs {
+                    if prompt_form_input_for_cli(nested, values)? == PromptOutcome::Cancelled {
+                        return Ok(PromptOutcome::Cancelled);
+                    }
+                }
+            }
+            Ok(PromptOutcome::Continue)
+        }
+        FormInput::Markdown(input) => {
+            if !input.hidden.unwrap_or(false) && !input.content.trim().is_empty() {
+                let term = Term::stdout();
+                term.write_line(input.content.as_str()).map_err(|e| e.to_string())?;
+            }
+            Ok(PromptOutcome::Continue)
+        }
+    }
+}
+
+enum PromptValue {
+    Value(Option<String>),
+    Cancelled,
+}
+
+fn prompt_text_with_inquire(
+    label: &str,
+    default_value: Option<String>,
+    placeholder: Option<String>,
+    required: bool,
+) -> Result<PromptValue, String> {
+    let default_value = default_value.and_then(|v| {
+        let trimmed = v.trim();
+        if trimmed.is_empty() { None } else { Some(v) }
+    });
+
+    loop {
+        let message = prompt_message(label);
+        let mut prompt = Text::new(message.as_str());
+        if let Some(v) = default_value.as_deref() {
+            prompt = prompt.with_default(v);
+        }
+        if let Some(v) = placeholder.as_deref() {
+            if !v.trim().is_empty() {
+                prompt = prompt.with_placeholder(v);
+            }
+        }
+        let result = prompt.prompt();
+        match result {
+            Ok(v) => {
+                let v = v.trim().to_string();
+                if v.is_empty() {
+                    if let Some(default) = default_value.clone() {
+                        if !default.trim().is_empty() {
+                            return Ok(PromptValue::Value(Some(default)));
+                        }
+                    }
+                    if required {
+                        continue;
+                    }
+                    return Ok(PromptValue::Value(None));
+                }
+                return Ok(PromptValue::Value(Some(v)));
+            }
+            Err(inquire::InquireError::OperationCanceled)
+            | Err(inquire::InquireError::OperationInterrupted) => {
+                return Ok(PromptValue::Cancelled);
+            }
+            Err(err) => return Err(err.to_string()),
+        }
+    }
+}
+
+fn prompt_password_with_inquire(
+    label: &str,
+    default_value: Option<String>,
+    required: bool,
+) -> Result<PromptValue, String> {
+    let default_value = default_value.and_then(|v| {
+        let trimmed = v.trim();
+        if trimmed.is_empty() { None } else { Some(v) }
+    });
+
+    loop {
+        let message = prompt_message(label);
+        let mut prompt = Password::new(message.as_str()).without_confirmation();
+        prompt = prompt.with_display_mode(PasswordDisplayMode::Masked);
+        if default_value.as_ref().is_some_and(|v| !v.trim().is_empty()) {
+            prompt = prompt.with_help_message("Leave blank to use the default value");
+        }
+        let result = prompt.prompt();
+        match result {
+            Ok(v) => {
+                let v = v.trim().to_string();
+                if v.is_empty() {
+                    if let Some(default) = default_value.clone() {
+                        if !default.trim().is_empty() {
+                            return Ok(PromptValue::Value(Some(default)));
+                        }
+                    }
+                    if required {
+                        continue;
+                    }
+                    return Ok(PromptValue::Value(None));
+                }
+                return Ok(PromptValue::Value(Some(v)));
+            }
+            Err(inquire::InquireError::OperationCanceled)
+            | Err(inquire::InquireError::OperationInterrupted) => {
+                return Ok(PromptValue::Cancelled);
+            }
+            Err(err) => return Err(err.to_string()),
+        }
+    }
+}
+
+fn prompt_editor_with_inquire(
+    label: &str,
+    default_value: Option<String>,
+    required: bool,
+) -> Result<PromptValue, String> {
+    loop {
+        let message = prompt_message(label);
+        let mut prompt = Editor::new(message.as_str());
+        if let Some(v) = default_value.as_deref() {
+            prompt = prompt.with_predefined_text(v);
+        }
+        let result = prompt.prompt();
+        match result {
+            Ok(v) => {
+                let v = v.trim().to_string();
+                if v.is_empty() {
+                    if required {
+                        continue;
+                    }
+                    return Ok(PromptValue::Value(None));
+                }
+                return Ok(PromptValue::Value(Some(v)));
+            }
+            Err(inquire::InquireError::OperationCanceled)
+            | Err(inquire::InquireError::OperationInterrupted) => {
+                return Ok(PromptValue::Cancelled);
+            }
+            Err(err) => return Err(err.to_string()),
+        }
+    }
+}
+
+fn prompt_select_with_inquire(
+    label: &str,
+    options: Vec<String>,
+    default_value: Option<String>,
+    required: bool,
+) -> Result<PromptValue, String> {
+    if options.is_empty() {
+        if required {
+            return Err(format!("Select input '{label}' has no options"));
+        }
+        return Ok(PromptValue::Value(None));
+    }
+
+    let index = default_value
+        .as_ref()
+        .and_then(|d| options.iter().position(|o| o == d))
+        .unwrap_or_default();
+
+    let message = prompt_message(label);
+    let mut prompt = Select::new(message.as_str(), options);
+    if default_value.is_some() {
+        prompt = prompt.with_starting_cursor(index);
+    }
+    match prompt.prompt() {
+        Ok(v) => Ok(PromptValue::Value(Some(v))),
+        Err(inquire::InquireError::OperationCanceled)
+        | Err(inquire::InquireError::OperationInterrupted) => Ok(PromptValue::Cancelled),
+        Err(err) => Err(err.to_string()),
+    }
+}
+
+fn prompt_confirm_with_inquire(label: &str, default: bool) -> Result<PromptValue, String> {
+    let message = prompt_message(label);
+    match Confirm::new(message.as_str()).with_default(default).prompt() {
+        Ok(v) => Ok(PromptValue::Value(Some(if v { "true" } else { "false" }.to_string()))),
+        Err(inquire::InquireError::OperationCanceled)
+        | Err(inquire::InquireError::OperationInterrupted) => Ok(PromptValue::Cancelled),
+        Err(err) => Err(err.to_string()),
+    }
+}
+
+fn prompt_message(label: &str) -> String {
+    format!("{label}:")
+}
+
+fn prompt_label_for_base(base: &yaak_plugins::events::FormInputBase) -> String {
+    if let Some(label) = &base.label {
+        if !label.is_empty() {
+            return label.clone();
+        }
+    }
+    base.name.clone()
+}
+
+#[cfg(test)]
+mod environment_tests {
+    use super::*;
+    use serde_json::json;
+    use tempfile::TempDir;
+    use tokio::io::{AsyncReadExt, AsyncWriteExt};
+    use tokio::net::TcpListener;
+    use tokio::time::{Duration, timeout};
+    use yaak_models::models::{EnvironmentVariable, HttpRequest, HttpRequestHeader, Workspace};
+
+    #[tokio::test]
+    async fn plugin_send_uses_override_and_fallback_and_rejects_invalid_ids_before_sending() {
+        let dir = TempDir::new().unwrap();
+        let listener = TcpListener::bind("127.0.0.1:0").await.unwrap();
+        let address = listener.local_addr().unwrap();
+        let (received_tx, mut received_rx) = tokio::sync::mpsc::unbounded_channel();
+        let server = tokio::spawn(async move {
+            loop {
+                let (mut socket, _) = listener.accept().await.unwrap();
+                let mut request = Vec::new();
+                loop {
+                    let mut chunk = [0u8; 1024];
+                    let n = socket.read(&mut chunk).await.unwrap();
+                    if n == 0 {
+                        break;
+                    }
+                    request.extend_from_slice(&chunk[..n]);
+                    if request.windows(4).any(|w| w == b"\r\n\r\n") {
+                        break;
+                    }
+                }
+                let request = String::from_utf8(request).unwrap();
+                eprintln!("Local HTTP test received on {address}:\n{request}");
+                received_tx.send(request).unwrap();
+                socket
+                    .write_all(
+                        b"HTTP/1.1 200 OK\r\nContent-Length: 2\r\nConnection: close\r\n\r\nok",
+                    )
+                    .await
+                    .unwrap();
+            }
+        });
+        let (query_manager, blob_manager, _rx) = yaak_models::init_standalone(
+            &dir.path().join("db.sqlite"),
+            &dir.path().join("blobs.sqlite"),
+        )
+        .unwrap();
+        let (base, a, b, request) = query_manager
+            .with_tx(|db| {
+                let source = &UpdateSource::Background;
+                // Fresh databases no longer come with a workspace, so make one
+                let workspace = db.upsert_workspace(
+                    &Workspace { name: "Test".into(), ..Default::default() },
+                    source,
+                )?;
+                let vars = |value: &str| {
+                    vec![EnvironmentVariable {
+                        enabled: true,
+                        name: "marker".into(),
+                        value: value.into(),
+                        ..Default::default()
+                    }]
+                };
+                let base = db.ensure_base_environment(&workspace.id)?;
+                let base = db.upsert_environment(
+                    &Environment { variables: vars("global"), ..base },
+                    source,
+                )?;
+                let sub = |name: &str| {
+                    db.upsert_environment(
+                        &Environment {
+                            name: name.into(),
+                            workspace_id: workspace.id.clone(),
+                            parent_model: "environment".into(),
+                            parent_id: Some(base.id.clone()),
+                            variables: vars(name),
+                            ..Default::default()
+                        },
+                        source,
+                    )
+                };
+                let a = sub("a")?;
+                let b = sub("b")?;
+                let request = db.upsert_http_request(
+                    &HttpRequest {
+                        workspace_id: workspace.id,
+                        url: format!("http://{address}/echo"),
+                        method: "GET".into(),
+                        headers: vec![HttpRequestHeader {
+                            enabled: true,
+                            name: "X-Environment".into(),
+                            value: "${[ marker ]}".into(),
+                            ..Default::default()
+                        }],
+                        ..Default::default()
+                    },
+                    source,
+                )?;
+                Ok::<_, yaak_models::error::Error>((base, a, b, request))
+            })
+            .unwrap();
+        let plugin_dir = dir.path().join("plugins");
+        std::fs::create_dir_all(&plugin_dir).unwrap();
+        let plugin_manager = Arc::new(
+            PluginManager::new(
+                plugin_dir.clone(),
+                plugin_dir,
+                PathBuf::from("node"),
+                PathBuf::from(env!("CARGO_MANIFEST_DIR"))
+                    .join("../../crates-tauri/yaak-app-client/vendored/plugin-runtime/index.cjs"),
+                &query_manager,
+                &PluginContext::new_empty(),
+                false,
+            )
+            .await
+            .unwrap(),
+        );
+        let host = CliHostContext {
+            encryption_manager: Arc::new(EncryptionManager::new(
+                query_manager.clone(),
+                "yaak-test",
+            )),
+            query_manager,
+            blob_manager,
+            plugin_manager: plugin_manager.clone(),
+            connection_manager: Arc::new(HttpConnectionManager::new()),
+            response_dir: dir.path().join("responses"),
+            execution_context: CliExecutionContext {
+                workspace_id: Some(base.workspace_id.clone()),
+                environment_id: Some(a.id.clone()),
+                ..Default::default()
+            },
+        };
+        std::fs::create_dir_all(&host.response_dir).unwrap();
+        let event = |environment_id: Option<&str>| -> InternalEvent {
+            let mut payload =
+                json!({ "type": "send_http_request_request", "httpRequest": request });
+            if let Some(id) = environment_id {
+                payload["environmentId"] = json!(id);
+            }
+            serde_json::from_value(json!({
+                "id": "test", "pluginRefId": "test", "pluginName": "test", "replyId": null,
+                "context": PluginContext::new_empty(), "payload": payload
+            }))
+            .unwrap()
+        };
+        for (id, marker) in [
+            (Some(b.id.as_str()), "b"),
+            (None, "a"),
+            (Some(base.id.as_str()), "global"),
+        ] {
+            let reply =
+                timeout(Duration::from_secs(10), build_plugin_reply(&host, &event(id), "test"))
+                    .await
+                    .unwrap();
+            assert!(
+                matches!(reply, Some(InternalEventPayload::SendHttpRequestResponse(ref r)) if r.http_response.status == 200),
+                "{reply:?}"
+            );
+            let received = received_rx.recv().await.unwrap().to_lowercase();
+            assert!(received.contains(&format!("x-environment: {marker}\r\n")), "{received}");
+            assert_eq!(host.execution_context.environment_id.as_deref(), Some(a.id.as_str()));
+        }
+        for id in ["", "ev_missing"] {
+            let reply = build_plugin_reply(&host, &event(Some(id)), "test").await;
+            assert!(matches!(reply, Some(InternalEventPayload::ErrorResponse(_))), "{reply:?}");
+        }
+        assert!(received_rx.try_recv().is_err());
+        assert_eq!(
+            host.query_manager
+                .connect()
+                .list_http_responses_for_request(&request.id, None)
+                .unwrap()
+                .len(),
+            3
+        );
+        plugin_manager.terminate().await;
+        server.abort();
+    }
+}
diff --git a/crates-cli/yaak-cli/src/ui.rs b/crates-cli/yaak-cli/src/ui.rs
new file mode 100644
index 0000000..dba3369
--- /dev/null
+++ b/crates-cli/yaak-cli/src/ui.rs
@@ -0,0 +1,42 @@
+use console::style;
+use std::io::{self, IsTerminal};
+
+pub fn info(message: &str) {
+    if io::stdout().is_terminal() {
+        println!("{:<8} {}", style("INFO").cyan().bold(), style(message).cyan());
+    } else {
+        println!("INFO     {message}");
+    }
+}
+
+pub fn warning(message: &str) {
+    if io::stdout().is_terminal() {
+        println!("{:<8} {}", style("WARNING").yellow().bold(), style(message).yellow());
+    } else {
+        println!("WARNING  {message}");
+    }
+}
+
+pub fn warning_stderr(message: &str) {
+    if io::stderr().is_terminal() {
+        eprintln!("{:<8} {}", style("WARNING").yellow().bold(), style(message).yellow());
+    } else {
+        eprintln!("WARNING  {message}");
+    }
+}
+
+pub fn success(message: &str) {
+    if io::stdout().is_terminal() {
+        println!("{:<8} {}", style("SUCCESS").green().bold(), style(message).green());
+    } else {
+        println!("SUCCESS  {message}");
+    }
+}
+
+pub fn error(message: &str) {
+    if io::stderr().is_terminal() {
+        eprintln!("{:<8} {}", style("ERROR").red().bold(), style(message).red());
+    } else {
+        eprintln!("Error: {message}");
+    }
+}
diff --git a/crates-cli/yaak-cli/src/utils/confirm.rs b/crates-cli/yaak-cli/src/utils/confirm.rs
new file mode 100644
index 0000000..038b07d
--- /dev/null
+++ b/crates-cli/yaak-cli/src/utils/confirm.rs
@@ -0,0 +1,16 @@
+use std::io::{self, IsTerminal, Write};
+
+pub fn confirm_delete(resource_name: &str, resource_id: &str) -> bool {
+    if !io::stdin().is_terminal() {
+        eprintln!("Refusing to delete in non-interactive mode without --yes");
+        std::process::exit(1);
+    }
+
+    print!("Delete {resource_name} {resource_id}? [y/N]: ");
+    io::stdout().flush().expect("Failed to flush stdout");
+
+    let mut input = String::new();
+    io::stdin().read_line(&mut input).expect("Failed to read confirmation");
+
+    matches!(input.trim().to_lowercase().as_str(), "y" | "yes")
+}
diff --git a/crates-cli/yaak-cli/src/utils/http.rs b/crates-cli/yaak-cli/src/utils/http.rs
new file mode 100644
index 0000000..b3075ca
--- /dev/null
+++ b/crates-cli/yaak-cli/src/utils/http.rs
@@ -0,0 +1,47 @@
+use reqwest::Client;
+use reqwest::header::{HeaderMap, HeaderName, HeaderValue, USER_AGENT};
+use serde_json::Value;
+
+pub fn build_client(session_token: Option<&str>) -> Result<Client, String> {
+    let mut headers = HeaderMap::new();
+    let user_agent = HeaderValue::from_str(&user_agent())
+        .map_err(|e| format!("Failed to build user-agent header: {e}"))?;
+    headers.insert(USER_AGENT, user_agent);
+
+    if let Some(token) = session_token {
+        let token_value = HeaderValue::from_str(token)
+            .map_err(|e| format!("Failed to build session header: {e}"))?;
+        headers.insert(HeaderName::from_static("x-yaak-session"), token_value);
+    }
+
+    Client::builder()
+        .default_headers(headers)
+        .build()
+        .map_err(|e| format!("Failed to initialize HTTP client: {e}"))
+}
+
+pub fn parse_api_error(status: u16, body: &str) -> String {
+    if let Ok(value) = serde_json::from_str::<Value>(body) {
+        if let Some(message) = value.get("message").and_then(Value::as_str) {
+            return message.to_string();
+        }
+        if let Some(error) = value.get("error").and_then(Value::as_str) {
+            return error.to_string();
+        }
+    }
+
+    format!("API error {status}: {body}")
+}
+
+fn user_agent() -> String {
+    format!("YaakCli/{} ({})", crate::version::cli_version(), ua_platform())
+}
+
+fn ua_platform() -> &'static str {
+    match std::env::consts::OS {
+        "windows" => "Win",
+        "darwin" => "Mac",
+        "linux" => "Linux",
+        _ => "Unknown",
+    }
+}
diff --git a/crates-cli/yaak-cli/src/utils/json.rs b/crates-cli/yaak-cli/src/utils/json.rs
new file mode 100644
index 0000000..7f2fbde
--- /dev/null
+++ b/crates-cli/yaak-cli/src/utils/json.rs
@@ -0,0 +1,131 @@
+use serde::Serialize;
+use serde::de::DeserializeOwned;
+use serde_json::{Map, Value};
+
+type JsonResult<T> = std::result::Result<T, String>;
+
+pub fn is_json_shorthand(input: &str) -> bool {
+    input.trim_start().starts_with('{')
+}
+
+pub fn parse_json_object(raw: &str, context: &str) -> JsonResult<Value> {
+    let value: Value = serde_json::from_str(raw)
+        .map_err(|error| format!("Invalid JSON for {context}: {error}"))?;
+
+    if !value.is_object() {
+        return Err(format!("JSON payload for {context} must be an object"));
+    }
+
+    Ok(value)
+}
+
+pub fn parse_optional_json(
+    json_flag: Option<String>,
+    json_shorthand: Option<String>,
+    context: &str,
+) -> JsonResult<Option<Value>> {
+    match (json_flag, json_shorthand) {
+        (Some(_), Some(_)) => {
+            Err(format!("Cannot provide both --json and positional JSON for {context}"))
+        }
+        (Some(raw), None) => parse_json_object(&raw, context).map(Some),
+        (None, Some(raw)) => parse_json_object(&raw, context).map(Some),
+        (None, None) => Ok(None),
+    }
+}
+
+pub fn parse_required_json(
+    json_flag: Option<String>,
+    json_shorthand: Option<String>,
+    context: &str,
+) -> JsonResult<Value> {
+    parse_optional_json(json_flag, json_shorthand, context)?
+        .ok_or_else(|| format!("Missing JSON payload for {context}. Use --json or positional JSON"))
+}
+
+pub fn require_id(payload: &Value, context: &str) -> JsonResult<String> {
+    payload
+        .get("id")
+        .and_then(|value| value.as_str())
+        .filter(|value| !value.is_empty())
+        .map(|value| value.to_string())
+        .ok_or_else(|| format!("{context} requires a non-empty \"id\" field"))
+}
+
+pub fn validate_create_id(payload: &Value, context: &str) -> JsonResult<()> {
+    let Some(id_value) = payload.get("id") else {
+        return Ok(());
+    };
+
+    match id_value {
+        Value::String(id) if id.is_empty() => Ok(()),
+        _ => Err(format!("{context} create JSON must omit \"id\" or set it to an empty string")),
+    }
+}
+
+pub fn merge_workspace_id_arg(
+    workspace_id_from_arg: Option<&str>,
+    payload_workspace_id: &mut String,
+    context: &str,
+) -> JsonResult<()> {
+    if let Some(workspace_id_arg) = workspace_id_from_arg {
+        if payload_workspace_id.is_empty() {
+            *payload_workspace_id = workspace_id_arg.to_string();
+        } else if payload_workspace_id != workspace_id_arg {
+            return Err(format!(
+                "{context} got conflicting workspace_id values between positional arg and JSON payload"
+            ));
+        }
+    }
+
+    if payload_workspace_id.is_empty() {
+        return Err(format!(
+            "{context} requires non-empty \"workspaceId\" in JSON payload or positional workspace_id"
+        ));
+    }
+
+    Ok(())
+}
+
+pub fn apply_merge_patch<T>(existing: &T, patch: &Value, id: &str, context: &str) -> JsonResult<T>
+where
+    T: Serialize + DeserializeOwned,
+{
+    let mut base = serde_json::to_value(existing)
+        .map_err(|error| format!("Failed to serialize existing model for {context}: {error}"))?;
+    merge_patch(&mut base, patch);
+
+    let Some(base_object) = base.as_object_mut() else {
+        return Err(format!("Merged payload for {context} must be an object"));
+    };
+    base_object.insert("id".to_string(), Value::String(id.to_string()));
+
+    serde_json::from_value(base)
+        .map_err(|error| format!("Failed to deserialize merged payload for {context}: {error}"))
+}
+
+fn merge_patch(target: &mut Value, patch: &Value) {
+    match patch {
+        Value::Object(patch_map) => {
+            if !target.is_object() {
+                *target = Value::Object(Map::new());
+            }
+
+            let target_map =
+                target.as_object_mut().expect("merge_patch target expected to be object");
+
+            for (key, patch_value) in patch_map {
+                if patch_value.is_null() {
+                    target_map.remove(key);
+                    continue;
+                }
+
+                let target_entry = target_map.entry(key.clone()).or_insert(Value::Null);
+                merge_patch(target_entry, patch_value);
+            }
+        }
+        _ => {
+            *target = patch.clone();
+        }
+    }
+}
diff --git a/crates-cli/yaak-cli/src/utils/mod.rs b/crates-cli/yaak-cli/src/utils/mod.rs
new file mode 100644
index 0000000..f8932a6
--- /dev/null
+++ b/crates-cli/yaak-cli/src/utils/mod.rs
@@ -0,0 +1,5 @@
+pub mod confirm;
+pub mod http;
+pub mod json;
+pub mod schema;
+pub mod workspace;
diff --git a/crates-cli/yaak-cli/src/utils/schema.rs b/crates-cli/yaak-cli/src/utils/schema.rs
new file mode 100644
index 0000000..2e5792f
--- /dev/null
+++ b/crates-cli/yaak-cli/src/utils/schema.rs
@@ -0,0 +1,15 @@
+use serde_json::{Value, json};
+
+pub fn append_agent_hints(schema: &mut Value) {
+    let Some(schema_obj) = schema.as_object_mut() else {
+        return;
+    };
+
+    schema_obj.insert(
+        "x-yaak-agent-hints".to_string(),
+        json!({
+            "templateVariableSyntax": "${[ my_var ]}",
+            "templateFunctionSyntax": "${[ namespace.my_func(a='aaa',b='bbb') ]}",
+        }),
+    );
+}
diff --git a/crates-cli/yaak-cli/src/utils/workspace.rs b/crates-cli/yaak-cli/src/utils/workspace.rs
new file mode 100644
index 0000000..a1f5469
--- /dev/null
+++ b/crates-cli/yaak-cli/src/utils/workspace.rs
@@ -0,0 +1,19 @@
+use crate::context::CliContext;
+
+pub fn resolve_workspace_id(
+    ctx: &CliContext,
+    workspace_id: Option<&str>,
+    command_name: &str,
+) -> Result<String, String> {
+    if let Some(workspace_id) = workspace_id {
+        return Ok(workspace_id.to_string());
+    }
+
+    let workspaces =
+        ctx.db().list_workspaces().map_err(|e| format!("Failed to list workspaces: {e}"))?;
+    match workspaces.as_slice() {
+        [] => Err(format!("No workspaces found. {command_name} requires a workspace ID.")),
+        [workspace] => Ok(workspace.id.clone()),
+        _ => Err(format!("Multiple workspaces found. {command_name} requires a workspace ID.")),
+    }
+}
diff --git a/crates-cli/yaak-cli/src/version.rs b/crates-cli/yaak-cli/src/version.rs
new file mode 100644
index 0000000..ec745c6
--- /dev/null
+++ b/crates-cli/yaak-cli/src/version.rs
@@ -0,0 +1,3 @@
+pub fn cli_version() -> &'static str {
+    option_env!("YAAK_CLI_VERSION").unwrap_or(env!("CARGO_PKG_VERSION"))
+}
diff --git a/crates-cli/yaak-cli/src/version_check.rs b/crates-cli/yaak-cli/src/version_check.rs
new file mode 100644
index 0000000..7f4d5bb
--- /dev/null
+++ b/crates-cli/yaak-cli/src/version_check.rs
@@ -0,0 +1,225 @@
+use crate::ui;
+use crate::version;
+use serde::{Deserialize, Serialize};
+use std::fs;
+use std::io::IsTerminal;
+use std::path::{Path, PathBuf};
+use std::time::{Duration, SystemTime, UNIX_EPOCH};
+use yaak_api::{ApiClientKind, yaak_api_client};
+
+const CACHE_FILE_NAME: &str = "cli-version-check.json";
+const CHECK_INTERVAL_SECS: u64 = 24 * 60 * 60;
+const REQUEST_TIMEOUT: Duration = Duration::from_millis(800);
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+#[serde(default)]
+struct VersionCheckResponse {
+    outdated: bool,
+    latest_version: Option<String>,
+    upgrade_hint: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(default)]
+struct CacheRecord {
+    checked_at_epoch_secs: u64,
+    response: VersionCheckResponse,
+    last_warned_at_epoch_secs: Option<u64>,
+    last_warned_version: Option<String>,
+}
+
+impl Default for CacheRecord {
+    fn default() -> Self {
+        Self {
+            checked_at_epoch_secs: 0,
+            response: VersionCheckResponse::default(),
+            last_warned_at_epoch_secs: None,
+            last_warned_version: None,
+        }
+    }
+}
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct VersionCheckRequest<'a> {
+    current_version: &'a str,
+    channel: String,
+    install_source: String,
+    platform: &'a str,
+    arch: &'a str,
+    // False when stdout is piped, e.g. a coding agent driving the CLI
+    interactive: bool,
+}
+
+pub async fn maybe_check_for_updates() {
+    if should_skip_check() {
+        return;
+    }
+
+    let now = unix_epoch_secs();
+    let cache_path = cache_path();
+    let cached = read_cache(&cache_path);
+
+    if let Some(cache) = cached.as_ref().filter(|c| !is_expired(c.checked_at_epoch_secs, now)) {
+        let mut record = cache.clone();
+        maybe_warn_outdated(&mut record, now);
+        write_cache(&cache_path, &record);
+        return;
+    }
+
+    let fresh = fetch_version_check().await;
+    match fresh {
+        Some(response) => {
+            let mut record = CacheRecord {
+                checked_at_epoch_secs: now,
+                response: response.clone(),
+                last_warned_at_epoch_secs: cached
+                    .as_ref()
+                    .and_then(|c| c.last_warned_at_epoch_secs),
+                last_warned_version: cached.as_ref().and_then(|c| c.last_warned_version.clone()),
+            };
+            maybe_warn_outdated(&mut record, now);
+            write_cache(&cache_path, &record);
+        }
+        None => {
+            let fallback = cached.as_ref().map(|cache| cache.response.clone()).unwrap_or_default();
+            let mut record = CacheRecord {
+                checked_at_epoch_secs: now,
+                response: fallback,
+                last_warned_at_epoch_secs: cached
+                    .as_ref()
+                    .and_then(|c| c.last_warned_at_epoch_secs),
+                last_warned_version: cached.as_ref().and_then(|c| c.last_warned_version.clone()),
+            };
+            maybe_warn_outdated(&mut record, now);
+            write_cache(&cache_path, &record);
+        }
+    }
+}
+
+fn should_skip_check() -> bool {
+    if std::env::var("YAAK_CLI_NO_UPDATE_CHECK")
+        .is_ok_and(|v| v == "1" || v.eq_ignore_ascii_case("true"))
+    {
+        return true;
+    }
+
+    std::env::var("CI").is_ok()
+}
+
+async fn fetch_version_check() -> Option<VersionCheckResponse> {
+    let api_url = format!("{}/cli/check", update_base_url());
+    let current_version = version::cli_version();
+    let payload = VersionCheckRequest {
+        current_version,
+        channel: release_channel(current_version),
+        install_source: install_source(),
+        platform: std::env::consts::OS,
+        arch: std::env::consts::ARCH,
+        interactive: std::io::stdout().is_terminal(),
+    };
+
+    let client = yaak_api_client(ApiClientKind::Cli, current_version).ok()?;
+    let request = client.post(api_url).json(&payload);
+
+    let response = tokio::time::timeout(REQUEST_TIMEOUT, request.send()).await.ok()?.ok()?;
+    if !response.status().is_success() {
+        return None;
+    }
+
+    tokio::time::timeout(REQUEST_TIMEOUT, response.json::<VersionCheckResponse>()).await.ok()?.ok()
+}
+
+fn release_channel(version: &str) -> String {
+    version
+        .split_once('-')
+        .and_then(|(_, suffix)| suffix.split('.').next())
+        .unwrap_or("stable")
+        .to_string()
+}
+
+fn install_source() -> String {
+    std::env::var("YAAK_CLI_INSTALL_SOURCE")
+        .ok()
+        .filter(|s| !s.trim().is_empty())
+        .unwrap_or_else(|| "source".to_string())
+}
+
+fn update_base_url() -> &'static str {
+    match std::env::var("ENVIRONMENT").ok().as_deref() {
+        Some("development") => "http://localhost:9444",
+        _ => "https://update.yaak.app",
+    }
+}
+
+fn maybe_warn_outdated(record: &mut CacheRecord, now: u64) {
+    if !record.response.outdated {
+        return;
+    }
+
+    let latest =
+        record.response.latest_version.clone().unwrap_or_else(|| "a newer release".to_string());
+    let warn_suppressed = record.last_warned_version.as_deref() == Some(latest.as_str())
+        && record.last_warned_at_epoch_secs.is_some_and(|t| !is_expired(t, now));
+    if warn_suppressed {
+        return;
+    }
+
+    let hint = record.response.upgrade_hint.clone().unwrap_or_else(default_upgrade_hint);
+    ui::warning_stderr(&format!("A newer Yaak CLI version is available ({latest}). {hint}"));
+    record.last_warned_version = Some(latest);
+    record.last_warned_at_epoch_secs = Some(now);
+}
+
+fn default_upgrade_hint() -> String {
+    if install_source() == "npm" {
+        let channel = release_channel(version::cli_version());
+        if channel == "stable" {
+            return "Run `npm install -g @yaakapp/cli@latest` to update.".to_string();
+        }
+        return format!("Run `npm install -g @yaakapp/cli@{channel}` to update.");
+    }
+
+    "Update your Yaak CLI installation to the latest release.".to_string()
+}
+
+fn cache_path() -> PathBuf {
+    std::env::temp_dir().join("yaak-cli").join(format!("{}-{CACHE_FILE_NAME}", environment_name()))
+}
+
+fn environment_name() -> &'static str {
+    match std::env::var("ENVIRONMENT").ok().as_deref() {
+        Some("staging") => "staging",
+        Some("development") => "development",
+        _ => "production",
+    }
+}
+
+fn read_cache(path: &Path) -> Option<CacheRecord> {
+    let contents = fs::read_to_string(path).ok()?;
+    serde_json::from_str::<CacheRecord>(&contents).ok()
+}
+
+fn write_cache(path: &Path, record: &CacheRecord) {
+    let Some(parent) = path.parent() else {
+        return;
+    };
+    if fs::create_dir_all(parent).is_err() {
+        return;
+    }
+    let Ok(json) = serde_json::to_string(record) else {
+        return;
+    };
+    let _ = fs::write(path, json);
+}
+
+fn is_expired(checked_at_epoch_secs: u64, now: u64) -> bool {
+    now.saturating_sub(checked_at_epoch_secs) >= CHECK_INTERVAL_SECS
+}
+
+fn unix_epoch_secs() -> u64 {
+    SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .unwrap_or_else(|_| Duration::from_secs(0))
+        .as_secs()
+}
diff --git a/crates-cli/yaak-cli/tests/common/http_server.rs b/crates-cli/yaak-cli/tests/common/http_server.rs
new file mode 100644
index 0000000..49a1e41
--- /dev/null
+++ b/crates-cli/yaak-cli/tests/common/http_server.rs
@@ -0,0 +1,89 @@
+use std::io::{Read, Write};
+use std::net::{SocketAddr, TcpListener, TcpStream};
+use std::sync::Arc;
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::thread;
+use std::time::Duration;
+
+pub struct TestHttpServer {
+    pub url: String,
+    addr: SocketAddr,
+    shutdown: Arc<AtomicBool>,
+    handle: Option<thread::JoinHandle<()>>,
+}
+
+impl TestHttpServer {
+    pub fn spawn_ok(body: &'static str) -> Self {
+        let listener = TcpListener::bind("127.0.0.1:0").expect("Failed to bind test HTTP server");
+        let addr = listener.local_addr().expect("Failed to get local addr");
+        let url = format!("http://{addr}/test");
+        listener.set_nonblocking(true).expect("Failed to set test server listener nonblocking");
+
+        let shutdown = Arc::new(AtomicBool::new(false));
+        let shutdown_signal = Arc::clone(&shutdown);
+        let body_bytes = body.as_bytes().to_vec();
+
+        let handle = thread::spawn(move || {
+            while !shutdown_signal.load(Ordering::Relaxed) {
+                match listener.accept() {
+                    Ok((mut stream, _)) => {
+                        // macOS and the BSDs hand back accepted sockets carrying the
+                        // listener's non-blocking flag, which leaves the read timeout
+                        // below with nothing to govern.
+                        let _ = stream.set_nonblocking(false);
+                        let _ = stream.set_read_timeout(Some(Duration::from_secs(1)));
+                        let mut request = Vec::new();
+                        let mut request_buf = [0u8; 4096];
+                        loop {
+                            match stream.read(&mut request_buf) {
+                                Ok(0) => break,
+                                Ok(n) => {
+                                    request.extend_from_slice(&request_buf[..n]);
+                                    if request.windows(4).any(|window| window == b"\r\n\r\n") {
+                                        break;
+                                    }
+                                }
+                                Err(err)
+                                    if err.kind() == std::io::ErrorKind::WouldBlock
+                                        || err.kind() == std::io::ErrorKind::TimedOut =>
+                                {
+                                    break;
+                                }
+                                Err(_) => break,
+                            }
+                        }
+
+                        if request.is_empty() {
+                            continue;
+                        }
+
+                        let response = format!(
+                            "HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\nContent-Length: {}\r\nConnection: close\r\n\r\n",
+                            body_bytes.len()
+                        );
+                        let _ = stream.write_all(response.as_bytes());
+                        let _ = stream.write_all(&body_bytes);
+                        let _ = stream.flush();
+                    }
+                    Err(err) if err.kind() == std::io::ErrorKind::WouldBlock => {
+                        thread::sleep(Duration::from_millis(10));
+                    }
+                    Err(_) => break,
+                }
+            }
+        });
+
+        Self { url, addr, shutdown, handle: Some(handle) }
+    }
+}
+
+impl Drop for TestHttpServer {
+    fn drop(&mut self) {
+        self.shutdown.store(true, Ordering::Relaxed);
+        let _ = TcpStream::connect(self.addr);
+
+        if let Some(handle) = self.handle.take() {
+            let _ = handle.join();
+        }
+    }
+}
diff --git a/crates-cli/yaak-cli/tests/common/mod.rs b/crates-cli/yaak-cli/tests/common/mod.rs
new file mode 100644
index 0000000..d500eca
--- /dev/null
+++ b/crates-cli/yaak-cli/tests/common/mod.rs
@@ -0,0 +1,101 @@
+#![allow(dead_code)]
+
+pub mod http_server;
+
+use assert_cmd::Command;
+use assert_cmd::cargo::cargo_bin_cmd;
+use std::path::Path;
+use yaak_models::models::{Folder, GrpcRequest, HttpRequest, WebsocketRequest, Workspace};
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::UpdateSource;
+
+pub fn cli_cmd(data_dir: &Path) -> Command {
+    let mut cmd = cargo_bin_cmd!("yaak");
+    cmd.arg("--data-dir").arg(data_dir);
+    cmd
+}
+
+pub fn parse_created_id(stdout: &[u8], label: &str) -> String {
+    String::from_utf8_lossy(stdout)
+        .trim()
+        .split_once(": ")
+        .map(|(_, id)| id.to_string())
+        .unwrap_or_else(|| panic!("Expected id in '{label}' output"))
+}
+
+pub fn query_manager(data_dir: &Path) -> QueryManager {
+    let db_path = data_dir.join("db.sqlite");
+    let blob_path = data_dir.join("blobs.sqlite");
+    let (query_manager, _blob_manager, _rx) =
+        yaak_models::init_standalone(&db_path, &blob_path).expect("Failed to initialize DB");
+    query_manager
+}
+
+pub fn seed_workspace(data_dir: &Path, workspace_id: &str) {
+    let workspace = Workspace {
+        id: workspace_id.to_string(),
+        name: "Seed Workspace".to_string(),
+        description: "Seeded for integration tests".to_string(),
+        ..Default::default()
+    };
+
+    query_manager(data_dir)
+        .with_tx(|tx| tx.upsert_workspace(&workspace, &UpdateSource::Sync))
+        .expect("Failed to seed workspace");
+}
+
+pub fn seed_request(data_dir: &Path, workspace_id: &str, request_id: &str) {
+    let request = HttpRequest {
+        id: request_id.to_string(),
+        workspace_id: workspace_id.to_string(),
+        name: "Seeded Request".to_string(),
+        method: "GET".to_string(),
+        url: "https://example.com".to_string(),
+        ..Default::default()
+    };
+
+    query_manager(data_dir)
+        .with_tx(|tx| tx.upsert_http_request(&request, &UpdateSource::Sync))
+        .expect("Failed to seed request");
+}
+
+pub fn seed_folder(data_dir: &Path, workspace_id: &str, folder_id: &str) {
+    let folder = Folder {
+        id: folder_id.to_string(),
+        workspace_id: workspace_id.to_string(),
+        name: "Seed Folder".to_string(),
+        ..Default::default()
+    };
+
+    query_manager(data_dir)
+        .with_tx(|tx| tx.upsert_folder(&folder, &UpdateSource::Sync))
+        .expect("Failed to seed folder");
+}
+
+pub fn seed_grpc_request(data_dir: &Path, workspace_id: &str, request_id: &str) {
+    let request = GrpcRequest {
+        id: request_id.to_string(),
+        workspace_id: workspace_id.to_string(),
+        name: "Seeded gRPC Request".to_string(),
+        url: "https://example.com".to_string(),
+        ..Default::default()
+    };
+
+    query_manager(data_dir)
+        .with_tx(|tx| tx.upsert_grpc_request(&request, &UpdateSource::Sync))
+        .expect("Failed to seed gRPC request");
+}
+
+pub fn seed_websocket_request(data_dir: &Path, workspace_id: &str, request_id: &str) {
+    let request = WebsocketRequest {
+        id: request_id.to_string(),
+        workspace_id: workspace_id.to_string(),
+        name: "Seeded WebSocket Request".to_string(),
+        url: "wss://example.com/socket".to_string(),
+        ..Default::default()
+    };
+
+    query_manager(data_dir)
+        .with_tx(|tx| tx.upsert_websocket_request(&request, &UpdateSource::Sync))
+        .expect("Failed to seed WebSocket request");
+}
diff --git a/crates-cli/yaak-cli/tests/environment_commands.rs b/crates-cli/yaak-cli/tests/environment_commands.rs
new file mode 100644
index 0000000..30e411d
--- /dev/null
+++ b/crates-cli/yaak-cli/tests/environment_commands.rs
@@ -0,0 +1,146 @@
+mod common;
+
+use common::{cli_cmd, parse_created_id, query_manager, seed_workspace};
+use predicates::str::contains;
+use tempfile::TempDir;
+
+#[test]
+fn create_list_show_delete_round_trip() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    cli_cmd(data_dir)
+        .args(["environment", "list", "wk_test"])
+        .assert()
+        .success()
+        .stdout(contains("Global Variables"));
+
+    let create_assert = cli_cmd(data_dir)
+        .args(["environment", "create", "wk_test", "--name", "Production"])
+        .assert()
+        .success();
+    let environment_id = parse_created_id(&create_assert.get_output().stdout, "environment create");
+
+    cli_cmd(data_dir)
+        .args(["environment", "list", "wk_test"])
+        .assert()
+        .success()
+        .stdout(contains(&environment_id))
+        .stdout(contains("Production"));
+
+    cli_cmd(data_dir)
+        .args(["environment", "show", &environment_id])
+        .assert()
+        .success()
+        .stdout(contains(format!("\"id\": \"{environment_id}\"")))
+        .stdout(contains("\"parentModel\": \"environment\""));
+
+    cli_cmd(data_dir)
+        .args(["environment", "delete", &environment_id, "--yes"])
+        .assert()
+        .success()
+        .stdout(contains(format!("Deleted environment: {environment_id}")));
+
+    assert!(query_manager(data_dir).connect().get_environment(&environment_id).is_err());
+}
+
+#[test]
+fn json_create_and_update_merge_patch_round_trip() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let create_assert = cli_cmd(data_dir)
+        .args([
+            "environment",
+            "create",
+            r#"{"workspaceId":"wk_test","name":"Json Environment"}"#,
+        ])
+        .assert()
+        .success();
+    let environment_id = parse_created_id(&create_assert.get_output().stdout, "environment create");
+
+    cli_cmd(data_dir)
+        .args([
+            "environment",
+            "update",
+            &format!(r##"{{"id":"{}","color":"#00ff00"}}"##, environment_id),
+        ])
+        .assert()
+        .success()
+        .stdout(contains(format!("Updated environment: {environment_id}")));
+
+    cli_cmd(data_dir)
+        .args(["environment", "show", &environment_id])
+        .assert()
+        .success()
+        .stdout(contains("\"name\": \"Json Environment\""))
+        .stdout(contains("\"color\": \"#00ff00\""));
+}
+
+#[test]
+fn create_merges_positional_workspace_id_into_json_payload() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let create_assert = cli_cmd(data_dir)
+        .args([
+            "environment",
+            "create",
+            "wk_test",
+            "--json",
+            r#"{"name":"Merged Environment"}"#,
+        ])
+        .assert()
+        .success();
+    let environment_id = parse_created_id(&create_assert.get_output().stdout, "environment create");
+
+    cli_cmd(data_dir)
+        .args(["environment", "show", &environment_id])
+        .assert()
+        .success()
+        .stdout(contains("\"workspaceId\": \"wk_test\""))
+        .stdout(contains("\"name\": \"Merged Environment\""));
+}
+
+#[test]
+fn create_rejects_conflicting_workspace_ids_between_arg_and_json() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+    seed_workspace(data_dir, "wk_other");
+
+    cli_cmd(data_dir)
+        .args([
+            "environment",
+            "create",
+            "wk_test",
+            "--json",
+            r#"{"workspaceId":"wk_other","name":"Mismatch"}"#,
+        ])
+        .assert()
+        .failure()
+        .stderr(contains(
+            "environment create got conflicting workspace_id values between positional arg and JSON payload",
+        ));
+}
+
+#[test]
+fn environment_schema_outputs_json_schema() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+
+    cli_cmd(data_dir)
+        .args(["environment", "schema"])
+        .assert()
+        .success()
+        .stdout(contains("\"type\":\"object\""))
+        .stdout(contains("\"x-yaak-agent-hints\""))
+        .stdout(contains("\"templateVariableSyntax\":\"${[ my_var ]}\""))
+        .stdout(contains(
+            "\"templateFunctionSyntax\":\"${[ namespace.my_func(a='aaa',b='bbb') ]}\"",
+        ))
+        .stdout(contains("\"workspaceId\""));
+}
diff --git a/crates-cli/yaak-cli/tests/folder_commands.rs b/crates-cli/yaak-cli/tests/folder_commands.rs
new file mode 100644
index 0000000..8b250b2
--- /dev/null
+++ b/crates-cli/yaak-cli/tests/folder_commands.rs
@@ -0,0 +1,122 @@
+mod common;
+
+use common::{cli_cmd, parse_created_id, query_manager, seed_workspace};
+use predicates::str::contains;
+use tempfile::TempDir;
+
+#[test]
+fn create_list_show_delete_round_trip() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let create_assert = cli_cmd(data_dir)
+        .args(["folder", "create", "wk_test", "--name", "Auth"])
+        .assert()
+        .success();
+    let folder_id = parse_created_id(&create_assert.get_output().stdout, "folder create");
+
+    cli_cmd(data_dir)
+        .args(["folder", "list", "wk_test"])
+        .assert()
+        .success()
+        .stdout(contains(&folder_id))
+        .stdout(contains("Auth"));
+
+    cli_cmd(data_dir)
+        .args(["folder", "show", &folder_id])
+        .assert()
+        .success()
+        .stdout(contains(format!("\"id\": \"{folder_id}\"")))
+        .stdout(contains("\"workspaceId\": \"wk_test\""));
+
+    cli_cmd(data_dir)
+        .args(["folder", "delete", &folder_id, "--yes"])
+        .assert()
+        .success()
+        .stdout(contains(format!("Deleted folder: {folder_id}")));
+
+    assert!(query_manager(data_dir).connect().get_folder(&folder_id).is_err());
+}
+
+#[test]
+fn json_create_and_update_merge_patch_round_trip() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let create_assert = cli_cmd(data_dir)
+        .args([
+            "folder",
+            "create",
+            r#"{"workspaceId":"wk_test","name":"Json Folder"}"#,
+        ])
+        .assert()
+        .success();
+    let folder_id = parse_created_id(&create_assert.get_output().stdout, "folder create");
+
+    cli_cmd(data_dir)
+        .args([
+            "folder",
+            "update",
+            &format!(r#"{{"id":"{}","description":"Folder Description"}}"#, folder_id),
+        ])
+        .assert()
+        .success()
+        .stdout(contains(format!("Updated folder: {folder_id}")));
+
+    cli_cmd(data_dir)
+        .args(["folder", "show", &folder_id])
+        .assert()
+        .success()
+        .stdout(contains("\"name\": \"Json Folder\""))
+        .stdout(contains("\"description\": \"Folder Description\""));
+}
+
+#[test]
+fn create_merges_positional_workspace_id_into_json_payload() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let create_assert = cli_cmd(data_dir)
+        .args([
+            "folder",
+            "create",
+            "wk_test",
+            "--json",
+            r#"{"name":"Merged Folder"}"#,
+        ])
+        .assert()
+        .success();
+    let folder_id = parse_created_id(&create_assert.get_output().stdout, "folder create");
+
+    cli_cmd(data_dir)
+        .args(["folder", "show", &folder_id])
+        .assert()
+        .success()
+        .stdout(contains("\"workspaceId\": \"wk_test\""))
+        .stdout(contains("\"name\": \"Merged Folder\""));
+}
+
+#[test]
+fn create_rejects_conflicting_workspace_ids_between_arg_and_json() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+    seed_workspace(data_dir, "wk_other");
+
+    cli_cmd(data_dir)
+        .args([
+            "folder",
+            "create",
+            "wk_test",
+            "--json",
+            r#"{"workspaceId":"wk_other","name":"Mismatch"}"#,
+        ])
+        .assert()
+        .failure()
+        .stderr(contains(
+            "folder create got conflicting workspace_id values between positional arg and JSON payload",
+        ));
+}
diff --git a/crates-cli/yaak-cli/tests/import_export_commands.rs b/crates-cli/yaak-cli/tests/import_export_commands.rs
new file mode 100644
index 0000000..922e04d
--- /dev/null
+++ b/crates-cli/yaak-cli/tests/import_export_commands.rs
@@ -0,0 +1,324 @@
+mod common;
+
+use common::{cli_cmd, parse_created_id, query_manager, seed_request};
+use predicates::str::contains;
+use serde_json::Value;
+use tempfile::TempDir;
+use yaak_models::util::UpdateSource;
+
+#[test]
+fn export_writes_yaak_workspace_file() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    let export_path = temp_dir.path().join("export.json");
+
+    let create_assert =
+        cli_cmd(data_dir).args(["workspace", "create", "--name", "Export Me"]).assert().success();
+    let workspace_id = parse_created_id(&create_assert.get_output().stdout, "workspace create");
+    seed_request(data_dir, &workspace_id, "req_export");
+
+    cli_cmd(data_dir)
+        .args([
+            "export",
+            export_path.to_str().expect("export path is utf-8"),
+            &workspace_id,
+        ])
+        .assert()
+        .success()
+        .stdout(contains("Exported 1 workspace(s)"));
+
+    let exported: Value = serde_json::from_str(
+        &std::fs::read_to_string(export_path).expect("export file should exist"),
+    )
+    .expect("export should be JSON");
+
+    assert_eq!(exported["yaakSchema"], 4);
+    assert_eq!(exported["resources"]["workspaces"][0]["id"], workspace_id);
+    assert_eq!(exported["resources"]["httpRequests"][0]["id"], "req_export");
+}
+
+#[test]
+fn import_reads_yaak_workspace_file() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    let import_path = temp_dir.path().join("import.json");
+
+    std::fs::write(
+        &import_path,
+        r#"{
+  "yaakVersion": "test",
+  "yaakSchema": 4,
+  "resources": {
+    "workspaces": [
+      {
+        "model": "workspace",
+        "id": "wrk_import",
+        "name": "Imported Workspace"
+      }
+    ],
+    "httpRequests": [
+      {
+        "model": "http_request",
+        "id": "req_import",
+        "workspaceId": "wrk_import",
+        "name": "Imported Request",
+        "method": "GET",
+        "url": "https://example.com"
+      }
+    ]
+  }
+}"#,
+    )
+    .expect("write import fixture");
+
+    cli_cmd(data_dir)
+        .args([
+            "import",
+            import_path.to_str().expect("import path is utf-8"),
+        ])
+        .assert()
+        .success()
+        .stdout(contains("Imported 1 workspace, 1 HTTP request"));
+
+    let query_manager = query_manager(data_dir);
+    let db = query_manager.connect();
+    let workspaces = db.list_workspaces().expect("list imported workspaces");
+    let workspace = workspaces
+        .iter()
+        .find(|workspace| workspace.name == "Imported Workspace")
+        .expect("workspace imported");
+    assert_ne!(workspace.id, "wrk_import");
+
+    let requests = db.list_http_requests(&workspace.id).expect("list imported requests");
+    let request = requests
+        .iter()
+        .find(|request| request.name == "Imported Request")
+        .expect("request imported");
+    assert_ne!(request.id, "req_import");
+    assert_eq!(request.workspace_id, workspace.id);
+    assert_eq!(request.url, "https://example.com");
+}
+
+fn write_postman_environment_fixture(path: &std::path::Path) {
+    std::fs::write(
+        path,
+        r#"{
+  "name": "Local",
+  "_postman_variable_scope": "environment",
+  "values": [
+    {
+      "key": "token",
+      "value": "abc123",
+      "enabled": true
+    }
+  ]
+}"#,
+    )
+    .expect("write postman environment fixture");
+}
+
+#[test]
+fn import_postman_environment_requires_workspace_id() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    let import_path = temp_dir.path().join("postman-env.json");
+
+    cli_cmd(data_dir).args(["workspace", "create", "--name", "Env Target"]).assert().success();
+    write_postman_environment_fixture(&import_path);
+
+    cli_cmd(data_dir)
+        .args([
+            "import",
+            import_path.to_str().expect("import path is utf-8"),
+        ])
+        .assert()
+        .failure()
+        .stderr(contains("requires a workspace context"))
+        .stderr(contains("--workspace-id"));
+}
+
+#[test]
+fn import_postman_environment_uses_workspace_id() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    let import_path = temp_dir.path().join("postman-env.json");
+
+    let create_assert =
+        cli_cmd(data_dir).args(["workspace", "create", "--name", "Env Target"]).assert().success();
+    let workspace_id = parse_created_id(&create_assert.get_output().stdout, "workspace create");
+    write_postman_environment_fixture(&import_path);
+
+    cli_cmd(data_dir)
+        .args([
+            "import",
+            import_path.to_str().expect("import path is utf-8"),
+            "--workspace-id",
+            &workspace_id,
+        ])
+        .assert()
+        .success()
+        .stdout(contains("Imported 1 environment"));
+
+    let query_manager = query_manager(data_dir);
+    let db = query_manager.connect();
+    let environments = db.list_environments(&workspace_id).expect("list imported environments");
+
+    let imported_environment =
+        environments.iter().find(|e| e.name == "Local").expect("postman environment imported");
+    assert_eq!(imported_environment.workspace_id, workspace_id);
+}
+
+fn write_linked_fixture(path: &std::path::Path, requests: &[(&str, &str, &str)]) {
+    let requests = requests
+        .iter()
+        .map(|(id, name, url)| {
+            format!(
+                r#"{{ "model": "http_request", "id": "{id}", "workspaceId": "wrk_link",
+                     "name": "{name}", "method": "GET", "url": "{url}" }}"#
+            )
+        })
+        .collect::<Vec<_>>()
+        .join(",");
+    std::fs::write(
+        path,
+        format!(
+            r#"{{
+  "yaakVersion": "test",
+  "yaakSchema": 4,
+  "resources": {{
+    "workspaces": [{{ "model": "workspace", "id": "wrk_link", "name": "Linked Workspace" }}],
+    "httpRequests": [{requests}]
+  }}
+}}"#
+        ),
+    )
+    .expect("write linked fixture");
+}
+
+#[test]
+fn re_import_merges_into_linked_workspace() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    let import_path = temp_dir.path().join("linked.json");
+
+    write_linked_fixture(
+        &import_path,
+        &[
+            ("req_a", "Request A", "https://example.com/a"),
+            ("req_b", "Request B", "https://example.com/b"),
+        ],
+    );
+    cli_cmd(data_dir)
+        .args([
+            "import",
+            import_path.to_str().expect("import path is utf-8"),
+        ])
+        .assert()
+        .success()
+        .stdout(contains("Imported 1 workspace, 2 HTTP requests"));
+
+    let workspace_id = {
+        let query_manager = query_manager(data_dir);
+        let db = query_manager.connect();
+        db.list_workspaces()
+            .expect("list workspaces")
+            .into_iter()
+            .find(|w| w.name == "Linked Workspace")
+            .expect("workspace imported")
+            .id
+    };
+
+    // The source doc changes A, drops B, and adds C. The default selection applies the
+    // update and the create but leaves the removal as an offer.
+    write_linked_fixture(
+        &import_path,
+        &[
+            ("req_a", "Request A", "https://example.com/a-v2"),
+            ("req_c", "Request C", "https://example.com/c"),
+        ],
+    );
+    cli_cmd(data_dir)
+        .args([
+            "import",
+            import_path.to_str().expect("import path is utf-8"),
+            "--workspace-id",
+            &workspace_id,
+        ])
+        .assert()
+        .success()
+        .stdout(contains("Imported 2 HTTP requests"))
+        .stdout(contains("Skipped 1 removed from source"));
+
+    let query_manager = query_manager(data_dir);
+    let db = query_manager.connect();
+    let requests = db.list_http_requests(&workspace_id).expect("list requests");
+    assert_eq!(requests.len(), 3, "merge must not duplicate: {requests:?}");
+    assert_eq!(
+        requests.iter().find(|r| r.name == "Request A").expect("request A").url,
+        "https://example.com/a-v2"
+    );
+    assert!(requests.iter().any(|r| r.name == "Request B"), "removal must not auto-apply");
+    assert!(requests.iter().any(|r| r.name == "Request C"));
+}
+
+#[test]
+fn re_import_leaves_deleted_resources_alone() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    let import_path = temp_dir.path().join("linked.json");
+
+    write_linked_fixture(
+        &import_path,
+        &[
+            ("req_a", "Request A", "https://example.com/a"),
+            ("req_b", "Request B", "https://example.com/b"),
+        ],
+    );
+    cli_cmd(data_dir)
+        .args([
+            "import",
+            import_path.to_str().expect("import path is utf-8"),
+        ])
+        .assert()
+        .success();
+
+    let workspace_id = {
+        let query_manager = query_manager(data_dir);
+        let db = query_manager.connect();
+        let workspace_id = db
+            .list_workspaces()
+            .expect("list workspaces")
+            .into_iter()
+            .find(|w| w.name == "Linked Workspace")
+            .expect("workspace imported")
+            .id;
+        let request_b = db
+            .list_http_requests(&workspace_id)
+            .expect("list requests")
+            .into_iter()
+            .find(|r| r.name == "Request B")
+            .expect("request B imported");
+        drop(db);
+        query_manager
+            .with_tx(|tx| tx.delete_http_request_by_id(&request_b.id, &UpdateSource::Sync))
+            .expect("delete request B");
+        workspace_id
+    };
+
+    cli_cmd(data_dir)
+        .args([
+            "import",
+            import_path.to_str().expect("import path is utf-8"),
+            "--workspace-id",
+            &workspace_id,
+        ])
+        .assert()
+        .success()
+        .stdout(contains("Skipped 1 ignored"));
+
+    let query_manager = query_manager(data_dir);
+    let requests =
+        query_manager.connect().list_http_requests(&workspace_id).expect("list requests");
+    assert_eq!(requests.len(), 1, "a deleted request must not come back: {requests:?}");
+    assert_eq!(requests[0].name, "Request A");
+}
diff --git a/crates-cli/yaak-cli/tests/request_commands.rs b/crates-cli/yaak-cli/tests/request_commands.rs
new file mode 100644
index 0000000..cdb78c1
--- /dev/null
+++ b/crates-cli/yaak-cli/tests/request_commands.rs
@@ -0,0 +1,291 @@
+mod common;
+
+use common::http_server::TestHttpServer;
+use common::{
+    cli_cmd, parse_created_id, query_manager, seed_grpc_request, seed_request,
+    seed_websocket_request, seed_workspace,
+};
+use predicates::str::contains;
+use tempfile::TempDir;
+use yaak_models::models::HttpResponseState;
+
+#[test]
+fn show_and_delete_yes_round_trip() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let create_assert = cli_cmd(data_dir)
+        .args([
+            "request",
+            "create",
+            "wk_test",
+            "--name",
+            "Smoke Test",
+            "--url",
+            "https://example.com",
+        ])
+        .assert()
+        .success();
+
+    let request_id = parse_created_id(&create_assert.get_output().stdout, "request create");
+
+    cli_cmd(data_dir)
+        .args(["request", "show", &request_id])
+        .assert()
+        .success()
+        .stdout(contains(format!("\"id\": \"{request_id}\"")))
+        .stdout(contains("\"workspaceId\": \"wk_test\""));
+
+    cli_cmd(data_dir)
+        .args(["request", "delete", &request_id, "--yes"])
+        .assert()
+        .success()
+        .stdout(contains(format!("Deleted request: {request_id}")));
+
+    assert!(query_manager(data_dir).connect().get_http_request(&request_id).is_err());
+}
+
+#[test]
+fn delete_without_yes_fails_in_non_interactive_mode() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+    seed_request(data_dir, "wk_test", "rq_seed_delete_noninteractive");
+
+    cli_cmd(data_dir)
+        .args(["request", "delete", "rq_seed_delete_noninteractive"])
+        .assert()
+        .failure()
+        .code(1)
+        .stderr(contains("Refusing to delete in non-interactive mode without --yes"));
+
+    assert!(
+        query_manager(data_dir).connect().get_http_request("rq_seed_delete_noninteractive").is_ok()
+    );
+}
+
+#[test]
+fn json_create_and_update_merge_patch_round_trip() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let create_assert = cli_cmd(data_dir)
+        .args([
+            "request",
+            "create",
+            r#"{"workspaceId":"wk_test","name":"Json Request","url":"https://example.com"}"#,
+        ])
+        .assert()
+        .success();
+    let request_id = parse_created_id(&create_assert.get_output().stdout, "request create");
+
+    cli_cmd(data_dir)
+        .args([
+            "request",
+            "update",
+            &format!(r#"{{"id":"{}","name":"Renamed Request"}}"#, request_id),
+        ])
+        .assert()
+        .success()
+        .stdout(contains(format!("Updated request: {request_id}")));
+
+    cli_cmd(data_dir)
+        .args(["request", "show", &request_id])
+        .assert()
+        .success()
+        .stdout(contains("\"name\": \"Renamed Request\""))
+        .stdout(contains("\"url\": \"https://example.com\""));
+}
+
+#[test]
+fn update_requires_id_in_json_payload() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+
+    cli_cmd(data_dir)
+        .args(["request", "update", r#"{"name":"No ID"}"#])
+        .assert()
+        .failure()
+        .stderr(contains("request update requires a non-empty \"id\" field"));
+}
+
+#[test]
+fn create_allows_workspace_only_with_empty_defaults() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let create_assert = cli_cmd(data_dir).args(["request", "create", "wk_test"]).assert().success();
+    let request_id = parse_created_id(&create_assert.get_output().stdout, "request create");
+
+    let request = query_manager(data_dir)
+        .connect()
+        .get_http_request(&request_id)
+        .expect("Failed to load created request");
+    assert_eq!(request.workspace_id, "wk_test");
+    assert_eq!(request.method, "GET");
+    assert_eq!(request.name, "");
+    assert_eq!(request.url, "");
+}
+
+#[test]
+fn create_merges_positional_workspace_id_into_json_payload() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let create_assert = cli_cmd(data_dir)
+        .args([
+            "request",
+            "create",
+            "wk_test",
+            "--json",
+            r#"{"name":"Merged Request","url":"https://example.com"}"#,
+        ])
+        .assert()
+        .success();
+    let request_id = parse_created_id(&create_assert.get_output().stdout, "request create");
+
+    cli_cmd(data_dir)
+        .args(["request", "show", &request_id])
+        .assert()
+        .success()
+        .stdout(contains("\"workspaceId\": \"wk_test\""))
+        .stdout(contains("\"name\": \"Merged Request\""));
+}
+
+#[test]
+fn create_rejects_conflicting_workspace_ids_between_arg_and_json() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+    seed_workspace(data_dir, "wk_other");
+
+    cli_cmd(data_dir)
+        .args([
+            "request",
+            "create",
+            "wk_test",
+            "--json",
+            r#"{"workspaceId":"wk_other","name":"Mismatch"}"#,
+        ])
+        .assert()
+        .failure()
+        .stderr(contains(
+            "request create got conflicting workspace_id values between positional arg and JSON payload",
+        ));
+}
+
+#[test]
+fn request_send_persists_response_body_and_events() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+
+    let server = TestHttpServer::spawn_ok("hello from integration test");
+
+    let create_assert = cli_cmd(data_dir)
+        .args([
+            "request",
+            "create",
+            "wk_test",
+            "--name",
+            "Send Test",
+            "--url",
+            &server.url,
+        ])
+        .assert()
+        .success();
+    let request_id = parse_created_id(&create_assert.get_output().stdout, "request create");
+
+    cli_cmd(data_dir)
+        .args(["request", "send", &request_id])
+        .assert()
+        .success()
+        .stdout(contains("hello from integration test"));
+
+    let qm = query_manager(data_dir);
+    let db = qm.connect();
+    let responses =
+        db.list_http_responses_for_request(&request_id, None).expect("Failed to load responses");
+    assert_eq!(responses.len(), 1, "expected exactly one persisted response");
+
+    let response = &responses[0];
+    assert_eq!(response.status, 200);
+    assert!(matches!(response.state, HttpResponseState::Closed));
+    assert!(response.error.is_none());
+
+    let body_path =
+        response.body_path.as_ref().expect("expected persisted response body path").to_string();
+    let body = std::fs::read_to_string(&body_path).expect("Failed to read response body file");
+    assert_eq!(body, "hello from integration test");
+
+    let events =
+        db.list_http_response_events(&response.id).expect("Failed to load response events");
+    assert!(!events.is_empty(), "expected at least one persisted response event");
+}
+
+#[test]
+fn request_schema_http_outputs_json_schema() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+
+    cli_cmd(data_dir)
+        .args(["request", "schema", "http"])
+        .assert()
+        .success()
+        .stdout(contains("\"type\":\"object\""))
+        .stdout(contains("\"x-yaak-agent-hints\""))
+        .stdout(contains("\"templateVariableSyntax\":\"${[ my_var ]}\""))
+        .stdout(contains(
+            "\"templateFunctionSyntax\":\"${[ namespace.my_func(a='aaa',b='bbb') ]}\"",
+        ))
+        .stdout(contains("\"authentication\":"))
+        .stdout(contains("/foo/:id/comments/:commentId"))
+        .stdout(contains("put concrete values in `urlParameters`"));
+}
+
+#[test]
+fn request_schema_http_pretty_prints_with_flag() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+
+    cli_cmd(data_dir)
+        .args(["request", "schema", "http", "--pretty"])
+        .assert()
+        .success()
+        .stdout(contains("\"type\": \"object\""))
+        .stdout(contains("\"authentication\""));
+}
+
+#[test]
+fn request_send_grpc_returns_explicit_nyi_error() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+    seed_grpc_request(data_dir, "wk_test", "gr_seed_nyi");
+
+    cli_cmd(data_dir)
+        .args(["request", "send", "gr_seed_nyi"])
+        .assert()
+        .failure()
+        .code(1)
+        .stderr(contains("gRPC request send is not implemented yet in yaak-cli"));
+}
+
+#[test]
+fn request_send_websocket_returns_explicit_nyi_error() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+    seed_websocket_request(data_dir, "wk_test", "wr_seed_nyi");
+
+    cli_cmd(data_dir)
+        .args(["request", "send", "wr_seed_nyi"])
+        .assert()
+        .failure()
+        .code(1)
+        .stderr(contains("WebSocket request send is not implemented yet in yaak-cli"));
+}
diff --git a/crates-cli/yaak-cli/tests/send_commands.rs b/crates-cli/yaak-cli/tests/send_commands.rs
new file mode 100644
index 0000000..2ff09b4
--- /dev/null
+++ b/crates-cli/yaak-cli/tests/send_commands.rs
@@ -0,0 +1,50 @@
+mod common;
+
+use common::http_server::TestHttpServer;
+use common::{cli_cmd, query_manager, seed_folder, seed_workspace};
+use predicates::str::contains;
+use tempfile::TempDir;
+use yaak_models::models::HttpRequest;
+use yaak_models::util::UpdateSource;
+
+#[test]
+fn top_level_send_folder_sends_http_requests_and_prints_summary() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+    seed_workspace(data_dir, "wk_test");
+    seed_folder(data_dir, "wk_test", "fl_test");
+
+    let server = TestHttpServer::spawn_ok("folder bulk send");
+    let request = HttpRequest {
+        id: "rq_folder_send".to_string(),
+        workspace_id: "wk_test".to_string(),
+        folder_id: Some("fl_test".to_string()),
+        name: "Folder Send".to_string(),
+        method: "GET".to_string(),
+        url: server.url.clone(),
+        ..Default::default()
+    };
+    query_manager(data_dir)
+        .with_tx(|tx| tx.upsert_http_request(&request, &UpdateSource::Sync))
+        .expect("Failed to seed folder request");
+
+    cli_cmd(data_dir)
+        .args(["send", "fl_test"])
+        .assert()
+        .success()
+        .stdout(contains("folder bulk send"))
+        .stdout(contains("Send summary: 1 succeeded, 0 failed"));
+}
+
+#[test]
+fn top_level_send_unknown_id_fails_with_clear_error() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+
+    cli_cmd(data_dir)
+        .args(["send", "does_not_exist"])
+        .assert()
+        .failure()
+        .code(1)
+        .stderr(contains("Could not resolve ID 'does_not_exist' as request, folder, or workspace"));
+}
diff --git a/crates-cli/yaak-cli/tests/workspace_commands.rs b/crates-cli/yaak-cli/tests/workspace_commands.rs
new file mode 100644
index 0000000..c2bb640
--- /dev/null
+++ b/crates-cli/yaak-cli/tests/workspace_commands.rs
@@ -0,0 +1,77 @@
+mod common;
+
+use common::{cli_cmd, parse_created_id, query_manager};
+use predicates::str::contains;
+use tempfile::TempDir;
+
+#[test]
+fn create_show_delete_round_trip() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+
+    let create_assert =
+        cli_cmd(data_dir).args(["workspace", "create", "--name", "WS One"]).assert().success();
+    let workspace_id = parse_created_id(&create_assert.get_output().stdout, "workspace create");
+
+    cli_cmd(data_dir)
+        .args(["workspace", "show", &workspace_id])
+        .assert()
+        .success()
+        .stdout(contains(format!("\"id\": \"{workspace_id}\"")))
+        .stdout(contains("\"name\": \"WS One\""));
+
+    cli_cmd(data_dir)
+        .args(["workspace", "delete", &workspace_id, "--yes"])
+        .assert()
+        .success()
+        .stdout(contains(format!("Deleted workspace: {workspace_id}")));
+
+    assert!(query_manager(data_dir).connect().get_workspace(&workspace_id).is_err());
+}
+
+#[test]
+fn json_create_and_update_merge_patch_round_trip() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+
+    let create_assert = cli_cmd(data_dir)
+        .args(["workspace", "create", r#"{"name":"Json Workspace"}"#])
+        .assert()
+        .success();
+    let workspace_id = parse_created_id(&create_assert.get_output().stdout, "workspace create");
+
+    cli_cmd(data_dir)
+        .args([
+            "workspace",
+            "update",
+            &format!(r#"{{"id":"{}","description":"Updated via JSON"}}"#, workspace_id),
+        ])
+        .assert()
+        .success()
+        .stdout(contains(format!("Updated workspace: {workspace_id}")));
+
+    cli_cmd(data_dir)
+        .args(["workspace", "show", &workspace_id])
+        .assert()
+        .success()
+        .stdout(contains("\"name\": \"Json Workspace\""))
+        .stdout(contains("\"description\": \"Updated via JSON\""));
+}
+
+#[test]
+fn workspace_schema_outputs_json_schema() {
+    let temp_dir = TempDir::new().expect("Failed to create temp dir");
+    let data_dir = temp_dir.path();
+
+    cli_cmd(data_dir)
+        .args(["workspace", "schema"])
+        .assert()
+        .success()
+        .stdout(contains("\"type\":\"object\""))
+        .stdout(contains("\"x-yaak-agent-hints\""))
+        .stdout(contains("\"templateVariableSyntax\":\"${[ my_var ]}\""))
+        .stdout(contains(
+            "\"templateFunctionSyntax\":\"${[ namespace.my_func(a='aaa',b='bbb') ]}\"",
+        ))
+        .stdout(contains("\"name\""));
+}
diff --git a/crates-proxy/yaak-proxy-lib/Cargo.toml b/crates-proxy/yaak-proxy-lib/Cargo.toml
new file mode 100644
index 0000000..0eb2dd8
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/Cargo.toml
@@ -0,0 +1,21 @@
+[package]
+name = "yaak-proxy-lib"
+version = "0.0.0"
+edition = "2024"
+authors = ["Gregory Schier"]
+publish = false
+
+[dependencies]
+chrono = { workspace = true, features = ["serde"] }
+log = { workspace = true }
+include_dir = "0.7"
+r2d2 = "0.8.10"
+r2d2_sqlite = "0.32"
+rusqlite = { version = "0.38", features = ["bundled", "chrono"] }
+sea-query = { version = "1.0", features = ["with-chrono", "attr"] }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+ts-rs = { workspace = true, features = ["chrono-impl"] }
+yaak-database = { workspace = true }
+yaak-proxy = { workspace = true }
+yaak-rpc = { workspace = true }
diff --git a/crates-proxy/yaak-proxy-lib/bindings/ModelChangeEvent.ts b/crates-proxy/yaak-proxy-lib/bindings/ModelChangeEvent.ts
new file mode 100644
index 0000000..36c8397
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/bindings/ModelChangeEvent.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type ModelChangeEvent = { "type": "upsert", created: boolean, } | { "type": "delete" };
diff --git a/crates-proxy/yaak-proxy-lib/bindings/gen_models.ts b/crates-proxy/yaak-proxy-lib/bindings/gen_models.ts
new file mode 100644
index 0000000..ba452b1
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/bindings/gen_models.ts
@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { ModelChangeEvent } from "./ModelChangeEvent";
+
+export type HttpExchange = { id: string, createdAt: string, updatedAt: string, url: string, method: string, reqHeaders: Array<ProxyHeader>, reqBody: Array<number> | null, resStatus: number | null, resHeaders: Array<ProxyHeader>, resBody: Array<number> | null, error: string | null, };
+
+export type ModelPayload = { model: HttpExchange, change: ModelChangeEvent, };
+
+export type ProxyHeader = { name: string, value: string, };
diff --git a/crates-proxy/yaak-proxy-lib/bindings/gen_rpc.ts b/crates-proxy/yaak-proxy-lib/bindings/gen_rpc.ts
new file mode 100644
index 0000000..850717c
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/bindings/gen_rpc.ts
@@ -0,0 +1,28 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { HttpExchange, ModelPayload } from "./gen_models";
+
+export type ActionInvocation = { "scope": "global", action: GlobalAction, };
+
+export type ActionMetadata = { label: string, defaultHotkey: string | null, };
+
+export type GetProxyStateRequest = Record<string, never>;
+
+export type GetProxyStateResponse = { state: ProxyState, };
+
+export type GlobalAction = "proxy_start" | "proxy_stop";
+
+export type ListActionsRequest = Record<string, never>;
+
+export type ListActionsResponse = { actions: Array<[ActionInvocation, ActionMetadata]>, };
+
+export type ListModelsRequest = Record<string, never>;
+
+export type ListModelsResponse = { httpExchanges: Array<HttpExchange>, };
+
+export type ProxyState = "running" | "stopped";
+
+export type ProxyStatePayload = { state: ProxyState, };
+
+export type RpcEventSchema = { model_write: ModelPayload, proxy_state_changed: ProxyStatePayload, };
+
+export type RpcSchema = { execute_action: [ActionInvocation, boolean], get_proxy_state: [GetProxyStateRequest, GetProxyStateResponse], list_actions: [ListActionsRequest, ListActionsResponse], list_models: [ListModelsRequest, ListModelsResponse], };
diff --git a/crates-proxy/yaak-proxy-lib/bindings/index.ts b/crates-proxy/yaak-proxy-lib/bindings/index.ts
new file mode 100644
index 0000000..a05bf1a
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/bindings/index.ts
@@ -0,0 +1,2 @@
+export * from "./gen_rpc";
+export * from "./gen_models";
diff --git a/crates-proxy/yaak-proxy-lib/migrations/00000001_init.sql b/crates-proxy/yaak-proxy-lib/migrations/00000001_init.sql
new file mode 100644
index 0000000..2eaf0c5
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/migrations/00000001_init.sql
@@ -0,0 +1,14 @@
+CREATE TABLE http_exchanges
+(
+    id          TEXT    NOT NULL PRIMARY KEY,
+    created_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    url         TEXT    NOT NULL DEFAULT '',
+    method      TEXT    NOT NULL DEFAULT '',
+    req_headers TEXT    NOT NULL DEFAULT '[]',
+    req_body    BLOB,
+    res_status  INTEGER,
+    res_headers TEXT    NOT NULL DEFAULT '[]',
+    res_body    BLOB,
+    error       TEXT
+);
diff --git a/crates-proxy/yaak-proxy-lib/package.json b/crates-proxy/yaak-proxy-lib/package.json
new file mode 100644
index 0000000..663df33
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/proxy-lib",
+  "version": "1.0.0",
+  "private": true,
+  "main": "bindings/index.ts"
+}
diff --git a/crates-proxy/yaak-proxy-lib/src/actions.rs b/crates-proxy/yaak-proxy-lib/src/actions.rs
new file mode 100644
index 0000000..cf2084e
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/src/actions.rs
@@ -0,0 +1,49 @@
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub enum GlobalAction {
+    ProxyStart,
+    ProxyStop,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(tag = "scope", rename_all = "snake_case")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub enum ActionInvocation {
+    Global { action: GlobalAction },
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ActionMetadata {
+    pub label: String,
+    pub default_hotkey: Option<String>,
+}
+
+fn default_hotkey(mac: &str, other: &str) -> Option<String> {
+    if cfg!(target_os = "macos") { Some(mac.into()) } else { Some(other.into()) }
+}
+
+/// All global actions with their metadata, used by `list_actions` RPC.
+pub fn all_global_actions() -> Vec<(ActionInvocation, ActionMetadata)> {
+    vec![
+        (
+            ActionInvocation::Global { action: GlobalAction::ProxyStart },
+            ActionMetadata {
+                label: "Start Proxy".into(),
+                default_hotkey: default_hotkey("Meta+Shift+P", "Ctrl+Shift+P"),
+            },
+        ),
+        (
+            ActionInvocation::Global { action: GlobalAction::ProxyStop },
+            ActionMetadata {
+                label: "Stop Proxy".into(),
+                default_hotkey: default_hotkey("Meta+Shift+S", "Ctrl+Shift+S"),
+            },
+        ),
+    ]
+}
diff --git a/crates-proxy/yaak-proxy-lib/src/db.rs b/crates-proxy/yaak-proxy-lib/src/db.rs
new file mode 100644
index 0000000..e5bba29
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/src/db.rs
@@ -0,0 +1,31 @@
+use include_dir::{Dir, include_dir};
+use r2d2::Pool;
+use r2d2_sqlite::SqliteConnectionManager;
+use std::path::Path;
+use yaak_database::{ConnectionOrTx, DbContext, run_migrations};
+
+static MIGRATIONS: Dir<'static> = include_dir!("$CARGO_MANIFEST_DIR/migrations");
+
+#[derive(Clone)]
+pub struct ProxyQueryManager {
+    pool: Pool<SqliteConnectionManager>,
+}
+
+impl ProxyQueryManager {
+    pub fn new(db_path: &Path) -> Self {
+        let manager = SqliteConnectionManager::file(db_path);
+        let pool =
+            Pool::builder().max_size(5).build(manager).expect("Failed to create proxy DB pool");
+        run_migrations(&pool, &MIGRATIONS).expect("Failed to run proxy DB migrations");
+        Self { pool }
+    }
+
+    pub fn with_conn<F, T>(&self, func: F) -> T
+    where
+        F: FnOnce(&DbContext) -> T,
+    {
+        let conn = self.pool.get().expect("Failed to get proxy DB connection");
+        let ctx = DbContext::new(ConnectionOrTx::Connection(conn));
+        func(&ctx)
+    }
+}
diff --git a/crates-proxy/yaak-proxy-lib/src/lib.rs b/crates-proxy/yaak-proxy-lib/src/lib.rs
new file mode 100644
index 0000000..f8cace4
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/src/lib.rs
@@ -0,0 +1,271 @@
+pub mod actions;
+pub mod db;
+pub mod models;
+
+use crate::actions::{ActionInvocation, ActionMetadata, GlobalAction};
+use crate::db::ProxyQueryManager;
+use crate::models::{HttpExchange, ModelPayload, ProxyHeader};
+use log::warn;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::path::Path;
+use std::sync::{Arc, Mutex};
+use ts_rs::TS;
+use yaak_database::{ModelChangeEvent, UpdateSource};
+use yaak_proxy::{CapturedRequest, ProxyEvent, ProxyHandle, RequestState};
+use yaak_rpc::{RpcError, RpcEventEmitter, define_rpc};
+
+// -- Context --
+
+// Cloned once per dispatched command, so shared state lives behind an `Arc`.
+#[derive(Clone)]
+pub struct ProxyCtx {
+    handle: Arc<Mutex<Option<ProxyHandle>>>,
+    pub db: ProxyQueryManager,
+    pub events: RpcEventEmitter,
+}
+
+impl ProxyCtx {
+    pub fn new(db_path: &Path, events: RpcEventEmitter) -> Self {
+        Self { handle: Arc::new(Mutex::new(None)), db: ProxyQueryManager::new(db_path), events }
+    }
+}
+
+// -- Proxy state --
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub enum ProxyState {
+    Running,
+    Stopped,
+}
+
+#[derive(Serialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ProxyStatePayload {
+    pub state: ProxyState,
+}
+
+// -- Request/response types --
+
+#[derive(Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ListActionsRequest {}
+
+#[derive(Serialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ListActionsResponse {
+    pub actions: Vec<(ActionInvocation, ActionMetadata)>,
+}
+
+#[derive(Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ListModelsRequest {}
+
+#[derive(Serialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+#[serde(rename_all = "camelCase")]
+pub struct ListModelsResponse {
+    pub http_exchanges: Vec<HttpExchange>,
+}
+
+#[derive(Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct GetProxyStateRequest {}
+
+#[derive(Serialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct GetProxyStateResponse {
+    pub state: ProxyState,
+}
+
+// -- Handlers --
+
+fn execute_action(ctx: &ProxyCtx, invocation: ActionInvocation) -> Result<bool, RpcError> {
+    match invocation {
+        ActionInvocation::Global { action } => match action {
+            GlobalAction::ProxyStart => {
+                let mut handle =
+                    ctx.handle.lock().map_err(|_| RpcError { message: "lock poisoned".into() })?;
+
+                if handle.is_some() {
+                    return Ok(true); // already running
+                }
+
+                let mut proxy_handle =
+                    yaak_proxy::start_proxy(9090).map_err(|e| RpcError { message: e })?;
+
+                if let Some(event_rx) = proxy_handle.take_event_rx() {
+                    let db = ctx.db.clone();
+                    let events = ctx.events.clone();
+                    std::thread::spawn(move || run_event_loop(event_rx, db, events));
+                }
+
+                *handle = Some(proxy_handle);
+                ctx.events
+                    .emit("proxy_state_changed", &ProxyStatePayload { state: ProxyState::Running });
+                Ok(true)
+            }
+            GlobalAction::ProxyStop => {
+                let mut handle =
+                    ctx.handle.lock().map_err(|_| RpcError { message: "lock poisoned".into() })?;
+                handle.take();
+                ctx.events
+                    .emit("proxy_state_changed", &ProxyStatePayload { state: ProxyState::Stopped });
+                Ok(true)
+            }
+        },
+    }
+}
+
+fn get_proxy_state(
+    ctx: &ProxyCtx,
+    _req: GetProxyStateRequest,
+) -> Result<GetProxyStateResponse, RpcError> {
+    let handle = ctx.handle.lock().map_err(|_| RpcError { message: "lock poisoned".into() })?;
+    let state = if handle.is_some() { ProxyState::Running } else { ProxyState::Stopped };
+    Ok(GetProxyStateResponse { state })
+}
+
+fn list_actions(
+    _ctx: &ProxyCtx,
+    _req: ListActionsRequest,
+) -> Result<ListActionsResponse, RpcError> {
+    Ok(ListActionsResponse { actions: crate::actions::all_global_actions() })
+}
+
+fn list_models(ctx: &ProxyCtx, _req: ListModelsRequest) -> Result<ListModelsResponse, RpcError> {
+    ctx.db.with_conn(|db| {
+        Ok(ListModelsResponse {
+            http_exchanges: db
+                .find_all::<HttpExchange>()
+                .map_err(|e| RpcError { message: e.to_string() })?,
+        })
+    })
+}
+
+// -- Event loop --
+
+fn run_event_loop(
+    rx: std::sync::mpsc::Receiver<ProxyEvent>,
+    db: ProxyQueryManager,
+    events: RpcEventEmitter,
+) {
+    let mut in_flight: HashMap<u64, CapturedRequest> = HashMap::new();
+
+    while let Ok(event) = rx.recv() {
+        match event {
+            ProxyEvent::RequestStart { id, method, url, http_version } => {
+                in_flight.insert(
+                    id,
+                    CapturedRequest {
+                        id,
+                        method,
+                        url,
+                        http_version,
+                        status: None,
+                        elapsed_ms: None,
+                        remote_http_version: None,
+                        request_headers: vec![],
+                        request_body: None,
+                        response_headers: vec![],
+                        response_body: None,
+                        response_body_size: 0,
+                        state: RequestState::Sending,
+                        error: None,
+                    },
+                );
+            }
+            ProxyEvent::RequestHeader { id, name, value } => {
+                if let Some(r) = in_flight.get_mut(&id) {
+                    r.request_headers.push((name, value));
+                }
+            }
+            ProxyEvent::RequestBody { id, body } => {
+                if let Some(r) = in_flight.get_mut(&id) {
+                    r.request_body = Some(body);
+                }
+            }
+            ProxyEvent::ResponseStart { id, status, http_version, elapsed_ms } => {
+                if let Some(r) = in_flight.get_mut(&id) {
+                    r.status = Some(status);
+                    r.remote_http_version = Some(http_version);
+                    r.elapsed_ms = Some(elapsed_ms);
+                    r.state = RequestState::Receiving;
+                }
+            }
+            ProxyEvent::ResponseHeader { id, name, value } => {
+                if let Some(r) = in_flight.get_mut(&id) {
+                    r.response_headers.push((name, value));
+                }
+            }
+            ProxyEvent::ResponseBodyChunk { .. } => {
+                // Progress only — no action needed
+            }
+            ProxyEvent::ResponseBodyComplete { id, body, size, elapsed_ms } => {
+                if let Some(mut r) = in_flight.remove(&id) {
+                    r.response_body = body;
+                    r.response_body_size = size;
+                    r.elapsed_ms = r.elapsed_ms.or(Some(elapsed_ms));
+                    r.state = RequestState::Complete;
+                    write_entry(&db, &events, &r);
+                }
+            }
+            ProxyEvent::Error { id, error } => {
+                if let Some(mut r) = in_flight.remove(&id) {
+                    r.error = Some(error);
+                    r.state = RequestState::Error;
+                    write_entry(&db, &events, &r);
+                }
+            }
+        }
+    }
+}
+
+fn write_entry(db: &ProxyQueryManager, events: &RpcEventEmitter, r: &CapturedRequest) {
+    let entry = HttpExchange {
+        url: r.url.clone(),
+        method: r.method.clone(),
+        req_headers: r
+            .request_headers
+            .iter()
+            .map(|(n, v)| ProxyHeader { name: n.clone(), value: v.clone() })
+            .collect(),
+        req_body: r.request_body.clone(),
+        res_status: r.status.map(|s| s as i32),
+        res_headers: r
+            .response_headers
+            .iter()
+            .map(|(n, v)| ProxyHeader { name: n.clone(), value: v.clone() })
+            .collect(),
+        res_body: r.response_body.clone(),
+        error: r.error.clone(),
+        ..Default::default()
+    };
+    db.with_conn(|ctx| match ctx.upsert(&entry, &UpdateSource::Background) {
+        Ok((saved, created)) => {
+            events.emit(
+                "model_write",
+                &ModelPayload { model: saved, change: ModelChangeEvent::Upsert { created } },
+            );
+        }
+        Err(e) => warn!("Failed to write proxy entry: {e}"),
+    });
+}
+
+// -- Router + Schema --
+
+define_rpc! {
+    ProxyCtx;
+    commands {
+        execute_action(ActionInvocation) -> bool,
+        get_proxy_state(GetProxyStateRequest) -> GetProxyStateResponse,
+        list_actions(ListActionsRequest) -> ListActionsResponse,
+        list_models(ListModelsRequest) -> ListModelsResponse,
+    }
+    events {
+        model_write(ModelPayload),
+        proxy_state_changed(ProxyStatePayload),
+    }
+}
diff --git a/crates-proxy/yaak-proxy-lib/src/models.rs b/crates-proxy/yaak-proxy-lib/src/models.rs
new file mode 100644
index 0000000..0b6249a
--- /dev/null
+++ b/crates-proxy/yaak-proxy-lib/src/models.rs
@@ -0,0 +1,119 @@
+use chrono::NaiveDateTime;
+use rusqlite::Row;
+use sea_query::{IntoColumnRef, IntoIden, IntoTableRef, Order, SimpleExpr, enum_def};
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+use yaak_database::{
+    ModelChangeEvent, Result as DbResult, UpdateSource, UpsertModelInfo, generate_prefixed_id,
+    upsert_date,
+};
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct ProxyHeader {
+    pub name: String,
+    pub value: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "http_exchanges")]
+pub struct HttpExchange {
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub url: String,
+    pub method: String,
+    pub req_headers: Vec<ProxyHeader>,
+    pub req_body: Option<Vec<u8>>,
+    pub res_status: Option<i32>,
+    pub res_headers: Vec<ProxyHeader>,
+    pub res_body: Option<Vec<u8>>,
+    pub error: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct ModelPayload {
+    pub model: HttpExchange,
+    pub change: ModelChangeEvent,
+}
+
+impl UpsertModelInfo for HttpExchange {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        HttpExchangeIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        HttpExchangeIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("he")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (HttpExchangeIden::CreatedAt, Order::Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use HttpExchangeIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (Url, self.url.into()),
+            (Method, self.method.into()),
+            (ReqHeaders, serde_json::to_string(&self.req_headers)?.into()),
+            (ReqBody, self.req_body.into()),
+            (ResStatus, self.res_status.into()),
+            (ResHeaders, serde_json::to_string(&self.res_headers)?.into()),
+            (ResBody, self.res_body.into()),
+            (Error, self.error.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            HttpExchangeIden::UpdatedAt,
+            HttpExchangeIden::Url,
+            HttpExchangeIden::Method,
+            HttpExchangeIden::ReqHeaders,
+            HttpExchangeIden::ReqBody,
+            HttpExchangeIden::ResStatus,
+            HttpExchangeIden::ResHeaders,
+            HttpExchangeIden::ResBody,
+            HttpExchangeIden::Error,
+        ]
+    }
+
+    fn from_row(r: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let req_headers: String = r.get("req_headers")?;
+        let res_headers: String = r.get("res_headers")?;
+        Ok(Self {
+            id: r.get("id")?,
+            created_at: r.get("created_at")?,
+            updated_at: r.get("updated_at")?,
+            url: r.get("url")?,
+            method: r.get("method")?,
+            req_headers: serde_json::from_str(&req_headers).unwrap_or_default(),
+            req_body: r.get("req_body")?,
+            res_status: r.get("res_status")?,
+            res_headers: serde_json::from_str(&res_headers).unwrap_or_default(),
+            res_body: r.get("res_body")?,
+            error: r.get("error")?,
+        })
+    }
+}
diff --git a/crates-server/yaak-playground/Cargo.toml b/crates-server/yaak-playground/Cargo.toml
new file mode 100644
index 0000000..44cea9d
--- /dev/null
+++ b/crates-server/yaak-playground/Cargo.toml
@@ -0,0 +1,25 @@
+[package]
+name = "yaak-playground"
+version = "0.1.0"
+edition = "2024"
+publish = false
+description = "A small, disposable API for trying Yaak against (yaak.run)"
+
+[[bin]]
+name = "yaak-playground"
+path = "src/main.rs"
+
+[dependencies]
+axum = "0.7"
+bytes = "1.11.1"
+clap = { version = "4.5", features = ["derive", "env"] }
+env_logger = "0.11"
+log = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+tokio = { workspace = true, features = ["rt-multi-thread", "macros", "signal", "net"] }
+tower-http = { version = "0.6", features = ["cors"] }
+uuid = { version = "1", features = ["v4"] }
+
+[dev-dependencies]
+tower = { version = "0.5", features = ["util"] }
diff --git a/crates-server/yaak-playground/README.md b/crates-server/yaak-playground/README.md
new file mode 100644
index 0000000..bdcb8ef
--- /dev/null
+++ b/crates-server/yaak-playground/README.md
@@ -0,0 +1,21 @@
+# yaak-playground
+
+The API behind [yaak.run](https://yaak.run), for trying Yaak without bringing your own.
+
+- Users and todos are fixed sample data.
+- Posts can be created, changed, and deleted. Each client IP gets its own copy, which goes back
+  to the sample data `YAAK_PLAYGROUND_RESET_AFTER_SECS` after its first write.
+- `POST /auth/token` returns a bearer token for `GET /auth/me`. `POST /auth/session` sets a
+  session cookie for `GET /auth/session`. Any username with the password `yaak` logs in.
+- `GET /` lists every endpoint and `GET /openapi.json` describes them.
+
+Nothing is written to disk, so a restart resets everything.
+
+```sh
+cargo run -p yaak-playground   # http://127.0.0.1:9228
+```
+
+Run `yaak-playground --help` for the limits. Behind a load balancer that sets
+`X-Forwarded-For`, set `YAAK_PLAYGROUND_TRUST_FORWARDED_FOR=true`.
+
+The image is `Dockerfile.playground` at the repo root.
diff --git a/crates-server/yaak-playground/src/auth.rs b/crates-server/yaak-playground/src/auth.rs
new file mode 100644
index 0000000..7eacea4
--- /dev/null
+++ b/crates-server/yaak-playground/src/auth.rs
@@ -0,0 +1,185 @@
+use crate::AppState;
+use crate::data::{self, User};
+use crate::error::{ApiError, ApiResult, parse_json};
+use axum::extract::State;
+use axum::extract::rejection::BytesRejection;
+use axum::http::{HeaderMap, HeaderValue, StatusCode, header};
+use axum::response::{IntoResponse, Json, Response};
+use bytes::Bytes;
+use serde::Deserialize;
+use serde_json::{Value, json};
+use std::collections::HashMap;
+use std::sync::Mutex;
+use std::time::{Duration, Instant};
+
+pub const PASSWORD: &str = "yaak";
+const SESSION_COOKIE: &str = "session";
+const TTL: Duration = Duration::from_secs(60 * 60);
+const MAX_CREDENTIALS: usize = 10_000;
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+pub enum Kind {
+    Bearer,
+    Session,
+}
+
+/// Issued tokens and session IDs, kept apart so a token can't be sent as a cookie or the
+/// other way around.
+pub struct Credentials {
+    entries: Mutex<HashMap<String, Entry>>,
+}
+
+struct Entry {
+    user_id: u64,
+    kind: Kind,
+    expires: Instant,
+}
+
+impl Credentials {
+    pub fn new() -> Self {
+        Self { entries: Mutex::new(HashMap::new()) }
+    }
+
+    fn issue(&self, user_id: u64, kind: Kind) -> String {
+        let value = uuid::Uuid::new_v4().simple().to_string();
+        let now = Instant::now();
+        let mut entries = self.entries.lock().unwrap_or_else(|e| e.into_inner());
+        if entries.len() >= MAX_CREDENTIALS {
+            entries.retain(|_, e| e.expires > now);
+        }
+        if entries.len() >= MAX_CREDENTIALS
+            && let Some(oldest) =
+                entries.iter().min_by_key(|(_, e)| e.expires).map(|(k, _)| k.clone())
+        {
+            entries.remove(&oldest);
+        }
+        entries.insert(value.clone(), Entry { user_id, kind, expires: now + TTL });
+        value
+    }
+
+    fn lookup(&self, value: &str, kind: Kind) -> Option<&'static User> {
+        let entries = self.entries.lock().unwrap_or_else(|e| e.into_inner());
+        let entry = entries.get(value)?;
+        if entry.kind != kind || entry.expires <= Instant::now() {
+            return None;
+        }
+        data::user(entry.user_id)
+    }
+
+    fn revoke(&self, value: &str) {
+        self.entries.lock().unwrap_or_else(|e| e.into_inner()).remove(value);
+    }
+}
+
+#[derive(Deserialize)]
+struct Login {
+    username: String,
+    password: String,
+}
+
+fn log_in(body: Result<Bytes, BytesRejection>) -> ApiResult<&'static User> {
+    let login: Login = parse_json(body)?;
+    data::user_by_username(&login.username)
+        .filter(|_| login.password == PASSWORD)
+        .ok_or_else(|| ApiError::unauthorized("Invalid username or password", None))
+}
+
+pub async fn create_token(
+    State(state): State<AppState>,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Json<Value>> {
+    let user = log_in(body)?;
+    let token = state.credentials.issue(user.id, Kind::Bearer);
+    Ok(Json(json!({
+        "accessToken": token,
+        "tokenType": "Bearer",
+        "expiresIn": TTL.as_secs(),
+    })))
+}
+
+pub async fn me(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+) -> ApiResult<Json<&'static User>> {
+    let Some(authorization) = headers.get(header::AUTHORIZATION).and_then(|v| v.to_str().ok())
+    else {
+        return Err(ApiError::unauthorized("Missing Authorization header", Some("Bearer")));
+    };
+    let token = match authorization.split_once(' ') {
+        Some((scheme, token)) if scheme.eq_ignore_ascii_case("bearer") => token.trim(),
+        _ => {
+            return Err(ApiError::unauthorized(
+                "Authorization header must be \"Bearer <token>\"",
+                Some("Bearer"),
+            ));
+        }
+    };
+    state.credentials.lookup(token, Kind::Bearer).map(Json).ok_or_else(|| {
+        ApiError::unauthorized("Invalid or expired token", Some("Bearer error=\"invalid_token\""))
+    })
+}
+
+pub async fn create_session(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Response> {
+    let user = log_in(body)?;
+    let id = state.credentials.issue(user.id, Kind::Session);
+    let cookie = format!(
+        "{SESSION_COOKIE}={id}; Path=/; Max-Age={}; HttpOnly; SameSite=Lax{}",
+        TTL.as_secs(),
+        secure_attribute(&headers)
+    );
+    let mut res = Json(user).into_response();
+    res.headers_mut().insert(header::SET_COOKIE, HeaderValue::from_str(&cookie).expect("ascii"));
+    Ok(res)
+}
+
+pub async fn session(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+) -> ApiResult<Json<&'static User>> {
+    let Some(id) = session_cookie(&headers) else {
+        return Err(ApiError::unauthorized("Missing session cookie", None));
+    };
+    state
+        .credentials
+        .lookup(id, Kind::Session)
+        .map(Json)
+        .ok_or_else(|| ApiError::unauthorized("Invalid or expired session", None))
+}
+
+pub async fn delete_session(State(state): State<AppState>, headers: HeaderMap) -> Response {
+    if let Some(id) = session_cookie(&headers) {
+        state.credentials.revoke(id);
+    }
+    let cookie = format!(
+        "{SESSION_COOKIE}=; Path=/; Max-Age=0; HttpOnly; SameSite=Lax{}",
+        secure_attribute(&headers)
+    );
+    let mut res = StatusCode::NO_CONTENT.into_response();
+    res.headers_mut().insert(header::SET_COOKIE, HeaderValue::from_str(&cookie).expect("ascii"));
+    res
+}
+
+fn session_cookie(headers: &HeaderMap) -> Option<&str> {
+    headers
+        .get_all(header::COOKIE)
+        .iter()
+        .filter_map(|v| v.to_str().ok())
+        .flat_map(|v| v.split(';'))
+        .filter_map(|pair| pair.trim().split_once('='))
+        .find(|(name, _)| *name == SESSION_COOKIE)
+        .map(|(_, value)| value)
+}
+
+/// `Secure` only when the request reached the proxy over HTTPS, so the cookie still works
+/// against a local instance on plain HTTP.
+fn secure_attribute(headers: &HeaderMap) -> &'static str {
+    let https = headers
+        .get("x-forwarded-proto")
+        .and_then(|v| v.to_str().ok())
+        .is_some_and(|v| v.eq_ignore_ascii_case("https"));
+    if https { "; Secure" } else { "" }
+}
diff --git a/crates-server/yaak-playground/src/config.rs b/crates-server/yaak-playground/src/config.rs
new file mode 100644
index 0000000..249e830
--- /dev/null
+++ b/crates-server/yaak-playground/src/config.rs
@@ -0,0 +1,59 @@
+use clap::Parser;
+use std::net::{SocketAddr, ToSocketAddrs};
+
+/// A small, disposable API for trying Yaak against.
+#[derive(Parser, Debug, Clone)]
+#[command(name = "yaak-playground", version, about, long_about = None)]
+pub struct Config {
+    /// Interface to listen on. 0.0.0.0 inside a container.
+    #[arg(long, env = "HOST", default_value = "127.0.0.1")]
+    pub host: String,
+
+    #[arg(long, env = "PORT", default_value_t = 9228)]
+    pub port: u16,
+
+    /// Requests allowed per client IP per minute. 0 disables the limit.
+    #[arg(
+        long,
+        env = "YAAK_PLAYGROUND_RATE_LIMIT_PER_MINUTE",
+        default_value_t = 300
+    )]
+    pub rate_limit_per_minute: u32,
+
+    /// Take the client IP from `X-Forwarded-For` (first hop) instead of the socket. Only behind
+    /// a load balancer that sets the header.
+    #[arg(
+        long,
+        env = "YAAK_PLAYGROUND_TRUST_FORWARDED_FOR",
+        default_value_t = false
+    )]
+    pub trust_forwarded_for: bool,
+
+    /// Seconds after a client's first write before its posts go back to the sample data.
+    #[arg(long, env = "YAAK_PLAYGROUND_RESET_AFTER_SECS", default_value_t = 3600)]
+    pub reset_after_secs: u64,
+
+    /// Clients whose writes are kept at once. The oldest is reset early to make room.
+    #[arg(long, env = "YAAK_PLAYGROUND_MAX_CLIENTS", default_value_t = 2000)]
+    pub max_clients: usize,
+
+    #[arg(
+        long,
+        env = "YAAK_PLAYGROUND_MAX_POSTS_PER_CLIENT",
+        default_value_t = 100
+    )]
+    pub max_posts_per_client: usize,
+
+    #[arg(long, env = "YAAK_PLAYGROUND_MAX_REQUEST_BYTES", default_value_t = 64 * 1024)]
+    pub max_request_bytes: usize,
+}
+
+impl Config {
+    pub fn listen_addr(&self) -> Result<SocketAddr, String> {
+        (self.host.as_str(), self.port)
+            .to_socket_addrs()
+            .map_err(|e| format!("Invalid HOST {:?}: {e}", self.host))?
+            .next()
+            .ok_or_else(|| format!("HOST {:?} resolved to no address", self.host))
+    }
+}
diff --git a/crates-server/yaak-playground/src/data.rs b/crates-server/yaak-playground/src/data.rs
new file mode 100644
index 0000000..eedd653
--- /dev/null
+++ b/crates-server/yaak-playground/src/data.rs
@@ -0,0 +1,59 @@
+use serde::{Deserialize, Serialize};
+use std::sync::LazyLock;
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct User {
+    pub id: u64,
+    pub name: String,
+    pub username: String,
+    pub email: String,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct Post {
+    pub id: u64,
+    pub user_id: u64,
+    pub title: String,
+    pub body: String,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct Todo {
+    pub id: u64,
+    pub user_id: u64,
+    pub title: String,
+    pub completed: bool,
+}
+
+#[derive(Deserialize)]
+struct Seed {
+    users: Vec<User>,
+    posts: Vec<Post>,
+    todos: Vec<Todo>,
+}
+
+static SEED: LazyLock<Seed> =
+    LazyLock::new(|| serde_json::from_str(include_str!("seed.json")).expect("valid seed.json"));
+
+pub fn users() -> &'static [User] {
+    &SEED.users
+}
+
+pub fn posts() -> &'static [Post] {
+    &SEED.posts
+}
+
+pub fn todos() -> &'static [Todo] {
+    &SEED.todos
+}
+
+pub fn user(id: u64) -> Option<&'static User> {
+    users().iter().find(|u| u.id == id)
+}
+
+pub fn user_by_username(username: &str) -> Option<&'static User> {
+    users().iter().find(|u| u.username == username)
+}
diff --git a/crates-server/yaak-playground/src/error.rs b/crates-server/yaak-playground/src/error.rs
new file mode 100644
index 0000000..d8fba04
--- /dev/null
+++ b/crates-server/yaak-playground/src/error.rs
@@ -0,0 +1,57 @@
+use axum::extract::rejection::BytesRejection;
+use axum::http::{HeaderValue, StatusCode, header};
+use axum::response::{IntoResponse, Json, Response};
+use bytes::Bytes;
+use serde::de::DeserializeOwned;
+use serde_json::json;
+
+pub type ApiResult<T> = Result<T, ApiError>;
+
+pub struct ApiError {
+    status: StatusCode,
+    message: String,
+    challenge: Option<&'static str>,
+}
+
+impl ApiError {
+    pub fn new(status: StatusCode, message: impl Into<String>) -> Self {
+        Self { status, message: message.into(), challenge: None }
+    }
+
+    pub fn bad_request(message: impl Into<String>) -> Self {
+        Self::new(StatusCode::BAD_REQUEST, message)
+    }
+
+    pub fn not_found(message: impl Into<String>) -> Self {
+        Self::new(StatusCode::NOT_FOUND, message)
+    }
+
+    /// `challenge` becomes the `WWW-Authenticate` header.
+    pub fn unauthorized(message: impl Into<String>, challenge: Option<&'static str>) -> Self {
+        Self { status: StatusCode::UNAUTHORIZED, message: message.into(), challenge }
+    }
+}
+
+impl IntoResponse for ApiError {
+    fn into_response(self) -> Response {
+        let mut res = (self.status, Json(json!({ "error": self.message }))).into_response();
+        if let Some(challenge) = self.challenge {
+            res.headers_mut().insert(header::WWW_AUTHENTICATE, HeaderValue::from_static(challenge));
+        }
+        res
+    }
+}
+
+pub fn parse_id(raw: &str, noun: &str) -> ApiResult<u64> {
+    raw.parse().map_err(|_| ApiError::not_found(format!("No {noun} with ID {raw}")))
+}
+
+/// Taken as a `Result` so an oversized body gets a JSON error like everything else.
+pub fn parse_json<T: DeserializeOwned>(body: Result<Bytes, BytesRejection>) -> ApiResult<T> {
+    let body = body.map_err(|e| ApiError::new(e.status(), e.body_text()))?;
+    if body.is_empty() {
+        return Err(ApiError::bad_request("Request body must be JSON"));
+    }
+    serde_json::from_slice(&body)
+        .map_err(|e| ApiError::bad_request(format!("Request body is not valid: {e}")))
+}
diff --git a/crates-server/yaak-playground/src/lib.rs b/crates-server/yaak-playground/src/lib.rs
new file mode 100644
index 0000000..e0926bb
--- /dev/null
+++ b/crates-server/yaak-playground/src/lib.rs
@@ -0,0 +1,170 @@
+//! yaak-playground: the API behind yaak.run, for trying Yaak without bringing your own.
+//!
+//! Reads come from fixed sample data. Writes are kept per client IP and reset after a while,
+//! so nothing one caller sends is ever served to another. Nothing touches disk.
+
+mod auth;
+mod config;
+mod data;
+mod error;
+mod limits;
+mod resources;
+mod store;
+
+use axum::Router;
+use axum::extract::{ConnectInfo, DefaultBodyLimit, Request, State};
+use axum::http::{HeaderMap, HeaderValue, Method, StatusCode, header};
+use axum::middleware::{self, Next};
+use axum::response::{IntoResponse, Json, Response};
+use axum::routing::{get, post};
+pub use config::Config;
+use error::ApiError;
+use limits::RateLimiter;
+use serde_json::{Value, json};
+use std::net::{IpAddr, SocketAddr};
+use std::sync::Arc;
+use std::time::Duration;
+use store::PostStore;
+use tower_http::cors::{AllowOrigin, CorsLayer};
+
+const OPENAPI: &str = include_str!("openapi.json");
+
+#[derive(Clone)]
+struct AppState {
+    config: Arc<Config>,
+    rate_limiter: Arc<RateLimiter>,
+    posts: Arc<PostStore>,
+    credentials: Arc<auth::Credentials>,
+}
+
+#[derive(Clone, Copy)]
+struct ClientIp(IpAddr);
+
+/// Serve with `into_make_service_with_connect_info::<SocketAddr>()`; the client's address
+/// keys both the rate limit and its private copy of the posts.
+pub fn router(config: Config) -> Router {
+    let state = AppState {
+        rate_limiter: Arc::new(RateLimiter::new(config.rate_limit_per_minute)),
+        posts: Arc::new(PostStore::new(
+            Duration::from_secs(config.reset_after_secs),
+            config.max_clients,
+            config.max_posts_per_client,
+        )),
+        credentials: Arc::new(auth::Credentials::new()),
+        config: Arc::new(config),
+    };
+
+    let cors = CorsLayer::new()
+        .allow_origin(AllowOrigin::any())
+        .allow_methods([
+            Method::GET,
+            Method::POST,
+            Method::PUT,
+            Method::PATCH,
+            Method::DELETE,
+            Method::OPTIONS,
+        ])
+        .allow_headers([header::CONTENT_TYPE, header::AUTHORIZATION])
+        .expose_headers([
+            header::LOCATION,
+            header::RETRY_AFTER,
+            header::WWW_AUTHENTICATE,
+        ]);
+
+    Router::new()
+        .route("/", get(index))
+        .route("/health", get(health))
+        .route("/openapi.json", get(openapi))
+        .route("/users", get(resources::list_users))
+        .route("/users/:id", get(resources::get_user))
+        .route("/users/:id/todos", get(resources::list_user_todos))
+        .route("/todos", get(resources::list_todos))
+        .route("/posts", get(resources::list_posts).post(resources::create_post))
+        .route(
+            "/posts/:id",
+            get(resources::get_post)
+                .put(resources::replace_post)
+                .patch(resources::update_post)
+                .delete(resources::delete_post),
+        )
+        .route("/auth/token", post(auth::create_token))
+        .route("/auth/me", get(auth::me))
+        .route(
+            "/auth/session",
+            post(auth::create_session).get(auth::session).delete(auth::delete_session),
+        )
+        .fallback(not_found)
+        .layer(middleware::from_fn_with_state(state.clone(), identify_client))
+        .layer(DefaultBodyLimit::max(state.config.max_request_bytes))
+        .layer(cors)
+        .with_state(state)
+}
+
+async fn identify_client(
+    State(state): State<AppState>,
+    ConnectInfo(peer): ConnectInfo<SocketAddr>,
+    mut req: Request,
+    next: Next,
+) -> Response {
+    let ip = client_ip(&state.config, req.headers(), peer);
+    if let Err(wait) = state.rate_limiter.check(ip) {
+        let secs = wait.as_secs().max(1);
+        let mut res = ApiError::new(
+            StatusCode::TOO_MANY_REQUESTS,
+            format!("Rate limit reached. Try again in {secs}s"),
+        )
+        .into_response();
+        res.headers_mut().insert(header::RETRY_AFTER, HeaderValue::from(secs));
+        return res;
+    }
+    req.extensions_mut().insert(ClientIp(ip));
+    next.run(req).await
+}
+
+fn client_ip(config: &Config, headers: &HeaderMap, peer: SocketAddr) -> IpAddr {
+    if config.trust_forwarded_for
+        && let Some(forwarded) = headers.get("x-forwarded-for").and_then(|v| v.to_str().ok())
+        && let Some(first) = forwarded.split(',').next()
+        && let Ok(ip) = first.trim().parse::<IpAddr>()
+    {
+        return ip;
+    }
+    peer.ip()
+}
+
+async fn index(State(state): State<AppState>) -> Json<Value> {
+    let spec: Value = serde_json::from_str(OPENAPI).expect("valid openapi.json");
+    Json(json!({
+        "name": "Yaak Playground",
+        "description": "A small API for trying out Yaak. Posts you create, change, or delete are only visible to you, and go back to the sample data after a while.",
+        "resetAfterSeconds": state.config.reset_after_secs,
+        "login": { "username": "ada", "password": auth::PASSWORD },
+        "openapi": "/openapi.json",
+        "endpoints": operations(&spec),
+    }))
+}
+
+/// Every `METHOD /path` the spec documents.
+fn operations(spec: &Value) -> Vec<String> {
+    let mut ops = Vec::new();
+    for (path, item) in spec["paths"].as_object().into_iter().flatten() {
+        for method in ["get", "post", "put", "patch", "delete"] {
+            if item.get(method).is_some() {
+                ops.push(format!("{} {path}", method.to_uppercase()));
+            }
+        }
+    }
+    ops
+}
+
+async fn health() -> Json<Value> {
+    Json(json!({ "ok": true, "version": env!("CARGO_PKG_VERSION") }))
+}
+
+async fn openapi() -> Response {
+    ([(header::CONTENT_TYPE, "application/json")], OPENAPI).into_response()
+}
+
+async fn not_found() -> ApiError {
+    ApiError::not_found("Not found. GET / lists every endpoint")
+}
diff --git a/crates-server/yaak-playground/src/limits.rs b/crates-server/yaak-playground/src/limits.rs
new file mode 100644
index 0000000..7481c38
--- /dev/null
+++ b/crates-server/yaak-playground/src/limits.rs
@@ -0,0 +1,50 @@
+use std::collections::HashMap;
+use std::net::IpAddr;
+use std::sync::Mutex;
+use std::time::{Duration, Instant};
+
+/// One token bucket per client IP, refilled continuously.
+pub struct RateLimiter {
+    per_minute: u32,
+    buckets: Mutex<HashMap<IpAddr, Bucket>>,
+}
+
+struct Bucket {
+    tokens: f64,
+    last: Instant,
+}
+
+impl RateLimiter {
+    /// `per_minute == 0` disables limiting.
+    pub fn new(per_minute: u32) -> Self {
+        Self { per_minute, buckets: Mutex::new(HashMap::new()) }
+    }
+
+    /// Take one token for `client`, or say how long until one is available.
+    pub fn check(&self, client: IpAddr) -> Result<(), Duration> {
+        if self.per_minute == 0 {
+            return Ok(());
+        }
+        let capacity = self.per_minute as f64;
+        let per_second = capacity / 60.0;
+        let now = Instant::now();
+
+        let mut buckets = self.buckets.lock().unwrap_or_else(|e| e.into_inner());
+        if buckets.len() > 1024 {
+            buckets.retain(|_, b| now.duration_since(b.last).as_secs_f64() * per_second < capacity);
+        }
+
+        let bucket = buckets.entry(client).or_insert(Bucket { tokens: capacity, last: now });
+        let elapsed = now.duration_since(bucket.last).as_secs_f64();
+        bucket.tokens = (bucket.tokens + elapsed * per_second).min(capacity);
+        bucket.last = now;
+
+        if bucket.tokens >= 1.0 {
+            bucket.tokens -= 1.0;
+            Ok(())
+        } else {
+            let wait = (1.0 - bucket.tokens) / per_second;
+            Err(Duration::from_secs_f64(wait.max(0.001)))
+        }
+    }
+}
diff --git a/crates-server/yaak-playground/src/main.rs b/crates-server/yaak-playground/src/main.rs
new file mode 100644
index 0000000..56482c1
--- /dev/null
+++ b/crates-server/yaak-playground/src/main.rs
@@ -0,0 +1,29 @@
+use clap::Parser;
+use log::info;
+use std::net::SocketAddr;
+use yaak_playground::{Config, router};
+
+#[tokio::main]
+async fn main() {
+    env_logger::Builder::from_env(env_logger::Env::default().default_filter_or("info")).init();
+    let config = Config::parse();
+    let bind = config.listen_addr().unwrap_or_else(|e| {
+        eprintln!("{e}");
+        std::process::exit(1);
+    });
+    let app = router(config);
+
+    let listener = tokio::net::TcpListener::bind(bind).await.unwrap_or_else(|e| {
+        eprintln!("Failed to bind {bind}: {e}");
+        std::process::exit(1);
+    });
+    info!("yaak-playground listening on http://{bind}");
+
+    axum::serve(listener, app.into_make_service_with_connect_info::<SocketAddr>())
+        .with_graceful_shutdown(async {
+            let _ = tokio::signal::ctrl_c().await;
+            info!("Shutting down");
+        })
+        .await
+        .expect("server error");
+}
diff --git a/crates-server/yaak-playground/src/openapi.json b/crates-server/yaak-playground/src/openapi.json
new file mode 100644
index 0000000..1aaebd9
--- /dev/null
+++ b/crates-server/yaak-playground/src/openapi.json
@@ -0,0 +1,396 @@
+{
+  "openapi": "3.1.0",
+  "info": {
+    "title": "Yaak Playground",
+    "version": "1.0.0",
+    "description": "A small API for trying out Yaak. Users and todos are fixed sample data. Posts you create, change, or delete are only visible to you, and go back to the sample data after a while.\n\nLog in with any username (like `ada`) and the password `yaak`."
+  },
+  "servers": [{ "url": "https://yaak.run" }],
+  "tags": [
+    { "name": "Users" },
+    { "name": "Posts" },
+    { "name": "Todos" },
+    { "name": "Auth", "description": "Two ways to stay logged in: a bearer token you send yourself, or a session cookie the cookie jar sends for you." }
+  ],
+  "paths": {
+    "/users": {
+      "get": {
+        "tags": ["Users"],
+        "operationId": "listUsers",
+        "summary": "List users",
+        "responses": {
+          "200": {
+            "description": "Every user",
+            "content": {
+              "application/json": {
+                "schema": { "type": "array", "items": { "$ref": "#/components/schemas/User" } }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/users/{id}": {
+      "get": {
+        "tags": ["Users"],
+        "operationId": "getUser",
+        "summary": "Get a user",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "responses": {
+          "200": {
+            "description": "The user",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/User" } } }
+          },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      }
+    },
+    "/users/{id}/todos": {
+      "get": {
+        "tags": ["Users", "Todos"],
+        "operationId": "listUserTodos",
+        "summary": "List a user's todos",
+        "parameters": [
+          { "$ref": "#/components/parameters/Id" },
+          { "$ref": "#/components/parameters/Completed" },
+          { "$ref": "#/components/parameters/Limit" }
+        ],
+        "responses": {
+          "200": {
+            "description": "The user's todos",
+            "content": {
+              "application/json": {
+                "schema": { "type": "array", "items": { "$ref": "#/components/schemas/Todo" } }
+              }
+            }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      }
+    },
+    "/todos": {
+      "get": {
+        "tags": ["Todos"],
+        "operationId": "listTodos",
+        "summary": "List todos",
+        "parameters": [
+          { "$ref": "#/components/parameters/UserId" },
+          { "$ref": "#/components/parameters/Completed" },
+          { "$ref": "#/components/parameters/Limit" }
+        ],
+        "responses": {
+          "200": {
+            "description": "Matching todos",
+            "content": {
+              "application/json": {
+                "schema": { "type": "array", "items": { "$ref": "#/components/schemas/Todo" } }
+              }
+            }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" }
+        }
+      }
+    },
+    "/posts": {
+      "get": {
+        "tags": ["Posts"],
+        "operationId": "listPosts",
+        "summary": "List posts",
+        "parameters": [
+          { "$ref": "#/components/parameters/UserId" },
+          { "$ref": "#/components/parameters/Limit" }
+        ],
+        "responses": {
+          "200": {
+            "description": "Matching posts",
+            "content": {
+              "application/json": {
+                "schema": { "type": "array", "items": { "$ref": "#/components/schemas/Post" } }
+              }
+            }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" }
+        }
+      },
+      "post": {
+        "tags": ["Posts"],
+        "operationId": "createPost",
+        "summary": "Create a post",
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/PostInput" } } }
+        },
+        "responses": {
+          "201": {
+            "description": "The new post",
+            "headers": {
+              "Location": { "description": "Where to fetch the new post", "schema": { "type": "string" } }
+            },
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Post" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "409": {
+            "description": "You already have the most posts allowed",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Error" } } }
+          }
+        }
+      }
+    },
+    "/posts/{id}": {
+      "get": {
+        "tags": ["Posts"],
+        "operationId": "getPost",
+        "summary": "Get a post",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "responses": {
+          "200": {
+            "description": "The post",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Post" } } }
+          },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      },
+      "put": {
+        "tags": ["Posts"],
+        "operationId": "replacePost",
+        "summary": "Replace a post",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/PostInput" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "The updated post",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Post" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      },
+      "patch": {
+        "tags": ["Posts"],
+        "operationId": "updatePost",
+        "summary": "Update part of a post",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/PostPatch" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "The updated post",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Post" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      },
+      "delete": {
+        "tags": ["Posts"],
+        "operationId": "deletePost",
+        "summary": "Delete a post",
+        "parameters": [{ "$ref": "#/components/parameters/Id" }],
+        "responses": {
+          "204": { "description": "Deleted" },
+          "404": { "$ref": "#/components/responses/NotFound" }
+        }
+      }
+    },
+    "/auth/token": {
+      "post": {
+        "tags": ["Auth"],
+        "operationId": "createToken",
+        "summary": "Log in for a bearer token",
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Login" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "A token to send as `Authorization: Bearer <token>`",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Token" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "401": { "$ref": "#/components/responses/Unauthorized" }
+        }
+      }
+    },
+    "/auth/me": {
+      "get": {
+        "tags": ["Auth"],
+        "operationId": "getMe",
+        "summary": "Get the user a bearer token belongs to",
+        "security": [{ "bearerAuth": [] }],
+        "responses": {
+          "200": {
+            "description": "The logged-in user",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/User" } } }
+          },
+          "401": { "$ref": "#/components/responses/Unauthorized" }
+        }
+      }
+    },
+    "/auth/session": {
+      "post": {
+        "tags": ["Auth"],
+        "operationId": "createSession",
+        "summary": "Log in with a session cookie",
+        "requestBody": {
+          "required": true,
+          "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Login" } } }
+        },
+        "responses": {
+          "200": {
+            "description": "The logged-in user. The session cookie comes back in `Set-Cookie`.",
+            "headers": {
+              "Set-Cookie": { "description": "The `session` cookie", "schema": { "type": "string" } }
+            },
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/User" } } }
+          },
+          "400": { "$ref": "#/components/responses/BadRequest" },
+          "401": { "$ref": "#/components/responses/Unauthorized" }
+        }
+      },
+      "get": {
+        "tags": ["Auth"],
+        "operationId": "getSession",
+        "summary": "Get the user a session cookie belongs to",
+        "security": [{ "cookieAuth": [] }],
+        "responses": {
+          "200": {
+            "description": "The logged-in user",
+            "content": { "application/json": { "schema": { "$ref": "#/components/schemas/User" } } }
+          },
+          "401": { "$ref": "#/components/responses/Unauthorized" }
+        }
+      },
+      "delete": {
+        "tags": ["Auth"],
+        "operationId": "deleteSession",
+        "summary": "Log out",
+        "responses": {
+          "204": { "description": "Logged out, and the cookie is cleared" }
+        }
+      }
+    }
+  },
+  "components": {
+    "parameters": {
+      "Id": {
+        "name": "id",
+        "in": "path",
+        "required": true,
+        "schema": { "type": "integer", "minimum": 1 },
+        "example": 1
+      },
+      "UserId": {
+        "name": "userId",
+        "in": "query",
+        "description": "Only return items belonging to this user",
+        "schema": { "type": "integer", "minimum": 1 }
+      },
+      "Completed": {
+        "name": "completed",
+        "in": "query",
+        "schema": { "type": "boolean" }
+      },
+      "Limit": {
+        "name": "limit",
+        "in": "query",
+        "description": "Return at most this many items",
+        "schema": { "type": "integer", "minimum": 0 }
+      }
+    },
+    "responses": {
+      "BadRequest": {
+        "description": "Something in the request is invalid",
+        "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Error" } } }
+      },
+      "NotFound": {
+        "description": "Nothing has that ID",
+        "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Error" } } }
+      },
+      "Unauthorized": {
+        "description": "Missing or invalid credentials",
+        "content": { "application/json": { "schema": { "$ref": "#/components/schemas/Error" } } }
+      }
+    },
+    "schemas": {
+      "User": {
+        "type": "object",
+        "required": ["id", "name", "username", "email"],
+        "properties": {
+          "id": { "type": "integer", "example": 1 },
+          "name": { "type": "string", "example": "Ada Lovelace" },
+          "username": { "type": "string", "example": "ada" },
+          "email": { "type": "string", "format": "email", "example": "ada@example.com" }
+        }
+      },
+      "Post": {
+        "type": "object",
+        "required": ["id", "userId", "title", "body"],
+        "properties": {
+          "id": { "type": "integer", "example": 1 },
+          "userId": { "type": "integer", "example": 1 },
+          "title": { "type": "string" },
+          "body": { "type": "string" }
+        }
+      },
+      "PostInput": {
+        "type": "object",
+        "required": ["userId", "title", "body"],
+        "properties": {
+          "userId": { "type": "integer", "example": 1 },
+          "title": { "type": "string", "maxLength": 200, "example": "Hello from Yaak" },
+          "body": { "type": "string", "maxLength": 2000, "example": "My first post" }
+        }
+      },
+      "PostPatch": {
+        "type": "object",
+        "properties": {
+          "userId": { "type": "integer" },
+          "title": { "type": "string", "maxLength": 200 },
+          "body": { "type": "string", "maxLength": 2000 }
+        }
+      },
+      "Todo": {
+        "type": "object",
+        "required": ["id", "userId", "title", "completed"],
+        "properties": {
+          "id": { "type": "integer", "example": 1 },
+          "userId": { "type": "integer", "example": 1 },
+          "title": { "type": "string" },
+          "completed": { "type": "boolean" }
+        }
+      },
+      "Login": {
+        "type": "object",
+        "required": ["username", "password"],
+        "properties": {
+          "username": { "type": "string", "example": "ada" },
+          "password": { "type": "string", "example": "yaak" }
+        }
+      },
+      "Token": {
+        "type": "object",
+        "required": ["accessToken", "tokenType", "expiresIn"],
+        "properties": {
+          "accessToken": { "type": "string" },
+          "tokenType": { "type": "string", "const": "Bearer" },
+          "expiresIn": { "type": "integer", "description": "Seconds until the token expires", "example": 3600 }
+        }
+      },
+      "Error": {
+        "type": "object",
+        "required": ["error"],
+        "properties": { "error": { "type": "string" } }
+      }
+    },
+    "securitySchemes": {
+      "bearerAuth": { "type": "http", "scheme": "bearer" },
+      "cookieAuth": { "type": "apiKey", "in": "cookie", "name": "session" }
+    }
+  }
+}
diff --git a/crates-server/yaak-playground/src/resources.rs b/crates-server/yaak-playground/src/resources.rs
new file mode 100644
index 0000000..aad0e1f
--- /dev/null
+++ b/crates-server/yaak-playground/src/resources.rs
@@ -0,0 +1,229 @@
+use crate::data::{self, Post, Todo, User};
+use crate::error::{ApiError, ApiResult, parse_id, parse_json};
+use crate::{AppState, ClientIp};
+use axum::extract::rejection::BytesRejection;
+use axum::extract::{Extension, Path, Query, State};
+use axum::http::{HeaderValue, StatusCode, header};
+use axum::response::{IntoResponse, Json, Response};
+use bytes::Bytes;
+use serde::Deserialize;
+use std::collections::HashMap;
+
+const MAX_TITLE_CHARS: usize = 200;
+const MAX_BODY_CHARS: usize = 2000;
+
+type Params = Query<HashMap<String, String>>;
+
+struct Filters {
+    user_id: Option<u64>,
+    completed: Option<bool>,
+    limit: Option<usize>,
+}
+
+fn filters(params: &HashMap<String, String>) -> ApiResult<Filters> {
+    fn parse<T: std::str::FromStr>(
+        params: &HashMap<String, String>,
+        name: &str,
+        expected: &str,
+    ) -> ApiResult<Option<T>> {
+        params
+            .get(name)
+            .map(|v| {
+                v.parse().map_err(|_| {
+                    ApiError::bad_request(format!("Query parameter `{name}` must be {expected}"))
+                })
+            })
+            .transpose()
+    }
+    Ok(Filters {
+        user_id: parse(params, "userId", "a user ID")?,
+        completed: parse(params, "completed", "true or false")?,
+        limit: parse(params, "limit", "a number")?,
+    })
+}
+
+pub async fn list_users() -> Json<&'static [User]> {
+    Json(data::users())
+}
+
+pub async fn get_user(Path(id): Path<String>) -> ApiResult<Json<&'static User>> {
+    let user_id = parse_id(&id, "user")?;
+    data::user(user_id)
+        .map(Json)
+        .ok_or_else(|| ApiError::not_found(format!("No user with ID {id}")))
+}
+
+pub async fn list_todos(Query(params): Params) -> ApiResult<Json<Vec<&'static Todo>>> {
+    let f = filters(¶ms)?;
+    Ok(Json(select_todos(f.user_id, f.completed, f.limit)))
+}
+
+pub async fn list_user_todos(
+    Path(id): Path<String>,
+    Query(params): Params,
+) -> ApiResult<Json<Vec<&'static Todo>>> {
+    let user = get_user(Path(id)).await?;
+    let f = filters(¶ms)?;
+    Ok(Json(select_todos(Some(user.id), f.completed, f.limit)))
+}
+
+fn select_todos(
+    user_id: Option<u64>,
+    completed: Option<bool>,
+    limit: Option<usize>,
+) -> Vec<&'static Todo> {
+    data::todos()
+        .iter()
+        .filter(|t| user_id.is_none_or(|id| t.user_id == id))
+        .filter(|t| completed.is_none_or(|c| t.completed == c))
+        .take(limit.unwrap_or(usize::MAX))
+        .collect()
+}
+
+pub async fn list_posts(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Query(params): Params,
+) -> ApiResult<Json<Vec<Post>>> {
+    let f = filters(¶ms)?;
+    let posts = state.posts.read(ip, |posts| {
+        posts
+            .iter()
+            .filter(|p| f.user_id.is_none_or(|id| p.user_id == id))
+            .take(f.limit.unwrap_or(usize::MAX))
+            .cloned()
+            .collect()
+    });
+    Ok(Json(posts))
+}
+
+pub async fn get_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Path(id): Path<String>,
+) -> ApiResult<Json<Post>> {
+    let post_id = parse_id(&id, "post")?;
+    state
+        .posts
+        .read(ip, |posts| posts.iter().find(|p| p.id == post_id).cloned())
+        .map(Json)
+        .ok_or_else(|| post_not_found(&id))
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct NewPost {
+    user_id: u64,
+    title: String,
+    body: String,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct PostPatch {
+    user_id: Option<u64>,
+    title: Option<String>,
+    body: Option<String>,
+}
+
+pub async fn create_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Response> {
+    let input: NewPost = parse_json(body)?;
+    validate(input.user_id, &input.title, &input.body)?;
+    let max = state.posts.max_posts;
+    let post = state.posts.write(ip, |client| {
+        if client.posts.len() >= max {
+            return Err(ApiError::new(
+                StatusCode::CONFLICT,
+                format!(
+                    "You can have at most {max} posts. Delete one first, or wait for the reset"
+                ),
+            ));
+        }
+        Ok(client.insert(input.user_id, input.title, input.body))
+    })?;
+    let location = HeaderValue::from_str(&format!("/posts/{}", post.id)).expect("ascii");
+    Ok((StatusCode::CREATED, [(header::LOCATION, location)], Json(post)).into_response())
+}
+
+pub async fn replace_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Path(id): Path<String>,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Json<Post>> {
+    let post_id = parse_id(&id, "post")?;
+    let input: NewPost = parse_json(body)?;
+    validate(input.user_id, &input.title, &input.body)?;
+    state.posts.write(ip, |client| {
+        let post =
+            client.posts.iter_mut().find(|p| p.id == post_id).ok_or_else(|| post_not_found(&id))?;
+        post.user_id = input.user_id;
+        post.title = input.title;
+        post.body = input.body;
+        Ok(Json(post.clone()))
+    })
+}
+
+pub async fn update_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Path(id): Path<String>,
+    body: Result<Bytes, BytesRejection>,
+) -> ApiResult<Json<Post>> {
+    let post_id = parse_id(&id, "post")?;
+    let patch: PostPatch = parse_json(body)?;
+    state.posts.write(ip, |client| {
+        let post =
+            client.posts.iter_mut().find(|p| p.id == post_id).ok_or_else(|| post_not_found(&id))?;
+        let user_id = patch.user_id.unwrap_or(post.user_id);
+        let title = patch.title.unwrap_or_else(|| post.title.clone());
+        let body = patch.body.unwrap_or_else(|| post.body.clone());
+        validate(user_id, &title, &body)?;
+        post.user_id = user_id;
+        post.title = title;
+        post.body = body;
+        Ok(Json(post.clone()))
+    })
+}
+
+pub async fn delete_post(
+    State(state): State<AppState>,
+    Extension(ClientIp(ip)): Extension<ClientIp>,
+    Path(id): Path<String>,
+) -> ApiResult<StatusCode> {
+    let post_id = parse_id(&id, "post")?;
+    state.posts.write(ip, |client| {
+        let index =
+            client.posts.iter().position(|p| p.id == post_id).ok_or_else(|| post_not_found(&id))?;
+        client.posts.remove(index);
+        Ok(StatusCode::NO_CONTENT)
+    })
+}
+
+fn post_not_found(id: &str) -> ApiError {
+    ApiError::not_found(format!("No post with ID {id}"))
+}
+
+fn validate(user_id: u64, title: &str, body: &str) -> ApiResult<()> {
+    if data::user(user_id).is_none() {
+        return Err(ApiError::bad_request(format!("No user with ID {user_id}")));
+    }
+    if title.trim().is_empty() {
+        return Err(ApiError::bad_request("`title` can't be empty"));
+    }
+    if title.chars().count() > MAX_TITLE_CHARS {
+        return Err(ApiError::bad_request(format!(
+            "`title` must be {MAX_TITLE_CHARS} characters or fewer"
+        )));
+    }
+    if body.chars().count() > MAX_BODY_CHARS {
+        return Err(ApiError::bad_request(format!(
+            "`body` must be {MAX_BODY_CHARS} characters or fewer"
+        )));
+    }
+    Ok(())
+}
diff --git a/crates-server/yaak-playground/src/seed.json b/crates-server/yaak-playground/src/seed.json
new file mode 100644
index 0000000..fa724a9
--- /dev/null
+++ b/crates-server/yaak-playground/src/seed.json
@@ -0,0 +1,88 @@
+{
+  "users": [
+    { "id": 1, "name": "Ada Lovelace", "username": "ada", "email": "ada@example.com" },
+    { "id": 2, "name": "Grace Hopper", "username": "grace", "email": "grace@example.com" },
+    { "id": 3, "name": "Alan Turing", "username": "alan", "email": "alan@example.com" },
+    { "id": 4, "name": "Katherine Johnson", "username": "katherine", "email": "katherine@example.com" },
+    { "id": 5, "name": "Margaret Hamilton", "username": "margaret", "email": "margaret@example.com" }
+  ],
+  "posts": [
+    {
+      "id": 1,
+      "userId": 1,
+      "title": "Notes on the Analytical Engine",
+      "body": "Requests are just messages. The trick is knowing exactly what you sent."
+    },
+    {
+      "id": 2,
+      "userId": 1,
+      "title": "Why I keep my variables in environments",
+      "body": "Switching from staging to production should be one click, not a find and replace."
+    },
+    {
+      "id": 3,
+      "userId": 2,
+      "title": "Easier to ask forgiveness than permission",
+      "body": "Unless the API returns a 403. Then it's time to check your token."
+    },
+    {
+      "id": 4,
+      "userId": 2,
+      "title": "Debugging the first bug",
+      "body": "The Timeline tab shows every redirect, header, and byte. No moths required."
+    },
+    {
+      "id": 5,
+      "userId": 3,
+      "title": "Can machines send requests?",
+      "body": "This one just did. Look through the response headers to see what came back."
+    },
+    {
+      "id": 6,
+      "userId": 3,
+      "title": "On computable status codes",
+      "body": "2xx is good news, 4xx usually means the request needs fixing, and 5xx usually means the server does."
+    },
+    {
+      "id": 7,
+      "userId": 4,
+      "title": "Checking the math on pagination",
+      "body": "Add a limit query parameter to get fewer results back."
+    },
+    {
+      "id": 8,
+      "userId": 4,
+      "title": "Plotting a course between requests",
+      "body": "Pull a value out of one response and send it in the next. That's all chaining is."
+    },
+    {
+      "id": 9,
+      "userId": 5,
+      "title": "Error handling saved the landing",
+      "body": "An API that returns clear errors is an API you can build on."
+    },
+    {
+      "id": 10,
+      "userId": 5,
+      "title": "Logging in, then everything else",
+      "body": "Get a token from one request and use it for the rest. Set it once on a folder and every request inside inherits it."
+    }
+  ],
+  "todos": [
+    { "id": 1, "userId": 1, "title": "Send your first request", "completed": true },
+    { "id": 2, "userId": 1, "title": "Create an environment", "completed": false },
+    { "id": 3, "userId": 1, "title": "Switch to a sub-environment", "completed": false },
+    { "id": 4, "userId": 2, "title": "Import an OpenAPI spec", "completed": true },
+    { "id": 5, "userId": 2, "title": "Add a header to a folder", "completed": false },
+    { "id": 6, "userId": 2, "title": "Read the response timeline", "completed": true },
+    { "id": 7, "userId": 3, "title": "Chain a value from another response", "completed": false },
+    { "id": 8, "userId": 3, "title": "Log in and use the token", "completed": false },
+    { "id": 9, "userId": 3, "title": "Copy a request as curl", "completed": true },
+    { "id": 10, "userId": 4, "title": "Sync a workspace to a folder", "completed": false },
+    { "id": 11, "userId": 4, "title": "Commit the workspace to Git", "completed": false },
+    { "id": 12, "userId": 4, "title": "Encrypt a secret", "completed": false },
+    { "id": 13, "userId": 5, "title": "Create a post", "completed": false },
+    { "id": 14, "userId": 5, "title": "Delete the post you created", "completed": false },
+    { "id": 15, "userId": 5, "title": "Delete the example workspace", "completed": false }
+  ]
+}
diff --git a/crates-server/yaak-playground/src/store.rs b/crates-server/yaak-playground/src/store.rs
new file mode 100644
index 0000000..71ccb9e
--- /dev/null
+++ b/crates-server/yaak-playground/src/store.rs
@@ -0,0 +1,83 @@
+use crate::data::{self, Post};
+use std::collections::HashMap;
+use std::net::IpAddr;
+use std::sync::{Mutex, MutexGuard};
+use std::time::{Duration, Instant};
+
+/// Posts as each client sees them. A client that has never written reads the sample data; its
+/// first write takes a private copy, which is thrown away `reset_after` later. Nothing one
+/// client writes is ever served to another.
+pub struct PostStore {
+    clients: Mutex<HashMap<IpAddr, ClientPosts>>,
+    reset_after: Duration,
+    max_clients: usize,
+    pub max_posts: usize,
+}
+
+pub struct ClientPosts {
+    pub posts: Vec<Post>,
+    next_id: u64,
+    created: Instant,
+}
+
+impl ClientPosts {
+    pub fn insert(&mut self, user_id: u64, title: String, body: String) -> Post {
+        let post = Post { id: self.next_id, user_id, title, body };
+        self.next_id += 1;
+        self.posts.push(post.clone());
+        post
+    }
+}
+
+impl PostStore {
+    pub fn new(reset_after: Duration, max_clients: usize, max_posts: usize) -> Self {
+        Self { clients: Mutex::new(HashMap::new()), reset_after, max_clients, max_posts }
+    }
+
+    pub fn read<R>(&self, client: IpAddr, f: impl FnOnce(&[Post]) -> R) -> R {
+        let mut clients = self.lock();
+        self.drop_if_expired(&mut clients, client, Instant::now());
+        match clients.get(&client) {
+            Some(c) => f(&c.posts),
+            None => f(data::posts()),
+        }
+    }
+
+    pub fn write<R>(&self, client: IpAddr, f: impl FnOnce(&mut ClientPosts) -> R) -> R {
+        let mut clients = self.lock();
+        let now = Instant::now();
+        self.drop_if_expired(&mut clients, client, now);
+
+        if !clients.contains_key(&client) {
+            if clients.len() >= self.max_clients {
+                clients.retain(|_, c| now.duration_since(c.created) < self.reset_after);
+            }
+            if clients.len() >= self.max_clients
+                && let Some(oldest) =
+                    clients.iter().min_by_key(|(_, c)| c.created).map(|(ip, _)| *ip)
+            {
+                clients.remove(&oldest);
+            }
+            let posts = data::posts().to_vec();
+            let next_id = posts.iter().map(|p| p.id).max().unwrap_or(0) + 1;
+            clients.insert(client, ClientPosts { posts, next_id, created: now });
+        }
+
+        f(clients.get_mut(&client).expect("inserted above"))
+    }
+
+    fn lock(&self) -> MutexGuard<'_, HashMap<IpAddr, ClientPosts>> {
+        self.clients.lock().unwrap_or_else(|e| e.into_inner())
+    }
+
+    fn drop_if_expired(
+        &self,
+        clients: &mut HashMap<IpAddr, ClientPosts>,
+        client: IpAddr,
+        now: Instant,
+    ) {
+        if clients.get(&client).is_some_and(|c| now.duration_since(c.created) >= self.reset_after) {
+            clients.remove(&client);
+        }
+    }
+}
diff --git a/crates-server/yaak-playground/tests/api.rs b/crates-server/yaak-playground/tests/api.rs
new file mode 100644
index 0000000..b08989f
--- /dev/null
+++ b/crates-server/yaak-playground/tests/api.rs
@@ -0,0 +1,262 @@
+use axum::Router;
+use axum::body::{Body, to_bytes};
+use axum::extract::ConnectInfo;
+use axum::http::{HeaderMap, Request, StatusCode, header};
+use serde_json::{Value, json};
+use std::collections::BTreeSet;
+use std::net::SocketAddr;
+use tower::ServiceExt;
+use yaak_playground::{Config, router};
+
+const ALICE: [u8; 4] = [203, 0, 113, 1];
+const BOB: [u8; 4] = [203, 0, 113, 2];
+
+fn config() -> Config {
+    Config {
+        host: "127.0.0.1".to_string(),
+        port: 0,
+        rate_limit_per_minute: 1000,
+        trust_forwarded_for: false,
+        reset_after_secs: 3600,
+        max_clients: 10,
+        max_posts_per_client: 20,
+        max_request_bytes: 4096,
+    }
+}
+
+struct Res {
+    status: StatusCode,
+    headers: HeaderMap,
+    json: Value,
+}
+
+async fn call(
+    app: &Router,
+    client: [u8; 4],
+    method: &str,
+    uri: &str,
+    headers: &[(&str, &str)],
+    body: Option<Value>,
+) -> Res {
+    let mut req = Request::builder().method(method).uri(uri);
+    for (name, value) in headers {
+        req = req.header(*name, *value);
+    }
+    let body = match body {
+        Some(v) => Body::from(v.to_string()),
+        None => Body::empty(),
+    };
+    let mut req = req.body(body).unwrap();
+    req.extensions_mut().insert(ConnectInfo(SocketAddr::from((client, 40000))));
+    let res = app.clone().oneshot(req).await.unwrap();
+    let status = res.status();
+    let headers = res.headers().clone();
+    let bytes = to_bytes(res.into_body(), 1024 * 1024).await.unwrap();
+    let json = if bytes.is_empty() { Value::Null } else { serde_json::from_slice(&bytes).unwrap() };
+    Res { status, headers, json }
+}
+
+#[tokio::test]
+async fn users_and_todos() {
+    let app = router(config());
+    let res = call(&app, ALICE, "GET", "/users", &[], None).await;
+    assert_eq!(res.status, StatusCode::OK);
+    assert_eq!(res.json[0]["username"], "ada");
+
+    let res = call(&app, ALICE, "GET", "/users/2", &[], None).await;
+    assert_eq!(res.json["name"], "Grace Hopper");
+
+    for uri in ["/users/99", "/users/abc", "/users/99/todos"] {
+        let res = call(&app, ALICE, "GET", uri, &[], None).await;
+        assert_eq!(res.status, StatusCode::NOT_FOUND, "{uri}");
+        assert!(res.json["error"].is_string());
+    }
+
+    let res = call(&app, ALICE, "GET", "/users/1/todos?completed=false&limit=1", &[], None).await;
+    assert_eq!(res.json.as_array().unwrap().len(), 1);
+    assert_eq!(res.json[0]["userId"], 1);
+    assert_eq!(res.json[0]["completed"], false);
+
+    let res = call(&app, ALICE, "GET", "/todos?userId=3", &[], None).await;
+    assert!(res.json.as_array().unwrap().iter().all(|t| t["userId"] == 3));
+
+    let res = call(&app, ALICE, "GET", "/todos?completed=maybe", &[], None).await;
+    assert_eq!(res.status, StatusCode::BAD_REQUEST);
+}
+
+#[tokio::test]
+async fn writes_are_private_to_the_client() {
+    let app = router(config());
+    let new_post = json!({ "userId": 1, "title": "Hello", "body": "From Yaak" });
+    let res = call(&app, ALICE, "POST", "/posts", &[], Some(new_post)).await;
+    assert_eq!(res.status, StatusCode::CREATED);
+    let id = res.json["id"].as_u64().unwrap();
+    assert_eq!(res.headers[header::LOCATION], format!("/posts/{id}"));
+
+    let uri = format!("/posts/{id}");
+    assert_eq!(call(&app, ALICE, "GET", &uri, &[], None).await.status, StatusCode::OK);
+    assert_eq!(call(&app, BOB, "GET", &uri, &[], None).await.status, StatusCode::NOT_FOUND);
+
+    let res = call(&app, ALICE, "PATCH", &uri, &[], Some(json!({ "title": "Edited" }))).await;
+    assert_eq!(res.json["title"], "Edited");
+    assert_eq!(res.json["body"], "From Yaak");
+
+    let replacement = json!({ "userId": 2, "title": "Replaced", "body": "" });
+    let res = call(&app, ALICE, "PUT", &uri, &[], Some(replacement)).await;
+    assert_eq!(res.json["userId"], 2);
+
+    let res = call(&app, ALICE, "DELETE", "/posts/1", &[], None).await;
+    assert_eq!(res.status, StatusCode::NO_CONTENT);
+    assert_eq!(call(&app, ALICE, "GET", "/posts/1", &[], None).await.status, StatusCode::NOT_FOUND);
+    assert_eq!(call(&app, BOB, "GET", "/posts/1", &[], None).await.status, StatusCode::OK);
+
+    let res = call(&app, ALICE, "GET", "/posts?userId=2", &[], None).await;
+    assert!(res.json.as_array().unwrap().iter().any(|p| p["title"] == "Replaced"));
+}
+
+#[tokio::test]
+async fn invalid_posts_are_rejected() {
+    let app = router(config());
+    let cases = [
+        json!({ "title": "No user", "body": "" }),
+        json!({ "userId": 99, "title": "Unknown user", "body": "" }),
+        json!({ "userId": 1, "title": "  ", "body": "" }),
+        json!({ "userId": 1, "title": "x".repeat(201), "body": "" }),
+    ];
+    for body in cases {
+        let res = call(&app, ALICE, "POST", "/posts", &[], Some(body.clone())).await;
+        assert_eq!(res.status, StatusCode::BAD_REQUEST, "{body}");
+        assert!(res.json["error"].is_string());
+    }
+
+    let res = call(&app, ALICE, "POST", "/posts", &[], None).await;
+    assert_eq!(res.status, StatusCode::BAD_REQUEST);
+
+    let huge = json!({ "userId": 1, "title": "Big", "body": "x".repeat(5000) });
+    let res = call(&app, ALICE, "POST", "/posts", &[], Some(huge)).await;
+    assert_eq!(res.status, StatusCode::PAYLOAD_TOO_LARGE);
+    assert!(res.json["error"].is_string());
+}
+
+#[tokio::test]
+async fn post_cap_and_reset() {
+    let app = router(Config { max_posts_per_client: 11, ..config() });
+    let post = json!({ "userId": 1, "title": "One more", "body": "" });
+    assert_eq!(
+        call(&app, ALICE, "POST", "/posts", &[], Some(post.clone())).await.status,
+        StatusCode::CREATED
+    );
+    assert_eq!(
+        call(&app, ALICE, "POST", "/posts", &[], Some(post)).await.status,
+        StatusCode::CONFLICT
+    );
+
+    let app = router(Config { reset_after_secs: 0, ..config() });
+    call(&app, ALICE, "DELETE", "/posts/1", &[], None).await;
+    assert_eq!(call(&app, ALICE, "GET", "/posts/1", &[], None).await.status, StatusCode::OK);
+}
+
+#[tokio::test]
+async fn bearer_token_flow() {
+    let app = router(config());
+    let res = call(&app, ALICE, "GET", "/auth/me", &[], None).await;
+    assert_eq!(res.status, StatusCode::UNAUTHORIZED);
+    assert_eq!(res.headers[header::WWW_AUTHENTICATE], "Bearer");
+
+    let bad = json!({ "username": "ada", "password": "nope" });
+    assert_eq!(
+        call(&app, ALICE, "POST", "/auth/token", &[], Some(bad)).await.status,
+        StatusCode::UNAUTHORIZED
+    );
+
+    let good = json!({ "username": "grace", "password": "yaak" });
+    let res = call(&app, ALICE, "POST", "/auth/token", &[], Some(good)).await;
+    assert_eq!(res.status, StatusCode::OK);
+    let token = res.json["accessToken"].as_str().unwrap().to_string();
+
+    let auth = format!("Bearer {token}");
+    let res = call(&app, BOB, "GET", "/auth/me", &[("authorization", &auth)], None).await;
+    assert_eq!(res.json["username"], "grace");
+
+    let res =
+        call(&app, ALICE, "GET", "/auth/me", &[("authorization", "Bearer wrong")], None).await;
+    assert_eq!(res.status, StatusCode::UNAUTHORIZED);
+
+    let cookie = format!("session={token}");
+    let res = call(&app, ALICE, "GET", "/auth/session", &[("cookie", &cookie)], None).await;
+    assert_eq!(res.status, StatusCode::UNAUTHORIZED);
+}
+
+#[tokio::test]
+async fn session_cookie_flow() {
+    let app = router(config());
+    let login = json!({ "username": "alan", "password": "yaak" });
+    let res =
+        call(&app, ALICE, "POST", "/auth/session", &[("x-forwarded-proto", "https")], Some(login))
+            .await;
+    assert_eq!(res.status, StatusCode::OK);
+    let set_cookie = res.headers[header::SET_COOKIE].to_str().unwrap();
+    assert!(set_cookie.contains("HttpOnly") && set_cookie.contains("; Secure"), "{set_cookie}");
+    let cookie = set_cookie.split(';').next().unwrap().to_string();
+
+    let headers = [("cookie", cookie.as_str())];
+    let res = call(&app, ALICE, "GET", "/auth/session", &headers, None).await;
+    assert_eq!(res.json["username"], "alan");
+
+    let id = cookie.trim_start_matches("session=");
+    let auth = format!("Bearer {id}");
+    let res = call(&app, ALICE, "GET", "/auth/me", &[("authorization", &auth)], None).await;
+    assert_eq!(res.status, StatusCode::UNAUTHORIZED);
+
+    let res = call(&app, ALICE, "DELETE", "/auth/session", &headers, None).await;
+    assert_eq!(res.status, StatusCode::NO_CONTENT);
+    assert!(res.headers[header::SET_COOKIE].to_str().unwrap().contains("Max-Age=0"));
+    assert_eq!(
+        call(&app, ALICE, "GET", "/auth/session", &headers, None).await.status,
+        StatusCode::UNAUTHORIZED
+    );
+}
+
+#[tokio::test]
+async fn rate_limit() {
+    let app = router(Config { rate_limit_per_minute: 2, ..config() });
+    call(&app, ALICE, "GET", "/users", &[], None).await;
+    call(&app, ALICE, "GET", "/users", &[], None).await;
+    let res = call(&app, ALICE, "GET", "/users", &[], None).await;
+    assert_eq!(res.status, StatusCode::TOO_MANY_REQUESTS);
+    assert!(res.headers.contains_key(header::RETRY_AFTER));
+    assert_eq!(call(&app, BOB, "GET", "/users", &[], None).await.status, StatusCode::OK);
+}
+
+#[tokio::test]
+async fn openapi_matches_the_routes() {
+    let app = router(config());
+    let spec = call(&app, ALICE, "GET", "/openapi.json", &[], None).await.json;
+    let mut documented = BTreeSet::new();
+    for (path, item) in spec["paths"].as_object().unwrap() {
+        for (method, _) in item.as_object().unwrap() {
+            let method = method.to_uppercase();
+            let uri = path.replace("{id}", "1");
+            // A fresh client per call, so a DELETE can't hide the GET that follows it
+            let client = [198, 51, 100, documented.len() as u8];
+            let res = call(&app, client, &method, &uri, &[], None).await;
+            assert!(
+                res.status != StatusCode::NOT_FOUND && res.status != StatusCode::METHOD_NOT_ALLOWED,
+                "{method} {path} is documented but not routed ({})",
+                res.status
+            );
+            documented.insert(format!("{method} {path}"));
+        }
+    }
+
+    let index = call(&app, ALICE, "GET", "/", &[], None).await.json;
+    let listed: BTreeSet<String> = index["endpoints"]
+        .as_array()
+        .unwrap()
+        .iter()
+        .map(|e| e.as_str().unwrap().to_string())
+        .collect();
+    assert_eq!(listed, documented);
+
+    assert_eq!(call(&app, ALICE, "GET", "/nope", &[], None).await.status, StatusCode::NOT_FOUND);
+}
diff --git a/crates-server/yaak-web/Cargo.toml b/crates-server/yaak-web/Cargo.toml
new file mode 100644
index 0000000..9568f86
--- /dev/null
+++ b/crates-server/yaak-web/Cargo.toml
@@ -0,0 +1,40 @@
+[package]
+name = "yaak-web"
+version = "0.1.0"
+edition = "2024"
+publish = false
+description = "The server behind Yaak in the browser: executes sends, and can serve the app"
+
+# The send engine (yaak-http) and the model types it speaks (yaak-models, for
+# HttpRequest / Cookie / HttpResponseEventData). Deliberately NOT yaak (the
+# render + storage orchestration), yaak-plugins, or the RPC router: this crate
+# opens no database, runs no plugins, and renders nothing. yaak-models comes
+# along only because yaak-http's types are its types; nothing here calls into
+# its query layer.
+
+[[bin]]
+name = "yaak-web"
+path = "src/main.rs"
+
+[dependencies]
+async-trait = "0.1"
+axum = "0.7"
+base64 = "0.22.1"
+bytes = "1.11.1"
+clap = { version = "4.5", features = ["derive", "env"] }
+env_logger = "0.11"
+futures-util = "0.3"
+log = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+tokio = { workspace = true, features = ["rt-multi-thread", "macros", "signal", "sync", "io-util", "time", "net"] }
+tower-http = { version = "0.6", features = ["compression-gzip", "compression-zstd", "cors", "fs"] }
+ts-rs = { workspace = true }
+url = "2"
+uuid = { version = "1", features = ["v4"] }
+yaak-http = { workspace = true }
+yaak-models = { workspace = true }
+
+[dev-dependencies]
+tempfile = "3"
+tower = { version = "0.5", features = ["util"] }
diff --git a/crates-server/yaak-web/README.md b/crates-server/yaak-web/README.md
new file mode 100644
index 0000000..74558f1
--- /dev/null
+++ b/crates-server/yaak-web/README.md
@@ -0,0 +1,237 @@
+# yaak-web
+
+The network half of Yaak in a browser — and, with `--serve`, the half that
+hands the browser the app in the first place.
+
+A tab can't see an HTTP response the way a desktop app can: CORS hides most
+headers (2 of 8 in a typical response), redirects are followed silently, and
+there is no timeline. So the tab renders the request and posts it here, and this
+process puts it on the network with the desktop's own engine (`yaak-http`) and
+streams back everything that happened — every header, every redirect hop, DNS
+timing, the body — for the tab to store.
+
+It is a **stateless executor**. It keeps nothing: no database, no files, no
+sessions, no cookies between calls. Every byte it sees comes from the tab in the
+request, and every byte it returns is stored by the tab. Restart it any time.
+
+## Self-hosting it
+
+One container, no configuration, nothing behind it:
+
+```shell
+docker run -p 8080:8080 ghcr.io/mountain-loop/yaak-web
+```
+
+Open <http://localhost:8080>. The image carries the built web client and this
+binary, which serves it — so the app and its sends are on one origin, and the
+tab's send URL is a path (`/v1/http/send`) rather than an address anyone has to
+configure. The image is `linux/amd64` and `linux/arm64`, built from
+`Dockerfile.web` at the repo root.
+
+Your data lives in your browser (SQLite compiled to wasm, in IndexedDB), not in
+the container. The container is stateless: nothing is written to disk, so
+upgrading is `docker pull` and nothing else.
+
+Two settings are worth knowing about:
+
+```shell
+docker run -p 8080:8080 \
+  -e YAAK_WEB_ALLOW_PRIVATE_NETWORKS=true \
+  -e YAAK_WEB_RATE_LIMIT_PER_MINUTE=0 \
+  ghcr.io/mountain-loop/yaak-web
+```
+
+- **`YAAK_WEB_ALLOW_PRIVATE_NETWORKS=true`** lets sends reach loopback,
+  private and link-local addresses. Off by default, and it should stay off on
+  anything strangers can reach — see [What it refuses](#what-it-refuses-and-why).
+  Turn it on for an instance on your own network, where calling the API on the
+  next machine is the whole point. Note that "private" is relative to the
+  _container_: `127.0.0.1` is the container itself, and reaching the Docker
+  host means `host.docker.internal` (or `--network host`).
+- **`YAAK_WEB_RATE_LIMIT_PER_MINUTE`** defaults to 120 sends per client IP,
+  which suits a public instance and not a team of your own; `0` disables it.
+
+Behind a reverse proxy, add `YAAK_WEB_TRUST_FORWARDED_FOR=true` so the rate
+limit sees real client addresses instead of its own — and only then, since
+otherwise anyone can spoof the header. If the reverse proxy buffers responses,
+tell it not to: sends are streamed, and the `X-Accel-Buffering: no` header this
+binary sets is honoured by nginx-shaped ones.
+
+## Running it from source
+
+```shell
+cargo run -p yaak-web -- --serve dist/apps/yaak-client
+```
+
+after a `YAAK_TARGET=web SKIP_WASM_BUILD=1 npx vp -C apps/yaak-client build`.
+Without `--serve` it is the send executor alone, which is what the frontend
+dev server wants:
+
+```shell
+cargo run -p yaak-web
+YAAK_TARGET=web npm run dev --workspace @yaakapp/yaak-client
+```
+
+The dev server passes `/v1` through to this binary, so a dev build sends to its
+own origin exactly like a production build does — one address to open, and no
+CORS in the loop. `PORT` moves this server and the dev server follows it. A
+production build also sends to its own origin, unless `VITE_YAAK_WEB_URL` was
+set when it was built.
+
+Reaching the dev server from another machine is `HOST=0.0.0.0`. Vite allows
+addresses but not names, so opening it as a hostname also needs
+`ALLOWED_HOSTS=that-name`.
+
+## Configuration
+
+Every flag has an environment variable, so a container needs no arguments;
+`--help` lists them all. The listen address uses the platform conventions —
+`HOST` and `PORT` — so the published image runs unchanged on a
+platform-as-a-service that assigns a port. Everything else is `YAAK_WEB_*`.
+
+| Flag                       | Default     | What                                                                                          |
+| -------------------------- | ----------- | --------------------------------------------------------------------------------------------- |
+| `--serve`                  | off         | Also serve a built web client from this directory, on the same origin.                        |
+| `--host`                   | `127.0.0.1` | Interface to listen on. The image sets `0.0.0.0`. May be a name; `localhost` resolves.        |
+| `--port`                   | `9227`      | Port to listen on. The image sets `8080`.                                                     |
+| `--allow-private-networks` | off         | Allow sends to loopback, private and link-local addresses.                                    |
+| `--allowed-origins`        | `*`         | CORS origins, comma-separated. Unused when the app is served from here: same origin, no CORS. |
+| `--max-request-bytes`      | 16 MiB      | Largest rendered request accepted from the tab.                                               |
+| `--max-response-bytes`     | 64 MiB      | Largest upstream body relayed before the send is cut off.                                     |
+| `--max-timeout-secs`       | 60          | Ceiling on a send's timeout; a request asking for more (or none) gets this.                   |
+| `--rate-limit-per-minute`  | 120         | Sends per client IP per minute; 0 disables.                                                   |
+| `--max-concurrent`         | 256         | Sends in flight at once.                                                                      |
+| `--trust-forwarded-for`    | off         | Take the client IP from `X-Forwarded-For`. Only behind a load balancer that sets it.          |
+
+## Logging
+
+Default logs contain a startup message and operational warnings and errors, not request URLs, client IPs,
+DNS lookups, or per-request timing. To diagnose a self-hosted instance, opt in with
+`RUST_LOG=warn,yaak_http=error,yaak_web=debug`. This includes request URLs and IPs,
+so only enable it while debugging. Hosting infrastructure may maintain its own
+access logs independently.
+
+## Serving the app
+
+`--serve DIR` puts a file server behind the API routes: `/v1/*` is matched
+first, everything else comes from `DIR`, and a path with no file behind it gets
+`index.html` so the app's own routes survive a refresh. Responses are compressed
+(gzip or zstd) on the fly. `/assets/*` is cached forever — Vite content-hashes
+those names — and everything else is `no-cache`, so a new deploy arrives on the
+next reload.
+
+Serving files changes nothing about sending: the same rendered request, the same
+destination policy, the same stateless executor. It exists so that a
+self-hosted Yaak is one thing to run rather than two.
+
+## Split deployments
+
+The app and the sender can still be separate services — one CDN-hosted bundle and
+one server elsewhere, or one server shared by several fronts. Then the bundle has
+to be told where to send, at build time:
+
+```shell
+docker build -f Dockerfile.web \
+  --build-arg VITE_YAAK_WEB_URL=https://send.example.com .
+```
+
+and the server needs the CORS origins its callers use, since the requests are no
+longer same-origin:
+
+```shell
+docker run -p 8080:8080 \
+  -e YAAK_WEB_ALLOWED_ORIGINS=https://yaak.example.com \
+  ghcr.io/mountain-loop/yaak-web \
+  yaak-web
+```
+
+The trailing `yaak-web` is a command override: the same image run without
+`--serve`, so it executes sends and serves no app.
+
+## What it refuses, and why
+
+A hosted sender is, by construction, a machine that makes HTTP requests on
+behalf of strangers. Left alone that is an open relay into whatever network it
+sits on. So by default it refuses to connect to:
+
+- loopback (`127/8`, `::1`), private (`10/8`, `172.16/12`, `192.168/16`,
+  `fc00::/7`), link-local (`169.254/16` — where cloud metadata lives — and
+  `fe80::/10`), carrier-grade NAT, multicast, reserved and unspecified ranges,
+  IPv4 addresses carried inside IPv6 forms (`::ffff:a.b.c.d`, the well-known
+  NAT64 prefix, 6to4), and the whole NAT64 local-use range;
+- anything not `http://` or `https://`.
+
+The check runs **on the resolved addresses, after DNS**, for every hop of a
+redirect chain, so a public hostname that points at an internal address is
+caught, and so is a `Location:` header that points at one. It also refuses body
+types that would read files on its own disk (`binary`, multipart file
+fields), since no browser tab could legitimately mean those.
+
+Refusal reasons are included in debug logs when enabled. On a public instance
+(`web.yaak.app`, or anything else strangers can reach), private-network protection
+must stay on: the machine's private
+network is the host's, not the user's, so a `localhost` or LAN API is not the
+user's to reach through it — the desktop app is what reaches those. On an
+instance you run for yourself, that reasoning is inverted, and
+`--allow-private-networks` inverts the policy with it. It allows every range
+above, including `169.254.169.254`, so use it only where the network on the
+other side is one the users are entitled to.
+
+There is no authentication either way: an instance is anonymous, protected by
+the per-client rate limit and the destination policy. Anything more (a shared
+token, per-user quotas) is a later slice and would sit in front of `send_http`
+in `lib.rs`, or in middleware on the exported router. Put TLS in front of a public instance.
+
+## The wire
+
+`POST /v1/http/send` with a JSON body:
+
+```json
+{
+  "request":  { "url": "https://…", "method": "GET", "headers": […], "body": {…}, "bodyType": null, "urlParameters": […] },
+  "settings": { "validateCertificates": true, "followRedirects": true, "timeoutMs": 0, "sendCookies": true, "storeCookies": true },
+  "cookies":  [ … ]
+}
+```
+
+`request` is a Yaak `HttpRequest` in the desktop's own model shape with every
+template already rendered by the tab; the server builds the URL, headers and
+body from it exactly the way the desktop does after rendering. `cookies` is the
+jar's contents (or `null` for no jar).
+
+The reply is `application/x-ndjson`, one JSON frame per line, in the order things
+happened:
+
+| `type`     | When                                      | Carries                                                                            |
+| ---------- | ----------------------------------------- | ---------------------------------------------------------------------------------- |
+| `event`    | as the engine produces them               | one timeline event, in the desktop's `http_response_event.event` shape             |
+| `response` | once, when the final hop's headers arrive | status, all headers, request headers as sent, remote address, HTTP version, timing |
+| `body`     | as the body is read                       | a decompressed chunk, base64                                                       |
+| `done`     | last, on success                          | elapsed, byte counts, and the cookie jar as the send left it                       |
+| `error`    | last, on failure                          | the reason, and any cookies collected before the failure                           |
+
+Refusals that happen before anything is sent (a blocked destination, a bad body,
+rate limit, capacity) are plain HTTP errors (`403`, `400`, `429`, `503`) with
+`{"error": "…"}`, not streams.
+
+Why a streamed HTTP response and not a WebSocket: one `POST` is stateless by
+construction, cancellable by closing the connection, readable with `curl`, and
+needs no upgrade handling on either side. A WebSocket only earns its keep when
+traffic is bidirectional, which a single send is not.
+
+The TypeScript side of this contract is generated from `src/wire.rs` by ts-rs
+into `bindings/` (run `cargo test -p yaak-web` after changing a frame)
+and published to the tab as `@yaakapp-internal/web`, so a change to the
+wire on one side is a type error on the other.
+
+`GET /v1/health` reports the version and the effective limits.
+
+## What comes later
+
+Not built, by design, but the router is shaped for it: a WebSocket relay
+(`/v1/ws/relay`) and a gRPC relay (`/v1/grpc/relay`) would be long-lived,
+bidirectional endpoints on the same binary, behind the same destination policy
+and limits. They differ from this endpoint in holding per-connection
+in-memory state while a connection is open (never persisted), which brings
+connection limits and a larger abuse surface — the reason they are separate
+work.
diff --git a/crates-server/yaak-web/bindings/gen_models.ts b/crates-server/yaak-web/bindings/gen_models.ts
new file mode 100644
index 0000000..4e1936d
--- /dev/null
+++ b/crates-server/yaak-web/bindings/gen_models.ts
@@ -0,0 +1,135 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Cookie = {
+  name: string;
+  value: string;
+  domain: CookieDomain;
+  expires: CookieExpires;
+  path: string;
+  secure: boolean;
+  httpOnly: boolean;
+  sameSite: CookieSameSite | null;
+};
+
+export type CookieDomain = { HostOnly: string } | { Suffix: string } | "NotPresent" | "Empty";
+
+export type CookieExpires = { AtUtc: string } | "SessionEnd";
+
+export type CookieSameSite = "Strict" | "Lax" | "None";
+
+export type HttpRequest = {
+  model: "http_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  body: Record<string, any>;
+  bodyType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  method: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type HttpRequestHeader = { enabled?: boolean; name: string; value: string; id?: string };
+
+/**
+ * Serializable representation of HTTP response events for DB storage.
+ * This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
+ * The `From` impl is in yaak-http to avoid circular dependencies.
+ */
+export type HttpResponseEventData =
+  | {
+      type: "setting";
+      name: string;
+      value: string;
+      source_model?: string;
+      source_id?: string;
+      source_name?: string;
+    }
+  | { type: "info"; message: string }
+  | {
+      type: "redirect";
+      url: string;
+      status: number;
+      behavior: string;
+      dropped_body: boolean;
+      dropped_headers: Array<string>;
+    }
+  | {
+      type: "send_url";
+      method: string;
+      scheme: string;
+      username: string;
+      password: string;
+      host: string;
+      port: number;
+      path: string;
+      query: string;
+      fragment: string;
+    }
+  | { type: "receive_url"; version: string; status: string }
+  | { type: "header_up"; name: string; value: string }
+  | { type: "header_down"; name: string; value: string }
+  | { type: "chunk_sent"; bytes: number }
+  | { type: "chunk_received"; bytes: number }
+  | {
+      type: "dns_resolved";
+      hostname: string;
+      addresses: Array<string>;
+      duration: bigint;
+      overridden: boolean;
+    };
+
+export type HttpResponseHeader = { name: string; value: string };
+
+/**
+ * The resolved send settings, values only: what an executor has to obey, with the sources
+ * (which model each came from) left behind in [`ResolvedHttpRequestSettings`]. This is what
+ * crosses from a tab to the Yaak server, and what the server reads.
+ */
+export type HttpSendSettings = {
+  validateCertificates: boolean;
+  followRedirects: boolean;
+  /**
+   * Milliseconds. Zero or negative means no timeout.
+   */
+  timeoutMs: number;
+  sendCookies: boolean;
+  storeCookies: boolean;
+  httpVersion: HttpVersion;
+};
+
+export type HttpUrlParameter = {
+  enabled?: boolean;
+  /**
+   * Colon-prefixed parameters are treated as path parameters if they match, like `/users/:id`
+   * Other entries are appended as query parameters
+   */
+  name: string;
+  value: string;
+  id?: string;
+};
+
+export type HttpVersion = "auto" | "http1" | "http2";
+
+export type InheritedBoolSetting = { enabled?: boolean; value: boolean };
+
+export type InheritedHttpVersionSetting = { enabled?: boolean; value: HttpVersion };
+
+export type InheritedIntSetting = { enabled?: boolean; value: number };
diff --git a/crates-server/yaak-web/bindings/gen_web.ts b/crates-server/yaak-web/bindings/gen_web.ts
new file mode 100644
index 0000000..4361472
--- /dev/null
+++ b/crates-server/yaak-web/bindings/gen_web.ts
@@ -0,0 +1,64 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Cookie, HttpRequest, HttpResponseEventData, HttpResponseHeader, HttpSendSettings } from "./gen_models";
+
+/**
+ * One line of the reply stream. Tags are snake_case like the timeline event tags; fields are
+ * camelCase like every model the tab stores.
+ */
+export type Frame = { "type": "event", event: HttpResponseEventData, } | { "type": "response", status: number, statusReason: string | null, 
+/**
+ * The URL that answered, after redirects.
+ */
+url: string, remoteAddr: string | null, version: string | null, headers: Array<HttpResponseHeader>, 
+/**
+ * The headers that were actually sent on the final hop, cookies and all.
+ */
+requestHeaders: Array<HttpResponseHeader>, 
+/**
+ * `Content-Length` as declared by the server, if it declared one.
+ */
+contentLength: number | null, 
+/**
+ * Milliseconds from the start of the send to the response head.
+ */
+elapsedHeaders: number, 
+/**
+ * Milliseconds spent in DNS on the last lookup, or zero.
+ */
+elapsedDns: number, } | { "type": "body", data: string, } | { "type": "done", 
+/**
+ * Milliseconds from the start of the send to the end of the body.
+ */
+elapsed: number, 
+/**
+ * Bytes of body relayed, after decompression.
+ */
+contentLength: number, 
+/**
+ * Bytes on the wire as declared by the server, or the relayed size when unknown.
+ */
+contentLengthCompressed: number, 
+/**
+ * The jar as the send left it, for the tab to persist. `None` when the tab sent none.
+ */
+cookies: Array<Cookie> | null, } | { "type": "error", message: string, cookies: Array<Cookie> | null, };
+
+/**
+ * The body of `POST /v1/http/send`.
+ */
+export type SendRequest = { 
+/**
+ * The request to send, in the desktop's own model shape but with every template already
+ * rendered by the tab. The server builds the URL, headers and body from it exactly the way
+ * the desktop does after rendering.
+ */
+request: HttpRequest, 
+/**
+ * The resolved settings, values only. Where they came from is the tab's to record in
+ * its timeline; the server only needs to obey them.
+ */
+settings: HttpSendSettings, 
+/**
+ * The cookies to start with. `None` means no jar at all: nothing sent, nothing kept.
+ */
+cookies: Array<Cookie> | null, };
diff --git a/crates-server/yaak-web/index.ts b/crates-server/yaak-web/index.ts
new file mode 100644
index 0000000..62ebb54
--- /dev/null
+++ b/crates-server/yaak-web/index.ts
@@ -0,0 +1,4 @@
+// The server's wire contract, generated by ts-rs from src/wire.rs
+// (`cargo test -p yaak-web`). The tab imports these so a change to a
+// frame on the Rust side is a type error in packages/platform/src/web.
+export type { Frame, SendRequest } from "./bindings/gen_web";
diff --git a/crates-server/yaak-web/package.json b/crates-server/yaak-web/package.json
new file mode 100644
index 0000000..60cadb8
--- /dev/null
+++ b/crates-server/yaak-web/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/web",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates-server/yaak-web/src/config.rs b/crates-server/yaak-web/src/config.rs
new file mode 100644
index 0000000..b53fb15
--- /dev/null
+++ b/crates-server/yaak-web/src/config.rs
@@ -0,0 +1,98 @@
+use clap::Parser;
+use std::net::{SocketAddr, ToSocketAddrs};
+use std::path::PathBuf;
+
+/// The server behind Yaak running in a browser.
+///
+/// The tab renders the request and owns the data; this binary puts the bytes on the network
+/// and streams back what came back, and with `--serve` hands the browser the app as well.
+/// Nothing is written to disk or a database.
+#[derive(Parser, Debug, Clone)]
+#[command(name = "yaak-web", version, about, long_about = None)]
+pub struct Config {
+    /// Interface to listen on. 127.0.0.1 for a local instance; 0.0.0.0 inside a container,
+    /// which is what makes the port reachable from outside it.
+    #[arg(long, env = "HOST", default_value = "127.0.0.1")]
+    pub host: String,
+
+    /// Port to listen on. Named `PORT` because that is the variable a platform-as-a-service
+    /// assigns and expects to be obeyed, so the same image runs there and under `docker run`
+    /// with nothing changed.
+    #[arg(long, env = "PORT", default_value_t = 9227)]
+    pub port: u16,
+
+    /// Port the app is served on elsewhere. A browser that opens this server directly is
+    /// redirected there, keeping whatever hostname it used — so `home:9227` becomes
+    /// `home:1424` without this server knowing what "home" is.
+    ///
+    /// Set by `vp run web:dev`, where the app is on the dev server and this is only the
+    /// executor behind it. Irrelevant with `--serve`, which puts both on one port.
+    #[arg(long, env = "YAAK_WEB_APP_PORT")]
+    pub app_port: Option<u16>,
+
+    /// Also serve a built web client from this directory, on the same origin as the API.
+    /// Unknown paths fall back to `index.html` so the app's own routes work on a refresh.
+    /// Without this the binary is only the send executor.
+    #[arg(long, env = "YAAK_WEB_SERVE", value_name = "DIR")]
+    pub serve: Option<PathBuf>,
+
+    /// Allow sends to loopback, private and link-local addresses. Off by default, because a
+    /// server reachable by strangers is an open relay into the network it sits on. Turn it on
+    /// only for an instance whose users are meant to reach that network — a self-hosted one
+    /// on a LAN, where the point is to call the API on the next machine.
+    #[arg(long, env = "YAAK_WEB_ALLOW_PRIVATE_NETWORKS", default_value_t = false)]
+    pub allow_private_networks: bool,
+
+    /// Browser origins allowed to call this server (CORS), comma-separated. `*` allows any.
+    /// A local dev instance wants the Vite origin; a hosted instance wants its own web origin.
+    #[arg(
+        long,
+        env = "YAAK_WEB_ALLOWED_ORIGINS",
+        default_value = "*",
+        value_delimiter = ','
+    )]
+    pub allowed_origins: Vec<String>,
+
+    /// Largest request the server accepts from the tab (the rendered request JSON, body included).
+    #[arg(long, env = "YAAK_WEB_MAX_REQUEST_BYTES", default_value_t = 16 * 1024 * 1024)]
+    pub max_request_bytes: usize,
+
+    /// Largest upstream response body the server will relay before cutting the send off.
+    #[arg(long, env = "YAAK_WEB_MAX_RESPONSE_BYTES", default_value_t = 64 * 1024 * 1024)]
+    pub max_response_bytes: usize,
+
+    /// Ceiling on a send's timeout, in seconds. A request asking for longer (or for no timeout)
+    /// gets this instead.
+    #[arg(long, env = "YAAK_WEB_MAX_TIMEOUT_SECS", default_value_t = 60)]
+    pub max_timeout_secs: u64,
+
+    /// Sends allowed per client IP per minute. 0 disables the limit. This and the concurrency
+    /// cap are the whole of what protects an instance: there is no authentication.
+    #[arg(long, env = "YAAK_WEB_RATE_LIMIT_PER_MINUTE", default_value_t = 120)]
+    pub rate_limit_per_minute: u32,
+
+    /// Sends in flight at once across all clients.
+    #[arg(long, env = "YAAK_WEB_MAX_CONCURRENT", default_value_t = 256)]
+    pub max_concurrent: usize,
+
+    /// Take the client IP from `X-Forwarded-For` (first hop) instead of the socket. Only turn
+    /// this on behind a load balancer that sets the header; otherwise anyone can spoof their way
+    /// past the rate limit.
+    #[arg(long, env = "YAAK_WEB_TRUST_FORWARDED_FOR", default_value_t = false)]
+    pub trust_forwarded_for: bool,
+}
+
+impl Config {
+    /// The address to listen on.
+    ///
+    /// Resolved rather than parsed, so `HOST` may be a name — `localhost` is the one people
+    /// actually type, and it is not an `IpAddr`. The first address wins; a host resolving to
+    /// several is a machine with several interfaces, and any of them is a listen address.
+    pub fn listen_addr(&self) -> Result<SocketAddr, String> {
+        (self.host.as_str(), self.port)
+            .to_socket_addrs()
+            .map_err(|e| format!("Invalid HOST {:?}: {e}", self.host))?
+            .next()
+            .ok_or_else(|| format!("HOST {:?} resolved to no address", self.host))
+    }
+}
diff --git a/crates-server/yaak-web/src/guard.rs b/crates-server/yaak-web/src/guard.rs
new file mode 100644
index 0000000..3055ce8
--- /dev/null
+++ b/crates-server/yaak-web/src/guard.rs
@@ -0,0 +1,271 @@
+//! Where a send may go.
+//!
+//! A hosted sender is, by construction, a machine that makes HTTP requests on
+//! behalf of strangers. Left alone that is an open relay into whatever network
+//! it sits on: cloud metadata endpoints, internal admin panels, the database
+//! next door. So every destination is checked twice — once on the URL before a
+//! hop is attempted (literal IPs, host allow/deny lists) and once on the
+//! addresses a hostname actually resolves to, right before the connection is
+//! made. The second check is the one that matters for a hostname pointing at
+//! an internal address, and it runs on every redirect hop because the engine
+//! resolves every hop.
+
+use async_trait::async_trait;
+use log::debug;
+use std::net::{IpAddr, Ipv4Addr, Ipv6Addr};
+use std::sync::Arc;
+use tokio::sync::mpsc;
+use url::Url;
+use yaak_http::dns::AddressFilter;
+use yaak_http::sender::{HttpResponse, HttpResponseEvent, HttpSender};
+use yaak_http::types::SendableHttpRequest;
+
+/// The destination policy, shared by every send: public addresses only, unless the operator
+/// has said otherwise. A hosted server's "private network" is the cloud's, not the user's, so
+/// the default is public-only; a self-hosted instance on a LAN can be told that its private
+/// network *is* the user's, which is what `--allow-private-networks` means.
+#[derive(Clone, Default)]
+pub struct DestinationPolicy {
+    allow_private: bool,
+}
+
+impl DestinationPolicy {
+    pub fn new(allow_private: bool) -> Self {
+        Self { allow_private }
+    }
+
+    /// Check a URL before a hop is attempted: scheme and literal IPs. A hostname that passes
+    /// here still has its resolved addresses checked by [`Self::address_filter`].
+    pub fn check_url(&self, raw: &str) -> Result<(), String> {
+        let url = Url::parse(raw).map_err(|e| format!("Invalid URL {raw:?}: {e}"))?;
+        match url.scheme() {
+            "http" | "https" => {}
+            other => return Err(format!("Refusing to send over {other:?}; only http and https")),
+        }
+        let host = url.host_str().ok_or_else(|| format!("URL {raw:?} has no host"))?;
+        let host = host.trim_matches(|c| c == '[' || c == ']');
+
+        // A literal IP never reaches the resolver, so it is checked here. Hostnames are checked
+        // where their addresses become known.
+        if let Ok(ip) = host.parse::<IpAddr>() {
+            self.check_ip(ip)?;
+        }
+        Ok(())
+    }
+
+    /// The veto the engine's resolver applies to every address a hostname resolves to.
+    pub fn address_filter(&self) -> AddressFilter {
+        let policy = self.clone();
+        Arc::new(move |ip| policy.check_ip(ip))
+    }
+
+    pub fn check_ip(&self, ip: IpAddr) -> Result<(), String> {
+        if self.allow_private {
+            return Ok(());
+        }
+        match non_public_reason(ip) {
+            Some(reason) => Err(format!(
+                "Refusing to connect to {ip}: {reason}. This server only sends to public addresses"
+            )),
+            None => Ok(()),
+        }
+    }
+}
+
+/// Why an address is not a public internet address, or `None` if it is one.
+///
+/// Every range here is one a hosted relay must never be talked into reaching: the machine
+/// itself, the network it sits on, and the link-local range where cloud metadata services
+/// (169.254.169.254) live. IPv4 addresses carried inside fixed-layout IPv6 forms — IPv4-mapped,
+/// the well-known NAT64 prefix, 6to4 — are unwrapped and judged as IPv4, since that is where
+/// the packets end up; the NAT64 local-use range is refused outright. This is the stable-Rust
+/// stand-in for `IpAddr::is_global`, which is still behind `#![feature(ip)]`; a network-specific
+/// NAT64 prefix is not knowable here.
+pub fn non_public_reason(ip: IpAddr) -> Option<&'static str> {
+    match ip {
+        IpAddr::V4(v4) => non_public_v4(v4),
+        IpAddr::V6(v6) => {
+            if let Some(v4) = v6.to_ipv4_mapped() {
+                return non_public_v4(v4);
+            }
+            if let Some(v4) = embedded_v4(&v6) {
+                return non_public_v4(v4);
+            }
+            if v6.is_loopback() {
+                Some("loopback")
+            } else if v6.is_unspecified() {
+                Some("unspecified")
+            } else if v6.is_unique_local() {
+                Some("unique local (fc00::/7)")
+            } else if v6.is_unicast_link_local() {
+                Some("link-local (fe80::/10)")
+            } else if v6.is_multicast() {
+                Some("multicast")
+            } else if v6.segments()[..3] == [0x64, 0xff9b, 1] {
+                Some("NAT64 local-use (64:ff9b:1::/48)")
+            } else if v6.segments()[..4] == [0x100, 0, 0, 0] {
+                Some("discard-only (100::/64)")
+            } else if (v6.segments()[0] & 0xffc0) == 0xfec0 {
+                Some("site-local (fec0::/10)")
+            } else if v6.segments()[0] == 0x2001 && v6.segments()[1] == 0x0db8 {
+                Some("documentation (2001:db8::/32)")
+            } else {
+                None
+            }
+        }
+    }
+}
+
+fn non_public_v4(v4: Ipv4Addr) -> Option<&'static str> {
+    let o = v4.octets();
+    if v4.is_loopback() {
+        Some("loopback (127.0.0.0/8)")
+    } else if v4.is_private() {
+        Some("private (10/8, 172.16/12, 192.168/16)")
+    } else if v4.is_link_local() {
+        Some("link-local (169.254.0.0/16, where cloud metadata lives)")
+    } else if v4.is_unspecified() || o[0] == 0 {
+        Some("this network (0.0.0.0/8)")
+    } else if o[0] == 100 && (o[1] & 0xc0) == 64 {
+        Some("carrier-grade NAT (100.64.0.0/10)")
+    } else if v4.is_broadcast() {
+        Some("broadcast")
+    } else if v4.is_multicast() {
+        Some("multicast (224.0.0.0/4)")
+    } else if o[0] >= 240 {
+        Some("reserved (240.0.0.0/4)")
+    } else if v4.is_documentation() {
+        Some("documentation")
+    } else if o[0] == 192 && o[1] == 0 && o[2] == 0 {
+        Some("IETF protocol assignments (192.0.0.0/24)")
+    } else if o[0] == 198 && (o[1] & 0xfe) == 18 {
+        Some("benchmarking (198.18.0.0/15)")
+    } else {
+        None
+    }
+}
+
+/// The IPv4 address an IPv6 address stands for, when it is one of the fixed-layout translation
+/// forms: the NAT64 well-known prefix (64:ff9b::/96) or 6to4 (2002::/16, IPv4 in the next 32
+/// bits). The NAT64 local-use range (64:ff9b:1::/48) is a pool operators carve their own
+/// prefix from, at a length only they know, so it is refused wholesale in [`non_public_reason`]
+/// rather than decoded — the same call `std`'s (still unstable) `Ipv6Addr::is_global` makes.
+fn embedded_v4(v6: &Ipv6Addr) -> Option<Ipv4Addr> {
+    let s = v6.segments();
+    let o = v6.octets();
+    if s[0] == 0x64 && s[1] == 0xff9b && s[2..6].iter().all(|x| *x == 0) {
+        return Some(Ipv4Addr::new(o[12], o[13], o[14], o[15]));
+    }
+    if s[0] == 0x2002 {
+        return Some(Ipv4Addr::new(o[2], o[3], o[4], o[5]));
+    }
+    None
+}
+
+/// An [`HttpSender`] that checks each hop's URL against the policy before delegating.
+///
+/// The engine's redirect loop calls the sender once per hop with the hop's URL, so wrapping
+/// the sender is what makes `Location:` headers subject to the same rules as the first URL —
+/// including a redirect to a literal internal IP, which the resolver would never see.
+pub struct GuardedSender<S> {
+    inner: S,
+    policy: DestinationPolicy,
+}
+
+impl<S: HttpSender> GuardedSender<S> {
+    pub fn new(inner: S, policy: DestinationPolicy) -> Self {
+        Self { inner, policy }
+    }
+}
+
+#[async_trait]
+impl<S: HttpSender> HttpSender for GuardedSender<S> {
+    async fn send(
+        &self,
+        request: SendableHttpRequest,
+        event_tx: mpsc::Sender<HttpResponseEvent>,
+    ) -> yaak_http::error::Result<HttpResponse> {
+        if let Err(reason) = self.policy.check_url(&request.url) {
+            debug!("Refused {} {}: {reason}", request.method, request.url);
+            return Err(yaak_http::error::Error::RequestError(reason));
+        }
+        self.inner.send(request, event_tx).await
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn ip(s: &str) -> IpAddr {
+        s.parse().unwrap()
+    }
+
+    #[test]
+    fn refuses_the_ranges_a_relay_must_never_reach() {
+        for addr in [
+            "127.0.0.1",
+            "127.9.9.9",
+            "10.0.0.1",
+            "172.16.0.1",
+            "172.31.255.255",
+            "192.168.1.1",
+            "169.254.169.254",
+            "169.254.0.1",
+            "0.0.0.0",
+            "100.64.0.1",
+            "255.255.255.255",
+            "224.0.0.1",
+            "240.0.0.1",
+            "::1",
+            "::",
+            "fc00::1",
+            "fd12::1",
+            "fe80::1",
+            "::ffff:127.0.0.1",
+            "::ffff:169.254.169.254",
+            "64:ff9b::7f00:1",
+            "ff02::1",
+        ] {
+            assert!(non_public_reason(ip(addr)).is_some(), "{addr} should be refused");
+        }
+    }
+
+    #[test]
+    fn allows_public_addresses() {
+        for addr in [
+            "1.1.1.1",
+            "8.8.8.8",
+            "93.184.216.34",
+            "172.32.0.1",
+            "2606:4700:4700::1111",
+        ] {
+            assert!(non_public_reason(ip(addr)).is_none(), "{addr} should be allowed");
+        }
+    }
+
+    #[test]
+    fn literal_private_addresses_in_urls_are_refused() {
+        let policy = DestinationPolicy::new(false);
+        assert!(policy.check_url("http://127.0.0.1/").is_err());
+        assert!(policy.check_url("http://[::1]/").is_err());
+        assert!(policy.check_url("http://169.254.169.254/latest/meta-data").is_err());
+    }
+
+    #[test]
+    fn allow_private_networks_opens_the_local_ranges_but_not_other_schemes() {
+        let policy = DestinationPolicy::new(true);
+        assert!(policy.check_url("http://127.0.0.1/").is_ok());
+        assert!(policy.check_ip(ip("10.0.0.1")).is_ok());
+        assert!(policy.check_ip(ip("169.254.169.254")).is_ok());
+        assert!(policy.check_url("file:///etc/passwd").is_err());
+    }
+
+    #[test]
+    fn only_http_schemes() {
+        let policy = DestinationPolicy::new(false);
+        assert!(policy.check_url("ftp://example.com/").is_err());
+        assert!(policy.check_url("file:///etc/passwd").is_err());
+        assert!(policy.check_url("https://example.com/").is_ok());
+    }
+}
diff --git a/crates-server/yaak-web/src/lib.rs b/crates-server/yaak-web/src/lib.rs
new file mode 100644
index 0000000..a1f5058
--- /dev/null
+++ b/crates-server/yaak-web/src/lib.rs
@@ -0,0 +1,295 @@
+//! yaak-web: the network half of Yaak in a browser.
+//!
+//! A tab can't see a response the way a desktop app can — CORS hides most
+//! headers, redirects are followed silently, there is no timeline. So the tab
+//! renders the request and hands it here; this process puts it on the network
+//! with the desktop's own engine and streams back everything that happened,
+//! for the tab to store. It keeps nothing: no database, no files, no session.
+//!
+//! Embed [`router`] in your own Axum server, or run the `yaak-web` binary
+//! configured by flags or `YAAK_WEB_*` environment variables.
+//! See README.md for running and deploying it, and `guard.rs` for what it
+//! refuses to talk to.
+
+mod config;
+mod guard;
+mod limits;
+mod send;
+mod wire;
+
+use axum::Router;
+use axum::body::Body;
+use axum::extract::{ConnectInfo, DefaultBodyLimit, Request, State};
+use axum::http::{HeaderMap, HeaderValue, Method, StatusCode, header};
+use axum::middleware::{self, Next};
+use axum::response::{IntoResponse, Json, Redirect, Response};
+use axum::routing::{get, post};
+pub use config::Config;
+use guard::DestinationPolicy;
+use limits::RateLimiter;
+use log::{debug, info, warn};
+use send::{Refusal, SendLimits};
+use serde_json::json;
+use std::net::{IpAddr, SocketAddr};
+use std::path::Path;
+use std::sync::Arc;
+use std::time::{Duration, Instant};
+use tokio::sync::Semaphore;
+use tower_http::compression::CompressionLayer;
+use tower_http::cors::{AllowOrigin, CorsLayer};
+use tower_http::services::{ServeDir, ServeFile};
+use wire::SendRequest;
+
+/// Minimal operational logging; request diagnostics require an explicit `RUST_LOG` setting.
+pub const DEFAULT_LOG_FILTER: &str = "warn,yaak_http=error,yaak_web::startup=info";
+
+#[derive(Clone)]
+struct AppState {
+    config: Arc<Config>,
+    limits: Arc<SendLimits>,
+    rate_limiter: Arc<RateLimiter>,
+    in_flight: Arc<Semaphore>,
+}
+
+/// Build the API router and, when configured, the web client's static-file fallback.
+///
+/// The returned router owns its state and accepts normal Axum middleware via `.layer()`.
+/// Construction does not parse arguments, initialize logging, bind a socket, or install
+/// shutdown handlers. `config.host` and `config.port` are used only by the standalone binary.
+///
+/// Serve with `into_make_service_with_connect_info::<SocketAddr>()` so the send endpoint
+/// can extract the peer address for rate limiting.
+pub fn router(config: Config) -> Router {
+    let policy = DestinationPolicy::new(config.allow_private_networks);
+    if config.allow_private_networks {
+        warn!(
+            "Sends to loopback, private and link-local addresses are ALLOWED. Only run this way \
+             on an instance strangers cannot reach"
+        );
+    }
+    let state = AppState {
+        limits: Arc::new(SendLimits {
+            policy,
+            max_response_bytes: config.max_response_bytes,
+            max_timeout: Duration::from_secs(config.max_timeout_secs),
+        }),
+        rate_limiter: Arc::new(RateLimiter::new(config.rate_limit_per_minute)),
+        in_flight: Arc::new(Semaphore::new(config.max_concurrent)),
+        config: Arc::new(config),
+    };
+
+    let cors = CorsLayer::new()
+        .allow_methods([Method::GET, Method::POST, Method::OPTIONS])
+        .allow_headers([header::CONTENT_TYPE])
+        .allow_origin(allowed_origins(&state.config.allowed_origins));
+
+    let api = Router::new()
+        .route("/v1/health", get(health))
+        // A WebSocket or gRPC relay would sit beside this as `/v1/ws/relay` and `/v1/grpc/relay`
+        // on the same router, behind the same policy, limits and auth. Not built; see README.
+        .route("/v1/http/send", post(send_http))
+        .layer(DefaultBodyLimit::max(state.config.max_request_bytes))
+        .layer(cors)
+        .with_state(state.clone());
+
+    match &state.config.serve {
+        Some(dir) => {
+            info!("Serving the web client from {}", dir.display());
+            api.merge(web_router(dir))
+        }
+        // Without `--serve` there is no app here, only `/v1`. Someone who opens this
+        // port in a browser guessed wrong about which of the two dev servers hosts the
+        // app, so send them to the right one when we have been told where it is.
+        None => {
+            let app_port = state.config.app_port;
+            api.fallback(move |headers: HeaderMap| async move { no_app_here(app_port, headers) })
+        }
+    }
+}
+
+/// The built web client, served on the same origin as the API.
+///
+/// This is what makes a single container zero-configuration: the tab's send URL is a path on
+/// the page's own origin, so there is no CORS, no second service and no URL to bake in. It is
+/// only a file server — a send behaves exactly as it does without this flag.
+///
+/// Merged as a fallback, so the `/v1` routes are matched first and a request that matches no
+/// file at all gets `index.html` (the app routes client-side; a deep link must survive a
+/// refresh).
+fn web_router(dir: &Path) -> Router {
+    let index = ServeFile::new(dir.join("index.html"));
+    Router::new()
+        // `fallback`, not `not_found_service`: the app's own routes are real pages, so
+        // index.html is served with the 200 the browser expects, not a 404 carrying HTML.
+        .fallback_service(ServeDir::new(dir).fallback(index))
+        .layer(middleware::from_fn(cache_control))
+        .layer(CompressionLayer::new())
+}
+
+/// Vite gives everything in `/assets` a content-hashed name, so those can be cached forever.
+/// Everything else — `index.html` above all, including the copy served for an unknown path —
+/// must be revalidated, or a browser keeps serving the deploy before last.
+async fn cache_control(req: Request, next: Next) -> Response {
+    let hashed_name = req.uri().path().starts_with("/assets/");
+    let mut res = next.run(req).await;
+    if !res.status().is_success() {
+        return res;
+    }
+    let is_html = res
+        .headers()
+        .get(header::CONTENT_TYPE)
+        .and_then(|v| v.to_str().ok())
+        .is_some_and(|v| v.starts_with("text/html"));
+    let value =
+        if hashed_name && !is_html { "public, max-age=31536000, immutable" } else { "no-cache" };
+    res.headers_mut().insert(header::CACHE_CONTROL, HeaderValue::from_static(value));
+    res
+}
+
+/// The name in a `Host` header, without the port this server is reached on.
+///
+/// An IPv6 literal keeps its brackets and its own colons: the last colon only separates a
+/// port when what follows it isn't part of the address, which is what the `]` test decides.
+fn host_without_port(host: &str) -> &str {
+    match host.rfind(':') {
+        Some(i) if !host[i..].contains(']') => &host[..i],
+        _ => host,
+    }
+}
+
+/// What the send executor does with a browser that came looking for the app.
+///
+/// With an app port configured this is a redirect, built from the `Host` header so the
+/// hostname the browser already used is the one it keeps — this server has no idea which of
+/// its addresses someone typed, and does not need to.
+fn no_app_here(app_port: Option<u16>, headers: HeaderMap) -> Response {
+    if let Some(port) = app_port
+        && let Some(host) = headers.get(header::HOST).and_then(|v| v.to_str().ok())
+    {
+        return Redirect::temporary(&format!("http://{}:{port}/", host_without_port(host)))
+            .into_response();
+    }
+
+    (
+        StatusCode::NOT_FOUND,
+        [(header::CONTENT_TYPE, "text/plain; charset=utf-8")],
+        "This is the Yaak send executor. It serves the API under /v1 and no app.\n\n\
+         To serve the app from here too, restart with --serve <DIR> pointing at a built\n\
+         web client.\n",
+    )
+        .into_response()
+}
+
+fn allowed_origins(origins: &[String]) -> AllowOrigin {
+    if origins.iter().any(|o| o.trim() == "*") {
+        return AllowOrigin::any();
+    }
+    let parsed: Vec<HeaderValue> =
+        origins.iter().filter_map(|o| HeaderValue::from_str(o.trim()).ok()).collect();
+    AllowOrigin::list(parsed)
+}
+
+async fn health(State(state): State<AppState>) -> impl IntoResponse {
+    Json(json!({
+        "ok": true,
+        "version": env!("CARGO_PKG_VERSION"),
+        "maxResponseBytes": state.config.max_response_bytes,
+        "maxTimeoutSecs": state.config.max_timeout_secs,
+    }))
+}
+
+fn error_response(status: StatusCode, message: impl Into<String>) -> Response {
+    let message = message.into();
+    (status, Json(json!({ "error": message }))).into_response()
+}
+
+/// The client's address for rate limiting: the socket peer, or the first `X-Forwarded-For`
+/// hop when the operator has said the header can be trusted.
+fn client_ip(config: &Config, headers: &HeaderMap, peer: SocketAddr) -> IpAddr {
+    if config.trust_forwarded_for
+        && let Some(forwarded) = headers.get("x-forwarded-for").and_then(|v| v.to_str().ok())
+        && let Some(first) = forwarded.split(',').next()
+        && let Ok(ip) = first.trim().parse::<IpAddr>()
+    {
+        return ip;
+    }
+    peer.ip()
+}
+
+async fn send_http(
+    State(state): State<AppState>,
+    ConnectInfo(peer): ConnectInfo<SocketAddr>,
+    headers: HeaderMap,
+    Json(body): Json<SendRequest>,
+) -> Response {
+    let ip = client_ip(&state.config, &headers, peer);
+    if let Err(wait) = state.rate_limiter.check(ip) {
+        debug!("Rate limited {ip}");
+        let mut res = error_response(
+            StatusCode::TOO_MANY_REQUESTS,
+            format!("Rate limit reached; try again in {}s", wait.as_secs().max(1)),
+        );
+        res.headers_mut().insert(header::RETRY_AFTER, HeaderValue::from(wait.as_secs().max(1)));
+        return res;
+    }
+
+    let Ok(permit) = state.in_flight.clone().try_acquire_owned() else {
+        debug!("At capacity; refusing {ip}");
+        return error_response(StatusCode::SERVICE_UNAVAILABLE, "This server is at capacity");
+    };
+
+    let prepared = match send::prepare(state.limits.clone(), body).await {
+        Ok(p) => p,
+        Err(Refusal::Unsupported(m)) => return error_response(StatusCode::BAD_REQUEST, m),
+        Err(Refusal::Invalid(m)) => return error_response(StatusCode::BAD_REQUEST, m),
+        Err(Refusal::Destination(m)) => {
+            debug!("Refused send from {ip}: {m}");
+            return error_response(StatusCode::FORBIDDEN, m);
+        }
+    };
+
+    let description = prepared.describe();
+    debug!("{ip} -> {description}");
+    let started = Instant::now();
+
+    let (tx, rx) = tokio::sync::mpsc::channel(send::FRAME_CHANNEL_CAPACITY);
+    tokio::spawn(async move {
+        prepared.run(tx).await;
+        send::log_outcome(&description, started, "finished");
+        drop(permit);
+    });
+
+    let stream = tokio_stream_from(rx);
+    Response::builder()
+        .status(StatusCode::OK)
+        .header(header::CONTENT_TYPE, "application/x-ndjson")
+        .header(header::CACHE_CONTROL, "no-store")
+        // Some reverse proxies buffer streamed responses unless told not to
+        .header("x-accel-buffering", "no")
+        .body(Body::from_stream(stream))
+        .expect("valid response")
+}
+
+fn tokio_stream_from<T: Send + 'static>(
+    mut rx: tokio::sync::mpsc::Receiver<T>,
+) -> impl futures_util::Stream<Item = T> + Send + 'static {
+    futures_util::stream::poll_fn(move |cx| rx.poll_recv(cx))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::host_without_port;
+
+    #[test]
+    fn strips_the_port_and_keeps_the_name() {
+        assert_eq!(host_without_port("home:9227"), "home");
+        assert_eq!(host_without_port("home"), "home");
+        assert_eq!(host_without_port("192.168.1.5:9227"), "192.168.1.5");
+        assert_eq!(host_without_port("192.168.1.5"), "192.168.1.5");
+        // An IPv6 literal is full of colons, and only the one outside the brackets is a port.
+        assert_eq!(host_without_port("[::1]:9227"), "[::1]");
+        assert_eq!(host_without_port("[::1]"), "[::1]");
+        assert_eq!(host_without_port("[2606:4700::1111]:8080"), "[2606:4700::1111]");
+        assert_eq!(host_without_port("[2606:4700::1111]"), "[2606:4700::1111]");
+    }
+}
diff --git a/crates-server/yaak-web/src/limits.rs b/crates-server/yaak-web/src/limits.rs
new file mode 100644
index 0000000..4714001
--- /dev/null
+++ b/crates-server/yaak-web/src/limits.rs
@@ -0,0 +1,90 @@
+//! Per-client rate limiting, kept deliberately small.
+//!
+//! One token bucket per client IP, refilled continuously, in a mutex-guarded
+//! map that is swept of idle entries as it goes. Good enough to keep one
+//! caller from monopolising a hosted instance; not a substitute for whatever
+//! sits in front of it in production.
+
+use std::collections::HashMap;
+use std::net::IpAddr;
+use std::sync::Mutex;
+use std::time::{Duration, Instant};
+
+pub struct RateLimiter {
+    per_minute: u32,
+    buckets: Mutex<HashMap<IpAddr, Bucket>>,
+}
+
+struct Bucket {
+    tokens: f64,
+    last: Instant,
+}
+
+impl RateLimiter {
+    /// `per_minute == 0` disables limiting.
+    pub fn new(per_minute: u32) -> Self {
+        Self { per_minute, buckets: Mutex::new(HashMap::new()) }
+    }
+
+    /// Take one token for `client`, or say how long until one is available.
+    pub fn check(&self, client: IpAddr) -> Result<(), Duration> {
+        if self.per_minute == 0 {
+            return Ok(());
+        }
+        let capacity = self.per_minute as f64;
+        let per_second = capacity / 60.0;
+        let now = Instant::now();
+
+        let mut buckets = self.buckets.lock().unwrap_or_else(|e| e.into_inner());
+
+        // Sweep buckets that have been idle long enough to be full again; there is nothing
+        // to remember about them.
+        if buckets.len() > 1024 {
+            buckets.retain(|_, b| now.duration_since(b.last).as_secs_f64() * per_second < capacity);
+        }
+
+        let bucket = buckets.entry(client).or_insert(Bucket { tokens: capacity, last: now });
+        let elapsed = now.duration_since(bucket.last).as_secs_f64();
+        bucket.tokens = (bucket.tokens + elapsed * per_second).min(capacity);
+        bucket.last = now;
+
+        if bucket.tokens >= 1.0 {
+            bucket.tokens -= 1.0;
+            Ok(())
+        } else {
+            let wait = (1.0 - bucket.tokens) / per_second;
+            Err(Duration::from_secs_f64(wait.max(0.001)))
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn a_full_bucket_then_a_wait() {
+        let limiter = RateLimiter::new(3);
+        let ip: IpAddr = "203.0.113.5".parse().unwrap();
+        assert!(limiter.check(ip).is_ok());
+        assert!(limiter.check(ip).is_ok());
+        assert!(limiter.check(ip).is_ok());
+        let wait = limiter.check(ip).expect_err("fourth call in a burst should wait");
+        assert!(wait > Duration::ZERO && wait <= Duration::from_secs(20));
+    }
+
+    #[test]
+    fn clients_are_independent_and_zero_disables() {
+        let limiter = RateLimiter::new(1);
+        let a: IpAddr = "203.0.113.5".parse().unwrap();
+        let b: IpAddr = "203.0.113.6".parse().unwrap();
+        assert!(limiter.check(a).is_ok());
+        assert!(limiter.check(a).is_err());
+        assert!(limiter.check(b).is_ok());
+
+        let unlimited = RateLimiter::new(0);
+        for _ in 0..1000 {
+            assert!(unlimited.check(a).is_ok());
+        }
+    }
+}
diff --git a/crates-server/yaak-web/src/main.rs b/crates-server/yaak-web/src/main.rs
new file mode 100644
index 0000000..a28d3e2
--- /dev/null
+++ b/crates-server/yaak-web/src/main.rs
@@ -0,0 +1,35 @@
+//! Standalone server for Yaak in a browser.
+
+use clap::Parser;
+use log::info;
+use std::net::SocketAddr;
+use yaak_web::{Config, router};
+
+#[tokio::main]
+async fn main() {
+    env_logger::Builder::from_env(
+        env_logger::Env::default().default_filter_or(yaak_web::DEFAULT_LOG_FILTER),
+    )
+    .init();
+    let config = Config::parse();
+    let bind = config.listen_addr().unwrap_or_else(|e| {
+        eprintln!("{e}");
+        std::process::exit(1);
+    });
+    let rate_limit_per_minute = config.rate_limit_per_minute;
+    let app = router(config);
+
+    let listener = tokio::net::TcpListener::bind(bind).await.unwrap_or_else(|e| {
+        eprintln!("Failed to bind {bind}: {e}");
+        std::process::exit(1);
+    });
+    info!(target: "yaak_web::startup", "yaak-web listening on http://{bind} (rate limit: {}/min)", rate_limit_per_minute,);
+
+    axum::serve(listener, app.into_make_service_with_connect_info::<SocketAddr>())
+        .with_graceful_shutdown(async {
+            let _ = tokio::signal::ctrl_c().await;
+            info!("Shutting down");
+        })
+        .await
+        .expect("server error");
+}
diff --git a/crates-server/yaak-web/src/send.rs b/crates-server/yaak-web/src/send.rs
new file mode 100644
index 0000000..841d229
--- /dev/null
+++ b/crates-server/yaak-web/src/send.rs
@@ -0,0 +1,359 @@
+//! The one thing this binary does: execute a rendered request and stream back what happened.
+//!
+//! This is the "execute" half of the desktop's `send_http_request` — the part after rendering
+//! and before storage — driven through the same `HttpTransaction` the desktop drives, with the
+//! same redirect loop, cookie jar, decompression and timeline events. Everything the desktop
+//! would write to its database is written to the reply stream instead, and the tab stores it.
+
+use crate::guard::{DestinationPolicy, GuardedSender};
+use crate::wire::{Frame, SendRequest};
+use base64::Engine;
+use bytes::Bytes;
+use log::{debug, warn};
+use std::convert::Infallible;
+use std::sync::Arc;
+use std::sync::atomic::{AtomicU64, Ordering};
+use std::time::{Duration, Instant};
+use tokio::io::AsyncReadExt;
+use tokio::sync::{mpsc, watch};
+use yaak_http::client::{HttpConnectionOptions, HttpConnectionProxySetting};
+use yaak_http::cookies::CookieStore;
+use yaak_http::sender::{HttpResponseEvent, ReqwestSender};
+use yaak_http::transaction::HttpTransaction;
+use yaak_http::types::{SendableHttpRequest, SendableHttpRequestOptions};
+use yaak_models::models::HttpResponseHeader;
+
+/// How many frames may sit unread by the client before body reading pauses. Backpressure, so a
+/// slow tab slows the upstream read rather than filling memory.
+pub const FRAME_CHANNEL_CAPACITY: usize = 64;
+const EVENT_CHANNEL_CAPACITY: usize = 256;
+const BODY_READ_CHUNK: usize = 64 * 1024;
+
+/// What a send needs from the process, beyond the request itself.
+pub struct SendLimits {
+    pub policy: DestinationPolicy,
+    pub max_response_bytes: usize,
+    pub max_timeout: Duration,
+}
+
+/// Why a send was refused before anything was put on the network. Distinct from a failure
+/// mid-stream: these become a plain HTTP error, not a stream with an error frame.
+#[derive(Debug)]
+pub enum Refusal {
+    /// The request asks for something a browser-originated send cannot mean.
+    Unsupported(String),
+    /// The destination is not one this server will talk to.
+    Destination(String),
+    /// The request could not be turned into something sendable.
+    Invalid(String),
+}
+
+pub type FrameSender = mpsc::Sender<Result<Bytes, Infallible>>;
+
+/// Check and prepare a send, then hand back the task that runs it. Refusals happen here, before
+/// the caller has committed to a streaming response.
+pub async fn prepare(limits: Arc<SendLimits>, send: SendRequest) -> Result<PreparedSend, Refusal> {
+    let request = send.request;
+
+    // The engine reads files for these body types. There are no files here that a browser tab
+    // could legitimately mean, and letting a request name a path on this machine would be a
+    // local file read for anyone who can reach the server.
+    if request.body_type.as_deref() == Some("binary") {
+        return Err(Refusal::Unsupported(
+            "Binary file bodies can't be sent from the browser: the server has no access to your files"
+                .to_string(),
+        ));
+    }
+    if request.body_type.as_deref() == Some("multipart/form-data") {
+        let names_a_file =
+            request.body.get("form").and_then(|f| f.as_array()).is_some_and(|entries| {
+                entries.iter().any(|e| {
+                    e.get("enabled").and_then(|v| v.as_bool()).unwrap_or(true)
+                        && e.get("file").and_then(|v| v.as_str()).is_some_and(|f| !f.is_empty())
+                })
+            });
+        if names_a_file {
+            return Err(Refusal::Unsupported(
+                "Multipart file fields can't be sent from the browser: the server has no access to your files"
+                    .to_string(),
+            ));
+        }
+    }
+
+    // The tab's requested timeout, capped. Zero means "none", which here means the cap.
+    let requested = if send.settings.timeout_ms > 0 {
+        Some(Duration::from_millis(send.settings.timeout_ms as u64))
+    } else {
+        None
+    };
+    let timeout = requested.map_or(limits.max_timeout, |t| t.min(limits.max_timeout));
+    let timeout_capped = requested.is_none_or(|t| t > limits.max_timeout);
+
+    let sendable = SendableHttpRequest::from_http_request(
+        &request,
+        SendableHttpRequestOptions {
+            timeout: Some(timeout),
+            follow_redirects: send.settings.follow_redirects,
+        },
+    )
+    .await
+    .map_err(|e| Refusal::Invalid(e.to_string()))?;
+
+    // The first hop, checked up front so a bad destination is a clean refusal rather than a
+    // stream that opens and immediately errors. Every later hop is checked by GuardedSender.
+    limits.policy.check_url(&sendable.url).map_err(Refusal::Destination)?;
+
+    Ok(PreparedSend {
+        limits,
+        sendable,
+        settings: send.settings,
+        cookies: send.cookies,
+        timeout,
+        timeout_capped,
+    })
+}
+
+pub struct PreparedSend {
+    limits: Arc<SendLimits>,
+    sendable: SendableHttpRequest,
+    settings: yaak_models::models::HttpSendSettings,
+    cookies: Option<Vec<yaak_models::models::Cookie>>,
+    timeout: Duration,
+    timeout_capped: bool,
+}
+
+impl PreparedSend {
+    pub fn describe(&self) -> String {
+        format!("{} {}", self.sendable.method, self.sendable.url)
+    }
+
+    /// Run the send, writing frames to `frames` until the terminal frame. Returns when the
+    /// stream is complete or the client has gone away.
+    pub async fn run(mut self, frames: FrameSender) {
+        let cookie_store = self.cookies.take().map(CookieStore::from_cookies);
+        let store_for_result = cookie_store.clone();
+        let outcome = self.execute(frames.clone(), cookie_store).await;
+
+        let cookies = store_for_result.as_ref().map(|s| s.get_all_cookies());
+        let terminal = match outcome {
+            Ok(done) => Frame::Done {
+                elapsed: done.elapsed,
+                content_length: done.content_length,
+                content_length_compressed: done.content_length_compressed,
+                cookies,
+            },
+            Err(message) => Frame::Error { message, cookies },
+        };
+        let _ = write_frame(&frames, &terminal).await;
+    }
+
+    async fn execute(
+        self,
+        frames: FrameSender,
+        cookie_store: Option<CookieStore>,
+    ) -> Result<DoneStats, String> {
+        let limits = self.limits;
+
+        let (client, resolver) = HttpConnectionOptions {
+            id: uuid::Uuid::new_v4().to_string(),
+            validate_certificates: self.settings.validate_certificates,
+            http_version: self.settings.http_version,
+            // The proxy connects directly. Going through a system proxy would move DNS, and
+            // therefore the address check, somewhere this process can't see.
+            proxy: HttpConnectionProxySetting::Disabled,
+            client_certificate: None,
+            dns_overrides: Vec::new(),
+            address_filter: Some(limits.policy.address_filter()),
+        }
+        .build_client()
+        .map_err(|e| format!("Failed to build HTTP client: {e}"))?;
+
+        // Timeline events go into the same frame stream as everything else, as they happen.
+        // The desktop persists them from a task like this one; here the task serialises them.
+        let (event_tx, mut event_rx) = mpsc::channel::<HttpResponseEvent>(EVENT_CHANNEL_CAPACITY);
+        resolver.set_event_sender(Some(event_tx.clone())).await;
+        let dns_elapsed = Arc::new(AtomicU64::new(0));
+        let event_frames = frames.clone();
+        let event_dns = dns_elapsed.clone();
+        let event_task = tokio::spawn(async move {
+            while let Some(event) = event_rx.recv().await {
+                if let HttpResponseEvent::DnsResolved { duration, .. } = &event {
+                    event_dns.store(*duration, Ordering::Relaxed);
+                }
+                let frame = Frame::Event { event: event.into() };
+                if write_frame(&event_frames, &frame).await.is_err() {
+                    break;
+                }
+            }
+        });
+
+        // Cancellation: the client hanging up, or the overall deadline. The deadline exists
+        // because a per-hop timeout times each hop separately; ten slow redirects must not add
+        // up to ten timeouts.
+        let (cancel_tx, cancel_rx) = watch::channel(false);
+        let deadline = self.timeout * 2 + Duration::from_secs(5);
+        let deadline_cancel = cancel_tx.clone();
+        let deadline_task = tokio::spawn(async move {
+            tokio::time::sleep(deadline).await;
+            let _ = deadline_cancel.send(true);
+        });
+        let hangup_frames = frames.clone();
+        let hangup_task = tokio::spawn(async move {
+            hangup_frames.closed().await;
+            let _ = cancel_tx.send(true);
+        });
+
+        if self.timeout_capped {
+            let _ = event_tx.try_send(HttpResponseEvent::Info(format!(
+                "Timeout set to {:?} (this server's ceiling)",
+                self.timeout
+            )));
+        }
+
+        let sender = GuardedSender::new(ReqwestSender::with_client(client), limits.policy.clone());
+        let transaction = match cookie_store {
+            Some(store) => HttpTransaction::with_cookie_behavior(
+                sender,
+                store,
+                self.settings.send_cookies,
+                self.settings.store_cookies,
+            ),
+            None => HttpTransaction::new(sender),
+        };
+
+        let started_at = Instant::now();
+        let result = transaction
+            .execute_with_cancellation(self.sendable, cancel_rx.clone(), event_tx.clone())
+            .await;
+        resolver.set_event_sender(None).await;
+
+        let mut response = match result {
+            Ok(response) => response,
+            Err(err) => {
+                drop(event_tx);
+                let _ = event_task.await;
+                deadline_task.abort();
+                hangup_task.abort();
+                return Err(describe_error(&err));
+            }
+        };
+
+        let elapsed_headers = started_at.elapsed().as_millis() as u64;
+        let head = Frame::Response {
+            status: response.status,
+            status_reason: response.status_reason.clone(),
+            url: response.url.clone(),
+            remote_addr: response.remote_addr.clone(),
+            version: response.version.clone(),
+            headers: to_wire_headers(&response.headers),
+            request_headers: to_wire_headers(&response.request_headers),
+            content_length: response.content_length,
+            elapsed_headers,
+            elapsed_dns: dns_elapsed.load(Ordering::Relaxed),
+        };
+        write_frame(&frames, &head).await.map_err(|_| "Client went away".to_string())?;
+
+        let declared_length = response.content_length;
+        let mut body = response
+            .into_body_stream()
+            .map_err(|e| format!("Failed to read response body: {e}"))?;
+        let mut buf = vec![0u8; BODY_READ_CHUNK];
+        let mut total: usize = 0;
+        let mut cancel_rx = cancel_rx;
+        let base64 = base64::engine::general_purpose::STANDARD;
+
+        let read_result: Result<(), String> = loop {
+            if *cancel_rx.borrow() {
+                break Err("Request canceled".to_string());
+            }
+            let read = tokio::select! {
+                biased;
+                _ = cancel_rx.changed() => break Err("Request canceled".to_string()),
+                r = body.read(&mut buf) => r,
+            };
+            match read {
+                Ok(0) => break Ok(()),
+                Ok(n) => {
+                    total += n;
+                    if total > limits.max_response_bytes {
+                        break Err(format!(
+                            "Response body exceeds this server's limit of {} bytes",
+                            limits.max_response_bytes
+                        ));
+                    }
+                    let frame = Frame::Body { data: base64.encode(&buf[..n]) };
+                    if write_frame(&frames, &frame).await.is_err() {
+                        break Err("Client went away".to_string());
+                    }
+                }
+                Err(e) => break Err(format!("Failed to read response body: {e}")),
+            }
+        };
+        drop(body);
+
+        // Let the timeline drain before the terminal frame, so nothing arrives after "done".
+        drop(event_tx);
+        let _ = event_task.await;
+        deadline_task.abort();
+        hangup_task.abort();
+
+        read_result?;
+        Ok(DoneStats {
+            elapsed: started_at.elapsed().as_millis() as u64,
+            content_length: total as u64,
+            content_length_compressed: declared_length.unwrap_or(total as u64),
+        })
+    }
+}
+
+/// A send error as a sentence, not a debug dump.
+///
+/// A connection error from reqwest arrives wrapped several layers deep, and the layer that
+/// says something useful — "Refusing to connect to ::1: loopback" — is the innermost. The
+/// desktop shows the outer `Debug`; a stranger reading its reply deserves the reason.
+fn describe_error(err: &yaak_http::error::Error) -> String {
+    match err {
+        yaak_http::error::Error::Client(e) => {
+            let mut leaf: &dyn std::error::Error = e;
+            while let Some(next) = leaf.source() {
+                leaf = next;
+            }
+            let outer = e.to_string();
+            let inner = leaf.to_string();
+            if inner == outer { outer } else { format!("{outer}: {inner}") }
+        }
+        yaak_http::error::Error::RequestError(message) => format!("Request failed: {message}"),
+        other => other.to_string(),
+    }
+}
+
+struct DoneStats {
+    elapsed: u64,
+    content_length: u64,
+    content_length_compressed: u64,
+}
+
+fn to_wire_headers(headers: &[(String, String)]) -> Vec<HttpResponseHeader> {
+    headers
+        .iter()
+        .map(|(name, value)| HttpResponseHeader { name: name.clone(), value: value.clone() })
+        .collect()
+}
+
+async fn write_frame(frames: &FrameSender, frame: &Frame) -> Result<(), ()> {
+    let mut line = match serde_json::to_vec(frame) {
+        Ok(v) => v,
+        Err(e) => {
+            warn!("Failed to serialize response frame");
+            debug!("Frame serialization error: {e}");
+            return Err(());
+        }
+    };
+    line.push(b'\n');
+    frames.send(Ok(Bytes::from(line))).await.map_err(|_| ())
+}
+
+/// Request diagnostics are opt-in, including destinations and completion timing.
+pub fn log_outcome(description: &str, started: Instant, outcome: &str) {
+    debug!("{description} -> {outcome} in {:?}", started.elapsed());
+}
diff --git a/crates-server/yaak-web/src/wire.rs b/crates-server/yaak-web/src/wire.rs
new file mode 100644
index 0000000..2556173
--- /dev/null
+++ b/crates-server/yaak-web/src/wire.rs
@@ -0,0 +1,97 @@
+//! What crosses the wire between a tab and this server.
+//!
+//! One `POST /v1/http/send` carries a request the tab has already rendered —
+//! templates resolved, inheritance applied — plus the send settings and the
+//! cookies the send starts with. The reply is a stream of newline-delimited
+//! JSON frames: timeline events as they happen, the response head as soon as
+//! headers arrive, body chunks as they are read, and one terminal frame.
+//!
+//! Nothing here names a workspace, a request id, or a response id. The server
+//! does not know what the tab will call this response; it only knows what came
+//! back.
+//!
+//! The TypeScript side of this contract is generated from these types into
+//! `bindings/` (`cargo test -p yaak-web`) and published to the tab as
+//! `@yaakapp-internal/web`, so a change here is a type error there.
+
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+use yaak_models::models::{
+    Cookie, HttpRequest, HttpResponseEventData, HttpResponseHeader, HttpSendSettings,
+};
+
+/// The body of `POST /v1/http/send`.
+#[derive(Deserialize, Debug, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_web.ts")]
+pub struct SendRequest {
+    /// The request to send, in the desktop's own model shape but with every template already
+    /// rendered by the tab. The server builds the URL, headers and body from it exactly the way
+    /// the desktop does after rendering.
+    pub request: HttpRequest,
+    /// The resolved settings, values only. Where they came from is the tab's to record in
+    /// its timeline; the server only needs to obey them.
+    pub settings: HttpSendSettings,
+    /// The cookies to start with. `None` means no jar at all: nothing sent, nothing kept.
+    #[serde(default)]
+    pub cookies: Option<Vec<Cookie>>,
+}
+
+/// One line of the reply stream. Tags are snake_case like the timeline event tags; fields are
+/// camelCase like every model the tab stores.
+#[derive(Serialize, Debug, TS)]
+#[serde(
+    tag = "type",
+    rename_all = "snake_case",
+    rename_all_fields = "camelCase"
+)]
+#[ts(export, export_to = "gen_web.ts")]
+pub enum Frame {
+    /// A timeline event, in the same shape the desktop stores. Interleaved with everything
+    /// else in the order the engine produced it.
+    Event { event: HttpResponseEventData },
+    /// The response head. Sent once, as soon as the final hop's headers are in — before any of
+    /// the body — so the tab can show status and headers while the body streams.
+    Response {
+        status: u16,
+        status_reason: Option<String>,
+        /// The URL that answered, after redirects.
+        url: String,
+        remote_addr: Option<String>,
+        version: Option<String>,
+        headers: Vec<HttpResponseHeader>,
+        /// The headers that were actually sent on the final hop, cookies and all.
+        request_headers: Vec<HttpResponseHeader>,
+        /// `Content-Length` as declared by the server, if it declared one.
+        #[ts(type = "number | null")]
+        content_length: Option<u64>,
+        /// Milliseconds from the start of the send to the response head.
+        #[ts(type = "number")]
+        elapsed_headers: u64,
+        /// Milliseconds spent in DNS on the last lookup, or zero.
+        #[ts(type = "number")]
+        elapsed_dns: u64,
+    },
+    /// A piece of the response body, decompressed, base64-encoded.
+    Body { data: String },
+    /// The send finished. The last frame on a successful stream.
+    Done {
+        /// Milliseconds from the start of the send to the end of the body.
+        #[ts(type = "number")]
+        elapsed: u64,
+        /// Bytes of body relayed, after decompression.
+        #[ts(type = "number")]
+        content_length: u64,
+        /// Bytes on the wire as declared by the server, or the relayed size when unknown.
+        #[ts(type = "number")]
+        content_length_compressed: u64,
+        /// The jar as the send left it, for the tab to persist. `None` when the tab sent none.
+        cookies: Option<Vec<Cookie>>,
+    },
+    /// The send failed. The last frame on a failed stream. Cookies collected before the failure
+    /// still come back — the transaction may have set some before the hop that failed.
+    Error {
+        message: String,
+        cookies: Option<Vec<Cookie>>,
+    },
+}
diff --git a/crates-server/yaak-web/tests/logging.rs b/crates-server/yaak-web/tests/logging.rs
new file mode 100644
index 0000000..99b4316
--- /dev/null
+++ b/crates-server/yaak-web/tests/logging.rs
@@ -0,0 +1,98 @@
+use axum::Router;
+use axum::body::{Body, to_bytes};
+use axum::extract::{ConnectInfo, Request};
+use axum::http::StatusCode;
+use axum::routing::get;
+use clap::Parser;
+use std::io::{self, Write};
+use std::net::SocketAddr;
+use std::sync::{Arc, Mutex};
+use tower::ServiceExt;
+use yaak_web::{Config, DEFAULT_LOG_FILTER, router};
+
+#[derive(Clone)]
+struct LogCapture(Arc<Mutex<Vec<u8>>>);
+
+impl Write for LogCapture {
+    fn write(&mut self, bytes: &[u8]) -> io::Result<usize> {
+        self.0.lock().unwrap().extend_from_slice(bytes);
+        Ok(bytes.len())
+    }
+
+    fn flush(&mut self) -> io::Result<()> {
+        Ok(())
+    }
+}
+
+fn send_request(url: &str) -> Request {
+    let payload = serde_json::json!({
+        "request": { "url": url, "method": "GET" },
+        "settings": {
+            "validateCertificates": true,
+            "followRedirects": true,
+            "timeoutMs": 2000,
+            "sendCookies": true,
+            "storeCookies": true
+        }
+    });
+    Request::builder()
+        .method("POST")
+        .uri("/v1/http/send")
+        .header("content-type", "application/json")
+        .extension(ConnectInfo("192.0.2.42:1234".parse::<SocketAddr>().unwrap()))
+        .body(Body::from(payload.to_string()))
+        .unwrap()
+}
+
+#[tokio::test]
+async fn default_logging_keeps_operational_warnings_without_request_details() {
+    let capture = LogCapture(Arc::new(Mutex::new(Vec::new())));
+    env_logger::Builder::new()
+        .parse_filters(DEFAULT_LOG_FILTER)
+        .target(env_logger::Target::Pipe(Box::new(capture.clone())))
+        .init();
+
+    let listener = tokio::net::TcpListener::bind("127.0.0.1:0").await.unwrap();
+    let port = listener.local_addr().unwrap().port();
+    let upstream = tokio::spawn(async move {
+        axum::serve(
+            listener,
+            Router::new().route("/private-path", get(|| async { "secret body" })),
+        )
+        .await
+        .unwrap();
+    });
+    let mut config = Config::parse_from(["yaak-web"]);
+    config.allow_private_networks = true;
+    config.rate_limit_per_minute = 1;
+    let app = router(config.clone());
+    assert!(String::from_utf8_lossy(&capture.0.lock().unwrap()).contains("ALLOWED"));
+    capture.0.lock().unwrap().clear();
+
+    // Exercise the HTTP engine and DNS lookup as well as the proxy's own logs.
+    let url = format!("http://localhost:{port}/private-path?token=secret");
+    let response = app.clone().oneshot(send_request(&url)).await.unwrap();
+    assert_eq!(response.status(), StatusCode::OK);
+    let body = to_bytes(response.into_body(), 64 * 1024).await.unwrap();
+    assert!(String::from_utf8_lossy(&body).contains("\"type\":\"done\""));
+    assert_eq!(
+        app.oneshot(send_request(&url)).await.unwrap().status(),
+        StatusCode::TOO_MANY_REQUESTS
+    );
+
+    config.allow_private_networks = false;
+    let app = router(config.clone());
+    assert_eq!(
+        app.oneshot(send_request("http://127.0.0.1/private-path")).await.unwrap().status(),
+        StatusCode::FORBIDDEN
+    );
+    config.max_concurrent = 0;
+    assert_eq!(
+        router(config).oneshot(send_request(&url)).await.unwrap().status(),
+        StatusCode::SERVICE_UNAVAILABLE
+    );
+
+    upstream.abort();
+    let logs = capture.0.lock().unwrap();
+    assert!(logs.is_empty(), "Unexpected request logs: {}", String::from_utf8_lossy(&logs));
+}
diff --git a/crates-server/yaak-web/tests/router.rs b/crates-server/yaak-web/tests/router.rs
new file mode 100644
index 0000000..c18f496
--- /dev/null
+++ b/crates-server/yaak-web/tests/router.rs
@@ -0,0 +1,89 @@
+use axum::body::{Body, to_bytes};
+use axum::extract::Request;
+use axum::http::{HeaderValue, StatusCode, header};
+use axum::middleware::{self, Next};
+use axum::response::Response;
+use std::path::PathBuf;
+use tower::ServiceExt;
+use yaak_web::{Config, router};
+
+fn config(serve: Option<PathBuf>) -> Config {
+    Config {
+        host: "127.0.0.1".to_string(),
+        port: 0,
+        app_port: None,
+        serve,
+        allow_private_networks: false,
+        allowed_origins: vec!["*".into()],
+        max_request_bytes: 1024,
+        max_response_bytes: 2048,
+        max_timeout_secs: 5,
+        rate_limit_per_minute: 10,
+        max_concurrent: 2,
+        trust_forwarded_for: false,
+    }
+}
+
+async fn mark_response(request: Request, next: Next) -> Response {
+    let mut response = next.run(request).await;
+    response.headers_mut().insert("x-hosted-middleware", HeaderValue::from_static("yes"));
+    response
+}
+
+#[tokio::test]
+async fn embedded_router_serves_api_without_static_files() {
+    let app = router(config(None)).layer(middleware::from_fn(mark_response));
+    let response = app
+        .clone()
+        .oneshot(Request::builder().uri("/v1/health").body(Body::empty()).unwrap())
+        .await
+        .unwrap();
+    assert_eq!(response.status(), StatusCode::OK);
+    assert_eq!(response.headers()["x-hosted-middleware"], "yes");
+    let body = to_bytes(response.into_body(), 4096).await.unwrap();
+    let health: serde_json::Value = serde_json::from_slice(&body).unwrap();
+    assert_eq!(health["ok"], true);
+    assert_eq!(health["maxResponseBytes"], 2048);
+    assert_eq!(health["maxTimeoutSecs"], 5);
+
+    let response = app.oneshot(Request::new(Body::empty())).await.unwrap();
+    assert_eq!(response.status(), StatusCode::NOT_FOUND);
+}
+
+#[tokio::test]
+async fn middleware_wraps_html_fallback_and_assets_alongside_api() {
+    let dir = tempfile::tempdir().unwrap();
+    std::fs::write(dir.path().join("index.html"), "<html>Yaak</html>").unwrap();
+    std::fs::create_dir(dir.path().join("assets")).unwrap();
+    std::fs::write(dir.path().join("assets/app-abc.js"), "// app").unwrap();
+    let app = router(config(Some(dir.path().into()))).layer(middleware::from_fn(mark_response));
+
+    for path in [
+        "/",
+        "/workspace/example",
+        "/assets/app-abc.js",
+        "/v1/health",
+    ] {
+        let response = app
+            .clone()
+            .oneshot(Request::builder().uri(path).body(Body::empty()).unwrap())
+            .await
+            .unwrap();
+        assert_eq!(response.status(), StatusCode::OK, "{path}");
+        assert_eq!(response.headers()["x-hosted-middleware"], "yes", "{path}");
+        if path.starts_with("/assets/") {
+            assert_eq!(
+                response.headers()[header::CACHE_CONTROL],
+                "public, max-age=31536000, immutable"
+            );
+        } else if path == "/v1/health" {
+            assert_eq!(response.headers()[header::CONTENT_TYPE], "application/json");
+        } else {
+            assert_eq!(response.headers()[header::CACHE_CONTROL], "no-cache");
+            assert!(
+                response.headers()[header::CONTENT_TYPE].to_str().unwrap().starts_with("text/html")
+            );
+            assert_eq!(to_bytes(response.into_body(), 4096).await.unwrap(), "<html>Yaak</html>");
+        }
+    }
+}
diff --git a/crates-tauri/yaak-app-client/.gitignore b/crates-tauri/yaak-app-client/.gitignore
new file mode 100644
index 0000000..69bebf6
--- /dev/null
+++ b/crates-tauri/yaak-app-client/.gitignore
@@ -0,0 +1,10 @@
+# Generated by Cargo
+# will have compiled files and executables
+target/
+
+vendored/*
+
+gen/*
+
+**/permissions/autogenerated
+**/permissions/schemas
diff --git a/crates-tauri/yaak-app-client/Cargo.toml b/crates-tauri/yaak-app-client/Cargo.toml
new file mode 100644
index 0000000..6c0da99
--- /dev/null
+++ b/crates-tauri/yaak-app-client/Cargo.toml
@@ -0,0 +1,101 @@
+[package]
+name = "yaak-app-client"
+version = "0.0.0"
+edition = "2024"
+authors = ["Gregory Schier"]
+publish = false
+
+# Produce a library for mobile support
+[lib]
+name = "tauri_app_client_lib"
+crate-type = ["staticlib", "cdylib", "lib"]
+
+[features]
+cargo-clippy = []
+default = []
+cef = ["tauri/cef", "tauri-plugin-dialog/xdg-portal"]
+wry = ["tauri/wry", "tauri/x11", "tauri/dbus", "tauri-plugin-dialog/gtk3"]
+updater = []
+license = ["yaak-license"]
+
+[build-dependencies]
+tauri-build = { version = "2.6.1", features = [] }
+
+[target.'cfg(target_os = "linux")'.dependencies]
+openssl-sys = { version = "0.9.105", features = ["vendored"] } # For Ubuntu installation to work
+
+[target.'cfg(any(target_os = "macos", target_os = "linux"))'.dependencies]
+rlimit = "0.11" # Raise the launchd 256 open-file soft limit at startup
+
+[dependencies]
+base64 = "0.22.1" # For writing values the editor only ever held encoded
+charset = "0.1.5"
+chrono = { workspace = true, features = ["serde"] }
+cookie = "0.18.1"
+eventsource-client = { git = "https://github.com/yaakapp/rust-eventsource-client", version = "0.14.0" }
+http = { version = "1.2.0", default-features = false }
+log = { workspace = true }
+md5 = "0.8.0"
+notify = "8.0.0"
+pretty_graphql = "0.2"
+r2d2 = "0.8.10"
+r2d2_sqlite = "0.32"
+mime_guess = "2.0.5"
+rand = "0.9.0"
+reqwest = { workspace = true, features = [
+  "multipart",
+  "gzip",
+  "brotli",
+  "deflate",
+  "json",
+  "query",
+  "rustls-no-provider",
+  "socks",
+  "http2",
+] }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true, features = ["raw_value"] }
+tauri = { workspace = true, features = ["devtools", "protocol-asset"] }
+tauri-plugin-clipboard-manager = "2.3.2"
+tauri-plugin-deep-link = "2.4.9"
+tauri-plugin-dialog = { workspace = true }
+tauri-plugin-fs = "2.5.1"
+tauri-plugin-log = { version = "2.8.0", features = ["colored"] }
+tauri-plugin-opener = "2.5.4"
+tauri-plugin-os = "2.3.2"
+tauri-plugin-shell = { workspace = true }
+tauri-plugin-single-instance = { version = "2.4.2", features = ["deep-link"] }
+tauri-plugin-updater = "2.10.1"
+thiserror = { workspace = true }
+tokio = { workspace = true, features = ["sync"] }
+tokio-stream = "0.1.17"
+tokio-tungstenite = { version = "0.26.2", default-features = false }
+url = "2"
+tokio-util = { version = "0.7", features = ["codec"] }
+ts-rs = { workspace = true }
+yaak-rpc = { workspace = true }
+yaak-rpc-schema = { workspace = true }
+uuid = "1.12.1"
+yaak-api = { workspace = true }
+yaak-common = { workspace = true }
+yaak-tauri-utils = { workspace = true }
+yaak-core = { workspace = true }
+yaak = { workspace = true }
+yaak-commands = { workspace = true }
+yaak-crypto = { workspace = true }
+yaak-fonts = { workspace = true }
+yaak-git = { workspace = true }
+yaak-grpc = { workspace = true }
+yaak-http = { workspace = true }
+yaak-license = { workspace = true, optional = true }
+yaak-mac-window = { workspace = true }
+yaak-lifecycle = { workspace = true }
+yaak-models = { workspace = true }
+yaak-plugins = { workspace = true }
+yaak-sse = { workspace = true }
+yaak-system-appearance = { workspace = true }
+yaak-sync = { workspace = true }
+yaak-templates = { workspace = true }
+yaak-tls = { workspace = true }
+yaak-window = { workspace = true }
+yaak-ws = { workspace = true }
diff --git a/crates-tauri/yaak-app-client/bindings/gen_watch.ts b/crates-tauri/yaak-app-client/bindings/gen_watch.ts
new file mode 100644
index 0000000..f93ec8c
--- /dev/null
+++ b/crates-tauri/yaak-app-client/bindings/gen_watch.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type WatchResult = { unlistenEvent: string, };
diff --git a/crates-tauri/yaak-app-client/bindings/index.ts b/crates-tauri/yaak-app-client/bindings/index.ts
new file mode 100644
index 0000000..6fb0207
--- /dev/null
+++ b/crates-tauri/yaak-app-client/bindings/index.ts
@@ -0,0 +1,37 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type PluginUpdateInfo = { name: string; currentVersion: string; latestVersion: string };
+
+export type PluginUpdateNotification = { updateCount: number; plugins: Array<PluginUpdateInfo> };
+
+export type UpdateInfo = {
+  replyEventId: string;
+  version: string;
+  downloaded: boolean;
+  /**
+   * How this update gets applied. Anything but `Integrated` means the app can't do it
+   * itself and the user is told how to update instead.
+   */
+  install: UpdateInstall;
+};
+
+/**
+ * How an update can be applied to this install.
+ */
+export type UpdateInstall = "integrated" | "flatpak" | "manual";
+
+export type UpdateResponse = { type: "ack" } | { type: "action"; action: UpdateResponseAction };
+
+export type UpdateResponseAction = "install" | "skip";
+
+export type YaakNotification = {
+  timestamp: string;
+  timeout: number | null;
+  id: string;
+  title: string | null;
+  message: string;
+  color: string | null;
+  action: YaakNotificationAction | null;
+};
+
+export type YaakNotificationAction = { label: string; url: string };
diff --git a/crates-tauri/yaak-app-client/bindings/plugins_ext.ts b/crates-tauri/yaak-app-client/bindings/plugins_ext.ts
new file mode 100644
index 0000000..0c03610
--- /dev/null
+++ b/crates-tauri/yaak-app-client/bindings/plugins_ext.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type PluginUpdateInfo = { name: string, currentVersion: string, latestVersion: string, };
+
+export type PluginUpdateNotification = { updateCount: number, plugins: Array<PluginUpdateInfo>, };
diff --git a/crates-tauri/yaak-app-client/build.rs b/crates-tauri/yaak-app-client/build.rs
new file mode 100644
index 0000000..d860e1e
--- /dev/null
+++ b/crates-tauri/yaak-app-client/build.rs
@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}
diff --git a/crates-tauri/yaak-app-client/capabilities/default.json b/crates-tauri/yaak-app-client/capabilities/default.json
new file mode 100644
index 0000000..4ec64a8
--- /dev/null
+++ b/crates-tauri/yaak-app-client/capabilities/default.json
@@ -0,0 +1,55 @@
+{
+  "identifier": "default",
+  "description": "Default capabilities for all build variants",
+  "windows": ["*"],
+  "permissions": [
+    "core:app:allow-identifier",
+    "core:event:allow-emit",
+    "core:event:allow-listen",
+    "core:event:allow-unlisten",
+    "core:path:allow-resolve-directory",
+    "core:path:allow-basename",
+    "os:allow-os-type",
+    "clipboard-manager:allow-clear",
+    "clipboard-manager:allow-write-text",
+    "clipboard-manager:allow-read-text",
+    "dialog:allow-open",
+    "dialog:allow-save",
+    "fs:allow-read-dir",
+    "fs:allow-read-file",
+    "fs:allow-read-text-file",
+    {
+      "identifier": "fs:scope",
+      "allow": [
+        {
+          "path": "$APPDATA"
+        },
+        {
+          "path": "$APPDATA/**"
+        }
+      ]
+    },
+    "clipboard-manager:allow-read-text",
+    "clipboard-manager:allow-write-text",
+    "core:webview:allow-set-webview-zoom",
+    "core:window:allow-close",
+    "core:window:allow-internal-toggle-maximize",
+    "core:window:allow-is-fullscreen",
+    "core:window:allow-is-maximized",
+    "core:window:allow-maximize",
+    "core:window:allow-minimize",
+    "core:window:allow-set-decorations",
+    "core:window:allow-set-title",
+    "core:window:allow-show",
+    "core:window:allow-start-dragging",
+    "core:window:allow-theme",
+    "core:window:allow-unmaximize",
+    "opener:allow-default-urls",
+    "opener:allow-open-path",
+    "opener:allow-open-url",
+    "opener:allow-reveal-item-in-dir",
+    "shell:allow-open",
+    "yaak-fonts:default",
+    "yaak-mac-window:default"
+  ]
+}
diff --git a/crates-tauri/yaak-app-client/icons/dev/128x128.png b/crates-tauri/yaak-app-client/icons/dev/128x128.png
new file mode 100644
index 0000000..eccde36
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/128x128.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/128x128@2x.png b/crates-tauri/yaak-app-client/icons/dev/128x128@2x.png
new file mode 100644
index 0000000..fde1d61
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/128x128@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/32x32.png b/crates-tauri/yaak-app-client/icons/dev/32x32.png
new file mode 100644
index 0000000..d2657c3
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/32x32.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/64x64.png b/crates-tauri/yaak-app-client/icons/dev/64x64.png
new file mode 100644
index 0000000..782a038
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/64x64.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/Square107x107Logo.png b/crates-tauri/yaak-app-client/icons/dev/Square107x107Logo.png
new file mode 100644
index 0000000..52cfb23
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/Square107x107Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/Square142x142Logo.png b/crates-tauri/yaak-app-client/icons/dev/Square142x142Logo.png
new file mode 100644
index 0000000..39527bc
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/Square142x142Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/Square150x150Logo.png b/crates-tauri/yaak-app-client/icons/dev/Square150x150Logo.png
new file mode 100644
index 0000000..3abcf05
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/Square150x150Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/Square284x284Logo.png b/crates-tauri/yaak-app-client/icons/dev/Square284x284Logo.png
new file mode 100644
index 0000000..deb8344
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/Square284x284Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/Square30x30Logo.png b/crates-tauri/yaak-app-client/icons/dev/Square30x30Logo.png
new file mode 100644
index 0000000..ffe5a16
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/Square30x30Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/Square310x310Logo.png b/crates-tauri/yaak-app-client/icons/dev/Square310x310Logo.png
new file mode 100644
index 0000000..8378f19
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/Square310x310Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/Square44x44Logo.png b/crates-tauri/yaak-app-client/icons/dev/Square44x44Logo.png
new file mode 100644
index 0000000..32d5958
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/Square44x44Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/Square71x71Logo.png b/crates-tauri/yaak-app-client/icons/dev/Square71x71Logo.png
new file mode 100644
index 0000000..e979a1b
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/Square71x71Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/Square89x89Logo.png b/crates-tauri/yaak-app-client/icons/dev/Square89x89Logo.png
new file mode 100644
index 0000000..edfbff6
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/Square89x89Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/StoreLogo.png b/crates-tauri/yaak-app-client/icons/dev/StoreLogo.png
new file mode 100644
index 0000000..b3259b0
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/StoreLogo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-hdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-hdpi/ic_launcher.png
new file mode 100644
index 0000000..4937e3f
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-hdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-hdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-hdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..d33e673
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-hdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-hdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-hdpi/ic_launcher_round.png
new file mode 100644
index 0000000..4937e3f
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-hdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-mdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-mdpi/ic_launcher.png
new file mode 100644
index 0000000..a6602bc
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-mdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-mdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-mdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..eb42158
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-mdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-mdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-mdpi/ic_launcher_round.png
new file mode 100644
index 0000000..a6602bc
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-mdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xhdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xhdpi/ic_launcher.png
new file mode 100644
index 0000000..fc034fe
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xhdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xhdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xhdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..d516129
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xhdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xhdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xhdpi/ic_launcher_round.png
new file mode 100644
index 0000000..fc034fe
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xhdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxhdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxhdpi/ic_launcher.png
new file mode 100644
index 0000000..48a75e0
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxhdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxhdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..8c8b141
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxhdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxhdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxhdpi/ic_launcher_round.png
new file mode 100644
index 0000000..48a75e0
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxhdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxxhdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxxhdpi/ic_launcher.png
new file mode 100644
index 0000000..f5c5417
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxxhdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxxhdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..8fc454b
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxxhdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxxhdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxxhdpi/ic_launcher_round.png
new file mode 100644
index 0000000..f5c5417
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/android/mipmap-xxxhdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/icon.icns b/crates-tauri/yaak-app-client/icons/dev/icon.icns
new file mode 100644
index 0000000..ad384e0
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/icon.icns differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/icon.ico b/crates-tauri/yaak-app-client/icons/dev/icon.ico
new file mode 100644
index 0000000..5d0cdc6
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/icon.ico differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/icon.png b/crates-tauri/yaak-app-client/icons/dev/icon.png
new file mode 100644
index 0000000..d1d0e86
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/icon.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@1x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@1x.png
new file mode 100644
index 0000000..6d8b166
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@1x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@2x-1.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@2x-1.png
new file mode 100644
index 0000000..6a95d91
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@2x-1.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@2x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@2x.png
new file mode 100644
index 0000000..6a95d91
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@3x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@3x.png
new file mode 100644
index 0000000..3d892c0
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-20x20@3x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@1x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@1x.png
new file mode 100644
index 0000000..597a9a6
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@1x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@2x-1.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@2x-1.png
new file mode 100644
index 0000000..31585c0
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@2x-1.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@2x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@2x.png
new file mode 100644
index 0000000..31585c0
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@3x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@3x.png
new file mode 100644
index 0000000..4ec79fc
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-29x29@3x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@1x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@1x.png
new file mode 100644
index 0000000..6a95d91
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@1x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@2x-1.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@2x-1.png
new file mode 100644
index 0000000..3fbc505
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@2x-1.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@2x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@2x.png
new file mode 100644
index 0000000..3fbc505
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@3x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@3x.png
new file mode 100644
index 0000000..e7ed4db
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-40x40@3x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-512@2x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-512@2x.png
new file mode 100644
index 0000000..8a5d921
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-512@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-60x60@2x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-60x60@2x.png
new file mode 100644
index 0000000..e7ed4db
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-60x60@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-60x60@3x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-60x60@3x.png
new file mode 100644
index 0000000..7c79cd1
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-60x60@3x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-76x76@1x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-76x76@1x.png
new file mode 100644
index 0000000..9f491ac
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-76x76@1x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-76x76@2x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-76x76@2x.png
new file mode 100644
index 0000000..e076e22
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-76x76@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-83.5x83.5@2x.png b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-83.5x83.5@2x.png
new file mode 100644
index 0000000..665b309
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/dev/ios/AppIcon-83.5x83.5@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/icon-dev.png b/crates-tauri/yaak-app-client/icons/icon-dev.png
new file mode 100644
index 0000000..f6394a1
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/icon-dev.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/128x128.png b/crates-tauri/yaak-app-client/icons/release/128x128.png
new file mode 100644
index 0000000..d441d39
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/128x128.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/128x128@2x.png b/crates-tauri/yaak-app-client/icons/release/128x128@2x.png
new file mode 100644
index 0000000..fb59f11
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/128x128@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/32x32.png b/crates-tauri/yaak-app-client/icons/release/32x32.png
new file mode 100644
index 0000000..02858cb
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/32x32.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/64x64.png b/crates-tauri/yaak-app-client/icons/release/64x64.png
new file mode 100644
index 0000000..dda5216
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/64x64.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/Square107x107Logo.png b/crates-tauri/yaak-app-client/icons/release/Square107x107Logo.png
new file mode 100644
index 0000000..e22ca99
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/Square107x107Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/Square142x142Logo.png b/crates-tauri/yaak-app-client/icons/release/Square142x142Logo.png
new file mode 100644
index 0000000..c87526a
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/Square142x142Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/Square150x150Logo.png b/crates-tauri/yaak-app-client/icons/release/Square150x150Logo.png
new file mode 100644
index 0000000..dbbd97a
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/Square150x150Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/Square284x284Logo.png b/crates-tauri/yaak-app-client/icons/release/Square284x284Logo.png
new file mode 100644
index 0000000..310525b
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/Square284x284Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/Square30x30Logo.png b/crates-tauri/yaak-app-client/icons/release/Square30x30Logo.png
new file mode 100644
index 0000000..d06fdaa
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/Square30x30Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/Square310x310Logo.png b/crates-tauri/yaak-app-client/icons/release/Square310x310Logo.png
new file mode 100644
index 0000000..8100cf9
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/Square310x310Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/Square44x44Logo.png b/crates-tauri/yaak-app-client/icons/release/Square44x44Logo.png
new file mode 100644
index 0000000..7852603
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/Square44x44Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/Square71x71Logo.png b/crates-tauri/yaak-app-client/icons/release/Square71x71Logo.png
new file mode 100644
index 0000000..6095e64
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/Square71x71Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/Square89x89Logo.png b/crates-tauri/yaak-app-client/icons/release/Square89x89Logo.png
new file mode 100644
index 0000000..d9e7881
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/Square89x89Logo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/StoreLogo.png b/crates-tauri/yaak-app-client/icons/release/StoreLogo.png
new file mode 100644
index 0000000..b675e8d
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/StoreLogo.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-hdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-hdpi/ic_launcher.png
new file mode 100644
index 0000000..c2c8afc
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-hdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-hdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-hdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..02b669f
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-hdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-hdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-hdpi/ic_launcher_round.png
new file mode 100644
index 0000000..c2c8afc
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-hdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-mdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-mdpi/ic_launcher.png
new file mode 100644
index 0000000..cbe1779
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-mdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-mdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-mdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..42d1214
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-mdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-mdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-mdpi/ic_launcher_round.png
new file mode 100644
index 0000000..cbe1779
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-mdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-xhdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xhdpi/ic_launcher.png
new file mode 100644
index 0000000..1373624
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xhdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-xhdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xhdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..039d015
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xhdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-xhdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xhdpi/ic_launcher_round.png
new file mode 100644
index 0000000..1373624
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xhdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxhdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxhdpi/ic_launcher.png
new file mode 100644
index 0000000..69f9e60
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxhdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxhdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxhdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..69cc07b
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxhdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxhdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxhdpi/ic_launcher_round.png
new file mode 100644
index 0000000..69f9e60
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxhdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxxhdpi/ic_launcher.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxxhdpi/ic_launcher.png
new file mode 100644
index 0000000..ec66e1b
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxxhdpi/ic_launcher.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxxhdpi/ic_launcher_foreground.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxxhdpi/ic_launcher_foreground.png
new file mode 100644
index 0000000..a99f1b3
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxxhdpi/ic_launcher_foreground.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxxhdpi/ic_launcher_round.png b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxxhdpi/ic_launcher_round.png
new file mode 100644
index 0000000..ec66e1b
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/android/mipmap-xxxhdpi/ic_launcher_round.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/icon.ico b/crates-tauri/yaak-app-client/icons/release/icon.ico
new file mode 100644
index 0000000..c939fef
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/icon.ico differ
diff --git a/crates-tauri/yaak-app-client/icons/release/icon.png b/crates-tauri/yaak-app-client/icons/release/icon.png
new file mode 100644
index 0000000..c00e7e3
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/icon.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@1x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@1x.png
new file mode 100644
index 0000000..561fc21
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@1x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@2x-1.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@2x-1.png
new file mode 100644
index 0000000..f51eec6
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@2x-1.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@2x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@2x.png
new file mode 100644
index 0000000..f51eec6
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@3x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@3x.png
new file mode 100644
index 0000000..f2a759f
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-20x20@3x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@1x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@1x.png
new file mode 100644
index 0000000..90ebb47
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@1x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@2x-1.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@2x-1.png
new file mode 100644
index 0000000..b5ee727
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@2x-1.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@2x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@2x.png
new file mode 100644
index 0000000..b5ee727
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@3x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@3x.png
new file mode 100644
index 0000000..7c24e59
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-29x29@3x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@1x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@1x.png
new file mode 100644
index 0000000..f51eec6
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@1x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@2x-1.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@2x-1.png
new file mode 100644
index 0000000..4c5cc79
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@2x-1.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@2x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@2x.png
new file mode 100644
index 0000000..4c5cc79
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@3x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@3x.png
new file mode 100644
index 0000000..9214042
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-40x40@3x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-60x60@2x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-60x60@2x.png
new file mode 100644
index 0000000..9214042
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-60x60@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-60x60@3x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-60x60@3x.png
new file mode 100644
index 0000000..ccd45e9
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-60x60@3x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-76x76@1x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-76x76@1x.png
new file mode 100644
index 0000000..db03e00
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-76x76@1x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-76x76@2x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-76x76@2x.png
new file mode 100644
index 0000000..d742dec
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-76x76@2x.png differ
diff --git a/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-83.5x83.5@2x.png b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-83.5x83.5@2x.png
new file mode 100644
index 0000000..4fc0b1a
Binary files /dev/null and b/crates-tauri/yaak-app-client/icons/release/ios/AppIcon-83.5x83.5@2x.png differ
diff --git a/crates-tauri/yaak-app-client/index.ts b/crates-tauri/yaak-app-client/index.ts
new file mode 100644
index 0000000..09eab93
--- /dev/null
+++ b/crates-tauri/yaak-app-client/index.ts
@@ -0,0 +1,4 @@
+// ts-rs owns bindings/index.ts and rewrites it on export. What remains here
+// after the RPC schema moved to @yaakapp-internal/rpc-schema is the
+// desktop-only surface: updater and notification types.
+export * from "./bindings/index";
diff --git a/crates-tauri/yaak-app-client/macos/entitlements.plist b/crates-tauri/yaak-app-client/macos/entitlements.plist
new file mode 100644
index 0000000..7902d8a
--- /dev/null
+++ b/crates-tauri/yaak-app-client/macos/entitlements.plist
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+        
+        
+        
+        
+    </dict>
+</plist>
diff --git a/crates-tauri/yaak-app-client/macos/entitlements.yaaknode.plist b/crates-tauri/yaak-app-client/macos/entitlements.yaaknode.plist
new file mode 100644
index 0000000..6ed9b77
--- /dev/null
+++ b/crates-tauri/yaak-app-client/macos/entitlements.yaaknode.plist
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+        
+        <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+        <true/>
+
+        
+        <key>com.apple.security.cs.disable-library-validation</key>
+        <true/>
+    </dict>
+</plist>
diff --git a/crates-tauri/yaak-app-client/macos/entitlements.yaakprotoc.plist b/crates-tauri/yaak-app-client/macos/entitlements.yaakprotoc.plist
new file mode 100644
index 0000000..36a8706
--- /dev/null
+++ b/crates-tauri/yaak-app-client/macos/entitlements.yaakprotoc.plist
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+    </dict>
+</plist>
diff --git a/crates-tauri/yaak-app-client/package.json b/crates-tauri/yaak-app-client/package.json
new file mode 100644
index 0000000..1462a6d
--- /dev/null
+++ b/crates-tauri/yaak-app-client/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/tauri-client",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates-tauri/yaak-app-client/src/encoding.rs b/crates-tauri/yaak-app-client/src/encoding.rs
new file mode 100644
index 0000000..76626fb
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/encoding.rs
@@ -0,0 +1,20 @@
+use mime_guess::{Mime, mime};
+use std::path::Path;
+use std::str::FromStr;
+use tokio::fs;
+
+pub async fn read_response_body(body_path: impl AsRef<Path>, content_type: &str) -> Option<String> {
+    let body = fs::read(body_path).await.ok()?;
+    let body_charset = parse_charset(content_type).unwrap_or("utf-8".to_string());
+    if let Some(decoder) = charset::Charset::for_label(body_charset.as_bytes()) {
+        let (cow, _real_encoding, _exist_replace) = decoder.decode(&body);
+        return cow.into_owned().into();
+    }
+
+    Some(String::from_utf8_lossy(&body).to_string())
+}
+
+fn parse_charset(content_type: &str) -> Option<String> {
+    let mime: Mime = Mime::from_str(content_type).ok()?;
+    mime.get_param(mime::CHARSET).map(|v| v.to_string())
+}
diff --git a/crates-tauri/yaak-app-client/src/error.rs b/crates-tauri/yaak-app-client/src/error.rs
new file mode 100644
index 0000000..1957468
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/error.rs
@@ -0,0 +1,84 @@
+use serde::{Serialize, Serializer};
+use std::io;
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error(transparent)]
+    TemplateError(#[from] yaak_templates::error::Error),
+
+    #[error(transparent)]
+    ModelError(#[from] yaak_models::error::Error),
+
+    #[error(transparent)]
+    SyncError(#[from] yaak_sync::error::Error),
+
+    #[error(transparent)]
+    CryptoError(#[from] yaak_crypto::error::Error),
+
+    #[error(transparent)]
+    HttpError(#[from] yaak_http::error::Error),
+
+    #[error(transparent)]
+    GitError(#[from] yaak_git::error::Error),
+
+    #[error(transparent)]
+    TokioTimeoutElapsed(#[from] tokio::time::error::Elapsed),
+
+    #[error(transparent)]
+    WebsocketError(#[from] yaak_ws::error::Error),
+
+    #[cfg(feature = "license")]
+    #[error(transparent)]
+    LicenseError(#[from] yaak_license::error::Error),
+
+    #[error(transparent)]
+    PluginError(#[from] yaak_plugins::error::Error),
+
+    #[error(transparent)]
+    ApiError(#[from] yaak_api::Error),
+
+    #[error(transparent)]
+    YaakError(#[from] yaak::Error),
+
+    #[error(transparent)]
+    CommandError(#[from] yaak_commands::Error),
+
+    #[error(transparent)]
+    ClipboardError(#[from] tauri_plugin_clipboard_manager::Error),
+
+    #[error(transparent)]
+    OpenerError(#[from] tauri_plugin_opener::Error),
+
+    #[error("Updater error: {0}")]
+    UpdaterError(#[from] tauri_plugin_updater::Error),
+
+    #[error("JSON error: {0}")]
+    JsonError(#[from] serde_json::error::Error),
+
+    #[error("Tauri error: {0}")]
+    TauriError(#[from] tauri::Error),
+
+    #[error("Event source error: {0}")]
+    EventSourceError(#[from] eventsource_client::Error),
+
+    #[error("I/O error: {0}")]
+    IOError(#[from] io::Error),
+
+    #[error("Request error: {0}")]
+    RequestError(#[from] reqwest::Error),
+
+    #[error("{0}")]
+    GenericError(String),
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates-tauri/yaak-app-client/src/feedback.rs b/crates-tauri/yaak-app-client/src/feedback.rs
new file mode 100644
index 0000000..f436d05
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/feedback.rs
@@ -0,0 +1,67 @@
+use log::{debug, warn};
+use serde::Serialize;
+use tauri::{AppHandle, Runtime, is_dev};
+use yaak_api::{ApiClientKind, yaak_api_client};
+use yaak_common::platform::get_os_str;
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct FeedbackPayload {
+    feature: String,
+    text: String,
+    app_version: String,
+    os: String,
+}
+
+/// Send explicit user feedback for a feature. Fire-and-forget: errors are
+/// logged and swallowed so a failed send never surfaces to the user.
+pub async fn send_feedback<R: Runtime>(app_handle: &AppHandle<R>, feature: String, text: String) {
+    let app_version = app_handle.package_info().version.to_string();
+    let payload = FeedbackPayload {
+        feature,
+        text,
+        app_version: app_version.clone(),
+        os: get_os_str().to_string(),
+    };
+
+    let client = match yaak_api_client(ApiClientKind::App, &app_version) {
+        Ok(c) => c,
+        Err(e) => {
+            debug!("Failed to build feedback client: {e:?}");
+            return;
+        }
+    };
+
+    let url = build_url("/app-feedback");
+    debug!(
+        "Sending feature feedback to {url}: feature={}, app_version={}, os={}, text_len={}",
+        payload.feature,
+        payload.app_version,
+        payload.os,
+        payload.text.len()
+    );
+
+    match client.post(&url).json(&payload).send().await {
+        Ok(resp) => {
+            let status = resp.status();
+            if status.is_success() {
+                debug!("Sent feature feedback with status {status}");
+            } else {
+                let body = resp
+                    .text()
+                    .await
+                    .unwrap_or_else(|e| format!("<failed to read response body: {e:?}>"));
+                warn!("Failed to send feature feedback with status {status}: {body}");
+            }
+        }
+        Err(e) => warn!("Failed to send feature feedback: {e:?}"),
+    }
+}
+
+fn build_url(path: &str) -> String {
+    if is_dev() {
+        format!("http://localhost:9444/api/v1{path}")
+    } else {
+        format!("https://api.yaak.app/api/v1{path}")
+    }
+}
diff --git a/crates-tauri/yaak-app-client/src/git_ext.rs b/crates-tauri/yaak-app-client/src/git_ext.rs
new file mode 100644
index 0000000..bc4de79
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/git_ext.rs
@@ -0,0 +1,162 @@
+//! Tauri-specific extensions for yaak-git.
+//!
+//! This module provides the Tauri commands for git functionality.
+
+use crate::error::Result;
+use std::path::{Path, PathBuf};
+use yaak_git::{
+    BranchDeleteResult, CloneResult, GitBranchInfo, GitCommit, GitFileDiff, GitRemote,
+    GitStatusSummary, GitWorktreeStatus, PullResult, PushResult, git_add, git_add_credential,
+    git_add_remote, git_branch_info, git_checkout_branch, git_clone, git_commit, git_create_branch,
+    git_delete_branch, git_delete_remote_branch, git_fetch_all, git_file_diff_for_commit, git_init,
+    git_log, git_log_for_file, git_merge_branch, git_pull, git_pull_force_reset, git_pull_merge,
+    git_push, git_remotes, git_rename_branch, git_reset_changes, git_restore,
+    git_restore_file_from_commit, git_rm_remote, git_status, git_unstage, git_worktree_status,
+};
+
+// NOTE: All of these commands are async to prevent blocking work from locking up the UI
+
+pub async fn cmd_git_checkout(dir: &Path, branch: &str, force: bool) -> Result<String> {
+    Ok(git_checkout_branch(dir, branch, force).await?)
+}
+
+pub async fn cmd_git_branch(dir: &Path, branch: &str, base: Option<&str>) -> Result<()> {
+    Ok(git_create_branch(dir, branch, base).await?)
+}
+
+pub async fn cmd_git_delete_branch(
+    dir: &Path,
+    branch: &str,
+    force: Option<bool>,
+) -> Result<BranchDeleteResult> {
+    Ok(git_delete_branch(dir, branch, force.unwrap_or(false)).await?)
+}
+
+pub async fn cmd_git_delete_remote_branch(dir: &Path, branch: &str) -> Result<()> {
+    Ok(git_delete_remote_branch(dir, branch).await?)
+}
+
+pub async fn cmd_git_merge_branch(dir: &Path, branch: &str) -> Result<()> {
+    Ok(git_merge_branch(dir, branch).await?)
+}
+
+pub async fn cmd_git_rename_branch(dir: &Path, old_name: &str, new_name: &str) -> Result<()> {
+    Ok(git_rename_branch(dir, old_name, new_name).await?)
+}
+
+pub async fn cmd_git_status(dir: &Path) -> Result<GitStatusSummary> {
+    Ok(git_status(dir)?)
+}
+
+pub async fn cmd_git_branch_info(dir: &Path) -> Result<GitBranchInfo> {
+    Ok(git_branch_info(dir)?)
+}
+
+pub async fn cmd_git_worktree_status(dir: &Path) -> Result<GitWorktreeStatus> {
+    Ok(git_worktree_status(dir)?)
+}
+
+pub async fn cmd_git_log(dir: &Path) -> Result<Vec<GitCommit>> {
+    Ok(git_log(dir)?)
+}
+
+pub async fn cmd_git_log_for_file(dir: &Path, rela_path: PathBuf) -> Result<Vec<GitCommit>> {
+    Ok(git_log_for_file(dir, &rela_path)?)
+}
+
+pub async fn cmd_git_file_diff_for_commit(
+    dir: &Path,
+    commit_oid: &str,
+    rela_path: PathBuf,
+) -> Result<GitFileDiff> {
+    Ok(git_file_diff_for_commit(dir, commit_oid, &rela_path)?)
+}
+
+pub async fn cmd_git_initialize(dir: &Path) -> Result<()> {
+    Ok(git_init(dir)?)
+}
+
+pub async fn cmd_git_clone(url: &str, dir: &Path) -> Result<CloneResult> {
+    Ok(git_clone(url, dir).await?)
+}
+
+pub async fn cmd_git_commit(dir: &Path, message: &str) -> Result<()> {
+    Ok(git_commit(dir, message).await?)
+}
+
+pub async fn cmd_git_fetch_all(dir: &Path) -> Result<()> {
+    Ok(git_fetch_all(dir).await?)
+}
+
+pub async fn cmd_git_push(dir: &Path) -> Result<PushResult> {
+    Ok(git_push(dir).await?)
+}
+
+pub async fn cmd_git_pull(dir: &Path) -> Result<PullResult> {
+    Ok(git_pull(dir).await?)
+}
+
+pub async fn cmd_git_pull_force_reset(
+    dir: &Path,
+    remote: &str,
+    branch: &str,
+) -> Result<PullResult> {
+    Ok(git_pull_force_reset(dir, remote, branch).await?)
+}
+
+pub async fn cmd_git_pull_merge(dir: &Path, remote: &str, branch: &str) -> Result<PullResult> {
+    Ok(git_pull_merge(dir, remote, branch).await?)
+}
+
+pub async fn cmd_git_add(dir: &Path, rela_paths: Vec<PathBuf>) -> Result<()> {
+    for path in rela_paths {
+        git_add(dir, &path)?;
+    }
+    Ok(())
+}
+
+pub async fn cmd_git_unstage(dir: &Path, rela_paths: Vec<PathBuf>) -> Result<()> {
+    for path in rela_paths {
+        git_unstage(dir, &path)?;
+    }
+    Ok(())
+}
+
+pub async fn cmd_git_reset_changes(dir: &Path) -> Result<()> {
+    Ok(git_reset_changes(dir).await?)
+}
+
+pub async fn cmd_git_restore_files(dir: &Path, rela_paths: Vec<PathBuf>) -> Result<()> {
+    for path in rela_paths {
+        git_restore(dir, &path)?;
+    }
+    Ok(())
+}
+
+pub async fn cmd_git_restore_file_from_commit(
+    dir: &Path,
+    commit_oid: &str,
+    rela_path: PathBuf,
+) -> Result<()> {
+    Ok(git_restore_file_from_commit(dir, commit_oid, &rela_path)?)
+}
+
+pub async fn cmd_git_add_credential(
+    remote_url: &str,
+    username: &str,
+    password: &str,
+) -> Result<()> {
+    Ok(git_add_credential(remote_url, username, password).await?)
+}
+
+pub async fn cmd_git_remotes(dir: &Path) -> Result<Vec<GitRemote>> {
+    Ok(git_remotes(dir)?)
+}
+
+pub async fn cmd_git_add_remote(dir: &Path, name: &str, url: &str) -> Result<GitRemote> {
+    Ok(git_add_remote(dir, name, url)?)
+}
+
+pub async fn cmd_git_rm_remote(dir: &Path, name: &str) -> Result<()> {
+    Ok(git_rm_remote(dir, name)?)
+}
diff --git a/crates-tauri/yaak-app-client/src/git_watcher.rs b/crates-tauri/yaak-app-client/src/git_watcher.rs
new file mode 100644
index 0000000..17e0cfc
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/git_watcher.rs
@@ -0,0 +1,185 @@
+use crate::error::{Error, Result};
+use chrono::Utc;
+use log::{debug, error, warn};
+use notify::Watcher;
+use std::path::Path;
+use std::sync::mpsc;
+use std::time::Duration;
+use tauri::{AppHandle, Listener, Runtime};
+use tokio::select;
+use tokio::sync::watch;
+use tokio::time::sleep;
+use yaak_git::{GitWorktreeStatus, git_path_is_ignored, git_repository_paths, git_worktree_status};
+use yaak_rpc_schema::GitWatchResult;
+
+const GIT_STATUS_COALESCE_WINDOW: Duration = Duration::from_millis(250);
+
+pub(crate) async fn watch_git_worktree_status<R, F>(
+    app_handle: AppHandle<R>,
+    dir: &Path,
+    on_status: F,
+) -> Result<GitWatchResult>
+where
+    R: Runtime,
+    F: Fn(GitWorktreeStatus) + Send + Sync + 'static,
+{
+    let paths = git_repository_paths(dir)?;
+    let repo_dir = dir.to_path_buf();
+    let workdir = paths.workdir;
+    let gitdir = paths.gitdir;
+    let commondir = paths.commondir;
+
+    let (tx, rx) = mpsc::channel::<notify::Result<notify::Event>>();
+    let mut watcher = notify::recommended_watcher(tx)
+        .map_err(|e| Error::GenericError(format!("Failed to watch Git repository: {e}")))?;
+
+    // Watch only the directory Yaak syncs to, not the whole worktree — the
+    // containing repo may be huge and busy (e.g. a sync dir inside a monorepo),
+    // and watching it all burns CPU re-checking status for unrelated changes
+    watcher
+        .watch(&repo_dir, notify::RecursiveMode::Recursive)
+        .map_err(|e| Error::GenericError(format!("Failed to watch Git sync directory: {e}")))?;
+
+    // Watch the git metadata that affects branch/status info: the top-level
+    // gitdir files (HEAD, index) and refs. Not the whole gitdir, since
+    // .git/objects churns constantly during fetches and gc. Refs and
+    // packed-refs live in the common dir, which only differs from the gitdir
+    // for linked worktrees
+    watcher
+        .watch(&gitdir, notify::RecursiveMode::NonRecursive)
+        .map_err(|e| Error::GenericError(format!("Failed to watch Git metadata: {e}")))?;
+    if commondir != gitdir {
+        watcher
+            .watch(&commondir, notify::RecursiveMode::NonRecursive)
+            .map_err(|e| Error::GenericError(format!("Failed to watch Git common dir: {e}")))?;
+    }
+    let refs_dir = commondir.join("refs");
+    if refs_dir.exists() {
+        watcher
+            .watch(&refs_dir, notify::RecursiveMode::Recursive)
+            .map_err(|e| Error::GenericError(format!("Failed to watch Git refs: {e}")))?;
+    }
+
+    let (async_tx, mut async_rx) = tokio::sync::mpsc::channel::<notify::Result<notify::Event>>(100);
+    std::thread::spawn(move || {
+        for res in rx {
+            if async_tx.blocking_send(res).is_err() {
+                break;
+            }
+        }
+    });
+
+    let (cancel_tx, cancel_rx) = watch::channel(());
+    let mut cancel_rx = cancel_rx;
+    send_worktree_status(&repo_dir, &on_status);
+
+    tauri::async_runtime::spawn(async move {
+        let _watcher = watcher;
+        loop {
+            select! {
+                Some(event_res) = async_rx.recv() => {
+                    handle_git_watch_event(
+                        event_res,
+                        &mut async_rx,
+                        &repo_dir,
+                        &workdir,
+                        &gitdir,
+                        &commondir,
+                        &on_status,
+                    ).await;
+                }
+                _ = cancel_rx.changed() => {
+                    break;
+                }
+            }
+        }
+    });
+
+    let app_handle_inner = app_handle.clone();
+    let unlisten_event = format!("git-watch-unlisten-{}", Utc::now().timestamp_millis());
+    app_handle.listen_any(unlisten_event.clone(), move |event| {
+        app_handle_inner.unlisten(event.id());
+        if let Err(e) = cancel_tx.send(()) {
+            warn!("Failed to send git watch cancel signal {e:?}");
+        }
+    });
+
+    Ok(GitWatchResult { unlisten_event })
+}
+
+async fn handle_git_watch_event(
+    event_res: notify::Result<notify::Event>,
+    async_rx: &mut tokio::sync::mpsc::Receiver<notify::Result<notify::Event>>,
+    repo_dir: &Path,
+    workdir: &Path,
+    gitdir: &Path,
+    commondir: &Path,
+    on_status: &impl Fn(GitWorktreeStatus),
+) {
+    if !is_relevant_git_watch_event(event_res, repo_dir, workdir, gitdir, commondir) {
+        return;
+    }
+
+    send_worktree_status(repo_dir, on_status);
+
+    let settle_window = sleep(GIT_STATUS_COALESCE_WINDOW);
+    tokio::pin!(settle_window);
+    loop {
+        select! {
+            Some(event_res) = async_rx.recv() => {
+                let _ = is_relevant_git_watch_event(event_res, repo_dir, workdir, gitdir, commondir);
+            }
+            _ = &mut settle_window => {
+                break;
+            }
+        }
+    }
+
+    send_worktree_status(repo_dir, on_status);
+}
+
+fn is_relevant_git_watch_event(
+    event_res: notify::Result<notify::Event>,
+    repo_dir: &Path,
+    workdir: &Path,
+    gitdir: &Path,
+    commondir: &Path,
+) -> bool {
+    let event = match event_res {
+        Ok(event) => event,
+        Err(e) => {
+            error!("Git watch error: {:?}", e);
+            return false;
+        }
+    };
+
+    for path in event.paths {
+        if path.strip_prefix(gitdir).is_ok() || path.strip_prefix(commondir).is_ok() {
+            return true;
+        }
+
+        let Ok(rela_path) = path.strip_prefix(workdir) else {
+            continue;
+        };
+
+        match git_path_is_ignored(repo_dir, rela_path) {
+            Ok(true) => {}
+            Ok(false) => return true,
+            Err(e) => {
+                debug!("Failed to check Git ignore status for {:?}: {e}", rela_path);
+                return true;
+            }
+        }
+    }
+
+    false
+}
+
+fn send_worktree_status(repo_dir: &Path, on_status: &impl Fn(GitWorktreeStatus)) {
+    match git_worktree_status(repo_dir) {
+        Ok(status) => on_status(status),
+        Err(e) => {
+            warn!("Failed to get git worktree status: {e}");
+        }
+    }
+}
diff --git a/crates-tauri/yaak-app-client/src/grpc.rs b/crates-tauri/yaak-app-client/src/grpc.rs
new file mode 100644
index 0000000..2829ae4
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/grpc.rs
@@ -0,0 +1,80 @@
+use std::collections::BTreeMap;
+
+use crate::PluginContextExt;
+use crate::error::Result;
+use KeyAndValueRef::{Ascii, Binary};
+use tauri::{Runtime, WebviewWindow};
+use yaak_grpc::{KeyAndValueRef, MetadataMap};
+use yaak_models::models::GrpcRequest;
+use yaak_plugins::events::{CallHttpAuthenticationRequest, HttpHeader};
+
+pub(crate) fn metadata_to_map(metadata: MetadataMap) -> BTreeMap<String, String> {
+    let mut entries = BTreeMap::new();
+    for r in metadata.iter() {
+        match r {
+            Ascii(k, v) => entries.insert(k.to_string(), v.to_str().unwrap().to_string()),
+            Binary(k, v) => entries.insert(k.to_string(), format!("{:?}", v)),
+        };
+    }
+    entries
+}
+
+pub(crate) async fn build_metadata<R: Runtime>(
+    window: &WebviewWindow<R>,
+    request: &GrpcRequest,
+    authentication_context_id: &str,
+) -> Result<BTreeMap<String, String>> {
+    let plugin_manager = crate::plugins_ext::plugin_manager(window).await?;
+    let mut metadata = BTreeMap::new();
+
+    // Add the rest of metadata
+    for h in request.metadata.clone() {
+        if h.name.is_empty() && h.value.is_empty() {
+            continue;
+        }
+
+        if !h.enabled {
+            continue;
+        }
+
+        metadata.insert(h.name, h.value);
+    }
+
+    match request.authentication_type.clone() {
+        None => {
+            // No authentication found. Not even inherited
+        }
+        Some(authentication_type) if authentication_type == "none" => {
+            // Explicitly no authentication
+        }
+        Some(authentication_type) => {
+            let auth = request.authentication.clone();
+            let plugin_req = CallHttpAuthenticationRequest {
+                context_id: format!("{:x}", md5::compute(authentication_context_id)),
+                values: serde_json::from_value(serde_json::to_value(&auth)?)?,
+                method: "POST".to_string(),
+                url: request.url.clone(),
+                headers: metadata
+                    .iter()
+                    .map(|(name, value)| HttpHeader {
+                        name: name.to_string(),
+                        value: value.to_string(),
+                    })
+                    .collect(),
+                body: None,
+            };
+            let plugin_result = plugin_manager
+                .call_http_authentication(
+                    &window.plugin_context(),
+                    &authentication_type,
+                    plugin_req,
+                )
+                .await?;
+            for header in plugin_result.set_headers.unwrap_or_default() {
+                metadata.insert(header.name, header.value);
+            }
+        }
+    }
+
+    Ok(metadata)
+}
diff --git a/crates-tauri/yaak-app-client/src/history.rs b/crates-tauri/yaak-app-client/src/history.rs
new file mode 100644
index 0000000..a561491
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/history.rs
@@ -0,0 +1,78 @@
+use crate::models_ext::QueryManagerExt;
+use chrono::{NaiveDateTime, Utc};
+use log::debug;
+use std::sync::OnceLock;
+use tauri::{AppHandle, Runtime, is_dev};
+use yaak_models::util::UpdateSource;
+
+const NAMESPACE: &str = "analytics";
+const NUM_LAUNCHES_KEY: &str = "num_launches";
+const LAST_VERSION_KEY: &str = "last_tracked_version";
+const PREV_VERSION_KEY: &str = "last_tracked_version_prev";
+const VERSION_SINCE_KEY: &str = "last_tracked_version_since";
+
+#[derive(Default, Debug, Clone)]
+pub struct LaunchEventInfo {
+    pub current_version: String,
+    pub previous_version: String,
+    pub launched_after_update: bool,
+    pub version_since: NaiveDateTime,
+    pub user_since: NaiveDateTime,
+    pub num_launches: i32,
+}
+
+static LAUNCH_INFO: OnceLock<LaunchEventInfo> = OnceLock::new();
+
+pub fn get_or_upsert_launch_info<R: Runtime>(app_handle: &AppHandle<R>) -> &LaunchEventInfo {
+    LAUNCH_INFO.get_or_init(|| {
+        let now = Utc::now().naive_utc();
+        let mut info = LaunchEventInfo {
+            version_since: app_handle.db().get_key_value_dte(NAMESPACE, VERSION_SINCE_KEY, now),
+            current_version: app_handle.package_info().version.to_string(),
+            user_since: app_handle.db().get_settings().created_at,
+            num_launches: app_handle.db().get_key_value_int(NAMESPACE, NUM_LAUNCHES_KEY, 0) + 1,
+
+            // The rest will be set below
+            ..Default::default()
+        };
+
+        if is_dev() {
+            info.current_version = "0.0.1".to_string();
+        }
+
+        app_handle
+            .with_tx(|tx| {
+                // Load the previously tracked version
+                let curr_db = tx.get_key_value_str(NAMESPACE, LAST_VERSION_KEY, "");
+                let prev_db = tx.get_key_value_str(NAMESPACE, PREV_VERSION_KEY, "");
+
+                // We just updated if the app version is different from the last tracked version we stored
+                if !curr_db.is_empty() && info.current_version != curr_db {
+                    info.launched_after_update = true;
+                }
+
+                // If we just updated, track the previous version as the "previous" current version
+                if info.launched_after_update {
+                    info.previous_version = curr_db.clone();
+                    info.version_since = now;
+                } else {
+                    info.previous_version = prev_db.clone();
+                }
+
+                // Rotate stored versions: move previous into the "prev" slot before overwriting
+                let source = &UpdateSource::Background;
+
+                tx.set_key_value_str(NAMESPACE, PREV_VERSION_KEY, &info.previous_version, source);
+                tx.set_key_value_str(NAMESPACE, LAST_VERSION_KEY, &info.current_version, source);
+                tx.set_key_value_dte(NAMESPACE, VERSION_SINCE_KEY, info.version_since, source);
+                tx.set_key_value_int(NAMESPACE, NUM_LAUNCHES_KEY, info.num_launches, source);
+
+                Ok(())
+            })
+            .unwrap();
+
+        debug!("Initialized launch info");
+
+        info
+    })
+}
diff --git a/crates-tauri/yaak-app-client/src/http_request.rs b/crates-tauri/yaak-app-client/src/http_request.rs
new file mode 100644
index 0000000..b8a63b9
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/http_request.rs
@@ -0,0 +1,179 @@
+use crate::PluginContextExt;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use crate::models_ext::BlobManagerExt;
+use crate::models_ext::QueryManagerExt;
+use log::warn;
+use std::sync::Arc;
+use std::time::Instant;
+use tauri::{AppHandle, Manager, Runtime, WebviewWindow};
+use tokio::sync::watch::Receiver;
+use yaak::send::{ResponseBody, SendHttpRequestWithPluginsParams, send_http_request_with_plugins};
+use yaak_crypto::manager::EncryptionManager;
+use yaak_http::manager::HttpConnectionManager;
+use yaak_models::models::{CookieJar, Environment, HttpRequest, HttpResponse, HttpResponseState};
+use yaak_models::util::UpdateSource;
+use yaak_plugins::events::PluginContext;
+
+/// Context for managing response state during HTTP transactions.
+/// Handles both persisted responses (stored in DB) and ephemeral responses (in-memory only).
+struct ResponseContext<R: Runtime> {
+    app_handle: AppHandle<R>,
+    response: HttpResponse,
+    update_source: UpdateSource,
+}
+
+impl<R: Runtime> ResponseContext<R> {
+    fn new(app_handle: AppHandle<R>, response: HttpResponse, update_source: UpdateSource) -> Self {
+        Self { app_handle, response, update_source }
+    }
+
+    /// Whether this response is persisted (has a non-empty ID)
+    fn is_persisted(&self) -> bool {
+        !self.response.id.is_empty()
+    }
+
+    /// Update the response state. For persisted responses, fetches from DB, applies the
+    /// closure, and updates the DB. For ephemeral responses, just applies the closure
+    /// to the in-memory response.
+    fn update<F>(&mut self, func: F) -> Result<()>
+    where
+        F: FnOnce(&mut HttpResponse),
+    {
+        if self.is_persisted() {
+            let r = self.app_handle.with_tx(|tx| {
+                let mut r = tx.get_http_response(&self.response.id)?;
+                func(&mut r);
+                tx.update_http_response_if_id(&r, &self.update_source)?;
+                Ok(r)
+            })?;
+            self.response = r;
+            Ok(())
+        } else {
+            func(&mut self.response);
+            Ok(())
+        }
+    }
+
+    /// Get the current response state
+    fn response(&self) -> &HttpResponse {
+        &self.response
+    }
+}
+
+/// What a send produced: the response, and where its body went.
+pub struct SentHttpRequest {
+    pub response: HttpResponse,
+    pub body: ResponseBody,
+}
+
+pub async fn send_http_request<R: Runtime>(
+    window: &WebviewWindow<R>,
+    unrendered_request: &HttpRequest,
+    og_response: &HttpResponse,
+    environment: Option<Environment>,
+    cookie_jar: Option<CookieJar>,
+    cancelled_rx: &mut Receiver<bool>,
+) -> Result<SentHttpRequest> {
+    send_http_request_with_context(
+        window,
+        unrendered_request,
+        og_response,
+        environment,
+        cookie_jar,
+        cancelled_rx,
+        &window.plugin_context(),
+    )
+    .await
+}
+
+pub async fn send_http_request_with_context<R: Runtime>(
+    window: &WebviewWindow<R>,
+    unrendered_request: &HttpRequest,
+    og_response: &HttpResponse,
+    environment: Option<Environment>,
+    cookie_jar: Option<CookieJar>,
+    cancelled_rx: &Receiver<bool>,
+    plugin_context: &PluginContext,
+) -> Result<SentHttpRequest> {
+    let app_handle = window.app_handle().clone();
+    let update_source = UpdateSource::from_window_label(window.label());
+    let mut response_ctx =
+        ResponseContext::new(app_handle.clone(), og_response.clone(), update_source);
+
+    // Execute the inner send logic and handle errors consistently
+    let start = Instant::now();
+    let result = send_http_request_inner(
+        window,
+        unrendered_request,
+        environment,
+        cookie_jar,
+        cancelled_rx,
+        plugin_context,
+        &mut response_ctx,
+    )
+    .await;
+
+    match result {
+        Ok(sent) => Ok(sent),
+        Err(e) => {
+            let error = e.to_string();
+            let elapsed = start.elapsed().as_millis() as i32;
+            warn!("Failed to send request: {error:?}");
+            let _ = response_ctx.update(|r| {
+                r.state = HttpResponseState::Closed;
+                r.elapsed = elapsed;
+                if r.elapsed_headers == 0 {
+                    r.elapsed_headers = elapsed;
+                }
+                r.error = Some(error);
+            });
+            // The send failed, so whatever body exists is the partial one
+            // already on disk under the response's id.
+            Ok(SentHttpRequest {
+                response: response_ctx.response().clone(),
+                body: ResponseBody::Stored,
+            })
+        }
+    }
+}
+
+async fn send_http_request_inner<R: Runtime>(
+    window: &WebviewWindow<R>,
+    unrendered_request: &HttpRequest,
+    environment: Option<Environment>,
+    cookie_jar: Option<CookieJar>,
+    cancelled_rx: &Receiver<bool>,
+    plugin_context: &PluginContext,
+    response_ctx: &mut ResponseContext<R>,
+) -> Result<SentHttpRequest> {
+    let app_handle = window.app_handle().clone();
+    let plugin_manager = Arc::new(crate::plugins_ext::plugin_manager(&app_handle).await?);
+    let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
+    let connection_manager = app_handle.state::<HttpConnectionManager>();
+    let environment_id = environment.map(|e| e.id);
+    let cookie_jar_id = cookie_jar.as_ref().map(|jar| jar.id.clone());
+
+    let response_dir = app_handle.path().app_data_dir()?.join("responses");
+    let result = send_http_request_with_plugins(SendHttpRequestWithPluginsParams {
+        query_manager: app_handle.db_manager().inner(),
+        blob_manager: app_handle.blob_manager().inner(),
+        request: unrendered_request.clone(),
+        environment_id: environment_id.as_deref(),
+        update_source: response_ctx.update_source.clone(),
+        cookie_jar_id,
+        response_dir: &response_dir,
+        emit_events_to: None,
+        emit_response_body_chunks_to: None,
+        existing_response: Some(response_ctx.response().clone()),
+        plugin_manager,
+        encryption_manager,
+        plugin_context,
+        cancelled_rx: Some(cancelled_rx.clone()),
+        connection_manager: connection_manager.inner(),
+    })
+    .await
+    .map_err(|e| GenericError(e.to_string()))?;
+
+    Ok(SentHttpRequest { response: result.response, body: result.response_body })
+}
diff --git a/crates-tauri/yaak-app-client/src/import.rs b/crates-tauri/yaak-app-client/src/import.rs
new file mode 100644
index 0000000..127f3ee
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/import.rs
@@ -0,0 +1,185 @@
+use crate::PluginContextExt;
+use crate::error::{Error, Result};
+use crate::models_ext::QueryManagerExt;
+use std::fs::read_to_string;
+use std::io::ErrorKind;
+use tauri::{Manager, Runtime, WebviewWindow};
+use yaak::import::{self, PlanImportDataParams};
+use yaak_api::{ApiClientKind, yaak_api_client};
+use yaak_models::util::{BatchUpsertResult, ImportDestination, ImportOrigin, ImportPlan};
+
+pub(crate) async fn import_data<R: Runtime>(
+    window: &WebviewWindow<R>,
+    file_path: &str,
+    origin: Option<ImportOrigin>,
+) -> Result<BatchUpsertResult> {
+    let contents = read_import_file(file_path)?;
+    let plan =
+        plan_import_contents(window, &contents, ImportDestination::NewWorkspace, origin).await?;
+    commit_import(window, plan)
+}
+
+pub(crate) async fn plan_import_data<R: Runtime>(
+    window: &WebviewWindow<R>,
+    file_path: &str,
+    destination: ImportDestination,
+) -> Result<ImportPlan> {
+    let contents = read_import_file(file_path)?;
+    plan_import_contents(window, &contents, destination, Some(file_origin(file_path))).await
+}
+
+pub(crate) async fn plan_import_url<R: Runtime>(
+    window: &WebviewWindow<R>,
+    url: &str,
+    destination: ImportDestination,
+) -> Result<ImportPlan> {
+    let url = normalize_import_url(url)?;
+    let contents = fetch_import_url(window, &url).await?;
+    plan_import_contents(window, &contents, destination, Some(url_origin(&url))).await
+}
+
+async fn plan_import_contents<R: Runtime>(
+    window: &WebviewWindow<R>,
+    contents: &str,
+    destination: ImportDestination,
+    origin: Option<ImportOrigin>,
+) -> Result<ImportPlan> {
+    let plugin_manager = crate::plugins_ext::plugin_manager(window).await?;
+    let query_manager = window.db_manager();
+    let plugin_context = window.plugin_context();
+
+    Ok(import::plan_import_data(PlanImportDataParams {
+        query_manager: &query_manager,
+        plugin_manager: &plugin_manager,
+        plugin_context: &plugin_context,
+        destination,
+        contents,
+        origin,
+    })
+    .await?)
+}
+
+/// Canonicalize so re-importing the same file through a different spelling of its path still
+/// matches the linked source.
+pub(crate) fn file_origin(file_path: &str) -> ImportOrigin {
+    let path = std::path::Path::new(file_path);
+    let canonical = std::fs::canonicalize(path).unwrap_or_else(|_| path.to_path_buf());
+    let label = canonical
+        .file_name()
+        .map(|name| name.to_string_lossy().to_string())
+        .unwrap_or_else(|| file_path.to_string());
+    ImportOrigin { origin: canonical.to_string_lossy().to_string(), label }
+}
+
+pub(crate) fn url_origin(url: &str) -> ImportOrigin {
+    ImportOrigin { origin: url.to_string(), label: url.to_string() }
+}
+
+pub(crate) fn commit_import<R: Runtime>(
+    window: &WebviewWindow<R>,
+    plan: ImportPlan,
+) -> Result<BatchUpsertResult> {
+    Ok(import::commit_import_plan(&window.db_manager(), plan)?)
+}
+
+/// Download an importable document (OpenAPI, Postman, Insomnia, …) so it can be fed to the same
+/// pipeline as a file on disk.
+///
+/// This uses Yaak's own API client, which follows the OS proxy but not the workspace's proxy,
+/// client certificate, or certificate-validation settings. Requests are unauthenticated, so
+/// specs behind auth must still be downloaded manually and imported as a file.
+async fn fetch_import_url<R: Runtime>(window: &WebviewWindow<R>, url: &str) -> Result<String> {
+    let url = normalize_import_url(url)?;
+    let app_version = window.app_handle().package_info().version.to_string();
+    let response = yaak_api_client(ApiClientKind::App, &app_version)?
+        .get(&url)
+        // The API client defaults to JSON, but specs are just as often YAML
+        .header("Accept", "*/*")
+        .send()
+        .await
+        .map_err(|err| Error::GenericError(format!("Failed to fetch {url}: {err}")))?;
+
+    let status = response.status();
+    if !status.is_success() {
+        return Err(Error::GenericError(format!("Failed to fetch {url}: responded with {status}")));
+    }
+
+    response
+        .text()
+        .await
+        .map_err(|err| Error::GenericError(format!("Failed to read response from {url}: {err}")))
+}
+
+pub(crate) fn normalize_import_url(url: &str) -> Result<String> {
+    let url = url.trim();
+    if url.is_empty() {
+        return Err(Error::GenericError("Import URL must not be empty".to_string()));
+    }
+
+    if url.starts_with("http://") || url.starts_with("https://") {
+        return Ok(url.to_string());
+    }
+
+    match url.split_once("://") {
+        Some((scheme, _)) => {
+            Err(Error::GenericError(format!("Import URL must be http or https, but got {scheme}")))
+        }
+        None => Ok(format!("https://{url}")),
+    }
+}
+
+fn read_import_file(file_path: &str) -> Result<String> {
+    read_to_string(file_path).map_err(|err| {
+        if err.kind() == ErrorKind::InvalidData {
+            Error::GenericError(format!(
+                "Import file must be UTF-8 text; binary files are not supported: {file_path}"
+            ))
+        } else {
+            Error::GenericError(format!("Unable to read import file {file_path}: {err}"))
+        }
+    })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::fs::{remove_file, write};
+    use std::time::{SystemTime, UNIX_EPOCH};
+
+    #[test]
+    fn read_import_file_returns_error_for_binary_file() {
+        let path = std::env::temp_dir().join(format!(
+            "yaak-import-binary-{}.pftrace",
+            SystemTime::now()
+                .duration_since(UNIX_EPOCH)
+                .expect("system time before unix epoch")
+                .as_nanos()
+        ));
+        write(&path, [0xff, 0xfe, 0xfd]).expect("write binary fixture");
+
+        let err = read_import_file(path.to_str().expect("temp path is utf-8"))
+            .expect_err("binary import should return an error");
+
+        assert!(err.to_string().contains("binary files are not supported"));
+
+        remove_file(path).expect("remove binary fixture");
+    }
+
+    #[test]
+    fn normalize_import_url_defaults_to_https() {
+        assert_eq!(
+            normalize_import_url(" example.com/openapi.yaml ").unwrap(),
+            "https://example.com/openapi.yaml"
+        );
+        assert_eq!(
+            normalize_import_url("http://example.com/openapi.yaml").unwrap(),
+            "http://example.com/openapi.yaml"
+        );
+    }
+
+    #[test]
+    fn normalize_import_url_rejects_other_schemes() {
+        assert!(normalize_import_url("file:///tmp/openapi.yaml").is_err());
+        assert!(normalize_import_url("  ").is_err());
+    }
+}
diff --git a/crates-tauri/yaak-app-client/src/lib.rs b/crates-tauri/yaak-app-client/src/lib.rs
new file mode 100644
index 0000000..e8c301e
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/lib.rs
@@ -0,0 +1,1590 @@
+extern crate core;
+use crate::encoding::read_response_body;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use crate::grpc::{build_metadata, metadata_to_map};
+use crate::http_request::send_http_request;
+use crate::import::{commit_import, plan_import_data, plan_import_url};
+use crate::models_ext::{BlobManagerExt, QueryManagerExt};
+use crate::notifications::YaakNotifier;
+use crate::render::{render_grpc_request, render_template};
+use crate::updates::{UpdateMode, UpdateTrigger, YaakUpdater};
+use crate::uri_scheme::handle_deep_link;
+use error::Result as YaakResult;
+use eventsource_client::{EventParser, SSE};
+use log::{debug, error, info, warn};
+use std::path::PathBuf;
+use std::str::FromStr;
+use std::sync::Arc;
+use std::time::Duration;
+use std::{fs, panic};
+use tauri::path::BaseDirectory;
+use tauri::{AppHandle, Emitter, RunEvent, State, WebviewWindow, is_dev};
+use tauri::{Listener, Runtime};
+use tauri::{Manager, WindowEvent};
+use tauri_plugin_deep_link::DeepLinkExt;
+use tauri_plugin_log::fern::colors::ColoredLevelConfig;
+use tauri_plugin_log::{Builder, Target, TargetKind, log};
+use tokio::sync::Mutex;
+use tokio::task::block_in_place;
+use tokio::time;
+use yaak::send::ResponseBody;
+use yaak_commands::resolve::resolve_grpc_request;
+use yaak_commands::responses::locate_response_body;
+use yaak_common::command::new_checked_command;
+use yaak_crypto::manager::EncryptionManager;
+use yaak_grpc::manager::{GrpcConfig, GrpcHandle};
+use yaak_grpc::{Code, ServiceDefinition};
+use yaak_mac_window::AppHandleMacWindowExt;
+use yaak_models::models::{
+    CookieJar, Environment, GrpcConnection, GrpcConnectionState, GrpcEvent, GrpcEventType,
+    HttpRequest, HttpResponse, HttpResponseState, Workspace,
+};
+use yaak_models::util::{BatchUpsertResult, ImportDestination, ImportPlan, UpdateSource};
+use yaak_plugins::events::{
+    Color, ErrorResponse, FilterResponse, InternalEvent, InternalEventPayload, PluginContext,
+    RenderPurpose, ShowToastRequest,
+};
+use yaak_plugins::template_callback::PluginTemplateCallback;
+use yaak_rpc_schema::{AppMetaData, EphemeralHttpResponse};
+use yaak_sse::sse::ServerSentEvent;
+use yaak_tauri_utils::window::WorkspaceWindowTrait;
+use yaak_templates::strip_json_comments::strip_json_comments;
+use yaak_templates::{RenderErrorBehavior, RenderOptions};
+use yaak_tls::find_client_certificate;
+
+mod encoding;
+mod error;
+mod feedback;
+mod git_ext;
+mod git_watcher;
+mod grpc;
+mod history;
+mod http_request;
+mod import;
+mod models_ext;
+mod notifications;
+mod plugin_events;
+mod plugins_ext;
+mod render;
+mod restart;
+mod rpc_ext;
+mod sync_ext;
+mod updates;
+mod uri_scheme;
+mod window_menu;
+mod ws_ext;
+
+#[cfg(not(any(feature = "cef", feature = "wry")))]
+compile_error!("Enable one Tauri runtime feature: `cef` or `wry`.");
+
+#[cfg(feature = "cef")]
+type TauriRuntime = tauri::Cef;
+#[cfg(all(not(feature = "cef"), feature = "wry"))]
+type TauriRuntime = tauri::Wry;
+
+fn setup_window_menu<R: Runtime>(win: &WebviewWindow<R>) -> Result<()> {
+    #[allow(unused_variables)]
+    let menu = window_menu::app_menu(win.app_handle())?;
+
+    // This causes the window to not be clickable (in AppImage), so disable on Linux
+    #[cfg(not(target_os = "linux"))]
+    win.app_handle().set_menu(menu).expect("Failed to set app menu");
+
+    let webview_window = win.clone();
+    win.on_menu_event(move |w, event| {
+        use tauri::{Emitter, LogicalSize, PhysicalSize};
+        use tauri_plugin_opener::OpenerExt;
+
+        if !w.is_focused().unwrap() {
+            return;
+        }
+
+        let event_id = event.id().0.as_str();
+        match event_id {
+            "hacked_quit" => {
+                w.webview_windows().iter().for_each(|(_, w)| {
+                    info!("Closing window {}", w.label());
+                    let _ = w.close();
+                });
+            }
+            "close" => w.close().unwrap(),
+            "zoom_reset" => w.emit("zoom_reset", true).unwrap(),
+            "zoom_in" => w.emit("zoom_in", true).unwrap(),
+            "zoom_out" => w.emit("zoom_out", true).unwrap(),
+            "settings" => w.emit("settings", true).unwrap(),
+            "open_feedback" => {
+                if let Err(e) =
+                    w.app_handle().opener().open_url("https://yaak.app/feedback", None::<&str>)
+                {
+                    warn!("Failed to open feedback {e:?}")
+                }
+            }
+
+            // Commands for development
+            "dev.reset_size" => webview_window.set_size(LogicalSize::new(1100.0, 600.0)).unwrap(),
+            "dev.reset_size_16x9" => {
+                let width = webview_window.outer_size().unwrap().width;
+                let height = width * 9 / 16;
+                webview_window.set_size(PhysicalSize::new(width, height)).unwrap()
+            }
+            "dev.reset_size_16x10" => {
+                let width = webview_window.outer_size().unwrap().width;
+                let height = width * 10 / 16;
+                webview_window.set_size(PhysicalSize::new(width, height)).unwrap()
+            }
+            "dev.refresh" => webview_window.eval("location.reload()").unwrap(),
+            "dev.generate_theme_css" => {
+                w.emit("generate_theme_css", true).unwrap();
+            }
+            "dev.show_home" => w.emit("show_home", true).unwrap(),
+            "dev.toggle_devtools" => {
+                if webview_window.is_devtools_open() {
+                    webview_window.close_devtools();
+                } else {
+                    webview_window.open_devtools();
+                }
+            }
+            _ => {}
+        }
+    });
+
+    Ok(())
+}
+
+fn initial_appearance_script<R: Runtime>(app_handle: &AppHandle<R>) -> Option<String> {
+    // Only report the appearance the OS prefers. The frontend needs it to resolve the
+    // "automatic" setting, so the configured appearance is never a substitute for it.
+    //
+    // NOTE: The value comes from the watcher state, not a fresh detection, so the frontend
+    //  only ever sees a snapshot when the change events that keep it fresh are also flowing.
+    let state = app_handle.try_state::<yaak_system_appearance::SystemAppearanceState>()?;
+    let appearance = state.last_appearance()?;
+    Some(yaak_system_appearance::initialization_script(appearance))
+}
+
+/// Extension trait for easily creating a PluginContext from a WebviewWindow
+pub trait PluginContextExt<R: Runtime> {
+    fn plugin_context(&self) -> PluginContext;
+}
+
+impl<R: Runtime> PluginContextExt<R> for WebviewWindow<R> {
+    fn plugin_context(&self) -> PluginContext {
+        PluginContext::new(Some(self.label().to_string()), self.workspace_id())
+    }
+}
+
+async fn cmd_metadata<R: Runtime>(app_handle: AppHandle<R>) -> YaakResult<AppMetaData> {
+    let app_data_dir = app_handle.path().app_data_dir()?;
+    let app_log_dir = app_handle.path().app_log_dir()?;
+    let vendored_plugin_dir =
+        app_handle.path().resolve("vendored/plugins", BaseDirectory::Resource)?;
+    let default_project_dir = app_handle.path().home_dir()?.join("YaakProjects");
+    let cli_version = detect_cli_version().await;
+    Ok(AppMetaData {
+        is_dev: is_dev(),
+        version: app_handle.package_info().version.to_string(),
+        cli_version,
+        name: app_handle.package_info().name.to_string(),
+        app_data_dir: app_data_dir.to_string_lossy().to_string(),
+        app_log_dir: app_log_dir.to_string_lossy().to_string(),
+        vendored_plugin_dir: vendored_plugin_dir.to_string_lossy().to_string(),
+        default_project_dir: default_project_dir.to_string_lossy().to_string(),
+        feature_license: cfg!(feature = "license"),
+        feature_updater: cfg!(feature = "updater"),
+    })
+}
+
+async fn detect_cli_version() -> Option<String> {
+    detect_cli_version_for_binary("yaak").await
+}
+
+async fn detect_cli_version_for_binary(program: &str) -> Option<String> {
+    let mut cmd = new_checked_command(program, "--version").await.ok()?;
+    let out = cmd.arg("--version").output().await.ok()?;
+    if !out.status.success() {
+        return None;
+    }
+
+    let line = String::from_utf8(out.stdout).ok()?;
+    let line = line.lines().find(|l| !l.trim().is_empty())?.trim();
+    let mut parts = line.split_whitespace();
+    let _name = parts.next();
+    Some(parts.next().unwrap_or(line).to_string())
+}
+
+async fn cmd_send_feedback<R: Runtime>(
+    app_handle: AppHandle<R>,
+    feature: String,
+    text: String,
+) -> YaakResult<()> {
+    feedback::send_feedback(&app_handle, feature, text).await;
+    Ok(())
+}
+
+async fn cmd_dismiss_notification<R: Runtime>(
+    window: WebviewWindow<R>,
+    notification_id: &str,
+    yaak_notifier: State<'_, Mutex<YaakNotifier>>,
+) -> YaakResult<()> {
+    Ok(yaak_notifier.lock().await.seen(&window, notification_id).await?)
+}
+
+async fn cmd_grpc_reflect<R: Runtime>(
+    request_id: &str,
+    environment_id: Option<&str>,
+    proto_files: Vec<String>,
+    window: WebviewWindow<R>,
+    app_handle: AppHandle<R>,
+    grpc_handle: State<'_, Mutex<GrpcHandle>>,
+) -> YaakResult<Vec<ServiceDefinition>> {
+    let unrendered_request = app_handle.db().get_grpc_request(request_id)?;
+    let (resolved_request, auth_context_id) =
+        resolve_grpc_request(&window.db(), &unrendered_request)?;
+
+    let environment_chain = app_handle.db().resolve_environments(
+        &unrendered_request.workspace_id,
+        unrendered_request.folder_id.as_deref(),
+        environment_id,
+    )?;
+    let resolved_settings =
+        app_handle.db().resolve_settings_for_grpc_request(&unrendered_request)?;
+
+    let plugin_manager = Arc::new(crate::plugins_ext::plugin_manager(&app_handle).await?);
+    let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
+    let req = render_grpc_request(
+        &resolved_request,
+        environment_chain,
+        &PluginTemplateCallback::new(
+            plugin_manager,
+            encryption_manager,
+            &PluginContext::new(Some(window.label().to_string()), window.workspace_id()),
+            RenderPurpose::Send,
+        ),
+        &RenderOptions { error_behavior: RenderErrorBehavior::Throw },
+    )
+    .await?;
+
+    let uri = safe_uri(&req.url);
+    let metadata = build_metadata(&window, &req, &auth_context_id).await?;
+    let settings = window.db().get_settings();
+    let client_certificate =
+        find_client_certificate(req.url.as_str(), &settings.client_certificates);
+    let proto_files: Vec<PathBuf> =
+        proto_files.iter().map(|p| PathBuf::from_str(p).unwrap()).collect();
+
+    // Always invalidate cached pool when this command is called, to force re-reflection
+    let mut handle = grpc_handle.lock().await;
+    handle.invalidate_pool(&req.id, &uri, &proto_files);
+
+    Ok(handle
+        .services(
+            &req.id,
+            &uri,
+            &proto_files,
+            &metadata,
+            resolved_settings.validate_certificates.value,
+            client_certificate,
+            resolved_settings.request_message_size.value,
+        )
+        .await
+        .map_err(|e| GenericError(e.to_string()))?)
+}
+
+async fn cmd_grpc_go<R: Runtime>(
+    request_id: &str,
+    environment_id: Option<&str>,
+    proto_files: Vec<String>,
+    app_handle: AppHandle<R>,
+    window: WebviewWindow<R>,
+    grpc_handle: State<'_, Mutex<GrpcHandle>>,
+) -> YaakResult<String> {
+    let unrendered_request = app_handle.db().get_grpc_request(request_id)?;
+    let (resolved_request, auth_context_id) =
+        resolve_grpc_request(&window.db(), &unrendered_request)?;
+    let environment_chain = app_handle.db().resolve_environments(
+        &unrendered_request.workspace_id,
+        unrendered_request.folder_id.as_deref(),
+        environment_id,
+    )?;
+    let resolved_settings =
+        app_handle.db().resolve_settings_for_grpc_request(&unrendered_request)?;
+
+    let plugin_manager = Arc::new(crate::plugins_ext::plugin_manager(&app_handle).await?);
+    let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
+    let request = render_grpc_request(
+        &resolved_request,
+        environment_chain.clone(),
+        &PluginTemplateCallback::new(
+            plugin_manager.clone(),
+            encryption_manager.clone(),
+            &PluginContext::new(Some(window.label().to_string()), window.workspace_id()),
+            RenderPurpose::Send,
+        ),
+        &RenderOptions { error_behavior: RenderErrorBehavior::Throw },
+    )
+    .await?;
+
+    let metadata = build_metadata(&window, &request, &auth_context_id).await?;
+
+    // Find matching client certificate for this URL
+    let settings = app_handle.db().get_settings();
+    let client_cert = find_client_certificate(&request.url, &settings.client_certificates);
+
+    let conn = app_handle.with_tx(|tx| {
+        tx.upsert_grpc_connection(
+            &GrpcConnection {
+                workspace_id: request.workspace_id.clone(),
+                request_id: request.id.clone(),
+                status: -1,
+                elapsed: 0,
+                state: GrpcConnectionState::Initialized,
+                url: request.url.clone(),
+                ..Default::default()
+            },
+            &UpdateSource::from_window_label(window.label()),
+        )
+    })?;
+
+    let conn_id = conn.id.clone();
+
+    let base_msg = GrpcEvent {
+        workspace_id: request.clone().workspace_id,
+        request_id: request.clone().id,
+        connection_id: conn.clone().id,
+        ..Default::default()
+    };
+
+    let (in_msg_tx, in_msg_rx) = tauri::async_runtime::channel::<String>(16);
+    let maybe_in_msg_tx = std::sync::Mutex::new(Some(in_msg_tx.clone()));
+    let (cancelled_tx, mut cancelled_rx) = tokio::sync::watch::channel(false);
+
+    let uri = safe_uri(&request.url);
+
+    let in_msg_stream = tokio_stream::wrappers::ReceiverStream::new(in_msg_rx);
+
+    let (service, method) = {
+        let req = request.clone();
+        match (req.service, req.method) {
+            (Some(service), Some(method)) => (service, method),
+            _ => return Err(GenericError("Service and method are required".to_string())),
+        }
+    };
+
+    let start = std::time::Instant::now();
+    let connection = grpc_handle
+        .lock()
+        .await
+        .connect(
+            &request.clone().id,
+            uri.as_str(),
+            &proto_files.iter().map(|p| PathBuf::from_str(p).unwrap()).collect(),
+            &metadata,
+            resolved_settings.validate_certificates.value,
+            client_cert.clone(),
+            resolved_settings.request_message_size.value,
+        )
+        .await;
+
+    let connection = match connection {
+        Ok(c) => c,
+        Err(err) => {
+            app_handle.with_tx(|tx| {
+                tx.upsert_grpc_connection(
+                    &GrpcConnection {
+                        elapsed: start.elapsed().as_millis() as i32,
+                        error: Some(err.to_string()),
+                        state: GrpcConnectionState::Closed,
+                        ..conn.clone()
+                    },
+                    &UpdateSource::from_window_label(window.label()),
+                )
+            })?;
+            return Ok(conn_id);
+        }
+    };
+
+    let method_desc =
+        connection.method(&service, &method).await.map_err(|e| GenericError(e.to_string()))?;
+
+    #[derive(serde::Deserialize)]
+    enum IncomingMsg {
+        Message(String),
+        Cancel,
+        Commit,
+    }
+
+    let cb = {
+        let cancelled_rx = cancelled_rx.clone();
+        let environment_chain = environment_chain.clone();
+        let window = window.clone();
+        let plugin_manager = plugin_manager.clone();
+        let encryption_manager = encryption_manager.clone();
+
+        move |ev: tauri::Event| {
+            if *cancelled_rx.borrow() {
+                // Stream is canceled
+                return;
+            }
+
+            let mut maybe_in_msg_tx = maybe_in_msg_tx.lock().expect("previous holder not to panic");
+            let in_msg_tx = if let Some(in_msg_tx) = maybe_in_msg_tx.as_ref() {
+                in_msg_tx
+            } else {
+                // This would mean that the stream is already committed because
+                // we have already dropped the sending half
+                return;
+            };
+
+            match serde_json::from_str::<IncomingMsg>(ev.payload()) {
+                Ok(IncomingMsg::Message(msg)) => {
+                    let window = window.clone();
+                    let environment_chain = environment_chain.clone();
+                    let plugin_manager = plugin_manager.clone();
+                    let encryption_manager = encryption_manager.clone();
+                    let msg = block_in_place(|| {
+                        tauri::async_runtime::block_on(async {
+                            let result = render_template(
+                                msg.as_str(),
+                                environment_chain,
+                                &PluginTemplateCallback::new(
+                                    plugin_manager,
+                                    encryption_manager,
+                                    &PluginContext::new(
+                                        Some(window.label().to_string()),
+                                        window.workspace_id(),
+                                    ),
+                                    RenderPurpose::Send,
+                                ),
+                                &RenderOptions { error_behavior: RenderErrorBehavior::Throw },
+                            )
+                            .await;
+                            result.expect("Failed to render template")
+                        })
+                    });
+                    let msg = strip_json_comments(&msg);
+                    in_msg_tx.try_send(msg.clone()).unwrap();
+                }
+                Ok(IncomingMsg::Commit) => {
+                    maybe_in_msg_tx.take();
+                }
+                Ok(IncomingMsg::Cancel) => {
+                    cancelled_tx.send_replace(true);
+                }
+                Err(e) => {
+                    error!("Failed to parse gRPC message: {:?}", e);
+                }
+            }
+        }
+    };
+    let event_handler = app_handle.listen_any(format!("grpc_client_msg_{}", conn.id).as_str(), cb);
+
+    let grpc_listen = {
+        let window = window.clone();
+        let app_handle = app_handle.clone();
+        let base_event = base_msg.clone();
+        let environment_chain = environment_chain.clone();
+        let req = request.clone();
+        let msg = if req.message.is_empty() { "{}".to_string() } else { req.message };
+        let msg = render_template(
+            msg.as_str(),
+            environment_chain,
+            &PluginTemplateCallback::new(
+                plugin_manager.clone(),
+                encryption_manager.clone(),
+                &PluginContext::new(Some(window.label().to_string()), window.workspace_id()),
+                RenderPurpose::Send,
+            ),
+            &RenderOptions { error_behavior: RenderErrorBehavior::Throw },
+        )
+        .await?;
+        let msg = strip_json_comments(&msg);
+
+        app_handle.with_tx(|tx| {
+            tx.upsert_grpc_event(
+                &GrpcEvent {
+                    content: format!("Connecting to {}", req.url),
+                    event_type: GrpcEventType::ConnectionStart,
+                    metadata: metadata.clone(),
+                    ..base_event.clone()
+                },
+                &UpdateSource::from_window_label(window.label()),
+            )
+        })?;
+
+        async move {
+            // Create callback for streaming methods that handles both success and error
+            let on_message = {
+                let app_handle = app_handle.clone();
+                let base_event = base_event.clone();
+                let window_label = window.label().to_string();
+                move |result: std::result::Result<String, String>| match result {
+                    Ok(msg) => {
+                        let _ = app_handle.with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &GrpcEvent {
+                                    content: msg,
+                                    event_type: GrpcEventType::ClientMessage,
+                                    ..base_event.clone()
+                                },
+                                &UpdateSource::from_window_label(&window_label),
+                            )
+                        });
+                    }
+                    Err(error) => {
+                        let _ = app_handle.with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &GrpcEvent {
+                                    content: format!("Failed to send message: {}", error),
+                                    event_type: GrpcEventType::Error,
+                                    ..base_event.clone()
+                                },
+                                &UpdateSource::from_window_label(&window_label),
+                            )
+                        });
+                    }
+                }
+            };
+
+            let (maybe_stream, maybe_msg) =
+                match (method_desc.is_client_streaming(), method_desc.is_server_streaming()) {
+                    (true, true) => (
+                        Some(
+                            connection
+                                .streaming(
+                                    &service,
+                                    &method,
+                                    in_msg_stream,
+                                    &metadata,
+                                    client_cert.clone(),
+                                    on_message.clone(),
+                                )
+                                .await,
+                        ),
+                        None,
+                    ),
+                    (true, false) => (
+                        None,
+                        Some(
+                            connection
+                                .client_streaming(
+                                    &service,
+                                    &method,
+                                    in_msg_stream,
+                                    &metadata,
+                                    client_cert.clone(),
+                                    on_message.clone(),
+                                )
+                                .await,
+                        ),
+                    ),
+                    (false, true) => (
+                        Some(connection.server_streaming(&service, &method, &msg, &metadata).await),
+                        None,
+                    ),
+                    (false, false) => (
+                        None,
+                        Some(
+                            connection
+                                .unary(&service, &method, &msg, &metadata, client_cert.clone())
+                                .await,
+                        ),
+                    ),
+                };
+
+            if !method_desc.is_client_streaming() {
+                app_handle
+                    .with_tx(|tx| {
+                        tx.upsert_grpc_event(
+                            &GrpcEvent {
+                                event_type: GrpcEventType::ClientMessage,
+                                content: msg,
+                                ..base_event.clone()
+                            },
+                            &UpdateSource::from_window_label(window.label()),
+                        )
+                    })
+                    .unwrap();
+            }
+
+            match maybe_msg {
+                Some(Ok(msg)) => {
+                    app_handle
+                        .with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &GrpcEvent {
+                                    metadata: metadata_to_map(msg.metadata().clone()),
+                                    content: if msg.metadata().len() == 0 {
+                                        "Received response"
+                                    } else {
+                                        "Received response with metadata"
+                                    }
+                                    .to_string(),
+                                    event_type: GrpcEventType::Info,
+                                    ..base_event.clone()
+                                },
+                                &UpdateSource::from_window_label(window.label()),
+                            )
+                        })
+                        .unwrap();
+                    let response_message = msg.into_inner();
+                    let content = match connection
+                        .serialize_message(&response_message, &metadata, client_cert.clone())
+                        .await
+                    {
+                        Ok(content) => content,
+                        Err(err) => {
+                            app_handle
+                                .with_tx(|tx| {
+                                    tx.upsert_grpc_event(
+                                        &GrpcEvent {
+                                            content: "Failed to read response".to_string(),
+                                            error: Some(err.to_string()),
+                                            status: Some(Code::Internal as i32),
+                                            event_type: GrpcEventType::ConnectionEnd,
+                                            ..base_event.clone()
+                                        },
+                                        &UpdateSource::from_window_label(window.label()),
+                                    )
+                                })
+                                .unwrap();
+                            return;
+                        }
+                    };
+                    app_handle
+                        .with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &GrpcEvent {
+                                    content,
+                                    event_type: GrpcEventType::ServerMessage,
+                                    ..base_event.clone()
+                                },
+                                &UpdateSource::from_window_label(window.label()),
+                            )
+                        })
+                        .unwrap();
+                    app_handle
+                        .with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &GrpcEvent {
+                                    content: "Connection complete".to_string(),
+                                    event_type: GrpcEventType::ConnectionEnd,
+                                    status: Some(Code::Ok as i32),
+                                    ..base_event.clone()
+                                },
+                                &UpdateSource::from_window_label(window.label()),
+                            )
+                        })
+                        .unwrap();
+                }
+                Some(Err(yaak_grpc::error::Error::GrpcStreamError(e))) => {
+                    app_handle
+                        .with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &(match e.status {
+                                    Some(s) => GrpcEvent {
+                                        error: Some(s.message().to_string()),
+                                        status: Some(s.code() as i32),
+                                        content: "Request failed".to_string(),
+                                        metadata: metadata_to_map(s.metadata().clone()),
+                                        event_type: GrpcEventType::ConnectionEnd,
+                                        ..base_event.clone()
+                                    },
+                                    None => GrpcEvent {
+                                        error: Some(e.message),
+                                        status: Some(Code::Unknown as i32),
+                                        content: "Request failed".to_string(),
+                                        event_type: GrpcEventType::ConnectionEnd,
+                                        ..base_event.clone()
+                                    },
+                                }),
+                                &UpdateSource::from_window_label(window.label()),
+                            )
+                        })
+                        .unwrap();
+                }
+                Some(Err(e)) => {
+                    app_handle
+                        .with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &GrpcEvent {
+                                    error: Some(e.to_string()),
+                                    status: Some(Code::Unknown as i32),
+                                    content: "Request failed".to_string(),
+                                    event_type: GrpcEventType::ConnectionEnd,
+                                    ..base_event.clone()
+                                },
+                                &UpdateSource::from_window_label(window.label()),
+                            )
+                        })
+                        .unwrap();
+                }
+                None => {
+                    // Server streaming doesn't return the initial message
+                }
+            }
+
+            let mut stream = match maybe_stream {
+                Some(Ok(stream)) => {
+                    app_handle
+                        .with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &GrpcEvent {
+                                    metadata: metadata_to_map(stream.metadata().clone()),
+                                    content: if stream.metadata().len() == 0 {
+                                        "Received response"
+                                    } else {
+                                        "Received response with metadata"
+                                    }
+                                    .to_string(),
+                                    event_type: GrpcEventType::Info,
+                                    ..base_event.clone()
+                                },
+                                &UpdateSource::from_window_label(window.label()),
+                            )
+                        })
+                        .unwrap();
+                    stream.into_inner()
+                }
+                Some(Err(yaak_grpc::error::Error::GrpcStreamError(e))) => {
+                    warn!("GRPC stream error {e:?}");
+                    app_handle
+                        .with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &(match e.status {
+                                    Some(s) => GrpcEvent {
+                                        error: Some(s.message().to_string()),
+                                        status: Some(s.code() as i32),
+                                        content: "Stream failed".to_string(),
+                                        metadata: metadata_to_map(s.metadata().clone()),
+                                        event_type: GrpcEventType::ConnectionEnd,
+                                        ..base_event.clone()
+                                    },
+                                    None => GrpcEvent {
+                                        error: Some(e.message),
+                                        status: Some(Code::Unknown as i32),
+                                        content: "Stream failed".to_string(),
+                                        event_type: GrpcEventType::ConnectionEnd,
+                                        ..base_event.clone()
+                                    },
+                                }),
+                                &UpdateSource::from_window_label(window.label()),
+                            )
+                        })
+                        .unwrap();
+                    return;
+                }
+                Some(Err(e)) => {
+                    app_handle
+                        .with_tx(|tx| {
+                            tx.upsert_grpc_event(
+                                &GrpcEvent {
+                                    error: Some(e.to_string()),
+                                    status: Some(Code::Unknown as i32),
+                                    content: "Stream failed".to_string(),
+                                    event_type: GrpcEventType::ConnectionEnd,
+                                    ..base_event.clone()
+                                },
+                                &UpdateSource::from_window_label(window.label()),
+                            )
+                        })
+                        .unwrap();
+                    return;
+                }
+                None => return,
+            };
+
+            loop {
+                match stream.message().await {
+                    Ok(Some(msg)) => {
+                        let message = match connection
+                            .serialize_message(&msg, &metadata, client_cert.clone())
+                            .await
+                        {
+                            Ok(message) => message,
+                            Err(err) => {
+                                app_handle
+                                    .with_tx(|tx| {
+                                        tx.upsert_grpc_event(
+                                            &GrpcEvent {
+                                                content: "Failed to read response".to_string(),
+                                                error: Some(err.to_string()),
+                                                status: Some(Code::Internal as i32),
+                                                event_type: GrpcEventType::ConnectionEnd,
+                                                ..base_event.clone()
+                                            },
+                                            &UpdateSource::from_window_label(window.label()),
+                                        )
+                                    })
+                                    .unwrap();
+                                break;
+                            }
+                        };
+                        app_handle
+                            .with_tx(|tx| {
+                                tx.upsert_grpc_event(
+                                    &GrpcEvent {
+                                        content: message,
+                                        event_type: GrpcEventType::ServerMessage,
+                                        ..base_event.clone()
+                                    },
+                                    &UpdateSource::from_window_label(window.label()),
+                                )
+                            })
+                            .unwrap();
+                    }
+                    Ok(None) => {
+                        let trailers =
+                            stream.trailers().await.unwrap_or_default().unwrap_or_default();
+                        app_handle
+                            .with_tx(|tx| {
+                                tx.upsert_grpc_event(
+                                    &GrpcEvent {
+                                        content: "Connection complete".to_string(),
+                                        status: Some(Code::Ok as i32),
+                                        metadata: metadata_to_map(trailers),
+                                        event_type: GrpcEventType::ConnectionEnd,
+                                        ..base_event.clone()
+                                    },
+                                    &UpdateSource::from_window_label(window.label()),
+                                )
+                            })
+                            .unwrap();
+                        break;
+                    }
+                    Err(status) => {
+                        app_handle
+                            .with_tx(|tx| {
+                                tx.upsert_grpc_event(
+                                    &GrpcEvent {
+                                        content: "Stream failed".to_string(),
+                                        error: Some(status.message().to_string()),
+                                        status: Some(status.code() as i32),
+                                        metadata: metadata_to_map(status.metadata().clone()),
+                                        event_type: GrpcEventType::ConnectionEnd,
+                                        ..base_event.clone()
+                                    },
+                                    &UpdateSource::from_window_label(window.label()),
+                                )
+                            })
+                            .unwrap();
+                        break;
+                    }
+                }
+            }
+        }
+    };
+
+    {
+        let conn_id = conn_id.clone();
+        tauri::async_runtime::spawn(async move {
+            let w = app_handle.clone();
+            tokio::select! {
+                _ = grpc_listen => {
+                    let events = w.db().list_grpc_events(&conn_id).unwrap();
+                    let closed_event = events
+                        .iter()
+                        .find(|e| GrpcEventType::ConnectionEnd == e.event_type);
+                    let closed_status = closed_event.and_then(|e| e.status).unwrap_or(Code::Unavailable as i32);
+                    w.with_tx(|c| {
+                        c.upsert_grpc_connection(
+                            &GrpcConnection{
+                                elapsed: start.elapsed().as_millis() as i32,
+                                status: closed_status,
+                                state: GrpcConnectionState::Closed,
+                                ..c.get_grpc_connection( &conn_id).unwrap().clone()
+                            },
+                            &UpdateSource::from_window_label(window.label()),
+                        )
+                    }).unwrap();
+                },
+                _ = cancelled_rx.changed() => {
+                    w.with_tx(|tx| {
+                        tx.upsert_grpc_event(
+                            &GrpcEvent {
+                                content: "Cancelled".to_string(),
+                                event_type: GrpcEventType::ConnectionEnd,
+                                status: Some(Code::Cancelled as i32),
+                                ..base_msg.clone()
+                            },
+                            &UpdateSource::from_window_label(window.label()),
+                        )
+                    })
+                    .unwrap();
+                    w.with_tx(|c| {
+                        c.upsert_grpc_connection(
+                            &GrpcConnection{
+                                elapsed: start.elapsed().as_millis() as i32,
+                                status: Code::Cancelled as i32,
+                                state: GrpcConnectionState::Closed,
+                                ..c.get_grpc_connection( &conn_id).unwrap().clone()
+                            },
+                            &UpdateSource::from_window_label(window.label()),
+                        )
+                    }).unwrap();
+                },
+            }
+            w.unlisten(event_handler);
+        });
+    };
+
+    Ok(conn.id)
+}
+
+async fn cmd_restart<R: Runtime>(app_handle: AppHandle<R>) -> YaakResult<()> {
+    restart::request_restart(&app_handle);
+    Ok(())
+}
+
+/// Send without saving anything.
+///
+/// The response never reaches the database, so its body cannot be read back by
+/// id later the way a saved response's can. It comes back here instead, which
+/// is the only copy the caller gets.
+async fn cmd_send_ephemeral_request<R: Runtime>(
+    mut request: HttpRequest,
+    environment_id: Option<&str>,
+    cookie_jar_id: Option<&str>,
+    window: WebviewWindow<R>,
+    app_handle: AppHandle<R>,
+) -> YaakResult<EphemeralHttpResponse> {
+    let response = HttpResponse::default();
+    request.id = "".to_string();
+    let environment = match environment_id {
+        Some(id) => Some(app_handle.db().get_environment(id)?),
+        None => None,
+    };
+    let cookie_jar = match cookie_jar_id {
+        Some(id) => Some(app_handle.db().get_cookie_jar(id)?),
+        None => None,
+    };
+
+    let (cancel_tx, mut cancel_rx) = tokio::sync::watch::channel(false);
+    window.listen_any(format!("cancel_http_response_{}", response.id), move |_event| {
+        if let Err(e) = cancel_tx.send(true) {
+            warn!("Failed to send cancel event for ephemeral request {e:?}");
+        }
+    });
+
+    let sent =
+        send_http_request(&window, &request, &response, environment, cookie_jar, &mut cancel_rx)
+            .await?;
+
+    // Blanking the request id above is what makes this send unsaved, so the
+    // engine always hands the body back. Failing loudly beats returning an
+    // empty body that reads as "the server sent nothing".
+    let ResponseBody::Returned(body) = sent.body else {
+        return Err(GenericError("Unsaved response did not return a body".to_string()));
+    };
+
+    Ok(EphemeralHttpResponse { response: sent.response, body })
+}
+
+async fn cmd_format_graphql(text: &str) -> YaakResult<String> {
+    match pretty_graphql::format_text(text, &Default::default()) {
+        Ok(formatted) => Ok(formatted),
+        Err(_) => Ok(text.to_string()),
+    }
+}
+
+async fn cmd_http_response_body<R: Runtime>(
+    window: WebviewWindow<R>,
+    response_id: &str,
+    filter: Option<&str>,
+) -> YaakResult<FilterResponse> {
+    let location = locate_response_body(&window.db(), response_id)?;
+    let Some(body_path) = location.path else {
+        return Ok(FilterResponse { content: String::new(), error: None });
+    };
+
+    let content_type = location.content_type.as_str();
+    let body = read_response_body(&body_path, content_type)
+        .await
+        .ok_or(GenericError("Failed to find response body".to_string()))?;
+
+    match filter {
+        Some(filter) if !filter.is_empty() => Ok(plugins_ext::plugin_manager(&window)
+            .await?
+            .filter_data(&window.plugin_context(), filter, &body, content_type)
+            .await?),
+        _ => Ok(FilterResponse { content: body, error: None }),
+    }
+}
+
+async fn cmd_get_sse_events<R: Runtime>(
+    app_handle: AppHandle<R>,
+    response_id: &str,
+) -> YaakResult<Vec<ServerSentEvent>> {
+    let Some(body_path) = locate_response_body(&app_handle.db(), response_id)?.path else {
+        return Ok(Vec::new());
+    };
+
+    let body = fs::read(body_path)?;
+    let mut event_parser = EventParser::new();
+    event_parser.process_bytes(body.into())?;
+
+    let mut events = Vec::new();
+    while let Some(e) = event_parser.get_event() {
+        if let SSE::Event(e) = e {
+            events.push(ServerSentEvent {
+                event_type: e.event_type,
+                data: e.data,
+                id: e.id,
+                retry: e.retry,
+            });
+        }
+    }
+
+    Ok(events)
+}
+
+async fn cmd_import_data<R: Runtime>(
+    window: WebviewWindow<R>,
+    file_path: &str,
+    destination: ImportDestination,
+) -> YaakResult<ImportPlan> {
+    plan_import_data(&window, file_path, destination).await
+}
+
+async fn cmd_import_url<R: Runtime>(
+    window: WebviewWindow<R>,
+    url: &str,
+    destination: ImportDestination,
+) -> YaakResult<ImportPlan> {
+    plan_import_url(&window, url, destination).await
+}
+
+async fn cmd_commit_import<R: Runtime>(
+    window: WebviewWindow<R>,
+    plan: ImportPlan,
+) -> YaakResult<BatchUpsertResult> {
+    commit_import(&window, plan)
+}
+
+/// Decodes base64 and writes the bytes to a file the user picked.
+///
+/// The webview can't do this itself: its `fs` permissions are read-only and scoped to the app
+/// data directory, and widening them so it could write anywhere would be a poor trade in an app
+/// whose whole job is rendering responses from servers it doesn't control.
+///
+/// Base64 in rather than bytes for two reasons. A `Vec<u8>` crosses the IPC boundary as a JSON
+/// array of numbers, several times the size of the thing being saved. And the callers that need
+/// this — values the editor collapsed — are holding base64 already, so passing it through
+/// untouched means the save never decodes megabytes on the main thread.
+async fn cmd_save_base64_to_binary<R: Runtime>(
+    _app_handle: AppHandle<R>,
+    filepath: &str,
+    data: &str,
+) -> YaakResult<()> {
+    use base64::Engine;
+    let bytes = base64::engine::general_purpose::STANDARD
+        .decode(data)
+        .map_err(|e| GenericError(format!("Data is not valid base64: {e}")))?;
+    fs::write(filepath, bytes).map_err(|e| GenericError(e.to_string()))?;
+    Ok(())
+}
+
+async fn cmd_send_http_request<R: Runtime>(
+    app_handle: AppHandle<R>,
+    window: WebviewWindow<R>,
+    environment_id: Option<&str>,
+    cookie_jar_id: Option<&str>,
+    request_id: String,
+) -> YaakResult<HttpResponse> {
+    let request = app_handle.db().get_http_request(&request_id)?;
+
+    let blobs = app_handle.blob_manager();
+    let response = app_handle.with_tx(|tx| {
+        tx.upsert_http_response(
+            &HttpResponse {
+                request_id: request.id.clone(),
+                workspace_id: request.workspace_id.clone(),
+                ..Default::default()
+            },
+            &UpdateSource::from_window_label(window.label()),
+            &blobs,
+        )
+    })?;
+
+    let (cancel_tx, mut cancel_rx) = tokio::sync::watch::channel(false);
+    app_handle.listen_any(format!("cancel_http_response_{}", response.id), move |_event| {
+        if let Err(e) = cancel_tx.send(true) {
+            warn!("Failed to send cancel event for request {e:?}");
+        }
+    });
+
+    let environment = match environment_id {
+        Some(id) => match app_handle.db().get_environment(id) {
+            Ok(env) => Some(env),
+            Err(e) => {
+                warn!("Failed to find environment by id {id} {}", e);
+                None
+            }
+        },
+        None => None,
+    };
+
+    let cookie_jar = match cookie_jar_id {
+        Some(id) => Some(app_handle.db().get_cookie_jar(id)?),
+        None => None,
+    };
+
+    let r = match send_http_request(
+        &window,
+        &request,
+        &response,
+        environment,
+        cookie_jar,
+        &mut cancel_rx,
+    )
+    .await
+    {
+        Ok(sent) => sent.response,
+        Err(e) => {
+            let resp = app_handle.db().get_http_response(&response.id)?;
+            app_handle.with_tx(|tx| {
+                tx.upsert_http_response(
+                    &HttpResponse {
+                        state: HttpResponseState::Closed,
+                        error: Some(e.to_string()),
+                        ..resp
+                    },
+                    &UpdateSource::from_window_label(window.label()),
+                    &blobs,
+                )
+            })?
+        }
+    };
+
+    Ok(r)
+}
+
+async fn cmd_new_child_window<R: Runtime>(
+    parent_window: WebviewWindow<R>,
+    url: &str,
+    label: &str,
+    title: &str,
+    inner_size: (f64, f64),
+) -> YaakResult<()> {
+    let use_native_titlebar = parent_window.app_handle().db().get_settings().use_native_titlebar;
+    let initialization_script = initial_appearance_script(&parent_window.app_handle());
+    let win = yaak_window::window::create_child_window(
+        &parent_window,
+        url,
+        label,
+        title,
+        inner_size,
+        initialization_script,
+        use_native_titlebar,
+    )?;
+    setup_window_menu(&win)?;
+    Ok(())
+}
+
+async fn cmd_new_main_window<R: Runtime>(app_handle: AppHandle<R>, url: &str) -> YaakResult<()> {
+    let use_native_titlebar = app_handle.db().get_settings().use_native_titlebar;
+    let initialization_script = initial_appearance_script(&app_handle);
+    let win = yaak_window::window::create_main_window(
+        &app_handle,
+        url,
+        initialization_script,
+        use_native_titlebar,
+    )?;
+    setup_window_menu(&win)?;
+    Ok(())
+}
+
+async fn cmd_check_for_updates<R: Runtime>(
+    window: WebviewWindow<R>,
+    yaak_updater: State<'_, Mutex<YaakUpdater>>,
+) -> YaakResult<bool> {
+    let update_mode = get_update_mode(&window).await?;
+    let settings = window.db().get_settings();
+    Ok(yaak_updater
+        .lock()
+        .await
+        .check_now(&window, update_mode, settings.auto_download_updates, UpdateTrigger::User)
+        .await?)
+}
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+#[cfg_attr(feature = "cef", tauri::cef_entry_point)]
+pub fn run() {
+    // GUI apps launched via Finder/launchd inherit a 256 open-file soft limit on macOS
+    // (1024 on most Linux desktops). SQLite WAL connections hold ~3 fds each, so raise
+    // the limit toward the hard cap before opening any DB pools.
+    #[cfg(any(target_os = "macos", target_os = "linux"))]
+    if let Err(e) = rlimit::increase_nofile_limit(10240) {
+        eprintln!("Failed to raise open-file limit: {e}");
+    }
+
+    let mut builder = tauri::Builder::<TauriRuntime>::default().plugin(
+        Builder::default()
+            .targets([
+                Target::new(TargetKind::Stdout),
+                Target::new(TargetKind::LogDir { file_name: None }),
+                Target::new(TargetKind::Webview),
+            ])
+            .level_for("plugin_runtime", log::LevelFilter::Info)
+            .level_for("cookie_store", log::LevelFilter::Info)
+            .level_for("eventsource_client::event_parser", log::LevelFilter::Info)
+            .level_for("h2", log::LevelFilter::Info)
+            .level_for("hyper", log::LevelFilter::Info)
+            .level_for("hyper_util", log::LevelFilter::Info)
+            .level_for("hyper_rustls", log::LevelFilter::Info)
+            .level_for("reqwest", log::LevelFilter::Info)
+            .level_for("sqlx", log::LevelFilter::Debug)
+            .level_for("tao", log::LevelFilter::Info)
+            .level_for("tokio_util", log::LevelFilter::Info)
+            .level_for("tonic", log::LevelFilter::Info)
+            .level_for("tower", log::LevelFilter::Info)
+            .level_for("tracing", log::LevelFilter::Warn)
+            .level_for("swc_ecma_codegen", log::LevelFilter::Off)
+            .level_for("swc_ecma_transforms_base", log::LevelFilter::Off)
+            .with_colors(ColoredLevelConfig::default())
+            .level(if is_dev() { log::LevelFilter::Debug } else { log::LevelFilter::Info })
+            .build(),
+    );
+
+    // Only enable single-instance in production builds. In dev mode, we want to allow
+    // multiple instances for testing and worktree workflows (running multiple branches).
+    if !is_dev() {
+        builder = builder.plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
+            // When trying to open a new app instance (common operation on Linux),
+            // focus the first existing window we find instead of opening a new one
+            // TODO: Keep track of the last focused window and always focus that one
+            if let Some(window) = app.webview_windows().values().next() {
+                let _ = window.set_focus();
+            }
+        }));
+    }
+
+    builder = builder
+        .plugin(tauri_plugin_clipboard_manager::init())
+        .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_deep_link::init())
+        .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_os::init())
+        .plugin(tauri_plugin_fs::init())
+        .plugin(yaak_mac_window::init())
+        .plugin(models_ext::init()) // Database setup only. Must be before plugins_ext which depends on db
+        .plugin(plugins_ext::init())
+        .plugin(yaak_fonts::init());
+
+    #[cfg(feature = "license")]
+    {
+        builder = builder.plugin(yaak_license::init());
+    }
+
+    #[cfg(feature = "updater")]
+    {
+        builder = builder.plugin(tauri_plugin_updater::Builder::default().build());
+    }
+
+    builder
+        .setup(|app| {
+            let lifecycle_host = yaak_lifecycle::Host::owner()
+                .with_responses_dir(app.path().app_data_dir()?.join("responses"));
+            if let Err(e) = app
+                .with_tx(|tx| yaak_lifecycle::on_launch(&lifecycle_host, tx, &app.blob_manager()))
+            {
+                error!("on_launch hook failed: {e:?}");
+            }
+
+            // The RPC command registry — every frontend command dispatches
+            // through this via the single `rpc` Tauri command
+            app.manage(rpc_ext::build_rpc_router::<TauriRuntime>());
+
+            // Initialize HTTP connection manager
+            app.manage(yaak_http::manager::HttpConnectionManager::new());
+
+            // Initialize encryption manager
+            let query_manager =
+                app.state::<yaak_models::query_manager::QueryManager>().inner().clone();
+            let app_id = app.config().identifier.to_string();
+            app.manage(yaak_crypto::manager::EncryptionManager::new(query_manager, app_id));
+            #[cfg(any(target_os = "linux", target_os = "macos"))]
+            if let Some(state) = yaak_system_appearance::watch(app.app_handle().clone()) {
+                app.manage(state);
+            }
+
+            {
+                let app_handle = app.app_handle().clone();
+                app.deep_link().on_open_url(move |event| {
+                    info!("Handling deep link open");
+                    let app_handle = app_handle.clone();
+                    tauri::async_runtime::spawn(async move {
+                        for url in event.urls() {
+                            if let Err(e) = handle_deep_link(&app_handle, &url).await {
+                                warn!("Failed to handle deep link {}: {e:?}", url.to_string());
+                                let _ = app_handle.emit(
+                                    "show_toast",
+                                    ShowToastRequest {
+                                        message: format!(
+                                            "Error handling deep link: {}",
+                                            e.to_string()
+                                        ),
+                                        color: Some(Color::Danger),
+                                        icon: None,
+                                        timeout: None,
+                                    },
+                                );
+                            };
+                        }
+                    });
+                });
+            };
+
+            // Add updater
+            let yaak_updater = YaakUpdater::new();
+            app.manage(Mutex::new(yaak_updater));
+
+            // Add notifier
+            let yaak_notifier = YaakNotifier::new();
+            app.manage(Mutex::new(yaak_notifier));
+
+            // Add GRPC manager
+            let protoc_include_dir = app
+                .path()
+                .resolve("vendored/protoc/include", BaseDirectory::Resource)
+                .expect("failed to resolve protoc include directory");
+            let protoc_bin_name = if cfg!(windows) { "yaakprotoc.exe" } else { "yaakprotoc" };
+            let protoc_bin_path = app
+                .path()
+                .resolve(format!("vendored/protoc/{}", protoc_bin_name), BaseDirectory::Resource)
+                .expect("failed to resolve yaakprotoc binary");
+            let grpc_config = GrpcConfig { protoc_include_dir, protoc_bin_path };
+            let grpc_handle = GrpcHandle::new(grpc_config);
+            app.manage(Mutex::new(grpc_handle));
+
+            // Add WebSocket manager
+            let ws_manager = yaak_ws::WebsocketManager::new();
+            app.manage(Mutex::new(ws_manager));
+
+            // Specific settings
+            let settings = app.db().get_settings();
+            app.app_handle().set_native_titlebar(settings.use_native_titlebar);
+
+            monitor_plugin_events(&app.app_handle().clone());
+
+            Ok(())
+        })
+        .invoke_handler(tauri::generate_handler![rpc_ext::rpc])
+        .build(tauri::generate_context!())
+        .expect("error while running tauri application")
+        .run(|app_handle, event| {
+            match event {
+                RunEvent::Ready => {
+                    let use_native_titlebar = app_handle.db().get_settings().use_native_titlebar;
+                    let initialization_script = initial_appearance_script(app_handle);
+                    if let Ok(win) = yaak_window::window::create_main_window(
+                        app_handle,
+                        "/",
+                        initialization_script,
+                        use_native_titlebar,
+                    ) {
+                        let _ = setup_window_menu(&win);
+                    }
+                    let h = app_handle.clone();
+                    tauri::async_runtime::spawn(async move {
+                        let info = history::get_or_upsert_launch_info(&h);
+                        debug!("Launched Yaak {:?}", info);
+                    });
+                }
+                RunEvent::WindowEvent { event: WindowEvent::ThemeChanged(_), .. } => {
+                    // On macOS this is how OS appearance changes arrive: tao observes
+                    // AppleInterfaceThemeChangedNotification and emits it for every window
+                    #[cfg(any(target_os = "linux", target_os = "macos"))]
+                    if let Some(state) =
+                        app_handle.try_state::<yaak_system_appearance::SystemAppearanceState>()
+                    {
+                        yaak_system_appearance::emit_change(app_handle, &state);
+                    }
+                }
+                RunEvent::WindowEvent { event: WindowEvent::Focused(true), label, .. } => {
+                    #[cfg(any(target_os = "linux", target_os = "macos"))]
+                    if let Some(state) =
+                        app_handle.try_state::<yaak_system_appearance::SystemAppearanceState>()
+                    {
+                        yaak_system_appearance::emit_change(app_handle, &state);
+                    }
+
+                    if cfg!(feature = "updater") {
+                        // Run update check whenever the window is focused
+                        let w = app_handle.get_webview_window(&label).unwrap();
+                        let h = app_handle.clone();
+                        tauri::async_runtime::spawn(async move {
+                            let settings = w.db().get_settings();
+                            if settings.autoupdate {
+                                time::sleep(Duration::from_secs(3)).await; // Wait a bit so it's not so jarring
+                                let val: State<'_, Mutex<YaakUpdater>> = h.state();
+                                let update_mode = get_update_mode(&w).await.unwrap();
+                                if let Err(e) = val
+                                    .lock()
+                                    .await
+                                    .maybe_check(&w, settings.auto_download_updates, update_mode)
+                                    .await
+                                {
+                                    warn!("Failed to check for updates {e:?}");
+                                }
+                            };
+                        });
+                    }
+
+                    let h = app_handle.clone();
+                    tauri::async_runtime::spawn(async move {
+                        let windows = h.webview_windows();
+                        let w = windows.values().next().unwrap();
+                        tokio::time::sleep(Duration::from_millis(4000)).await;
+                        let val: State<'_, Mutex<YaakNotifier>> = w.state();
+                        let mut n = val.lock().await;
+                        if let Err(e) = n.maybe_check(&w).await {
+                            warn!("Failed to check for notifications {}", e)
+                        }
+                    });
+                }
+                RunEvent::Exit => restart::relaunch_if_requested(),
+                _ => {}
+            };
+        });
+}
+
+async fn get_update_mode<R: Runtime>(window: &WebviewWindow<R>) -> YaakResult<UpdateMode> {
+    let settings = window.db().get_settings();
+    Ok(UpdateMode::new(settings.update_channel.as_str()))
+}
+
+fn safe_uri(endpoint: &str) -> String {
+    if endpoint.starts_with("http://") || endpoint.starts_with("https://") {
+        endpoint.into()
+    } else {
+        format!("http://{}", endpoint)
+    }
+}
+
+fn monitor_plugin_events<R: Runtime>(app_handle: &AppHandle<R>) {
+    let app_handle = app_handle.clone();
+    tauri::async_runtime::spawn(async move {
+        let plugin_manager = match plugins_ext::plugin_manager(&app_handle).await {
+            Ok(pm) => pm,
+            Err(_) => return, // The runtime failed to boot; there are no events
+        };
+        let (rx_id, mut rx) = plugin_manager.subscribe("app").await;
+
+        while let Some(event) = rx.recv().await {
+            let app_handle = app_handle.clone();
+            let plugin =
+                match plugin_manager.get_plugin_by_ref_id(event.plugin_ref_id.as_str()).await {
+                    None => {
+                        warn!("Failed to get plugin for event {:?}", event);
+                        continue;
+                    }
+                    Some(p) => p,
+                };
+
+            // We might have recursive back-and-forth calls between app and plugin, so we don't
+            // want to block here
+            tauri::async_runtime::spawn(async move {
+                let ev = plugin_events::handle_plugin_event(&app_handle, &event, &plugin).await;
+
+                let ev = match ev {
+                    Ok(Some(ev)) => ev,
+                    // Nothing to say, or the reply comes later from somewhere else.
+                    Ok(None) => return,
+                    Err(e) => {
+                        warn!("Failed to handle plugin event: {e:?}");
+                        let _ = app_handle.emit(
+                            "show_toast",
+                            InternalEventPayload::ShowToastRequest(ShowToastRequest {
+                                message: e.to_string(),
+                                color: Some(Color::Danger),
+                                icon: None,
+                                timeout: Some(30000),
+                            }),
+                        );
+                        // Tell the plugin as well as the user. It is awaiting a
+                        // reply, and a toast it cannot see would leave it
+                        // waiting for one that never comes.
+                        InternalEventPayload::ErrorResponse(ErrorResponse { error: e.to_string() })
+                    }
+                };
+
+                match plugins_ext::plugin_manager(&app_handle).await {
+                    Ok(pm) => {
+                        if let Err(e) = pm.reply(&event, &ev).await {
+                            warn!("Failed to reply to plugin manager: {:?}", e)
+                        }
+                    }
+                    Err(e) => warn!("Failed to get plugin manager for reply: {e:?}"),
+                }
+            });
+        }
+        plugin_manager.unsubscribe(rx_id.as_str()).await;
+    });
+}
+
+async fn call_frontend<R: Runtime>(
+    window: &WebviewWindow<R>,
+    event: &InternalEvent,
+) -> Option<InternalEventPayload> {
+    window.emit_to(window.label(), "plugin_event", event.clone()).unwrap();
+    let (tx, mut rx) = tokio::sync::watch::channel(None);
+
+    let reply_id = event.id.clone();
+    let event_id = window.clone().listen(reply_id, move |ev| {
+        let resp: InternalEvent = serde_json::from_str(ev.payload()).unwrap();
+        if let Err(e) = tx.send(Some(resp.payload)) {
+            warn!("Failed to prompt for text {e:?}");
+        }
+    });
+
+    // When reply shows up, unlisten to events and return
+    if let Err(e) = rx.changed().await {
+        warn!("Failed to check channel changed {e:?}");
+    }
+    window.unlisten(event_id);
+
+    let v = rx.borrow();
+    v.to_owned()
+}
+
+fn get_window_from_plugin_context<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    plugin_context: &PluginContext,
+) -> Result<WebviewWindow<R>> {
+    let label = match &plugin_context.label {
+        Some(label) => label,
+        None => {
+            return app_handle
+                .webview_windows()
+                .iter()
+                .next()
+                .map(|(_, w)| w.to_owned())
+                .ok_or(GenericError("No windows open".to_string()));
+        }
+    };
+
+    let window = app_handle
+        .webview_windows()
+        .iter()
+        .find_map(|(_, w)| if w.label() == label { Some(w.to_owned()) } else { None });
+
+    if window.is_none() {
+        error!("Failed to find window by {plugin_context:?}");
+    }
+
+    Ok(window.ok_or(GenericError(format!("Failed to find window for {}", label)))?)
+}
+
+fn workspace_from_window<R: Runtime>(window: &WebviewWindow<R>) -> Option<Workspace> {
+    window.workspace_id().and_then(|id| window.db().get_workspace(&id).ok())
+}
+
+fn environment_from_window<R: Runtime>(window: &WebviewWindow<R>) -> Option<Environment> {
+    window.environment_id().and_then(|id| window.db().get_environment(&id).ok())
+}
+
+fn cookie_jar_from_window<R: Runtime>(window: &WebviewWindow<R>) -> Option<CookieJar> {
+    window.cookie_jar_id().and_then(|id| window.db().get_cookie_jar(&id).ok())
+}
diff --git a/crates-tauri/yaak-app-client/src/main.rs b/crates-tauri/yaak-app-client/src/main.rs
new file mode 100644
index 0000000..393b824
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/main.rs
@@ -0,0 +1,17 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    // On Nvidia + Wayland, WebKit2GTK's DMA-BUF renderer triggers a protocol error (71) due to
+    // an explicit sync bug (https://bugs.webkit.org/show_bug.cgi?id=280210). Disabling explicit
+    // sync via the Nvidia driver avoids the crash without disabling hardware acceleration.
+    #[cfg(target_os = "linux")]
+    if std::env::var("__NV_DISABLE_EXPLICIT_SYNC").is_err()
+        && std::env::var("WAYLAND_DISPLAY").is_ok()
+        && std::path::Path::new("/sys/module/nvidia").exists()
+    {
+        // SAFETY: called before any threads are spawned.
+        unsafe { std::env::set_var("__NV_DISABLE_EXPLICIT_SYNC", "1") };
+    }
+
+    tauri_app_client_lib::run();
+}
diff --git a/crates-tauri/yaak-app-client/src/models_ext.rs b/crates-tauri/yaak-app-client/src/models_ext.rs
new file mode 100644
index 0000000..5584d14
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/models_ext.rs
@@ -0,0 +1,196 @@
+//! Tauri-specific extensions for yaak-models.
+//!
+//! This module provides the Tauri plugin initialization and extension traits
+//! that allow accessing QueryManager and BlobManager from Tauri's Manager types.
+
+use chrono::Utc;
+use log::error;
+use std::time::Duration;
+use tauri::plugin::TauriPlugin;
+use tauri::{Emitter, Manager, Runtime, State};
+use tauri_plugin_dialog::{DialogExt, MessageDialogKind};
+use yaak_models::blob_manager::BlobManager;
+use yaak_models::client_db::{ClientDb, WriteDb};
+use yaak_models::error::Result;
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::{ModelPayload, UpdateSource};
+
+const MODEL_CHANGES_POLL_INTERVAL_MS: u64 = 1000;
+const MODEL_CHANGES_POLL_BATCH_SIZE: usize = 200;
+
+struct ModelChangeCursor {
+    created_at: String,
+    id: i64,
+}
+
+impl ModelChangeCursor {
+    fn from_launch_time() -> Self {
+        Self {
+            created_at: Utc::now().naive_utc().format("%Y-%m-%d %H:%M:%S%.3f").to_string(),
+            id: 0,
+        }
+    }
+}
+
+fn drain_model_changes_batch<R: Runtime>(
+    query_manager: &QueryManager,
+    app_handle: &tauri::AppHandle<R>,
+    cursor: &mut ModelChangeCursor,
+) -> bool {
+    let changes = match query_manager.connect().list_model_changes_since(
+        &cursor.created_at,
+        cursor.id,
+        MODEL_CHANGES_POLL_BATCH_SIZE,
+    ) {
+        Ok(changes) => changes,
+        Err(err) => {
+            error!("Failed to poll model_changes rows: {err:?}");
+            return false;
+        }
+    };
+
+    if changes.is_empty() {
+        return false;
+    }
+
+    let fetched_count = changes.len();
+    let mut batch: Vec<ModelPayload> = Vec::with_capacity(fetched_count);
+    for change in changes {
+        cursor.created_at = change.created_at;
+        cursor.id = change.id;
+
+        // Local window-originated writes are forwarded immediately from the
+        // in-memory model event channel.
+        if matches!(change.payload.update_source, UpdateSource::Window { .. }) {
+            continue;
+        }
+        batch.push(change.payload);
+    }
+
+    // Emit as a single batch so bulk writes (imports, sync, CLI) don't flood the
+    // frontend with per-model events.
+    if !batch.is_empty() {
+        if let Err(err) = app_handle.emit("model_writes", batch) {
+            error!("Failed to emit model_writes event: {err:?}");
+        }
+    }
+
+    fetched_count == MODEL_CHANGES_POLL_BATCH_SIZE
+}
+
+async fn run_model_change_poller<R: Runtime>(
+    query_manager: QueryManager,
+    app_handle: tauri::AppHandle<R>,
+    mut cursor: ModelChangeCursor,
+) {
+    loop {
+        while drain_model_changes_batch(&query_manager, &app_handle, &mut cursor) {}
+        tokio::time::sleep(Duration::from_millis(MODEL_CHANGES_POLL_INTERVAL_MS)).await;
+    }
+}
+
+/// Extension trait for accessing the QueryManager from Tauri Manager types.
+pub trait QueryManagerExt<'a, R> {
+    fn db_manager(&'a self) -> State<'a, QueryManager>;
+    fn db(&'a self) -> ClientDb<'a>;
+    fn with_tx<F, T>(&'a self, func: F) -> Result<T>
+    where
+        F: FnOnce(&WriteDb) -> Result<T>;
+}
+
+impl<'a, R: Runtime, M: Manager<R>> QueryManagerExt<'a, R> for M {
+    fn db_manager(&'a self) -> State<'a, QueryManager> {
+        self.state::<QueryManager>()
+    }
+
+    fn db(&'a self) -> ClientDb<'a> {
+        let qm = self.state::<QueryManager>();
+        qm.inner().connect()
+    }
+
+    fn with_tx<F, T>(&'a self, func: F) -> Result<T>
+    where
+        F: FnOnce(&WriteDb) -> Result<T>,
+    {
+        let qm = self.state::<QueryManager>();
+        qm.inner().with_tx(func)
+    }
+}
+
+/// Extension trait for accessing the BlobManager from Tauri Manager types.
+pub trait BlobManagerExt<'a, R> {
+    fn blob_manager(&'a self) -> State<'a, BlobManager>;
+}
+
+impl<'a, R: Runtime, M: Manager<R>> BlobManagerExt<'a, R> for M {
+    fn blob_manager(&'a self) -> State<'a, BlobManager> {
+        self.state::<BlobManager>()
+    }
+}
+
+/// Initialize database managers as a plugin (for initialization order).
+/// Commands are in the main invoke_handler.
+/// This must be registered before other plugins that depend on the database.
+pub fn init<R: Runtime>() -> TauriPlugin<R> {
+    tauri::plugin::Builder::new("yaak-models-db")
+        .setup(|app_handle, _api| {
+            let app_path = app_handle.path().app_data_dir().unwrap();
+            let db_path = app_path.join("db.sqlite");
+            let blob_path = app_path.join("blobs.sqlite");
+
+            let (query_manager, blob_manager, rx) =
+                match yaak_models::init_standalone(&db_path, &blob_path) {
+                    Ok(result) => result,
+                    Err(e) => {
+                        app_handle
+                            .dialog()
+                            .message(e.to_string())
+                            .kind(MessageDialogKind::Error)
+                            .blocking_show();
+                        return Err(Box::from(e.to_string()));
+                    }
+                };
+
+            // Only stream writes that happen after this app launch.
+            let cursor = ModelChangeCursor::from_launch_time();
+
+            let poll_query_manager = query_manager.clone();
+
+            app_handle.manage(query_manager);
+            app_handle.manage(blob_manager);
+
+            // Poll model_changes so all writers (including external CLI processes) update the UI.
+            let app_handle_poll = app_handle.clone();
+            let query_manager = poll_query_manager;
+            tauri::async_runtime::spawn(async move {
+                run_model_change_poller(query_manager, app_handle_poll, cursor).await;
+            });
+
+            // Fast path for local app writes initiated by frontend windows. This keeps the
+            // current sync-model UX snappy, while DB polling handles external writers (CLI).
+            let app_handle_local = app_handle.clone();
+            tauri::async_runtime::spawn(async move {
+                while let Ok(payload) = rx.recv() {
+                    let mut batch: Vec<ModelPayload> = Vec::new();
+                    if matches!(payload.update_source, UpdateSource::Window { .. }) {
+                        batch.push(payload);
+                    }
+                    // Coalesce any writes already queued into the same emit
+                    while let Ok(next) = rx.try_recv() {
+                        if matches!(next.update_source, UpdateSource::Window { .. }) {
+                            batch.push(next);
+                        }
+                    }
+                    if batch.is_empty() {
+                        continue;
+                    }
+                    if let Err(err) = app_handle_local.emit("model_writes", batch) {
+                        error!("Failed to emit local model_writes event: {err:?}");
+                    }
+                }
+            });
+
+            Ok(())
+        })
+        .build()
+}
diff --git a/crates-tauri/yaak-app-client/src/notifications.rs b/crates-tauri/yaak-app-client/src/notifications.rs
new file mode 100644
index 0000000..829afe4
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/notifications.rs
@@ -0,0 +1,179 @@
+use crate::error::Result;
+use crate::history::get_or_upsert_launch_info;
+use crate::models_ext::QueryManagerExt;
+use chrono::{DateTime, Utc};
+use log::{debug, info};
+use reqwest::Method;
+use serde::{Deserialize, Serialize};
+use std::time::Instant;
+use tauri::{AppHandle, Emitter, Manager, Runtime, WebviewWindow};
+use ts_rs::TS;
+use yaak_api::{ApiClientKind, yaak_api_client};
+use yaak_common::platform::get_os_str;
+use yaak_models::util::UpdateSource;
+
+// Check for updates every hour
+const MAX_UPDATE_CHECK_SECONDS: u64 = 60 * 60;
+
+const KV_NAMESPACE: &str = "notifications";
+const KV_KEY: &str = "seen";
+
+// Create updater struct
+pub struct YaakNotifier {
+    last_check: Option<Instant>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "index.ts")]
+pub struct YaakNotification {
+    timestamp: DateTime<Utc>,
+    timeout: Option<f64>,
+    id: String,
+    title: Option<String>,
+    message: String,
+    color: Option<String>,
+    action: Option<YaakNotificationAction>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "index.ts")]
+pub struct YaakNotificationAction {
+    label: String,
+    url: String,
+}
+
+impl YaakNotifier {
+    pub fn new() -> Self {
+        Self { last_check: None }
+    }
+
+    pub async fn seen<R: Runtime>(&mut self, window: &WebviewWindow<R>, id: &str) -> Result<()> {
+        let app_handle = window.app_handle();
+        let mut seen = get_kv(app_handle).await?;
+        seen.push(id.to_string());
+        debug!("Marked notification as seen {}", id);
+        let seen_json = serde_json::to_string(&seen)?;
+        window.with_tx(|tx| {
+            tx.set_key_value_raw(
+                KV_NAMESPACE,
+                KV_KEY,
+                seen_json.as_str(),
+                &UpdateSource::from_window_label(window.label()),
+            );
+            Ok(())
+        })?;
+        Ok(())
+    }
+
+    pub async fn maybe_check<R: Runtime>(&mut self, window: &WebviewWindow<R>) -> Result<()> {
+        let app_handle = window.app_handle();
+        if let Some(i) = self.last_check
+            && i.elapsed().as_secs() < MAX_UPDATE_CHECK_SECONDS
+        {
+            return Ok(());
+        }
+
+        self.last_check = Some(Instant::now());
+
+        if !app_handle.db().get_settings().check_notifications {
+            info!("Notifications are disabled. Skipping check.");
+            return Ok(());
+        }
+
+        info!("Checking for notifications");
+
+        #[cfg(feature = "license")]
+        let license_check = {
+            use yaak_license::{LicenseCheckStatus, check_license};
+            match check_license(window).await {
+                Ok(LicenseCheckStatus::PersonalUse { .. }) => "personal",
+                Ok(LicenseCheckStatus::Active { .. }) => "commercial",
+                Ok(LicenseCheckStatus::PastDue { .. }) => "past_due",
+                Ok(LicenseCheckStatus::Inactive { .. }) => "invalid_license",
+                Ok(LicenseCheckStatus::Trialing { .. }) => "trialing",
+                Ok(LicenseCheckStatus::Expired { .. }) => "expired",
+                Ok(LicenseCheckStatus::Error { .. }) => "error",
+                Err(_) => "unknown",
+            }
+            .to_string()
+        };
+
+        #[cfg(not(feature = "license"))]
+        let license_check = "disabled".to_string();
+
+        let launch_info = get_or_upsert_launch_info(app_handle);
+        let app_version = app_handle.package_info().version.to_string();
+        let req = yaak_api_client(ApiClientKind::App, &app_version)?
+            .request(Method::GET, "https://notify.yaak.app/notifications")
+            .query(&[
+                ("version", &launch_info.current_version),
+                ("version_prev", &launch_info.previous_version),
+                ("launches", &launch_info.num_launches.to_string()),
+                ("installed", &launch_info.user_since.format("%Y-%m-%d").to_string()),
+                ("license", &license_check),
+                ("updates", &get_updater_status(app_handle).to_string()),
+                ("platform", &get_os_str().to_string()),
+            ]);
+        let resp = req.send().await?;
+        if resp.status() != 200 {
+            info!("Skipping notification status code {}", resp.status());
+            return Ok(());
+        }
+
+        let notifications = resp.json::<Vec<YaakNotification>>().await?;
+        debug!("Received {} notifications", notifications.len());
+
+        for notification in notifications {
+            let seen = get_kv(app_handle).await?;
+            if seen.contains(¬ification.id) {
+                debug!("Already seen notification {}", notification.id);
+                continue;
+            }
+            info!("Got notification {:?}", notification);
+
+            let _ = app_handle.emit_to(window.label(), "notification", notification.clone());
+            break; // Only show one notification
+        }
+
+        Ok(())
+    }
+}
+
+async fn get_kv<R: Runtime>(app_handle: &AppHandle<R>) -> Result<Vec<String>> {
+    match app_handle.db().get_key_value_raw("notifications", "seen") {
+        None => Ok(Vec::new()),
+        Some(v) => Ok(serde_json::from_str(&v.value)?),
+    }
+}
+
+#[allow(unused)]
+fn get_updater_status<R: Runtime>(app_handle: &AppHandle<R>) -> &'static str {
+    #[cfg(not(feature = "updater"))]
+    {
+        // Updater is not enabled as a Rust feature
+        return "missing";
+    }
+
+    #[cfg(all(feature = "updater", target_os = "linux"))]
+    {
+        let settings = app_handle.db().get_settings();
+        if !settings.autoupdate {
+            // Updates are explicitly disabled
+            "disabled"
+        } else if std::env::var("APPIMAGE").is_err() {
+            // Updates are enabled, but unsupported
+            "unsupported"
+        } else {
+            // Updates are enabled and supported
+            "enabled"
+        }
+    }
+
+    #[cfg(all(feature = "updater", not(target_os = "linux")))]
+    {
+        let settings = app_handle.db().get_settings();
+        if settings.autoupdate { "enabled" } else { "disabled" }
+    }
+}
diff --git a/crates-tauri/yaak-app-client/src/plugin_events.rs b/crates-tauri/yaak-app-client/src/plugin_events.rs
new file mode 100644
index 0000000..2f4d0d2
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/plugin_events.rs
@@ -0,0 +1,480 @@
+use crate::error::Result;
+use crate::http_request::send_http_request_with_context;
+use crate::models_ext::BlobManagerExt;
+use crate::models_ext::QueryManagerExt;
+use crate::render::{render_grpc_request, render_http_request, render_json_value};
+use crate::{
+    call_frontend, cookie_jar_from_window, environment_from_window, get_window_from_plugin_context,
+    workspace_from_window,
+};
+use base64::Engine;
+use base64::prelude::BASE64_STANDARD;
+use chrono::Utc;
+use log::error;
+use std::sync::Arc;
+use tauri::{AppHandle, Emitter, Listener, Manager, Runtime};
+use tauri_plugin_clipboard_manager::ClipboardExt;
+use tauri_plugin_opener::OpenerExt;
+use yaak::plugin_events::{
+    GroupedPluginEvent, HostRequest, SharedPluginEventContext, handle_shared_plugin_event,
+};
+use yaak::response_body::FileResponseBodyStore;
+use yaak_crypto::manager::EncryptionManager;
+use yaak_http::cookies::get_cookie_value_from_jar;
+use yaak_models::models::{HttpResponse, Plugin};
+use yaak_models::queries::any_request::AnyRequest;
+use yaak_models::util::UpdateSource;
+use yaak_plugins::error::Error::PluginErr;
+use yaak_plugins::events::{
+    Color, EmptyPayload, ErrorResponse, GetCookieValueResponse, Icon, InternalEvent,
+    InternalEventPayload, ListCookieNamesResponse, ListOpenWorkspacesResponse,
+    RenderGrpcRequestResponse, RenderHttpRequestResponse, SendHttpRequestResponse,
+    ShowToastRequest, TemplateRenderResponse, WindowInfoResponse, WindowNavigateEvent,
+    WorkspaceInfo,
+};
+use yaak_plugins::plugin_handle::PluginHandle;
+use yaak_plugins::template_callback::PluginTemplateCallback;
+use yaak_tauri_utils::window::WorkspaceWindowTrait;
+use yaak_templates::{RenderErrorBehavior, RenderOptions};
+use yaak_window::window::{CreateWindowConfig, create_window};
+
+pub(crate) async fn handle_plugin_event<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    event: &InternalEvent,
+    plugin_handle: &PluginHandle,
+) -> Result<Option<InternalEventPayload>> {
+    // log::debug!("Got event to app {event:?}");
+    let plugin_context = event.context.to_owned();
+    let plugin_name = plugin_handle.info().name;
+    let fallback_workspace_id = plugin_context.workspace_id.clone().or_else(|| {
+        plugin_context
+            .label
+            .as_ref()
+            .and_then(|label| app_handle.get_webview_window(label))
+            .and_then(|window| workspace_from_window(&window).map(|workspace| workspace.id))
+    });
+
+    match handle_shared_plugin_event(
+        app_handle.db_manager().inner(),
+        &FileResponseBodyStore::new(app_handle.db_manager().inner()),
+        &event.payload,
+        SharedPluginEventContext {
+            plugin_name: &plugin_name,
+            workspace_id: fallback_workspace_id.as_deref(),
+        },
+    ) {
+        GroupedPluginEvent::Handled(payload) => Ok(payload),
+        GroupedPluginEvent::ToHandle(host_request) => {
+            handle_host_plugin_request(
+                app_handle,
+                event,
+                plugin_handle,
+                &plugin_context,
+                host_request,
+            )
+            .await
+        }
+    }
+}
+
+async fn handle_host_plugin_request<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    event: &InternalEvent,
+    plugin_handle: &PluginHandle,
+    plugin_context: &yaak_plugins::events::PluginContext,
+    host_request: HostRequest<'_>,
+) -> Result<Option<InternalEventPayload>> {
+    match host_request {
+        HostRequest::ErrorResponse(resp) => {
+            error!("Plugin error: {}: {:?}", resp.error, resp);
+            let toast_event = plugin_handle.build_event_to_send(
+                plugin_context,
+                &InternalEventPayload::ShowToastRequest(ShowToastRequest {
+                    message: format!(
+                        "Plugin error from {}: {}",
+                        plugin_handle.info().name,
+                        resp.error
+                    ),
+                    color: Some(Color::Danger),
+                    timeout: Some(30000),
+                    ..Default::default()
+                }),
+                None,
+            );
+            Box::pin(handle_plugin_event(app_handle, &toast_event, plugin_handle)).await
+        }
+        HostRequest::ReloadResponse(req) => {
+            let plugins = app_handle.db().list_plugins()?;
+            for plugin in plugins {
+                if plugin.directory != plugin_handle.dir {
+                    continue;
+                }
+
+                let new_plugin = Plugin { updated_at: Utc::now().naive_utc(), ..plugin };
+                app_handle.with_tx(|tx| tx.upsert_plugin(&new_plugin, &UpdateSource::Plugin))?;
+            }
+
+            if !req.silent {
+                let info = plugin_handle.info();
+                let toast_event = plugin_handle.build_event_to_send(
+                    plugin_context,
+                    &InternalEventPayload::ShowToastRequest(ShowToastRequest {
+                        message: format!("Reloaded plugin {}@{}", info.name, info.version),
+                        icon: Some(Icon::Info),
+                        timeout: Some(5000),
+                        ..Default::default()
+                    }),
+                    None,
+                );
+                Box::pin(handle_plugin_event(app_handle, &toast_event, plugin_handle)).await
+            } else {
+                Ok(None)
+            }
+        }
+        HostRequest::CopyText(req) => {
+            app_handle.clipboard().write_text(req.text.as_str())?;
+            Ok(Some(InternalEventPayload::CopyTextResponse(EmptyPayload {})))
+        }
+        HostRequest::ShowToast(req) => {
+            match &plugin_context.label {
+                Some(label) => app_handle.emit_to(label, "show_toast", req)?,
+                None => app_handle.emit("show_toast", req)?,
+            };
+            Ok(Some(InternalEventPayload::ShowToastResponse(EmptyPayload {})))
+        }
+        HostRequest::PromptText(_) => {
+            let window = get_window_from_plugin_context(app_handle, plugin_context)?;
+            Ok(call_frontend(&window, event).await)
+        }
+        HostRequest::PromptForm(_) => {
+            let window = get_window_from_plugin_context(app_handle, plugin_context)?;
+            if event.reply_id.is_some() {
+                window.emit_to(window.label(), "plugin_event", event.clone())?;
+                Ok(None)
+            } else {
+                window.emit_to(window.label(), "plugin_event", event.clone()).unwrap();
+
+                let event_id = event.id.clone();
+                let plugin_handle = plugin_handle.clone();
+                let plugin_context = plugin_context.clone();
+                let window = window.clone();
+
+                tauri::async_runtime::spawn(async move {
+                    let (tx, mut rx) = tokio::sync::mpsc::channel::<InternalEvent>(128);
+
+                    let listener_id = window.listen(event_id, move |ev: tauri::Event| {
+                        let resp: InternalEvent = serde_json::from_str(ev.payload()).unwrap();
+                        let _ = tx.try_send(resp);
+                    });
+
+                    while let Some(resp) = rx.recv().await {
+                        let is_done = matches!(
+                            &resp.payload,
+                            InternalEventPayload::PromptFormResponse(r) if r.done.unwrap_or(false)
+                        );
+
+                        let event_to_send = plugin_handle.build_event_to_send(
+                            &plugin_context,
+                            &resp.payload,
+                            Some(resp.reply_id.unwrap_or_default()),
+                        );
+                        if let Err(e) = plugin_handle.send(&event_to_send).await {
+                            log::warn!("Failed to forward form response to plugin: {:?}", e);
+                        }
+
+                        if is_done {
+                            break;
+                        }
+                    }
+
+                    window.unlisten(listener_id);
+                });
+
+                Ok(None)
+            }
+        }
+        HostRequest::RenderGrpcRequest(req) => {
+            let window = get_window_from_plugin_context(app_handle, plugin_context)?;
+
+            let workspace =
+                workspace_from_window(&window).expect("Failed to get workspace_id from window URL");
+            let environment_id = environment_from_window(&window).map(|e| e.id);
+            let environment_chain = window.db().resolve_environments(
+                &workspace.id,
+                req.grpc_request.folder_id.as_deref(),
+                environment_id.as_deref(),
+            )?;
+            let plugin_manager = Arc::new(crate::plugins_ext::plugin_manager(app_handle).await?);
+            let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
+            let cb = PluginTemplateCallback::new(
+                plugin_manager,
+                encryption_manager,
+                plugin_context,
+                req.purpose.clone(),
+            );
+            let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+            let grpc_request =
+                render_grpc_request(&req.grpc_request, environment_chain, &cb, &opt).await?;
+            Ok(Some(InternalEventPayload::RenderGrpcRequestResponse(RenderGrpcRequestResponse {
+                grpc_request,
+            })))
+        }
+        HostRequest::RenderHttpRequest(req) => {
+            let window = get_window_from_plugin_context(app_handle, plugin_context)?;
+
+            let workspace =
+                workspace_from_window(&window).expect("Failed to get workspace_id from window URL");
+            let environment_id = environment_from_window(&window).map(|e| e.id);
+            let environment_chain = window.db().resolve_environments(
+                &workspace.id,
+                req.http_request.folder_id.as_deref(),
+                environment_id.as_deref(),
+            )?;
+            let plugin_manager = Arc::new(crate::plugins_ext::plugin_manager(app_handle).await?);
+            let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
+            let cb = PluginTemplateCallback::new(
+                plugin_manager,
+                encryption_manager,
+                plugin_context,
+                req.purpose.clone(),
+            );
+            let opt = &RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+            let http_request =
+                render_http_request(&req.http_request, environment_chain, &cb, opt).await?;
+            Ok(Some(InternalEventPayload::RenderHttpRequestResponse(RenderHttpRequestResponse {
+                http_request,
+            })))
+        }
+        HostRequest::TemplateRender(req) => {
+            let window = get_window_from_plugin_context(app_handle, plugin_context)?;
+
+            let workspace =
+                workspace_from_window(&window).expect("Failed to get workspace_id from window URL");
+            let environment_id = environment_from_window(&window).map(|e| e.id);
+            let folder_id = if let Some(id) = window.request_id() {
+                match window.db().get_any_request(&id) {
+                    Ok(AnyRequest::HttpRequest(r)) => r.folder_id,
+                    Ok(AnyRequest::GrpcRequest(r)) => r.folder_id,
+                    Ok(AnyRequest::WebsocketRequest(r)) => r.folder_id,
+                    Err(_) => None,
+                }
+            } else {
+                None
+            };
+            let environment_chain = window.db().resolve_environments(
+                &workspace.id,
+                folder_id.as_deref(),
+                environment_id.as_deref(),
+            )?;
+            let plugin_manager = Arc::new(crate::plugins_ext::plugin_manager(app_handle).await?);
+            let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
+            let cb = PluginTemplateCallback::new(
+                plugin_manager,
+                encryption_manager,
+                plugin_context,
+                req.purpose.clone(),
+            );
+            let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+            let data = render_json_value(req.data.clone(), environment_chain, &cb, &opt).await?;
+            Ok(Some(InternalEventPayload::TemplateRenderResponse(TemplateRenderResponse { data })))
+        }
+        HostRequest::SendHttpRequest(req) => {
+            let window = get_window_from_plugin_context(app_handle, plugin_context)?;
+            let mut http_request = req.http_request.clone();
+            let workspace =
+                workspace_from_window(&window).expect("Failed to get workspace_id from window URL");
+            let cookie_jar = cookie_jar_from_window(&window);
+
+            if http_request.workspace_id.is_empty() {
+                http_request.workspace_id = workspace.id.clone();
+            }
+
+            let environment =
+                if let Some(environment_id) = req.environment_id.as_deref() {
+                    if http_request.workspace_id != workspace.id {
+                        return Err(crate::error::Error::GenericError(
+                            "HTTP request does not belong to the selected workspace".to_string(),
+                        ));
+                    }
+                    Some(window.db().get_environment_for_workspace(
+                        &http_request.workspace_id,
+                        environment_id,
+                    )?)
+                } else {
+                    environment_from_window(&window)
+                };
+
+            let http_response = if http_request.id.is_empty() {
+                HttpResponse::default()
+            } else {
+                let blobs = window.blob_manager();
+                window.with_tx(|tx| {
+                    tx.upsert_http_response(
+                        &HttpResponse {
+                            request_id: http_request.id.clone(),
+                            workspace_id: http_request.workspace_id.clone(),
+                            ..Default::default()
+                        },
+                        &UpdateSource::from_window_label(window.label()),
+                        &blobs,
+                    )
+                })?
+            };
+
+            let http_response = send_http_request_with_context(
+                &window,
+                &http_request,
+                &http_response,
+                environment,
+                cookie_jar,
+                &mut tokio::sync::watch::channel(false).1,
+                plugin_context,
+            )
+            .await?;
+
+            // An ad-hoc request saves nothing, so the engine hands the body
+            // back and this reply is the only place the plugin can get it.
+            let body = http_response.body.returned_bytes().map(|b| BASE64_STANDARD.encode(b));
+
+            Ok(Some(InternalEventPayload::SendHttpRequestResponse(SendHttpRequestResponse {
+                http_response: http_response.response,
+                body,
+            })))
+        }
+        HostRequest::OpenWindow(req) => {
+            let (navigation_tx, mut navigation_rx) = tokio::sync::mpsc::channel(128);
+            let (close_tx, mut close_rx) = tokio::sync::mpsc::channel(128);
+            let use_native_titlebar = app_handle.db().get_settings().use_native_titlebar;
+            let win_config = CreateWindowConfig {
+                url: &req.url,
+                label: &req.label,
+                title: &req.title.clone().unwrap_or_default(),
+                navigation_tx: Some(navigation_tx),
+                close_tx: Some(close_tx),
+                inner_size: req.size.clone().map(|s| (s.width, s.height)),
+                data_dir_key: req.data_dir_key.clone(),
+                use_native_titlebar,
+                ..Default::default()
+            };
+            if let Err(e) = create_window(app_handle, win_config) {
+                let error_event = plugin_handle.build_event_to_send(
+                    plugin_context,
+                    &InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: format!("Failed to create window: {:?}", e),
+                    }),
+                    None,
+                );
+                return Box::pin(handle_plugin_event(app_handle, &error_event, plugin_handle))
+                    .await;
+            }
+
+            {
+                let event_id = event.id.clone();
+                let plugin_handle = plugin_handle.clone();
+                let plugin_context = plugin_context.clone();
+                tauri::async_runtime::spawn(async move {
+                    while let Some(url) = navigation_rx.recv().await {
+                        let url = url.to_string();
+                        let event_to_send = plugin_handle.build_event_to_send(
+                            &plugin_context,
+                            &InternalEventPayload::WindowNavigateEvent(WindowNavigateEvent { url }),
+                            Some(event_id.clone()),
+                        );
+                        plugin_handle.send(&event_to_send).await.unwrap();
+                    }
+                });
+            }
+
+            {
+                let event_id = event.id.clone();
+                let plugin_handle = plugin_handle.clone();
+                let plugin_context = plugin_context.clone();
+                tauri::async_runtime::spawn(async move {
+                    while close_rx.recv().await.is_some() {
+                        let event_to_send = plugin_handle.build_event_to_send(
+                            &plugin_context,
+                            &InternalEventPayload::WindowCloseEvent,
+                            Some(event_id.clone()),
+                        );
+                        plugin_handle.send(&event_to_send).await.unwrap();
+                    }
+                });
+            }
+
+            Ok(None)
+        }
+        HostRequest::CloseWindow(req) => {
+            if let Some(window) = app_handle.webview_windows().get(&req.label) {
+                window.close()?;
+            }
+            Ok(None)
+        }
+        HostRequest::OpenExternalUrl(req) => {
+            app_handle.opener().open_url(&req.url, None::<&str>)?;
+            Ok(Some(InternalEventPayload::OpenExternalUrlResponse(EmptyPayload {})))
+        }
+        HostRequest::ListOpenWorkspaces(_) => {
+            let mut workspaces = Vec::new();
+            for (_, window) in app_handle.webview_windows() {
+                if let Some(workspace) = workspace_from_window(&window) {
+                    workspaces.push(WorkspaceInfo {
+                        id: workspace.id.clone(),
+                        name: workspace.name.clone(),
+                        label: window.label().to_string(),
+                    });
+                }
+            }
+            Ok(Some(InternalEventPayload::ListOpenWorkspacesResponse(ListOpenWorkspacesResponse {
+                workspaces,
+            })))
+        }
+        HostRequest::ListCookieNames(_) => {
+            let window = get_window_from_plugin_context(app_handle, plugin_context)?;
+            let names = match cookie_jar_from_window(&window) {
+                None => Vec::new(),
+                Some(j) => j.cookies.into_iter().map(|c| c.name).collect(),
+            };
+            Ok(Some(InternalEventPayload::ListCookieNamesResponse(ListCookieNamesResponse {
+                names,
+            })))
+        }
+        HostRequest::GetCookieValue(req) => {
+            let window = get_window_from_plugin_context(app_handle, plugin_context)?;
+            let value = match cookie_jar_from_window(&window) {
+                None => None,
+                Some(j) => get_cookie_value_from_jar(j.cookies, &req.name, req.domain.as_deref()),
+            };
+            Ok(Some(InternalEventPayload::GetCookieValueResponse(GetCookieValueResponse { value })))
+        }
+        HostRequest::WindowInfo(req) => {
+            let w = app_handle
+                .get_webview_window(&req.label)
+                .ok_or(PluginErr(format!("Failed to find window for {}", req.label)))?;
+
+            let environment_id = environment_from_window(&w).map(|m| m.id);
+            let workspace_id = workspace_from_window(&w).map(|m| m.id);
+            let request_id =
+                match app_handle.db().get_any_request(&w.request_id().unwrap_or_default()) {
+                    Ok(AnyRequest::HttpRequest(r)) => Some(r.id),
+                    Ok(AnyRequest::WebsocketRequest(r)) => Some(r.id),
+                    Ok(AnyRequest::GrpcRequest(r)) => Some(r.id),
+                    Err(_) => None,
+                };
+
+            Ok(Some(InternalEventPayload::WindowInfoResponse(WindowInfoResponse {
+                label: w.label().to_string(),
+                request_id,
+                workspace_id,
+                environment_id,
+            })))
+        }
+        HostRequest::OtherRequest(req) => {
+            Ok(Some(InternalEventPayload::ErrorResponse(ErrorResponse {
+                error: format!(
+                    "Unsupported plugin request in app host handler: {}",
+                    req.type_name()
+                ),
+            })))
+        }
+    }
+}
diff --git a/crates-tauri/yaak-app-client/src/plugins_ext.rs b/crates-tauri/yaak-app-client/src/plugins_ext.rs
new file mode 100644
index 0000000..8e26c64
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/plugins_ext.rs
@@ -0,0 +1,440 @@
+//! Tauri-specific plugin management code.
+//!
+//! This module contains all Tauri integration for the plugin system:
+//! - Plugin initialization and lifecycle management
+//! - Tauri commands for plugin search/install/uninstall
+//! - Plugin update checking
+
+use crate::PluginContextExt;
+use crate::error::Result;
+use crate::models_ext::QueryManagerExt;
+use log::{error, info, warn};
+use serde::Serialize;
+use std::sync::Arc;
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::time::{Duration, Instant};
+use tauri::path::BaseDirectory;
+use tauri::plugin::{Builder, TauriPlugin};
+use tauri::{
+    AppHandle, Emitter, Manager, RunEvent, Runtime, State, WebviewWindow, WindowEvent, is_dev,
+};
+use tokio::sync::Mutex;
+use ts_rs::TS;
+use yaak_api::{ApiClientKind, yaak_api_client};
+use yaak_models::models::{Plugin, PluginSource};
+use yaak_models::util::UpdateSource;
+use yaak_plugins::api::{
+    PluginNameVersion, PluginSearchResponse, PluginUpdatesResponse, check_plugin_updates,
+    search_plugins,
+};
+use yaak_plugins::error::Error::PluginErr;
+use yaak_plugins::events::{Color, PluginContext, ShowToastRequest};
+use yaak_plugins::install::{delete_and_uninstall, download_and_install};
+use yaak_plugins::manager::PluginManager;
+use yaak_plugins::plugin_meta::get_plugin_meta;
+
+static EXITING: AtomicBool = AtomicBool::new(false);
+
+// ============================================================================
+// Plugin Manager Handle
+// ============================================================================
+
+/// The plugin runtime boots in the background so startup doesn't wait on it.
+/// This handle is the only way to reach the manager: [`PluginManagerHandle::get`]
+/// resolves once boot completes, so callers can never observe a
+/// partially-initialized runtime.
+#[derive(Clone)]
+pub struct PluginManagerHandle {
+    rx: tokio::sync::watch::Receiver<Option<std::result::Result<PluginManager, String>>>,
+}
+
+impl PluginManagerHandle {
+    pub async fn get(&self) -> yaak_plugins::error::Result<PluginManager> {
+        let mut rx = self.rx.clone();
+        let result = rx
+            .wait_for(|v| v.is_some())
+            .await
+            .map_err(|_| PluginErr("Plugin runtime boot task died".to_string()))?;
+        result.clone().unwrap().map_err(PluginErr)
+    }
+}
+
+/// Wait for the plugin runtime to finish booting and return the manager.
+pub async fn plugin_manager<R: Runtime>(
+    manager: &impl Manager<R>,
+) -> yaak_plugins::error::Result<PluginManager> {
+    let handle = manager.state::<PluginManagerHandle>().inner().clone();
+    handle.get().await
+}
+
+// ============================================================================
+// Plugin Updater
+// ============================================================================
+
+const MAX_UPDATE_CHECK_HOURS: u64 = 12;
+
+pub struct PluginUpdater {
+    last_check: Option<Instant>,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "index.ts")]
+pub struct PluginUpdateNotification {
+    pub update_count: usize,
+    pub plugins: Vec<PluginUpdateInfo>,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "index.ts")]
+pub struct PluginUpdateInfo {
+    pub name: String,
+    pub current_version: String,
+    pub latest_version: String,
+}
+
+impl PluginUpdater {
+    pub fn new() -> Self {
+        Self { last_check: None }
+    }
+
+    pub async fn check_now<R: Runtime>(&mut self, window: &WebviewWindow<R>) -> Result<bool> {
+        self.last_check = Some(Instant::now());
+
+        info!("Checking for plugin updates");
+
+        let app_version = window.app_handle().package_info().version.to_string();
+        let http_client = yaak_api_client(ApiClientKind::App, &app_version)?;
+        let plugins = window.app_handle().db().list_plugins()?;
+        let updates = check_plugin_updates(&http_client, plugins.clone()).await?;
+
+        if updates.plugins.is_empty() {
+            info!("No plugin updates available");
+            return Ok(false);
+        }
+
+        // Get current plugin versions to build notification
+        let mut update_infos = Vec::new();
+
+        for update in &updates.plugins {
+            if let Some(plugin) = plugins.iter().find(|p| {
+                if let Ok(meta) = get_plugin_meta(&std::path::Path::new(&p.directory)) {
+                    meta.name == update.name
+                } else {
+                    false
+                }
+            }) {
+                if let Ok(meta) = get_plugin_meta(&std::path::Path::new(&plugin.directory)) {
+                    update_infos.push(PluginUpdateInfo {
+                        name: update.name.clone(),
+                        current_version: meta.version,
+                        latest_version: update.version.clone(),
+                    });
+                }
+            }
+        }
+
+        let notification =
+            PluginUpdateNotification { update_count: update_infos.len(), plugins: update_infos };
+
+        info!("Found {} plugin update(s)", notification.update_count);
+
+        if let Err(e) = window.emit_to(window.label(), "plugin_updates_available", ¬ification) {
+            error!("Failed to emit plugin_updates_available event: {}", e);
+        }
+
+        Ok(true)
+    }
+
+    pub async fn maybe_check<R: Runtime>(&mut self, window: &WebviewWindow<R>) -> Result<bool> {
+        let update_period_seconds = MAX_UPDATE_CHECK_HOURS * 60 * 60;
+
+        if let Some(i) = self.last_check
+            && i.elapsed().as_secs() < update_period_seconds
+        {
+            return Ok(false);
+        }
+
+        self.check_now(window).await
+    }
+}
+
+// ============================================================================
+// Tauri Commands
+// ============================================================================
+
+pub async fn cmd_plugins_search<R: Runtime>(
+    app_handle: AppHandle<R>,
+    query: &str,
+) -> Result<PluginSearchResponse> {
+    let app_version = app_handle.package_info().version.to_string();
+    let http_client = yaak_api_client(ApiClientKind::App, &app_version)?;
+    Ok(search_plugins(&http_client, query).await?)
+}
+
+pub async fn cmd_plugins_install<R: Runtime>(
+    window: WebviewWindow<R>,
+    name: &str,
+    version: Option<String>,
+) -> Result<()> {
+    let plugin_manager = Arc::new(plugin_manager(&window).await?);
+    let app_version = window.app_handle().package_info().version.to_string();
+    let http_client = yaak_api_client(ApiClientKind::App, &app_version)?;
+    let query_manager = window.state::<yaak_models::query_manager::QueryManager>();
+    let plugin_context = window.plugin_context();
+    download_and_install(
+        plugin_manager,
+        &query_manager,
+        &http_client,
+        &plugin_context,
+        name,
+        version,
+    )
+    .await?;
+    Ok(())
+}
+
+pub async fn cmd_plugins_install_from_directory<R: Runtime>(
+    window: WebviewWindow<R>,
+    directory: &str,
+) -> Result<Plugin> {
+    // Resolve the manager before writing the row so startup's plugin snapshot
+    // can't include it and boot it a second time
+    let plugin_manager = Arc::new(plugin_manager(&window).await?);
+    let plugin = window.with_tx(|tx| {
+        tx.upsert_plugin(
+            &Plugin {
+                directory: directory.into(),
+                url: None,
+                enabled: true,
+                source: PluginSource::Filesystem,
+                ..Default::default()
+            },
+            &UpdateSource::from_window_label(window.label()),
+        )
+    })?;
+
+    plugin_manager.add_plugin(&window.plugin_context(), &plugin).await?;
+
+    Ok(plugin)
+}
+
+pub async fn cmd_plugins_uninstall<R: Runtime>(
+    plugin_id: &str,
+    window: WebviewWindow<R>,
+) -> Result<Plugin> {
+    let plugin_manager = Arc::new(plugin_manager(&window).await?);
+    let query_manager = window.state::<yaak_models::query_manager::QueryManager>();
+    let plugin_context = window.plugin_context();
+    Ok(delete_and_uninstall(plugin_manager, &query_manager, &plugin_context, plugin_id).await?)
+}
+
+pub async fn cmd_plugins_updates<R: Runtime>(
+    app_handle: AppHandle<R>,
+) -> Result<PluginUpdatesResponse> {
+    let app_version = app_handle.package_info().version.to_string();
+    let http_client = yaak_api_client(ApiClientKind::App, &app_version)?;
+    let plugins = app_handle.db().list_plugins()?;
+    Ok(check_plugin_updates(&http_client, plugins).await?)
+}
+
+pub async fn cmd_plugins_update_all<R: Runtime>(
+    window: WebviewWindow<R>,
+) -> Result<Vec<PluginNameVersion>> {
+    let app_version = window.app_handle().package_info().version.to_string();
+    let http_client = yaak_api_client(ApiClientKind::App, &app_version)?;
+    let plugins = window.db().list_plugins()?;
+
+    // Get list of available updates (already filtered to only registry plugins)
+    let updates = check_plugin_updates(&http_client, plugins).await?;
+
+    if updates.plugins.is_empty() {
+        return Ok(Vec::new());
+    }
+
+    let plugin_manager = Arc::new(plugin_manager(&window).await?);
+    let query_manager = window.state::<yaak_models::query_manager::QueryManager>();
+    let plugin_context = window.plugin_context();
+
+    let mut updated = Vec::new();
+
+    for update in updates.plugins {
+        info!("Updating plugin: {} to version {}", update.name, update.version);
+        match download_and_install(
+            plugin_manager.clone(),
+            &query_manager,
+            &http_client,
+            &plugin_context,
+            &update.name,
+            Some(update.version.clone()),
+        )
+        .await
+        {
+            Ok(_) => {
+                info!("Successfully updated plugin: {}", update.name);
+                updated.push(update.clone());
+            }
+            Err(e) => {
+                log::error!("Failed to update plugin {}: {:?}", update.name, e);
+            }
+        }
+    }
+
+    Ok(updated)
+}
+
+// ============================================================================
+// Tauri Plugin Initialization
+// ============================================================================
+
+pub fn init<R: Runtime>() -> TauriPlugin<R> {
+    Builder::new("yaak-plugins")
+        .setup(|app_handle, _| {
+            // Resolve paths for plugin manager
+            let vendored_plugin_dir = app_handle
+                .path()
+                .resolve("vendored/plugins", BaseDirectory::Resource)
+                .expect("failed to resolve plugin directory resource");
+
+            let installed_plugin_dir = app_handle
+                .path()
+                .app_data_dir()
+                .expect("failed to get app data dir")
+                .join("installed-plugins");
+
+            #[cfg(target_os = "windows")]
+            let node_bin_name = "yaaknode.exe";
+            #[cfg(not(target_os = "windows"))]
+            let node_bin_name = "yaaknode";
+
+            // In dev, spawn yaaknode from the source vendored dir, not the copy under
+            // target/. tauri-build rewrites the target copy in place when the source
+            // changes (e.g. a Node version bump between branches), and on macOS an
+            // in-place write permanently taints the inode's cached code signature —
+            // every later spawn of it dies with SIGKILL (Code Signature Invalid).
+            // vendor-node.cjs always recreates the source file on a fresh inode.
+            #[cfg(debug_assertions)]
+            let node_bin_path = std::path::PathBuf::from(env!("CARGO_MANIFEST_DIR"))
+                .join("vendored")
+                .join("node")
+                .join(node_bin_name);
+
+            #[cfg(not(debug_assertions))]
+            let node_bin_path = app_handle
+                .path()
+                .resolve(format!("vendored/node/{}", node_bin_name), BaseDirectory::Resource)
+                .expect("failed to resolve yaaknode binary");
+
+            let plugin_runtime_main = app_handle
+                .path()
+                .resolve("vendored/plugin-runtime", BaseDirectory::Resource)
+                .expect("failed to resolve plugin runtime")
+                .join("index.cjs");
+
+            let dev_mode = is_dev();
+            let query_manager =
+                app_handle.state::<yaak_models::query_manager::QueryManager>().inner().clone();
+
+            // Boot the plugin runtime in the background so the window shows
+            // immediately. Everything that needs plugins resolves the handle,
+            // which waits for this task to finish.
+            let (tx, rx) = tokio::sync::watch::channel(None);
+            app_handle.manage(PluginManagerHandle { rx });
+            let app_handle_clone = app_handle.clone();
+            tauri::async_runtime::spawn(async move {
+                let result = tokio::time::timeout(
+                    Duration::from_secs(60),
+                    PluginManager::new(
+                        vendored_plugin_dir,
+                        installed_plugin_dir,
+                        node_bin_path,
+                        plugin_runtime_main,
+                        &query_manager,
+                        &PluginContext::new_empty(),
+                        dev_mode,
+                    ),
+                )
+                .await
+                .unwrap_or_else(|_| {
+                    Err(yaak_plugins::error::Error::PluginErr(
+                        "Timed out starting the plugin runtime".to_string(),
+                    ))
+                });
+
+                let manager = match result {
+                    Ok(manager) => manager,
+                    Err(e) => {
+                        error!("Failed to start plugin runtime: {e:?}");
+                        let _ = tx.send(Some(Err(e.to_string())));
+                        return;
+                    }
+                };
+
+                // Surface unexpected runtime crashes to the user
+                let mut crash_rx = manager.runtime_crash_rx();
+                let app_handle_crash = app_handle_clone.clone();
+                tauri::async_runtime::spawn(async move {
+                    if crash_rx.wait_for(|status| status.is_some()).await.is_ok() {
+                        let status = crash_rx.borrow().clone().unwrap_or_default();
+                        // The crash may happen during startup, before any window or
+                        // frontend listener exists — wait so the toast isn't lost
+                        while app_handle_crash.webview_windows().is_empty() {
+                            tokio::time::sleep(Duration::from_millis(500)).await;
+                        }
+                        tokio::time::sleep(Duration::from_secs(3)).await;
+                        let _ = app_handle_crash.emit(
+                            "show_toast",
+                            ShowToastRequest {
+                                message: format!("Plugin runtime crashed ({status})"),
+                                color: Some(Color::Danger),
+                                icon: None,
+                                timeout: None,
+                            },
+                        );
+                    }
+                });
+
+                let _ = tx.send(Some(Ok(manager)));
+            });
+
+            let plugin_updater = PluginUpdater::new();
+            app_handle.manage(Mutex::new(plugin_updater));
+
+            Ok(())
+        })
+        .on_event(|app, e| match e {
+            RunEvent::ExitRequested { api, .. } => {
+                if EXITING.swap(true, Ordering::SeqCst) {
+                    return; // Only exit once to prevent infinite recursion
+                }
+                api.prevent_exit();
+                tauri::async_runtime::block_on(async move {
+                    info!("Exiting plugin runtime due to app exit");
+                    // Bound the wait in case the exit comes while boot is still
+                    // in flight
+                    let get_manager = plugin_manager(app);
+                    if let Ok(Ok(manager)) =
+                        tokio::time::timeout(Duration::from_secs(5), get_manager).await
+                    {
+                        manager.terminate().await;
+                    }
+                    app.exit(0);
+                });
+            }
+            RunEvent::WindowEvent { event: WindowEvent::Focused(true), label, .. } => {
+                // Check for plugin updates on window focus
+                let w = app.get_webview_window(&label).unwrap();
+                let h = app.clone();
+                tauri::async_runtime::spawn(async move {
+                    tokio::time::sleep(Duration::from_secs(3)).await;
+                    let val: State<'_, Mutex<PluginUpdater>> = h.state();
+                    if let Err(e) = val.lock().await.maybe_check(&w).await {
+                        warn!("Failed to check for plugin updates {e:?}");
+                    }
+                });
+            }
+            _ => {}
+        })
+        .build()
+}
diff --git a/crates-tauri/yaak-app-client/src/render.rs b/crates-tauri/yaak-app-client/src/render.rs
new file mode 100644
index 0000000..1cc1a8c
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/render.rs
@@ -0,0 +1,8 @@
+//! One import path for rendering, wherever the pieces actually live.
+//!
+//! The request renderers are engine code; the template renderers moved to
+//! `yaak-commands` when the template commands did. Callers in this crate do not
+//! need to track which is which.
+
+pub use yaak_commands::render::{render_json_value, render_template};
+pub use yaak_models::render::{render_grpc_request, render_http_request};
diff --git a/crates-tauri/yaak-app-client/src/restart.rs b/crates-tauri/yaak-app-client/src/restart.rs
new file mode 100644
index 0000000..fa984de
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/restart.rs
@@ -0,0 +1,107 @@
+#[cfg(target_os = "macos")]
+use log::{error, info};
+#[cfg(any(target_os = "macos", test))]
+use std::path::{Path, PathBuf};
+#[cfg(target_os = "macos")]
+use std::process::{Command, Stdio};
+#[cfg(target_os = "macos")]
+use std::sync::atomic::{AtomicBool, Ordering};
+use tauri::{AppHandle, Runtime};
+
+#[cfg(target_os = "macos")]
+static RELAUNCH_WITH_LAUNCH_SERVICES: AtomicBool = AtomicBool::new(false);
+
+/// Restart the app without directly spawning the executable on macOS.
+///
+/// Tauri's current macOS restart path starts the executable from the dying
+/// process. Besides inheriting stale process state, that bypasses
+/// LaunchServices and can leave the replacement app running without an active
+/// window. Defer the relaunch until `RunEvent::Exit`, when the event loop is
+/// already shutting down, and hand it to LaunchServices instead.
+pub fn request_restart<R: Runtime>(app_handle: &AppHandle<R>) {
+    #[cfg(target_os = "macos")]
+    if current_app_bundle().is_some() {
+        info!("Requesting restart through macOS LaunchServices");
+        RELAUNCH_WITH_LAUNCH_SERVICES.store(true, Ordering::SeqCst);
+        app_handle.exit(0);
+        return;
+    }
+
+    app_handle.request_restart();
+}
+
+/// Complete a pending macOS restart after Tauri has emitted its exit events.
+pub fn relaunch_if_requested() {
+    #[cfg(target_os = "macos")]
+    {
+        if !RELAUNCH_WITH_LAUNCH_SERVICES.swap(false, Ordering::SeqCst) {
+            return;
+        }
+
+        let Some(bundle) = current_app_bundle() else {
+            error!("Failed to resolve the app bundle for restart");
+            return;
+        };
+
+        match Command::new("/usr/bin/open")
+            .arg("-n")
+            .arg(&bundle)
+            .stdin(Stdio::null())
+            .stdout(Stdio::null())
+            .stderr(Stdio::null())
+            .spawn()
+        {
+            Ok(_) => info!("Relaunching {} through LaunchServices", bundle.display()),
+            Err(error) => error!("Failed to relaunch through LaunchServices: {error}"),
+        }
+    }
+}
+
+#[cfg(target_os = "macos")]
+fn current_app_bundle() -> Option<PathBuf> {
+    app_bundle_from_executable(&std::env::current_exe().ok()?)
+}
+
+#[cfg(any(target_os = "macos", test))]
+fn app_bundle_from_executable(executable: &Path) -> Option<PathBuf> {
+    let macos_dir = executable.parent()?;
+    if macos_dir.file_name()? != "MacOS" {
+        return None;
+    }
+
+    let contents_dir = macos_dir.parent()?;
+    if contents_dir.file_name()? != "Contents" {
+        return None;
+    }
+
+    let bundle = contents_dir.parent()?;
+    if bundle.extension()? != "app" {
+        return None;
+    }
+
+    Some(bundle.to_owned())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::app_bundle_from_executable;
+    use std::path::{Path, PathBuf};
+
+    #[test]
+    fn resolves_macos_app_bundle() {
+        assert_eq!(
+            app_bundle_from_executable(Path::new(
+                "/Applications/Yaak.app/Contents/MacOS/yaak-app-client"
+            )),
+            Some(PathBuf::from("/Applications/Yaak.app"))
+        );
+    }
+
+    #[test]
+    fn ignores_unbundled_executable() {
+        assert_eq!(
+            app_bundle_from_executable(Path::new("/workspace/target/debug/yaak-app-client")),
+            None
+        );
+    }
+}
diff --git a/crates-tauri/yaak-app-client/src/rpc_ext.rs b/crates-tauri/yaak-app-client/src/rpc_ext.rs
new file mode 100644
index 0000000..1e45970
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/rpc_ext.rs
@@ -0,0 +1,1235 @@
+//! The client's RPC surface: every command, wired to its Tauri implementation.
+//!
+//! The *shape* of the surface — command names, request payloads, response
+//! types — is declared once in `yaak_rpc_schema`, which is also where the
+//! TypeScript bindings come from. This module supplies the desktop's half: an
+//! adapter per command that turns a `ClientCtx` and a request struct into a
+//! call on the existing implementation, and the single `rpc` Tauri command that
+//! is the only way the frontend reaches any of it — one envelope,
+//! `{ cmd, payload }`, exactly like the proxy app.
+//!
+//! Command bodies live in one of two places. Host-independent ones are in
+//! `yaak_commands`, written against its `Host` trait, which `ClientCtx`
+//! implements below; their adapters are one line. The rest still have their
+//! natural Tauri signatures (window, app handle, managed state) and their
+//! adapters unpack the request for them. Either way the wire format stays
+//! transport-agnostic: another host builds its router from the same schema
+//! with its own `Host`, and the frontend cannot tell.
+
+use crate::error::Result;
+use crate::notifications::YaakNotifier;
+use crate::updates::YaakUpdater;
+use log::warn;
+use serde::Serialize;
+use std::collections::HashMap;
+use std::sync::Arc;
+use tauri::{Manager, Runtime, State, WebviewWindow};
+use tokio::sync::Mutex;
+use yaak_commands::{Host, PluginHost};
+use yaak_core::WorkspaceContext;
+use yaak_crypto::manager::EncryptionManager;
+use yaak_git::{
+    BranchDeleteResult, CloneResult, GitBranchInfo, GitCommit, GitFileDiff, GitRemote,
+    GitStatusSummary, GitWorktreeStatus, PullResult, PushResult,
+};
+use yaak_grpc::ServiceDefinition;
+use yaak_grpc::manager::GrpcHandle;
+use yaak_models::blob_manager::BlobManager;
+use yaak_models::models::{
+    GraphQlIntrospection, GrpcEvent, HttpRequest, HttpRequestHeader, HttpResponse,
+    HttpResponseEvent, ImportSource, Plugin, Settings, WebsocketConnection, WebsocketEvent,
+    WorkspaceMeta,
+};
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::{BatchUpsertResult, ImportPlan};
+use yaak_plugins::api::{PluginNameVersion, PluginSearchResponse, PluginUpdatesResponse};
+use yaak_plugins::events::{
+    CallFolderActionRequest, CallGrpcRequestActionRequest, CallHttpRequestActionRequest,
+    CallWebsocketRequestActionRequest, CallWorkspaceActionRequest, FilterResponse,
+    GetFolderActionsResponse, GetGrpcRequestActionsResponse, GetHttpAuthenticationConfigResponse,
+    GetHttpAuthenticationSummaryResponse, GetHttpRequestActionsResponse,
+    GetTemplateFunctionConfigResponse, GetTemplateFunctionSummaryResponse, GetThemesResponse,
+    GetWebsocketRequestActionsResponse, GetWorkspaceActionsResponse, ImportResponse, JsonPrimitive,
+    RenderPurpose,
+};
+use yaak_plugins::manager::PluginManager;
+use yaak_plugins::native_template_functions::encrypt_secure_template_function;
+use yaak_plugins::plugin_meta::PluginMetadata;
+use yaak_plugins::template_callback::PluginTemplateCallback;
+use yaak_rpc::RpcRouter;
+use yaak_rpc_schema::*;
+use yaak_sse::sse::ServerSentEvent;
+use yaak_sync::sync::SyncOp;
+use yaak_tauri_utils::window::WorkspaceWindowTrait;
+use yaak_templates::TemplateCallback;
+use yaak_ws::WebsocketManager;
+
+/// Per-call context: the window a command was invoked from.
+///
+/// Window identity is load-bearing — model writes carry it for echo
+/// suppression, and plugin events and toasts are routed back through it — so it
+/// rides along with every dispatch rather than living in shared state.
+pub(crate) struct ClientCtx<R: Runtime> {
+    pub window: WebviewWindow<R>,
+}
+
+// Derived Clone would demand `R: Clone`, which `Runtime` types don't provide;
+// the window handle itself is always cloneable.
+impl<R: Runtime> Clone for ClientCtx<R> {
+    fn clone(&self) -> Self {
+        Self { window: self.window.clone() }
+    }
+}
+
+/// The desktop is a host: the client is the window, the session is the
+/// window's URL, and the shared managers are Tauri managed state.
+impl<R: Runtime> Host for ClientCtx<R> {
+    fn client_id(&self) -> &str {
+        self.window.label()
+    }
+
+    fn session(&self) -> WorkspaceContext {
+        self.window.workspace_context()
+    }
+
+    fn app_version(&self) -> String {
+        self.window.package_info().version.to_string()
+    }
+
+    fn query_manager(&self) -> &QueryManager {
+        self.window.state::<QueryManager>().inner()
+    }
+
+    fn blob_manager(&self) -> &BlobManager {
+        self.window.state::<BlobManager>().inner()
+    }
+
+    fn encryption_manager(&self) -> &EncryptionManager {
+        self.window.state::<EncryptionManager>().inner()
+    }
+}
+
+impl<R: Runtime> ClientCtx<R> {
+    /// The plugin runtime this window talks to, once it finishes booting.
+    /// Only the `PluginHost` impl below uses it; everything else goes through
+    /// the trait.
+    async fn pm(&self) -> yaak_plugins::error::Result<PluginManager> {
+        crate::plugins_ext::plugin_manager(&self.window).await
+    }
+}
+
+/// The desktop answers all of these out of the `PluginManager` it already
+/// runs — the Node sidecar. Each is a delegation, which is the point: the
+/// operations are what the handlers need, and this is one host's way of
+/// providing them.
+impl<R: Runtime> PluginHost for ClientCtx<R> {
+    async fn loaded_plugin_metadata(&self, directory: &str) -> Option<PluginMetadata> {
+        let handle = self.pm().await.ok()?.get_plugin_by_dir(directory).await?;
+        Some(handle.info())
+    }
+
+    async fn take_plugin_init_errors(&self) -> Vec<(String, String)> {
+        match self.pm().await {
+            Ok(pm) => pm.take_init_errors().await,
+            Err(_) => Vec::new(),
+        }
+    }
+
+    async fn resolve_plugins(&self, plugins: Vec<Plugin>) -> Vec<Plugin> {
+        match self.pm().await {
+            Ok(pm) => pm.resolve_plugins_for_runtime_from_db(plugins).await,
+            Err(_) => plugins,
+        }
+    }
+
+    async fn template_callback(
+        &self,
+        purpose: RenderPurpose,
+    ) -> yaak_commands::Result<impl TemplateCallback> {
+        Ok(PluginTemplateCallback::new(
+            Arc::new(self.pm().await?),
+            Arc::new(self.encryption_manager().clone()),
+            &self.plugin_context(),
+            purpose,
+        ))
+    }
+
+    async fn template_function_summaries(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetTemplateFunctionSummaryResponse>> {
+        Ok(self.pm().await?.get_template_function_summaries(&self.plugin_context()).await?)
+    }
+
+    async fn template_function_config(
+        &self,
+        function_name: &str,
+        values: HashMap<String, JsonPrimitive>,
+        model_id: &str,
+    ) -> yaak_commands::Result<GetTemplateFunctionConfigResponse> {
+        Ok(self
+            .pm()
+            .await?
+            .get_template_function_config(&self.plugin_context(), function_name, values, model_id)
+            .await?)
+    }
+
+    async fn themes(&self) -> yaak_commands::Result<Vec<GetThemesResponse>> {
+        Ok(self.pm().await?.get_themes(&self.plugin_context()).await?)
+    }
+
+    async fn http_request_actions(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetHttpRequestActionsResponse>> {
+        Ok(self.pm().await?.get_http_request_actions(&self.plugin_context()).await?)
+    }
+
+    async fn websocket_request_actions(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetWebsocketRequestActionsResponse>> {
+        Ok(self.pm().await?.get_websocket_request_actions(&self.plugin_context()).await?)
+    }
+
+    async fn grpc_request_actions(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetGrpcRequestActionsResponse>> {
+        Ok(self.pm().await?.get_grpc_request_actions(&self.plugin_context()).await?)
+    }
+
+    async fn workspace_actions(&self) -> yaak_commands::Result<Vec<GetWorkspaceActionsResponse>> {
+        Ok(self.pm().await?.get_workspace_actions(&self.plugin_context()).await?)
+    }
+
+    async fn folder_actions(&self) -> yaak_commands::Result<Vec<GetFolderActionsResponse>> {
+        Ok(self.pm().await?.get_folder_actions(&self.plugin_context()).await?)
+    }
+
+    async fn call_http_request_action(
+        &self,
+        req: CallHttpRequestActionRequest,
+    ) -> yaak_commands::Result<()> {
+        Ok(self.pm().await?.call_http_request_action(&self.plugin_context(), req).await?)
+    }
+
+    async fn call_grpc_request_action(
+        &self,
+        req: CallGrpcRequestActionRequest,
+    ) -> yaak_commands::Result<()> {
+        Ok(self.pm().await?.call_grpc_request_action(&self.plugin_context(), req).await?)
+    }
+
+    async fn call_websocket_request_action(
+        &self,
+        req: CallWebsocketRequestActionRequest,
+    ) -> yaak_commands::Result<()> {
+        Ok(self.pm().await?.call_websocket_request_action(&self.plugin_context(), req).await?)
+    }
+
+    async fn call_workspace_action(
+        &self,
+        req: CallWorkspaceActionRequest,
+    ) -> yaak_commands::Result<()> {
+        Ok(self.pm().await?.call_workspace_action(&self.plugin_context(), req).await?)
+    }
+
+    async fn call_folder_action(&self, req: CallFolderActionRequest) -> yaak_commands::Result<()> {
+        Ok(self.pm().await?.call_folder_action(&self.plugin_context(), req).await?)
+    }
+
+    async fn http_authentication_summaries(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetHttpAuthenticationSummaryResponse>> {
+        let results =
+            self.pm().await?.get_http_authentication_summaries(&self.plugin_context()).await?;
+        Ok(results.into_iter().map(|(_, a)| a).collect())
+    }
+
+    async fn http_authentication_config(
+        &self,
+        auth_name: &str,
+        values: HashMap<String, JsonPrimitive>,
+        model_id: &str,
+    ) -> yaak_commands::Result<GetHttpAuthenticationConfigResponse> {
+        Ok(self
+            .pm()
+            .await?
+            .get_http_authentication_config(&self.plugin_context(), auth_name, values, model_id)
+            .await?)
+    }
+
+    async fn call_http_authentication_action(
+        &self,
+        auth_name: &str,
+        action_index: i32,
+        values: HashMap<String, JsonPrimitive>,
+        model_id: &str,
+    ) -> yaak_commands::Result<()> {
+        Ok(self
+            .pm()
+            .await?
+            .call_http_authentication_action(
+                &self.plugin_context(),
+                auth_name,
+                action_index,
+                values,
+                model_id,
+            )
+            .await?)
+    }
+
+    async fn import_data(&self, content: &str) -> yaak_commands::Result<ImportResponse> {
+        Ok(self.pm().await?.import_data(&self.plugin_context(), content).await?)
+    }
+
+    async fn reload_plugins(&self, plugins: Vec<Plugin>) -> Vec<(String, String)> {
+        match self.pm().await {
+            Ok(pm) => pm.initialize_all_plugins(plugins, &self.plugin_context()).await,
+            Err(e) => vec![("*".to_string(), e.to_string())],
+        }
+    }
+
+    async fn encrypt_secure_template(&self, template: &str) -> yaak_commands::Result<String> {
+        let plugin_manager = Arc::new(self.pm().await?);
+        let encryption_manager = Arc::new(self.encryption_manager().clone());
+        Ok(encrypt_secure_template_function(
+            plugin_manager,
+            encryption_manager,
+            &self.plugin_context(),
+            template,
+        )?)
+    }
+}
+
+/// The one Tauri command. The payload is the yaak-rpc envelope's payload;
+/// a missing payload means an empty one.
+#[tauri::command]
+pub(crate) async fn rpc<R: Runtime>(
+    window: WebviewWindow<R>,
+    router: State<'_, RpcRouter<ClientCtx<R>>>,
+    cmd: String,
+    payload: Option<serde_json::Value>,
+) -> std::result::Result<serde_json::Value, String> {
+    let ctx = ClientCtx { window };
+    let payload = payload.unwrap_or_else(|| serde_json::Value::Object(Default::default()));
+    log::debug!("RPC {cmd}");
+    router.dispatch(&cmd, payload, &ctx).await.map_err(|e| {
+        log::warn!("RPC {cmd} failed: {}", e.message);
+        e.message
+    })
+}
+
+/// A callback that forwards a stream of messages to the calling window as
+/// `stream_{id}` events. The stream id is minted by the caller so it can
+/// subscribe before the command starts and never miss a message.
+fn stream_emitter<R: Runtime, T: Serialize>(
+    ctx: &ClientCtx<R>,
+    stream_id: &str,
+) -> impl Fn(T) + Send + Sync + 'static {
+    use tauri::Emitter;
+    let window = ctx.window.clone();
+    let event = format!("stream_{stream_id}");
+    move |payload: T| {
+        let value = match serde_json::to_value(payload) {
+            Ok(value) => value,
+            Err(e) => {
+                warn!("Failed to serialize stream event: {e}");
+                return;
+            }
+        };
+        if let Err(e) = window.emit_to(window.label(), &event, value) {
+            warn!("Failed to emit stream event: {e}");
+        }
+    }
+}
+
+// -- Streaming commands (hand-written: they push events while they run) --
+
+async fn cmd_git_watch_worktree_status<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdGitWatchWorktreeStatusReq,
+) -> Result<GitWatchResult> {
+    let on_status = stream_emitter(&ctx, &req.stream_id);
+    crate::git_watcher::watch_git_worktree_status(
+        ctx.window.app_handle().clone(),
+        &req.dir,
+        on_status,
+    )
+    .await
+}
+
+async fn cmd_sync_watch<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdSyncWatchReq,
+) -> Result<WatchResult> {
+    let on_event = stream_emitter(&ctx, &req.stream_id);
+    Ok(crate::sync_ext::sync_watch(
+        ctx.window.app_handle().clone(),
+        &req.sync_dir,
+        &req.workspace_id,
+        on_event,
+    )
+    .await?)
+}
+
+/// Build the router with every command in the schema registered to its
+/// adapter here. Generic over the runtime so the same registry serves Wry and
+/// CEF builds. Adding a command means adding it to the schema *and* writing an
+/// adapter below; a missing adapter fails to compile rather than 404 at runtime.
+macro_rules! register_commands {
+    ( $( $name:ident ( $req:ty ) -> $res:ty ),* $(,)? ) => {
+        pub(crate) fn build_rpc_router<R: Runtime>() -> RpcRouter<ClientCtx<R>> {
+            let mut router = RpcRouter::new();
+            $( router.register(stringify!($name), yaak_rpc::rpc_handler_async!($name)); )*
+            router
+        }
+    };
+}
+yaak_rpc_schema::with_commands!(register_commands);
+
+// -- Adapters --
+
+async fn cmd_metadata<R: Runtime>(ctx: ClientCtx<R>, _req: CmdMetadataReq) -> Result<AppMetaData> {
+    Ok(crate::cmd_metadata(ctx.window.app_handle().clone()).await?)
+}
+
+async fn cmd_template_tokens_to_string<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdTemplateTokensToStringReq,
+) -> Result<String> {
+    Ok(yaak_commands::templates::cmd_template_tokens_to_string(ctx, req).await?)
+}
+
+async fn cmd_render_template<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdRenderTemplateReq,
+) -> Result<String> {
+    Ok(yaak_commands::templates::cmd_render_template(ctx, req).await?)
+}
+
+async fn cmd_send_feedback<R: Runtime>(ctx: ClientCtx<R>, req: CmdSendFeedbackReq) -> Result<()> {
+    Ok(crate::cmd_send_feedback(ctx.window.app_handle().clone(), req.feature, req.text).await?)
+}
+
+async fn cmd_dismiss_notification<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdDismissNotificationReq,
+) -> Result<()> {
+    Ok(crate::cmd_dismiss_notification(
+        ctx.window.clone(),
+        &req.notification_id,
+        ctx.window.app_handle().state::<Mutex<YaakNotifier>>(),
+    )
+    .await?)
+}
+
+async fn cmd_grpc_reflect<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdGrpcReflectReq,
+) -> Result<Vec<ServiceDefinition>> {
+    Ok(crate::cmd_grpc_reflect(
+        &req.request_id,
+        req.environment_id.as_deref(),
+        req.proto_files,
+        ctx.window.clone(),
+        ctx.window.app_handle().clone(),
+        ctx.window.app_handle().state::<Mutex<GrpcHandle>>(),
+    )
+    .await?)
+}
+
+async fn cmd_grpc_go<R: Runtime>(ctx: ClientCtx<R>, req: CmdGrpcGoReq) -> Result<String> {
+    Ok(crate::cmd_grpc_go(
+        &req.request_id,
+        req.environment_id.as_deref(),
+        req.proto_files,
+        ctx.window.app_handle().clone(),
+        ctx.window.clone(),
+        ctx.window.app_handle().state::<Mutex<GrpcHandle>>(),
+    )
+    .await?)
+}
+
+async fn cmd_restart<R: Runtime>(ctx: ClientCtx<R>, _req: CmdRestartReq) -> Result<()> {
+    Ok(crate::cmd_restart(ctx.window.app_handle().clone()).await?)
+}
+
+async fn cmd_send_ephemeral_request<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdSendEphemeralRequestReq,
+) -> Result<EphemeralHttpResponse> {
+    Ok(crate::cmd_send_ephemeral_request(
+        req.request,
+        req.environment_id.as_deref(),
+        req.cookie_jar_id.as_deref(),
+        ctx.window.clone(),
+        ctx.window.app_handle().clone(),
+    )
+    .await?)
+}
+
+async fn cmd_format_json<R: Runtime>(ctx: ClientCtx<R>, req: CmdFormatJsonReq) -> Result<String> {
+    Ok(yaak_commands::data::cmd_format_json(ctx, req).await?)
+}
+
+async fn cmd_format_graphql<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdFormatGraphqlReq,
+) -> Result<String> {
+    Ok(crate::cmd_format_graphql(&req.text).await?)
+}
+
+async fn cmd_http_response_body<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdHttpResponseBodyReq,
+) -> Result<FilterResponse> {
+    Ok(crate::cmd_http_response_body(ctx.window.clone(), &req.response_id, req.filter.as_deref())
+        .await?)
+}
+
+async fn cmd_http_response_body_path<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdHttpResponseBodyPathReq,
+) -> Result<Option<String>> {
+    Ok(yaak_commands::responses::cmd_http_response_body_path(ctx, req).await?)
+}
+
+async fn cmd_http_request_body<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdHttpRequestBodyReq,
+) -> Result<Option<Vec<u8>>> {
+    Ok(yaak_commands::responses::cmd_http_request_body(ctx, req).await?)
+}
+
+async fn cmd_get_sse_events<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdGetSseEventsReq,
+) -> Result<Vec<ServerSentEvent>> {
+    Ok(crate::cmd_get_sse_events(ctx.window.app_handle().clone(), &req.response_id).await?)
+}
+
+async fn cmd_get_http_response_events<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdGetHttpResponseEventsReq,
+) -> Result<Vec<HttpResponseEvent>> {
+    Ok(yaak_commands::responses::cmd_get_http_response_events(ctx, req).await?)
+}
+
+async fn cmd_import_data<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdImportDataReq,
+) -> Result<ImportPlan> {
+    Ok(crate::cmd_import_data(ctx.window.clone(), &req.file_path, req.destination).await?)
+}
+
+async fn cmd_import_url<R: Runtime>(ctx: ClientCtx<R>, req: CmdImportUrlReq) -> Result<ImportPlan> {
+    Ok(crate::cmd_import_url(ctx.window.clone(), &req.url, req.destination).await?)
+}
+
+async fn cmd_commit_import<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdCommitImportReq,
+) -> Result<BatchUpsertResult> {
+    Ok(crate::cmd_commit_import(ctx.window.clone(), req.plan).await?)
+}
+
+async fn cmd_list_import_sources<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdListImportSourcesReq,
+) -> Result<Vec<ImportSource>> {
+    use crate::models_ext::QueryManagerExt;
+    Ok(ctx.window.db().list_import_sources(&req.workspace_id)?)
+}
+
+async fn cmd_import_sources_for_origin<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdImportSourcesForOriginReq,
+) -> Result<Vec<ImportSource>> {
+    use crate::models_ext::QueryManagerExt;
+    let origin = match (req.file_path, req.url) {
+        (Some(file_path), _) => crate::import::file_origin(&file_path).origin,
+        (None, Some(url)) => match crate::import::normalize_import_url(&url) {
+            Ok(url) => crate::import::url_origin(&url).origin,
+            Err(_) => return Ok(Vec::new()),
+        },
+        (None, None) => return Ok(Vec::new()),
+    };
+    Ok(ctx.window.db().list_import_sources_by_origin(&origin)?)
+}
+
+async fn cmd_http_request_actions<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdHttpRequestActionsReq,
+) -> Result<Vec<GetHttpRequestActionsResponse>> {
+    Ok(yaak_commands::actions::cmd_http_request_actions(ctx, req).await?)
+}
+
+async fn cmd_websocket_request_actions<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdWebsocketRequestActionsReq,
+) -> Result<Vec<GetWebsocketRequestActionsResponse>> {
+    Ok(yaak_commands::actions::cmd_websocket_request_actions(ctx, req).await?)
+}
+
+async fn cmd_call_websocket_request_action<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdCallWebsocketRequestActionReq,
+) -> Result<()> {
+    Ok(yaak_commands::actions::cmd_call_websocket_request_action(ctx, req).await?)
+}
+
+async fn cmd_workspace_actions<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdWorkspaceActionsReq,
+) -> Result<Vec<GetWorkspaceActionsResponse>> {
+    Ok(yaak_commands::actions::cmd_workspace_actions(ctx, req).await?)
+}
+
+async fn cmd_call_workspace_action<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdCallWorkspaceActionReq,
+) -> Result<()> {
+    Ok(yaak_commands::actions::cmd_call_workspace_action(ctx, req).await?)
+}
+
+async fn cmd_folder_actions<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdFolderActionsReq,
+) -> Result<Vec<GetFolderActionsResponse>> {
+    Ok(yaak_commands::actions::cmd_folder_actions(ctx, req).await?)
+}
+
+async fn cmd_call_folder_action<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdCallFolderActionReq,
+) -> Result<()> {
+    Ok(yaak_commands::actions::cmd_call_folder_action(ctx, req).await?)
+}
+
+async fn cmd_grpc_request_actions<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdGrpcRequestActionsReq,
+) -> Result<Vec<GetGrpcRequestActionsResponse>> {
+    Ok(yaak_commands::actions::cmd_grpc_request_actions(ctx, req).await?)
+}
+
+async fn cmd_template_function_summaries<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdTemplateFunctionSummariesReq,
+) -> Result<Vec<GetTemplateFunctionSummaryResponse>> {
+    Ok(yaak_commands::templates::cmd_template_function_summaries(ctx, req).await?)
+}
+
+async fn cmd_template_function_config<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdTemplateFunctionConfigReq,
+) -> Result<GetTemplateFunctionConfigResponse> {
+    Ok(yaak_commands::templates::cmd_template_function_config(ctx, req).await?)
+}
+
+async fn cmd_get_http_authentication_summaries<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdGetHttpAuthenticationSummariesReq,
+) -> Result<Vec<GetHttpAuthenticationSummaryResponse>> {
+    Ok(yaak_commands::auth::cmd_get_http_authentication_summaries(ctx, req).await?)
+}
+
+async fn cmd_get_http_authentication_config<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdGetHttpAuthenticationConfigReq,
+) -> Result<GetHttpAuthenticationConfigResponse> {
+    Ok(yaak_commands::auth::cmd_get_http_authentication_config(ctx, req).await?)
+}
+
+async fn cmd_call_http_request_action<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdCallHttpRequestActionReq,
+) -> Result<()> {
+    Ok(yaak_commands::actions::cmd_call_http_request_action(ctx, req).await?)
+}
+
+async fn cmd_call_grpc_request_action<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdCallGrpcRequestActionReq,
+) -> Result<()> {
+    Ok(yaak_commands::actions::cmd_call_grpc_request_action(ctx, req).await?)
+}
+
+async fn cmd_call_http_authentication_action<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdCallHttpAuthenticationActionReq,
+) -> Result<()> {
+    Ok(yaak_commands::auth::cmd_call_http_authentication_action(ctx, req).await?)
+}
+
+async fn cmd_curl_to_request<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdCurlToRequestReq,
+) -> Result<HttpRequest> {
+    Ok(yaak_commands::actions::cmd_curl_to_request(ctx, req).await?)
+}
+
+async fn cmd_export_data<R: Runtime>(ctx: ClientCtx<R>, req: CmdExportDataReq) -> Result<String> {
+    Ok(yaak_commands::data::cmd_export_data(ctx, req).await?)
+}
+
+async fn cmd_create_example_workspace<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdCreateExampleWorkspaceReq,
+) -> Result<BatchUpsertResult> {
+    Ok(yaak_commands::data::cmd_create_example_workspace(ctx, req).await?)
+}
+
+async fn cmd_save_base64_to_binary<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdSaveBase64ToBinaryReq,
+) -> Result<()> {
+    Ok(crate::cmd_save_base64_to_binary(ctx.window.app_handle().clone(), &req.filepath, &req.data)
+        .await?)
+}
+
+async fn cmd_save_response<R: Runtime>(ctx: ClientCtx<R>, req: CmdSaveResponseReq) -> Result<()> {
+    Ok(yaak_commands::responses::cmd_save_response(ctx, req).await?)
+}
+
+async fn cmd_send_http_request<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdSendHttpRequestReq,
+) -> Result<HttpResponse> {
+    Ok(crate::cmd_send_http_request(
+        ctx.window.app_handle().clone(),
+        ctx.window.clone(),
+        req.environment_id.as_deref(),
+        req.cookie_jar_id.as_deref(),
+        req.request_id,
+    )
+    .await?)
+}
+
+async fn cmd_reload_plugins<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdReloadPluginsReq,
+) -> Result<Vec<(String, String)>> {
+    Ok(yaak_commands::actions::cmd_reload_plugins(ctx, req).await?)
+}
+
+async fn cmd_plugin_info<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdPluginInfoReq,
+) -> Result<PluginMetadata> {
+    Ok(yaak_commands::plugins::cmd_plugin_info(ctx, req).await?)
+}
+
+async fn cmd_delete_all_grpc_connections<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdDeleteAllGrpcConnectionsReq,
+) -> Result<()> {
+    Ok(yaak_commands::models::cmd_delete_all_grpc_connections(ctx, req).await?)
+}
+
+async fn cmd_delete_send_history<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdDeleteSendHistoryReq,
+) -> Result<()> {
+    Ok(yaak_commands::models::cmd_delete_send_history(ctx, req).await?)
+}
+
+async fn cmd_delete_all_http_responses<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdDeleteAllHttpResponsesReq,
+) -> Result<()> {
+    Ok(yaak_commands::models::cmd_delete_all_http_responses(ctx, req).await?)
+}
+
+async fn cmd_get_workspace_meta<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdGetWorkspaceMetaReq,
+) -> Result<WorkspaceMeta> {
+    Ok(yaak_commands::models::cmd_get_workspace_meta(ctx, req).await?)
+}
+
+async fn cmd_new_child_window<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdNewChildWindowReq,
+) -> Result<()> {
+    Ok(crate::cmd_new_child_window(
+        ctx.window.clone(),
+        &req.url,
+        &req.label,
+        &req.title,
+        req.inner_size,
+    )
+    .await?)
+}
+
+async fn cmd_new_main_window<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdNewMainWindowReq,
+) -> Result<()> {
+    Ok(crate::cmd_new_main_window(ctx.window.app_handle().clone(), &req.url).await?)
+}
+
+async fn cmd_check_for_updates<R: Runtime>(
+    ctx: ClientCtx<R>,
+    _req: CmdCheckForUpdatesReq,
+) -> Result<bool> {
+    Ok(crate::cmd_check_for_updates(
+        ctx.window.clone(),
+        ctx.window.app_handle().state::<Mutex<YaakUpdater>>(),
+    )
+    .await?)
+}
+
+async fn cmd_decrypt_template<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdDecryptTemplateReq,
+) -> Result<String> {
+    Ok(yaak_commands::encryption::cmd_decrypt_template(ctx, req).await?)
+}
+
+async fn cmd_secure_template<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdSecureTemplateReq,
+) -> Result<String> {
+    Ok(yaak_commands::encryption::cmd_secure_template(ctx, req).await?)
+}
+
+async fn cmd_get_themes<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdGetThemesReq,
+) -> Result<Vec<GetThemesResponse>> {
+    Ok(yaak_commands::templates::cmd_get_themes(ctx, req).await?)
+}
+
+async fn cmd_enable_encryption<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdEnableEncryptionReq,
+) -> Result<()> {
+    Ok(yaak_commands::encryption::cmd_enable_encryption(ctx, req).await?)
+}
+
+async fn cmd_reveal_workspace_key<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdRevealWorkspaceKeyReq,
+) -> Result<String> {
+    Ok(yaak_commands::encryption::cmd_reveal_workspace_key(ctx, req).await?)
+}
+
+async fn cmd_set_workspace_key<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdSetWorkspaceKeyReq,
+) -> Result<()> {
+    Ok(yaak_commands::encryption::cmd_set_workspace_key(ctx, req).await?)
+}
+
+async fn cmd_disable_encryption<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdDisableEncryptionReq,
+) -> Result<()> {
+    Ok(yaak_commands::encryption::cmd_disable_encryption(ctx, req).await?)
+}
+
+async fn cmd_default_headers<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdDefaultHeadersReq,
+) -> Result<Vec<HttpRequestHeader>> {
+    Ok(yaak_commands::models::cmd_default_headers(ctx, req).await?)
+}
+
+async fn models_upsert<R: Runtime>(ctx: ClientCtx<R>, req: ModelsUpsertReq) -> Result<String> {
+    Ok(yaak_commands::models::models_upsert(ctx, req).await?)
+}
+
+/// Runs on a blocking thread rather than the async runtime: a cascading delete
+/// (a workspace with thousands of requests) holds a transaction for its whole
+/// duration, and stalling the runtime stalls every other IPC call behind it.
+/// That is this host's concern, so the shared handler stays plain and the
+/// relocation happens here.
+async fn models_delete<R: Runtime>(ctx: ClientCtx<R>, req: ModelsDeleteReq) -> Result<String> {
+    let deleted = tauri::async_runtime::spawn_blocking(move || {
+        yaak_commands::models::models_delete_blocking(&ctx, req)
+    })
+    .await
+    .map_err(|e| crate::error::Error::GenericError(format!("Delete task failed: {e}")))?;
+    Ok(deleted?)
+}
+
+async fn models_duplicate<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: ModelsDuplicateReq,
+) -> Result<String> {
+    Ok(yaak_commands::models::models_duplicate(ctx, req).await?)
+}
+
+async fn models_websocket_events<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: ModelsWebsocketEventsReq,
+) -> Result<Vec<WebsocketEvent>> {
+    Ok(yaak_commands::models::models_websocket_events(ctx, req).await?)
+}
+
+async fn models_grpc_events<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: ModelsGrpcEventsReq,
+) -> Result<Vec<GrpcEvent>> {
+    Ok(yaak_commands::models::models_grpc_events(ctx, req).await?)
+}
+
+async fn models_get_settings<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: ModelsGetSettingsReq,
+) -> Result<Settings> {
+    Ok(yaak_commands::models::models_get_settings(ctx, req).await?)
+}
+
+async fn models_get_graphql_introspection<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: ModelsGetGraphqlIntrospectionReq,
+) -> Result<Option<GraphQlIntrospection>> {
+    Ok(yaak_commands::models::models_get_graphql_introspection(ctx, req).await?)
+}
+
+async fn models_upsert_graphql_introspection<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: ModelsUpsertGraphqlIntrospectionReq,
+) -> Result<GraphQlIntrospection> {
+    Ok(yaak_commands::models::models_upsert_graphql_introspection(ctx, req).await?)
+}
+
+/// Non-ASCII is escaped to `\uXXXX` before the JSON crosses into the webview:
+/// on Linux, sending Cyrillic (and possibly other) characters through this
+/// payload leaves every string in the parsed models subtly mis-encoded and
+/// CodeMirror unable to place the cursor (feedback: "editing the URL sometimes
+/// freezes the app"). Escape sequences sidestep it. This is a quirk of the
+/// webview transport, not of the data, so it lives in the adapter rather than
+/// the shared handler.
+async fn models_workspace_models<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: ModelsWorkspaceModelsReq,
+) -> Result<String> {
+    let json = yaak_commands::models::models_workspace_models(ctx, req).await?;
+    Ok(escape_str_for_webview(&json))
+}
+
+fn escape_str_for_webview(input: &str) -> String {
+    input
+        .chars()
+        .map(|c| {
+            let code = c as u32;
+            // ASCII
+            if code <= 0x7F {
+                c.to_string()
+                // BMP characters encoded normally
+            } else if code < 0xFFFF {
+                format!("\\u{:04X}", code)
+                // Beyond BMP encoded a surrogate pairs
+            } else {
+                let high = ((code - 0x10000) >> 10) + 0xD800;
+                let low = ((code - 0x10000) & 0x3FF) + 0xDC00;
+                format!("\\u{:04X}\\u{:04X}", high, low)
+            }
+        })
+        .collect()
+}
+
+async fn cmd_git_checkout<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitCheckoutReq,
+) -> Result<String> {
+    Ok(crate::git_ext::cmd_git_checkout(&req.dir, &req.branch, req.force).await?)
+}
+
+async fn cmd_git_branch<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitBranchReq) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_branch(&req.dir, &req.branch, req.base.as_deref()).await?)
+}
+
+async fn cmd_git_delete_branch<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitDeleteBranchReq,
+) -> Result<BranchDeleteResult> {
+    Ok(crate::git_ext::cmd_git_delete_branch(&req.dir, &req.branch, req.force).await?)
+}
+
+async fn cmd_git_delete_remote_branch<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitDeleteRemoteBranchReq,
+) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_delete_remote_branch(&req.dir, &req.branch).await?)
+}
+
+async fn cmd_git_merge_branch<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitMergeBranchReq,
+) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_merge_branch(&req.dir, &req.branch).await?)
+}
+
+async fn cmd_git_rename_branch<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitRenameBranchReq,
+) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_rename_branch(&req.dir, &req.old_name, &req.new_name).await?)
+}
+
+async fn cmd_git_status<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitStatusReq,
+) -> Result<GitStatusSummary> {
+    Ok(crate::git_ext::cmd_git_status(&req.dir).await?)
+}
+
+async fn cmd_git_branch_info<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitBranchInfoReq,
+) -> Result<GitBranchInfo> {
+    Ok(crate::git_ext::cmd_git_branch_info(&req.dir).await?)
+}
+
+async fn cmd_git_worktree_status<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitWorktreeStatusReq,
+) -> Result<GitWorktreeStatus> {
+    Ok(crate::git_ext::cmd_git_worktree_status(&req.dir).await?)
+}
+
+async fn cmd_git_log<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitLogReq) -> Result<Vec<GitCommit>> {
+    Ok(crate::git_ext::cmd_git_log(&req.dir).await?)
+}
+
+async fn cmd_git_log_for_file<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitLogForFileReq,
+) -> Result<Vec<GitCommit>> {
+    Ok(crate::git_ext::cmd_git_log_for_file(&req.dir, req.rela_path).await?)
+}
+
+async fn cmd_git_file_diff_for_commit<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitFileDiffForCommitReq,
+) -> Result<GitFileDiff> {
+    Ok(crate::git_ext::cmd_git_file_diff_for_commit(&req.dir, &req.commit_oid, req.rela_path)
+        .await?)
+}
+
+async fn cmd_git_initialize<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitInitializeReq,
+) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_initialize(&req.dir).await?)
+}
+
+async fn cmd_git_clone<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitCloneReq) -> Result<CloneResult> {
+    Ok(crate::git_ext::cmd_git_clone(&req.url, &req.dir).await?)
+}
+
+async fn cmd_git_commit<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitCommitReq) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_commit(&req.dir, &req.message).await?)
+}
+
+async fn cmd_git_fetch_all<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitFetchAllReq) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_fetch_all(&req.dir).await?)
+}
+
+async fn cmd_git_push<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitPushReq) -> Result<PushResult> {
+    Ok(crate::git_ext::cmd_git_push(&req.dir).await?)
+}
+
+async fn cmd_git_pull<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitPullReq) -> Result<PullResult> {
+    Ok(crate::git_ext::cmd_git_pull(&req.dir).await?)
+}
+
+async fn cmd_git_pull_force_reset<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitPullForceResetReq,
+) -> Result<PullResult> {
+    Ok(crate::git_ext::cmd_git_pull_force_reset(&req.dir, &req.remote, &req.branch).await?)
+}
+
+async fn cmd_git_pull_merge<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitPullMergeReq,
+) -> Result<PullResult> {
+    Ok(crate::git_ext::cmd_git_pull_merge(&req.dir, &req.remote, &req.branch).await?)
+}
+
+async fn cmd_git_add<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitAddReq) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_add(&req.dir, req.rela_paths).await?)
+}
+
+async fn cmd_git_unstage<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitUnstageReq) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_unstage(&req.dir, req.rela_paths).await?)
+}
+
+async fn cmd_git_reset_changes<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitResetChangesReq,
+) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_reset_changes(&req.dir).await?)
+}
+
+async fn cmd_git_restore_files<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitRestoreFilesReq,
+) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_restore_files(&req.dir, req.rela_paths).await?)
+}
+
+async fn cmd_git_restore_file_from_commit<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitRestoreFileFromCommitReq,
+) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_restore_file_from_commit(&req.dir, &req.commit_oid, req.rela_path)
+        .await?)
+}
+
+async fn cmd_git_add_credential<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitAddCredentialReq,
+) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_add_credential(&req.remote_url, &req.username, &req.password)
+        .await?)
+}
+
+async fn cmd_git_remotes<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitRemotesReq,
+) -> Result<Vec<GitRemote>> {
+    Ok(crate::git_ext::cmd_git_remotes(&req.dir).await?)
+}
+
+async fn cmd_git_add_remote<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdGitAddRemoteReq,
+) -> Result<GitRemote> {
+    Ok(crate::git_ext::cmd_git_add_remote(&req.dir, &req.name, &req.url).await?)
+}
+
+async fn cmd_git_rm_remote<R: Runtime>(_ctx: ClientCtx<R>, req: CmdGitRmRemoteReq) -> Result<()> {
+    Ok(crate::git_ext::cmd_git_rm_remote(&req.dir, &req.name).await?)
+}
+
+async fn cmd_sync_calculate<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdSyncCalculateReq,
+) -> Result<Vec<SyncOp>> {
+    Ok(crate::sync_ext::cmd_sync_calculate(
+        ctx.window.app_handle().clone(),
+        &req.workspace_id,
+        &req.sync_dir,
+    )
+    .await?)
+}
+
+async fn cmd_sync_calculate_fs<R: Runtime>(
+    _ctx: ClientCtx<R>,
+    req: CmdSyncCalculateFsReq,
+) -> Result<Vec<SyncOp>> {
+    Ok(crate::sync_ext::cmd_sync_calculate_fs(&req.dir).await?)
+}
+
+async fn cmd_sync_apply<R: Runtime>(ctx: ClientCtx<R>, req: CmdSyncApplyReq) -> Result<()> {
+    Ok(crate::sync_ext::cmd_sync_apply(
+        ctx.window.app_handle().clone(),
+        req.sync_ops,
+        &req.sync_dir,
+        &req.workspace_id,
+    )
+    .await?)
+}
+
+async fn cmd_ws_delete_connections<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdWsDeleteConnectionsReq,
+) -> Result<()> {
+    Ok(yaak_commands::models::cmd_ws_delete_connections(ctx, req).await?)
+}
+
+async fn cmd_ws_send<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdWsSendReq,
+) -> Result<WebsocketConnection> {
+    Ok(crate::ws_ext::cmd_ws_send(
+        &req.connection_id,
+        req.environment_id.as_deref(),
+        ctx.window.app_handle().clone(),
+        ctx.window.clone(),
+        ctx.window.app_handle().state::<Mutex<WebsocketManager>>(),
+    )
+    .await?)
+}
+
+async fn cmd_ws_close<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdWsCloseReq,
+) -> Result<WebsocketConnection> {
+    Ok(crate::ws_ext::cmd_ws_close(
+        &req.connection_id,
+        ctx.window.app_handle().clone(),
+        ctx.window.clone(),
+        ctx.window.app_handle().state::<Mutex<WebsocketManager>>(),
+    )
+    .await?)
+}
+
+async fn cmd_ws_connect<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdWsConnectReq,
+) -> Result<WebsocketConnection> {
+    Ok(crate::ws_ext::cmd_ws_connect(
+        &req.request_id,
+        req.environment_id.as_deref(),
+        req.cookie_jar_id.as_deref(),
+        ctx.window.app_handle().clone(),
+        ctx.window.clone(),
+        ctx.window.app_handle().state::<Mutex<WebsocketManager>>(),
+    )
+    .await?)
+}
+
+async fn cmd_plugins_search<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdPluginsSearchReq,
+) -> Result<PluginSearchResponse> {
+    Ok(crate::plugins_ext::cmd_plugins_search(ctx.window.app_handle().clone(), &req.query).await?)
+}
+
+async fn cmd_plugins_install<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdPluginsInstallReq,
+) -> Result<()> {
+    Ok(crate::plugins_ext::cmd_plugins_install(ctx.window.clone(), &req.name, req.version).await?)
+}
+
+async fn cmd_plugins_install_from_directory<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdPluginsInstallFromDirectoryReq,
+) -> Result<Plugin> {
+    Ok(crate::plugins_ext::cmd_plugins_install_from_directory(ctx.window.clone(), &req.directory)
+        .await?)
+}
+
+async fn cmd_plugins_uninstall<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdPluginsUninstallReq,
+) -> Result<Plugin> {
+    Ok(crate::plugins_ext::cmd_plugins_uninstall(&req.plugin_id, ctx.window.clone()).await?)
+}
+
+async fn cmd_plugin_init_errors<R: Runtime>(
+    ctx: ClientCtx<R>,
+    req: CmdPluginInitErrorsReq,
+) -> Result<Vec<(String, String)>> {
+    Ok(yaak_commands::plugins::cmd_plugin_init_errors(ctx, req).await?)
+}
+
+async fn cmd_plugins_updates<R: Runtime>(
+    ctx: ClientCtx<R>,
+    _req: CmdPluginsUpdatesReq,
+) -> Result<PluginUpdatesResponse> {
+    Ok(crate::plugins_ext::cmd_plugins_updates(ctx.window.app_handle().clone()).await?)
+}
+
+async fn cmd_plugins_update_all<R: Runtime>(
+    ctx: ClientCtx<R>,
+    _req: CmdPluginsUpdateAllReq,
+) -> Result<Vec<PluginNameVersion>> {
+    Ok(crate::plugins_ext::cmd_plugins_update_all(ctx.window.clone()).await?)
+}
diff --git a/crates-tauri/yaak-app-client/src/sync_ext.rs b/crates-tauri/yaak-app-client/src/sync_ext.rs
new file mode 100644
index 0000000..ab26fcc
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/sync_ext.rs
@@ -0,0 +1,92 @@
+//! Tauri-specific extensions for yaak-sync.
+//!
+//! This module provides the Tauri commands for sync functionality.
+
+use crate::error::Result;
+use crate::models_ext::{BlobManagerExt, QueryManagerExt};
+use chrono::Utc;
+use log::warn;
+use std::path::Path;
+use tauri::{AppHandle, Listener, Runtime};
+use tokio::sync::watch;
+use yaak_rpc_schema::WatchResult;
+use yaak_sync::error::Error::InvalidSyncDirectory;
+use yaak_sync::sync::{
+    FsCandidate, SyncOp, apply_db_sync_ops, apply_fs_sync_ops, apply_sync_state_ops,
+    compute_sync_ops, get_db_candidates, get_fs_candidates,
+};
+use yaak_sync::watch::{WatchEvent, watch_directory};
+
+pub(crate) async fn cmd_sync_calculate<R: Runtime>(
+    app_handle: AppHandle<R>,
+    workspace_id: &str,
+    sync_dir: &Path,
+) -> Result<Vec<SyncOp>> {
+    if !sync_dir.exists() {
+        return Err(InvalidSyncDirectory(sync_dir.to_string_lossy().to_string()).into());
+    }
+
+    let db = app_handle.db();
+    let version = app_handle.package_info().version.to_string();
+    let db_candidates = get_db_candidates(&db, &version, workspace_id, sync_dir)?;
+    let fs_candidates = get_fs_candidates(sync_dir)?
+        .into_iter()
+        // Only keep items in the same workspace
+        .filter(|fs| fs.model.workspace_id() == workspace_id)
+        .collect::<Vec<FsCandidate>>();
+    Ok(compute_sync_ops(db_candidates, fs_candidates))
+}
+
+pub(crate) async fn cmd_sync_calculate_fs(dir: &Path) -> Result<Vec<SyncOp>> {
+    let db_candidates = Vec::new();
+    let fs_candidates = get_fs_candidates(dir)?;
+    Ok(compute_sync_ops(db_candidates, fs_candidates))
+}
+
+pub(crate) async fn cmd_sync_apply<R: Runtime>(
+    app_handle: AppHandle<R>,
+    sync_ops: Vec<SyncOp>,
+    sync_dir: &Path,
+    workspace_id: &str,
+) -> Result<()> {
+    // Files first, so the write transaction never waits on the filesystem
+    let pending = apply_fs_sync_ops(workspace_id, sync_dir, sync_ops)?;
+    let blobs = app_handle.blob_manager();
+    app_handle.db_manager().with_tx(|tx| {
+        let sync_state_ops = apply_db_sync_ops(tx, &blobs, workspace_id, sync_dir, pending)?;
+        apply_sync_state_ops(tx, workspace_id, sync_dir, sync_state_ops)?;
+        Ok(())
+    })
+}
+
+pub(crate) async fn sync_watch<R, F>(
+    app_handle: AppHandle<R>,
+    sync_dir: &Path,
+    workspace_id: &str,
+    on_event: F,
+) -> Result<WatchResult>
+where
+    R: Runtime,
+    F: Fn(WatchEvent) + Send + Sync + 'static,
+{
+    let (cancel_tx, cancel_rx) = watch::channel(());
+
+    watch_directory(&sync_dir, on_event, cancel_rx).await?;
+
+    let app_handle_inner = app_handle.clone();
+    let unlisten_event =
+        format!("watch-unlisten-{}-{}", workspace_id, Utc::now().timestamp_millis());
+
+    // TODO: Figure out a way to unlisten when the client app_handle refreshes or closes. Perhaps with
+    //   a heartbeat mechanism, or ensuring only a single subscription per workspace (at least
+    //   this won't create `n` subs). We could also maybe have a global fs watcher that we keep
+    //   adding to here.
+    app_handle.listen_any(unlisten_event.clone(), move |event| {
+        app_handle_inner.unlisten(event.id());
+        if let Err(e) = cancel_tx.send(()) {
+            warn!("Failed to send cancel signal to watcher {e:?}");
+        }
+    });
+
+    Ok(WatchResult { unlisten_event })
+}
diff --git a/crates-tauri/yaak-app-client/src/updates.rs b/crates-tauri/yaak-app-client/src/updates.rs
new file mode 100644
index 0000000..ffef3a0
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/updates.rs
@@ -0,0 +1,594 @@
+use std::fmt::{Display, Formatter};
+use std::path::PathBuf;
+use std::time::{Duration, Instant};
+
+use crate::error::Result;
+use crate::models_ext::QueryManagerExt;
+use crate::restart;
+use log::{debug, error, info, warn};
+use serde::{Deserialize, Serialize};
+use tauri::{Emitter, Listener, Manager, Runtime, WebviewWindow};
+use tauri_plugin_dialog::{DialogExt, MessageDialogButtons};
+use tauri_plugin_updater::{Update, UpdaterExt};
+use tokio::task::block_in_place;
+use tokio::time::sleep;
+use ts_rs::TS;
+use yaak_models::util::generate_id;
+
+use url::Url;
+use yaak_api::get_system_proxy_url;
+
+use crate::error::Error::GenericError;
+use crate::is_dev;
+
+const MAX_UPDATE_CHECK_HOURS_STABLE: u64 = 12;
+const MAX_UPDATE_CHECK_HOURS_BETA: u64 = 3;
+const MAX_UPDATE_CHECK_HOURS_ALPHA: u64 = 1;
+
+// Create updater struct
+pub struct YaakUpdater {
+    last_check: Option<Instant>,
+}
+
+pub enum UpdateMode {
+    Stable,
+    Beta,
+    Alpha,
+}
+
+impl Display for UpdateMode {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        let s = match self {
+            UpdateMode::Stable => "stable",
+            UpdateMode::Beta => "beta",
+            UpdateMode::Alpha => "alpha",
+        };
+        write!(f, "{}", s)
+    }
+}
+
+impl UpdateMode {
+    pub fn new(mode: &str) -> UpdateMode {
+        match mode {
+            "beta" => UpdateMode::Beta,
+            "alpha" => UpdateMode::Alpha,
+            _ => UpdateMode::Stable,
+        }
+    }
+}
+
+#[derive(PartialEq)]
+pub enum UpdateTrigger {
+    Background,
+    User,
+}
+
+impl YaakUpdater {
+    pub fn new() -> Self {
+        Self { last_check: None }
+    }
+
+    pub async fn check_now<R: Runtime>(
+        &mut self,
+        window: &WebviewWindow<R>,
+        mode: UpdateMode,
+        auto_download: bool,
+        update_trigger: UpdateTrigger,
+    ) -> Result<bool> {
+        let settings = window.db().get_settings();
+        let update_key = format!("{:x}", md5::compute(settings.id));
+        self.last_check = Some(Instant::now());
+
+        info!("Checking for updates mode={} autodl={}", mode, auto_download);
+
+        let w = window.clone();
+        let mut updater_builder = w.updater_builder();
+        if let Some(proxy_url) = get_system_proxy_url() {
+            if let Ok(url) = Url::parse(&proxy_url) {
+                updater_builder = updater_builder.proxy(url);
+            }
+        }
+        let update_check_result = updater_builder
+            .on_before_exit(move || {
+                // Kill plugin manager before exit or NSIS installer will fail to replace sidecar
+                // while it's running.
+                // NOTE: This is only called on Windows
+                let w = w.clone();
+                block_in_place(|| {
+                    tauri::async_runtime::block_on(async move {
+                        info!("Shutting down plugin manager before update");
+                        if let Ok(plugin_manager) = crate::plugins_ext::plugin_manager(&w).await {
+                            plugin_manager.terminate().await;
+                        }
+                    });
+                });
+            })
+            .header("X-Update-Mode", mode.to_string())?
+            .header("X-Update-Key", update_key)?
+            .header(
+                "X-Update-Trigger",
+                match update_trigger {
+                    UpdateTrigger::Background => "background",
+                    UpdateTrigger::User => "user",
+                },
+            )?
+            .header("X-Install-Mode", detect_install_mode().unwrap_or("unknown"))?
+            .build()?
+            .check()
+            .await;
+
+        let result = match update_check_result? {
+            None => false,
+            Some(update) => {
+                let w = window.clone();
+                tauri::async_runtime::spawn(async move {
+                    // Only hand the artifact to the updater plugin when this install can
+                    // apply it itself; otherwise tell the user how to update instead
+                    let install = update_install_method(&update);
+                    if install != UpdateInstall::Integrated {
+                        info!(
+                            "{} available, but this install updates via {install:?}",
+                            update.version
+                        );
+                        notify_external_update(&w, &update, install);
+                        return;
+                    }
+
+                    // Force native updater if specified (useful if a release broke the UI)
+                    let native_install_mode =
+                        update.raw_json.get("install_mode").map(|v| v.as_str()).unwrap_or_default()
+                            == Some("native");
+                    if native_install_mode {
+                        start_native_update(&w, &update).await;
+                        return;
+                    }
+
+                    // If it's a background update, try downloading it first
+                    if update_trigger == UpdateTrigger::Background && auto_download {
+                        info!("Downloading update {} in background", update.version);
+                        if let Err(e) = download_update_idempotent(&w, &update).await {
+                            error!("Failed to download {}: {}", update.version, e);
+                        }
+                    }
+
+                    match start_integrated_update(&w, &update).await {
+                        Ok(UpdateResponseAction::Skip) => {
+                            info!("Confirmed {}: skipped", update.version);
+                        }
+                        Ok(UpdateResponseAction::Install) => {
+                            info!("Confirmed {}: install", update.version);
+                            if let Err(e) = install_update_maybe_download(&w, &update).await {
+                                error!("Failed to install: {e}");
+                                return;
+                            };
+
+                            info!("Installed {}", update.version);
+                            finish_integrated_update(&w, &update).await;
+                        }
+                        Err(e) => {
+                            warn!("Failed to notify frontend, falling back: {e}",);
+                            start_native_update(&w, &update).await;
+                        }
+                    };
+                });
+                true
+            }
+        };
+
+        Ok(result)
+    }
+    pub async fn maybe_check<R: Runtime>(
+        &mut self,
+        window: &WebviewWindow<R>,
+        auto_download: bool,
+        mode: UpdateMode,
+    ) -> Result<bool> {
+        let update_period_seconds = match mode {
+            UpdateMode::Stable => MAX_UPDATE_CHECK_HOURS_STABLE,
+            UpdateMode::Beta => MAX_UPDATE_CHECK_HOURS_BETA,
+            UpdateMode::Alpha => MAX_UPDATE_CHECK_HOURS_ALPHA,
+        } * (60 * 60);
+
+        if let Some(i) = self.last_check
+            && i.elapsed().as_secs() < update_period_seconds
+        {
+            return Ok(false);
+        }
+
+        // Don't check if development (can still with manual user trigger)
+        if is_dev() {
+            return Ok(false);
+        }
+
+        self.check_now(window, mode, auto_download, UpdateTrigger::Background).await
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "index.ts")]
+struct UpdateInfo {
+    reply_event_id: String,
+    version: String,
+    downloaded: bool,
+    /// How this update gets applied. Anything but `Integrated` means the app can't do it
+    /// itself and the user is told how to update instead.
+    install: UpdateInstall,
+}
+
+/// How an update can be applied to this install.
+#[derive(Debug, Clone, Copy, PartialEq, Serialize, Default, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "index.ts")]
+enum UpdateInstall {
+    /// The app downloads and installs it itself
+    #[default]
+    Integrated,
+    /// Flatpak install: updated by `flatpak update` from its remote (e.g. FlatPark)
+    Flatpak,
+    /// Nothing can install it in-app (distro package, Nix, unknown); download by hand
+    Manual,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize, TS)]
+#[serde(rename_all = "camelCase", tag = "type")]
+#[ts(export, export_to = "index.ts")]
+enum UpdateResponse {
+    Ack,
+    Action { action: UpdateResponseAction },
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "index.ts")]
+enum UpdateResponseAction {
+    Install,
+    Skip,
+}
+
+async fn finish_integrated_update<R: Runtime>(window: &WebviewWindow<R>, update: &Update) {
+    if let Err(e) = window.emit_to(window.label(), "update_installed", update.version.to_string()) {
+        warn!("Failed to notify frontend of update install: {}", e);
+    }
+}
+
+async fn start_integrated_update<R: Runtime>(
+    window: &WebviewWindow<R>,
+    update: &Update,
+) -> Result<UpdateResponseAction> {
+    let download_path = ensure_download_dir(window)?.join(download_file_name(update));
+    debug!("Download path: {}", download_path.display());
+    let downloaded = download_path.exists();
+    let ack_wait = Duration::from_secs(3);
+    let reply_id = generate_id();
+
+    // 1) Start listening BEFORE emitting to avoid missing a fast reply
+    let (tx, mut rx) = tokio::sync::mpsc::unbounded_channel::<UpdateResponse>();
+    let w_for_listener = window.clone();
+
+    let event_id = w_for_listener.listen(reply_id.clone(), move |ev| {
+        match serde_json::from_str::<UpdateResponse>(ev.payload()) {
+            Ok(UpdateResponse::Ack) => {
+                let _ = tx.send(UpdateResponse::Ack);
+            }
+            Ok(UpdateResponse::Action { action }) => {
+                let _ = tx.send(UpdateResponse::Action { action });
+            }
+            Err(e) => {
+                warn!("Failed to parse update reply from frontend: {e:?}");
+            }
+        }
+    });
+
+    // Make sure we always unlisten
+    struct Unlisten<'a, R: Runtime> {
+        win: &'a WebviewWindow<R>,
+        id: tauri::EventId,
+    }
+    impl<'a, R: Runtime> Drop for Unlisten<'a, R> {
+        fn drop(&mut self) {
+            self.win.unlisten(self.id);
+        }
+    }
+    let _guard = Unlisten { win: window, id: event_id };
+
+    // 2) Emit the event now that listener is in place
+    let info = UpdateInfo {
+        version: update.version.to_string(),
+        downloaded,
+        install: UpdateInstall::Integrated,
+        reply_event_id: reply_id,
+    };
+    window
+        .emit_to(window.label(), "update_available", &info)
+        .map_err(|e| GenericError(format!("Failed to emit update_available: {e}")))?;
+
+    // 3) Two-stage timeout: first wait for ack, then wait for final action
+    // --- Phase 1: wait for ACK with timeout ---
+    let ack_timer = sleep(ack_wait);
+    tokio::pin!(ack_timer);
+
+    loop {
+        tokio::select! {
+            msg = rx.recv() => match msg {
+                Some(UpdateResponse::Ack) => break, // proceed to Phase 2
+                Some(UpdateResponse::Action{action}) => return Ok(action), // user was fast
+                None => return Err(GenericError("frontend channel closed before ack".into())),
+            },
+            _ = &mut ack_timer => {
+                return Err(GenericError("timed out waiting for frontend ack".into()));
+            }
+        }
+    }
+
+    // --- Phase 2: wait forever for final action ---
+    loop {
+        match rx.recv().await {
+            Some(UpdateResponse::Action { action }) => return Ok(action),
+            Some(UpdateResponse::Ack) => { /* ignore extra acks */ }
+            None => return Err(GenericError("frontend channel closed before action".into())),
+        }
+    }
+}
+
+/// Tell the frontend about an update this install can't apply itself, so the user can be
+/// told how to get it. Unlike the integrated flow, there is nothing to reply to.
+fn notify_external_update<R: Runtime>(
+    window: &WebviewWindow<R>,
+    update: &Update,
+    install: UpdateInstall,
+) {
+    let info = UpdateInfo {
+        version: update.version.to_string(),
+        downloaded: false,
+        install,
+        reply_event_id: generate_id(),
+    };
+    if let Err(e) = window.emit_to(window.label(), "update_available", &info) {
+        warn!("Failed to emit update_available: {e}");
+    }
+}
+
+async fn start_native_update<R: Runtime>(window: &WebviewWindow<R>, update: &Update) {
+    // If the frontend doesn't respond, fallback to native dialogs
+    let confirmed = window
+        .dialog()
+        .message(format!(
+            "{} is available. Would you like to download and install it now?",
+            update.version
+        ))
+        .buttons(MessageDialogButtons::OkCancelCustom("Download".to_string(), "Later".to_string()))
+        .title("Update Available")
+        .blocking_show();
+    if !confirmed {
+        return;
+    }
+
+    match update.download_and_install(|_, _| {}, || {}).await {
+        Ok(()) => {
+            if window
+                .dialog()
+                .message("Would you like to restart the app?")
+                .title("Update Installed")
+                .buttons(MessageDialogButtons::OkCancelCustom(
+                    "Restart".to_string(),
+                    "Later".to_string(),
+                ))
+                .blocking_show()
+            {
+                restart::request_restart(window.app_handle());
+            }
+        }
+        Err(e) => {
+            window.dialog().message(format!("The update failed to install: {}", e));
+        }
+    }
+}
+
+pub async fn download_update_idempotent<R: Runtime>(
+    window: &WebviewWindow<R>,
+    update: &Update,
+) -> Result<PathBuf> {
+    let dl_path = ensure_download_dir(window)?.join(download_file_name(update));
+
+    if dl_path.exists() {
+        info!("{} already downloaded to {}", update.version, dl_path.display());
+        return Ok(dl_path);
+    }
+
+    info!("{} downloading: {}", update.version, dl_path.display());
+    let dl_bytes = update.download(|_, _| {}, || {}).await?;
+    std::fs::write(&dl_path, dl_bytes)
+        .map_err(|e| GenericError(format!("Failed to write update: {e}")))?;
+
+    info!("{} downloaded", update.version);
+
+    Ok(dl_path)
+}
+
+/// Detect the installer type so the update server can serve the correct artifact.
+fn detect_install_mode() -> Option<&'static str> {
+    #[cfg(target_os = "windows")]
+    {
+        if let Ok(exe) = std::env::current_exe() {
+            let path = exe.to_string_lossy().to_lowercase();
+            if path.starts_with(r"c:\program files") {
+                return Some("nsis-machine");
+            }
+        }
+        return Some("nsis");
+    }
+    #[allow(unreachable_code)]
+    if !cfg!(target_os = "linux") {
+        None
+    } else if is_flatpak() {
+        Some("flatpak")
+    } else {
+        linux_installer()
+    }
+}
+
+/// Flatpak installs (e.g. FlatPark) are updated by flatpak from their remote; the in-app
+/// updater can't write inside the sandbox and must not try.
+fn is_flatpak() -> bool {
+    std::env::var_os("FLATPAK_ID").is_some()
+}
+
+/// How Yaak was installed on Linux, as far as the updater plugin can install into it.
+///
+/// The bundle type is stamped into the binary by the bundler, but that only says how the
+/// binary was *packaged*: third-party packages (AUR, Nix, ...) repackage the .deb, and
+/// letting dpkg/rpm replace those would stomp on another package manager's files. So a
+/// deb/rpm install also has to be one the package manager actually owns. The AppImage
+/// updater needs `$APPIMAGE` since that's the file it replaces.
+fn linux_installer() -> Option<&'static str> {
+    use tauri::utils::{config::BundleType, platform::bundle_type};
+    match bundle_type() {
+        Some(BundleType::Deb) if package_manager_owns_exe("dpkg", "-S") => Some("deb"),
+        Some(BundleType::Rpm) if package_manager_owns_exe("rpm", "-qf") => Some("rpm"),
+        Some(BundleType::Deb) | Some(BundleType::Rpm) => None,
+        _ if std::env::var_os("APPIMAGE").is_some() => Some("appimage"),
+        _ => None,
+    }
+}
+
+/// Whether `cmd query_arg <current exe>` succeeds, i.e. that package manager knows the
+/// running executable as one of its files. False when the tool isn't installed at all.
+fn package_manager_owns_exe(cmd: &str, query_arg: &str) -> bool {
+    let Ok(exe) = std::env::current_exe() else {
+        return false;
+    };
+    std::process::Command::new(cmd)
+        .arg(query_arg)
+        .arg(&exe)
+        .stdin(std::process::Stdio::null())
+        .stdout(std::process::Stdio::null())
+        .stderr(std::process::Stdio::null())
+        .status()
+        .map(|status| status.success())
+        .unwrap_or(false)
+}
+
+/// How the artifact the server returned can be applied to this install. On Linux the
+/// server may hand back a different package format than the one installed, Flatpak can't
+/// be written from inside the sandbox, and unknown install methods (distro packages,
+/// Nix, ...) can't be updated in-app at all.
+fn update_install_method(update: &Update) -> UpdateInstall {
+    // Dev-only override to preview the non-integrated flows on any OS:
+    //   YAAK_SIMULATE_INSTALL=flatpak|manual
+    if is_dev() {
+        match std::env::var("YAAK_SIMULATE_INSTALL").as_deref() {
+            Ok("flatpak") => return UpdateInstall::Flatpak,
+            Ok("manual") => return UpdateInstall::Manual,
+            _ => {}
+        }
+    }
+
+    if !cfg!(target_os = "linux") {
+        return UpdateInstall::Integrated;
+    }
+    if is_flatpak() {
+        return UpdateInstall::Flatpak;
+    }
+    if artifact_matches_installer(linux_installer(), update.download_url.path()) {
+        UpdateInstall::Integrated
+    } else {
+        UpdateInstall::Manual
+    }
+}
+
+/// Whether the artifact at `url_path` is in the package format `installer` can install.
+fn artifact_matches_installer(installer: Option<&str>, url_path: &str) -> bool {
+    let path = url_path.to_ascii_lowercase();
+    match installer {
+        Some("deb") => path.ends_with(".deb"),
+        Some("rpm") => path.ends_with(".rpm"),
+        Some("appimage") => path.ends_with(".appimage") || path.ends_with(".appimage.tar.gz"),
+        _ => false,
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::artifact_matches_installer;
+
+    const BASE: &str = "/mountain-loop/yaak/releases/download/v2026.6.0/";
+
+    #[test]
+    fn matching_package_format_is_installable() {
+        let cases = [
+            ("deb", "yaak_2026.6.0_amd64.deb"),
+            ("deb", "yaak_2026.6.0_arm64.deb"),
+            ("rpm", "yaak-2026.6.0-1.x86_64.rpm"),
+            ("rpm", "yaak-2026.6.0-1.aarch64.rpm"),
+            ("appimage", "yaak_2026.6.0_amd64.AppImage"),
+            ("appimage", "yaak_2026.6.0_amd64.AppImage.tar.gz"),
+        ];
+        for (installer, asset) in cases {
+            assert!(
+                artifact_matches_installer(Some(installer), &format!("{BASE}{asset}")),
+                "{installer} should install {asset}"
+            );
+        }
+    }
+
+    #[test]
+    fn mismatched_package_format_is_not_installable() {
+        // What the server returns for every Linux install today
+        let appimage = format!("{BASE}yaak_2026.6.0_amd64.AppImage");
+        assert!(!artifact_matches_installer(Some("deb"), &appimage));
+        assert!(!artifact_matches_installer(Some("rpm"), &appimage));
+
+        let deb = format!("{BASE}yaak_2026.6.0_amd64.deb");
+        assert!(!artifact_matches_installer(Some("rpm"), &deb));
+        assert!(!artifact_matches_installer(Some("appimage"), &deb));
+    }
+
+    #[test]
+    fn unknown_installer_is_never_installable() {
+        for asset in ["yaak_2026.6.0_amd64.deb", "yaak_2026.6.0_amd64.AppImage"] {
+            assert!(!artifact_matches_installer(None, &format!("{BASE}{asset}")));
+        }
+    }
+}
+
+pub async fn install_update_maybe_download<R: Runtime>(
+    window: &WebviewWindow<R>,
+    update: &Update,
+) -> Result<()> {
+    let dl_path = download_update_idempotent(window, update).await?;
+    let update_bytes = std::fs::read(&dl_path)?;
+    update.install(update_bytes.as_slice())?;
+    delete_download_dir(window);
+    Ok(())
+}
+
+pub fn download_dir<R: Runtime>(window: &WebviewWindow<R>) -> Result<PathBuf> {
+    Ok(window.path().app_cache_dir()?.join("updates"))
+}
+
+pub fn ensure_download_dir<R: Runtime>(window: &WebviewWindow<R>) -> Result<PathBuf> {
+    let base_dir = download_dir(window)?;
+    std::fs::create_dir_all(&base_dir)?;
+    Ok(base_dir)
+}
+
+pub fn download_file_name(update: &Update) -> String {
+    let sig_digest = md5::compute(&update.signature);
+    format!("yaak-{}-{:x}", update.version, sig_digest)
+}
+
+pub fn delete_download_dir<R: Runtime>(window: &WebviewWindow<R>) {
+    let base_dir = match download_dir(window) {
+        Ok(dir) => dir,
+        Err(e) => {
+            warn!("Failed to locate update downloads dir: {}", e);
+            return;
+        }
+    };
+    match std::fs::remove_dir_all(&base_dir) {
+        Ok(()) => info!("Removed update downloads dir {}", base_dir.display()),
+        Err(e) if e.kind() == std::io::ErrorKind::NotFound => {}
+        Err(e) => warn!("Failed to remove update downloads dir {}: {}", base_dir.display(), e),
+    }
+}
diff --git a/crates-tauri/yaak-app-client/src/uri_scheme.rs b/crates-tauri/yaak-app-client/src/uri_scheme.rs
new file mode 100644
index 0000000..e6bd13d
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/uri_scheme.rs
@@ -0,0 +1,139 @@
+use crate::PluginContextExt;
+use crate::error::Result;
+use crate::import::{file_origin, import_data, url_origin};
+use crate::models_ext::QueryManagerExt;
+use log::{info, warn};
+use std::collections::HashMap;
+use std::fs;
+use std::sync::Arc;
+use tauri::{AppHandle, Emitter, Manager, Runtime, Url};
+use tauri_plugin_dialog::{DialogExt, MessageDialogButtons, MessageDialogKind};
+use yaak_api::{ApiClientKind, yaak_api_client};
+use yaak_models::util::generate_id;
+use yaak_plugins::events::{Color, ShowToastRequest};
+use yaak_plugins::install::download_and_install;
+
+pub(crate) async fn handle_deep_link<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    url: &Url,
+) -> Result<()> {
+    let command = url.domain().unwrap_or_default();
+    info!("Yaak URI scheme invoked {}?{}", command, url.query().unwrap_or_default());
+
+    let query_map: HashMap<String, String> = url.query_pairs().into_owned().collect();
+    let windows = app_handle.webview_windows();
+    let (_, window) = windows.iter().next().unwrap();
+
+    match command {
+        "install-plugin" => {
+            let name = query_map.get("name").unwrap();
+            let version = query_map.get("version").cloned();
+            _ = window.set_focus();
+            let confirmed_install = app_handle
+                .dialog()
+                .message(format!("Install plugin {name} {version:?}?"))
+                .kind(MessageDialogKind::Info)
+                .buttons(MessageDialogButtons::OkCancelCustom(
+                    "Install".to_string(),
+                    "Cancel".to_string(),
+                ))
+                .blocking_show();
+            if !confirmed_install {
+                // Cancelled installation
+                return Ok(());
+            }
+
+            let plugin_manager = Arc::new(crate::plugins_ext::plugin_manager(window).await?);
+            let query_manager = app_handle.db_manager();
+            let app_version = app_handle.package_info().version.to_string();
+            let http_client = yaak_api_client(ApiClientKind::App, &app_version)?;
+            let plugin_context = window.plugin_context();
+            let pv = download_and_install(
+                plugin_manager,
+                &query_manager,
+                &http_client,
+                &plugin_context,
+                name,
+                version,
+            )
+            .await?;
+            app_handle.emit(
+                "show_toast",
+                ShowToastRequest {
+                    message: format!("Installed {name}@{}", pv.version),
+                    color: Some(Color::Success),
+                    icon: None,
+                    timeout: Some(5000),
+                },
+            )?;
+        }
+        "import-data" => {
+            let mut file_path = query_map.get("path").map(|s| s.to_owned());
+            let mut origin = None;
+            let name = query_map.get("name").map(|s| s.to_owned()).unwrap_or("data".to_string());
+            _ = window.set_focus();
+
+            if let Some(file_url) = query_map.get("url") {
+                let confirmed_import = app_handle
+                    .dialog()
+                    .message(format!("Import {name} from {file_url}?"))
+                    .kind(MessageDialogKind::Info)
+                    .buttons(MessageDialogButtons::OkCancelCustom(
+                        "Import".to_string(),
+                        "Cancel".to_string(),
+                    ))
+                    .blocking_show();
+                if !confirmed_import {
+                    return Ok(());
+                }
+
+                let app_version = app_handle.package_info().version.to_string();
+                let resp =
+                    yaak_api_client(ApiClientKind::App, &app_version)?.get(file_url).send().await?;
+                let json = resp.bytes().await?;
+                let p = app_handle
+                    .path()
+                    .temp_dir()?
+                    .join(format!("import-{}", generate_id()))
+                    .to_string_lossy()
+                    .to_string();
+                fs::write(&p, json)?;
+                file_path = Some(p);
+                origin = Some(url_origin(file_url));
+            }
+
+            let file_path = match file_path {
+                Some(p) => p,
+                None => {
+                    app_handle.emit(
+                        "show_toast",
+                        ShowToastRequest {
+                            message: "Failed to import data".to_string(),
+                            color: Some(Color::Danger),
+                            icon: None,
+                            timeout: None,
+                        },
+                    )?;
+                    return Ok(());
+                }
+            };
+
+            let origin = origin.unwrap_or_else(|| file_origin(&file_path));
+            let results = import_data(window, &file_path, Some(origin)).await?;
+            window.emit(
+                "show_toast",
+                ShowToastRequest {
+                    message: format!("Imported data for {} workspaces", results.workspaces.len()),
+                    color: Some(Color::Success),
+                    icon: None,
+                    timeout: Some(5000),
+                },
+            )?;
+        }
+        _ => {
+            warn!("Unknown deep link command: {command}");
+        }
+    }
+
+    Ok(())
+}
diff --git a/crates-tauri/yaak-app-client/src/window_menu.rs b/crates-tauri/yaak-app-client/src/window_menu.rs
new file mode 100644
index 0000000..df2974d
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/window_menu.rs
@@ -0,0 +1,176 @@
+pub use tauri::AppHandle;
+use tauri::Runtime;
+use tauri::menu::{
+    AboutMetadata, HELP_SUBMENU_ID, Menu, MenuItemBuilder, PredefinedMenuItem, Submenu,
+    WINDOW_SUBMENU_ID,
+};
+
+pub fn app_menu<R: Runtime>(app_handle: &AppHandle<R>) -> tauri::Result<Menu<R>> {
+    let pkg_info = app_handle.package_info();
+    let config = app_handle.config();
+    let about_metadata = AboutMetadata {
+        name: Some(pkg_info.name.clone()),
+        version: Some(pkg_info.version.to_string()),
+        copyright: config.bundle.copyright.clone(),
+        authors: config.bundle.publisher.clone().map(|p| vec![p]),
+        ..Default::default()
+    };
+
+    let window_menu = Submenu::with_id_and_items(
+        app_handle,
+        WINDOW_SUBMENU_ID,
+        "Window",
+        true,
+        &[
+            &PredefinedMenuItem::minimize(app_handle, None)?,
+            &PredefinedMenuItem::maximize(app_handle, None)?,
+            #[cfg(target_os = "macos")]
+            &PredefinedMenuItem::separator(app_handle)?,
+            &PredefinedMenuItem::close_window(app_handle, None)?,
+        ],
+    )?;
+
+    #[cfg(target_os = "macos")]
+    {
+        window_menu.set_as_windows_menu_for_nsapp()?;
+    }
+
+    let help_menu = Submenu::with_id_and_items(
+        app_handle,
+        HELP_SUBMENU_ID,
+        "Help",
+        true,
+        &[
+            #[cfg(not(target_os = "macos"))]
+            &PredefinedMenuItem::about(app_handle, None, Some(about_metadata.clone()))?,
+            #[cfg(target_os = "macos")]
+            &MenuItemBuilder::with_id("open_feedback".to_string(), "Give Feedback")
+                .build(app_handle)?,
+        ],
+    )?;
+
+    #[cfg(target_os = "macos")]
+    {
+        help_menu.set_as_windows_menu_for_nsapp()?;
+    }
+
+    let menu = Menu::with_items(
+        app_handle,
+        &[
+            #[cfg(target_os = "macos")]
+            &Submenu::with_items(
+                app_handle,
+                pkg_info.name.clone(),
+                true,
+                &[
+                    &PredefinedMenuItem::about(app_handle, None, Some(about_metadata))?,
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    &MenuItemBuilder::with_id("settings".to_string(), "Settings")
+                        .accelerator("CmdOrCtrl+,")
+                        .build(app_handle)?,
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    &PredefinedMenuItem::services(app_handle, None)?,
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    &PredefinedMenuItem::hide(app_handle, None)?,
+                    &PredefinedMenuItem::hide_others(app_handle, None)?,
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    // NOTE: Replace the predefined quit item with a custom one because, for some
+                    //  reason, ExitRequested events are not fired on cmd+Q. Perhaps this will be
+                    //  fixed in the future?
+                    //  https://github.com/tauri-apps/tauri/issues/9198
+                    &MenuItemBuilder::with_id(
+                        "hacked_quit".to_string(),
+                        format!("Quit {}", app_handle.package_info().name),
+                    )
+                    .accelerator("CmdOrCtrl+q")
+                    .build(app_handle)?,
+                ],
+            )?,
+            #[cfg(not(any(
+                target_os = "linux",
+                target_os = "dragonfly",
+                target_os = "freebsd",
+                target_os = "netbsd",
+                target_os = "openbsd"
+            )))]
+            &Submenu::with_items(
+                app_handle,
+                "File",
+                true,
+                &[
+                    &PredefinedMenuItem::close_window(app_handle, None)?,
+                    #[cfg(not(target_os = "macos"))]
+                    &PredefinedMenuItem::quit(app_handle, None)?,
+                ],
+            )?,
+            &Submenu::with_items(
+                app_handle,
+                "Edit",
+                true,
+                &[
+                    &PredefinedMenuItem::undo(app_handle, None)?,
+                    &PredefinedMenuItem::redo(app_handle, None)?,
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    &PredefinedMenuItem::cut(app_handle, None)?,
+                    &PredefinedMenuItem::copy(app_handle, None)?,
+                    &PredefinedMenuItem::paste(app_handle, None)?,
+                    &PredefinedMenuItem::select_all(app_handle, None)?,
+                ],
+            )?,
+            &Submenu::with_items(
+                app_handle,
+                "View",
+                true,
+                &[
+                    #[cfg(target_os = "macos")]
+                    &PredefinedMenuItem::fullscreen(app_handle, None)?,
+                    #[cfg(target_os = "macos")]
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    &MenuItemBuilder::with_id("zoom_reset".to_string(), "Zoom to Actual Size")
+                        .accelerator("CmdOrCtrl+0")
+                        .build(app_handle)?,
+                    &MenuItemBuilder::with_id("zoom_in".to_string(), "Zoom In")
+                        .accelerator("CmdOrCtrl+=")
+                        .build(app_handle)?,
+                    &MenuItemBuilder::with_id("zoom_out".to_string(), "Zoom Out")
+                        .accelerator("CmdOrCtrl+-")
+                        .build(app_handle)?,
+                ],
+            )?,
+            &window_menu,
+            &help_menu,
+            #[cfg(dev)]
+            &Submenu::with_items(
+                app_handle,
+                "Develop",
+                true,
+                &[
+                    &MenuItemBuilder::with_id("dev.refresh".to_string(), "Refresh")
+                        .accelerator("CmdOrCtrl+Shift+r")
+                        .build(app_handle)?,
+                    &MenuItemBuilder::with_id("dev.toggle_devtools".to_string(), "Open Devtools")
+                        .accelerator("CmdOrCtrl+Option+i")
+                        .build(app_handle)?,
+                    &MenuItemBuilder::with_id("dev.reset_size".to_string(), "Reset Size")
+                        .build(app_handle)?,
+                    &MenuItemBuilder::with_id("dev.reset_size_16x9".to_string(), "Resize to 16x9")
+                        .build(app_handle)?,
+                    &MenuItemBuilder::with_id(
+                        "dev.reset_size_16x10".to_string(),
+                        "Resize to 16x10",
+                    )
+                    .build(app_handle)?,
+                    &MenuItemBuilder::with_id(
+                        "dev.generate_theme_css".to_string(),
+                        "Generate Theme CSS",
+                    )
+                    .build(app_handle)?,
+                    &MenuItemBuilder::with_id("dev.show_home".to_string(), "Show Home Screen")
+                        .build(app_handle)?,
+                ],
+            )?,
+        ],
+    )?;
+
+    Ok(menu)
+}
diff --git a/crates-tauri/yaak-app-client/src/ws_ext.rs b/crates-tauri/yaak-app-client/src/ws_ext.rs
new file mode 100644
index 0000000..4598013
--- /dev/null
+++ b/crates-tauri/yaak-app-client/src/ws_ext.rs
@@ -0,0 +1,490 @@
+//! WebSocket Tauri command wrappers
+//! These wrap the core yaak-ws functionality for Tauri IPC.
+
+use crate::PluginContextExt;
+use crate::error::Result;
+use crate::models_ext::QueryManagerExt;
+use http::HeaderMap;
+use log::{debug, info, warn};
+use std::str::FromStr;
+use std::sync::Arc;
+use tauri::http::HeaderValue;
+use tauri::{AppHandle, Manager, Runtime, State, WebviewWindow};
+use tokio::sync::{Mutex, mpsc};
+use tokio_tungstenite::tungstenite::Message;
+use url::Url;
+use yaak_commands::resolve::resolve_websocket_request;
+use yaak_crypto::manager::EncryptionManager;
+use yaak_http::cookies::CookieStore;
+use yaak_http::path_placeholders::apply_path_placeholders;
+use yaak_models::models::{
+    HttpResponseHeader, WebsocketConnection, WebsocketConnectionState, WebsocketEvent,
+    WebsocketEventType,
+};
+use yaak_models::util::UpdateSource;
+use yaak_plugins::events::{CallHttpAuthenticationRequest, HttpHeader, RenderPurpose};
+use yaak_plugins::template_callback::PluginTemplateCallback;
+use yaak_templates::strip_json_comments::maybe_strip_json_comments;
+use yaak_templates::{RenderErrorBehavior, RenderOptions};
+use yaak_tls::find_client_certificate;
+use yaak_ws::{WebsocketManager, render_websocket_request};
+
+pub async fn cmd_ws_send<R: Runtime>(
+    connection_id: &str,
+    environment_id: Option<&str>,
+    app_handle: AppHandle<R>,
+    window: WebviewWindow<R>,
+    ws_manager: State<'_, Mutex<WebsocketManager>>,
+) -> Result<WebsocketConnection> {
+    let connection = app_handle.db().get_websocket_connection(connection_id)?;
+
+    match send_websocket_message(&connection, environment_id, &app_handle, &window, &ws_manager)
+        .await
+    {
+        Ok(connection) => Ok(connection),
+        Err(e) => {
+            app_handle.with_tx(|tx| {
+                tx.upsert_websocket_event(
+                    &WebsocketEvent {
+                        connection_id: connection.id.clone(),
+                        request_id: connection.request_id.clone(),
+                        workspace_id: connection.workspace_id.clone(),
+                        is_server: false,
+                        message_type: WebsocketEventType::Error,
+                        message: e.to_string().into(),
+                        ..Default::default()
+                    },
+                    &UpdateSource::from_window_label(window.label()),
+                )
+            })?;
+
+            Ok(connection)
+        }
+    }
+}
+
+async fn send_websocket_message<R: Runtime>(
+    connection: &WebsocketConnection,
+    environment_id: Option<&str>,
+    app_handle: &AppHandle<R>,
+    window: &WebviewWindow<R>,
+    ws_manager: &Mutex<WebsocketManager>,
+) -> Result<WebsocketConnection> {
+    let unrendered_request = app_handle.db().get_websocket_request(&connection.request_id)?;
+    let environment_chain = app_handle.db().resolve_environments(
+        &unrendered_request.workspace_id,
+        unrendered_request.folder_id.as_deref(),
+        environment_id,
+    )?;
+    let (resolved_request, _auth_context_id) =
+        resolve_websocket_request(&window.db(), &unrendered_request)?;
+    let plugin_manager = Arc::new(crate::plugins_ext::plugin_manager(app_handle).await?);
+    let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
+    let request = render_websocket_request(
+        &resolved_request,
+        environment_chain,
+        &PluginTemplateCallback::new(
+            plugin_manager,
+            encryption_manager,
+            &window.plugin_context(),
+            RenderPurpose::Send,
+        ),
+        &RenderOptions { error_behavior: RenderErrorBehavior::Throw },
+    )
+    .await?;
+
+    let message = maybe_strip_json_comments(&request.message);
+
+    let mut ws_manager = ws_manager.lock().await;
+    ws_manager.send(&connection.id, Message::Text(message.clone().into())).await?;
+
+    app_handle.with_tx(|tx| {
+        tx.upsert_websocket_event(
+            &WebsocketEvent {
+                connection_id: connection.id.clone(),
+                request_id: request.id.clone(),
+                workspace_id: connection.workspace_id.clone(),
+                is_server: false,
+                message_type: WebsocketEventType::Text,
+                message: message.into(),
+                ..Default::default()
+            },
+            &UpdateSource::from_window_label(window.label()),
+        )
+    })?;
+
+    Ok(connection.clone())
+}
+
+pub async fn cmd_ws_close<R: Runtime>(
+    connection_id: &str,
+    app_handle: AppHandle<R>,
+    window: WebviewWindow<R>,
+    ws_manager: State<'_, Mutex<WebsocketManager>>,
+) -> Result<WebsocketConnection> {
+    let connection = app_handle.with_tx(|tx| {
+        let connection = tx.get_websocket_connection(connection_id)?;
+        tx.upsert_websocket_connection(
+            &WebsocketConnection { state: WebsocketConnectionState::Closing, ..connection },
+            &UpdateSource::from_window_label(window.label()),
+        )
+    })?;
+
+    let mut ws_manager = ws_manager.lock().await;
+    if let Err(e) = ws_manager.close(&connection.id).await {
+        warn!("Failed to close WebSocket connection: {e:?}");
+    };
+
+    Ok(connection)
+}
+
+pub async fn cmd_ws_connect<R: Runtime>(
+    request_id: &str,
+    environment_id: Option<&str>,
+    cookie_jar_id: Option<&str>,
+    app_handle: AppHandle<R>,
+    window: WebviewWindow<R>,
+    ws_manager: State<'_, Mutex<WebsocketManager>>,
+) -> Result<WebsocketConnection> {
+    let unrendered_request = app_handle.db().get_websocket_request(request_id)?;
+    let environment_chain = app_handle.db().resolve_environments(
+        &unrendered_request.workspace_id,
+        unrendered_request.folder_id.as_deref(),
+        environment_id,
+    )?;
+    let resolved_settings =
+        app_handle.db().resolve_settings_for_websocket_request(&unrendered_request)?;
+    let settings = app_handle.db().get_settings();
+    let (resolved_request, auth_context_id) =
+        resolve_websocket_request(&window.db(), &unrendered_request)?;
+    let plugin_manager = Arc::new(crate::plugins_ext::plugin_manager(&app_handle).await?);
+    let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
+    let request = render_websocket_request(
+        &resolved_request,
+        environment_chain,
+        &PluginTemplateCallback::new(
+            plugin_manager.clone(),
+            encryption_manager.clone(),
+            &window.plugin_context(),
+            RenderPurpose::Send,
+        ),
+        &RenderOptions { error_behavior: RenderErrorBehavior::Throw },
+    )
+    .await?;
+
+    let connection = app_handle.with_tx(|tx| {
+        tx.upsert_websocket_connection(
+            &WebsocketConnection {
+                workspace_id: request.workspace_id.clone(),
+                request_id: request_id.to_string(),
+                ..Default::default()
+            },
+            &UpdateSource::from_window_label(window.label()),
+        )
+    })?;
+
+    let (mut url, url_parameters) = apply_path_placeholders(&request.url, &request.url_parameters);
+    if !url.starts_with("ws://") && !url.starts_with("wss://") {
+        url.insert_str(0, "ws://");
+    }
+
+    // Add URL parameters to URL
+    let mut url = match Url::parse(&url) {
+        Ok(url) => url,
+        Err(e) => {
+            return Ok(app_handle.with_tx(|tx| {
+                tx.upsert_websocket_connection(
+                    &WebsocketConnection {
+                        error: Some(format!("Failed to parse URL {}", e.to_string())),
+                        state: WebsocketConnectionState::Closed,
+                        ..connection
+                    },
+                    &UpdateSource::from_window_label(window.label()),
+                )
+            })?);
+        }
+    };
+
+    let mut headers = HeaderMap::new();
+
+    for h in request.headers.clone() {
+        if h.name.is_empty() && h.value.is_empty() {
+            continue;
+        }
+
+        if !h.enabled {
+            continue;
+        }
+
+        headers.insert(
+            http::HeaderName::from_str(&h.name).unwrap(),
+            HeaderValue::from_str(&h.value).unwrap(),
+        );
+    }
+
+    match request.authentication_type {
+        None => {
+            // No authentication found. Not even inherited
+        }
+        Some(authentication_type) if authentication_type == "none" => {
+            // Explicitly no authentication
+        }
+        Some(authentication_type) => {
+            let auth = request.authentication.clone();
+            let plugin_req = CallHttpAuthenticationRequest {
+                context_id: format!("{:x}", md5::compute(auth_context_id)),
+                values: serde_json::from_value(serde_json::to_value(&auth).unwrap()).unwrap(),
+                method: "POST".to_string(),
+                url: request.url.clone(),
+                headers: request
+                    .headers
+                    .clone()
+                    .into_iter()
+                    .map(|h| HttpHeader { name: h.name, value: h.value })
+                    .collect(),
+                body: None,
+            };
+            let plugin_result = plugin_manager
+                .call_http_authentication(
+                    &window.plugin_context(),
+                    &authentication_type,
+                    plugin_req,
+                )
+                .await?;
+            for header in plugin_result.set_headers.unwrap_or_default() {
+                match (
+                    http::HeaderName::from_str(&header.name),
+                    HeaderValue::from_str(&header.value),
+                ) {
+                    (Ok(name), Ok(value)) => {
+                        headers.insert(name, value);
+                    }
+                    _ => continue,
+                };
+            }
+            if let Some(params) = plugin_result.set_query_parameters {
+                let mut query_pairs = url.query_pairs_mut();
+                for p in params {
+                    query_pairs.append_pair(&p.name, &p.value);
+                }
+            }
+        }
+    }
+
+    let mut cookie_jar = match (
+        resolved_settings.send_cookies.value || resolved_settings.store_cookies.value,
+        cookie_jar_id,
+    ) {
+        (true, Some(id)) => Some(app_handle.db().get_cookie_jar(id)?),
+        _ => None,
+    };
+    let cookie_store =
+        cookie_jar.as_ref().map(|jar| CookieStore::from_cookies(jar.cookies.clone()));
+
+    // Add cookies to WS HTTP Upgrade
+    if let (true, Some(store)) = (resolved_settings.send_cookies.value, cookie_store.as_ref()) {
+        // Convert WS URL -> HTTP URL because our cookie store matches based on
+        // Path/HttpOnly/Secure attributes even though WS upgrades are HTTP requests
+        let http_url = convert_ws_url_to_http(&url);
+        if let Some(cookie_header_value) = store.get_cookie_header(&http_url) {
+            debug!("Inserting cookies into WS upgrade to {}: {}", url, cookie_header_value);
+            headers.insert(
+                http::HeaderName::from_static("cookie"),
+                HeaderValue::from_str(&cookie_header_value).unwrap(),
+            );
+        }
+    }
+
+    let (receive_tx, mut receive_rx) = mpsc::channel::<Message>(128);
+    let mut ws_manager = ws_manager.lock().await;
+
+    {
+        let valid_query_pairs = url_parameters
+            .into_iter()
+            .filter(|p| p.enabled && !p.name.is_empty())
+            .collect::<Vec<_>>();
+        // NOTE: Only mutate query pairs if there are any, or it will append an empty `?` to the URL
+        if !valid_query_pairs.is_empty() {
+            let mut query_pairs = url.query_pairs_mut();
+            for p in valid_query_pairs {
+                query_pairs.append_pair(p.name.as_str(), p.value.as_str());
+            }
+        }
+    }
+
+    let client_cert = find_client_certificate(url.as_str(), &settings.client_certificates);
+
+    let response = match ws_manager
+        .connect(
+            &connection.id,
+            url.as_str(),
+            headers,
+            receive_tx,
+            resolved_settings.validate_certificates.value,
+            client_cert,
+            resolved_settings.request_message_size.value,
+        )
+        .await
+    {
+        Ok(r) => r,
+        Err(e) => {
+            return Ok(app_handle.with_tx(|tx| {
+                tx.upsert_websocket_connection(
+                    &WebsocketConnection {
+                        error: Some(e.to_string()),
+                        state: WebsocketConnectionState::Closed,
+                        ..connection
+                    },
+                    &UpdateSource::from_window_label(window.label()),
+                )
+            })?);
+        }
+    };
+
+    app_handle.with_tx(|tx| {
+        tx.upsert_websocket_event(
+            &WebsocketEvent {
+                connection_id: connection.id.clone(),
+                request_id: request.id.clone(),
+                workspace_id: connection.workspace_id.clone(),
+                is_server: false,
+                message_type: WebsocketEventType::Open,
+                ..Default::default()
+            },
+            &UpdateSource::from_window_label(window.label()),
+        )
+    })?;
+
+    let response_headers = response
+        .headers()
+        .into_iter()
+        .map(|(name, value)| HttpResponseHeader {
+            name: name.to_string(),
+            value: value.to_str().unwrap().to_string(),
+        })
+        .collect::<Vec<HttpResponseHeader>>();
+
+    if let (true, Some(cookie_jar), Some(store)) =
+        (resolved_settings.store_cookies.value, cookie_jar.as_mut(), cookie_store.as_ref())
+    {
+        let set_cookie_headers = response
+            .headers()
+            .into_iter()
+            .filter(|(name, _)| name.as_str().eq_ignore_ascii_case("set-cookie"))
+            .filter_map(|(_, value)| value.to_str().ok().map(ToString::to_string))
+            .collect::<Vec<_>>();
+
+        if !set_cookie_headers.is_empty() {
+            store.store_cookies_from_response(&convert_ws_url_to_http(&url), &set_cookie_headers);
+            cookie_jar.cookies = store.get_all_cookies();
+            app_handle.with_tx(|tx| tx.upsert_cookie_jar(cookie_jar, &UpdateSource::Background))?;
+        }
+    }
+
+    let connection = app_handle.with_tx(|tx| {
+        tx.upsert_websocket_connection(
+            &WebsocketConnection {
+                state: WebsocketConnectionState::Connected,
+                headers: response_headers,
+                status: response.status().as_u16() as i32,
+                url: request.url.clone(),
+                ..connection
+            },
+            &UpdateSource::from_window_label(window.label()),
+        )
+    })?;
+
+    {
+        let connection_id = connection.id.clone();
+        let request_id = request.id.to_string();
+        let workspace_id = request.workspace_id.clone();
+        let connection = connection.clone();
+        let window_label = window.label().to_string();
+        let mut has_written_close = false;
+        tokio::spawn(async move {
+            while let Some(message) = receive_rx.recv().await {
+                if let Message::Close(_) = message {
+                    has_written_close = true;
+                }
+
+                app_handle
+                    .with_tx(|tx| {
+                        tx.upsert_websocket_event(
+                            &WebsocketEvent {
+                                connection_id: connection_id.clone(),
+                                request_id: request_id.clone(),
+                                workspace_id: workspace_id.clone(),
+                                is_server: true,
+                                message_type: match message {
+                                    Message::Text(_) => WebsocketEventType::Text,
+                                    Message::Binary(_) => WebsocketEventType::Binary,
+                                    Message::Ping(_) => WebsocketEventType::Ping,
+                                    Message::Pong(_) => WebsocketEventType::Pong,
+                                    Message::Close(_) => WebsocketEventType::Close,
+                                    // Raw frame will never happen during a read
+                                    Message::Frame(_) => WebsocketEventType::Frame,
+                                },
+                                message: message.into_data().into(),
+                                ..Default::default()
+                            },
+                            &UpdateSource::from_window_label(&window_label),
+                        )
+                    })
+                    .unwrap();
+            }
+            info!("Websocket connection closed");
+            if !has_written_close {
+                app_handle
+                    .with_tx(|tx| {
+                        tx.upsert_websocket_event(
+                            &WebsocketEvent {
+                                connection_id: connection_id.clone(),
+                                request_id: request_id.clone(),
+                                workspace_id: workspace_id.clone(),
+                                is_server: true,
+                                message_type: WebsocketEventType::Close,
+                                ..Default::default()
+                            },
+                            &UpdateSource::from_window_label(&window_label),
+                        )
+                    })
+                    .unwrap();
+            }
+            app_handle
+                .with_tx(|tx| {
+                    tx.upsert_websocket_connection(
+                        &WebsocketConnection {
+                            workspace_id: request.workspace_id.clone(),
+                            request_id: request_id.to_string(),
+                            state: WebsocketConnectionState::Closed,
+                            ..connection
+                        },
+                        &UpdateSource::from_window_label(&window_label),
+                    )
+                })
+                .unwrap();
+        });
+    }
+
+    Ok(connection)
+}
+
+/// Convert WS URL to HTTP URL for cookie filtering
+/// WebSocket upgrade requests are HTTP requests initially, so HttpOnly cookies should apply
+fn convert_ws_url_to_http(ws_url: &Url) -> Url {
+    let mut http_url = ws_url.clone();
+
+    match ws_url.scheme() {
+        "ws" => {
+            http_url.set_scheme("http").expect("Failed to set http scheme");
+        }
+        "wss" => {
+            http_url.set_scheme("https").expect("Failed to set https scheme");
+        }
+        _ => {
+            // Already HTTP/HTTPS, no conversion needed
+        }
+    }
+
+    http_url
+}
diff --git a/crates-tauri/yaak-app-client/static/greg.jpeg b/crates-tauri/yaak-app-client/static/greg.jpeg
new file mode 100644
index 0000000..eb7723c
Binary files /dev/null and b/crates-tauri/yaak-app-client/static/greg.jpeg differ
diff --git a/crates-tauri/yaak-app-client/tauri.conf.json b/crates-tauri/yaak-app-client/tauri.conf.json
new file mode 100644
index 0000000..70f5679
--- /dev/null
+++ b/crates-tauri/yaak-app-client/tauri.conf.json
@@ -0,0 +1,47 @@
+{
+  "productName": "Yaak",
+  "version": "0.0.0",
+  "identifier": "app.yaak.desktop",
+  "build": {
+    "beforeBuildCommand": "npm --prefix ../.. run client:tauri-before-build",
+    "beforeDevCommand": "npm --prefix ../.. run client:tauri-before-dev",
+    "devUrl": "http://localhost:1420",
+    "frontendDist": "../../dist/apps/yaak-client",
+    "features": ["wry"]
+  },
+  "app": {
+    "withGlobalTauri": false,
+    "security": {
+      "assetProtocol": {
+        "enable": true,
+        "scope": {
+          "allow": ["$APPDATA/responses/*", "$RESOURCE/static/*"]
+        }
+      }
+    }
+  },
+  "plugins": {
+    "deep-link": {
+      "desktop": {
+        "schemes": ["yaak"]
+      }
+    }
+  },
+  "bundle": {
+    "icon": [
+      "icons/release/32x32.png",
+      "icons/release/128x128.png",
+      "icons/release/128x128@2x.png",
+      "icons/release/icon.icns",
+      "icons/release/icon.ico"
+    ],
+    "resources": [
+      "static",
+      "vendored/protoc/include",
+      "vendored/plugins",
+      "vendored/plugin-runtime",
+      "vendored/node/yaaknode*",
+      "vendored/protoc/yaakprotoc*"
+    ]
+  }
+}
diff --git a/crates-tauri/yaak-app-client/tauri.development.conf.json b/crates-tauri/yaak-app-client/tauri.development.conf.json
new file mode 100644
index 0000000..2ad1fa5
--- /dev/null
+++ b/crates-tauri/yaak-app-client/tauri.development.conf.json
@@ -0,0 +1,13 @@
+{
+  "productName": "Daak",
+  "identifier": "app.yaak.desktop.dev",
+  "bundle": {
+    "icon": [
+      "icons/dev/32x32.png",
+      "icons/dev/128x128.png",
+      "icons/dev/128x128@2x.png",
+      "icons/dev/icon.icns",
+      "icons/dev/icon.ico"
+    ]
+  }
+}
diff --git a/crates-tauri/yaak-app-client/tauri.linux.conf.json b/crates-tauri/yaak-app-client/tauri.linux.conf.json
new file mode 100644
index 0000000..24268fd
--- /dev/null
+++ b/crates-tauri/yaak-app-client/tauri.linux.conf.json
@@ -0,0 +1,3 @@
+{
+  "productName": "yaak"
+}
diff --git a/crates-tauri/yaak-app-client/tauri.release.conf.json b/crates-tauri/yaak-app-client/tauri.release.conf.json
new file mode 100644
index 0000000..73dafa6
--- /dev/null
+++ b/crates-tauri/yaak-app-client/tauri.release.conf.json
@@ -0,0 +1,58 @@
+{
+  "build": {
+    "features": ["updater", "license", "wry"]
+  },
+  "app": {
+    "security": {
+      "capabilities": [
+        "default",
+        {
+          "identifier": "release",
+          "windows": ["*"],
+          "permissions": ["yaak-license:default"]
+        }
+      ]
+    }
+  },
+  "plugins": {
+    "updater": {
+      "endpoints": ["https://update.yaak.app/check/{{target}}/{{arch}}/{{current_version}}"],
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEVGRkFGMjQxRUNEOTQ3MzAKUldRd1I5bnNRZkw2NzRtMnRlWTN3R24xYUR3aGRsUjJzWGwvdHdEcGljb3ZJMUNlMjFsaHlqVU4K"
+    }
+  },
+  "bundle": {
+    "publisher": "Yaak",
+    "license": "MIT",
+    "copyright": "Yaak",
+    "homepage": "https://yaak.app",
+    "active": true,
+    "category": "DeveloperTool",
+    "createUpdaterArtifacts": true,
+    "longDescription": "A cross-platform desktop app for interacting with REST, GraphQL, and gRPC",
+    "shortDescription": "Play with APIs, intuitively",
+    "targets": ["app", "appimage", "deb", "dmg", "nsis", "rpm"],
+    "macOS": {
+      "minimumSystemVersion": "13.0",
+      "exceptionDomain": "",
+      "entitlements": "macos/entitlements.plist",
+      "frameworks": []
+    },
+    "windows": {
+      "signCommand": "trusted-signing-cli -e https://eus.codesigning.azure.net/ -a Yaak -c yaakapp %1"
+    },
+    "linux": {
+      "deb": {
+        "desktopTemplate": "./template.desktop",
+        "files": {
+          "/usr/share/metainfo/app.yaak.Yaak.metainfo.xml": "../../flatpak/app.yaak.Yaak.metainfo.xml"
+        }
+      },
+      "rpm": {
+        "desktopTemplate": "./template.desktop",
+        "files": {
+          "/usr/share/metainfo/app.yaak.Yaak.metainfo.xml": "../../flatpak/app.yaak.Yaak.metainfo.xml"
+        }
+      }
+    }
+  }
+}
diff --git a/crates-tauri/yaak-app-client/template.desktop b/crates-tauri/yaak-app-client/template.desktop
new file mode 100644
index 0000000..902aa16
--- /dev/null
+++ b/crates-tauri/yaak-app-client/template.desktop
@@ -0,0 +1,9 @@
+[Desktop Entry]
+Categories={{categories}}
+Comment={{comment}}
+Exec={{exec}}
+Icon={{icon}}
+Name={{name}}
+StartupWMClass={{exec}}
+Terminal=false
+Type=Application
diff --git a/crates-tauri/yaak-app-proxy/.gitignore b/crates-tauri/yaak-app-proxy/.gitignore
new file mode 100644
index 0000000..8cc9675
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/.gitignore
@@ -0,0 +1,8 @@
+# Generated by Cargo
+# will have compiled files and executables
+target/
+
+gen/*
+
+**/permissions/autogenerated
+**/permissions/schemas
diff --git a/crates-tauri/yaak-app-proxy/Cargo.toml b/crates-tauri/yaak-app-proxy/Cargo.toml
new file mode 100644
index 0000000..a9bdbd5
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/Cargo.toml
@@ -0,0 +1,27 @@
+[package]
+name = "yaak-app-proxy"
+version = "0.0.0"
+edition = "2024"
+authors = ["Gregory Schier"]
+publish = false
+
+[lib]
+name = "tauri_app_proxy_lib"
+crate-type = ["staticlib", "cdylib", "lib"]
+
+[build-dependencies]
+tauri-build = { version = "2.6.1", features = [] }
+
+[features]
+default = ["wry"]
+wry = ["tauri/wry", "tauri/x11", "tauri/dbus"]
+
+[dependencies]
+log = { workspace = true }
+serde_json = { workspace = true }
+tauri = { workspace = true, features = ["devtools"] }
+tauri-plugin-os = "2.3.2"
+yaak-mac-window = { workspace = true }
+yaak-proxy-lib = { workspace = true }
+yaak-rpc = { workspace = true }
+yaak-window = { workspace = true }
diff --git a/crates-tauri/yaak-app-proxy/bindings/index.ts b/crates-tauri/yaak-app-proxy/bindings/index.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/bindings/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/crates-tauri/yaak-app-proxy/build.rs b/crates-tauri/yaak-app-proxy/build.rs
new file mode 100644
index 0000000..d860e1e
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/build.rs
@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}
diff --git a/crates-tauri/yaak-app-proxy/capabilities/default.json b/crates-tauri/yaak-app-proxy/capabilities/default.json
new file mode 100644
index 0000000..f4ce6ab
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/capabilities/default.json
@@ -0,0 +1,18 @@
+{
+  "identifier": "default",
+  "description": "Default capabilities for the Yaak Proxy app",
+  "windows": ["*"],
+  "permissions": [
+    "core:default",
+    "os:allow-os-type",
+    "core:window:allow-close",
+    "core:window:allow-is-fullscreen",
+    "core:window:allow-is-maximized",
+    "core:window:allow-maximize",
+    "core:window:allow-minimize",
+    "core:window:allow-show",
+    "core:window:allow-start-dragging",
+    "core:window:allow-unmaximize",
+    "yaak-mac-window:default"
+  ]
+}
diff --git a/crates-tauri/yaak-app-proxy/package.json b/crates-tauri/yaak-app-proxy/package.json
new file mode 100644
index 0000000..4bd14b8
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/tauri-proxy",
+  "version": "1.0.0",
+  "private": true,
+  "main": "bindings/index.ts"
+}
diff --git a/crates-tauri/yaak-app-proxy/src/lib.rs b/crates-tauri/yaak-app-proxy/src/lib.rs
new file mode 100644
index 0000000..d5d3b4a
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/src/lib.rs
@@ -0,0 +1,105 @@
+use log::{error, info, warn};
+use tauri::Runtime;
+use tauri::{Emitter, Manager, RunEvent, State, WebviewWindow};
+use yaak_proxy_lib::ProxyCtx;
+use yaak_rpc::{RpcEventEmitter, RpcRouter};
+use yaak_window::window::CreateWindowConfig;
+
+mod window_menu;
+
+fn setup_window_menu<R: Runtime>(win: &WebviewWindow<R>) {
+    #[allow(unused_variables)]
+    let menu = match window_menu::app_menu(win.app_handle()) {
+        Ok(m) => m,
+        Err(e) => {
+            warn!("Failed to create menu: {e:?}");
+            return;
+        }
+    };
+
+    // This causes the window to not be clickable (in AppImage), so disable on Linux
+    #[cfg(not(target_os = "linux"))]
+    win.app_handle().set_menu(menu).expect("Failed to set app menu");
+
+    let webview_window = win.clone();
+    win.on_menu_event(move |w, event| {
+        if !w.is_focused().unwrap() {
+            return;
+        }
+
+        let event_id = event.id().0.as_str();
+        match event_id {
+            "hacked_quit" => {
+                w.webview_windows().iter().for_each(|(_, w)| {
+                    info!("Closing window {}", w.label());
+                    let _ = w.close();
+                });
+            }
+            "dev.refresh" => webview_window.eval("location.reload()").unwrap(),
+            "dev.toggle_devtools" => {
+                if webview_window.is_devtools_open() {
+                    webview_window.close_devtools();
+                } else {
+                    webview_window.open_devtools();
+                }
+            }
+            _ => {}
+        }
+    });
+}
+
+#[tauri::command]
+async fn rpc(
+    router: State<'_, RpcRouter<ProxyCtx>>,
+    ctx: State<'_, ProxyCtx>,
+    cmd: String,
+    payload: serde_json::Value,
+) -> Result<serde_json::Value, String> {
+    router.dispatch(&cmd, payload, &ctx).await.map_err(|e| e.message)
+}
+
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_os::init())
+        .plugin(yaak_mac_window::init())
+        .setup(|app| {
+            let data_dir = app.path().app_data_dir().expect("no app data dir");
+            std::fs::create_dir_all(&data_dir).expect("failed to create app data dir");
+
+            let (emitter, event_rx) = RpcEventEmitter::new();
+            app.manage(ProxyCtx::new(&data_dir.join("proxy.db"), emitter));
+            app.manage(yaak_proxy_lib::build_router());
+
+            // Drain RPC events and forward as Tauri events
+            let app_handle = app.handle().clone();
+            std::thread::spawn(move || {
+                for event in event_rx {
+                    if let Err(e) = app_handle.emit(event.event, event.payload) {
+                        error!("Failed to emit RPC event: {e}");
+                    }
+                }
+            });
+
+            Ok(())
+        })
+        .invoke_handler(tauri::generate_handler![rpc])
+        .build(tauri::generate_context!())
+        .expect("error while building yaak proxy tauri application")
+        .run(|app_handle, event| {
+            if let RunEvent::Ready = event {
+                let config = CreateWindowConfig {
+                    url: "/",
+                    label: "main_0",
+                    title: "Yaak Proxy",
+                    inner_size: Some((1000.0, 700.0)),
+                    hidden: true,
+                    hide_titlebar: true,
+                    ..Default::default()
+                };
+                match yaak_window::window::create_window(app_handle, config) {
+                    Ok(win) => setup_window_menu(&win),
+                    Err(e) => error!("Failed to create proxy window: {e:?}"),
+                }
+            }
+        });
+}
diff --git a/crates-tauri/yaak-app-proxy/src/main.rs b/crates-tauri/yaak-app-proxy/src/main.rs
new file mode 100644
index 0000000..70fd252
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/src/main.rs
@@ -0,0 +1,5 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    tauri_app_proxy_lib::run();
+}
diff --git a/crates-tauri/yaak-app-proxy/src/window_menu.rs b/crates-tauri/yaak-app-proxy/src/window_menu.rs
new file mode 100644
index 0000000..b71433a
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/src/window_menu.rs
@@ -0,0 +1,138 @@
+pub use tauri::AppHandle;
+use tauri::Runtime;
+use tauri::menu::{
+    AboutMetadata, HELP_SUBMENU_ID, Menu, MenuItemBuilder, PredefinedMenuItem, Submenu,
+    WINDOW_SUBMENU_ID,
+};
+
+pub fn app_menu<R: Runtime>(app_handle: &AppHandle<R>) -> tauri::Result<Menu<R>> {
+    let pkg_info = app_handle.package_info();
+    let config = app_handle.config();
+    let about_metadata = AboutMetadata {
+        name: Some(pkg_info.name.clone()),
+        version: Some(pkg_info.version.to_string()),
+        copyright: config.bundle.copyright.clone(),
+        authors: config.bundle.publisher.clone().map(|p| vec![p]),
+        ..Default::default()
+    };
+
+    let window_menu = Submenu::with_id_and_items(
+        app_handle,
+        WINDOW_SUBMENU_ID,
+        "Window",
+        true,
+        &[
+            &PredefinedMenuItem::minimize(app_handle, None)?,
+            &PredefinedMenuItem::maximize(app_handle, None)?,
+            #[cfg(target_os = "macos")]
+            &PredefinedMenuItem::separator(app_handle)?,
+            &PredefinedMenuItem::close_window(app_handle, None)?,
+        ],
+    )?;
+
+    #[cfg(target_os = "macos")]
+    {
+        window_menu.set_as_windows_menu_for_nsapp()?;
+    }
+
+    let help_menu = Submenu::with_id_and_items(
+        app_handle,
+        HELP_SUBMENU_ID,
+        "Help",
+        true,
+        &[
+            #[cfg(not(target_os = "macos"))]
+            &PredefinedMenuItem::about(app_handle, None, Some(about_metadata.clone()))?,
+        ],
+    )?;
+
+    #[cfg(target_os = "macos")]
+    {
+        help_menu.set_as_windows_menu_for_nsapp()?;
+    }
+
+    let menu = Menu::with_items(
+        app_handle,
+        &[
+            #[cfg(target_os = "macos")]
+            &Submenu::with_items(
+                app_handle,
+                pkg_info.name.clone(),
+                true,
+                &[
+                    &PredefinedMenuItem::about(app_handle, None, Some(about_metadata))?,
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    &PredefinedMenuItem::services(app_handle, None)?,
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    &PredefinedMenuItem::hide(app_handle, None)?,
+                    &PredefinedMenuItem::hide_others(app_handle, None)?,
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    &MenuItemBuilder::with_id(
+                        "hacked_quit".to_string(),
+                        format!("Quit {}", app_handle.package_info().name),
+                    )
+                    .accelerator("CmdOrCtrl+q")
+                    .build(app_handle)?,
+                ],
+            )?,
+            #[cfg(not(any(
+                target_os = "linux",
+                target_os = "dragonfly",
+                target_os = "freebsd",
+                target_os = "netbsd",
+                target_os = "openbsd"
+            )))]
+            &Submenu::with_items(
+                app_handle,
+                "File",
+                true,
+                &[
+                    &PredefinedMenuItem::close_window(app_handle, None)?,
+                    #[cfg(not(target_os = "macos"))]
+                    &PredefinedMenuItem::quit(app_handle, None)?,
+                ],
+            )?,
+            &Submenu::with_items(
+                app_handle,
+                "Edit",
+                true,
+                &[
+                    &PredefinedMenuItem::undo(app_handle, None)?,
+                    &PredefinedMenuItem::redo(app_handle, None)?,
+                    &PredefinedMenuItem::separator(app_handle)?,
+                    &PredefinedMenuItem::cut(app_handle, None)?,
+                    &PredefinedMenuItem::copy(app_handle, None)?,
+                    &PredefinedMenuItem::paste(app_handle, None)?,
+                    &PredefinedMenuItem::select_all(app_handle, None)?,
+                ],
+            )?,
+            &Submenu::with_items(
+                app_handle,
+                "View",
+                true,
+                &[
+                    #[cfg(target_os = "macos")]
+                    &PredefinedMenuItem::fullscreen(app_handle, None)?,
+                ],
+            )?,
+            &window_menu,
+            &help_menu,
+            #[cfg(dev)]
+            &Submenu::with_items(
+                app_handle,
+                "Develop",
+                true,
+                &[
+                    &MenuItemBuilder::with_id("dev.refresh".to_string(), "Refresh")
+                        .accelerator("CmdOrCtrl+Shift+r")
+                        .build(app_handle)?,
+                    &MenuItemBuilder::with_id("dev.toggle_devtools".to_string(), "Open Devtools")
+                        .accelerator("CmdOrCtrl+Option+i")
+                        .build(app_handle)?,
+                ],
+            )?,
+        ],
+    )?;
+
+    Ok(menu)
+}
diff --git a/crates-tauri/yaak-app-proxy/tauri.conf.json b/crates-tauri/yaak-app-proxy/tauri.conf.json
new file mode 100644
index 0000000..846f8bf
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/tauri.conf.json
@@ -0,0 +1,24 @@
+{
+  "productName": "Yaak Proxy",
+  "version": "0.0.0",
+  "identifier": "app.yaak.proxy",
+  "build": {
+    "beforeBuildCommand": "npm --prefix ../.. run proxy:tauri-before-build",
+    "beforeDevCommand": "npm --prefix ../.. run proxy:tauri-before-dev",
+    "devUrl": "http://localhost:2420",
+    "frontendDist": "../../dist/apps/yaak-proxy"
+  },
+  "app": {
+    "withGlobalTauri": false,
+    "windows": []
+  },
+  "bundle": {
+    "icon": [
+      "../yaak-app-client/icons/release/32x32.png",
+      "../yaak-app-client/icons/release/128x128.png",
+      "../yaak-app-client/icons/release/128x128@2x.png",
+      "../yaak-app-client/icons/release/icon.icns",
+      "../yaak-app-client/icons/release/icon.ico"
+    ]
+  }
+}
diff --git a/crates-tauri/yaak-app-proxy/tauri.development.conf.json b/crates-tauri/yaak-app-proxy/tauri.development.conf.json
new file mode 100644
index 0000000..b8f1acb
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/tauri.development.conf.json
@@ -0,0 +1,13 @@
+{
+  "productName": "Yaak Proxy Dev",
+  "identifier": "app.yaak.proxy.dev",
+  "bundle": {
+    "icon": [
+      "../yaak-app-client/icons/dev/32x32.png",
+      "../yaak-app-client/icons/dev/128x128.png",
+      "../yaak-app-client/icons/dev/128x128@2x.png",
+      "../yaak-app-client/icons/dev/icon.icns",
+      "../yaak-app-client/icons/dev/icon.ico"
+    ]
+  }
+}
diff --git a/crates-tauri/yaak-app-proxy/tauri.release.conf.json b/crates-tauri/yaak-app-proxy/tauri.release.conf.json
new file mode 100644
index 0000000..b1ec766
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/tauri.release.conf.json
@@ -0,0 +1,5 @@
+{
+  "build": {
+    "features": []
+  }
+}
diff --git a/crates-tauri/yaak-app-proxy/template.desktop b/crates-tauri/yaak-app-proxy/template.desktop
new file mode 100644
index 0000000..902aa16
--- /dev/null
+++ b/crates-tauri/yaak-app-proxy/template.desktop
@@ -0,0 +1,9 @@
+[Desktop Entry]
+Categories={{categories}}
+Comment={{comment}}
+Exec={{exec}}
+Icon={{icon}}
+Name={{name}}
+StartupWMClass={{exec}}
+Terminal=false
+Type=Application
diff --git a/crates-tauri/yaak-fonts/Cargo.toml b/crates-tauri/yaak-fonts/Cargo.toml
new file mode 100644
index 0000000..1828b6c
--- /dev/null
+++ b/crates-tauri/yaak-fonts/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "yaak-fonts"
+links = "yaak-fonts"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+[dependencies]
+font-loader = "0.11.0"
+tauri = { workspace = true }
+ts-rs = { workspace = true }
+serde = "1.0"
+thiserror = { workspace = true }
+
+[build-dependencies]
+tauri-plugin = { workspace = true, features = ["build"] }
diff --git a/crates-tauri/yaak-fonts/bindings/gen_fonts.ts b/crates-tauri/yaak-fonts/bindings/gen_fonts.ts
new file mode 100644
index 0000000..7d74dd0
--- /dev/null
+++ b/crates-tauri/yaak-fonts/bindings/gen_fonts.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Fonts = { editorFonts: Array<string>, uiFonts: Array<string>, };
diff --git a/crates-tauri/yaak-fonts/build.rs b/crates-tauri/yaak-fonts/build.rs
new file mode 100644
index 0000000..7486984
--- /dev/null
+++ b/crates-tauri/yaak-fonts/build.rs
@@ -0,0 +1,5 @@
+const COMMANDS: &[&str] = &["list"];
+
+fn main() {
+    tauri_plugin::Builder::new(COMMANDS).build();
+}
diff --git a/crates-tauri/yaak-fonts/index.ts b/crates-tauri/yaak-fonts/index.ts
new file mode 100644
index 0000000..fc248bf
--- /dev/null
+++ b/crates-tauri/yaak-fonts/index.ts
@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { platform } from "@yaakapp-internal/platform";
+import { Fonts } from "./bindings/gen_fonts";
+
+export async function listFonts() {
+  return platform.rpc<Fonts>("plugin:yaak-fonts|list", {});
+}
+
+export function useFonts() {
+  return useQuery({
+    queryKey: ["list_fonts"],
+    queryFn: () => listFonts(),
+  });
+}
diff --git a/crates-tauri/yaak-fonts/package.json b/crates-tauri/yaak-fonts/package.json
new file mode 100644
index 0000000..d84f0d9
--- /dev/null
+++ b/crates-tauri/yaak-fonts/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/fonts",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates-tauri/yaak-fonts/permissions/default.toml b/crates-tauri/yaak-fonts/permissions/default.toml
new file mode 100644
index 0000000..0695db5
--- /dev/null
+++ b/crates-tauri/yaak-fonts/permissions/default.toml
@@ -0,0 +1,3 @@
+[default]
+description = "Default permissions for the plugin"
+permissions = ["allow-list"]
diff --git a/crates-tauri/yaak-fonts/src/commands.rs b/crates-tauri/yaak-fonts/src/commands.rs
new file mode 100644
index 0000000..03ba482
--- /dev/null
+++ b/crates-tauri/yaak-fonts/src/commands.rs
@@ -0,0 +1,38 @@
+use crate::Result;
+use font_loader::system_fonts;
+use serde::{Deserialize, Serialize};
+use std::collections::HashSet;
+use tauri::command;
+use ts_rs::TS;
+
+#[derive(Default, Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_fonts.ts")]
+pub struct Fonts {
+    pub editor_fonts: Vec<String>,
+    pub ui_fonts: Vec<String>,
+}
+
+#[command]
+pub(crate) async fn list() -> Result<Fonts> {
+    let mut ui_fonts = HashSet::new();
+    let mut editor_fonts = HashSet::new();
+
+    let mut property = system_fonts::FontPropertyBuilder::new().monospace().build();
+    for font in &system_fonts::query_specific(&mut property) {
+        editor_fonts.insert(font.to_string());
+    }
+    for font in &system_fonts::query_all() {
+        if !editor_fonts.contains(font) {
+            ui_fonts.insert(font.to_string());
+        }
+    }
+
+    let mut ui_fonts: Vec<String> = ui_fonts.into_iter().collect();
+    let mut editor_fonts: Vec<String> = editor_fonts.into_iter().collect();
+
+    ui_fonts.sort();
+    editor_fonts.sort();
+
+    Ok(Fonts { ui_fonts, editor_fonts })
+}
diff --git a/crates-tauri/yaak-fonts/src/error.rs b/crates-tauri/yaak-fonts/src/error.rs
new file mode 100644
index 0000000..651398d
--- /dev/null
+++ b/crates-tauri/yaak-fonts/src/error.rs
@@ -0,0 +1,15 @@
+use serde::{ser::Serializer, Serialize};
+
+#[derive(Debug, thiserror::Error)]
+pub enum Error {}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates-tauri/yaak-fonts/src/lib.rs b/crates-tauri/yaak-fonts/src/lib.rs
new file mode 100644
index 0000000..effb4a8
--- /dev/null
+++ b/crates-tauri/yaak-fonts/src/lib.rs
@@ -0,0 +1,15 @@
+use tauri::{
+    generate_handler,
+    plugin::{Builder, TauriPlugin},
+    Runtime,
+};
+
+mod commands;
+mod error;
+
+use crate::commands::list;
+pub use error::{Error, Result};
+
+pub fn init<R: Runtime>() -> TauriPlugin<R> {
+    Builder::new("yaak-fonts").invoke_handler(generate_handler![list]).build()
+}
diff --git a/crates-tauri/yaak-license/Cargo.toml b/crates-tauri/yaak-license/Cargo.toml
new file mode 100644
index 0000000..4eb0448
--- /dev/null
+++ b/crates-tauri/yaak-license/Cargo.toml
@@ -0,0 +1,22 @@
+[package]
+name = "yaak-license"
+links = "yaak-license"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+chrono = "0.4.38"
+log = { workspace = true }
+reqwest = { workspace = true, features = ["json"] }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+tauri = { workspace = true }
+thiserror = { workspace = true }
+ts-rs = { workspace = true }
+yaak-common = { workspace = true }
+yaak-models = { workspace = true }
+yaak-api = { workspace = true }
+
+[build-dependencies]
+tauri-plugin = { workspace = true, features = ["build"] }
diff --git a/crates-tauri/yaak-license/bindings/gen_models.ts b/crates-tauri/yaak-license/bindings/gen_models.ts
new file mode 100644
index 0000000..bc2f998
--- /dev/null
+++ b/crates-tauri/yaak-license/bindings/gen_models.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type CheckActivationRequestPayload = { appVersion: string, appPlatform: string, };
diff --git a/crates-tauri/yaak-license/bindings/license.ts b/crates-tauri/yaak-license/bindings/license.ts
new file mode 100644
index 0000000..5213253
--- /dev/null
+++ b/crates-tauri/yaak-license/bindings/license.ts
@@ -0,0 +1,11 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type APIErrorResponsePayload = { error: string, message: string, };
+
+export type ActivateLicenseRequestPayload = { licenseKey: string, appVersion: string, appPlatform: string, };
+
+export type ActivateLicenseResponsePayload = { activationId: string, };
+
+export type DeactivateLicenseRequestPayload = { appVersion: string, appPlatform: string, };
+
+export type LicenseCheckStatus = { "status": "personal_use", "data": { trial_ended: string, } } | { "status": "trialing", "data": { end: string, } } | { "status": "error", "data": { message: string, code: string, } } | { "status": "active", "data": { periodEnd: string, cancelAt: string | null, } } | { "status": "inactive", "data": { status: string, } } | { "status": "expired", "data": { changes: number, changesUrl: string | null, billingUrl: string, periodEnd: string, } } | { "status": "past_due", "data": { billingUrl: string, periodEnd: string, } };
diff --git a/crates-tauri/yaak-license/bindings/models.ts b/crates-tauri/yaak-license/bindings/models.ts
new file mode 100644
index 0000000..51c17d6
--- /dev/null
+++ b/crates-tauri/yaak-license/bindings/models.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type CheckActivationRequestPayload = { activationId: string, };
diff --git a/crates-tauri/yaak-license/build.rs b/crates-tauri/yaak-license/build.rs
new file mode 100644
index 0000000..6b08f5f
--- /dev/null
+++ b/crates-tauri/yaak-license/build.rs
@@ -0,0 +1,5 @@
+const COMMANDS: &[&str] = &["activate", "deactivate", "check"];
+
+fn main() {
+    tauri_plugin::Builder::new(COMMANDS).build();
+}
diff --git a/crates-tauri/yaak-license/index.ts b/crates-tauri/yaak-license/index.ts
new file mode 100644
index 0000000..e4262bf
--- /dev/null
+++ b/crates-tauri/yaak-license/index.ts
@@ -0,0 +1,53 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { platform } from "@yaakapp-internal/platform";
+import { appInfo } from "@yaakapp/yaak-client/lib/appInfo";
+import { useEffect } from "react";
+import { LicenseCheckStatus } from "./bindings/license";
+
+export * from "./bindings/license";
+
+const CHECK_QUERY_KEY = ["license.check"];
+
+export async function checkLicense(): Promise<LicenseCheckStatus> {
+  return platform.rpc<LicenseCheckStatus>("plugin:yaak-license|check");
+}
+
+export function useLicense() {
+  const queryClient = useQueryClient();
+  const activate = useMutation<void, string, { licenseKey: string }>({
+    mutationKey: ["license.activate"],
+    mutationFn: (payload) => platform.rpc("plugin:yaak-license|activate", payload),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: CHECK_QUERY_KEY }),
+  });
+
+  const deactivate = useMutation<void, string, void>({
+    mutationKey: ["license.deactivate"],
+    mutationFn: () => platform.rpc("plugin:yaak-license|deactivate"),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: CHECK_QUERY_KEY }),
+  });
+
+  // Check the license again after a license is activated
+  useEffect(() => {
+    return platform.listen("license-activated", () => {
+      void queryClient.invalidateQueries({ queryKey: CHECK_QUERY_KEY });
+    });
+  }, []);
+
+  const check = useQuery<LicenseCheckStatus | null, string>({
+    refetchInterval: 1000 * 60 * 60 * 12, // Refetch every 12 hours
+    refetchOnWindowFocus: false,
+    queryKey: CHECK_QUERY_KEY,
+    queryFn: async () => {
+      if (!appInfo.featureLicense) {
+        return null;
+      }
+      return checkLicense();
+    },
+  });
+
+  return {
+    activate,
+    deactivate,
+    check,
+  } as const;
+}
diff --git a/crates-tauri/yaak-license/package.json b/crates-tauri/yaak-license/package.json
new file mode 100644
index 0000000..f386190
--- /dev/null
+++ b/crates-tauri/yaak-license/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/license",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates-tauri/yaak-license/permissions/default.toml b/crates-tauri/yaak-license/permissions/default.toml
new file mode 100644
index 0000000..2ce8a2a
--- /dev/null
+++ b/crates-tauri/yaak-license/permissions/default.toml
@@ -0,0 +1,3 @@
+[default]
+description = "Default permissions for the plugin"
+permissions = ["allow-check", "allow-activate", "allow-deactivate"]
diff --git a/crates-tauri/yaak-license/src/commands.rs b/crates-tauri/yaak-license/src/commands.rs
new file mode 100644
index 0000000..e848fd8
--- /dev/null
+++ b/crates-tauri/yaak-license/src/commands.rs
@@ -0,0 +1,18 @@
+use crate::error::Result;
+use crate::{LicenseCheckStatus, activate_license, check_license, deactivate_license};
+use tauri::{Runtime, WebviewWindow, command};
+
+#[command]
+pub async fn check<R: Runtime>(window: WebviewWindow<R>) -> Result<LicenseCheckStatus> {
+    check_license(&window).await
+}
+
+#[command]
+pub async fn activate<R: Runtime>(license_key: &str, window: WebviewWindow<R>) -> Result<()> {
+    activate_license(&window, license_key).await
+}
+
+#[command]
+pub async fn deactivate<R: Runtime>(window: WebviewWindow<R>) -> Result<()> {
+    deactivate_license(&window).await
+}
diff --git a/crates-tauri/yaak-license/src/error.rs b/crates-tauri/yaak-license/src/error.rs
new file mode 100644
index 0000000..99e1292
--- /dev/null
+++ b/crates-tauri/yaak-license/src/error.rs
@@ -0,0 +1,34 @@
+use serde::{Serialize, Serializer};
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error("Reqwest error: {0}")]
+    APIError(#[from] reqwest::Error),
+
+    #[error("JSON error: {0}")]
+    JsonError(#[from] serde_json::Error),
+
+    #[error("{message}")]
+    ClientError { message: String, error: String },
+
+    #[error(transparent)]
+    ModelError(#[from] yaak_models::error::Error),
+
+    #[error(transparent)]
+    ApiError(#[from] yaak_api::Error),
+
+    #[error("Internal server error")]
+    ServerError,
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates-tauri/yaak-license/src/lib.rs b/crates-tauri/yaak-license/src/lib.rs
new file mode 100644
index 0000000..9b38c3a
--- /dev/null
+++ b/crates-tauri/yaak-license/src/lib.rs
@@ -0,0 +1,17 @@
+use tauri::{
+    Runtime, generate_handler,
+    plugin::{Builder, TauriPlugin},
+};
+
+mod commands;
+pub mod error;
+mod license;
+
+use crate::commands::{activate, check, deactivate};
+pub use license::*;
+
+pub fn init<R: Runtime>() -> TauriPlugin<R> {
+    Builder::new("yaak-license")
+        .invoke_handler(generate_handler![check, activate, deactivate])
+        .build()
+}
diff --git a/crates-tauri/yaak-license/src/license.rs b/crates-tauri/yaak-license/src/license.rs
new file mode 100644
index 0000000..de4c3f6
--- /dev/null
+++ b/crates-tauri/yaak-license/src/license.rs
@@ -0,0 +1,261 @@
+use crate::error::Error::{ClientError, JsonError, ServerError};
+use crate::error::Result;
+use chrono::{DateTime, Utc};
+use log::{info, warn};
+use serde::{Deserialize, Serialize};
+use std::ops::Add;
+use std::time::Duration;
+use tauri::{AppHandle, Emitter, Manager, Runtime, WebviewWindow, is_dev};
+use ts_rs::TS;
+use yaak_api::{ApiClientKind, yaak_api_client};
+use yaak_common::platform::get_os_str;
+use yaak_models::client_db::{ClientDb, WriteDb};
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::UpdateSource;
+
+/// Extension trait for accessing the QueryManager from Tauri Manager types.
+/// This is needed temporarily until all crates are refactored to not use Tauri.
+trait QueryManagerExt<'a, R> {
+    fn db(&'a self) -> ClientDb<'a>;
+    fn with_tx<T>(
+        &'a self,
+        func: impl FnOnce(&WriteDb) -> yaak_models::error::Result<T>,
+    ) -> yaak_models::error::Result<T>;
+}
+
+impl<'a, R: Runtime, M: Manager<R>> QueryManagerExt<'a, R> for M {
+    fn db(&'a self) -> ClientDb<'a> {
+        let qm = self.state::<QueryManager>();
+        qm.inner().connect()
+    }
+
+    fn with_tx<T>(
+        &'a self,
+        func: impl FnOnce(&WriteDb) -> yaak_models::error::Result<T>,
+    ) -> yaak_models::error::Result<T> {
+        let qm = self.state::<QueryManager>();
+        qm.inner().with_tx(func)
+    }
+}
+
+const KV_NAMESPACE: &str = "license";
+const KV_ACTIVATION_ID_KEY: &str = "activation_id";
+const TRIAL_SECONDS: u64 = 3600 * 24 * 30;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct CheckActivationRequestPayload {
+    pub app_version: String,
+    pub app_platform: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "license.ts")]
+pub struct ActivateLicenseRequestPayload {
+    pub license_key: String,
+    pub app_version: String,
+    pub app_platform: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "license.ts")]
+pub struct DeactivateLicenseRequestPayload {
+    pub app_version: String,
+    pub app_platform: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "license.ts")]
+pub struct ActivateLicenseResponsePayload {
+    pub activation_id: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "license.ts")]
+pub struct APIErrorResponsePayload {
+    pub error: String,
+    pub message: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "status", content = "data")]
+#[ts(export, export_to = "license.ts")]
+pub enum LicenseCheckStatus {
+    // Local Types
+    PersonalUse {
+        trial_ended: DateTime<Utc>,
+    },
+    Trialing {
+        end: DateTime<Utc>,
+    },
+    Error {
+        message: String,
+        code: String,
+    },
+
+    // Server Types
+    Active {
+        #[serde(rename = "periodEnd")]
+        period_end: DateTime<Utc>,
+        #[serde(rename = "cancelAt")]
+        cancel_at: Option<DateTime<Utc>>,
+    },
+    Inactive {
+        status: String,
+    },
+    Expired {
+        changes: i32,
+        #[serde(rename = "changesUrl")]
+        changes_url: Option<String>,
+        #[serde(rename = "billingUrl")]
+        billing_url: String,
+        #[serde(rename = "periodEnd")]
+        period_end: DateTime<Utc>,
+    },
+    PastDue {
+        #[serde(rename = "billingUrl")]
+        billing_url: String,
+        #[serde(rename = "periodEnd")]
+        period_end: DateTime<Utc>,
+    },
+}
+
+pub async fn activate_license<R: Runtime>(
+    window: &WebviewWindow<R>,
+    license_key: &str,
+) -> Result<()> {
+    info!("Activating license {}", license_key);
+    let app_version = window.app_handle().package_info().version.to_string();
+    let client = yaak_api_client(ApiClientKind::App, &app_version)?;
+    let payload = ActivateLicenseRequestPayload {
+        license_key: license_key.to_string(),
+        app_platform: get_os_str().to_string(),
+        app_version,
+    };
+    let response = client.post(build_url("/licenses/activate")).json(&payload).send().await?;
+
+    if response.status().is_client_error() {
+        let body: APIErrorResponsePayload = response.json().await?;
+        return Err(ClientError { message: body.message, error: body.error });
+    }
+
+    if response.status().is_server_error() {
+        return Err(ServerError);
+    }
+
+    let body: ActivateLicenseResponsePayload = response.json().await?;
+    if let Err(e) = window.app_handle().with_tx(|tx| {
+        tx.set_key_value_str(
+            KV_ACTIVATION_ID_KEY,
+            KV_NAMESPACE,
+            body.activation_id.as_str(),
+            &UpdateSource::from_window_label(window.label()),
+        );
+        Ok(())
+    }) {
+        warn!("Failed to store license activation: {e}");
+    }
+
+    if let Err(e) = window.emit("license-activated", true) {
+        warn!("Failed to emit check-license event: {}", e);
+    }
+
+    Ok(())
+}
+
+pub async fn deactivate_license<R: Runtime>(window: &WebviewWindow<R>) -> Result<()> {
+    info!("Deactivating activation");
+    let app_handle = window.app_handle();
+    let activation_id = get_activation_id(app_handle).await;
+
+    let app_version = window.app_handle().package_info().version.to_string();
+    let client = yaak_api_client(ApiClientKind::App, &app_version)?;
+    let path = format!("/licenses/activations/{}/deactivate", activation_id);
+    let payload =
+        DeactivateLicenseRequestPayload { app_platform: get_os_str().to_string(), app_version };
+    let response = client.post(build_url(&path)).json(&payload).send().await?;
+
+    if response.status().is_client_error() {
+        let body: APIErrorResponsePayload = response.json().await?;
+        return Err(ClientError { message: body.message, error: body.error });
+    }
+
+    if response.status().is_server_error() {
+        return Err(ServerError);
+    }
+
+    app_handle.with_tx(|tx| {
+        tx.delete_key_value(
+            KV_ACTIVATION_ID_KEY,
+            KV_NAMESPACE,
+            &UpdateSource::from_window_label(window.label()),
+        )
+    })?;
+
+    if let Err(e) = app_handle.emit("license-deactivated", true) {
+        warn!("Failed to emit deactivate-license event: {}", e);
+    }
+
+    Ok(())
+}
+
+pub async fn check_license<R: Runtime>(window: &WebviewWindow<R>) -> Result<LicenseCheckStatus> {
+    let app_version = window.app_handle().package_info().version.to_string();
+    let payload =
+        CheckActivationRequestPayload { app_platform: get_os_str().to_string(), app_version };
+    let activation_id = get_activation_id(window.app_handle()).await;
+
+    let settings = window.db().get_settings();
+    let trial_end = settings.created_at.add(Duration::from_secs(TRIAL_SECONDS)).and_utc();
+
+    let has_activation_id = !activation_id.is_empty();
+    let trial_period_active = Utc::now() < trial_end;
+
+    match (has_activation_id, trial_period_active) {
+        (false, true) => Ok(LicenseCheckStatus::Trialing { end: trial_end }),
+        (false, false) => Ok(LicenseCheckStatus::PersonalUse { trial_ended: trial_end }),
+        (true, _) => {
+            info!("Checking license activation");
+            // A license has been activated, so let's check the license server
+            let client = yaak_api_client(ApiClientKind::App, &payload.app_version)?;
+            let path = format!("/licenses/activations/{activation_id}/check-v2");
+            let response = client.post(build_url(&path)).json(&payload).send().await?;
+
+            if response.status().is_client_error() {
+                let body: APIErrorResponsePayload = response.json().await?;
+                return Err(ClientError { message: body.message, error: body.error });
+            }
+
+            if response.status().is_server_error() {
+                warn!("Failed to check license {}", response.status());
+                return Err(ServerError);
+            }
+
+            let body_text = response.text().await?;
+            match serde_json::from_str::<LicenseCheckStatus>(&body_text) {
+                Ok(b) => Ok(b),
+                Err(e) => {
+                    warn!("Failed to decode server response: {} {:?}", body_text, e);
+                    Err(JsonError(e))
+                }
+            }
+        }
+    }
+}
+
+fn build_url(path: &str) -> String {
+    if is_dev() {
+        format!("http://localhost:9444{path}")
+    } else {
+        format!("https://license.yaak.app{path}")
+    }
+}
+
+pub async fn get_activation_id<R: Runtime>(app_handle: &AppHandle<R>) -> String {
+    app_handle.db().get_key_value_str(KV_ACTIVATION_ID_KEY, KV_NAMESPACE, "")
+}
diff --git a/crates-tauri/yaak-mac-window/Cargo.toml b/crates-tauri/yaak-mac-window/Cargo.toml
new file mode 100644
index 0000000..19a5655
--- /dev/null
+++ b/crates-tauri/yaak-mac-window/Cargo.toml
@@ -0,0 +1,22 @@
+[package]
+name = "yaak-mac-window"
+links = "yaak-mac-window"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[lints.rust]
+unexpected_cfgs = { level = "warn", check-cfg = ['cfg(feature, values("cargo-clippy"))'] }
+
+[build-dependencies]
+tauri-plugin = { workspace = true, features = ["build"] }
+
+[target.'cfg(target_os = "macos")'.dependencies]
+cocoa = "0.26.0"
+log = { workspace = true }
+objc = "0.2.7"
+rand = "0.9.0"
+csscolorparser = "0.7.2"
+
+[dependencies]
+tauri = { workspace = true }
diff --git a/crates-tauri/yaak-mac-window/build.rs b/crates-tauri/yaak-mac-window/build.rs
new file mode 100644
index 0000000..6107db0
--- /dev/null
+++ b/crates-tauri/yaak-mac-window/build.rs
@@ -0,0 +1,5 @@
+const COMMANDS: &[&str] = &["set_title", "set_theme"];
+
+fn main() {
+    tauri_plugin::Builder::new(COMMANDS).build();
+}
diff --git a/crates-tauri/yaak-mac-window/index.ts b/crates-tauri/yaak-mac-window/index.ts
new file mode 100644
index 0000000..7b16860
--- /dev/null
+++ b/crates-tauri/yaak-mac-window/index.ts
@@ -0,0 +1,9 @@
+import { platform } from "@yaakapp-internal/platform";
+
+export function setWindowTitle(title: string) {
+  platform.rpc("plugin:yaak-mac-window|set_title", { title }).catch(console.error);
+}
+
+export function setWindowTheme(bgColor: string) {
+  platform.rpc("plugin:yaak-mac-window|set_theme", { bgColor }).catch(console.error);
+}
diff --git a/crates-tauri/yaak-mac-window/package.json b/crates-tauri/yaak-mac-window/package.json
new file mode 100644
index 0000000..2c4cda0
--- /dev/null
+++ b/crates-tauri/yaak-mac-window/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/mac-window",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates-tauri/yaak-mac-window/permissions/default.toml b/crates-tauri/yaak-mac-window/permissions/default.toml
new file mode 100644
index 0000000..ea9b21c
--- /dev/null
+++ b/crates-tauri/yaak-mac-window/permissions/default.toml
@@ -0,0 +1,3 @@
+[default]
+description = "Default permissions for the plugin"
+permissions = ["allow-set-title", "allow-set-theme"]
diff --git a/crates-tauri/yaak-mac-window/src/commands.rs b/crates-tauri/yaak-mac-window/src/commands.rs
new file mode 100644
index 0000000..146d4b1
--- /dev/null
+++ b/crates-tauri/yaak-mac-window/src/commands.rs
@@ -0,0 +1,36 @@
+use tauri::{Runtime, Window, command};
+
+#[command]
+pub(crate) fn set_title<R: Runtime>(window: Window<R>, title: &str) {
+    #[cfg(target_os = "macos")]
+    {
+        crate::mac::update_window_title(window, title.to_string());
+    }
+
+    #[cfg(not(target_os = "macos"))]
+    {
+        let _ = window.set_title(title);
+    }
+}
+
+#[command]
+#[allow(unused)]
+pub(crate) fn set_theme<R: Runtime>(window: Window<R>, bg_color: &str) {
+    #[cfg(target_os = "macos")]
+    {
+        use log::warn;
+        match csscolorparser::parse(bg_color.trim()) {
+            Ok(color) => {
+                crate::mac::update_window_theme(window, color);
+            }
+            Err(err) => {
+                warn!("Failed to parse background color '{}': {}", bg_color, err)
+            }
+        }
+    }
+
+    #[cfg(not(target_os = "macos"))]
+    {
+        // Nothing yet for non-Mac platforms
+    }
+}
diff --git a/crates-tauri/yaak-mac-window/src/lib.rs b/crates-tauri/yaak-mac-window/src/lib.rs
new file mode 100644
index 0000000..6433582
--- /dev/null
+++ b/crates-tauri/yaak-mac-window/src/lib.rs
@@ -0,0 +1,44 @@
+mod commands;
+
+#[cfg(target_os = "macos")]
+mod mac;
+
+use crate::commands::{set_theme, set_title};
+use std::sync::atomic::AtomicBool;
+use tauri::{Manager, Runtime, generate_handler, plugin, plugin::TauriPlugin};
+
+pub trait AppHandleMacWindowExt {
+    /// Sets whether to use the native titlebar
+    fn set_native_titlebar(&self, enable: bool);
+}
+
+impl<R: Runtime> AppHandleMacWindowExt for tauri::AppHandle<R> {
+    fn set_native_titlebar(&self, enable: bool) {
+        self.state::<PluginState>()
+            .native_titlebar
+            .store(enable, std::sync::atomic::Ordering::Relaxed);
+    }
+}
+
+pub(crate) struct PluginState {
+    native_titlebar: AtomicBool,
+}
+
+pub fn init<R: Runtime>() -> TauriPlugin<R> {
+    #[allow(unused_mut)]
+    let mut builder = plugin::Builder::new("yaak-mac-window")
+        .setup(move |app, _| {
+            app.manage(PluginState { native_titlebar: AtomicBool::new(false) });
+            Ok(())
+        })
+        .invoke_handler(generate_handler![set_title, set_theme]);
+
+    #[cfg(target_os = "macos")]
+    {
+        builder = builder.on_window_ready(move |window| {
+            mac::setup_traffic_light_positioner(&window);
+        });
+    }
+
+    builder.build()
+}
diff --git a/crates-tauri/yaak-mac-window/src/mac.rs b/crates-tauri/yaak-mac-window/src/mac.rs
new file mode 100644
index 0000000..e45d0bd
--- /dev/null
+++ b/crates-tauri/yaak-mac-window/src/mac.rs
@@ -0,0 +1,429 @@
+#![allow(deprecated)]
+use crate::PluginState;
+use csscolorparser::Color;
+use objc::{msg_send, sel, sel_impl};
+use tauri::{Emitter, Manager, Runtime, State, Window};
+
+struct UnsafeWindowHandle(*mut std::ffi::c_void);
+
+unsafe impl Send for UnsafeWindowHandle {}
+
+unsafe impl Sync for UnsafeWindowHandle {}
+
+const WINDOW_CONTROL_PAD_X: f64 = 13.0;
+const WINDOW_CONTROL_PAD_Y: f64 = 18.0;
+/// Extra pixels to add to the title bar height when the default title bar is
+/// already as tall as button_height + PAD_Y (i.e. macOS Tahoe 26+, where the
+/// default is 32px and 14 + 18 = 32). On pre-Tahoe this is unused because the
+/// default title bar is shorter than button_height + PAD_Y.
+const TITLEBAR_EXTRA_HEIGHT: f64 = 4.0;
+const MAIN_WINDOW_PREFIX: &str = "main_";
+
+pub(crate) fn update_window_title<R: Runtime>(window: Window<R>, title: String) {
+    use cocoa::{appkit::NSWindow, base::nil, foundation::NSString};
+
+    let state: State<PluginState> = window.state();
+    let native_titlebar = state.native_titlebar.load(std::sync::atomic::Ordering::Relaxed);
+    unsafe {
+        let window_handle = UnsafeWindowHandle(window.ns_window().unwrap());
+
+        let window2 = window.clone();
+        let label = window.label().to_string();
+        let _ = window.run_on_main_thread(move || {
+            let win_title = NSString::alloc(nil).init_str(&title);
+            let handle = window_handle;
+            NSWindow::setTitle_(handle.0 as cocoa::base::id, win_title);
+            if !native_titlebar {
+                position_traffic_lights(
+                    UnsafeWindowHandle(
+                        window2.ns_window().expect("Failed to create window handle"),
+                    ),
+                    WINDOW_CONTROL_PAD_X,
+                    WINDOW_CONTROL_PAD_Y,
+                    label,
+                );
+            }
+        });
+    }
+}
+
+pub(crate) fn update_window_theme<R: Runtime>(window: Window<R>, color: Color) {
+    use cocoa::appkit::{
+        NSAppearance, NSAppearanceNameVibrantDark, NSAppearanceNameVibrantLight, NSWindow,
+    };
+
+    let brightness = (color.r as f64 + color.g as f64 + color.b as f64) / 3.0;
+    let label = window.label().to_string();
+    let state: State<PluginState> = window.state();
+    let native_titlebar = state.native_titlebar.load(std::sync::atomic::Ordering::Relaxed);
+
+    unsafe {
+        let window_handle = UnsafeWindowHandle(window.ns_window().unwrap());
+        let window2 = window.clone();
+        let _ = window.run_on_main_thread(move || {
+            let handle = window_handle;
+
+            let selected_appearance = if brightness >= 0.5 {
+                NSAppearance(NSAppearanceNameVibrantLight)
+            } else {
+                NSAppearance(NSAppearanceNameVibrantDark)
+            };
+
+            NSWindow::setAppearance(handle.0 as cocoa::base::id, selected_appearance);
+            if !native_titlebar {
+                position_traffic_lights(
+                    UnsafeWindowHandle(
+                        window2.ns_window().expect("Failed to create window handle"),
+                    ),
+                    WINDOW_CONTROL_PAD_X,
+                    WINDOW_CONTROL_PAD_Y,
+                    label,
+                );
+            }
+        });
+    }
+}
+
+fn position_traffic_lights(ns_window_handle: UnsafeWindowHandle, x: f64, y: f64, label: String) {
+    if !label.starts_with(MAIN_WINDOW_PREFIX) {
+        return;
+    }
+
+    use cocoa::appkit::{NSView, NSWindow, NSWindowButton};
+    use cocoa::foundation::NSRect;
+
+    let ns_window = ns_window_handle.0 as cocoa::base::id;
+    #[allow(unexpected_cfgs)]
+    unsafe {
+        let close = ns_window.standardWindowButton_(NSWindowButton::NSWindowCloseButton);
+        let miniaturize =
+            ns_window.standardWindowButton_(NSWindowButton::NSWindowMiniaturizeButton);
+        let zoom = ns_window.standardWindowButton_(NSWindowButton::NSWindowZoomButton);
+
+        let close_rect: NSRect = msg_send![close, frame];
+        let button_height = close_rect.size.height;
+
+        let title_bar_container_view = close.superview().superview();
+
+        // Capture the OS default title bar height on the first call, before
+        // we've modified it. This avoids the height growing on repeated calls.
+        use std::sync::OnceLock;
+        static DEFAULT_TITLEBAR_HEIGHT: OnceLock<f64> = OnceLock::new();
+        let default_height = *DEFAULT_TITLEBAR_HEIGHT
+            .get_or_init(|| NSView::frame(title_bar_container_view).size.height);
+
+        // On pre-Tahoe, button_height + y is larger than the default title bar
+        // height, so the resize works as before. On Tahoe (26+), the default is
+        // already 32px and button_height + y = 32, so nothing changes. In that
+        // case, add TITLEBAR_EXTRA_HEIGHT extra pixels to push the buttons down.
+        let desired = button_height + y;
+        let title_bar_frame_height =
+            if desired > default_height { desired } else { default_height + TITLEBAR_EXTRA_HEIGHT };
+
+        let mut title_bar_rect = NSView::frame(title_bar_container_view);
+        title_bar_rect.size.height = title_bar_frame_height;
+        title_bar_rect.origin.y = NSView::frame(ns_window).size.height - title_bar_frame_height;
+        let _: () = msg_send![title_bar_container_view, setFrame: title_bar_rect];
+
+        let window_buttons = vec![close, miniaturize, zoom];
+        let space_between = NSView::frame(miniaturize).origin.x - NSView::frame(close).origin.x;
+
+        for (i, button) in window_buttons.into_iter().enumerate() {
+            let mut rect: NSRect = NSView::frame(button);
+            rect.origin.x = x + (i as f64 * space_between);
+            button.setFrameOrigin(rect.origin);
+        }
+    }
+}
+
+#[derive(Debug)]
+struct WindowState<R: Runtime> {
+    window: Window<R>,
+}
+
+pub fn setup_traffic_light_positioner<R: Runtime>(window: &Window<R>) {
+    use cocoa::appkit::NSWindow;
+    use cocoa::base::{BOOL, id};
+    use cocoa::delegate;
+    use cocoa::foundation::NSUInteger;
+    use objc::runtime::{Object, Sel};
+    use rand::Rng;
+    use rand::distr::Alphanumeric;
+    use std::ffi::c_void;
+
+    let state: State<PluginState> = window.state();
+    if state.native_titlebar.load(std::sync::atomic::Ordering::Relaxed) {
+        return;
+    }
+
+    position_traffic_lights(
+        UnsafeWindowHandle(window.ns_window().expect("Failed to create window handle")),
+        WINDOW_CONTROL_PAD_X,
+        WINDOW_CONTROL_PAD_Y,
+        window.label().to_string(),
+    );
+
+    // Ensure they stay in place while resizing the window.
+    fn with_window_state<R: Runtime, F: FnOnce(&mut WindowState<R>) -> T, T>(
+        this: &Object,
+        func: F,
+    ) {
+        let ptr = unsafe {
+            let x: *mut c_void = *this.get_ivar("app_box");
+            &mut *(x as *mut WindowState<R>)
+        };
+        func(ptr);
+    }
+
+    #[allow(unexpected_cfgs)]
+    unsafe {
+        let ns_win =
+            window.ns_window().expect("NS Window should exist to mount traffic light delegate.")
+                as id;
+
+        let current_delegate: id = ns_win.delegate();
+
+        extern "C" fn on_window_should_close(this: &Object, _cmd: Sel, sender: id) -> BOOL {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                msg_send![super_del, windowShouldClose: sender]
+            }
+        }
+        extern "C" fn on_window_will_close(this: &Object, _cmd: Sel, notification: id) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowWillClose: notification];
+            }
+        }
+        extern "C" fn on_window_did_resize<R: Runtime>(this: &Object, _cmd: Sel, notification: id) {
+            unsafe {
+                with_window_state(&*this, |state: &mut WindowState<R>| {
+                    let id = state
+                        .window
+                        .ns_window()
+                        .expect("NS window should exist on state to handle resize")
+                        as id;
+
+                    position_traffic_lights(
+                        UnsafeWindowHandle(id as *mut c_void),
+                        WINDOW_CONTROL_PAD_X,
+                        WINDOW_CONTROL_PAD_Y,
+                        state.window.label().to_string(),
+                    );
+                });
+
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowDidResize: notification];
+            }
+        }
+        extern "C" fn on_window_did_move(this: &Object, _cmd: Sel, notification: id) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowDidMove: notification];
+            }
+        }
+        extern "C" fn on_window_did_change_backing_properties(
+            this: &Object,
+            _cmd: Sel,
+            notification: id,
+        ) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowDidChangeBackingProperties: notification];
+            }
+        }
+        extern "C" fn on_window_did_become_key(this: &Object, _cmd: Sel, notification: id) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowDidBecomeKey: notification];
+            }
+        }
+        extern "C" fn on_window_did_resign_key(this: &Object, _cmd: Sel, notification: id) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowDidResignKey: notification];
+            }
+        }
+        extern "C" fn on_dragging_entered(this: &Object, _cmd: Sel, notification: id) -> BOOL {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                msg_send![super_del, draggingEntered: notification]
+            }
+        }
+        extern "C" fn on_prepare_for_drag_operation(
+            this: &Object,
+            _cmd: Sel,
+            notification: id,
+        ) -> BOOL {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                msg_send![super_del, prepareForDragOperation: notification]
+            }
+        }
+        extern "C" fn on_perform_drag_operation(this: &Object, _cmd: Sel, sender: id) -> BOOL {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                msg_send![super_del, performDragOperation: sender]
+            }
+        }
+        extern "C" fn on_conclude_drag_operation(this: &Object, _cmd: Sel, notification: id) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, concludeDragOperation: notification];
+            }
+        }
+        extern "C" fn on_dragging_exited(this: &Object, _cmd: Sel, notification: id) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, draggingExited: notification];
+            }
+        }
+        extern "C" fn on_window_will_use_full_screen_presentation_options(
+            this: &Object,
+            _cmd: Sel,
+            window: id,
+            proposed_options: NSUInteger,
+        ) -> NSUInteger {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                msg_send![super_del, window: window willUseFullScreenPresentationOptions: proposed_options]
+            }
+        }
+        extern "C" fn on_window_did_enter_full_screen<R: Runtime>(
+            this: &Object,
+            _cmd: Sel,
+            notification: id,
+        ) {
+            unsafe {
+                with_window_state(&*this, |state: &mut WindowState<R>| {
+                    state.window.emit("did-enter-fullscreen", ()).expect("Failed to emit event");
+                });
+
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowDidEnterFullScreen: notification];
+            }
+        }
+        extern "C" fn on_window_will_enter_full_screen<R: Runtime>(
+            this: &Object,
+            _cmd: Sel,
+            notification: id,
+        ) {
+            unsafe {
+                with_window_state(&*this, |state: &mut WindowState<R>| {
+                    state.window.emit("will-enter-fullscreen", ()).expect("Failed to emit event");
+                });
+
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowWillEnterFullScreen: notification];
+            }
+        }
+        extern "C" fn on_window_did_exit_full_screen<R: Runtime>(
+            this: &Object,
+            _cmd: Sel,
+            notification: id,
+        ) {
+            unsafe {
+                with_window_state(&*this, |state: &mut WindowState<R>| {
+                    state.window.emit("did-exit-fullscreen", ()).expect("Failed to emit event");
+
+                    let id = state.window.ns_window().expect("Failed to emit event") as id;
+                    position_traffic_lights(
+                        UnsafeWindowHandle(id as *mut c_void),
+                        WINDOW_CONTROL_PAD_X,
+                        WINDOW_CONTROL_PAD_Y,
+                        state.window.label().to_string(),
+                    );
+                });
+
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowDidExitFullScreen: notification];
+            }
+        }
+        extern "C" fn on_window_will_exit_full_screen<R: Runtime>(
+            this: &Object,
+            _cmd: Sel,
+            notification: id,
+        ) {
+            unsafe {
+                with_window_state(&*this, |state: &mut WindowState<R>| {
+                    state.window.emit("will-exit-fullscreen", ()).expect("Failed to emit event");
+                });
+
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowWillExitFullScreen: notification];
+            }
+        }
+        extern "C" fn on_window_did_fail_to_enter_full_screen(
+            this: &Object,
+            _cmd: Sel,
+            window: id,
+        ) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, windowDidFailToEnterFullScreen: window];
+            }
+        }
+        extern "C" fn on_effective_appearance_did_change(
+            this: &Object,
+            _cmd: Sel,
+            notification: id,
+        ) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![super_del, effectiveAppearanceDidChange: notification];
+            }
+        }
+        extern "C" fn on_effective_appearance_did_changed_on_main_thread(
+            this: &Object,
+            _cmd: Sel,
+            notification: id,
+        ) {
+            unsafe {
+                let super_del: id = *this.get_ivar("super_delegate");
+                let _: () = msg_send![
+                    super_del,
+                    effectiveAppearanceDidChangedOnMainThread: notification
+                ];
+            }
+        }
+
+        // Are we de-allocing this properly? (I miss safe Rust :(  )
+        let window_label = window.label().to_string();
+
+        let app_state = WindowState { window: window.clone() };
+        let app_box = Box::into_raw(Box::new(app_state)) as *mut c_void;
+        let random_str: String =
+            rand::rng().sample_iter(&Alphanumeric).take(20).map(char::from).collect();
+
+        // We need to ensure we have a unique delegate name, otherwise we will panic while trying to create a duplicate
+        // delegate with the same name.
+        let delegate_name = format!("windowDelegate_{}_{}", window_label, random_str);
+
+        ns_win.setDelegate_(delegate!(&delegate_name, {
+            window: id = ns_win,
+            app_box: *mut c_void = app_box,
+            toolbar: id = cocoa::base::nil,
+            super_delegate: id = current_delegate,
+            (windowShouldClose:) => on_window_should_close as extern "C" fn(&Object, Sel, id) -> BOOL,
+            (windowWillClose:) => on_window_will_close as extern "C" fn(&Object, Sel, id),
+            (windowDidResize:) => on_window_did_resize::<R> as extern "C" fn(&Object, Sel, id),
+            (windowDidMove:) => on_window_did_move as extern "C" fn(&Object, Sel, id),
+            (windowDidChangeBackingProperties:) => on_window_did_change_backing_properties as extern "C" fn(&Object, Sel, id),
+            (windowDidBecomeKey:) => on_window_did_become_key as extern "C" fn(&Object, Sel, id),
+            (windowDidResignKey:) => on_window_did_resign_key as extern "C" fn(&Object, Sel, id),
+            (draggingEntered:) => on_dragging_entered as extern "C" fn(&Object, Sel, id) -> BOOL,
+            (prepareForDragOperation:) => on_prepare_for_drag_operation as extern "C" fn(&Object, Sel, id) -> BOOL,
+            (performDragOperation:) => on_perform_drag_operation as extern "C" fn(&Object, Sel, id) -> BOOL,
+            (concludeDragOperation:) => on_conclude_drag_operation as extern "C" fn(&Object, Sel, id),
+            (draggingExited:) => on_dragging_exited as extern "C" fn(&Object, Sel, id),
+            (window:willUseFullScreenPresentationOptions:) => on_window_will_use_full_screen_presentation_options as extern "C" fn(&Object, Sel, id, NSUInteger) -> NSUInteger,
+            (windowDidEnterFullScreen:) => on_window_did_enter_full_screen::<R> as extern "C" fn(&Object, Sel, id),
+            (windowWillEnterFullScreen:) => on_window_will_enter_full_screen::<R> as extern "C" fn(&Object, Sel, id),
+            (windowDidExitFullScreen:) => on_window_did_exit_full_screen::<R> as extern "C" fn(&Object, Sel, id),
+            (windowWillExitFullScreen:) => on_window_will_exit_full_screen::<R> as extern "C" fn(&Object, Sel, id),
+            (windowDidFailToEnterFullScreen:) => on_window_did_fail_to_enter_full_screen as extern "C" fn(&Object, Sel, id),
+            (effectiveAppearanceDidChange:) => on_effective_appearance_did_change as extern "C" fn(&Object, Sel, id),
+            (effectiveAppearanceDidChangedOnMainThread:) => on_effective_appearance_did_changed_on_main_thread as extern "C" fn(&Object, Sel, id)
+        }))
+    }
+}
diff --git a/crates-tauri/yaak-system-appearance/Cargo.toml b/crates-tauri/yaak-system-appearance/Cargo.toml
new file mode 100644
index 0000000..9bc646c
--- /dev/null
+++ b/crates-tauri/yaak-system-appearance/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "yaak-system-appearance"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[target.'cfg(target_os = "linux")'.dependencies]
+dark-light = "2.0.0"
+
+[target.'cfg(target_os = "macos")'.dependencies]
+dispatch2 = "0.3.0"
+objc2-app-kit = { version = "0.3.1", features = ["NSAppearance", "NSApplication", "NSResponder"] }
+objc2-foundation = { version = "0.3.1", features = ["NSArray", "NSString", "NSUserDefaults"] }
+
+[dependencies]
+log = { workspace = true }
+tauri = { workspace = true }
diff --git a/crates-tauri/yaak-system-appearance/src/lib.rs b/crates-tauri/yaak-system-appearance/src/lib.rs
new file mode 100644
index 0000000..7aa094a
--- /dev/null
+++ b/crates-tauri/yaak-system-appearance/src/lib.rs
@@ -0,0 +1,208 @@
+use std::sync::{Arc, Mutex};
+#[cfg(target_os = "linux")]
+use std::time::Duration;
+
+#[cfg(any(target_os = "linux", target_os = "macos"))]
+use log::{debug, warn};
+#[cfg(any(target_os = "linux", target_os = "macos"))]
+use tauri::Emitter;
+use tauri::{AppHandle, Runtime};
+
+pub const INITIAL_APPEARANCE_GLOBAL: &str = "__YAAK_INITIAL_APPEARANCE__";
+pub const SYSTEM_APPEARANCE_CHANGE_EVENT: &str = "system_appearance_change";
+
+#[cfg(target_os = "linux")]
+const SYSTEM_APPEARANCE_POLL_INTERVAL: Duration = Duration::from_secs(1);
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+pub enum Appearance {
+    Dark,
+    Light,
+}
+
+impl Appearance {
+    pub fn as_str(self) -> &'static str {
+        match self {
+            Self::Dark => "dark",
+            Self::Light => "light",
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct SystemAppearanceState {
+    last_appearance: Arc<Mutex<Option<Appearance>>>,
+}
+
+impl SystemAppearanceState {
+    pub fn last_appearance(&self) -> Option<Appearance> {
+        *self.last_appearance.lock().expect("system appearance lock poisoned")
+    }
+}
+
+pub fn initialization_script(appearance: Appearance) -> String {
+    let appearance = appearance.as_str();
+    format!("window.{INITIAL_APPEARANCE_GLOBAL} = {appearance:?};")
+}
+
+/// Detect the appearance the OS prefers, independent of any appearance that has
+/// been forced onto app windows (which is what the webview itself reports).
+#[cfg(target_os = "linux")]
+pub fn system_appearance() -> Option<Appearance> {
+    if let Some(appearance) = gsettings_system_appearance() {
+        return Some(appearance);
+    }
+
+    match dark_light::detect() {
+        Ok(dark_light::Mode::Dark) => Some(Appearance::Dark),
+        Ok(dark_light::Mode::Light) => Some(Appearance::Light),
+        Ok(dark_light::Mode::Unspecified) => None,
+        Err(err) => {
+            debug!("Failed to detect system appearance: {err:?}");
+            None
+        }
+    }
+}
+
+/// Detect the appearance the OS prefers, independent of any appearance that has
+/// been forced onto app windows (which is what the webview itself reports).
+///
+/// This asks AppKit for the application's effective appearance, the same source tauri
+/// uses for `window.theme()`, instead of reading `AppleInterfaceStyle` from the user
+/// defaults: macOS 27 no longer reliably writes that key when dark mode is on, so anything
+/// reading it sees light mode. Appearances forced per window (yaak-mac-window) don't reach
+/// `NSApp`, so this is the OS preference.
+#[cfg(target_os = "macos")]
+pub fn system_appearance() -> Option<Appearance> {
+    use objc2_app_kit::{NSAppearanceNameAqua, NSAppearanceNameDarkAqua, NSApplication};
+    use objc2_foundation::NSArray;
+
+    // AppKit is main-thread only. Every caller runs there today; this keeps it correct if
+    // one ever doesn't.
+    dispatch2::run_on_main(|mtm| {
+        let app = NSApplication::sharedApplication(mtm);
+
+        // An appearance forced on the whole app (tauri's `set_theme` does this) would make
+        // the effective appearance report the override instead of the OS preference. Nothing
+        // in Yaak does that, but fall back to the user defaults if something ever does.
+        //
+        // SAFETY: Called on the main thread with the shared application
+        if unsafe { app.appearance() }.is_some() {
+            return defaults_appearance();
+        }
+
+        // SAFETY: The appearance names are AppKit constants that live for the whole process
+        let (dark, light) = unsafe { (NSAppearanceNameDarkAqua, NSAppearanceNameAqua) };
+        let names = NSArray::from_slice(&[dark, light]);
+        let best = app.effectiveAppearance().bestMatchFromAppearancesWithNames(&names)?;
+
+        // SAFETY: Both are valid strings
+        let is_dark = unsafe { best.isEqualToString(dark) };
+        Some(if is_dark { Appearance::Dark } else { Appearance::Light })
+    })
+}
+
+/// The appearance macOS persists to the global user defaults. Absent means light, except
+/// on macOS 27, which stopped reliably writing the key. Only used when the effective
+/// appearance is forced and can't be trusted.
+#[cfg(target_os = "macos")]
+fn defaults_appearance() -> Option<Appearance> {
+    use objc2_foundation::{NSUserDefaults, ns_string};
+
+    // SAFETY: The standard defaults are a process-wide singleton and the key is a valid string
+    let style = unsafe {
+        NSUserDefaults::standardUserDefaults().stringForKey(ns_string!("AppleInterfaceStyle"))
+    };
+
+    // SAFETY: Both are valid strings
+    let is_dark = style.is_some_and(|style| unsafe { style.isEqualToString(ns_string!("Dark")) });
+    Some(if is_dark { Appearance::Dark } else { Appearance::Light })
+}
+
+#[cfg(not(any(target_os = "linux", target_os = "macos")))]
+pub fn system_appearance() -> Option<Appearance> {
+    None
+}
+
+/// Start tracking the OS appearance. Linux polls for changes. macOS gets them from tauri's
+/// `WindowEvent::ThemeChanged` (tao observes `AppleInterfaceThemeChangedNotification`), which
+/// the app forwards to [`emit_change`], so no thread is needed there.
+#[cfg(any(target_os = "linux", target_os = "macos"))]
+pub fn watch<R: Runtime>(app_handle: AppHandle<R>) -> Option<SystemAppearanceState> {
+    let last_appearance = system_appearance();
+    if last_appearance.is_none() {
+        debug!("System appearance detection unavailable");
+        return None;
+    }
+
+    let state = SystemAppearanceState { last_appearance: Arc::new(Mutex::new(last_appearance)) };
+
+    #[cfg(target_os = "linux")]
+    {
+        let thread_state = state.clone();
+        let _ = std::thread::spawn(move || {
+            loop {
+                std::thread::sleep(SYSTEM_APPEARANCE_POLL_INTERVAL);
+                emit_change(&app_handle, &thread_state);
+            }
+        });
+    }
+    #[cfg(target_os = "macos")]
+    let _ = app_handle;
+
+    Some(state)
+}
+
+#[cfg(not(any(target_os = "linux", target_os = "macos")))]
+pub fn watch<R: Runtime>(_app_handle: AppHandle<R>) -> Option<SystemAppearanceState> {
+    None
+}
+
+#[cfg(any(target_os = "linux", target_os = "macos"))]
+pub fn emit_change<R: Runtime>(app_handle: &AppHandle<R>, state: &SystemAppearanceState) {
+    let appearance = system_appearance();
+    let mut last_appearance =
+        state.last_appearance.lock().expect("system appearance lock poisoned");
+    if appearance == *last_appearance {
+        return;
+    }
+
+    *last_appearance = appearance;
+    if let Some(appearance) = appearance {
+        let appearance = appearance.as_str();
+        debug!("System appearance changed to {appearance}");
+        if let Err(err) = app_handle.emit(SYSTEM_APPEARANCE_CHANGE_EVENT, appearance) {
+            warn!("Failed to emit system appearance change: {err:?}");
+        }
+    }
+}
+
+#[cfg(target_os = "linux")]
+fn gsettings_system_appearance() -> Option<Appearance> {
+    let color_scheme = std::process::Command::new("gsettings")
+        .args(["get", "org.gnome.desktop.interface", "color-scheme"])
+        .output()
+        .ok()
+        .and_then(|output| String::from_utf8(output.stdout).ok())
+        .unwrap_or_default();
+
+    if color_scheme.contains("prefer-dark") {
+        return Some(Appearance::Dark);
+    }
+    if color_scheme.contains("prefer-light") {
+        return Some(Appearance::Light);
+    }
+
+    let gtk_theme = std::process::Command::new("gsettings")
+        .args(["get", "org.gnome.desktop.interface", "gtk-theme"])
+        .output()
+        .ok()
+        .and_then(|output| String::from_utf8(output.stdout).ok())
+        .unwrap_or_default();
+
+    if gtk_theme.to_lowercase().contains("dark") {
+        return Some(Appearance::Dark);
+    }
+
+    (!gtk_theme.trim().is_empty()).then_some(Appearance::Light)
+}
diff --git a/crates-tauri/yaak-tauri-utils/Cargo.toml b/crates-tauri/yaak-tauri-utils/Cargo.toml
new file mode 100644
index 0000000..668945b
--- /dev/null
+++ b/crates-tauri/yaak-tauri-utils/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "yaak-tauri-utils"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+tauri = { workspace = true }
+regex = "1.11.0"
+yaak-core = { workspace = true }
diff --git a/crates-tauri/yaak-tauri-utils/src/lib.rs b/crates-tauri/yaak-tauri-utils/src/lib.rs
new file mode 100644
index 0000000..61b63f1
--- /dev/null
+++ b/crates-tauri/yaak-tauri-utils/src/lib.rs
@@ -0,0 +1 @@
+pub mod window;
diff --git a/crates-tauri/yaak-tauri-utils/src/window.rs b/crates-tauri/yaak-tauri-utils/src/window.rs
new file mode 100644
index 0000000..4237b95
--- /dev/null
+++ b/crates-tauri/yaak-tauri-utils/src/window.rs
@@ -0,0 +1,53 @@
+use regex::Regex;
+use tauri::{Runtime, Url, WebviewWindow};
+use yaak_core::WorkspaceContext;
+
+pub trait WorkspaceWindowTrait {
+    fn workspace_id(&self) -> Option<String>;
+    fn cookie_jar_id(&self) -> Option<String>;
+    fn environment_id(&self) -> Option<String>;
+    fn request_id(&self) -> Option<String>;
+    /// All four at once, from a single read of the window URL.
+    fn workspace_context(&self) -> WorkspaceContext;
+}
+
+impl<R: Runtime> WorkspaceWindowTrait for WebviewWindow<R> {
+    fn workspace_id(&self) -> Option<String> {
+        workspace_id_from_url(&self.url().unwrap())
+    }
+
+    fn cookie_jar_id(&self) -> Option<String> {
+        query_param(&self.url().unwrap(), "cookie_jar_id")
+    }
+
+    fn environment_id(&self) -> Option<String> {
+        query_param(&self.url().unwrap(), "environment_id")
+    }
+
+    fn request_id(&self) -> Option<String> {
+        query_param(&self.url().unwrap(), "request_id")
+    }
+
+    fn workspace_context(&self) -> WorkspaceContext {
+        let url = self.url().unwrap();
+        WorkspaceContext {
+            workspace_id: workspace_id_from_url(&url),
+            environment_id: query_param(&url, "environment_id"),
+            cookie_jar_id: query_param(&url, "cookie_jar_id"),
+            request_id: query_param(&url, "request_id"),
+        }
+    }
+}
+
+fn workspace_id_from_url(url: &Url) -> Option<String> {
+    let re = Regex::new(r"/workspaces/(?<id>\w+)").unwrap();
+    match re.captures(url.as_str()) {
+        None => None,
+        Some(captures) => captures.name("id").map(|c| c.as_str().to_string()),
+    }
+}
+
+fn query_param(url: &Url, key: &str) -> Option<String> {
+    let mut query_pairs = url.query_pairs();
+    query_pairs.find(|(k, _v)| k == key).map(|(_k, v)| v.to_string())
+}
diff --git a/crates-tauri/yaak-window/Cargo.toml b/crates-tauri/yaak-window/Cargo.toml
new file mode 100644
index 0000000..36cd25c
--- /dev/null
+++ b/crates-tauri/yaak-window/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "yaak-window"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+log = { workspace = true }
+md5 = "0.8.0"
+rand = "0.9.0"
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+tauri = { workspace = true }
+tokio = { workspace = true, features = ["sync"] }
diff --git a/crates-tauri/yaak-window/src/lib.rs b/crates-tauri/yaak-window/src/lib.rs
new file mode 100644
index 0000000..9dd9682
--- /dev/null
+++ b/crates-tauri/yaak-window/src/lib.rs
@@ -0,0 +1,3 @@
+mod window_state;
+
+pub mod window;
diff --git a/crates-tauri/yaak-window/src/window.rs b/crates-tauri/yaak-window/src/window.rs
new file mode 100644
index 0000000..d61c5b1
--- /dev/null
+++ b/crates-tauri/yaak-window/src/window.rs
@@ -0,0 +1,259 @@
+use crate::window_state;
+use log::info;
+use rand::random;
+use tauri::{AppHandle, Manager, Runtime, WebviewUrl, WebviewWindow, WindowEvent};
+use tokio::sync::mpsc;
+
+const DEFAULT_WINDOW_WIDTH: f64 = 1100.0;
+const DEFAULT_WINDOW_HEIGHT: f64 = 600.0;
+
+const MIN_WINDOW_WIDTH: f64 = 300.0;
+const MIN_WINDOW_HEIGHT: f64 = 300.0;
+
+pub const MAIN_WINDOW_PREFIX: &str = "main_";
+const OTHER_WINDOW_PREFIX: &str = "other_";
+const MAIN_WINDOW_STATE_KEY: &str = "main";
+
+#[derive(Default, Debug)]
+pub struct CreateWindowConfig<'s> {
+    pub url: &'s str,
+    pub label: &'s str,
+    pub title: &'s str,
+    pub state_key: Option<String>,
+    pub inner_size: Option<(f64, f64)>,
+    pub position: Option<(f64, f64)>,
+    pub restore_position: Option<bool>,
+    pub navigation_tx: Option<mpsc::Sender<String>>,
+    pub close_tx: Option<mpsc::Sender<()>>,
+    pub data_dir_key: Option<String>,
+    pub initialization_script: Option<String>,
+    pub hidden: bool,
+    pub hide_titlebar: bool,
+    pub use_native_titlebar: bool,
+}
+
+pub fn create_window<R: Runtime>(
+    handle: &AppHandle<R>,
+    config: CreateWindowConfig,
+) -> tauri::Result<WebviewWindow<R>> {
+    info!("Create new window label={}", config.label);
+    let state_key = config.state_key.clone().unwrap_or_else(|| config.label.to_string());
+    let restore_position = config.restore_position.unwrap_or(true);
+    let mut inner_size = config.inner_size;
+    let mut position = config.position;
+    let mut maximized = false;
+    window_state::apply_saved_state(
+        handle,
+        &state_key,
+        &mut inner_size,
+        &mut position,
+        &mut maximized,
+        restore_position,
+    );
+
+    let mut win_builder =
+        tauri::WebviewWindowBuilder::new(handle, config.label, WebviewUrl::App(config.url.into()))
+            .title(config.title)
+            .resizable(true)
+            .visible(!config.hidden)
+            .fullscreen(false)
+            .maximized(maximized)
+            .min_inner_size(MIN_WINDOW_WIDTH, MIN_WINDOW_HEIGHT);
+
+    if let Some(script) = config.initialization_script {
+        win_builder = win_builder.initialization_script(script);
+    }
+
+    if let Some(key) = config.data_dir_key {
+        #[cfg(not(target_os = "macos"))]
+        {
+            use std::fs;
+            let safe_key = format!("{:x}", md5::compute(key.as_bytes()));
+            let dir = handle.path().app_data_dir()?.join("window-sessions").join(safe_key);
+            fs::create_dir_all(&dir)?;
+            win_builder = win_builder.data_directory(dir);
+        }
+
+        // macOS doesn't support `data_directory()` so must use this fn instead
+        #[cfg(target_os = "macos")]
+        {
+            let hash = md5::compute(key.as_bytes());
+            let mut id = [0u8; 16];
+            id.copy_from_slice(&hash[..16]); // Take the first 16 bytes of the hash
+            win_builder = win_builder.data_store_identifier(id);
+        }
+    }
+
+    if let Some((w, h)) = inner_size {
+        win_builder = win_builder.inner_size(w, h);
+    } else {
+        win_builder = win_builder.inner_size(600.0, 600.0);
+    }
+
+    if let Some((x, y)) = position {
+        win_builder = win_builder.position(x, y);
+    } else {
+        win_builder = win_builder.center();
+    }
+
+    if let Some(tx) = config.navigation_tx {
+        win_builder = win_builder.on_navigation(move |url| {
+            let url = url.to_string();
+            let tx = tx.clone();
+            tauri::async_runtime::block_on(async move {
+                tx.send(url).await.unwrap();
+            });
+            true
+        });
+    }
+
+    if config.hide_titlebar && !config.use_native_titlebar {
+        #[cfg(target_os = "macos")]
+        {
+            use tauri::TitleBarStyle;
+            win_builder = win_builder.hidden_title(true).title_bar_style(TitleBarStyle::Overlay);
+        }
+        #[cfg(not(target_os = "macos"))]
+        {
+            win_builder = win_builder.decorations(false);
+        }
+    }
+
+    if let Some(w) = handle.webview_windows().get(config.label) {
+        info!("Webview with label {} already exists. Focusing existing", config.label);
+        w.set_focus()?;
+        return Ok(w.to_owned());
+    }
+
+    let win = win_builder.build()?;
+    window_state::track_window(&win, &state_key);
+
+    if let Some(tx) = config.close_tx {
+        win.on_window_event(move |event| match event {
+            WindowEvent::CloseRequested { .. } => {
+                let tx = tx.clone();
+                tauri::async_runtime::spawn(async move {
+                    tx.send(()).await.unwrap();
+                });
+            }
+            _ => {}
+        });
+    }
+
+    Ok(win)
+}
+
+pub fn create_main_window<R: Runtime>(
+    handle: &AppHandle<R>,
+    url: &str,
+    initialization_script: Option<String>,
+    use_native_titlebar: bool,
+) -> tauri::Result<WebviewWindow<R>> {
+    let mut counter = 0;
+    let label = loop {
+        let label = format!("{MAIN_WINDOW_PREFIX}{counter}");
+        match handle.webview_windows().get(label.as_str()) {
+            None => break Some(label),
+            Some(_) => counter += 1,
+        }
+    }
+    .expect("Failed to generate label for new window");
+
+    let config = CreateWindowConfig {
+        url,
+        label: label.as_str(),
+        title: "Yaak",
+        state_key: Some(MAIN_WINDOW_STATE_KEY.to_string()),
+        inner_size: Some((DEFAULT_WINDOW_WIDTH, DEFAULT_WINDOW_HEIGHT)),
+        position: Some((
+            // Offset by random amount so it's easier to differentiate
+            100.0 + random::<f64>() * 20.0,
+            100.0 + random::<f64>() * 20.0,
+        )),
+        restore_position: Some(counter == 0),
+        initialization_script,
+        hidden: true,
+        hide_titlebar: true,
+        use_native_titlebar,
+        ..Default::default()
+    };
+
+    create_window(handle, config)
+}
+
+pub fn create_child_window<R: Runtime>(
+    parent_window: &WebviewWindow<R>,
+    url: &str,
+    label: &str,
+    title: &str,
+    inner_size: (f64, f64),
+    initialization_script: Option<String>,
+    use_native_titlebar: bool,
+) -> tauri::Result<WebviewWindow<R>> {
+    let app_handle = parent_window.app_handle();
+    let state_key = label.to_string();
+    let label = format!("{OTHER_WINDOW_PREFIX}_{label}");
+    let scale_factor = parent_window.scale_factor()?;
+
+    let current_pos = parent_window.inner_position()?.to_logical::<f64>(scale_factor);
+    let current_size = parent_window.inner_size()?.to_logical::<f64>(scale_factor);
+
+    // Position the new window in the middle of the parent
+    let position = (
+        current_pos.x + current_size.width / 2.0 - inner_size.0 / 2.0,
+        current_pos.y + current_size.height / 2.0 - inner_size.1 / 2.0,
+    );
+
+    let config = CreateWindowConfig {
+        label: label.as_str(),
+        title,
+        state_key: Some(state_key),
+        url,
+        inner_size: Some(inner_size),
+        position: Some(position),
+        initialization_script,
+        hidden: true,
+        hide_titlebar: true,
+        use_native_titlebar,
+        ..Default::default()
+    };
+
+    let child_window = create_window(&app_handle, config)?;
+
+    // NOTE: These listeners will remain active even when the windows close. Unfortunately,
+    //   there's no way to unlisten to events for now, so we just have to be defensive.
+
+    {
+        let parent_window = parent_window.clone();
+        let child_window = child_window.clone();
+        child_window.clone().on_window_event(move |e| match e {
+            // When the new window is destroyed, bring the other up behind it
+            WindowEvent::Destroyed => {
+                if let Some(w) = parent_window.get_webview_window(child_window.label()) {
+                    w.set_focus().unwrap();
+                }
+            }
+            _ => {}
+        });
+    }
+
+    {
+        let parent_window = parent_window.clone();
+        let child_window = child_window.clone();
+        parent_window.clone().on_window_event(move |e| match e {
+            // When the parent window is closed, close the child
+            WindowEvent::CloseRequested { .. } => child_window.close().unwrap(),
+            // When the parent window is focused, bring the child above
+            WindowEvent::Focused(focus) => {
+                if *focus {
+                    if let Some(w) = parent_window.get_webview_window(child_window.label()) {
+                        w.set_focus().unwrap();
+                    };
+                }
+            }
+            _ => {}
+        });
+    }
+
+    Ok(child_window)
+}
diff --git a/crates-tauri/yaak-window/src/window_state.rs b/crates-tauri/yaak-window/src/window_state.rs
new file mode 100644
index 0000000..682a9d5
--- /dev/null
+++ b/crates-tauri/yaak-window/src/window_state.rs
@@ -0,0 +1,218 @@
+use log::{debug, warn};
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::fs;
+use std::path::PathBuf;
+use std::sync::atomic::{AtomicU64, Ordering};
+use std::sync::{Arc, Mutex};
+use std::time::Duration;
+use tauri::{AppHandle, Manager, Monitor, Runtime, WebviewWindow, WindowEvent};
+
+const WINDOW_STATE_FILE: &str = "window-state.json";
+const SAVE_DEBOUNCE: Duration = Duration::from_millis(1000);
+static WINDOW_STATE_FILE_LOCK: Mutex<()> = Mutex::new(());
+
+#[derive(Debug, Clone, Copy, Default, Deserialize, Serialize)]
+struct WindowState {
+    width: f64,
+    height: f64,
+    x: f64,
+    y: f64,
+    maximized: bool,
+}
+
+impl WindowState {
+    fn has_size(self) -> bool {
+        self.width > 0.0 && self.height > 0.0
+    }
+
+    fn has_position(self) -> bool {
+        self.x.is_finite() && self.y.is_finite()
+    }
+}
+
+pub fn apply_saved_state<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    state_key: &str,
+    inner_size: &mut Option<(f64, f64)>,
+    position: &mut Option<(f64, f64)>,
+    maximized: &mut bool,
+    restore_position: bool,
+) {
+    let Some(state) = read_window_state(app_handle, state_key) else {
+        debug!("No saved window state for {state_key}");
+        return;
+    };
+
+    debug!(
+        "Applying saved window state for {state_key}: width={} height={} x={} y={} maximized={} restore_position={restore_position}",
+        state.width, state.height, state.x, state.y, state.maximized
+    );
+
+    if state.has_size() {
+        *inner_size = Some((state.width, state.height));
+    }
+
+    if restore_position && state.has_position() {
+        if is_position_visible(app_handle, state) {
+            *position = Some((state.x, state.y));
+        } else {
+            debug!("Ignoring saved window position for {state_key} because it is off-screen");
+        }
+    }
+
+    *maximized = state.maximized;
+}
+
+pub fn track_window<R: Runtime>(window: &WebviewWindow<R>, state_key: &str) {
+    let state_key = state_key.to_string();
+    let save_generation = Arc::new(AtomicU64::new(0));
+    let tracked_window = window.clone();
+
+    window.clone().on_window_event(move |event| match event {
+        WindowEvent::Moved(_) | WindowEvent::Resized(_) => {
+            schedule_save(tracked_window.clone(), state_key.clone(), save_generation.clone());
+        }
+        WindowEvent::CloseRequested { .. } => {
+            save_generation.fetch_add(1, Ordering::Relaxed);
+            if let Err(e) = save_window_state(&tracked_window, &state_key) {
+                warn!("Failed to save window state for {state_key}: {e}");
+            }
+        }
+        _ => {}
+    });
+}
+
+fn schedule_save<R: Runtime>(
+    window: WebviewWindow<R>,
+    state_key: String,
+    save_generation: Arc<AtomicU64>,
+) {
+    let generation = save_generation.fetch_add(1, Ordering::Relaxed) + 1;
+    let window_for_dispatch = window.clone();
+
+    std::thread::spawn(move || {
+        std::thread::sleep(SAVE_DEBOUNCE);
+
+        if save_generation.load(Ordering::Relaxed) != generation {
+            return;
+        }
+
+        let state_key_for_save = state_key.clone();
+        let window_for_save = window.clone();
+        if let Err(e) = window_for_dispatch.run_on_main_thread(move || {
+            if let Err(e) = save_window_state(&window_for_save, &state_key_for_save) {
+                warn!("Failed to save window state for {state_key_for_save}: {e}");
+            }
+        }) {
+            debug!("Failed to dispatch debounced window state save for {state_key}: {e}");
+        }
+    });
+}
+
+fn save_window_state<R: Runtime>(window: &WebviewWindow<R>, state_key: &str) -> tauri::Result<()> {
+    let app_handle = window.app_handle();
+    let state_path = window_state_path(&app_handle)?;
+    let _lock = WINDOW_STATE_FILE_LOCK.lock().unwrap();
+    let mut states = read_window_states(&state_path);
+    let mut state = states.get(state_key).copied().unwrap_or_default();
+
+    let maximized = window.is_maximized().unwrap_or(false);
+    let minimized = window.is_minimized().unwrap_or(false);
+    let scale_factor = window.scale_factor().unwrap_or(1.0);
+
+    if !minimized && (!maximized || !state.has_size()) {
+        let size = window.inner_size()?.to_logical::<f64>(scale_factor);
+        if size.width > 0.0 && size.height > 0.0 {
+            state.width = size.width;
+            state.height = size.height;
+        }
+    }
+
+    if !minimized && (!maximized || !state.has_position()) {
+        let position = window.outer_position()?.to_logical::<f64>(scale_factor);
+        state.x = position.x;
+        state.y = position.y;
+    }
+
+    state.maximized = maximized;
+    states.insert(state_key.to_string(), state);
+    write_window_states(&state_path, &states)?;
+    debug!(
+        "Saved window state for {state_key} to {}: width={} height={} x={} y={} maximized={} minimized={minimized}",
+        state_path.display(),
+        state.width,
+        state.height,
+        state.x,
+        state.y,
+        state.maximized
+    );
+    Ok(())
+}
+
+fn read_window_state<R: Runtime>(
+    app_handle: &AppHandle<R>,
+    state_key: &str,
+) -> Option<WindowState> {
+    let state_path = window_state_path(app_handle).ok()?;
+    debug!("Reading window state for {state_key} from {}", state_path.display());
+    read_window_states(&state_path).get(state_key).copied()
+}
+
+fn window_state_path<R: Runtime>(app_handle: &AppHandle<R>) -> tauri::Result<PathBuf> {
+    Ok(app_handle.path().app_config_dir()?.join(WINDOW_STATE_FILE))
+}
+
+fn read_window_states(state_path: &PathBuf) -> HashMap<String, WindowState> {
+    let Ok(bytes) = fs::read(state_path) else {
+        return HashMap::new();
+    };
+
+    match serde_json::from_slice(&bytes) {
+        Ok(states) => states,
+        Err(e) => {
+            warn!("Failed to read window state {}: {e}", state_path.display());
+            HashMap::new()
+        }
+    }
+}
+
+fn write_window_states(
+    state_path: &PathBuf,
+    states: &HashMap<String, WindowState>,
+) -> tauri::Result<()> {
+    if let Some(parent) = state_path.parent() {
+        fs::create_dir_all(parent)?;
+    }
+
+    fs::write(state_path, serde_json::to_vec_pretty(states)?)?;
+    Ok(())
+}
+
+fn is_position_visible<R: Runtime>(app_handle: &AppHandle<R>, state: WindowState) -> bool {
+    let Ok(monitors) = app_handle.available_monitors() else {
+        return true;
+    };
+
+    monitors.into_iter().any(|monitor| monitor_intersects_window(&monitor, state))
+}
+
+fn monitor_intersects_window(monitor: &Monitor, state: WindowState) -> bool {
+    let scale_factor = monitor.scale_factor();
+    let position = monitor.position().to_logical::<f64>(scale_factor);
+    let size = monitor.size().to_logical::<f64>(scale_factor);
+
+    let left = position.x;
+    let right = position.x + size.width;
+    let top = position.y;
+    let bottom = position.y + size.height;
+
+    [
+        (state.x, state.y),
+        (state.x + state.width, state.y),
+        (state.x, state.y + state.height),
+        (state.x + state.width, state.y + state.height),
+    ]
+    .into_iter()
+    .any(|(x, y)| x >= left && x < right && y >= top && y < bottom)
+}
diff --git a/crates/common/yaak-database/Cargo.toml b/crates/common/yaak-database/Cargo.toml
new file mode 100644
index 0000000..9ccd433
--- /dev/null
+++ b/crates/common/yaak-database/Cargo.toml
@@ -0,0 +1,28 @@
+[package]
+name = "yaak-database"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+chrono = { version = "0.4.38", features = ["serde"] }
+include_dir = "0.7"
+log = { workspace = true }
+nanoid = "0.4.0"
+rusqlite = { version = "0.38", features = ["bundled", "chrono"] }
+sea-query-rusqlite = { version = "0.8.0", features = ["with-chrono"] }
+sea-query = { version = "1.0", features = ["with-chrono", "attr"] }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+thiserror = { workspace = true }
+ts-rs = { workspace = true }
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+r2d2 = "0.8.10"
+r2d2_sqlite = { version = "0.32" }
+
+# nanoid pulls getrandom, which needs to be told how to reach the browser's
+# CSPRNG on wasm32-unknown-unknown. Native targets are unaffected.
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+getrandom = { version = "0.2", features = ["js"] }
+uuid = { version = "1", features = ["js"] }
diff --git a/crates/common/yaak-database/src/connection_or_tx.rs b/crates/common/yaak-database/src/connection_or_tx.rs
new file mode 100644
index 0000000..4f37f36
--- /dev/null
+++ b/crates/common/yaak-database/src/connection_or_tx.rs
@@ -0,0 +1,24 @@
+use crate::pool::SqliteConn;
+use rusqlite::{Connection, Statement, ToSql, Transaction};
+
+pub enum ConnectionOrTx<'a> {
+    Connection(SqliteConn),
+    Transaction(&'a Transaction<'a>),
+}
+
+impl<'a> ConnectionOrTx<'a> {
+    pub fn resolve(&self) -> &Connection {
+        match self {
+            ConnectionOrTx::Connection(c) => c,
+            ConnectionOrTx::Transaction(c) => c,
+        }
+    }
+
+    pub fn prepare(&self, sql: &str) -> rusqlite::Result<Statement<'_>> {
+        self.resolve().prepare(sql)
+    }
+
+    pub fn execute(&self, sql: &str, params: &[&dyn ToSql]) -> rusqlite::Result<usize> {
+        self.resolve().execute(sql, params)
+    }
+}
diff --git a/crates/common/yaak-database/src/db_context.rs b/crates/common/yaak-database/src/db_context.rs
new file mode 100644
index 0000000..ba874d1
--- /dev/null
+++ b/crates/common/yaak-database/src/db_context.rs
@@ -0,0 +1,194 @@
+use crate::connection_or_tx::ConnectionOrTx;
+use crate::error::Error::ModelNotFound;
+use crate::error::Result;
+use crate::traits::UpsertModelInfo;
+use crate::update_source::UpdateSource;
+use sea_query::ExprTrait;
+use sea_query::{
+    Asterisk, Expr, Func, IntoColumnRef, IntoIden, OnConflict, Query, SimpleExpr,
+    SqliteQueryBuilder,
+};
+use sea_query_rusqlite::RusqliteBinder;
+use std::fmt::Debug;
+
+pub struct DbContext<'a> {
+    conn: ConnectionOrTx<'a>,
+}
+
+impl<'a> DbContext<'a> {
+    pub fn new(conn: ConnectionOrTx<'a>) -> Self {
+        Self { conn }
+    }
+
+    pub fn conn(&self) -> &ConnectionOrTx<'a> {
+        &self.conn
+    }
+
+    pub fn find_one<M>(
+        &self,
+        col: impl IntoColumnRef + IntoIden + Clone,
+        value: impl Into<SimpleExpr> + Debug,
+    ) -> Result<M>
+    where
+        M: UpsertModelInfo,
+    {
+        let value_debug = format!("{:?}", value);
+        let value_expr = value.into();
+        let (sql, params) = Query::select()
+            .from(M::table_name())
+            .column(Asterisk)
+            .cond_where(Expr::col(col.clone()).eq(value_expr))
+            .build_rusqlite(SqliteQueryBuilder);
+        let mut stmt = self.conn.prepare(sql.as_str()).expect("Failed to prepare query");
+        match stmt.query_row(&*params.as_params(), M::from_row) {
+            Ok(result) => Ok(result),
+            Err(rusqlite::Error::QueryReturnedNoRows) => Err(ModelNotFound(format!(
+                r#"table "{}" {} == {}"#,
+                M::table_name().into_iden().to_string(),
+                col.into_iden().to_string(),
+                value_debug
+            ))),
+            Err(e) => Err(crate::error::Error::SqlError(e)),
+        }
+    }
+
+    pub fn find_optional<M>(
+        &self,
+        col: impl IntoColumnRef,
+        value: impl Into<SimpleExpr>,
+    ) -> Option<M>
+    where
+        M: UpsertModelInfo,
+    {
+        let (sql, params) = Query::select()
+            .from(M::table_name())
+            .column(Asterisk)
+            .cond_where(Expr::col(col).eq(value))
+            .build_rusqlite(SqliteQueryBuilder);
+        let mut stmt = self.conn.prepare(sql.as_str()).expect("Failed to prepare query");
+        stmt.query_row(&*params.as_params(), M::from_row).ok()
+    }
+
+    pub fn find_all<M>(&self) -> Result<Vec<M>>
+    where
+        M: UpsertModelInfo,
+    {
+        let (order_by_col, order_by_dir) = M::order_by();
+        let (sql, params) = Query::select()
+            .from(M::table_name())
+            .column(Asterisk)
+            .order_by(order_by_col, order_by_dir)
+            .build_rusqlite(SqliteQueryBuilder);
+        let mut stmt = self.conn.resolve().prepare(sql.as_str())?;
+        let items = stmt.query_map(&*params.as_params(), M::from_row)?;
+        Ok(items.map(|v| v.unwrap()).collect())
+    }
+
+    pub fn find_many<M>(
+        &self,
+        col: impl IntoColumnRef,
+        value: impl Into<SimpleExpr>,
+        limit: Option<u64>,
+    ) -> Result<Vec<M>>
+    where
+        M: UpsertModelInfo,
+    {
+        let (order_by_col, order_by_dir) = M::order_by();
+        let (sql, params) = if let Some(limit) = limit {
+            Query::select()
+                .from(M::table_name())
+                .column(Asterisk)
+                .cond_where(Expr::col(col).eq(value))
+                .limit(limit)
+                .order_by(order_by_col, order_by_dir)
+                .build_rusqlite(SqliteQueryBuilder)
+        } else {
+            Query::select()
+                .from(M::table_name())
+                .column(Asterisk)
+                .cond_where(Expr::col(col).eq(value))
+                .order_by(order_by_col, order_by_dir)
+                .build_rusqlite(SqliteQueryBuilder)
+        };
+
+        let mut stmt = self.conn.resolve().prepare(sql.as_str())?;
+        let items = stmt.query_map(&*params.as_params(), M::from_row)?;
+        Ok(items.map(|v| v.unwrap()).collect())
+    }
+
+    /// Upsert a model. Returns `(model, created)` where `created` is true if a new row was inserted.
+    pub fn upsert<M>(&self, model: &M, source: &UpdateSource) -> Result<(M, bool)>
+    where
+        M: UpsertModelInfo + Clone,
+    {
+        let id_iden = M::id_column().into_iden();
+        let id_val = model.get_id();
+        let other_values = model.clone().insert_values(source)?;
+
+        let mut column_vec = vec![id_iden.clone()];
+        let mut value_vec =
+            vec![if id_val.is_empty() { M::generate_id().into() } else { id_val.into() }];
+
+        for (col, val) in other_values {
+            value_vec.push(val.into());
+            column_vec.push(col.into_iden());
+        }
+
+        let on_conflict =
+            OnConflict::column(id_iden).update_columns(M::update_columns()).to_owned();
+
+        let (sql, params) = Query::insert()
+            .into_table(M::table_name())
+            .columns(column_vec)
+            .values_panic(value_vec)
+            .on_conflict(on_conflict)
+            .returning(Query::returning().exprs(vec![
+                Expr::col(Asterisk),
+                Expr::expr(Func::cust("last_insert_rowid")),
+                Expr::col("rowid"),
+            ]))
+            .build_rusqlite(SqliteQueryBuilder);
+
+        let mut stmt = self.conn.resolve().prepare(sql.as_str())?;
+        let (m, created): (M, bool) = stmt.query_row(&*params.as_params(), |row| {
+            M::from_row(row).and_then(|m| {
+                let rowid: i64 = row.get("rowid")?;
+                let last_rowid: i64 = row.get("last_insert_rowid()")?;
+                Ok((m, rowid == last_rowid))
+            })
+        })?;
+
+        Ok((m, created))
+    }
+
+    /// Bulk-delete all rows matching a column value with a single statement.
+    /// Returns the number of rows deleted.
+    pub fn delete_many<M>(
+        &self,
+        col: impl IntoColumnRef,
+        value: impl Into<SimpleExpr>,
+    ) -> Result<usize>
+    where
+        M: UpsertModelInfo,
+    {
+        let (sql, params) = Query::delete()
+            .from_table(M::table_name())
+            .cond_where(Expr::col(col).eq(value))
+            .build_rusqlite(SqliteQueryBuilder);
+        let count = self.conn.execute(sql.as_str(), &*params.as_params())?;
+        Ok(count)
+    }
+
+    /// Delete a model by its ID. Returns the number of rows deleted.
+    pub fn delete<M>(&self, m: &M) -> Result<usize>
+    where
+        M: UpsertModelInfo,
+    {
+        let (sql, params) = Query::delete()
+            .from_table(M::table_name())
+            .cond_where(Expr::col(M::id_column().into_iden()).eq(m.get_id()))
+            .build_rusqlite(SqliteQueryBuilder);
+        let count = self.conn.execute(sql.as_str(), &*params.as_params())?;
+        Ok(count)
+    }
+}
diff --git a/crates/common/yaak-database/src/error.rs b/crates/common/yaak-database/src/error.rs
new file mode 100644
index 0000000..f30478c
--- /dev/null
+++ b/crates/common/yaak-database/src/error.rs
@@ -0,0 +1,37 @@
+use serde::{Serialize, Serializer};
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error("SQL error: {0}")]
+    SqlError(#[from] rusqlite::Error),
+
+    #[error("SQL Pool error: {0}")]
+    SqlPoolError(#[from] crate::pool::PoolError),
+
+    #[error("Database error: {0}")]
+    Database(String),
+
+    #[error("IO error: {0}")]
+    Io(#[from] std::io::Error),
+
+    #[error("JSON error: {0}")]
+    JsonError(#[from] serde_json::Error),
+
+    #[error("Model not found: {0}")]
+    ModelNotFound(String),
+
+    #[error("DB Migration Failed: {0}")]
+    MigrationError(String),
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/common/yaak-database/src/lib.rs b/crates/common/yaak-database/src/lib.rs
new file mode 100644
index 0000000..da45ac0
--- /dev/null
+++ b/crates/common/yaak-database/src/lib.rs
@@ -0,0 +1,26 @@
+pub mod connection_or_tx;
+pub mod db_context;
+pub mod error;
+pub mod migrate;
+pub mod pool;
+pub mod traits;
+pub mod update_source;
+pub mod util;
+
+// Re-export key types for convenience
+pub use connection_or_tx::ConnectionOrTx;
+pub use db_context::DbContext;
+pub use error::{Error, Result};
+pub use migrate::run_migrations;
+pub use pool::{PoolError, SqliteConn, SqlitePool};
+pub use traits::{UpsertModelInfo, upsert_date};
+pub use update_source::{ModelChangeEvent, UpdateSource};
+pub use util::{generate_id, generate_id_of_length, generate_prefixed_id};
+
+// Re-export types that consumers will need
+#[cfg(not(target_arch = "wasm32"))]
+pub use r2d2;
+#[cfg(not(target_arch = "wasm32"))]
+pub use r2d2_sqlite;
+pub use rusqlite;
+pub use sea_query;
diff --git a/crates/common/yaak-database/src/migrate.rs b/crates/common/yaak-database/src/migrate.rs
new file mode 100644
index 0000000..49fb590
--- /dev/null
+++ b/crates/common/yaak-database/src/migrate.rs
@@ -0,0 +1,79 @@
+use crate::error::Result;
+use crate::pool::SqlitePool;
+use include_dir::Dir;
+use log::{debug, info};
+use rusqlite::{OptionalExtension, params};
+
+const TRACKING_TABLE: &str = "_sqlx_migrations";
+
+/// Run SQL migrations from an embedded directory.
+///
+/// Migrations are sorted by filename (use timestamp prefixes like `00000001_init.sql`).
+/// Applied migrations are tracked in `_sqlx_migrations`.
+pub fn run_migrations(pool: &SqlitePool, dir: &Dir<'_>) -> Result<()> {
+    info!("Running migrations");
+
+    // Create tracking table
+    pool.get()?.execute(
+        &format!(
+            "CREATE TABLE IF NOT EXISTS {TRACKING_TABLE} (
+                version     TEXT PRIMARY KEY,
+                description TEXT NOT NULL,
+                applied_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL
+            )"
+        ),
+        [],
+    )?;
+
+    // Read and sort all .sql files
+    let mut entries: Vec<_> = dir
+        .entries()
+        .iter()
+        .filter(|e| e.path().extension().map(|ext| ext == "sql").unwrap_or(false))
+        .collect();
+
+    entries.sort_by_key(|e| e.path());
+
+    let mut ran_migrations = 0;
+    for entry in &entries {
+        let filename = entry.path().file_name().unwrap().to_str().unwrap();
+        let version = filename.split('_').next().unwrap();
+
+        // Check if already applied
+        let already_applied: Option<i64> = pool
+            .get()?
+            .query_row(
+                &format!("SELECT 1 FROM {TRACKING_TABLE} WHERE version = ?"),
+                [version],
+                |r| r.get(0),
+            )
+            .optional()?;
+
+        if already_applied.is_some() {
+            debug!("Skipping already applied migration: {}", filename);
+            continue;
+        }
+
+        let sql = entry.as_file().unwrap().contents_utf8().expect("Failed to read migration file");
+
+        info!("Applying migration: {}", filename);
+        let conn = pool.get()?;
+        conn.execute_batch(sql)?;
+
+        // Record migration
+        conn.execute(
+            &format!("INSERT INTO {TRACKING_TABLE} (version, description) VALUES (?, ?)"),
+            params![version, filename],
+        )?;
+
+        ran_migrations += 1;
+    }
+
+    if ran_migrations == 0 {
+        info!("No migrations to run");
+    } else {
+        info!("Ran {} migration(s)", ran_migrations);
+    }
+
+    Ok(())
+}
diff --git a/crates/common/yaak-database/src/pool.rs b/crates/common/yaak-database/src/pool.rs
new file mode 100644
index 0000000..b505441
--- /dev/null
+++ b/crates/common/yaak-database/src/pool.rs
@@ -0,0 +1,81 @@
+//! Where connections come from.
+//!
+//! Every query in the model layer asks a pool for a connection, uses it, and
+//! hands it back. That is the whole contract, and it is the one place the
+//! desktop and the browser genuinely differ: the desktop has threads and wants
+//! an r2d2 pool; a browser tab has one thread, no way to spawn another, and one
+//! connection is exactly enough. Everything above this module is identical on
+//! both.
+//!
+//! On native targets `SqlitePool` *is* `r2d2::Pool` — a type alias, so nothing
+//! that already builds pools changes. On wasm it is one connection that every
+//! `get()` hands out a shared handle to.
+//!
+//! A `SqliteConn` only ever derefs immutably. The code above this layer opens
+//! transactions with [`rusqlite::Transaction::new_unchecked`], which takes
+//! `&Connection`; the `&mut` that `Connection::transaction` demands is a
+//! compile-time guard against nesting a transaction on one connection, and it
+//! is what would have forced the wasm pool to lend its connection exclusively.
+//! The model layer nests connections freely — a helper that already holds one
+//! calls another that asks for its own — so an exclusive lend would panic on
+//! the second ask. Sharing the handle instead makes nested *reads* work the way
+//! they do on the desktop; nested *write transactions* fail on both, only
+//! differently (here SQLite refuses the inner `BEGIN`; natively the inner
+//! call waits for the one writer connection, which the outer call holds, and
+//! times out).
+
+#[cfg(not(target_arch = "wasm32"))]
+mod imp {
+    use r2d2_sqlite::SqliteConnectionManager;
+
+    pub type SqlitePool = r2d2::Pool<SqliteConnectionManager>;
+    pub type SqliteConn = r2d2::PooledConnection<SqliteConnectionManager>;
+    pub type PoolError = r2d2::Error;
+}
+
+#[cfg(target_arch = "wasm32")]
+mod imp {
+    use rusqlite::Connection;
+    use std::ops::Deref;
+    use std::rc::Rc;
+
+    /// One connection, shared by everyone who asks.
+    ///
+    /// `Rc` rather than `Arc` because a `Connection` is `!Sync`, so wrapping
+    /// it in an `Arc` would buy no `Send`/`Sync` anyway — and there is one
+    /// thread here to be honest about.
+    #[derive(Clone, Debug)]
+    pub struct SqlitePool {
+        conn: Rc<Connection>,
+    }
+
+    impl SqlitePool {
+        pub fn single(conn: Connection) -> Self {
+            Self { conn: Rc::new(conn) }
+        }
+
+        /// Another handle to the connection. Cannot fail; the `Result` keeps
+        /// the signature identical to r2d2's so callers are written once.
+        pub fn get(&self) -> Result<SqliteConn, PoolError> {
+            Ok(SqliteConn(self.conn.clone()))
+        }
+    }
+
+    /// The error a `get()` would return if it could. It can't, so this has no
+    /// variants; it exists so `Error::SqlPoolError` has the same shape on both
+    /// targets.
+    #[derive(Debug, thiserror::Error)]
+    pub enum PoolError {}
+
+    #[derive(Debug)]
+    pub struct SqliteConn(Rc<Connection>);
+
+    impl Deref for SqliteConn {
+        type Target = Connection;
+        fn deref(&self) -> &Connection {
+            &self.0
+        }
+    }
+}
+
+pub use imp::*;
diff --git a/crates/common/yaak-database/src/traits.rs b/crates/common/yaak-database/src/traits.rs
new file mode 100644
index 0000000..33e1504
--- /dev/null
+++ b/crates/common/yaak-database/src/traits.rs
@@ -0,0 +1,36 @@
+use crate::error::Result;
+use crate::update_source::UpdateSource;
+use chrono::{NaiveDateTime, Utc};
+use rusqlite::Row;
+use sea_query::{IntoColumnRef, IntoIden, IntoTableRef, Order, SimpleExpr};
+
+pub trait UpsertModelInfo {
+    fn table_name() -> impl IntoTableRef + IntoIden;
+    fn id_column() -> impl IntoIden + Eq + Clone;
+    fn generate_id() -> String;
+    fn order_by() -> (impl IntoColumnRef, Order);
+    fn get_id(&self) -> String;
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> Result<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>>;
+    fn update_columns() -> Vec<impl IntoIden>;
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized;
+}
+
+/// Generate timestamps for upsert operations.
+/// Sync and import operations preserve existing timestamps; other sources use current time.
+pub fn upsert_date(update_source: &UpdateSource, dt: NaiveDateTime) -> SimpleExpr {
+    match update_source {
+        UpdateSource::Sync | UpdateSource::Import => {
+            if dt.and_utc().timestamp() == 0 {
+                Utc::now().naive_utc().into()
+            } else {
+                dt.into()
+            }
+        }
+        _ => Utc::now().naive_utc().into(),
+    }
+}
diff --git a/crates/common/yaak-database/src/update_source.rs b/crates/common/yaak-database/src/update_source.rs
new file mode 100644
index 0000000..b234930
--- /dev/null
+++ b/crates/common/yaak-database/src/update_source.rs
@@ -0,0 +1,31 @@
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "snake_case", tag = "type")]
+pub enum UpdateSource {
+    Background,
+    Import,
+    Plugin,
+    Sync,
+    Window { label: String },
+}
+
+impl UpdateSource {
+    pub fn from_window_label(label: impl Into<String>) -> Self {
+        Self::Window { label: label.into() }
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+pub enum ModelChangeEvent {
+    Upsert {
+        created: bool,
+    },
+    /// A delete for a workspace implies deletion of every model in that
+    /// workspace — children are bulk-deleted without their own change rows or
+    /// events, and consumers must prune the subtree themselves (the frontend
+    /// model store does this centrally).
+    Delete,
+}
diff --git a/crates/common/yaak-database/src/util.rs b/crates/common/yaak-database/src/util.rs
new file mode 100644
index 0000000..64af7c8
--- /dev/null
+++ b/crates/common/yaak-database/src/util.rs
@@ -0,0 +1,20 @@
+use nanoid::nanoid;
+
+pub fn generate_prefixed_id(prefix: &str) -> String {
+    format!("{prefix}_{}", generate_id())
+}
+
+pub fn generate_id() -> String {
+    generate_id_of_length(10)
+}
+
+pub fn generate_id_of_length(n: usize) -> String {
+    let alphabet: [char; 57] = [
+        '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
+        'k', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C',
+        'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
+        'X', 'Y', 'Z',
+    ];
+
+    nanoid!(n, &alphabet)
+}
diff --git a/crates/common/yaak-rpc-schema/Cargo.toml b/crates/common/yaak-rpc-schema/Cargo.toml
new file mode 100644
index 0000000..7e07b42
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/Cargo.toml
@@ -0,0 +1,18 @@
+[package]
+name = "yaak-rpc-schema"
+version = "0.0.0"
+edition = "2024"
+authors = ["Gregory Schier"]
+publish = false
+
+[dependencies]
+serde = { workspace = true, features = ["derive"] }
+ts-rs = { workspace = true }
+yaak-git = { workspace = true }
+yaak-grpc = { workspace = true }
+yaak-models = { workspace = true }
+yaak-plugins = { workspace = true }
+yaak-sse = { workspace = true }
+yaak-sync = { workspace = true }
+yaak-templates = { workspace = true }
+yaak-ws = { workspace = true }
diff --git a/crates/common/yaak-rpc-schema/README.md b/crates/common/yaak-rpc-schema/README.md
new file mode 100644
index 0000000..d078c43
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/README.md
@@ -0,0 +1,44 @@
+# yaak-rpc-schema
+
+The wire schema for the app's RPC surface: every command name, its request
+payload, and its response type, declared once.
+
+Every host that serves the Yaak UI — the desktop app today, the browser bridge
+and anything after it — imports these types and implements the commands against
+them. That is what keeps a request's shape from drifting between hosts, and it
+is why the TypeScript bindings (`bindings/gen_rpc.ts`, exposed to the frontend
+as `@yaakapp-internal/rpc-schema`) are generated from one place.
+
+Nothing here depends on Tauri or on any host. Request structs are plain data,
+and so are the few response types declared here rather than in an engine crate.
+Command *bodies* live with the host that runs them.
+
+## Adding a command
+
+1. Add its request struct and an entry in `with_commands!` in `src/lib.rs`.
+2. Write the adapter in each host — the desktop's live in
+   `crates-tauri/yaak-app-client/src/rpc_ext.rs`. A host that does not support
+   the command still has to say so; a missing adapter fails to compile.
+3. Regenerate the bindings: `cargo test -p yaak-rpc-schema` writes
+   `bindings/gen_rpc.ts`, which is committed.
+
+## How hosts consume the list
+
+`with_commands!` takes the name of a `macro_rules!` macro and calls it with the
+full `name(Req) -> Res` list. Each host writes a small macro that receives that
+list and builds its router:
+
+```rust
+macro_rules! register_commands {
+    ( $( $name:ident ( $req:ty ) -> $res:ty ),* $(,)? ) => {
+        pub fn build_router() -> RpcRouter<MyCtx> {
+            let mut router = RpcRouter::new();
+            $( router.register(stringify!($name), rpc_handler_async!($name)); )*
+            router
+        }
+    };
+}
+yaak_rpc_schema::with_commands!(register_commands);
+```
+
+The schema decides *what* commands exist; the host decides *how* each one runs.
diff --git a/crates/common/yaak-rpc-schema/bindings/gen_api.ts b/crates/common/yaak-rpc-schema/bindings/gen_api.ts
new file mode 100644
index 0000000..9dcbb82
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/gen_api.ts
@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { PluginVersion } from "./gen_search";
+
+export type PluginNameVersion = { name: string, version: string, };
+
+export type PluginSearchResponse = { plugins: Array<PluginVersion>, };
+
+export type PluginUpdatesResponse = { plugins: Array<PluginNameVersion>, };
diff --git a/crates/common/yaak-rpc-schema/bindings/gen_events.ts b/crates/common/yaak-rpc-schema/bindings/gen_events.ts
new file mode 100644
index 0000000..fdf4514
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/gen_events.ts
@@ -0,0 +1,389 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Folder, GrpcRequest, HttpRequest, WebsocketRequest, Workspace } from "./gen_models";
+
+export type CallFolderActionArgs = { folder: Folder, };
+
+export type CallFolderActionRequest = { index: number, pluginRefId: string, args: CallFolderActionArgs, };
+
+export type CallGrpcRequestActionArgs = { grpcRequest: GrpcRequest, protoFiles: Array<string>, };
+
+export type CallGrpcRequestActionRequest = { index: number, pluginRefId: string, args: CallGrpcRequestActionArgs, };
+
+export type CallHttpRequestActionArgs = { httpRequest: HttpRequest, };
+
+export type CallHttpRequestActionRequest = { index: number, pluginRefId: string, args: CallHttpRequestActionArgs, };
+
+export type CallWebsocketRequestActionArgs = { websocketRequest: WebsocketRequest, };
+
+export type CallWebsocketRequestActionRequest = { index: number, pluginRefId: string, args: CallWebsocketRequestActionArgs, };
+
+export type CallWorkspaceActionArgs = { workspace: Workspace, };
+
+export type CallWorkspaceActionRequest = { index: number, pluginRefId: string, args: CallWorkspaceActionArgs, };
+
+export type Color = "primary" | "secondary" | "info" | "success" | "notice" | "warning" | "danger";
+
+export type CompletionOptionType = "constant" | "variable";
+
+export type EditorLanguage = "text" | "javascript" | "json" | "html" | "xml" | "graphql" | "markdown" | "c" | "clojure" | "csharp" | "go" | "http" | "java" | "kotlin" | "objective_c" | "ocaml" | "php" | "powershell" | "python" | "r" | "ruby" | "shell" | "swift";
+
+export type FileFilter = { name: string, 
+/**
+ * File extensions to require
+ */
+extensions: Array<string>, };
+
+export type FilterResponse = { content: string, error?: string, };
+
+export type FolderAction = { label: string, icon?: Icon, };
+
+export type FormInput = { "type": "text" } & FormInputText | { "type": "editor" } & FormInputEditor | { "type": "select" } & FormInputSelect | { "type": "checkbox" } & FormInputCheckbox | { "type": "file" } & FormInputFile | { "type": "http_request" } & FormInputHttpRequest | { "type": "accordion" } & FormInputAccordion | { "type": "h_stack" } & FormInputHStack | { "type": "banner" } & FormInputBanner | { "type": "markdown" } & FormInputMarkdown | { "type": "key_value" } & FormInputKeyValue;
+
+export type FormInputAccordion = { label: string, inputs?: Array<FormInput>, hidden?: boolean, };
+
+export type FormInputBanner = { inputs?: Array<FormInput>, hidden?: boolean, color?: Color, };
+
+export type FormInputCheckbox = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputEditor = { 
+/**
+ * Placeholder for the text input
+ */
+placeholder?: string | null, 
+/**
+ * Don't show the editor gutter (line numbers, folds, etc.)
+ */
+hideGutter?: boolean, 
+/**
+ * Language for syntax highlighting
+ */
+language?: EditorLanguage, readOnly?: boolean, 
+/**
+ * Fixed number of visible rows
+ */
+rows?: number, completionOptions?: Array<GenericCompletionOption>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputFile = { 
+/**
+ * The title of the file selection window
+ */
+title: string, 
+/**
+ * Allow selecting multiple files
+ */
+multiple?: boolean, directory?: boolean, defaultPath?: string, filters?: Array<FileFilter>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputHStack = { inputs?: Array<FormInput>, hidden?: boolean, };
+
+export type FormInputHttpRequest = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputKeyValue = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputMarkdown = { content: string, hidden?: boolean, };
+
+export type FormInputSelect = { 
+/**
+ * The options that will be available in the select input
+ */
+options: Array<FormInputSelectOption>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputSelectOption = { label: string, value: string, };
+
+export type FormInputText = { 
+/**
+ * Placeholder for the text input
+ */
+placeholder?: string | null, 
+/**
+ * Placeholder for the text input
+ */
+password?: boolean, 
+/**
+ * Whether to allow newlines in the input, like a <textarea/>
+ */
+multiLine?: boolean, completionOptions?: Array<GenericCompletionOption>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type GenericCompletionOption = { label: string, detail?: string, info?: string, type?: CompletionOptionType, boost?: number, };
+
+export type GetFolderActionsResponse = { actions: Array<FolderAction>, pluginRefId: string, };
+
+export type GetGrpcRequestActionsResponse = { actions: Array<GrpcRequestAction>, pluginRefId: string, };
+
+export type GetHttpAuthenticationConfigResponse = { args: Array<FormInput>, pluginRefId: string, actions?: Array<HttpAuthenticationAction>, };
+
+export type GetHttpAuthenticationSummaryResponse = { name: string, label: string, shortLabel: string, };
+
+export type GetHttpRequestActionsResponse = { actions: Array<HttpRequestAction>, pluginRefId: string, };
+
+export type GetTemplateFunctionConfigResponse = { function: TemplateFunction, pluginRefId: string, };
+
+export type GetTemplateFunctionSummaryResponse = { functions: Array<TemplateFunction>, pluginRefId: string, };
+
+export type GetThemesResponse = { themes: Array<Theme>, };
+
+export type GetWebsocketRequestActionsResponse = { actions: Array<WebsocketRequestAction>, pluginRefId: string, };
+
+export type GetWorkspaceActionsResponse = { actions: Array<WorkspaceAction>, pluginRefId: string, };
+
+export type GrpcRequestAction = { label: string, icon?: Icon, };
+
+export type HttpAuthenticationAction = { label: string, icon?: Icon, };
+
+export type HttpRequestAction = { label: string, icon?: Icon, };
+
+export type Icon = "alert_triangle" | "check" | "check_circle" | "chevron_down" | "copy" | "info" | "pin" | "search" | "trash" | "_unknown";
+
+export type JsonPrimitive = string | number | boolean | null;
+
+export type RenderPurpose = "send" | "preview";
+
+export type TemplateFunction = { name: string, previewType?: TemplateFunctionPreviewType, description?: string, 
+/**
+ * Also support alternative names. This is useful for not breaking existing
+ * tags when changing the `name` property
+ */
+aliases?: Array<string>, args: Array<TemplateFunctionArg>, 
+/**
+ * A list of arg names to show in the inline preview. If not provided, none will be shown (for privacy reasons).
+ */
+previewArgs?: Array<string>, };
+
+/**
+ * Similar to FormInput, but contains
+ */
+export type TemplateFunctionArg = FormInput;
+
+export type TemplateFunctionPreviewType = "live" | "click" | "none";
+
+export type Theme = { 
+/**
+ * How the theme is identified. This should never be changed
+ */
+id: string, 
+/**
+ * The friendly name of the theme to be displayed to the user
+ */
+label: string, 
+/**
+ * Whether the theme will be used for dark or light appearance
+ */
+dark: boolean, 
+/**
+ * The default top-level colors for the theme
+ */
+base: ThemeComponentColors, 
+/**
+ * Optionally override theme for individual UI components for more control
+ */
+components?: ThemeComponents, };
+
+export type ThemeComponentColors = { surface?: string, surfaceHighlight?: string, surfaceActive?: string, text?: string, textSubtle?: string, textSubtlest?: string, border?: string, borderSubtle?: string, borderFocus?: string, shadow?: string, backdrop?: string, selection?: string, primary?: string, secondary?: string, info?: string, success?: string, notice?: string, warning?: string, danger?: string, };
+
+export type ThemeComponents = { dialog?: ThemeComponentColors, menu?: ThemeComponentColors, toast?: ThemeComponentColors, sidebar?: ThemeComponentColors, responsePane?: ThemeComponentColors, appHeader?: ThemeComponentColors, button?: ThemeComponentColors, banner?: ThemeComponentColors, templateTag?: ThemeComponentColors, urlBar?: ThemeComponentColors, editor?: ThemeComponentColors, input?: ThemeComponentColors, };
+
+export type WebsocketRequestAction = { label: string, icon?: Icon, };
+
+export type WorkspaceAction = { label: string, icon?: Icon, };
diff --git a/crates/common/yaak-rpc-schema/bindings/gen_git.ts b/crates/common/yaak-rpc-schema/bindings/gen_git.ts
new file mode 100644
index 0000000..1df93b1
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/gen_git.ts
@@ -0,0 +1,35 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { SyncModel } from "./gen_models";
+
+export type BranchDeleteResult = { "type": "success", message: string, } | { "type": "not_fully_merged" };
+
+export type CloneResult = { "type": "success" } | { "type": "cancelled" } | { "type": "needs_credentials", url: string, error: string | null, };
+
+export type GitAuthor = { name: string | null, email: string | null, };
+
+export type GitBranchInfo = { path: string, headRef: string | null, headRefShorthand: string | null, origins: Array<string>, localBranches: Array<string>, remoteBranches: Array<string>, ahead: number, behind: number, };
+
+export type GitCommit = { oid: string, author: GitAuthor, when: string, message: string | null, };
+
+export type GitFileDiff = { original: string, modified: string, };
+
+export type GitRemote = { name: string, url: string | null, };
+
+export type GitStatus = "untracked" | "conflict" | "current" | "modified" | "removed" | "renamed" | "type_change";
+
+export type GitStatusEntry = { relaPath: string, status: GitStatus, staged: boolean, prev: SyncModel | null, next: SyncModel | null, };
+
+export type GitStatusSummary = { path: string, 
+/**
+ * The status directory relative to the repo root ("" when it IS the root).
+ * Useful for displaying entry paths relative to the sync directory
+ */
+relaDir: string, headRef: string | null, headRefShorthand: string | null, entries: Array<GitStatusEntry>, origins: Array<string>, localBranches: Array<string>, remoteBranches: Array<string>, ahead: number, behind: number, };
+
+export type GitWorktreeStatus = { entries: Array<GitWorktreeStatusEntry>, };
+
+export type GitWorktreeStatusEntry = { relaPath: string, modelId: string | null, status: GitStatus, staged: boolean, };
+
+export type PullResult = { "type": "success", message: string, } | { "type": "up_to_date" } | { "type": "needs_credentials", url: string, error: string | null, } | { "type": "diverged", remote: string, branch: string, } | { "type": "uncommitted_changes" };
+
+export type PushResult = { "type": "success", message: string, } | { "type": "up_to_date" } | { "type": "needs_credentials", url: string, error: string | null, };
diff --git a/crates/common/yaak-rpc-schema/bindings/gen_grpc.ts b/crates/common/yaak-rpc-schema/bindings/gen_grpc.ts
new file mode 100644
index 0000000..7f050ab
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/gen_grpc.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type MethodDefinition = { name: string, schema: string, clientStreaming: boolean, serverStreaming: boolean, };
+
+export type ServiceDefinition = { name: string, methods: Array<MethodDefinition>, };
diff --git a/crates/common/yaak-rpc-schema/bindings/gen_models.ts b/crates/common/yaak-rpc-schema/bindings/gen_models.ts
new file mode 100644
index 0000000..ec4a53a
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/gen_models.ts
@@ -0,0 +1,522 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type AnyModel =
+  | CookieJar
+  | Environment
+  | Folder
+  | GraphQlIntrospection
+  | GrpcConnection
+  | GrpcEvent
+  | GrpcRequest
+  | HttpRequest
+  | HttpResponse
+  | HttpResponseEvent
+  | ImportSource
+  | KeyValue
+  | Plugin
+  | Settings
+  | SyncState
+  | WebsocketConnection
+  | WebsocketEvent
+  | WebsocketRequest
+  | Workspace
+  | WorkspaceMeta;
+
+export type ClientCertificate = {
+  host: string;
+  port: number | null;
+  crtFile: string | null;
+  keyFile: string | null;
+  pfxFile: string | null;
+  passphrase: string | null;
+  enabled?: boolean;
+};
+
+export type Cookie = {
+  name: string;
+  value: string;
+  domain: CookieDomain;
+  expires: CookieExpires;
+  path: string;
+  secure: boolean;
+  httpOnly: boolean;
+  sameSite: CookieSameSite | null;
+};
+
+export type CookieDomain = { HostOnly: string } | { Suffix: string } | "NotPresent" | "Empty";
+
+export type CookieExpires = { AtUtc: string } | "SessionEnd";
+
+export type CookieJar = {
+  model: "cookie_jar";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  cookies: Array<Cookie>;
+  name: string;
+};
+
+export type CookieSameSite = "Strict" | "Lax" | "None";
+
+export type DnsOverride = {
+  hostname: string;
+  ipv4: Array<string>;
+  ipv6: Array<string>;
+  enabled?: boolean;
+};
+
+export type EditorKeymap = "default" | "vim" | "vscode" | "emacs";
+
+export type EncryptedKey = { encryptedKey: string };
+
+export type Environment = {
+  model: "environment";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  name: string;
+  public: boolean;
+  parentModel: string;
+  parentId: string | null;
+  /**
+   * Variables defined in this environment scope.
+   * Child environments override parent variables by name.
+   */
+  variables: Array<EnvironmentVariable>;
+  color: string | null;
+  sortPriority: number;
+};
+
+export type EnvironmentVariable = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type Folder = {
+  model: "folder";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  sortPriority: number;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type GraphQlIntrospection = {
+  model: "graphql_introspection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  content: string | null;
+};
+
+export type GrpcConnection = {
+  model: "grpc_connection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  elapsed: number;
+  error: string | null;
+  method: string;
+  service: string;
+  status: number;
+  state: GrpcConnectionState;
+  trailers: { [key in string]?: string };
+  url: string;
+};
+
+export type GrpcConnectionState = "initialized" | "connected" | "closed";
+
+export type GrpcEvent = {
+  model: "grpc_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  connectionId: string;
+  content: string;
+  error: string | null;
+  eventType: GrpcEventType;
+  metadata: { [key in string]?: string };
+  status: number | null;
+};
+
+export type GrpcEventType =
+  | "info"
+  | "error"
+  | "client_message"
+  | "server_message"
+  | "connection_start"
+  | "connection_end";
+
+export type GrpcRequest = {
+  model: "grpc_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authenticationType: string | null;
+  authentication: Record<string, any>;
+  description: string;
+  message: string;
+  metadata: Array<HttpRequestHeader>;
+  method: string | null;
+  name: string;
+  service: string | null;
+  sortPriority: number;
+  /**
+   * Server URL (http for plaintext or https for secure)
+   */
+  url: string;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type HttpRequest = {
+  model: "http_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  body: Record<string, any>;
+  bodyType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  method: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type HttpRequestHeader = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type HttpResponse = {
+  model: "http_response";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  contentLength: number | null;
+  contentLengthCompressed: number | null;
+  elapsed: number;
+  elapsedHeaders: number;
+  elapsedDns: number;
+  error: string | null;
+  headers: Array<HttpResponseHeader>;
+  remoteAddr: string | null;
+  requestContentLength: number | null;
+  requestHeaders: Array<HttpResponseHeader>;
+  status: number;
+  statusReason: string | null;
+  state: HttpResponseState;
+  url: string;
+  version: string | null;
+};
+
+export type HttpResponseEvent = {
+  model: "http_response_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  responseId: string;
+  event: HttpResponseEventData;
+};
+
+/**
+ * Serializable representation of HTTP response events for DB storage.
+ * This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
+ * The `From` impl is in yaak-http to avoid circular dependencies.
+ */
+export type HttpResponseEventData =
+  | {
+      type: "setting";
+      name: string;
+      value: string;
+      source_model?: string;
+      source_id?: string;
+      source_name?: string;
+    }
+  | { type: "info"; message: string }
+  | {
+      type: "redirect";
+      url: string;
+      status: number;
+      behavior: string;
+      dropped_body: boolean;
+      dropped_headers: Array<string>;
+    }
+  | {
+      type: "send_url";
+      method: string;
+      scheme: string;
+      username: string;
+      password: string;
+      host: string;
+      port: number;
+      path: string;
+      query: string;
+      fragment: string;
+    }
+  | { type: "receive_url"; version: string; status: string }
+  | { type: "header_up"; name: string; value: string }
+  | { type: "header_down"; name: string; value: string }
+  | { type: "chunk_sent"; bytes: number }
+  | { type: "chunk_received"; bytes: number }
+  | {
+      type: "dns_resolved";
+      hostname: string;
+      addresses: Array<string>;
+      duration: bigint;
+      overridden: boolean;
+    };
+
+export type HttpResponseHeader = { name: string; value: string };
+
+export type HttpResponseState = "initialized" | "connected" | "closed";
+
+export type HttpUrlParameter = {
+  enabled?: boolean;
+  /**
+   * Colon-prefixed parameters are treated as path parameters if they match, like `/users/:id`
+   * Other entries are appended as query parameters
+   */
+  name: string;
+  value: string;
+  id?: string;
+};
+
+export type HttpVersion = "auto" | "http1" | "http2";
+
+export type ImportSource = {
+  model: "import_source";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  importer: string;
+  origin: string;
+  originLabel: string;
+  lastImportedAt: string;
+};
+
+export type InheritedBoolSetting = { enabled?: boolean; value: boolean };
+
+export type InheritedHttpVersionSetting = { enabled?: boolean; value: HttpVersion };
+
+export type InheritedIntSetting = { enabled?: boolean; value: number };
+
+export type KeyValue = {
+  model: "key_value";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  key: string;
+  namespace: string;
+  value: string;
+};
+
+export type Plugin = {
+  model: "plugin";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  checkedAt: string | null;
+  directory: string;
+  enabled: boolean;
+  url: string | null;
+  source: PluginSource;
+};
+
+export type PluginSource = "bundled" | "filesystem" | "registry";
+
+export type ProxySetting =
+  | {
+      type: "enabled";
+      http: string;
+      https: string;
+      auth: ProxySettingAuth | null;
+      bypass: string;
+      disabled: boolean;
+    }
+  | { type: "disabled" };
+
+export type ProxySettingAuth = { user: string; password: string };
+
+export type Settings = {
+  model: "settings";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  appearance: string;
+  clientCertificates: Array<ClientCertificate>;
+  coloredMethods: boolean;
+  editorFont: string | null;
+  editorFontSize: number;
+  editorKeymap: EditorKeymap;
+  editorSoftWrap: boolean;
+  hideWindowControls: boolean;
+  useNativeTitlebar: boolean;
+  interfaceFont: string | null;
+  interfaceFontSize: number;
+  interfaceScale: number;
+  openWorkspaceNewWindow: boolean | null;
+  proxy: ProxySetting | null;
+  themeDark: string;
+  themeLight: string;
+  updateChannel: string;
+  hideLicenseBadge: boolean;
+  promptFeedback: boolean;
+  autoupdate: boolean;
+  autoDownloadUpdates: boolean;
+  checkNotifications: boolean;
+  hotkeys: { [key in string]?: Array<string> };
+};
+
+export type SyncModel =
+  | ({ type: "workspace" } & Workspace)
+  | ({ type: "environment" } & Environment)
+  | ({ type: "folder" } & Folder)
+  | ({ type: "http_request" } & HttpRequest)
+  | ({ type: "grpc_request" } & GrpcRequest)
+  | ({ type: "websocket_request" } & WebsocketRequest);
+
+export type SyncState = {
+  model: "sync_state";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  flushedAt: string;
+  modelId: string;
+  checksum: string;
+  relPath: string;
+  syncDir: string;
+};
+
+export type WebsocketConnection = {
+  model: "websocket_connection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  elapsed: number;
+  error: string | null;
+  headers: Array<HttpResponseHeader>;
+  state: WebsocketConnectionState;
+  status: number;
+  url: string;
+};
+
+export type WebsocketConnectionState = "initialized" | "connected" | "closing" | "closed";
+
+export type WebsocketEvent = {
+  model: "websocket_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  connectionId: string;
+  isServer: boolean;
+  message: Array<number>;
+  messageType: WebsocketEventType;
+};
+
+export type WebsocketEventType =
+  | "binary"
+  | "close"
+  | "error"
+  | "frame"
+  | "open"
+  | "ping"
+  | "pong"
+  | "text";
+
+export type WebsocketRequest = {
+  model: "websocket_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  message: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type Workspace = {
+  model: "workspace";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  encryptionKeyChallenge: string | null;
+  settingValidateCertificates: boolean;
+  settingFollowRedirects: boolean;
+  settingRequestTimeout: number;
+  settingRequestMessageSize: number;
+  settingDnsOverrides: Array<DnsOverride>;
+  settingSendCookies: boolean;
+  settingStoreCookies: boolean;
+  settingHttpVersion: HttpVersion;
+};
+
+export type WorkspaceMeta = {
+  model: "workspace_meta";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  encryptionKey: EncryptedKey | null;
+  settingSyncDir: string | null;
+};
diff --git a/crates/common/yaak-rpc-schema/bindings/gen_rpc.ts b/crates/common/yaak-rpc-schema/bindings/gen_rpc.ts
new file mode 100644
index 0000000..49eb2d2
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/gen_rpc.ts
@@ -0,0 +1,261 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { PluginNameVersion, PluginSearchResponse, PluginUpdatesResponse } from "./gen_api";
+import type { CallFolderActionRequest, CallGrpcRequestActionRequest, CallHttpRequestActionRequest, CallWebsocketRequestActionRequest, CallWorkspaceActionRequest, FilterResponse, GetFolderActionsResponse, GetGrpcRequestActionsResponse, GetHttpAuthenticationConfigResponse, GetHttpAuthenticationSummaryResponse, GetHttpRequestActionsResponse, GetTemplateFunctionConfigResponse, GetTemplateFunctionSummaryResponse, GetThemesResponse, GetWebsocketRequestActionsResponse, GetWorkspaceActionsResponse, JsonPrimitive, RenderPurpose } from "./gen_events";
+import type { BranchDeleteResult, CloneResult, GitBranchInfo, GitCommit, GitFileDiff, GitRemote, GitStatusSummary, GitWorktreeStatus, PullResult, PushResult } from "./gen_git";
+import type { ServiceDefinition } from "./gen_grpc";
+import type { AnyModel, GraphQlIntrospection, GrpcEvent, HttpRequest, HttpRequestHeader, HttpResponse, HttpResponseEvent, ImportSource, Plugin, Settings, WebsocketConnection, WebsocketEvent, WorkspaceMeta } from "./gen_models";
+import type { PluginMetadata } from "./gen_search";
+import type { SyncOp } from "./gen_sync";
+import type { BatchUpsertResult, ImportDestination, ImportPlan } from "./gen_util";
+import type { Tokens } from "./parser";
+import type { ServerSentEvent } from "./sse";
+
+/**
+ * What the frontend learns about the host it is talking to.
+ */
+export type AppMetaData = { isDev: boolean, version: string, cliVersion: string | null, name: string, appDataDir: string, appLogDir: string, vendoredPluginDir: string, defaultProjectDir: string, featureUpdater: boolean, featureLicense: boolean, };
+
+export type CmdCallFolderActionReq = { req: CallFolderActionRequest, };
+
+export type CmdCallGrpcRequestActionReq = { req: CallGrpcRequestActionRequest, };
+
+export type CmdCallHttpAuthenticationActionReq = { authName: string, actionIndex: number, values: { [key in string]?: JsonPrimitive }, model: AnyModel, environmentId: string | null, };
+
+export type CmdCallHttpRequestActionReq = { req: CallHttpRequestActionRequest, };
+
+export type CmdCallWebsocketRequestActionReq = { req: CallWebsocketRequestActionRequest, };
+
+export type CmdCallWorkspaceActionReq = { req: CallWorkspaceActionRequest, };
+
+export type CmdCheckForUpdatesReq = Record<string, never>;
+
+export type CmdCommitImportReq = { plan: ImportPlan, };
+
+export type CmdCreateExampleWorkspaceReq = Record<string, never>;
+
+export type CmdCurlToRequestReq = { command: string, workspaceId: string, };
+
+export type CmdDecryptTemplateReq = { template: string, };
+
+export type CmdDefaultHeadersReq = Record<string, never>;
+
+export type CmdDeleteAllGrpcConnectionsReq = { requestId: string, };
+
+export type CmdDeleteAllHttpResponsesReq = { requestId: string, };
+
+export type CmdDeleteSendHistoryReq = { workspaceId: string, };
+
+export type CmdDisableEncryptionReq = { workspaceId: string, };
+
+export type CmdDismissNotificationReq = { notificationId: string, };
+
+export type CmdEnableEncryptionReq = { workspaceId: string, };
+
+export type CmdExportDataReq = { workspaceIds: Array<string>, includePrivateEnvironments: boolean, };
+
+export type CmdFolderActionsReq = Record<string, never>;
+
+export type CmdFormatGraphqlReq = { text: string, };
+
+export type CmdFormatJsonReq = { text: string, };
+
+export type CmdGetHttpAuthenticationConfigReq = { authName: string, values: { [key in string]?: JsonPrimitive }, model: AnyModel, environmentId: string | null, };
+
+export type CmdGetHttpAuthenticationSummariesReq = Record<string, never>;
+
+export type CmdGetHttpResponseEventsReq = { responseId: string, };
+
+export type CmdGetSseEventsReq = { responseId: string, };
+
+export type CmdGetThemesReq = Record<string, never>;
+
+export type CmdGetWorkspaceMetaReq = { workspaceId: string, };
+
+export type CmdGitAddCredentialReq = { remoteUrl: string, username: string, password: string, };
+
+export type CmdGitAddRemoteReq = { dir: string, name: string, url: string, };
+
+export type CmdGitAddReq = { dir: string, relaPaths: Array<string>, };
+
+export type CmdGitBranchInfoReq = { dir: string, };
+
+export type CmdGitBranchReq = { dir: string, branch: string, base: string | null, };
+
+export type CmdGitCheckoutReq = { dir: string, branch: string, force: boolean, };
+
+export type CmdGitCloneReq = { url: string, dir: string, };
+
+export type CmdGitCommitReq = { dir: string, message: string, };
+
+export type CmdGitDeleteBranchReq = { dir: string, branch: string, force: boolean | null, };
+
+export type CmdGitDeleteRemoteBranchReq = { dir: string, branch: string, };
+
+export type CmdGitFetchAllReq = { dir: string, };
+
+export type CmdGitFileDiffForCommitReq = { dir: string, commitOid: string, relaPath: string, };
+
+export type CmdGitInitializeReq = { dir: string, };
+
+export type CmdGitLogForFileReq = { dir: string, relaPath: string, };
+
+export type CmdGitLogReq = { dir: string, };
+
+export type CmdGitMergeBranchReq = { dir: string, branch: string, };
+
+export type CmdGitPullForceResetReq = { dir: string, remote: string, branch: string, };
+
+export type CmdGitPullMergeReq = { dir: string, remote: string, branch: string, };
+
+export type CmdGitPullReq = { dir: string, };
+
+export type CmdGitPushReq = { dir: string, };
+
+export type CmdGitRemotesReq = { dir: string, };
+
+export type CmdGitRenameBranchReq = { dir: string, oldName: string, newName: string, };
+
+export type CmdGitResetChangesReq = { dir: string, };
+
+export type CmdGitRestoreFileFromCommitReq = { dir: string, commitOid: string, relaPath: string, };
+
+export type CmdGitRestoreFilesReq = { dir: string, relaPaths: Array<string>, };
+
+export type CmdGitRmRemoteReq = { dir: string, name: string, };
+
+export type CmdGitStatusReq = { dir: string, };
+
+export type CmdGitUnstageReq = { dir: string, relaPaths: Array<string>, };
+
+export type CmdGitWatchWorktreeStatusReq = { dir: string, streamId: string, };
+
+export type CmdGitWorktreeStatusReq = { dir: string, };
+
+export type CmdGrpcGoReq = { requestId: string, environmentId: string | null, protoFiles: Array<string>, };
+
+export type CmdGrpcReflectReq = { requestId: string, environmentId: string | null, protoFiles: Array<string>, };
+
+export type CmdGrpcRequestActionsReq = Record<string, never>;
+
+export type CmdHttpRequestActionsReq = Record<string, never>;
+
+export type CmdHttpRequestBodyReq = { responseId: string, };
+
+export type CmdHttpResponseBodyPathReq = { responseId: string, };
+
+export type CmdHttpResponseBodyReq = { responseId: string, filter: string | null, };
+
+export type CmdImportDataReq = { filePath: string, destination: ImportDestination, };
+
+export type CmdImportSourcesForOriginReq = { filePath?: string, url?: string, };
+
+export type CmdImportUrlReq = { url: string, destination: ImportDestination, };
+
+export type CmdListImportSourcesReq = { workspaceId: string, };
+
+export type CmdMetadataReq = Record<string, never>;
+
+export type CmdNewChildWindowReq = { url: string, label: string, title: string, innerSize: [number, number], };
+
+export type CmdNewMainWindowReq = { url: string, };
+
+export type CmdPluginInfoReq = { id: string, };
+
+export type CmdPluginInitErrorsReq = Record<string, never>;
+
+export type CmdPluginsInstallFromDirectoryReq = { directory: string, };
+
+export type CmdPluginsInstallReq = { name: string, version: string | null, };
+
+export type CmdPluginsSearchReq = { query: string, };
+
+export type CmdPluginsUninstallReq = { pluginId: string, };
+
+export type CmdPluginsUpdateAllReq = Record<string, never>;
+
+export type CmdPluginsUpdatesReq = Record<string, never>;
+
+export type CmdReloadPluginsReq = Record<string, never>;
+
+export type CmdRenderTemplateReq = { template: string, workspaceId: string, environmentId: string | null, purpose: RenderPurpose | null, ignoreError: boolean | null, };
+
+export type CmdRestartReq = Record<string, never>;
+
+export type CmdRevealWorkspaceKeyReq = { workspaceId: string, };
+
+export type CmdSaveBase64ToBinaryReq = { filepath: string, data: string, };
+
+export type CmdSaveResponseReq = { responseId: string, filepath: string, };
+
+export type CmdSecureTemplateReq = { template: string, };
+
+export type CmdSendEphemeralRequestReq = { request: HttpRequest, environmentId: string | null, cookieJarId: string | null, };
+
+export type CmdSendFeedbackReq = { feature: string, text: string, };
+
+export type CmdSendHttpRequestReq = { environmentId: string | null, cookieJarId: string | null, requestId: string, };
+
+export type CmdSetWorkspaceKeyReq = { workspaceId: string, key: string, };
+
+export type CmdSyncApplyReq = { syncOps: Array<SyncOp>, syncDir: string, workspaceId: string, };
+
+export type CmdSyncCalculateFsReq = { dir: string, };
+
+export type CmdSyncCalculateReq = { workspaceId: string, syncDir: string, };
+
+export type CmdSyncWatchReq = { syncDir: string, workspaceId: string, streamId: string, };
+
+export type CmdTemplateFunctionConfigReq = { functionName: string, values: { [key in string]?: JsonPrimitive }, model: AnyModel, environmentId: string | null, };
+
+export type CmdTemplateFunctionSummariesReq = Record<string, never>;
+
+export type CmdTemplateTokensToStringReq = { tokens: Tokens, };
+
+export type CmdWebsocketRequestActionsReq = Record<string, never>;
+
+export type CmdWorkspaceActionsReq = Record<string, never>;
+
+export type CmdWsCloseReq = { connectionId: string, };
+
+export type CmdWsConnectReq = { requestId: string, environmentId: string | null, cookieJarId: string | null, };
+
+export type CmdWsDeleteConnectionsReq = { requestId: string, };
+
+export type CmdWsSendReq = { connectionId: string, environmentId: string | null, };
+
+/**
+ * An unsaved response and its body.
+ *
+ * The body rides along because nothing stored it: there is no database row to
+ * look up later and no file for a host to read, so this is the caller's only
+ * copy.
+ */
+export type EphemeralHttpResponse = { response: HttpResponse, body: Array<number>, };
+
+/**
+ * Returned by the two watch commands: the name of the event to emit to stop
+ * the watcher.
+ */
+export type GitWatchResult = { unlistenEvent: string, };
+
+export type ModelsDeleteReq = { model: AnyModel, };
+
+export type ModelsDuplicateReq = { modelType: string, modelId: string, };
+
+export type ModelsGetGraphqlIntrospectionReq = { requestId: string, };
+
+export type ModelsGetSettingsReq = Record<string, never>;
+
+export type ModelsGrpcEventsReq = { connectionId: string, };
+
+export type ModelsUpsertGraphqlIntrospectionReq = { requestId: string, workspaceId: string, content: string | null, };
+
+export type ModelsUpsertReq = { model: AnyModel, };
+
+export type ModelsWebsocketEventsReq = { connectionId: string, };
+
+export type ModelsWorkspaceModelsReq = { workspaceId: string | null, };
+
+export type RpcSchema = { cmd_metadata: [CmdMetadataReq, AppMetaData], cmd_template_tokens_to_string: [CmdTemplateTokensToStringReq, string], cmd_render_template: [CmdRenderTemplateReq, string], cmd_send_feedback: [CmdSendFeedbackReq, null], cmd_dismiss_notification: [CmdDismissNotificationReq, null], cmd_grpc_reflect: [CmdGrpcReflectReq, Array<ServiceDefinition>], cmd_grpc_go: [CmdGrpcGoReq, string], cmd_restart: [CmdRestartReq, null], cmd_send_ephemeral_request: [CmdSendEphemeralRequestReq, EphemeralHttpResponse], cmd_format_json: [CmdFormatJsonReq, string], cmd_format_graphql: [CmdFormatGraphqlReq, string], cmd_http_response_body: [CmdHttpResponseBodyReq, FilterResponse], cmd_http_response_body_path: [CmdHttpResponseBodyPathReq, string | null], cmd_http_request_body: [CmdHttpRequestBodyReq, Array<number> | null], cmd_get_sse_events: [CmdGetSseEventsReq, Array<ServerSentEvent>], cmd_get_http_response_events: [CmdGetHttpResponseEventsReq, Array<HttpResponseEvent>], cmd_import_data: [CmdImportDataReq, ImportPlan], cmd_import_url: [CmdImportUrlReq, ImportPlan], cmd_commit_import: [CmdCommitImportReq, BatchUpsertResult], cmd_list_import_sources: [CmdListImportSourcesReq, Array<ImportSource>], cmd_import_sources_for_origin: [CmdImportSourcesForOriginReq, Array<ImportSource>], cmd_http_request_actions: [CmdHttpRequestActionsReq, Array<GetHttpRequestActionsResponse>], cmd_websocket_request_actions: [CmdWebsocketRequestActionsReq, Array<GetWebsocketRequestActionsResponse>], cmd_call_websocket_request_action: [CmdCallWebsocketRequestActionReq, null], cmd_workspace_actions: [CmdWorkspaceActionsReq, Array<GetWorkspaceActionsResponse>], cmd_call_workspace_action: [CmdCallWorkspaceActionReq, null], cmd_folder_actions: [CmdFolderActionsReq, Array<GetFolderActionsResponse>], cmd_call_folder_action: [CmdCallFolderActionReq, null], cmd_grpc_request_actions: [CmdGrpcRequestActionsReq, Array<GetGrpcRequestActionsResponse>], cmd_template_function_summaries: [CmdTemplateFunctionSummariesReq, Array<GetTemplateFunctionSummaryResponse>], cmd_template_function_config: [CmdTemplateFunctionConfigReq, GetTemplateFunctionConfigResponse], cmd_get_http_authentication_summaries: [CmdGetHttpAuthenticationSummariesReq, Array<GetHttpAuthenticationSummaryResponse>], cmd_get_http_authentication_config: [CmdGetHttpAuthenticationConfigReq, GetHttpAuthenticationConfigResponse], cmd_call_http_request_action: [CmdCallHttpRequestActionReq, null], cmd_call_grpc_request_action: [CmdCallGrpcRequestActionReq, null], cmd_call_http_authentication_action: [CmdCallHttpAuthenticationActionReq, null], cmd_curl_to_request: [CmdCurlToRequestReq, HttpRequest], cmd_export_data: [CmdExportDataReq, string], cmd_create_example_workspace: [CmdCreateExampleWorkspaceReq, BatchUpsertResult], cmd_save_base64_to_binary: [CmdSaveBase64ToBinaryReq, null], cmd_save_response: [CmdSaveResponseReq, null], cmd_send_http_request: [CmdSendHttpRequestReq, HttpResponse], cmd_reload_plugins: [CmdReloadPluginsReq, Array<[string, string]>], cmd_plugin_info: [CmdPluginInfoReq, PluginMetadata], cmd_delete_all_grpc_connections: [CmdDeleteAllGrpcConnectionsReq, null], cmd_delete_send_history: [CmdDeleteSendHistoryReq, null], cmd_delete_all_http_responses: [CmdDeleteAllHttpResponsesReq, null], cmd_get_workspace_meta: [CmdGetWorkspaceMetaReq, WorkspaceMeta], cmd_new_child_window: [CmdNewChildWindowReq, null], cmd_new_main_window: [CmdNewMainWindowReq, null], cmd_check_for_updates: [CmdCheckForUpdatesReq, boolean], cmd_decrypt_template: [CmdDecryptTemplateReq, string], cmd_secure_template: [CmdSecureTemplateReq, string], cmd_get_themes: [CmdGetThemesReq, Array<GetThemesResponse>], cmd_enable_encryption: [CmdEnableEncryptionReq, null], cmd_reveal_workspace_key: [CmdRevealWorkspaceKeyReq, string], cmd_set_workspace_key: [CmdSetWorkspaceKeyReq, null], cmd_disable_encryption: [CmdDisableEncryptionReq, null], cmd_default_headers: [CmdDefaultHeadersReq, Array<HttpRequestHeader>], models_upsert: [ModelsUpsertReq, string], models_delete: [ModelsDeleteReq, string], models_duplicate: [ModelsDuplicateReq, string], models_websocket_events: [ModelsWebsocketEventsReq, Array<WebsocketEvent>], models_grpc_events: [ModelsGrpcEventsReq, Array<GrpcEvent>], models_get_settings: [ModelsGetSettingsReq, Settings], models_get_graphql_introspection: [ModelsGetGraphqlIntrospectionReq, GraphQlIntrospection | null], models_upsert_graphql_introspection: [ModelsUpsertGraphqlIntrospectionReq, GraphQlIntrospection], models_workspace_models: [ModelsWorkspaceModelsReq, string], cmd_git_checkout: [CmdGitCheckoutReq, string], cmd_git_branch: [CmdGitBranchReq, null], cmd_git_delete_branch: [CmdGitDeleteBranchReq, BranchDeleteResult], cmd_git_delete_remote_branch: [CmdGitDeleteRemoteBranchReq, null], cmd_git_merge_branch: [CmdGitMergeBranchReq, null], cmd_git_rename_branch: [CmdGitRenameBranchReq, null], cmd_git_status: [CmdGitStatusReq, GitStatusSummary], cmd_git_branch_info: [CmdGitBranchInfoReq, GitBranchInfo], cmd_git_worktree_status: [CmdGitWorktreeStatusReq, GitWorktreeStatus], cmd_git_log: [CmdGitLogReq, Array<GitCommit>], cmd_git_log_for_file: [CmdGitLogForFileReq, Array<GitCommit>], cmd_git_file_diff_for_commit: [CmdGitFileDiffForCommitReq, GitFileDiff], cmd_git_initialize: [CmdGitInitializeReq, null], cmd_git_clone: [CmdGitCloneReq, CloneResult], cmd_git_commit: [CmdGitCommitReq, null], cmd_git_fetch_all: [CmdGitFetchAllReq, null], cmd_git_push: [CmdGitPushReq, PushResult], cmd_git_pull: [CmdGitPullReq, PullResult], cmd_git_pull_force_reset: [CmdGitPullForceResetReq, PullResult], cmd_git_pull_merge: [CmdGitPullMergeReq, PullResult], cmd_git_add: [CmdGitAddReq, null], cmd_git_unstage: [CmdGitUnstageReq, null], cmd_git_reset_changes: [CmdGitResetChangesReq, null], cmd_git_restore_files: [CmdGitRestoreFilesReq, null], cmd_git_restore_file_from_commit: [CmdGitRestoreFileFromCommitReq, null], cmd_git_add_credential: [CmdGitAddCredentialReq, null], cmd_git_remotes: [CmdGitRemotesReq, Array<GitRemote>], cmd_git_add_remote: [CmdGitAddRemoteReq, GitRemote], cmd_git_rm_remote: [CmdGitRmRemoteReq, null], cmd_sync_calculate: [CmdSyncCalculateReq, Array<SyncOp>], cmd_sync_calculate_fs: [CmdSyncCalculateFsReq, Array<SyncOp>], cmd_sync_apply: [CmdSyncApplyReq, null], cmd_ws_delete_connections: [CmdWsDeleteConnectionsReq, null], cmd_ws_send: [CmdWsSendReq, WebsocketConnection], cmd_ws_close: [CmdWsCloseReq, WebsocketConnection], cmd_ws_connect: [CmdWsConnectReq, WebsocketConnection], cmd_plugins_search: [CmdPluginsSearchReq, PluginSearchResponse], cmd_plugins_install: [CmdPluginsInstallReq, null], cmd_plugins_install_from_directory: [CmdPluginsInstallFromDirectoryReq, Plugin], cmd_plugins_uninstall: [CmdPluginsUninstallReq, Plugin], cmd_plugin_init_errors: [CmdPluginInitErrorsReq, Array<[string, string]>], cmd_plugins_updates: [CmdPluginsUpdatesReq, PluginUpdatesResponse], cmd_plugins_update_all: [CmdPluginsUpdateAllReq, Array<PluginNameVersion>], cmd_git_watch_worktree_status: [CmdGitWatchWorktreeStatusReq, GitWatchResult], cmd_sync_watch: [CmdSyncWatchReq, WatchResult], };
+
+export type WatchResult = { unlistenEvent: string, };
diff --git a/crates/common/yaak-rpc-schema/bindings/gen_search.ts b/crates/common/yaak-rpc-schema/bindings/gen_search.ts
new file mode 100644
index 0000000..dd3c1ad
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/gen_search.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type PluginMetadata = { version: string, name: string, displayName: string, description: string | null, homepageUrl: string | null, repositoryUrl: string | null, };
+
+export type PluginVersion = { id: string, version: string, url: string, description: string | null, name: string, displayName: string, homepageUrl: string | null, repositoryUrl: string | null, checksum: string, readme: string | null, yanked: boolean, };
diff --git a/crates/common/yaak-rpc-schema/bindings/gen_sync.ts b/crates/common/yaak-rpc-schema/bindings/gen_sync.ts
new file mode 100644
index 0000000..49b168b
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/gen_sync.ts
@@ -0,0 +1,6 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { SyncModel, SyncState } from "./gen_models";
+
+export type FsCandidate = { "type": "FsCandidate", model: SyncModel, relPath: string, checksum: string, };
+
+export type SyncOp = { "type": "fsCreate", model: SyncModel, } | { "type": "fsUpdate", model: SyncModel, state: SyncState, } | { "type": "fsDelete", state: SyncState, fs: FsCandidate | null, } | { "type": "dbCreate", fs: FsCandidate, } | { "type": "dbUpdate", state: SyncState, fs: FsCandidate, } | { "type": "dbDelete", model: SyncModel, state: SyncState, } | { "type": "ignorePrivate", model: SyncModel, };
diff --git a/crates/common/yaak-rpc-schema/bindings/gen_util.ts b/crates/common/yaak-rpc-schema/bindings/gen_util.ts
new file mode 100644
index 0000000..3217af2
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/gen_util.ts
@@ -0,0 +1,107 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type {
+  Environment,
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from "./gen_models";
+
+export type BatchUpsertResult = {
+  workspaces: Array<Workspace>;
+  environments: Array<Environment>;
+  folders: Array<Folder>;
+  httpRequests: Array<HttpRequest>;
+  grpcRequests: Array<GrpcRequest>;
+  websocketRequests: Array<WebsocketRequest>;
+};
+
+export type ImportConflictResolution = "keep_mine" | "take_source";
+
+/**
+ * Where a staged import will be committed.
+ *
+ * The destination workspace and optional folder IDs are captured in the plan so the preview describes
+ * the exact destination that confirmation will use.
+ */
+export type ImportDestination =
+  | { type: "new_workspace" }
+  | { type: "existing_workspace"; workspaceId: string; folderId?: string };
+
+/**
+ * Where an import's contents came from, used to link the committed workspace back to it.
+ */
+export type ImportOrigin = {
+  /**
+   * The absolute file path or URL the contents were read from.
+   */
+  origin: string;
+  label: string;
+};
+
+export type ImportPlan = {
+  importer: string;
+  destination: ImportDestination;
+  resources: BatchUpsertResult;
+  warnings: Array<ImportPlanWarning>;
+  /**
+   * Stable source key for every model in `resources`, keyed by its planned ID.
+   */
+  sourceKeys: { [key in string]?: string };
+  /**
+   * One entry per plannable resource; commit applies only the selected ones.
+   */
+  items: Array<ImportPlanItem>;
+  origin?: ImportOrigin;
+};
+
+export type ImportPlanAction =
+  | "create"
+  | "update"
+  | "delete"
+  | "unchanged"
+  | "keep_local"
+  | "conflict"
+  | "ignored";
+
+export type ImportPlanItem = {
+  action: ImportPlanAction;
+  model: ImportResourceType;
+  modelId: string;
+  name: string;
+  /**
+   * Planned parent folder ID for incoming resources; current parent for deletions.
+   */
+  parentId?: string;
+  selected: boolean;
+  resolution?: ImportConflictResolution;
+  reason?: ImportPlanReason;
+  /**
+   * Fields where the source and the local copy disagree, so the preview can say why
+   */
+  changedFields: Array<string>;
+};
+
+/**
+ * Extra context for an action that would otherwise be indistinguishable from its plain form.
+ */
+export type ImportPlanReason = "moved_into_ignored_folder";
+
+export type ImportPlanWarning = { title: string; detail: string; level: ImportPlanWarningLevel };
+
+/**
+ * Whether a plan's note is something to know or something to think twice about.
+ */
+export type ImportPlanWarningLevel = "info" | "warning";
+
+/**
+ * The model types an import plan can contain.
+ */
+export type ImportResourceType =
+  | "environment"
+  | "folder"
+  | "grpc_request"
+  | "http_request"
+  | "websocket_request"
+  | "workspace";
diff --git a/crates/common/yaak-rpc-schema/bindings/parser.ts b/crates/common/yaak-rpc-schema/bindings/parser.ts
new file mode 100644
index 0000000..956b93a
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/parser.ts
@@ -0,0 +1,9 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type FnArg = { name: string, value: Val, };
+
+export type Token = { "type": "raw", text: string, } | { "type": "tag", val: Val, } | { "type": "eof" };
+
+export type Tokens = { tokens: Array<Token>, };
+
+export type Val = { "type": "str", text: string, } | { "type": "var", name: string, } | { "type": "bool", value: boolean, } | { "type": "fn", name: string, args: Array<FnArg>, } | { "type": "null" };
diff --git a/crates/common/yaak-rpc-schema/bindings/sse.ts b/crates/common/yaak-rpc-schema/bindings/sse.ts
new file mode 100644
index 0000000..e70fa19
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/bindings/sse.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type ServerSentEvent = { eventType: string, data: string, id: string | null, retry: bigint | null, };
diff --git a/crates/common/yaak-rpc-schema/index.ts b/crates/common/yaak-rpc-schema/index.ts
new file mode 100644
index 0000000..811ff4d
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/index.ts
@@ -0,0 +1,4 @@
+// The RPC wire schema, generated by ts-rs from the Rust declarations in
+// src/lib.rs. `RpcSchema` maps every command name to its (request, response)
+// pair; the app's `rpc()` helper derives its command union from it.
+export * from "./bindings/gen_rpc";
diff --git a/crates/common/yaak-rpc-schema/package.json b/crates/common/yaak-rpc-schema/package.json
new file mode 100644
index 0000000..adc1d72
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/rpc-schema",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates/common/yaak-rpc-schema/src/lib.rs b/crates/common/yaak-rpc-schema/src/lib.rs
new file mode 100644
index 0000000..75d4876
--- /dev/null
+++ b/crates/common/yaak-rpc-schema/src/lib.rs
@@ -0,0 +1,1054 @@
+//! The wire schema for the app's RPC surface: every command name, its request
+//! payload, and its response type.
+//!
+//! This is the one place the frontend contract is declared. Each host — the
+//! desktop app, the bridge, anything that comes later — imports these types and
+//! implements the commands against them, so the shape of a request cannot
+//! drift between hosts and the TypeScript bindings are generated once.
+//!
+//! Nothing here depends on Tauri or on any host. Request structs are plain data
+//! and the few response types declared here (rather than in an engine crate)
+//! are too. Command *bodies* live with the host that runs them.
+
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::path::PathBuf;
+use ts_rs::TS;
+use yaak_git::{
+    BranchDeleteResult, CloneResult, GitBranchInfo, GitCommit, GitFileDiff, GitRemote,
+    GitStatusSummary, GitWorktreeStatus, PullResult, PushResult,
+};
+use yaak_grpc::ServiceDefinition;
+use yaak_models::models::{
+    AnyModel, GraphQlIntrospection, GrpcEvent, HttpRequest, HttpRequestHeader, HttpResponse,
+    HttpResponseEvent, ImportSource, Plugin, Settings, WebsocketConnection, WebsocketEvent,
+    WorkspaceMeta,
+};
+use yaak_models::util::{BatchUpsertResult, ImportDestination, ImportPlan};
+use yaak_plugins::api::{PluginNameVersion, PluginSearchResponse, PluginUpdatesResponse};
+use yaak_plugins::events::{
+    CallFolderActionRequest, CallGrpcRequestActionRequest, CallHttpRequestActionRequest,
+    CallWebsocketRequestActionRequest, CallWorkspaceActionRequest, FilterResponse,
+    GetFolderActionsResponse, GetGrpcRequestActionsResponse, GetHttpAuthenticationConfigResponse,
+    GetHttpAuthenticationSummaryResponse, GetHttpRequestActionsResponse,
+    GetTemplateFunctionConfigResponse, GetTemplateFunctionSummaryResponse, GetThemesResponse,
+    GetWebsocketRequestActionsResponse, GetWorkspaceActionsResponse, JsonPrimitive, RenderPurpose,
+};
+use yaak_plugins::plugin_meta::PluginMetadata;
+use yaak_sse::sse::ServerSentEvent;
+use yaak_sync::sync::SyncOp;
+use yaak_templates::Tokens;
+
+// -- Response types that belong to the schema rather than to an engine crate --
+
+/// What the frontend learns about the host it is talking to.
+#[derive(Debug, Default, Serialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct AppMetaData {
+    pub is_dev: bool,
+    pub version: String,
+    pub cli_version: Option<String>,
+    pub name: String,
+    pub app_data_dir: String,
+    pub app_log_dir: String,
+    pub vendored_plugin_dir: String,
+    pub default_project_dir: String,
+    pub feature_updater: bool,
+    pub feature_license: bool,
+}
+
+/// Returned by the two watch commands: the name of the event to emit to stop
+/// the watcher.
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct GitWatchResult {
+    pub unlisten_event: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct WatchResult {
+    pub unlisten_event: String,
+}
+
+// -- Request payloads --
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitWatchWorktreeStatusReq {
+    pub dir: PathBuf,
+    pub stream_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSyncWatchReq {
+    pub sync_dir: PathBuf,
+    pub workspace_id: String,
+    pub stream_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdMetadataReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdTemplateTokensToStringReq {
+    pub tokens: Tokens,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdRenderTemplateReq {
+    pub template: String,
+    pub workspace_id: String,
+    pub environment_id: Option<String>,
+    pub purpose: Option<RenderPurpose>,
+    pub ignore_error: Option<bool>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSendFeedbackReq {
+    pub feature: String,
+    pub text: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdDismissNotificationReq {
+    pub notification_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGrpcReflectReq {
+    pub request_id: String,
+    pub environment_id: Option<String>,
+    pub proto_files: Vec<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGrpcGoReq {
+    pub request_id: String,
+    pub environment_id: Option<String>,
+    pub proto_files: Vec<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdRestartReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSendEphemeralRequestReq {
+    pub request: HttpRequest,
+    pub environment_id: Option<String>,
+    pub cookie_jar_id: Option<String>,
+}
+
+/// An unsaved response and its body.
+///
+/// The body rides along because nothing stored it: there is no database row to
+/// look up later and no file for a host to read, so this is the caller's only
+/// copy.
+#[derive(Debug, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct EphemeralHttpResponse {
+    pub response: HttpResponse,
+    pub body: Vec<u8>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdFormatJsonReq {
+    pub text: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdFormatGraphqlReq {
+    pub text: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdHttpResponseBodyReq {
+    pub response_id: String,
+    pub filter: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdHttpResponseBodyPathReq {
+    pub response_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdHttpRequestBodyReq {
+    pub response_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGetSseEventsReq {
+    pub response_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGetHttpResponseEventsReq {
+    pub response_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdImportDataReq {
+    pub file_path: String,
+    pub destination: ImportDestination,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdImportUrlReq {
+    pub url: String,
+    pub destination: ImportDestination,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCommitImportReq {
+    pub plan: ImportPlan,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdListImportSourcesReq {
+    pub workspace_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdImportSourcesForOriginReq {
+    #[ts(optional)]
+    pub file_path: Option<String>,
+    #[ts(optional)]
+    pub url: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdHttpRequestActionsReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdWebsocketRequestActionsReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCallWebsocketRequestActionReq {
+    pub req: CallWebsocketRequestActionRequest,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdWorkspaceActionsReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCallWorkspaceActionReq {
+    pub req: CallWorkspaceActionRequest,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdFolderActionsReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCallFolderActionReq {
+    pub req: CallFolderActionRequest,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGrpcRequestActionsReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdTemplateFunctionSummariesReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdTemplateFunctionConfigReq {
+    pub function_name: String,
+    pub values: HashMap<String, JsonPrimitive>,
+    pub model: AnyModel,
+    pub environment_id: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGetHttpAuthenticationSummariesReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGetHttpAuthenticationConfigReq {
+    pub auth_name: String,
+    pub values: HashMap<String, JsonPrimitive>,
+    pub model: AnyModel,
+    pub environment_id: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCallHttpRequestActionReq {
+    pub req: CallHttpRequestActionRequest,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCallGrpcRequestActionReq {
+    pub req: CallGrpcRequestActionRequest,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCallHttpAuthenticationActionReq {
+    pub auth_name: String,
+    pub action_index: i32,
+    pub values: HashMap<String, JsonPrimitive>,
+    pub model: AnyModel,
+    pub environment_id: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCurlToRequestReq {
+    pub command: String,
+    pub workspace_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCreateExampleWorkspaceReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdExportDataReq {
+    pub workspace_ids: Vec<String>,
+    pub include_private_environments: bool,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSaveBase64ToBinaryReq {
+    pub filepath: String,
+    pub data: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSaveResponseReq {
+    pub response_id: String,
+    pub filepath: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSendHttpRequestReq {
+    pub environment_id: Option<String>,
+    pub cookie_jar_id: Option<String>,
+    pub request_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdReloadPluginsReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdPluginInfoReq {
+    pub id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdDeleteAllGrpcConnectionsReq {
+    pub request_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdDeleteSendHistoryReq {
+    pub workspace_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdDeleteAllHttpResponsesReq {
+    pub request_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGetWorkspaceMetaReq {
+    pub workspace_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdNewChildWindowReq {
+    pub url: String,
+    pub label: String,
+    pub title: String,
+    pub inner_size: (f64, f64),
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdNewMainWindowReq {
+    pub url: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdCheckForUpdatesReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdDecryptTemplateReq {
+    pub template: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSecureTemplateReq {
+    pub template: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGetThemesReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdEnableEncryptionReq {
+    pub workspace_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdRevealWorkspaceKeyReq {
+    pub workspace_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSetWorkspaceKeyReq {
+    pub workspace_id: String,
+    pub key: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdDisableEncryptionReq {
+    pub workspace_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdDefaultHeadersReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ModelsUpsertReq {
+    pub model: AnyModel,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ModelsDeleteReq {
+    pub model: AnyModel,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ModelsDuplicateReq {
+    pub model_type: String,
+    pub model_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ModelsWebsocketEventsReq {
+    pub connection_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ModelsGrpcEventsReq {
+    pub connection_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ModelsGetSettingsReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ModelsGetGraphqlIntrospectionReq {
+    pub request_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ModelsUpsertGraphqlIntrospectionReq {
+    pub request_id: String,
+    pub workspace_id: String,
+    pub content: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct ModelsWorkspaceModelsReq {
+    pub workspace_id: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitCheckoutReq {
+    pub dir: PathBuf,
+    pub branch: String,
+    pub force: bool,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitBranchReq {
+    pub dir: PathBuf,
+    pub branch: String,
+    pub base: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitDeleteBranchReq {
+    pub dir: PathBuf,
+    pub branch: String,
+    pub force: Option<bool>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitDeleteRemoteBranchReq {
+    pub dir: PathBuf,
+    pub branch: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitMergeBranchReq {
+    pub dir: PathBuf,
+    pub branch: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitRenameBranchReq {
+    pub dir: PathBuf,
+    pub old_name: String,
+    pub new_name: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitStatusReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitBranchInfoReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitWorktreeStatusReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitLogReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitLogForFileReq {
+    pub dir: PathBuf,
+    pub rela_path: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitFileDiffForCommitReq {
+    pub dir: PathBuf,
+    pub commit_oid: String,
+    pub rela_path: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitInitializeReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitCloneReq {
+    pub url: String,
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitCommitReq {
+    pub dir: PathBuf,
+    pub message: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitFetchAllReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitPushReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitPullReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitPullForceResetReq {
+    pub dir: PathBuf,
+    pub remote: String,
+    pub branch: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitPullMergeReq {
+    pub dir: PathBuf,
+    pub remote: String,
+    pub branch: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitAddReq {
+    pub dir: PathBuf,
+    pub rela_paths: Vec<PathBuf>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitUnstageReq {
+    pub dir: PathBuf,
+    pub rela_paths: Vec<PathBuf>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitResetChangesReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitRestoreFilesReq {
+    pub dir: PathBuf,
+    pub rela_paths: Vec<PathBuf>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitRestoreFileFromCommitReq {
+    pub dir: PathBuf,
+    pub commit_oid: String,
+    pub rela_path: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitAddCredentialReq {
+    pub remote_url: String,
+    pub username: String,
+    pub password: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitRemotesReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitAddRemoteReq {
+    pub dir: PathBuf,
+    pub name: String,
+    pub url: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdGitRmRemoteReq {
+    pub dir: PathBuf,
+    pub name: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSyncCalculateReq {
+    pub workspace_id: String,
+    pub sync_dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSyncCalculateFsReq {
+    pub dir: PathBuf,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdSyncApplyReq {
+    pub sync_ops: Vec<SyncOp>,
+    pub sync_dir: PathBuf,
+    pub workspace_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdWsDeleteConnectionsReq {
+    pub request_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdWsSendReq {
+    pub connection_id: String,
+    pub environment_id: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdWsCloseReq {
+    pub connection_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdWsConnectReq {
+    pub request_id: String,
+    pub environment_id: Option<String>,
+    pub cookie_jar_id: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdPluginsSearchReq {
+    pub query: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdPluginsInstallReq {
+    pub name: String,
+    pub version: Option<String>,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdPluginsInstallFromDirectoryReq {
+    pub directory: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdPluginsUninstallReq {
+    pub plugin_id: String,
+}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdPluginInitErrorsReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdPluginsUpdatesReq {}
+
+#[derive(Debug, Deserialize, TS)]
+#[ts(export, export_to = "gen_rpc.ts")]
+pub struct CmdPluginsUpdateAllReq {}
+
+// -- The command list --
+
+/// Declare the command list once, then hand it to a host.
+///
+/// Every host builds its router from the same list by passing a macro of its
+/// own that receives `name(ReqType) -> ResType` triples: the schema stays the
+/// single source of truth for *what* commands exist, and each host decides
+/// *how* — which handler runs, or whether the command is unsupported there.
+///
+/// ```ignore
+/// macro_rules! register { ( $( $name:ident ( $req:ty ) -> $res:ty ),* $(,)? ) => { ... } }
+/// yaak_rpc_schema::with_commands!(register);
+/// ```
+#[macro_export]
+macro_rules! with_commands {
+    ($callback:ident) => {
+        $callback! {
+    cmd_metadata(CmdMetadataReq) -> AppMetaData,
+    cmd_template_tokens_to_string(CmdTemplateTokensToStringReq) -> String,
+    cmd_render_template(CmdRenderTemplateReq) -> String,
+    cmd_send_feedback(CmdSendFeedbackReq) -> (),
+    cmd_dismiss_notification(CmdDismissNotificationReq) -> (),
+    cmd_grpc_reflect(CmdGrpcReflectReq) -> Vec<ServiceDefinition>,
+    cmd_grpc_go(CmdGrpcGoReq) -> String,
+    cmd_restart(CmdRestartReq) -> (),
+    cmd_send_ephemeral_request(CmdSendEphemeralRequestReq) -> EphemeralHttpResponse,
+    cmd_format_json(CmdFormatJsonReq) -> String,
+    cmd_format_graphql(CmdFormatGraphqlReq) -> String,
+    cmd_http_response_body(CmdHttpResponseBodyReq) -> FilterResponse,
+    cmd_http_response_body_path(CmdHttpResponseBodyPathReq) -> Option<String>,
+    cmd_http_request_body(CmdHttpRequestBodyReq) -> Option<Vec<u8>>,
+    cmd_get_sse_events(CmdGetSseEventsReq) -> Vec<ServerSentEvent>,
+    cmd_get_http_response_events(CmdGetHttpResponseEventsReq) -> Vec<HttpResponseEvent>,
+    cmd_import_data(CmdImportDataReq) -> ImportPlan,
+    cmd_import_url(CmdImportUrlReq) -> ImportPlan,
+    cmd_commit_import(CmdCommitImportReq) -> BatchUpsertResult,
+    cmd_list_import_sources(CmdListImportSourcesReq) -> Vec<ImportSource>,
+    cmd_import_sources_for_origin(CmdImportSourcesForOriginReq) -> Vec<ImportSource>,
+    cmd_http_request_actions(CmdHttpRequestActionsReq) -> Vec<GetHttpRequestActionsResponse>,
+    cmd_websocket_request_actions(CmdWebsocketRequestActionsReq) -> Vec<GetWebsocketRequestActionsResponse>,
+    cmd_call_websocket_request_action(CmdCallWebsocketRequestActionReq) -> (),
+    cmd_workspace_actions(CmdWorkspaceActionsReq) -> Vec<GetWorkspaceActionsResponse>,
+    cmd_call_workspace_action(CmdCallWorkspaceActionReq) -> (),
+    cmd_folder_actions(CmdFolderActionsReq) -> Vec<GetFolderActionsResponse>,
+    cmd_call_folder_action(CmdCallFolderActionReq) -> (),
+    cmd_grpc_request_actions(CmdGrpcRequestActionsReq) -> Vec<GetGrpcRequestActionsResponse>,
+    cmd_template_function_summaries(CmdTemplateFunctionSummariesReq) -> Vec<GetTemplateFunctionSummaryResponse>,
+    cmd_template_function_config(CmdTemplateFunctionConfigReq) -> GetTemplateFunctionConfigResponse,
+    cmd_get_http_authentication_summaries(CmdGetHttpAuthenticationSummariesReq) -> Vec<GetHttpAuthenticationSummaryResponse>,
+    cmd_get_http_authentication_config(CmdGetHttpAuthenticationConfigReq) -> GetHttpAuthenticationConfigResponse,
+    cmd_call_http_request_action(CmdCallHttpRequestActionReq) -> (),
+    cmd_call_grpc_request_action(CmdCallGrpcRequestActionReq) -> (),
+    cmd_call_http_authentication_action(CmdCallHttpAuthenticationActionReq) -> (),
+    cmd_curl_to_request(CmdCurlToRequestReq) -> HttpRequest,
+    cmd_export_data(CmdExportDataReq) -> String,
+    cmd_create_example_workspace(CmdCreateExampleWorkspaceReq) -> BatchUpsertResult,
+    cmd_save_base64_to_binary(CmdSaveBase64ToBinaryReq) -> (),
+    cmd_save_response(CmdSaveResponseReq) -> (),
+    cmd_send_http_request(CmdSendHttpRequestReq) -> HttpResponse,
+    cmd_reload_plugins(CmdReloadPluginsReq) -> Vec<(String, String)>,
+    cmd_plugin_info(CmdPluginInfoReq) -> PluginMetadata,
+    cmd_delete_all_grpc_connections(CmdDeleteAllGrpcConnectionsReq) -> (),
+    cmd_delete_send_history(CmdDeleteSendHistoryReq) -> (),
+    cmd_delete_all_http_responses(CmdDeleteAllHttpResponsesReq) -> (),
+    cmd_get_workspace_meta(CmdGetWorkspaceMetaReq) -> WorkspaceMeta,
+    cmd_new_child_window(CmdNewChildWindowReq) -> (),
+    cmd_new_main_window(CmdNewMainWindowReq) -> (),
+    cmd_check_for_updates(CmdCheckForUpdatesReq) -> bool,
+    cmd_decrypt_template(CmdDecryptTemplateReq) -> String,
+    cmd_secure_template(CmdSecureTemplateReq) -> String,
+    cmd_get_themes(CmdGetThemesReq) -> Vec<GetThemesResponse>,
+    cmd_enable_encryption(CmdEnableEncryptionReq) -> (),
+    cmd_reveal_workspace_key(CmdRevealWorkspaceKeyReq) -> String,
+    cmd_set_workspace_key(CmdSetWorkspaceKeyReq) -> (),
+    cmd_disable_encryption(CmdDisableEncryptionReq) -> (),
+    cmd_default_headers(CmdDefaultHeadersReq) -> Vec<HttpRequestHeader>,
+    models_upsert(ModelsUpsertReq) -> String,
+    models_delete(ModelsDeleteReq) -> String,
+    models_duplicate(ModelsDuplicateReq) -> String,
+    models_websocket_events(ModelsWebsocketEventsReq) -> Vec<WebsocketEvent>,
+    models_grpc_events(ModelsGrpcEventsReq) -> Vec<GrpcEvent>,
+    models_get_settings(ModelsGetSettingsReq) -> Settings,
+    models_get_graphql_introspection(ModelsGetGraphqlIntrospectionReq) -> Option<GraphQlIntrospection>,
+    models_upsert_graphql_introspection(ModelsUpsertGraphqlIntrospectionReq) -> GraphQlIntrospection,
+    models_workspace_models(ModelsWorkspaceModelsReq) -> String,
+    cmd_git_checkout(CmdGitCheckoutReq) -> String,
+    cmd_git_branch(CmdGitBranchReq) -> (),
+    cmd_git_delete_branch(CmdGitDeleteBranchReq) -> BranchDeleteResult,
+    cmd_git_delete_remote_branch(CmdGitDeleteRemoteBranchReq) -> (),
+    cmd_git_merge_branch(CmdGitMergeBranchReq) -> (),
+    cmd_git_rename_branch(CmdGitRenameBranchReq) -> (),
+    cmd_git_status(CmdGitStatusReq) -> GitStatusSummary,
+    cmd_git_branch_info(CmdGitBranchInfoReq) -> GitBranchInfo,
+    cmd_git_worktree_status(CmdGitWorktreeStatusReq) -> GitWorktreeStatus,
+    cmd_git_log(CmdGitLogReq) -> Vec<GitCommit>,
+    cmd_git_log_for_file(CmdGitLogForFileReq) -> Vec<GitCommit>,
+    cmd_git_file_diff_for_commit(CmdGitFileDiffForCommitReq) -> GitFileDiff,
+    cmd_git_initialize(CmdGitInitializeReq) -> (),
+    cmd_git_clone(CmdGitCloneReq) -> CloneResult,
+    cmd_git_commit(CmdGitCommitReq) -> (),
+    cmd_git_fetch_all(CmdGitFetchAllReq) -> (),
+    cmd_git_push(CmdGitPushReq) -> PushResult,
+    cmd_git_pull(CmdGitPullReq) -> PullResult,
+    cmd_git_pull_force_reset(CmdGitPullForceResetReq) -> PullResult,
+    cmd_git_pull_merge(CmdGitPullMergeReq) -> PullResult,
+    cmd_git_add(CmdGitAddReq) -> (),
+    cmd_git_unstage(CmdGitUnstageReq) -> (),
+    cmd_git_reset_changes(CmdGitResetChangesReq) -> (),
+    cmd_git_restore_files(CmdGitRestoreFilesReq) -> (),
+    cmd_git_restore_file_from_commit(CmdGitRestoreFileFromCommitReq) -> (),
+    cmd_git_add_credential(CmdGitAddCredentialReq) -> (),
+    cmd_git_remotes(CmdGitRemotesReq) -> Vec<GitRemote>,
+    cmd_git_add_remote(CmdGitAddRemoteReq) -> GitRemote,
+    cmd_git_rm_remote(CmdGitRmRemoteReq) -> (),
+    cmd_sync_calculate(CmdSyncCalculateReq) -> Vec<SyncOp>,
+    cmd_sync_calculate_fs(CmdSyncCalculateFsReq) -> Vec<SyncOp>,
+    cmd_sync_apply(CmdSyncApplyReq) -> (),
+    cmd_ws_delete_connections(CmdWsDeleteConnectionsReq) -> (),
+    cmd_ws_send(CmdWsSendReq) -> WebsocketConnection,
+    cmd_ws_close(CmdWsCloseReq) -> WebsocketConnection,
+    cmd_ws_connect(CmdWsConnectReq) -> WebsocketConnection,
+    cmd_plugins_search(CmdPluginsSearchReq) -> PluginSearchResponse,
+    cmd_plugins_install(CmdPluginsInstallReq) -> (),
+    cmd_plugins_install_from_directory(CmdPluginsInstallFromDirectoryReq) -> Plugin,
+    cmd_plugins_uninstall(CmdPluginsUninstallReq) -> Plugin,
+    cmd_plugin_init_errors(CmdPluginInitErrorsReq) -> Vec<(String, String)>,
+    cmd_plugins_updates(CmdPluginsUpdatesReq) -> PluginUpdatesResponse,
+    cmd_plugins_update_all(CmdPluginsUpdateAllReq) -> Vec<PluginNameVersion>,
+    cmd_git_watch_worktree_status(CmdGitWatchWorktreeStatusReq) -> GitWatchResult,
+    cmd_sync_watch(CmdSyncWatchReq) -> WatchResult,
+        }
+    };
+}
+
+// The TypeScript export: field name = command name, tuple = (request, response).
+// Generated from the same list the hosts build their routers from.
+macro_rules! declare_schema {
+    ( $( $name:ident ( $req:ty ) -> $res:ty ),* $(,)? ) => {
+        #[derive(TS)]
+        #[ts(export, export_to = "gen_rpc.ts")]
+        #[allow(non_snake_case, unused)]
+        pub struct RpcSchema {
+            $( pub $name: ($req, $res), )*
+        }
+    };
+}
+with_commands!(declare_schema);
diff --git a/crates/common/yaak-rpc/Cargo.toml b/crates/common/yaak-rpc/Cargo.toml
new file mode 100644
index 0000000..dfa0214
--- /dev/null
+++ b/crates/common/yaak-rpc/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "yaak-rpc"
+version = "0.0.0"
+edition = "2024"
+authors = ["Gregory Schier"]
+publish = false
+
+[dependencies]
+log = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+ts-rs = { workspace = true }
diff --git a/crates/common/yaak-rpc/src/lib.rs b/crates/common/yaak-rpc/src/lib.rs
new file mode 100644
index 0000000..05765cf
--- /dev/null
+++ b/crates/common/yaak-rpc/src/lib.rs
@@ -0,0 +1,259 @@
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::future::Future;
+use std::pin::Pin;
+use std::sync::mpsc;
+
+/// A boxed future, so handlers of different concrete types can share a map.
+pub type BoxFuture<T> = Pin<Box<dyn Future<Output = T> + Send + 'static>>;
+
+/// Type-erased handler function: takes context + JSON payload, returns JSON or error.
+///
+/// Handlers are async and take the context by value: the future outlives the
+/// `dispatch` call frame, so it cannot borrow, and contexts are cheap clones
+/// (handles and `Arc`s). Synchronous handlers wrap into this via `rpc_handler!`
+/// with no visible change.
+type HandlerFn<Ctx> = Box<
+    dyn Fn(Ctx, serde_json::Value) -> BoxFuture<Result<serde_json::Value, RpcError>> + Send + Sync,
+>;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct RpcError {
+    pub message: String,
+}
+
+impl std::fmt::Display for RpcError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{}", self.message)
+    }
+}
+
+impl std::error::Error for RpcError {}
+
+impl From<serde_json::Error> for RpcError {
+    fn from(e: serde_json::Error) -> Self {
+        Self { message: e.to_string() }
+    }
+}
+
+/// Incoming message from a client (Tauri invoke, WebSocket, etc.).
+#[derive(Debug, Deserialize)]
+pub struct RpcRequest {
+    pub id: String,
+    pub cmd: String,
+    #[serde(default)]
+    pub payload: serde_json::Value,
+}
+
+/// Outgoing response to a client.
+#[derive(Debug, Serialize)]
+#[serde(tag = "type")]
+pub enum RpcResponse {
+    Success {
+        id: String,
+        payload: serde_json::Value,
+    },
+    Error {
+        id: String,
+        error: String,
+    },
+}
+
+/// Transport-agnostic command router.
+///
+/// Register typed handler functions, then dispatch incoming JSON messages.
+/// Each transport adapter (Tauri, WebSocket, etc.) calls `dispatch()`.
+pub struct RpcRouter<Ctx> {
+    handlers: HashMap<&'static str, HandlerFn<Ctx>>,
+}
+
+impl<Ctx: Clone> RpcRouter<Ctx> {
+    pub fn new() -> Self {
+        Self { handlers: HashMap::new() }
+    }
+
+    /// Register a handler for a command name.
+    /// Use the `rpc_handler!` (sync) or `rpc_handler_async!` macro to wrap a typed function.
+    pub fn register(&mut self, cmd: &'static str, handler: HandlerFn<Ctx>) {
+        self.handlers.insert(cmd, handler);
+    }
+
+    /// Dispatch a command by name with a JSON payload.
+    pub async fn dispatch(
+        &self,
+        cmd: &str,
+        payload: serde_json::Value,
+        ctx: &Ctx,
+    ) -> Result<serde_json::Value, RpcError> {
+        match self.handlers.get(cmd) {
+            Some(handler) => handler(ctx.clone(), payload).await,
+            None => Err(RpcError { message: format!("unknown command: {cmd}") }),
+        }
+    }
+
+    /// Handle a full `RpcRequest`, returning an `RpcResponse`.
+    pub async fn handle(&self, req: RpcRequest, ctx: &Ctx) -> RpcResponse {
+        match self.dispatch(&req.cmd, req.payload, ctx).await {
+            Ok(payload) => RpcResponse::Success { id: req.id, payload },
+            Err(e) => RpcResponse::Error { id: req.id, error: e.message },
+        }
+    }
+
+    pub fn commands(&self) -> Vec<&'static str> {
+        self.handlers.keys().copied().collect()
+    }
+}
+
+/// A named event carrying a JSON payload, emitted from backend to frontend.
+#[derive(Debug, Clone, Serialize)]
+pub struct RpcEvent {
+    pub event: &'static str,
+    pub payload: serde_json::Value,
+}
+
+/// Channel-based event emitter. The backend calls `emit()`, the transport
+/// adapter (Tauri, WebSocket, etc.) drains the receiver and delivers events.
+#[derive(Clone)]
+pub struct RpcEventEmitter {
+    tx: mpsc::Sender<RpcEvent>,
+}
+
+impl RpcEventEmitter {
+    pub fn new() -> (Self, mpsc::Receiver<RpcEvent>) {
+        let (tx, rx) = mpsc::channel();
+        (Self { tx }, rx)
+    }
+
+    /// Emit a typed event. Serializes the payload to JSON.
+    pub fn emit<T: Serialize>(&self, event: &'static str, payload: &T) {
+        if let Ok(value) = serde_json::to_value(payload) {
+            let _ = self.tx.send(RpcEvent { event, payload: value });
+        }
+    }
+}
+
+/// Define RPC commands and events with a single source of truth.
+///
+/// Generates:
+/// - `build_router()` — creates an `RpcRouter` with all handlers registered
+/// - `RpcSchema` — a struct with ts-rs derives for TypeScript type generation
+/// - `RpcEventSchema` — (if events declared) a struct mapping event names to payload types
+///
+/// The wire name for each command/event is derived from `stringify!($ident)`.
+///
+/// # Example
+/// ```ignore
+/// define_rpc! {
+///     ProxyCtx;
+///     commands {
+///         proxy_start(ProxyStartRequest) -> ProxyStartResponse,
+///         proxy_stop(ProxyStopRequest) -> bool,
+///     }
+///     events {
+///         model_write(ModelPayload),
+///     }
+/// }
+/// ```
+#[macro_export]
+macro_rules! define_rpc {
+    // With both commands and events
+    (
+        $ctx:ty;
+        commands {
+            $( $handler:ident ( $req:ty ) -> $res:ty ),* $(,)?
+        }
+        events {
+            $( $evt_ident:ident ( $evt_payload:ty ) ),* $(,)?
+        }
+    ) => {
+        pub fn build_router() -> $crate::RpcRouter<$ctx> {
+            let mut router = $crate::RpcRouter::new();
+            $( router.register(stringify!($handler), $crate::rpc_handler!($handler)); )*
+            router
+        }
+
+        #[derive(ts_rs::TS)]
+        #[ts(export, export_to = "gen_rpc.ts")]
+        pub struct RpcSchema {
+            $( pub $handler: ($req, $res), )*
+        }
+
+        #[derive(ts_rs::TS)]
+        #[ts(export, export_to = "gen_rpc.ts")]
+        pub struct RpcEventSchema {
+            $( pub $evt_ident: $evt_payload, )*
+        }
+    };
+
+    // Commands only (no events)
+    (
+        $ctx:ty;
+        commands {
+            $( $handler:ident ( $req:ty ) -> $res:ty ),* $(,)?
+        }
+    ) => {
+        pub fn build_router() -> $crate::RpcRouter<$ctx> {
+            let mut router = $crate::RpcRouter::new();
+            $( router.register(stringify!($handler), $crate::rpc_handler!($handler)); )*
+            router
+        }
+
+        #[derive(ts_rs::TS)]
+        #[ts(export, export_to = "gen_rpc.ts")]
+        pub struct RpcSchema {
+            $( pub $handler: ($req, $res), )*
+        }
+    };
+}
+
+/// Wrap a typed synchronous handler function into a type-erased `HandlerFn`.
+///
+/// The function must have the signature:
+/// `fn(ctx: &Ctx, req: Req) -> Result<Res, RpcError>`
+/// where `Req: DeserializeOwned` and `Res: Serialize`.
+///
+/// # Example
+/// ```ignore
+/// fn proxy_start(ctx: &MyCtx, req: StartReq) -> Result<StartRes, RpcError> { ... }
+///
+/// router.register("proxy_start", rpc_handler!(proxy_start));
+/// ```
+#[macro_export]
+macro_rules! rpc_handler {
+    ($f:expr) => {
+        Box::new(|ctx, payload| {
+            Box::pin(async move {
+                let req = serde_json::from_value(payload).map_err($crate::RpcError::from)?;
+                let res = $f(&ctx, req)?;
+                serde_json::to_value(res).map_err($crate::RpcError::from)
+            })
+        })
+    };
+}
+
+/// Wrap a typed async handler function into a type-erased `HandlerFn`.
+///
+/// The function must have the signature:
+/// `async fn(ctx: Ctx, req: Req) -> Result<Res, E>`
+/// where `Req: DeserializeOwned`, `Res: Serialize`, and `E: ToString`, so
+/// handlers can keep returning their own error types.
+///
+/// # Example
+/// ```ignore
+/// async fn cmd_metadata(ctx: ClientCtx, req: MetadataReq) -> Result<AppMetaData, Error> { ... }
+///
+/// router.register("cmd_metadata", rpc_handler_async!(cmd_metadata));
+/// ```
+#[macro_export]
+macro_rules! rpc_handler_async {
+    ($f:expr) => {
+        Box::new(|ctx, payload| {
+            Box::pin(async move {
+                let req = serde_json::from_value(payload).map_err($crate::RpcError::from)?;
+                let res =
+                    $f(ctx, req).await.map_err(|e| $crate::RpcError { message: e.to_string() })?;
+                serde_json::to_value(res).map_err($crate::RpcError::from)
+            })
+        })
+    };
+}
diff --git a/crates/yaak-api/Cargo.toml b/crates/yaak-api/Cargo.toml
new file mode 100644
index 0000000..024ae85
--- /dev/null
+++ b/crates/yaak-api/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "yaak-api"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+log = { workspace = true }
+reqwest = { workspace = true, features = ["gzip"] }
+sysproxy = "0.3"
+thiserror = { workspace = true }
+yaak-common = { workspace = true }
diff --git a/crates/yaak-api/src/error.rs b/crates/yaak-api/src/error.rs
new file mode 100644
index 0000000..2cdc6a1
--- /dev/null
+++ b/crates/yaak-api/src/error.rs
@@ -0,0 +1,9 @@
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error(transparent)]
+    ReqwestError(#[from] reqwest::Error),
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-api/src/lib.rs b/crates/yaak-api/src/lib.rs
new file mode 100644
index 0000000..b7881b0
--- /dev/null
+++ b/crates/yaak-api/src/lib.rs
@@ -0,0 +1,80 @@
+mod error;
+
+pub use error::{Error, Result};
+
+use log::{debug, warn};
+use reqwest::Client;
+use reqwest::header::{HeaderMap, HeaderValue};
+use std::time::Duration;
+use yaak_common::platform::{get_ua_arch, get_ua_platform};
+
+#[derive(Debug, Clone, Copy, Eq, PartialEq)]
+pub enum ApiClientKind {
+    App,
+    Cli,
+}
+
+/// Build a reqwest Client configured for Yaak's own API calls.
+///
+/// Includes a custom User-Agent, JSON accept header, 20s timeout, gzip,
+/// and automatic OS-level proxy detection via sysproxy.
+pub fn yaak_api_client(kind: ApiClientKind, version: &str) -> Result<Client> {
+    let platform = get_ua_platform();
+    let arch = get_ua_arch();
+    let product = match kind {
+        ApiClientKind::App => "Yaak",
+        ApiClientKind::Cli => "YaakCli",
+    };
+    let ua = format!("{product}/{version} ({platform}; {arch})");
+
+    let mut default_headers = HeaderMap::new();
+    default_headers.insert("Accept", HeaderValue::from_str("application/json").unwrap());
+
+    let mut builder = reqwest::ClientBuilder::new()
+        .timeout(Duration::from_secs(20))
+        .default_headers(default_headers)
+        .gzip(true)
+        .user_agent(ua);
+
+    if let Some(sys) = get_enabled_system_proxy() {
+        let proxy_url = format!("http://{}:{}", sys.host, sys.port);
+        match reqwest::Proxy::all(&proxy_url) {
+            Ok(p) => {
+                let p = if !sys.bypass.is_empty() {
+                    p.no_proxy(reqwest::NoProxy::from_string(&sys.bypass))
+                } else {
+                    p
+                };
+                builder = builder.proxy(p);
+            }
+            Err(e) => {
+                warn!("Failed to configure system proxy: {e}");
+            }
+        }
+    }
+
+    Ok(builder.build()?)
+}
+
+/// Returns the system proxy URL if one is enabled, e.g. `http://host:port`.
+pub fn get_system_proxy_url() -> Option<String> {
+    let sys = get_enabled_system_proxy()?;
+    Some(format!("http://{}:{}", sys.host, sys.port))
+}
+
+fn get_enabled_system_proxy() -> Option<sysproxy::Sysproxy> {
+    match sysproxy::Sysproxy::get_system_proxy() {
+        Ok(sys) if sys.enable => {
+            debug!("Detected system proxy: http://{}:{}", sys.host, sys.port);
+            Some(sys)
+        }
+        Ok(_) => {
+            debug!("System proxy detected but not enabled");
+            None
+        }
+        Err(e) => {
+            debug!("Could not detect system proxy: {e}");
+            None
+        }
+    }
+}
diff --git a/crates/yaak-commands/Cargo.toml b/crates/yaak-commands/Cargo.toml
new file mode 100644
index 0000000..59d011a
--- /dev/null
+++ b/crates/yaak-commands/Cargo.toml
@@ -0,0 +1,21 @@
+[package]
+name = "yaak-commands"
+version = "0.0.0"
+edition = "2024"
+authors = ["Gregory Schier"]
+publish = false
+
+[dependencies]
+serde_json = { workspace = true }
+thiserror = { workspace = true }
+yaak = { workspace = true }
+yaak-core = { workspace = true }
+yaak-crypto = { workspace = true }
+yaak-models = { workspace = true }
+yaak-plugins = { workspace = true }
+yaak-rpc-schema = { workspace = true }
+yaak-templates = { workspace = true }
+
+[dev-dependencies]
+tempfile = "3"
+tokio = { workspace = true, features = ["macros", "rt-multi-thread"] }
diff --git a/crates/yaak-commands/src/actions.rs b/crates/yaak-commands/src/actions.rs
new file mode 100644
index 0000000..97b30e7
--- /dev/null
+++ b/crates/yaak-commands/src/actions.rs
@@ -0,0 +1,157 @@
+//! The actions plugins contribute to the UI, and the calls that run them.
+//!
+//! Listing is a plain question for the plugin runtime. Calling is not: the
+//! frontend sends back the model it was showing, and a plugin must act on what
+//! that model *actually is* — re-read from the database, with inheritance
+//! resolved — not on a snapshot the UI has been holding. That re-reading is the
+//! work these handlers do.
+
+use crate::error::{Error, Result};
+use crate::host::PluginHost;
+use crate::resolve::{resolve_grpc_request, resolve_http_request};
+use yaak_models::models::HttpRequest;
+use yaak_plugins::events::{
+    CallFolderActionArgs, CallFolderActionRequest, CallGrpcRequestActionArgs,
+    CallGrpcRequestActionRequest, CallHttpRequestActionArgs, CallHttpRequestActionRequest,
+    CallWebsocketRequestActionArgs, CallWebsocketRequestActionRequest, CallWorkspaceActionArgs,
+    CallWorkspaceActionRequest, GetFolderActionsResponse, GetGrpcRequestActionsResponse,
+    GetHttpRequestActionsResponse, GetWebsocketRequestActionsResponse, GetWorkspaceActionsResponse,
+};
+use yaak_rpc_schema::*;
+
+// -- Listing --
+
+pub async fn cmd_http_request_actions<H: PluginHost>(
+    host: H,
+    _req: CmdHttpRequestActionsReq,
+) -> Result<Vec<GetHttpRequestActionsResponse>> {
+    host.http_request_actions().await
+}
+
+pub async fn cmd_websocket_request_actions<H: PluginHost>(
+    host: H,
+    _req: CmdWebsocketRequestActionsReq,
+) -> Result<Vec<GetWebsocketRequestActionsResponse>> {
+    host.websocket_request_actions().await
+}
+
+pub async fn cmd_grpc_request_actions<H: PluginHost>(
+    host: H,
+    _req: CmdGrpcRequestActionsReq,
+) -> Result<Vec<GetGrpcRequestActionsResponse>> {
+    host.grpc_request_actions().await
+}
+
+pub async fn cmd_workspace_actions<H: PluginHost>(
+    host: H,
+    _req: CmdWorkspaceActionsReq,
+) -> Result<Vec<GetWorkspaceActionsResponse>> {
+    host.workspace_actions().await
+}
+
+pub async fn cmd_folder_actions<H: PluginHost>(
+    host: H,
+    _req: CmdFolderActionsReq,
+) -> Result<Vec<GetFolderActionsResponse>> {
+    host.folder_actions().await
+}
+
+// -- Calling --
+
+pub async fn cmd_call_http_request_action<H: PluginHost>(
+    host: H,
+    req: CmdCallHttpRequestActionReq,
+) -> Result<()> {
+    let inner = req.req;
+    let http_request = resolve_http_request(&host.db(), &inner.args.http_request)?.0;
+    host.call_http_request_action(CallHttpRequestActionRequest {
+        args: CallHttpRequestActionArgs { http_request },
+        ..inner
+    })
+    .await
+}
+
+pub async fn cmd_call_grpc_request_action<H: PluginHost>(
+    host: H,
+    req: CmdCallGrpcRequestActionReq,
+) -> Result<()> {
+    let inner = req.req;
+    let grpc_request = resolve_grpc_request(&host.db(), &inner.args.grpc_request)?.0;
+    host.call_grpc_request_action(CallGrpcRequestActionRequest {
+        args: CallGrpcRequestActionArgs { grpc_request, ..inner.args },
+        ..inner
+    })
+    .await
+}
+
+pub async fn cmd_call_websocket_request_action<H: PluginHost>(
+    host: H,
+    req: CmdCallWebsocketRequestActionReq,
+) -> Result<()> {
+    let inner = req.req;
+    let websocket_request = host.db().get_websocket_request(&inner.args.websocket_request.id)?;
+    host.call_websocket_request_action(CallWebsocketRequestActionRequest {
+        args: CallWebsocketRequestActionArgs { websocket_request },
+        ..inner
+    })
+    .await
+}
+
+pub async fn cmd_call_workspace_action<H: PluginHost>(
+    host: H,
+    req: CmdCallWorkspaceActionReq,
+) -> Result<()> {
+    let inner = req.req;
+    let workspace = host.db().get_workspace(&inner.args.workspace.id)?;
+    host.call_workspace_action(CallWorkspaceActionRequest {
+        args: CallWorkspaceActionArgs { workspace },
+        ..inner
+    })
+    .await
+}
+
+pub async fn cmd_call_folder_action<H: PluginHost>(
+    host: H,
+    req: CmdCallFolderActionReq,
+) -> Result<()> {
+    let inner = req.req;
+    let folder = host.db().get_folder(&inner.args.folder.id)?;
+    host.call_folder_action(CallFolderActionRequest {
+        args: CallFolderActionArgs { folder },
+        ..inner
+    })
+    .await
+}
+
+// -- Other things the plugin runtime does --
+
+/// Turn a `curl` command line into an unsaved request, by handing it to the
+/// same importer plugins that read files.
+pub async fn cmd_curl_to_request<H: PluginHost>(
+    host: H,
+    req: CmdCurlToRequestReq,
+) -> Result<HttpRequest> {
+    let imported = host.import_data(&req.command).await?;
+
+    let request = imported
+        .resources
+        .http_requests
+        .first()
+        .ok_or_else(|| Error::Generic("No curl command found".to_string()))?;
+
+    // Belongs to the workspace the user is importing into, and is not saved
+    // until they say so — hence the blank id.
+    let mut request = request.clone();
+    request.workspace_id = req.workspace_id;
+    request.id = String::new();
+    Ok(request)
+}
+
+/// Restart every plugin, returning whatever failed to come back up.
+pub async fn cmd_reload_plugins<H: PluginHost>(
+    host: H,
+    _req: CmdReloadPluginsReq,
+) -> Result<Vec<(String, String)>> {
+    let plugins = host.db().list_plugins()?;
+    Ok(host.reload_plugins(plugins).await)
+}
diff --git a/crates/yaak-commands/src/auth.rs b/crates/yaak-commands/src/auth.rs
new file mode 100644
index 0000000..8cdfae5
--- /dev/null
+++ b/crates/yaak-commands/src/auth.rs
@@ -0,0 +1,62 @@
+//! Authentication config forms and their actions.
+//!
+//! Both commands here do the same preparation: the frontend sends the model
+//! whose auth is being edited plus the values currently in the form, and those
+//! values may contain templates. They have to be rendered against the model's
+//! own environment chain before a plugin sees them, or an auth plugin receives
+//! `${[ api_key ]}` where it expected a key.
+
+use crate::error::Result;
+use crate::host::PluginHost;
+use crate::render::render_form_values;
+use yaak_plugins::events::{
+    GetHttpAuthenticationConfigResponse, GetHttpAuthenticationSummaryResponse, RenderPurpose,
+};
+use yaak_rpc_schema::*;
+use yaak_templates::RenderOptions;
+
+pub async fn cmd_get_http_authentication_summaries<H: PluginHost>(
+    host: H,
+    _req: CmdGetHttpAuthenticationSummariesReq,
+) -> Result<Vec<GetHttpAuthenticationSummaryResponse>> {
+    host.http_authentication_summaries().await
+}
+
+pub async fn cmd_get_http_authentication_config<H: PluginHost>(
+    host: H,
+    req: CmdGetHttpAuthenticationConfigReq,
+) -> Result<GetHttpAuthenticationConfigResponse> {
+    // A config form is being displayed, so a template that cannot resolve
+    // should show as blank rather than refuse to open the form.
+    let values = render_form_values(
+        &host,
+        &req.model,
+        req.environment_id.as_deref(),
+        req.values,
+        RenderPurpose::Preview,
+        &RenderOptions::return_empty(),
+    )
+    .await?;
+
+    host.http_authentication_config(&req.auth_name, values, req.model.id()).await
+}
+
+pub async fn cmd_call_http_authentication_action<H: PluginHost>(
+    host: H,
+    req: CmdCallHttpAuthenticationActionReq,
+) -> Result<()> {
+    // An action actually uses these values, so an unresolvable template is an
+    // error rather than an empty string that would silently authenticate wrong.
+    let values = render_form_values(
+        &host,
+        &req.model,
+        req.environment_id.as_deref(),
+        req.values,
+        RenderPurpose::Send,
+        &RenderOptions::throw(),
+    )
+    .await?;
+
+    host.call_http_authentication_action(&req.auth_name, req.action_index, values, req.model.id())
+        .await
+}
diff --git a/crates/yaak-commands/src/data.rs b/crates/yaak-commands/src/data.rs
new file mode 100644
index 0000000..ac38c9c
--- /dev/null
+++ b/crates/yaak-commands/src/data.rs
@@ -0,0 +1,30 @@
+//! Export and formatting.
+
+use crate::error::Result;
+use crate::host::Host;
+use yaak_models::example::create_example_workspace;
+use yaak_models::export::{self, ExportDataParams};
+use yaak_models::util::BatchUpsertResult;
+use yaak_rpc_schema::*;
+use yaak_templates::format_json::format_json;
+
+pub async fn cmd_export_data<H: Host>(host: H, req: CmdExportDataReq) -> Result<String> {
+    let version = host.app_version();
+    Ok(export::export_data(ExportDataParams {
+        query_manager: host.query_manager(),
+        yaak_version: &version,
+        workspace_ids: req.workspace_ids.iter().map(|s| s.as_str()).collect(),
+        include_private_environments: req.include_private_environments,
+    })?)
+}
+
+pub async fn cmd_create_example_workspace<H: Host>(
+    host: H,
+    _req: CmdCreateExampleWorkspaceReq,
+) -> Result<BatchUpsertResult> {
+    Ok(create_example_workspace(host.query_manager(), &host.update_source())?)
+}
+
+pub async fn cmd_format_json<H: Host>(_host: H, req: CmdFormatJsonReq) -> Result<String> {
+    Ok(format_json(&req.text, "  "))
+}
diff --git a/crates/yaak-commands/src/encryption.rs b/crates/yaak-commands/src/encryption.rs
new file mode 100644
index 0000000..5aab9ca
--- /dev/null
+++ b/crates/yaak-commands/src/encryption.rs
@@ -0,0 +1,41 @@
+//! Workspace encryption keys and the `secure()` template function.
+
+use crate::error::Result;
+use crate::host::{Host, PluginHost};
+use yaak_plugins::native_template_functions::decrypt_secure_template_function;
+use yaak_rpc_schema::*;
+
+pub async fn cmd_enable_encryption<H: Host>(host: H, req: CmdEnableEncryptionReq) -> Result<()> {
+    host.encryption_manager().ensure_workspace_key(&req.workspace_id)?;
+    host.encryption_manager().reveal_workspace_key(&req.workspace_id)?;
+    Ok(())
+}
+
+pub async fn cmd_reveal_workspace_key<H: Host>(
+    host: H,
+    req: CmdRevealWorkspaceKeyReq,
+) -> Result<String> {
+    Ok(host.encryption_manager().reveal_workspace_key(&req.workspace_id)?)
+}
+
+pub async fn cmd_set_workspace_key<H: Host>(host: H, req: CmdSetWorkspaceKeyReq) -> Result<()> {
+    host.encryption_manager().set_human_key(&req.workspace_id, &req.key)?;
+    Ok(())
+}
+
+pub async fn cmd_disable_encryption<H: Host>(host: H, req: CmdDisableEncryptionReq) -> Result<()> {
+    host.encryption_manager().disable_encryption(&req.workspace_id)?;
+    Ok(())
+}
+
+pub async fn cmd_decrypt_template<H: Host>(host: H, req: CmdDecryptTemplateReq) -> Result<String> {
+    let plugin_context = host.plugin_context();
+    Ok(decrypt_secure_template_function(host.encryption_manager(), &plugin_context, &req.template)?)
+}
+
+pub async fn cmd_secure_template<H: PluginHost>(
+    host: H,
+    req: CmdSecureTemplateReq,
+) -> Result<String> {
+    host.encrypt_secure_template(&req.template).await
+}
diff --git a/crates/yaak-commands/src/error.rs b/crates/yaak-commands/src/error.rs
new file mode 100644
index 0000000..dd033d7
--- /dev/null
+++ b/crates/yaak-commands/src/error.rs
@@ -0,0 +1,30 @@
+use thiserror::Error;
+
+#[derive(Debug, Error)]
+pub enum Error {
+    #[error(transparent)]
+    Yaak(#[from] yaak::Error),
+
+    #[error(transparent)]
+    Model(#[from] yaak_models::error::Error),
+
+    #[error(transparent)]
+    Plugin(#[from] yaak_plugins::error::Error),
+
+    #[error(transparent)]
+    Crypto(#[from] yaak_crypto::error::Error),
+
+    #[error(transparent)]
+    Template(#[from] yaak_templates::error::Error),
+
+    #[error("JSON error: {0}")]
+    Json(#[from] serde_json::Error),
+
+    #[error("I/O error: {0}")]
+    Io(#[from] std::io::Error),
+
+    #[error("{0}")]
+    Generic(String),
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-commands/src/host.rs b/crates/yaak-commands/src/host.rs
new file mode 100644
index 0000000..b5ff79f
--- /dev/null
+++ b/crates/yaak-commands/src/host.rs
@@ -0,0 +1,229 @@
+//! What a command needs from whatever is running it.
+//!
+//! A command handler is invoked on behalf of one client (a desktop window today)
+//! and needs a handful of things from its surroundings: the shared engine
+//! managers, who the client is, what the client is looking at, and a little
+//! about the app. `Host` is that handful and nothing more. The desktop
+//! implements it over a `WebviewWindow`; a server would implement it over a
+//! connection. Handlers are generic over it, so the same handler body runs
+//! under either without knowing which.
+//!
+//! The surface grows only when a handler being moved here needs something new,
+//! and stays as narrow as those handlers allow. What is deliberately *not* here
+//! is anything only a desktop can do — open a native window, run the updater,
+//! show a native dialog — those handlers stay with the desktop.
+
+use std::collections::HashMap;
+use std::future::Future;
+use yaak_core::WorkspaceContext;
+use yaak_crypto::manager::EncryptionManager;
+use yaak_models::blob_manager::{BlobContext, BlobManager};
+use yaak_models::client_db::ClientDb;
+use yaak_models::models::Plugin;
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::UpdateSource;
+use yaak_plugins::events::{
+    CallFolderActionRequest, CallGrpcRequestActionRequest, CallHttpRequestActionRequest,
+    CallWebsocketRequestActionRequest, CallWorkspaceActionRequest, GetFolderActionsResponse,
+    GetGrpcRequestActionsResponse, GetHttpAuthenticationConfigResponse,
+    GetHttpAuthenticationSummaryResponse, GetHttpRequestActionsResponse,
+    GetTemplateFunctionConfigResponse, GetTemplateFunctionSummaryResponse, GetThemesResponse,
+    GetWebsocketRequestActionsResponse, GetWorkspaceActionsResponse, ImportResponse, JsonPrimitive,
+    PluginContext, RenderPurpose,
+};
+use yaak_plugins::plugin_meta::PluginMetadata;
+use yaak_templates::TemplateCallback;
+
+/// Only `Clone` is required here. `Send`/`Sync`/`'static` are deliberately
+/// *not*: a browser host is single-threaded and its connection pool is an
+/// `Rc<Connection>` — `rusqlite::Connection` is not `Sync` to begin with — so a
+/// thread-safety bound on the trait would lock that host out of implementing it
+/// at all. The router needs those bounds and states them itself, which is where
+/// they belong: they are a property of a particular transport, not of a command.
+pub trait Host: Clone {
+    /// Stable identity of the client this call is for. On the desktop this is
+    /// the window label. It rides on every model write so the client that made
+    /// a change can tell its own echo from everyone else's.
+    fn client_id(&self) -> &str;
+
+    /// What the client is currently looking at: workspace, environment, cookie
+    /// jar, request. Read at call time, since the client can navigate between
+    /// calls (and during one).
+    fn session(&self) -> WorkspaceContext;
+
+    /// The app version, as reported to the Yaak API and stamped on exports.
+    fn app_version(&self) -> String;
+
+    fn query_manager(&self) -> &QueryManager;
+    fn blob_manager(&self) -> &BlobManager;
+    fn encryption_manager(&self) -> &EncryptionManager;
+
+    // -- Conveniences derived from the above; hosts do not override these --
+
+    fn update_source(&self) -> UpdateSource {
+        UpdateSource::from_window_label(self.client_id())
+    }
+
+    fn plugin_context(&self) -> PluginContext {
+        PluginContext::new(Some(self.client_id().to_string()), self.session().workspace_id)
+    }
+
+    fn db(&self) -> ClientDb<'_> {
+        self.query_manager().connect()
+    }
+
+    fn blobs(&self) -> BlobContext<'_> {
+        self.blob_manager().connect()
+    }
+}
+
+/// A host that can also reach plugins.
+///
+/// Separate from [`Host`] so that a command which only touches the database
+/// never demands a plugin runtime it does not call: a host with no plugins
+/// still serves those, and only handlers bounded on `PluginHost` are closed to
+/// it.
+///
+/// These are *operations*, not a handle. Handing back a `&PluginManager` would
+/// have been shorter, but that type is specifically "spawn a Node sidecar and
+/// talk to it over a socket", and a browser host runs plugins in a Worker it
+/// reaches by message — it can answer any of the questions below and can never
+/// produce that type. Naming the questions instead of the answerer is what lets
+/// both hosts exist.
+///
+/// Same rule as [`Host`]: this grows only when a migrated handler needs
+/// something new, and stays as narrow as those handlers allow. Today it is the
+/// four things batch 1 asks for.
+///
+/// The types crossing this boundary still come from `yaak-plugins` — fine on
+/// the desktop, and once its plain data types are split out from its runtime
+/// that becomes an import-path change here rather than an interface one.
+pub trait PluginHost: Host {
+    /// What the running plugin runtime knows about the plugin installed in
+    /// `directory`, or `None` if it has not loaded one from there. Callers fall
+    /// back to reading the plugin's manifest off disk.
+    fn loaded_plugin_metadata(
+        &self,
+        directory: &str,
+    ) -> impl Future<Output = Option<PluginMetadata>>;
+
+    /// Failures from plugin initialization, drained — reporting them clears
+    /// them, so a caller that drops these has lost them.
+    fn take_plugin_init_errors(&self) -> impl Future<Output = Vec<(String, String)>>;
+
+    /// The plugin rows as the runtime sees them: the database says what is
+    /// installed, the runtime knows which are bundled and what version actually
+    /// loaded. A host without a runtime can return them untouched.
+    fn resolve_plugins(&self, plugins: Vec<Plugin>) -> impl Future<Output = Vec<Plugin>>;
+
+    /// The template functions this host can run, as a callback the renderer
+    /// drives. This is the *only* thing the plugin runtime uniquely provides to
+    /// a render — the variables come from the environment chain, which is an
+    /// ordinary database read — so handing back the callback keeps the rest of
+    /// rendering shared instead of pushing whole commands behind this trait.
+    /// Async so hosts that finish booting their plugin runtime in the
+    /// background can wait for it here.
+    fn template_callback(
+        &self,
+        purpose: RenderPurpose,
+    ) -> impl Future<Output = crate::Result<impl TemplateCallback>>;
+
+    /// Every template function the installed plugins expose, for the
+    /// autocomplete menu.
+    fn template_function_summaries(
+        &self,
+    ) -> impl Future<Output = crate::Result<Vec<GetTemplateFunctionSummaryResponse>>>;
+
+    /// The form a template function wants to show for the given values.
+    /// `values` arrive already rendered.
+    fn template_function_config(
+        &self,
+        function_name: &str,
+        values: HashMap<String, JsonPrimitive>,
+        model_id: &str,
+    ) -> impl Future<Output = crate::Result<GetTemplateFunctionConfigResponse>>;
+
+    /// Themes contributed by plugins.
+    fn themes(&self) -> impl Future<Output = crate::Result<Vec<GetThemesResponse>>>;
+
+    // -- Actions plugins contribute to the UI --
+
+    fn http_request_actions(
+        &self,
+    ) -> impl Future<Output = crate::Result<Vec<GetHttpRequestActionsResponse>>>;
+    fn websocket_request_actions(
+        &self,
+    ) -> impl Future<Output = crate::Result<Vec<GetWebsocketRequestActionsResponse>>>;
+    fn grpc_request_actions(
+        &self,
+    ) -> impl Future<Output = crate::Result<Vec<GetGrpcRequestActionsResponse>>>;
+    fn workspace_actions(
+        &self,
+    ) -> impl Future<Output = crate::Result<Vec<GetWorkspaceActionsResponse>>>;
+    fn folder_actions(&self) -> impl Future<Output = crate::Result<Vec<GetFolderActionsResponse>>>;
+
+    /// Running an action. The request in each of these has already been
+    /// re-read and had its inheritance resolved by the handler; a host must
+    /// pass it through untouched.
+    fn call_http_request_action(
+        &self,
+        req: CallHttpRequestActionRequest,
+    ) -> impl Future<Output = crate::Result<()>>;
+    fn call_grpc_request_action(
+        &self,
+        req: CallGrpcRequestActionRequest,
+    ) -> impl Future<Output = crate::Result<()>>;
+    fn call_websocket_request_action(
+        &self,
+        req: CallWebsocketRequestActionRequest,
+    ) -> impl Future<Output = crate::Result<()>>;
+    fn call_workspace_action(
+        &self,
+        req: CallWorkspaceActionRequest,
+    ) -> impl Future<Output = crate::Result<()>>;
+    fn call_folder_action(
+        &self,
+        req: CallFolderActionRequest,
+    ) -> impl Future<Output = crate::Result<()>>;
+
+    // -- Authentication --
+
+    fn http_authentication_summaries(
+        &self,
+    ) -> impl Future<Output = crate::Result<Vec<GetHttpAuthenticationSummaryResponse>>>;
+
+    /// The form an auth plugin wants to show. `values` arrive already rendered.
+    fn http_authentication_config(
+        &self,
+        auth_name: &str,
+        values: HashMap<String, JsonPrimitive>,
+        model_id: &str,
+    ) -> impl Future<Output = crate::Result<GetHttpAuthenticationConfigResponse>>;
+
+    fn call_http_authentication_action(
+        &self,
+        auth_name: &str,
+        action_index: i32,
+        values: HashMap<String, JsonPrimitive>,
+        model_id: &str,
+    ) -> impl Future<Output = crate::Result<()>>;
+
+    // -- The importers, and the runtime itself --
+
+    /// Hand arbitrary text to the importer plugins and take what they make of
+    /// it. Used for files, URLs and pasted `curl` commands alike.
+    fn import_data(&self, content: &str) -> impl Future<Output = crate::Result<ImportResponse>>;
+
+    /// Restart every plugin, returning `(plugin, error)` for those that failed.
+    fn reload_plugins(&self, plugins: Vec<Plugin>) -> impl Future<Output = Vec<(String, String)>>;
+
+    /// Re-encrypt the `secure(...)` values in a template.
+    ///
+    /// Whole operation rather than its pieces because the encryption is only
+    /// half of it: the value is also run through the plugin template functions,
+    /// so this needs the plugin runtime and not just a key.
+    fn encrypt_secure_template(
+        &self,
+        template: &str,
+    ) -> impl Future<Output = crate::Result<String>>;
+}
diff --git a/crates/yaak-commands/src/lib.rs b/crates/yaak-commands/src/lib.rs
new file mode 100644
index 0000000..72563c2
--- /dev/null
+++ b/crates/yaak-commands/src/lib.rs
@@ -0,0 +1,28 @@
+//! Command handlers for the RPC surface, written against [`Host`] instead of
+//! any particular host.
+//!
+//! `yaak_rpc_schema` declares what each command is called and what it takes
+//! and returns; this crate is where the bodies live. Every handler has the
+//! shape the router wants — `async fn(host, Req) -> Result<Res>` — so a host
+//! registers one with a one-line adapter (or none at all), and never
+//! redeclares a command.
+//!
+//! Not every command is here yet. Handlers move in as they are freed of
+//! host-specific types; the ones that stay behind are the ones only a desktop
+//! can serve (native windows, the updater, dialogs) or that still lean on it.
+
+pub mod actions;
+pub mod auth;
+pub mod data;
+pub mod encryption;
+pub mod error;
+pub mod host;
+pub mod models;
+pub mod plugins;
+pub mod render;
+pub mod resolve;
+pub mod responses;
+pub mod templates;
+
+pub use error::{Error, Result};
+pub use host::{Host, PluginHost};
diff --git a/crates/yaak-commands/src/models.rs b/crates/yaak-commands/src/models.rs
new file mode 100644
index 0000000..99e266c
--- /dev/null
+++ b/crates/yaak-commands/src/models.rs
@@ -0,0 +1,187 @@
+//! Reads and writes of models, keyed by the client's identity so the frontend
+//! can suppress its own echoes.
+
+use crate::error::Result;
+use crate::host::{Host, PluginHost};
+use yaak_models::models::{
+    AnyModel, GraphQlIntrospection, GrpcEvent, HttpRequestHeader, Settings, WebsocketEvent,
+    WorkspaceMeta,
+};
+use yaak_models::queries::workspaces::default_headers;
+use yaak_rpc_schema::*;
+
+pub async fn models_upsert<H: Host>(host: H, req: ModelsUpsertReq) -> Result<String> {
+    let blobs = host.blob_manager();
+    let source = host.update_source();
+    Ok(host
+        .query_manager()
+        .with_tx(|tx| yaak_models::models_ops::upsert_model(tx, blobs, req.model, &source))?)
+}
+
+/// Deletes cascade — a workspace can hold thousands of requests — and run in a
+/// transaction, which holds a raw connection for the duration.
+///
+/// Whether that wants a blocking thread is the *host's* question, not the
+/// delete's: a desktop with a multi-threaded runtime should keep this off the
+/// runtime (see its adapter), while a single-threaded host has nothing to move
+/// it to and runs it here. So this is the plain version, and a host that wants
+/// to relocate it calls [`models_delete_blocking`] itself.
+pub async fn models_delete<H: Host>(host: H, req: ModelsDeleteReq) -> Result<String> {
+    models_delete_blocking(&host, req)
+}
+
+/// The body of [`models_delete`], callable from a blocking context.
+pub fn models_delete_blocking<H: Host>(host: &H, req: ModelsDeleteReq) -> Result<String> {
+    let source = host.update_source();
+    Ok(host.query_manager().with_tx(|tx| {
+        yaak_models::models_ops::delete_model(tx, host.blob_manager(), req.model, &source)
+    })?)
+}
+
+/// Duplicates recurse, so this runs in a transaction too.
+pub async fn models_duplicate<H: Host>(host: H, req: ModelsDuplicateReq) -> Result<String> {
+    let source = host.update_source();
+    Ok(host.query_manager().with_tx(|tx| {
+        yaak_models::models_ops::duplicate_model(tx, &req.model_type, &req.model_id, &source)
+    })?)
+}
+
+pub async fn models_websocket_events<H: Host>(
+    host: H,
+    req: ModelsWebsocketEventsReq,
+) -> Result<Vec<WebsocketEvent>> {
+    Ok(host.db().list_websocket_events(&req.connection_id)?)
+}
+
+pub async fn models_grpc_events<H: Host>(
+    host: H,
+    req: ModelsGrpcEventsReq,
+) -> Result<Vec<GrpcEvent>> {
+    Ok(host.db().list_grpc_events(&req.connection_id)?)
+}
+
+pub async fn models_get_settings<H: Host>(host: H, _req: ModelsGetSettingsReq) -> Result<Settings> {
+    Ok(host.db().get_settings())
+}
+
+pub async fn models_get_graphql_introspection<H: Host>(
+    host: H,
+    req: ModelsGetGraphqlIntrospectionReq,
+) -> Result<Option<GraphQlIntrospection>> {
+    Ok(host.db().get_graphql_introspection(&req.request_id))
+}
+
+pub async fn models_upsert_graphql_introspection<H: Host>(
+    host: H,
+    req: ModelsUpsertGraphqlIntrospectionReq,
+) -> Result<GraphQlIntrospection> {
+    let source = host.update_source();
+    Ok(host.query_manager().with_tx(|tx| {
+        tx.upsert_graphql_introspection(&req.workspace_id, &req.request_id, req.content, &source)
+    })?)
+}
+
+/// Everything the frontend's model store needs to boot, as one JSON string.
+///
+/// A string rather than a `Vec<AnyModel>` because the desktop has to escape
+/// this payload before it crosses into the webview (see its adapter), and the
+/// frontend `JSON.parse`s either form the same way.
+pub async fn models_workspace_models<H: PluginHost>(
+    host: H,
+    req: ModelsWorkspaceModelsReq,
+) -> Result<String> {
+    let mut l: Vec<AnyModel> = Vec::new();
+
+    // Add the global models
+    {
+        let db = host.db();
+        l.push(db.get_settings().into());
+        l.append(&mut db.list_workspaces()?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_key_values()?.into_iter().map(Into::into).collect());
+    }
+
+    let plugins = {
+        let db = host.db();
+        db.list_plugins()?
+    };
+
+    let plugins = host.resolve_plugins(plugins).await;
+    l.append(&mut plugins.into_iter().map(Into::into).collect());
+
+    // Add the workspace children
+    if let Some(wid) = req.workspace_id.as_deref() {
+        // Opening a workspace is where the rows it is assumed to have get created
+        host.query_manager().with_tx(|tx| {
+            tx.ensure_base_environment(wid)?;
+            tx.ensure_default_cookie_jar(wid)?;
+            tx.ensure_workspace_meta(wid)?;
+            Ok::<(), yaak_models::error::Error>(())
+        })?;
+        let db = host.db();
+        l.append(&mut db.list_cookie_jars(wid)?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_environments(wid)?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_folders(wid)?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_grpc_connections(wid)?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_grpc_requests(wid)?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_http_requests(wid)?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_http_responses(wid, None)?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_websocket_connections(wid)?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_websocket_requests(wid)?.into_iter().map(Into::into).collect());
+        l.append(&mut db.list_workspace_metas(wid)?.into_iter().map(Into::into).collect());
+    }
+
+    Ok(serde_json::to_string(&l)?)
+}
+
+pub async fn cmd_get_workspace_meta<H: Host>(
+    host: H,
+    req: CmdGetWorkspaceMetaReq,
+) -> Result<WorkspaceMeta> {
+    let workspace = host.db().get_workspace(&req.workspace_id)?;
+    Ok(host.query_manager().with_tx(|tx| tx.ensure_workspace_meta(&workspace.id))?)
+}
+
+pub async fn cmd_delete_all_grpc_connections<H: Host>(
+    host: H,
+    req: CmdDeleteAllGrpcConnectionsReq,
+) -> Result<()> {
+    Ok(host.query_manager().with_tx(|tx| {
+        tx.delete_all_grpc_connections_for_request(&req.request_id, &host.update_source())
+    })?)
+}
+
+pub async fn cmd_delete_all_http_responses<H: Host>(
+    host: H,
+    req: CmdDeleteAllHttpResponsesReq,
+) -> Result<()> {
+    host.query_manager().with_tx(|tx| {
+        tx.delete_all_http_responses_for_request(&req.request_id, &host.update_source())
+    })?;
+    Ok(())
+}
+
+pub async fn cmd_ws_delete_connections<H: Host>(
+    host: H,
+    req: CmdWsDeleteConnectionsReq,
+) -> Result<()> {
+    Ok(host.query_manager().with_tx(|tx| {
+        tx.delete_all_websocket_connections_for_request(&req.request_id, &host.update_source())
+    })?)
+}
+
+pub async fn cmd_delete_send_history<H: Host>(host: H, req: CmdDeleteSendHistoryReq) -> Result<()> {
+    Ok(host.query_manager().with_tx(|tx| {
+        let source = &host.update_source();
+        tx.delete_all_http_responses_for_workspace(&req.workspace_id, source)?;
+        tx.delete_all_grpc_connections_for_workspace(&req.workspace_id, source)?;
+        tx.delete_all_websocket_connections_for_workspace(&req.workspace_id, source)?;
+        Ok::<(), yaak_models::error::Error>(())
+    })?)
+}
+
+pub async fn cmd_default_headers<H: Host>(
+    _host: H,
+    _req: CmdDefaultHeadersReq,
+) -> Result<Vec<HttpRequestHeader>> {
+    Ok(default_headers())
+}
diff --git a/crates/yaak-commands/src/plugins.rs b/crates/yaak-commands/src/plugins.rs
new file mode 100644
index 0000000..0971f93
--- /dev/null
+++ b/crates/yaak-commands/src/plugins.rs
@@ -0,0 +1,48 @@
+//! Plugin queries: what the runtime has loaded, and what failed to load.
+
+use crate::error::Result;
+use crate::host::PluginHost;
+use std::path::PathBuf;
+use yaak_plugins::plugin_meta::{PluginMetadata, get_plugin_meta};
+use yaak_rpc_schema::*;
+
+pub async fn cmd_plugin_info<H: PluginHost>(
+    host: H,
+    req: CmdPluginInfoReq,
+) -> Result<PluginMetadata> {
+    let plugin = host.db().get_plugin(&req.id)?;
+    if let Some(metadata) = host.loaded_plugin_metadata(&plugin.directory).await {
+        return Ok(metadata);
+    }
+
+    if let Ok(metadata) = get_plugin_meta(&PathBuf::from(&plugin.directory)) {
+        return Ok(metadata);
+    }
+
+    Ok(fallback_plugin_metadata(&plugin.directory))
+}
+
+fn fallback_plugin_metadata(directory: &str) -> PluginMetadata {
+    let display_name = PathBuf::from(directory)
+        .file_name()
+        .and_then(|name| name.to_str())
+        .filter(|name| !name.is_empty())
+        .unwrap_or(directory)
+        .to_string();
+
+    PluginMetadata {
+        version: "Unavailable".to_string(),
+        name: directory.to_string(),
+        display_name,
+        description: Some(format!("Plugin metadata could not be loaded from {directory}")),
+        homepage_url: None,
+        repository_url: None,
+    }
+}
+
+pub async fn cmd_plugin_init_errors<H: PluginHost>(
+    host: H,
+    _req: CmdPluginInitErrorsReq,
+) -> Result<Vec<(String, String)>> {
+    Ok(host.take_plugin_init_errors().await)
+}
diff --git a/crates/yaak-commands/src/render.rs b/crates/yaak-commands/src/render.rs
new file mode 100644
index 0000000..230fc7a
--- /dev/null
+++ b/crates/yaak-commands/src/render.rs
@@ -0,0 +1,74 @@
+//! Rendering a template against an environment chain.
+//!
+//! The variables come from the chain, the functions come from the host's
+//! template callback. `render_template` and `render_json_value` know nothing
+//! about which host they run under — that is the whole point of taking the
+//! callback as a parameter. `render_form_values` sits one level up: resolving
+//! the chain a model sits in is an ordinary database read, so it takes the
+//! host and does that read before rendering.
+
+use crate::error::{Error, Result};
+use crate::host::PluginHost;
+use serde_json::Value;
+use std::collections::HashMap;
+use yaak_models::models::{AnyModel, Environment};
+use yaak_models::render::make_vars_hashmap;
+use yaak_plugins::events::{JsonPrimitive, RenderPurpose};
+use yaak_templates::{RenderOptions, TemplateCallback, parse_and_render, render_json_value_raw};
+
+pub async fn render_template<T: TemplateCallback>(
+    template: &str,
+    environment_chain: Vec<Environment>,
+    cb: &T,
+    opt: &RenderOptions,
+) -> yaak_templates::error::Result<String> {
+    let vars = &make_vars_hashmap(environment_chain);
+    parse_and_render(template, vars, cb, opt).await
+}
+
+pub async fn render_json_value<T: TemplateCallback>(
+    value: Value,
+    environment_chain: Vec<Environment>,
+    cb: &T,
+    opt: &RenderOptions,
+) -> yaak_templates::error::Result<Value> {
+    let vars = &make_vars_hashmap(environment_chain);
+    render_json_value_raw(value, vars, cb, opt).await
+}
+
+/// Render a config form's values against the environment chain the model sits in.
+///
+/// The chain depends on where the model lives — a request inherits through its
+/// folder, a workspace has only its own — so the model is what decides which
+/// variables are in scope.
+pub(crate) async fn render_form_values<H: PluginHost>(
+    host: &H,
+    model: &AnyModel,
+    environment_id: Option<&str>,
+    values: HashMap<String, JsonPrimitive>,
+    purpose: RenderPurpose,
+    options: &RenderOptions,
+) -> Result<HashMap<String, JsonPrimitive>> {
+    let (workspace_id, folder_id) = match model {
+        AnyModel::HttpRequest(r) => (r.workspace_id.clone(), r.folder_id.clone()),
+        AnyModel::GrpcRequest(r) => (r.workspace_id.clone(), r.folder_id.clone()),
+        AnyModel::WebsocketRequest(r) => (r.workspace_id.clone(), r.folder_id.clone()),
+        AnyModel::Folder(f) => (f.workspace_id.clone(), f.folder_id.clone()),
+        AnyModel::Workspace(w) => (w.id.clone(), None),
+        other => {
+            return Err(Error::Generic(format!(
+                "Cannot resolve environments for a {}",
+                other.model()
+            )));
+        }
+    };
+
+    let environment_chain =
+        host.db().resolve_environments(&workspace_id, folder_id.as_deref(), environment_id)?;
+
+    let cb = host.template_callback(purpose).await?;
+    let rendered =
+        render_json_value(serde_json::to_value(&values)?, environment_chain, &cb, options).await?;
+
+    Ok(serde_json::from_value(rendered)?)
+}
diff --git a/crates/yaak-commands/src/resolve.rs b/crates/yaak-commands/src/resolve.rs
new file mode 100644
index 0000000..f20e9af
--- /dev/null
+++ b/crates/yaak-commands/src/resolve.rs
@@ -0,0 +1,56 @@
+//! Filling in what a request inherits from its folders and workspace.
+//!
+//! A request stored in the database records only what is set *on it*;
+//! authentication and headers can come from any ancestor. Anything that acts on
+//! a request as the user sees it — sending it, handing it to a plugin — has to
+//! resolve that chain first, which is why this is shared rather than living
+//! next to any one caller.
+
+use crate::error::Result;
+use yaak_models::client_db::ClientDb;
+use yaak_models::models::{GrpcRequest, HttpRequest, WebsocketRequest};
+
+/// The request with inherited auth and headers filled in, plus the id of the
+/// model the authentication was inherited *from* — plugins key their token
+/// caches on it, so it must be the ancestor's id and not the request's.
+pub fn resolve_http_request(db: &ClientDb, request: &HttpRequest) -> Result<(HttpRequest, String)> {
+    let mut new_request = request.clone();
+
+    let (authentication_type, authentication, authentication_context_id) =
+        db.resolve_auth_for_http_request(request)?;
+    new_request.authentication_type = authentication_type;
+    new_request.authentication = authentication;
+
+    new_request.headers = db.resolve_headers_for_http_request(request)?;
+
+    Ok((new_request, authentication_context_id))
+}
+
+pub fn resolve_grpc_request(db: &ClientDb, request: &GrpcRequest) -> Result<(GrpcRequest, String)> {
+    let mut new_request = request.clone();
+
+    let (authentication_type, authentication, authentication_context_id) =
+        db.resolve_auth_for_grpc_request(request)?;
+    new_request.authentication_type = authentication_type;
+    new_request.authentication = authentication;
+
+    new_request.metadata = db.resolve_metadata_for_grpc_request(request)?;
+
+    Ok((new_request, authentication_context_id))
+}
+
+pub fn resolve_websocket_request(
+    db: &ClientDb,
+    request: &WebsocketRequest,
+) -> Result<(WebsocketRequest, String)> {
+    let mut new_request = request.clone();
+
+    let (authentication_type, authentication, authentication_context_id) =
+        db.resolve_auth_for_websocket_request(request)?;
+    new_request.authentication_type = authentication_type;
+    new_request.authentication = authentication;
+
+    new_request.headers = db.resolve_headers_for_websocket_request(request)?;
+
+    Ok((new_request, authentication_context_id))
+}
diff --git a/crates/yaak-commands/src/responses.rs b/crates/yaak-commands/src/responses.rs
new file mode 100644
index 0000000..6602b61
--- /dev/null
+++ b/crates/yaak-commands/src/responses.rs
@@ -0,0 +1,86 @@
+//! Reading back what a send left behind: response events, request bodies, and
+//! where a response body lives.
+
+use crate::error::{Error, Result};
+use crate::host::Host;
+use std::fs;
+use std::path::PathBuf;
+use yaak_models::client_db::ClientDb;
+use yaak_models::models::HttpResponseEvent;
+use yaak_rpc_schema::*;
+
+/// Where a response's body is, and what it is meant to be read as.
+pub struct ResponseBodyLocation {
+    /// None when the response has no stored body.
+    pub path: Option<PathBuf>,
+    /// The response's declared `Content-Type`, empty when it has none.
+    pub content_type: String,
+}
+
+/// Find a response's body from its id alone.
+///
+/// The frontend hands back an id and never a path, so the only bodies reachable
+/// here are ones the engine wrote and the database still knows about. A
+/// response that was never saved has no entry, and its body came back from the
+/// send that made it.
+pub fn locate_response_body(db: &ClientDb, response_id: &str) -> Result<ResponseBodyLocation> {
+    let response = db.get_http_response(response_id)?;
+
+    Ok(ResponseBodyLocation {
+        path: response.body_path.map(PathBuf::from),
+        content_type: response
+            .headers
+            .iter()
+            .find(|h| h.name.eq_ignore_ascii_case("content-type"))
+            .map(|h| h.value.clone())
+            .unwrap_or_default(),
+    })
+}
+
+pub async fn cmd_get_http_response_events<H: Host>(
+    host: H,
+    req: CmdGetHttpResponseEventsReq,
+) -> Result<Vec<HttpResponseEvent>> {
+    let events: Vec<HttpResponseEvent> = host.db().list_http_response_events(&req.response_id)?;
+    Ok(events)
+}
+
+/// The body's path on this machine, for the desktop host to read or hand to the
+/// webview's asset protocol.
+///
+/// The frontend holds response ids; only `packages/platform`'s Tauri host sees
+/// the path, and only because it is about to open the file itself. Hosts
+/// without a filesystem serve the same bytes over HTTP instead.
+pub async fn cmd_http_response_body_path<H: Host>(
+    host: H,
+    req: CmdHttpResponseBodyPathReq,
+) -> Result<Option<String>> {
+    let location = locate_response_body(&host.db(), &req.response_id)?;
+    Ok(location.path.map(|p| p.to_string_lossy().to_string()))
+}
+
+pub async fn cmd_http_request_body<H: Host>(
+    host: H,
+    req: CmdHttpRequestBodyReq,
+) -> Result<Option<Vec<u8>>> {
+    let body_id = format!("{}.request", req.response_id);
+    let chunks = host.blobs().get_chunks(&body_id)?;
+
+    if chunks.is_empty() {
+        return Ok(None);
+    }
+
+    // Concatenate all chunks
+    let body: Vec<u8> = chunks.into_iter().flat_map(|c| c.data).collect();
+    Ok(Some(body))
+}
+
+pub async fn cmd_save_response<H: Host>(host: H, req: CmdSaveResponseReq) -> Result<()> {
+    let response = host.db().get_http_response(&req.response_id)?;
+
+    let body_path =
+        response.body_path.ok_or(Error::Generic("Response does not have a body".to_string()))?;
+    fs::copy(body_path, &req.filepath).map_err(|e| Error::Generic(e.to_string()))?;
+
+    Ok(())
+}
diff --git a/crates/yaak-commands/src/templates.rs b/crates/yaak-commands/src/templates.rs
new file mode 100644
index 0000000..9044c89
--- /dev/null
+++ b/crates/yaak-commands/src/templates.rs
@@ -0,0 +1,79 @@
+//! Templates, the functions plugins put in them, and themes.
+//!
+//! Everything here needs the plugin runtime, but only for the one thing it
+//! uniquely provides: running a template function. Resolving the environment
+//! chain and deciding what a render should do about errors are ordinary work
+//! and stay here, where every host gets them the same.
+
+use crate::error::Result;
+use crate::host::PluginHost;
+use crate::render::{render_form_values, render_template};
+use yaak_plugins::events::{
+    GetTemplateFunctionConfigResponse, GetTemplateFunctionSummaryResponse, GetThemesResponse,
+    RenderPurpose,
+};
+use yaak_rpc_schema::*;
+use yaak_templates::{RenderErrorBehavior, RenderOptions, transform_args};
+
+pub async fn cmd_render_template<H: PluginHost>(
+    host: H,
+    req: CmdRenderTemplateReq,
+) -> Result<String> {
+    let environment_chain =
+        host.db().resolve_environments(&req.workspace_id, None, req.environment_id.as_deref())?;
+    let cb = host.template_callback(req.purpose.unwrap_or(RenderPurpose::Preview)).await?;
+    let options = RenderOptions {
+        // A preview that throws would show the user an error where they expect
+        // to see the value so far, so callers rendering *into the UI* ask for
+        // empties instead.
+        error_behavior: match req.ignore_error {
+            Some(true) => RenderErrorBehavior::ReturnEmpty,
+            _ => RenderErrorBehavior::Throw,
+        },
+    };
+    Ok(render_template(&req.template, environment_chain, &cb, &options).await?)
+}
+
+/// Render only the *arguments* of a template's function calls, leaving the
+/// calls themselves intact. This is what turns a parsed template back into
+/// something displayable without evaluating it.
+pub async fn cmd_template_tokens_to_string<H: PluginHost>(
+    host: H,
+    req: CmdTemplateTokensToStringReq,
+) -> Result<String> {
+    let cb = host.template_callback(RenderPurpose::Preview).await?;
+    Ok(transform_args(req.tokens, &cb)?.to_string())
+}
+
+pub async fn cmd_template_function_summaries<H: PluginHost>(
+    host: H,
+    _req: CmdTemplateFunctionSummariesReq,
+) -> Result<Vec<GetTemplateFunctionSummaryResponse>> {
+    host.template_function_summaries().await
+}
+
+pub async fn cmd_template_function_config<H: PluginHost>(
+    host: H,
+    req: CmdTemplateFunctionConfigReq,
+) -> Result<GetTemplateFunctionConfigResponse> {
+    // A config form is being displayed, so a template that cannot resolve
+    // should show as blank rather than refuse to open the form.
+    let values = render_form_values(
+        &host,
+        &req.model,
+        req.environment_id.as_deref(),
+        req.values,
+        RenderPurpose::Preview,
+        &RenderOptions::return_empty(),
+    )
+    .await?;
+
+    host.template_function_config(&req.function_name, values, req.model.id()).await
+}
+
+pub async fn cmd_get_themes<H: PluginHost>(
+    host: H,
+    _req: CmdGetThemesReq,
+) -> Result<Vec<GetThemesResponse>> {
+    host.themes().await
+}
diff --git a/crates/yaak-commands/tests/test_host.rs b/crates/yaak-commands/tests/test_host.rs
new file mode 100644
index 0000000..de31d9f
--- /dev/null
+++ b/crates/yaak-commands/tests/test_host.rs
@@ -0,0 +1,580 @@
+//! A host that is nothing but the trait: a temp database, a fixed client id,
+//! a fixed session. It exists to prove that the handlers really do run without
+//! a desktop around them, and that the client's identity reaches the writes.
+//!
+//! Neither host here has a plugin runtime — no `PluginManager`, no sidecar.
+//! `TestHost` implements `Host` alone, so a handler that reaches for plugins
+//! would not compile against it. `SingleThreadedHost` goes further and answers
+//! `PluginHost` too, without one, which is only possible because that trait
+//! names operations rather than handing back a manager.
+
+use std::cell::RefCell;
+use std::collections::HashMap;
+use std::rc::Rc;
+use std::sync::{Arc, Mutex};
+use tempfile::TempDir;
+use yaak_commands::auth::cmd_get_http_authentication_config;
+use yaak_commands::models::{
+    cmd_default_headers, cmd_get_workspace_meta, models_delete, models_upsert,
+    models_workspace_models,
+};
+use yaak_commands::templates::{cmd_render_template, cmd_template_function_config};
+use yaak_commands::{Host, PluginHost};
+use yaak_core::WorkspaceContext;
+use yaak_crypto::manager::EncryptionManager;
+use yaak_models::blob_manager::BlobManager;
+use yaak_models::models::{AnyModel, Environment, EnvironmentVariable, Plugin, Workspace};
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::{ModelPayload, UpdateSource};
+use yaak_plugins::events::{
+    CallFolderActionRequest, CallGrpcRequestActionRequest, CallHttpRequestActionRequest,
+    CallWebsocketRequestActionRequest, CallWorkspaceActionRequest, GetFolderActionsResponse,
+    GetGrpcRequestActionsResponse, GetHttpAuthenticationConfigResponse,
+    GetHttpAuthenticationSummaryResponse, GetHttpRequestActionsResponse,
+    GetTemplateFunctionConfigResponse, GetTemplateFunctionSummaryResponse, GetThemesResponse,
+    GetWebsocketRequestActionsResponse, GetWorkspaceActionsResponse, ImportResponse, JsonPrimitive,
+    RenderPurpose,
+};
+use yaak_plugins::plugin_meta::PluginMetadata;
+use yaak_rpc_schema::{
+    CmdDefaultHeadersReq, CmdGetWorkspaceMetaReq, CmdRenderTemplateReq, ModelsDeleteReq,
+    ModelsUpsertReq, ModelsWorkspaceModelsReq,
+};
+use yaak_templates::TemplateCallback;
+
+#[derive(Clone)]
+struct TestHost {
+    inner: Arc<Inner>,
+}
+
+struct Inner {
+    _dir: TempDir,
+    query_manager: QueryManager,
+    blob_manager: BlobManager,
+    encryption_manager: EncryptionManager,
+    /// Every model write the database reported, so a test can check who it
+    /// says made them.
+    writes: Mutex<Vec<ModelPayload>>,
+    rx: Mutex<std::sync::mpsc::Receiver<ModelPayload>>,
+}
+
+impl TestHost {
+    fn new() -> Self {
+        let dir = TempDir::new().expect("temp dir");
+        let (query_manager, blob_manager, rx) = yaak_models::init_standalone(
+            dir.path().join("db.sqlite"),
+            dir.path().join("blobs.sqlite"),
+        )
+        .expect("init db");
+        let encryption_manager = EncryptionManager::new(query_manager.clone(), "app.yaak.test");
+        Self {
+            inner: Arc::new(Inner {
+                _dir: dir,
+                query_manager,
+                blob_manager,
+                encryption_manager,
+                writes: Mutex::new(Vec::new()),
+                rx: Mutex::new(rx),
+            }),
+        }
+    }
+
+    fn drain_writes(&self) -> Vec<ModelPayload> {
+        let rx = self.inner.rx.lock().unwrap();
+        let mut writes = self.inner.writes.lock().unwrap();
+        while let Ok(payload) = rx.try_recv() {
+            writes.push(payload);
+        }
+        writes.drain(..).collect()
+    }
+}
+
+impl Host for TestHost {
+    fn client_id(&self) -> &str {
+        "test-client"
+    }
+
+    fn session(&self) -> WorkspaceContext {
+        WorkspaceContext::new().with_workspace("wk_test")
+    }
+
+    fn app_version(&self) -> String {
+        "0.0.0-test".to_string()
+    }
+
+    fn query_manager(&self) -> &QueryManager {
+        &self.inner.query_manager
+    }
+
+    fn blob_manager(&self) -> &BlobManager {
+        &self.inner.blob_manager
+    }
+
+    fn encryption_manager(&self) -> &EncryptionManager {
+        &self.inner.encryption_manager
+    }
+}
+
+#[tokio::test(flavor = "multi_thread")]
+async fn writes_carry_the_client_id() {
+    let host = TestHost::new();
+    host.drain_writes(); // the rows startup creates
+
+    let workspace = Workspace { name: "From a test".to_string(), ..Default::default() };
+    let id = models_upsert(host.clone(), ModelsUpsertReq { model: AnyModel::Workspace(workspace) })
+        .await
+        .expect("upsert");
+    assert!(id.starts_with("wk_"), "unexpected id {id}");
+
+    let writes = host.drain_writes();
+    assert_eq!(writes.len(), 1);
+    assert!(
+        matches!(&writes[0].update_source, UpdateSource::Window { label } if label == "test-client"),
+        "the write should be attributed to the calling client, got {:?}",
+        writes[0].update_source,
+    );
+
+    let meta =
+        cmd_get_workspace_meta(host.clone(), CmdGetWorkspaceMetaReq { workspace_id: id.clone() })
+            .await
+            .expect("workspace meta");
+    assert_eq!(meta.workspace_id, id);
+
+    // Deletes cascade inside a transaction; make sure that path works with no
+    // host doing anything special around it.
+    let workspace = host.db().get_workspace(&id).expect("get workspace");
+    let deleted =
+        models_delete(host.clone(), ModelsDeleteReq { model: AnyModel::Workspace(workspace) })
+            .await
+            .expect("delete");
+    assert_eq!(deleted, id);
+    assert!(host.db().get_workspace(&id).is_err(), "workspace should be gone");
+}
+
+#[tokio::test]
+async fn host_free_handlers_need_no_state() {
+    let host = TestHost::new();
+    let headers = cmd_default_headers(host, CmdDefaultHeadersReq {}).await.expect("headers");
+    assert!(!headers.is_empty());
+}
+
+/// A host that is deliberately **not** `Send` or `Sync`: it keeps its state in
+/// an `Rc`, the way a single-threaded browser host has to, since
+/// `rusqlite::Connection` is not `Sync` to begin with. It also has no plugin
+/// runtime of any kind — no `PluginManager`, no sidecar, nothing to spawn.
+///
+/// Nothing here asserts much at runtime; the test is largely that it compiles.
+/// A `Host` demanding thread-safety, or a `PluginHost` handing back a
+/// `&PluginManager`, would shut such a host out of the traits entirely and this
+/// file would stop building.
+#[derive(Clone)]
+struct SingleThreadedHost {
+    inner: Rc<Inner>,
+    /// The values the last auth-config call arrived with, so a test can check
+    /// they were rendered before the host ever saw them.
+    auth_values: Rc<RefCell<Option<HashMap<String, JsonPrimitive>>>>,
+    /// Same, for the last template-function-config call.
+    fn_values: Rc<RefCell<Option<HashMap<String, JsonPrimitive>>>>,
+}
+
+impl Host for SingleThreadedHost {
+    fn client_id(&self) -> &str {
+        "tab-1"
+    }
+
+    fn session(&self) -> WorkspaceContext {
+        WorkspaceContext::new()
+    }
+
+    fn app_version(&self) -> String {
+        "0.0.0-web".to_string()
+    }
+
+    fn query_manager(&self) -> &QueryManager {
+        &self.inner.query_manager
+    }
+
+    fn blob_manager(&self) -> &BlobManager {
+        &self.inner.blob_manager
+    }
+
+    fn encryption_manager(&self) -> &EncryptionManager {
+        &self.inner.encryption_manager
+    }
+}
+
+/// A template callback with no plugins behind it: variables still resolve,
+/// function calls have nothing to run them. A browser host would put a Worker
+/// round-trip where this returns an error.
+struct NoTemplateFunctions;
+
+impl TemplateCallback for NoTemplateFunctions {
+    async fn run(
+        &self,
+        fn_name: &str,
+        _args: HashMap<String, serde_json::Value>,
+    ) -> yaak_templates::error::Result<String> {
+        Err(yaak_templates::error::Error::RenderError(format!(
+            "no plugin runtime to run {fn_name}()"
+        )))
+    }
+
+    fn transform_arg(
+        &self,
+        _fn_name: &str,
+        _arg_name: &str,
+        arg_value: &str,
+    ) -> yaak_templates::error::Result<String> {
+        Ok(arg_value.to_string())
+    }
+}
+
+/// Answering plugin questions with no plugin runtime behind them. A browser
+/// host would put a `postMessage` round-trip to its Worker where these return
+/// constants; the shape of the trait is what makes either possible.
+impl PluginHost for SingleThreadedHost {
+    async fn loaded_plugin_metadata(&self, _directory: &str) -> Option<PluginMetadata> {
+        None
+    }
+
+    async fn take_plugin_init_errors(&self) -> Vec<(String, String)> {
+        Vec::new()
+    }
+
+    async fn resolve_plugins(&self, plugins: Vec<Plugin>) -> Vec<Plugin> {
+        // No runtime to enrich them with; the database rows are still the truth
+        // about what is installed.
+        plugins
+    }
+
+    async fn encrypt_secure_template(&self, _template: &str) -> yaak_commands::Result<String> {
+        Err(yaak_commands::Error::Generic("no plugin runtime on this host".into()))
+    }
+
+    async fn template_callback(
+        &self,
+        _purpose: RenderPurpose,
+    ) -> yaak_commands::Result<impl TemplateCallback> {
+        Ok(NoTemplateFunctions)
+    }
+
+    async fn template_function_summaries(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetTemplateFunctionSummaryResponse>> {
+        Ok(Vec::new())
+    }
+
+    async fn template_function_config(
+        &self,
+        function_name: &str,
+        values: HashMap<String, JsonPrimitive>,
+        _model_id: &str,
+    ) -> yaak_commands::Result<GetTemplateFunctionConfigResponse> {
+        *self.fn_values.borrow_mut() = Some(values);
+        Err(yaak_commands::Error::Generic(format!("no plugin provides {function_name}()")))
+    }
+
+    async fn themes(&self) -> yaak_commands::Result<Vec<GetThemesResponse>> {
+        Ok(Vec::new())
+    }
+
+    // No plugins, so nothing contributes actions and nothing can run one.
+
+    async fn http_request_actions(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetHttpRequestActionsResponse>> {
+        Ok(Vec::new())
+    }
+
+    async fn websocket_request_actions(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetWebsocketRequestActionsResponse>> {
+        Ok(Vec::new())
+    }
+
+    async fn grpc_request_actions(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetGrpcRequestActionsResponse>> {
+        Ok(Vec::new())
+    }
+
+    async fn workspace_actions(&self) -> yaak_commands::Result<Vec<GetWorkspaceActionsResponse>> {
+        Ok(Vec::new())
+    }
+
+    async fn folder_actions(&self) -> yaak_commands::Result<Vec<GetFolderActionsResponse>> {
+        Ok(Vec::new())
+    }
+
+    async fn call_http_request_action(
+        &self,
+        _req: CallHttpRequestActionRequest,
+    ) -> yaak_commands::Result<()> {
+        Err(no_plugins())
+    }
+
+    async fn call_grpc_request_action(
+        &self,
+        _req: CallGrpcRequestActionRequest,
+    ) -> yaak_commands::Result<()> {
+        Err(no_plugins())
+    }
+
+    async fn call_websocket_request_action(
+        &self,
+        _req: CallWebsocketRequestActionRequest,
+    ) -> yaak_commands::Result<()> {
+        Err(no_plugins())
+    }
+
+    async fn call_workspace_action(
+        &self,
+        _req: CallWorkspaceActionRequest,
+    ) -> yaak_commands::Result<()> {
+        Err(no_plugins())
+    }
+
+    async fn call_folder_action(&self, _req: CallFolderActionRequest) -> yaak_commands::Result<()> {
+        Err(no_plugins())
+    }
+
+    async fn http_authentication_summaries(
+        &self,
+    ) -> yaak_commands::Result<Vec<GetHttpAuthenticationSummaryResponse>> {
+        Ok(Vec::new())
+    }
+
+    async fn http_authentication_config(
+        &self,
+        _auth_name: &str,
+        values: HashMap<String, JsonPrimitive>,
+        _model_id: &str,
+    ) -> yaak_commands::Result<GetHttpAuthenticationConfigResponse> {
+        *self.auth_values.borrow_mut() = Some(values);
+        Err(no_plugins())
+    }
+
+    async fn call_http_authentication_action(
+        &self,
+        _auth_name: &str,
+        _action_index: i32,
+        _values: HashMap<String, JsonPrimitive>,
+        _model_id: &str,
+    ) -> yaak_commands::Result<()> {
+        Err(no_plugins())
+    }
+
+    async fn import_data(&self, _content: &str) -> yaak_commands::Result<ImportResponse> {
+        Err(no_plugins())
+    }
+
+    async fn reload_plugins(&self, _plugins: Vec<Plugin>) -> Vec<(String, String)> {
+        Vec::new()
+    }
+}
+
+fn no_plugins() -> yaak_commands::Error {
+    yaak_commands::Error::Generic("no plugin runtime on this host".into())
+}
+
+#[tokio::test]
+async fn a_single_threaded_host_can_implement_the_trait() {
+    let TestHost { inner } = TestHost::new();
+    let host = SingleThreadedHost {
+        inner: Rc::new(Arc::into_inner(inner).expect("sole owner")),
+        auth_values: Rc::new(RefCell::new(None)),
+        fn_values: Rc::new(RefCell::new(None)),
+    };
+
+    let workspace = Workspace { name: "From one thread".to_string(), ..Default::default() };
+    let id = models_upsert(host.clone(), ModelsUpsertReq { model: AnyModel::Workspace(workspace) })
+        .await
+        .expect("upsert");
+
+    // A `PluginHost` command, on a host with no plugin runtime at all. This is
+    // the one that could not be written when the trait handed back a
+    // `&PluginManager`.
+    let json = models_workspace_models(
+        host.clone(),
+        ModelsWorkspaceModelsReq { workspace_id: Some(id.clone()) },
+    )
+    .await
+    .expect("workspace models");
+    assert!(json.contains(&id), "the workspace should be in its own bootstrap payload");
+
+    // Rendering, on a host whose template callback has no plugins behind it.
+    // Resolving the environment chain is a database read and the render is
+    // shared code; only the callback came from the host. Rendering a real
+    // variable is what proves the chain was resolved rather than skipped.
+    let environment = host
+        .query_manager()
+        .with_tx(|tx| {
+            tx.upsert_environment(
+                &Environment {
+                    workspace_id: id.clone(),
+                    name: "Test env".to_string(),
+                    variables: vec![EnvironmentVariable {
+                        enabled: true,
+                        name: "greeting".to_string(),
+                        value: "hello".to_string(),
+                        id: None,
+                    }],
+                    ..Default::default()
+                },
+                &host.update_source(),
+            )
+        })
+        .expect("seed environment");
+
+    let rendered = cmd_render_template(
+        host.clone(),
+        CmdRenderTemplateReq {
+            template: "${[ greeting ]} world".to_string(),
+            workspace_id: id.clone(),
+            environment_id: Some(environment.id.clone()),
+            purpose: None,
+            ignore_error: None,
+        },
+    )
+    .await
+    .expect("render");
+    assert_eq!(rendered, "hello world", "the environment chain should have been resolved");
+
+    // The delete path too, since it is the one that used to reach for a
+    // blocking thread this host does not have.
+    let workspace = host.db().get_workspace(&id).expect("get workspace");
+    let deleted = models_delete(host, ModelsDeleteReq { model: AnyModel::Workspace(workspace) })
+        .await
+        .expect("delete");
+    assert_eq!(deleted, id);
+}
+
+/// Auth form values may contain templates, and a plugin must never see one
+/// unrendered. The rendering happens in the shared handler, so this checks the
+/// host received a resolved value rather than `${[ ... ]}`.
+#[tokio::test]
+async fn auth_values_are_rendered_before_the_host_sees_them() {
+    let TestHost { inner } = TestHost::new();
+    let host = SingleThreadedHost {
+        inner: Rc::new(Arc::into_inner(inner).expect("sole owner")),
+        auth_values: Rc::new(RefCell::new(None)),
+        fn_values: Rc::new(RefCell::new(None)),
+    };
+
+    let workspace = host
+        .query_manager()
+        .with_tx(|tx| {
+            tx.upsert_workspace(
+                &Workspace { name: "Auth".to_string(), ..Default::default() },
+                &host.update_source(),
+            )
+        })
+        .expect("workspace");
+    host.query_manager()
+        .with_tx(|tx| {
+            tx.upsert_environment(
+                &Environment {
+                    workspace_id: workspace.id.clone(),
+                    name: "Env".to_string(),
+                    variables: vec![EnvironmentVariable {
+                        enabled: true,
+                        name: "token".to_string(),
+                        value: "s3cret".to_string(),
+                        id: None,
+                    }],
+                    ..Default::default()
+                },
+                &host.update_source(),
+            )
+        })
+        .expect("environment");
+    let environment = host.db().list_environments(&workspace.id).expect("list").remove(0);
+
+    let mut values = HashMap::new();
+    values.insert("password".to_string(), JsonPrimitive::String("${[ token ]}".to_string()));
+
+    // The host refuses the call itself — it has no plugins — but only after the
+    // handler has rendered and handed over the values, which is what matters.
+    let _ = cmd_get_http_authentication_config(
+        host.clone(),
+        yaak_rpc_schema::CmdGetHttpAuthenticationConfigReq {
+            auth_name: "basic".to_string(),
+            values,
+            model: AnyModel::Workspace(workspace),
+            environment_id: Some(environment.id),
+        },
+    )
+    .await;
+
+    let seen = host.auth_values.borrow().clone().expect("the host should have been called");
+    assert!(
+        matches!(seen.get("password"), Some(JsonPrimitive::String(v)) if v == "s3cret"),
+        "the template should have been rendered before reaching the host, got {:?}",
+        seen.get("password"),
+    );
+}
+
+/// Same contract as auth: template function argument values may contain
+/// templates (the 1Password token argument defaults to `${[1PASSWORD_TOKEN]}`),
+/// and the shared handler renders them before the host is called.
+#[tokio::test]
+async fn template_function_values_are_rendered_before_the_host_sees_them() {
+    let TestHost { inner } = TestHost::new();
+    let host = SingleThreadedHost {
+        inner: Rc::new(Arc::into_inner(inner).expect("sole owner")),
+        auth_values: Rc::new(RefCell::new(None)),
+        fn_values: Rc::new(RefCell::new(None)),
+    };
+
+    let workspace = host
+        .query_manager()
+        .with_tx(|tx| {
+            tx.upsert_workspace(
+                &Workspace { name: "Functions".to_string(), ..Default::default() },
+                &host.update_source(),
+            )
+        })
+        .expect("workspace");
+    host.query_manager()
+        .with_tx(|tx| {
+            tx.upsert_environment(
+                &Environment {
+                    workspace_id: workspace.id.clone(),
+                    name: "Env".to_string(),
+                    variables: vec![EnvironmentVariable {
+                        enabled: true,
+                        name: "1PASSWORD_TOKEN".to_string(),
+                        value: "ops_abc123".to_string(),
+                        id: None,
+                    }],
+                    ..Default::default()
+                },
+                &host.update_source(),
+            )
+        })
+        .expect("environment");
+    let environment = host.db().list_environments(&workspace.id).expect("list").remove(0);
+
+    let mut values = HashMap::new();
+    values.insert("token".to_string(), JsonPrimitive::String("${[1PASSWORD_TOKEN]}".to_string()));
+
+    // The host refuses the call itself — it has no plugins — but only after the
+    // handler has rendered and handed over the values, which is what matters.
+    let _ = cmd_template_function_config(
+        host.clone(),
+        yaak_rpc_schema::CmdTemplateFunctionConfigReq {
+            function_name: "1password.item".to_string(),
+            values,
+            model: AnyModel::Workspace(workspace),
+            environment_id: Some(environment.id),
+        },
+    )
+    .await;
+
+    let seen = host.fn_values.borrow().clone().expect("the host should have been called");
+    assert!(
+        matches!(seen.get("token"), Some(JsonPrimitive::String(v)) if v == "ops_abc123"),
+        "the template should have been rendered before reaching the host, got {:?}",
+        seen.get("token"),
+    );
+}
diff --git a/crates/yaak-common/Cargo.toml b/crates/yaak-common/Cargo.toml
new file mode 100644
index 0000000..42bdf94
--- /dev/null
+++ b/crates/yaak-common/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "yaak-common"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+serde_json = { workspace = true }
+tokio = { workspace = true, features = ["process"] }
diff --git a/crates/yaak-common/src/command.rs b/crates/yaak-common/src/command.rs
new file mode 100644
index 0000000..dbaaf9e
--- /dev/null
+++ b/crates/yaak-common/src/command.rs
@@ -0,0 +1,42 @@
+use std::ffi::{OsStr, OsString};
+use std::io::{self, ErrorKind};
+use std::process::Stdio;
+
+#[cfg(target_os = "windows")]
+const CREATE_NO_WINDOW: u32 = 0x0800_0000;
+
+/// Creates a new `tokio::process::Command` that won't spawn a console window on Windows.
+pub fn new_xplatform_command<S: AsRef<OsStr>>(program: S) -> tokio::process::Command {
+    #[allow(unused_mut)]
+    let mut cmd = tokio::process::Command::new(program);
+    #[cfg(target_os = "windows")]
+    {
+        use std::os::windows::process::CommandExt;
+        cmd.creation_flags(CREATE_NO_WINDOW);
+    }
+    cmd
+}
+
+/// Creates a command only if the binary exists and can be invoked with the given probe argument.
+pub async fn new_checked_command<S: AsRef<OsStr>>(
+    program: S,
+    probe_arg: &str,
+) -> io::Result<tokio::process::Command> {
+    let program: OsString = program.as_ref().to_os_string();
+
+    let mut probe = new_xplatform_command(&program);
+    probe.arg(probe_arg).stdin(Stdio::null()).stdout(Stdio::null()).stderr(Stdio::null());
+
+    let status = probe.status().await?;
+    if !status.success() {
+        return Err(io::Error::new(
+            ErrorKind::NotFound,
+            format!(
+                "'{}' is not available on PATH or failed to execute",
+                program.to_string_lossy()
+            ),
+        ));
+    }
+
+    Ok(new_xplatform_command(&program))
+}
diff --git a/crates/yaak-common/src/lib.rs b/crates/yaak-common/src/lib.rs
new file mode 100644
index 0000000..16a3846
--- /dev/null
+++ b/crates/yaak-common/src/lib.rs
@@ -0,0 +1,3 @@
+pub mod command;
+pub mod platform;
+pub mod serde;
diff --git a/crates/yaak-common/src/platform.rs b/crates/yaak-common/src/platform.rs
new file mode 100644
index 0000000..4888d17
--- /dev/null
+++ b/crates/yaak-common/src/platform.rs
@@ -0,0 +1,55 @@
+use crate::platform::OperatingSystem::{Linux, MacOS, Unknown, Windows};
+
+pub enum OperatingSystem {
+    Windows,
+    MacOS,
+    Linux,
+    Unknown,
+}
+
+pub fn get_os() -> OperatingSystem {
+    if cfg!(target_os = "windows") {
+        Windows
+    } else if cfg!(target_os = "macos") {
+        MacOS
+    } else if cfg!(target_os = "linux") {
+        Linux
+    } else {
+        Unknown
+    }
+}
+
+pub fn get_os_str() -> &'static str {
+    match get_os() {
+        Windows => "windows",
+        MacOS => "macos",
+        Linux => "linux",
+        Unknown => "unknown",
+    }
+}
+
+pub fn get_ua_platform() -> &'static str {
+    if cfg!(target_os = "windows") {
+        "Win"
+    } else if cfg!(target_os = "macos") {
+        "Mac"
+    } else if cfg!(target_os = "linux") {
+        "Linux"
+    } else {
+        "Unknown"
+    }
+}
+
+pub fn get_ua_arch() -> &'static str {
+    if cfg!(target_arch = "x86_64") {
+        "x86_64"
+    } else if cfg!(target_arch = "x86") {
+        "i386"
+    } else if cfg!(target_arch = "arm") {
+        "ARM"
+    } else if cfg!(target_arch = "aarch64") {
+        "ARM64"
+    } else {
+        "Unknown"
+    }
+}
diff --git a/crates/yaak-common/src/serde.rs b/crates/yaak-common/src/serde.rs
new file mode 100644
index 0000000..49146aa
--- /dev/null
+++ b/crates/yaak-common/src/serde.rs
@@ -0,0 +1,30 @@
+use serde_json::Value;
+use std::collections::BTreeMap;
+
+pub fn get_bool(v: &Value, key: &str, fallback: bool) -> bool {
+    match v.get(key) {
+        None => fallback,
+        Some(v) => v.as_bool().unwrap_or(fallback),
+    }
+}
+
+pub fn get_str<'a>(v: &'a Value, key: &str) -> &'a str {
+    match v.get(key) {
+        None => "",
+        Some(v) => v.as_str().unwrap_or_default(),
+    }
+}
+
+pub fn get_str_map<'a>(v: &'a BTreeMap<String, Value>, key: &str) -> &'a str {
+    match v.get(key) {
+        None => "",
+        Some(v) => v.as_str().unwrap_or_default(),
+    }
+}
+
+pub fn get_bool_map(v: &BTreeMap<String, Value>, key: &str, fallback: bool) -> bool {
+    match v.get(key) {
+        None => fallback,
+        Some(v) => v.as_bool().unwrap_or(fallback),
+    }
+}
diff --git a/crates/yaak-core/Cargo.toml b/crates/yaak-core/Cargo.toml
new file mode 100644
index 0000000..c26cda8
--- /dev/null
+++ b/crates/yaak-core/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "yaak-core"
+version = "0.0.0"
+edition = "2024"
+authors = ["Gregory Schier"]
+publish = false
+
+[dependencies]
+thiserror = { workspace = true }
diff --git a/crates/yaak-core/src/context.rs b/crates/yaak-core/src/context.rs
new file mode 100644
index 0000000..ccadf15
--- /dev/null
+++ b/crates/yaak-core/src/context.rs
@@ -0,0 +1,37 @@
+/// Context for a workspace operation.
+///
+/// In Tauri, this is extracted from the WebviewWindow URL.
+/// In CLI, this is constructed from command arguments or config.
+#[derive(Debug, Clone, Default)]
+pub struct WorkspaceContext {
+    pub workspace_id: Option<String>,
+    pub environment_id: Option<String>,
+    pub cookie_jar_id: Option<String>,
+    pub request_id: Option<String>,
+}
+
+impl WorkspaceContext {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn with_workspace(mut self, workspace_id: impl Into<String>) -> Self {
+        self.workspace_id = Some(workspace_id.into());
+        self
+    }
+
+    pub fn with_environment(mut self, environment_id: impl Into<String>) -> Self {
+        self.environment_id = Some(environment_id.into());
+        self
+    }
+
+    pub fn with_cookie_jar(mut self, cookie_jar_id: impl Into<String>) -> Self {
+        self.cookie_jar_id = Some(cookie_jar_id.into());
+        self
+    }
+
+    pub fn with_request(mut self, request_id: impl Into<String>) -> Self {
+        self.request_id = Some(request_id.into());
+        self
+    }
+}
diff --git a/crates/yaak-core/src/error.rs b/crates/yaak-core/src/error.rs
new file mode 100644
index 0000000..d0c6cd8
--- /dev/null
+++ b/crates/yaak-core/src/error.rs
@@ -0,0 +1,15 @@
+use thiserror::Error;
+
+pub type Result<T> = std::result::Result<T, Error>;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error("Missing required context: {0}")]
+    MissingContext(String),
+
+    #[error("Configuration error: {0}")]
+    Config(String),
+
+    #[error("IO error: {0}")]
+    Io(#[from] std::io::Error),
+}
diff --git a/crates/yaak-core/src/lib.rs b/crates/yaak-core/src/lib.rs
new file mode 100644
index 0000000..728bc28
--- /dev/null
+++ b/crates/yaak-core/src/lib.rs
@@ -0,0 +1,10 @@
+//! Core abstractions for Yaak that work without Tauri.
+//!
+//! This crate provides foundational types and traits that allow Yaak's
+//! business logic to run in both Tauri (desktop app) and CLI contexts.
+
+mod context;
+mod error;
+
+pub use context::WorkspaceContext;
+pub use error::{Error, Result};
diff --git a/crates/yaak-crypto/Cargo.toml b/crates/yaak-crypto/Cargo.toml
new file mode 100644
index 0000000..5900b99
--- /dev/null
+++ b/crates/yaak-crypto/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "yaak-crypto"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+[dependencies]
+base32 = "0.5.1" # For encoding human-readable key
+base64 = "0.22.1" # For encoding in the database
+chacha20poly1305 = "0.11.0"
+keyring = { workspace = true, features = ["apple-native", "windows-native", "sync-secret-service"] }
+log = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+thiserror = { workspace = true }
+yaak-models = { workspace = true }
diff --git a/crates/yaak-crypto/index.ts b/crates/yaak-crypto/index.ts
new file mode 100644
index 0000000..81a20d5
--- /dev/null
+++ b/crates/yaak-crypto/index.ts
@@ -0,0 +1,17 @@
+import { platform } from "@yaakapp-internal/platform";
+
+export function enableEncryption(workspaceId: string) {
+  return platform.rpc<void>("cmd_enable_encryption", { workspaceId });
+}
+
+export function revealWorkspaceKey(workspaceId: string) {
+  return platform.rpc<string>("cmd_reveal_workspace_key", { workspaceId });
+}
+
+export function setWorkspaceKey(args: { workspaceId: string; key: string }) {
+  return platform.rpc<void>("cmd_set_workspace_key", args);
+}
+
+export function disableEncryption(workspaceId: string) {
+  return platform.rpc<void>("cmd_disable_encryption", { workspaceId });
+}
diff --git a/crates/yaak-crypto/package.json b/crates/yaak-crypto/package.json
new file mode 100644
index 0000000..585b375
--- /dev/null
+++ b/crates/yaak-crypto/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/crypto",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates/yaak-crypto/src/encryption.rs b/crates/yaak-crypto/src/encryption.rs
new file mode 100644
index 0000000..bf4a227
--- /dev/null
+++ b/crates/yaak-crypto/src/encryption.rs
@@ -0,0 +1,119 @@
+use crate::error::Error::{DecryptionError, EncryptionError, InvalidEncryptedData};
+use crate::error::Result;
+use chacha20poly1305::aead::array::typenum::Unsigned;
+use chacha20poly1305::aead::{Aead, AeadCore, Generate, Key, KeyInit};
+use chacha20poly1305::{XChaCha20Poly1305, XNonce};
+
+const ENCRYPTION_TAG: &str = "yA4k3nC";
+const ENCRYPTION_VERSION: u8 = 1;
+
+pub(crate) fn encrypt_data(data: &[u8], key: &Key<XChaCha20Poly1305>) -> Result<Vec<u8>> {
+    let nonce = XNonce::generate();
+    let cipher = XChaCha20Poly1305::new(&key);
+    let ciphered_data = cipher.encrypt(&nonce, data).map_err(|_| EncryptionError)?;
+
+    let mut data: Vec<u8> = Vec::new();
+    data.extend_from_slice(ENCRYPTION_TAG.as_bytes()); // Tag
+    data.push(ENCRYPTION_VERSION); // Version
+    data.extend_from_slice(&nonce.as_slice()); // Nonce
+    data.extend_from_slice(&ciphered_data); // Ciphertext
+
+    Ok(data)
+}
+
+pub(crate) fn decrypt_data(cipher_data: &[u8], key: &Key<XChaCha20Poly1305>) -> Result<Vec<u8>> {
+    // Yaak Tag + ID + Version + Nonce + ... ciphertext ...
+    let (tag, rest) =
+        cipher_data.split_at_checked(ENCRYPTION_TAG.len()).ok_or(InvalidEncryptedData)?;
+    if tag != ENCRYPTION_TAG.as_bytes() {
+        return Err(InvalidEncryptedData);
+    }
+
+    let (version, rest) = rest.split_at_checked(1).ok_or(InvalidEncryptedData)?;
+    if version[0] != ENCRYPTION_VERSION {
+        return Err(InvalidEncryptedData);
+    }
+
+    let nonce_bytes = <XChaCha20Poly1305 as AeadCore>::NonceSize::USIZE;
+    let (nonce, ciphered_data) = rest.split_at_checked(nonce_bytes).ok_or(InvalidEncryptedData)?;
+
+    let nonce: &XNonce = nonce.try_into().map_err(|_| InvalidEncryptedData)?;
+    let cipher = XChaCha20Poly1305::new(&key);
+    cipher.decrypt(nonce, ciphered_data).map_err(|_e| DecryptionError)
+}
+
+#[cfg(test)]
+mod test {
+    use crate::encryption::{decrypt_data, encrypt_data};
+    use crate::error::Error::InvalidEncryptedData;
+    use crate::error::Result;
+    use chacha20poly1305::aead::{Generate, Key};
+    use chacha20poly1305::XChaCha20Poly1305;
+
+    #[test]
+    fn test_encrypt_decrypt() -> Result<()> {
+        let key = Key::<XChaCha20Poly1305>::generate();
+        let encrypted = encrypt_data("hello world".as_bytes(), &key)?;
+        let decrypted = decrypt_data(encrypted.as_slice(), &key)?;
+        assert_eq!(String::from_utf8(decrypted).unwrap(), "hello world");
+        Ok(())
+    }
+
+    #[test]
+    fn test_decrypt_empty() -> Result<()> {
+        let key = Key::<XChaCha20Poly1305>::generate();
+        let encrypted = encrypt_data(&[], &key)?;
+        assert_eq!(encrypted.len(), 48);
+        let decrypted = decrypt_data(encrypted.as_slice(), &key)?;
+        assert_eq!(String::from_utf8(decrypted).unwrap(), "");
+        Ok(())
+    }
+
+    #[test]
+    fn test_decrypt_bad_version() -> Result<()> {
+        let key = Key::<XChaCha20Poly1305>::generate();
+        let mut encrypted = encrypt_data("hello world".as_bytes(), &key)?;
+        encrypted[7] = 0;
+        let decrypted = decrypt_data(encrypted.as_slice(), &key);
+        assert!(matches!(decrypted, Err(InvalidEncryptedData)));
+        Ok(())
+    }
+
+    #[test]
+    fn test_decrypt_bad_tag() -> Result<()> {
+        let key = Key::<XChaCha20Poly1305>::generate();
+        let mut encrypted = encrypt_data("hello world".as_bytes(), &key)?;
+        encrypted[0] = 2;
+        let decrypted = decrypt_data(encrypted.as_slice(), &key);
+        assert!(matches!(decrypted, Err(InvalidEncryptedData)));
+        Ok(())
+    }
+
+    #[test]
+    fn test_decrypt_unencrypted_data() -> Result<()> {
+        let key = Key::<XChaCha20Poly1305>::generate();
+        let decrypted = decrypt_data("123".as_bytes(), &key);
+        assert!(matches!(decrypted, Err(InvalidEncryptedData)));
+        Ok(())
+    }
+}
+
+#[cfg(test)]
+mod compatibility {
+    use super::*;
+
+    /// Produced by chacha20poly1305 0.10.1. Decrypting it here proves a crate
+    /// upgrade hasn't changed the on-disk format, which users already have
+    /// rows of in their databases.
+    const V1_FROM_0_10: &str = "7941346b336e43017c7cb13467eecaa963b11734be636f9cc4152de348584fb27e95d1a70973e557cd335cf29e12d0d305d63ca0aa168f1b17003b1690a9d49140f0";
+
+    #[test]
+    fn decrypts_data_written_by_the_previous_release() {
+        let bytes: Vec<u8> = (0..V1_FROM_0_10.len())
+            .step_by(2)
+            .map(|i| u8::from_str_radix(&V1_FROM_0_10[i..i + 2], 16).unwrap())
+            .collect();
+        let key = Key::<XChaCha20Poly1305>::from([7u8; 32]);
+        assert_eq!(decrypt_data(&bytes, &key).unwrap(), b"yaak golden vector");
+    }
+}
diff --git a/crates/yaak-crypto/src/error.rs b/crates/yaak-crypto/src/error.rs
new file mode 100644
index 0000000..ca70e97
--- /dev/null
+++ b/crates/yaak-crypto/src/error.rs
@@ -0,0 +1,50 @@
+use serde::{Serialize, Serializer};
+use std::io;
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error(transparent)]
+    DbError(#[from] yaak_models::error::Error),
+
+    #[error("Keyring error: {0}")]
+    KeyringError(#[from] keyring::Error),
+
+    #[error("Missing workspace encryption key")]
+    MissingWorkspaceKey,
+
+    #[error("Incorrect workspace key")]
+    IncorrectWorkspaceKey,
+
+    #[error("Failed to decrypt workspace key: {0}")]
+    WorkspaceKeyDecryptionError(String),
+
+    #[error("Crypto IO error: {0}")]
+    IoError(#[from] io::Error),
+
+    #[error("Failed to encrypt data")]
+    EncryptionError,
+
+    #[error("Failed to decrypt data")]
+    DecryptionError,
+
+    #[error("Invalid encrypted data")]
+    InvalidEncryptedData,
+
+    #[error("Invalid key provided")]
+    InvalidHumanKey,
+
+    #[error("Encryption error: {0}")]
+    GenericError(String),
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-crypto/src/lib.rs b/crates/yaak-crypto/src/lib.rs
new file mode 100644
index 0000000..6fe9224
--- /dev/null
+++ b/crates/yaak-crypto/src/lib.rs
@@ -0,0 +1,7 @@
+extern crate core;
+
+pub mod encryption;
+pub mod error;
+pub mod manager;
+mod master_key;
+mod workspace_key;
diff --git a/crates/yaak-crypto/src/manager.rs b/crates/yaak-crypto/src/manager.rs
new file mode 100644
index 0000000..b17111c
--- /dev/null
+++ b/crates/yaak-crypto/src/manager.rs
@@ -0,0 +1,189 @@
+use crate::error::Error::{
+    GenericError, IncorrectWorkspaceKey, MissingWorkspaceKey, WorkspaceKeyDecryptionError,
+};
+use crate::error::{Error, Result};
+use crate::master_key::MasterKey;
+use crate::workspace_key::WorkspaceKey;
+use base64::prelude::BASE64_STANDARD;
+use base64::Engine;
+use log::{info, warn};
+use std::collections::HashMap;
+use std::sync::{Arc, Mutex};
+use yaak_models::models::{EncryptedKey, Workspace, WorkspaceMeta};
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::{generate_id_of_length, UpdateSource};
+
+const KEY_USER: &str = "encryption-key";
+
+#[derive(Debug, Clone)]
+pub struct EncryptionManager {
+    cached_master_key: Arc<Mutex<Option<MasterKey>>>,
+    cached_workspace_keys: Arc<Mutex<HashMap<String, WorkspaceKey>>>,
+    query_manager: QueryManager,
+    app_id: String,
+}
+
+impl EncryptionManager {
+    pub fn new(query_manager: QueryManager, app_id: impl Into<String>) -> Self {
+        Self {
+            cached_master_key: Default::default(),
+            cached_workspace_keys: Default::default(),
+            query_manager,
+            app_id: app_id.into(),
+        }
+    }
+
+    pub fn encrypt(&self, workspace_id: &str, data: &[u8]) -> Result<Vec<u8>> {
+        let workspace_secret = self.get_workspace_key(workspace_id)?;
+        workspace_secret.encrypt(data)
+    }
+
+    pub fn decrypt(&self, workspace_id: &str, data: &[u8]) -> Result<Vec<u8>> {
+        let workspace_secret = self.get_workspace_key(workspace_id)?;
+        workspace_secret.decrypt(data)
+    }
+
+    pub fn reveal_workspace_key(&self, workspace_id: &str) -> Result<String> {
+        let key = self.get_workspace_key(workspace_id)?;
+        key.to_human()
+    }
+
+    pub fn set_human_key(&self, workspace_id: &str, human_key: &str) -> Result<WorkspaceMeta> {
+        let wkey = WorkspaceKey::from_human(human_key)?;
+
+        let workspace = self.query_manager.connect().get_workspace(workspace_id)?;
+        let encryption_key_challenge = match workspace.encryption_key_challenge {
+            None => return self.set_workspace_key(workspace_id, &wkey),
+            Some(c) => c,
+        };
+
+        let encryption_key_challenge = match BASE64_STANDARD.decode(encryption_key_challenge) {
+            Ok(c) => c,
+            Err(_) => return Err(GenericError("Failed to decode workspace challenge".to_string())),
+        };
+
+        if let Err(_) = wkey.decrypt(encryption_key_challenge.as_slice()) {
+            return Err(IncorrectWorkspaceKey);
+        };
+
+        self.set_workspace_key(workspace_id, &wkey)
+    }
+
+    pub(crate) fn set_workspace_key(
+        &self,
+        workspace_id: &str,
+        wkey: &WorkspaceKey,
+    ) -> Result<WorkspaceMeta> {
+        info!("Created workspace key for {workspace_id}");
+
+        let encrypted_key = BASE64_STANDARD.encode(self.get_master_key()?.encrypt(wkey.raw_key())?);
+        let encrypted_key = EncryptedKey { encrypted_key };
+        let encryption_key_challenge = wkey.encrypt(generate_id_of_length(50).as_bytes())?;
+        let encryption_key_challenge = Some(BASE64_STANDARD.encode(encryption_key_challenge));
+
+        let workspace_meta = self.query_manager.with_tx::<WorkspaceMeta, Error>(|tx| {
+            let workspace = tx.get_workspace(workspace_id)?;
+            let workspace_meta = tx.ensure_workspace_meta(workspace_id)?;
+            tx.upsert_workspace(
+                &Workspace { encryption_key_challenge, ..workspace },
+                &UpdateSource::Background,
+            )?;
+
+            Ok(tx.upsert_workspace_meta(
+                &WorkspaceMeta { encryption_key: Some(encrypted_key.clone()), ..workspace_meta },
+                &UpdateSource::Background,
+            )?)
+        })?;
+
+        let mut cache = self.cached_workspace_keys.lock().unwrap();
+        cache.insert(workspace_id.to_string(), wkey.clone());
+
+        Ok(workspace_meta)
+    }
+
+    pub fn ensure_workspace_key(&self, workspace_id: &str) -> Result<WorkspaceMeta> {
+        let workspace_meta =
+            self.query_manager.with_tx(|tx| tx.ensure_workspace_meta(workspace_id))?;
+
+        // Already exists
+        if let Some(_) = workspace_meta.encryption_key {
+            warn!("Tried to create workspace key when one already exists for {workspace_id}");
+            return Ok(workspace_meta);
+        }
+
+        let wkey = WorkspaceKey::create()?;
+        self.set_workspace_key(workspace_id, &wkey)
+    }
+
+    pub fn disable_encryption(&self, workspace_id: &str) -> Result<()> {
+        info!("Disabling encryption for {workspace_id}");
+
+        self.query_manager.with_tx::<(), Error>(|tx| {
+            let workspace = tx.get_workspace(workspace_id)?;
+            let workspace_meta = tx.ensure_workspace_meta(workspace_id)?;
+
+            // Clear encryption challenge on workspace
+            tx.upsert_workspace(
+                &Workspace { encryption_key_challenge: None, ..workspace },
+                &UpdateSource::Background,
+            )?;
+
+            // Clear encryption key on workspace meta
+            tx.upsert_workspace_meta(
+                &WorkspaceMeta { encryption_key: None, ..workspace_meta },
+                &UpdateSource::Background,
+            )?;
+
+            Ok(())
+        })?;
+
+        // Remove from cache
+        let mut cache = self.cached_workspace_keys.lock().unwrap();
+        cache.remove(workspace_id);
+
+        Ok(())
+    }
+
+    fn get_workspace_key(&self, workspace_id: &str) -> Result<WorkspaceKey> {
+        {
+            let cache = self.cached_workspace_keys.lock().unwrap();
+            if let Some(k) = cache.get(workspace_id) {
+                return Ok(k.clone());
+            }
+        };
+
+        let key = match self
+            .query_manager
+            .connect()
+            .get_workspace_meta(workspace_id)
+            .and_then(|m| m.encryption_key)
+        {
+            None => return Err(MissingWorkspaceKey),
+            Some(k) => k,
+        };
+
+        let mkey = self.get_master_key()?;
+        let decoded_key = BASE64_STANDARD
+            .decode(key.encrypted_key)
+            .map_err(|e| WorkspaceKeyDecryptionError(e.to_string()))?;
+        let raw_key = mkey
+            .decrypt(decoded_key.as_slice())
+            .map_err(|e| WorkspaceKeyDecryptionError(e.to_string()))?;
+        let wkey = WorkspaceKey::from_raw_key(raw_key.as_slice());
+
+        Ok(wkey)
+    }
+
+    fn get_master_key(&self) -> Result<MasterKey> {
+        // NOTE: This locks the key for the entire function which seems wrong, but this prevents
+        // concurrent access from prompting the user for a keychain password multiple times.
+        let mut master_secret = self.cached_master_key.lock().unwrap();
+        if let Some(k) = master_secret.as_ref() {
+            return Ok(k.to_owned());
+        }
+
+        let mkey = MasterKey::get_or_create(&self.app_id, KEY_USER)?;
+        *master_secret = Some(mkey.clone());
+        Ok(mkey)
+    }
+}
diff --git a/crates/yaak-crypto/src/master_key.rs b/crates/yaak-crypto/src/master_key.rs
new file mode 100644
index 0000000..887601d
--- /dev/null
+++ b/crates/yaak-crypto/src/master_key.rs
@@ -0,0 +1,78 @@
+use crate::encryption::{decrypt_data, encrypt_data};
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use base32::Alphabet;
+use chacha20poly1305::aead::{Generate, Key};
+use chacha20poly1305::XChaCha20Poly1305;
+use keyring::{Entry, Error};
+use log::info;
+
+const HUMAN_PREFIX: &str = "YKM_";
+
+#[derive(Debug, Clone)]
+pub(crate) struct MasterKey {
+    key: Key<XChaCha20Poly1305>,
+}
+
+impl MasterKey {
+    pub(crate) fn get_or_create(app_id: &str, user: &str) -> Result<Self> {
+        let id = format!("{app_id}.EncryptionKey");
+        let entry = Entry::new(&id, user)?;
+
+        let key = match entry.get_password() {
+            Ok(encoded) => {
+                let without_prefix = encoded.strip_prefix(HUMAN_PREFIX).unwrap_or(&encoded);
+                let key_bytes = base32::decode(Alphabet::Crockford {}, &without_prefix)
+                    .ok_or(GenericError("Failed to decode master key".to_string()))?;
+                Key::<XChaCha20Poly1305>::try_from(key_bytes.as_slice())
+                    .map_err(|_| GenericError("Master key is the wrong length".to_string()))?
+            }
+            Err(Error::NoEntry) => {
+                info!("Creating new master key");
+                let key = Key::<XChaCha20Poly1305>::generate();
+                let encoded = base32::encode(Alphabet::Crockford {}, key.as_slice());
+                let with_prefix = format!("{HUMAN_PREFIX}{encoded}");
+                entry.set_password(&with_prefix)?;
+                key
+            }
+            Err(e) => return Err(GenericError(e.to_string())),
+        };
+
+        Ok(Self { key })
+    }
+
+    pub(crate) fn encrypt(&self, data: &[u8]) -> Result<Vec<u8>> {
+        encrypt_data(data, &self.key)
+    }
+
+    pub(crate) fn decrypt(&self, data: &[u8]) -> Result<Vec<u8>> {
+        decrypt_data(data, &self.key)
+    }
+
+    #[cfg(test)]
+    pub(crate) fn test_key() -> Self {
+        let key = Key::<XChaCha20Poly1305>::from(*b"00000000000000000000000000000000");
+        Self { key }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::error::Result;
+    use crate::master_key::MasterKey;
+
+    #[test]
+    fn test_master_key() -> Result<()> {
+        // Test out the master key
+        let mkey = MasterKey::test_key();
+        let encrypted = mkey.encrypt("hello".as_bytes())?;
+        let decrypted = mkey.decrypt(encrypted.as_slice()).unwrap();
+        assert_eq!(decrypted, "hello".as_bytes().to_vec());
+
+        let mkey = MasterKey::test_key();
+        let decrypted = mkey.decrypt(encrypted.as_slice()).unwrap();
+        assert_eq!(decrypted, "hello".as_bytes().to_vec());
+
+        Ok(())
+    }
+}
diff --git a/crates/yaak-crypto/src/workspace_key.rs b/crates/yaak-crypto/src/workspace_key.rs
new file mode 100644
index 0000000..f045d19
--- /dev/null
+++ b/crates/yaak-crypto/src/workspace_key.rs
@@ -0,0 +1,116 @@
+use crate::encryption::{decrypt_data, encrypt_data};
+use crate::error::Error::InvalidHumanKey;
+use crate::error::Result;
+use base32::Alphabet;
+use chacha20poly1305::aead::{Generate, Key};
+use chacha20poly1305::{KeySizeUser, XChaCha20Poly1305};
+
+#[derive(Debug, Clone)]
+pub struct WorkspaceKey {
+    key: Key<XChaCha20Poly1305>,
+}
+
+const HUMAN_PREFIX: &str = "YK";
+
+impl WorkspaceKey {
+    pub(crate) fn to_human(&self) -> Result<String> {
+        let encoded = base32::encode(Alphabet::Crockford {}, self.key.as_slice());
+        let with_prefix = format!("{HUMAN_PREFIX}{encoded}");
+        let with_separators = with_prefix
+            .chars()
+            .collect::<Vec<_>>()
+            .chunks(6)
+            .map(|chunk| chunk.iter().collect::<String>())
+            .collect::<Vec<_>>()
+            .join("-");
+        Ok(with_separators)
+    }
+
+    #[allow(dead_code)]
+    pub(crate) fn from_human(human_key: &str) -> Result<Self> {
+        let without_prefix = human_key.strip_prefix(HUMAN_PREFIX).unwrap_or(human_key);
+        let without_separators = without_prefix.replace("-", "");
+        let key =
+            base32::decode(Alphabet::Crockford {}, &without_separators).ok_or(InvalidHumanKey)?;
+        if key.len() != XChaCha20Poly1305::key_size() {
+            return Err(InvalidHumanKey);
+        }
+        Ok(Self::from_raw_key(key.as_slice()))
+    }
+
+    pub(crate) fn from_raw_key(key: &[u8]) -> Self {
+        Self {
+            key: Key::<XChaCha20Poly1305>::try_from(key).expect("workspace key must be 32 bytes"),
+        }
+    }
+
+    pub(crate) fn raw_key(&self) -> &[u8] {
+        self.key.as_slice()
+    }
+
+    pub(crate) fn create() -> Result<Self> {
+        let key = Key::<XChaCha20Poly1305>::generate();
+        Ok(Self::from_raw_key(key.as_slice()))
+    }
+
+    pub(crate) fn encrypt(&self, data: &[u8]) -> Result<Vec<u8>> {
+        encrypt_data(data, &self.key)
+    }
+
+    pub(crate) fn decrypt(&self, data: &[u8]) -> Result<Vec<u8>> {
+        decrypt_data(data, &self.key)
+    }
+
+    #[cfg(test)]
+    pub(crate) fn test_key() -> Self {
+        Self::from_raw_key("f1a2d4b3c8e799af1456be3478a4c3f2".as_bytes())
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::error::Error::InvalidHumanKey;
+    use crate::error::Result;
+    use crate::workspace_key::WorkspaceKey;
+
+    #[test]
+    fn test_persisted_key() -> Result<()> {
+        let key = WorkspaceKey::test_key();
+        let encrypted = key.encrypt("hello".as_bytes())?;
+        assert_eq!(key.decrypt(encrypted.as_slice())?, "hello".as_bytes());
+
+        Ok(())
+    }
+
+    #[test]
+    fn test_human_format() -> Result<()> {
+        let key = WorkspaceKey::test_key();
+
+        let encrypted = key.encrypt("hello".as_bytes())?;
+        assert_eq!(key.decrypt(encrypted.as_slice())?, "hello".as_bytes());
+
+        let human = key.to_human()?;
+        assert_eq!(human, "YKCRRP-2CK46H-H36RSR-CMVKJE-B1CRRK-8D9PC9-JK6D1Q-71GK8R-SKCRS0");
+        assert_eq!(
+            WorkspaceKey::from_human(&human)?.decrypt(encrypted.as_slice())?,
+            "hello".as_bytes()
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn test_from_human_invalid() -> Result<()> {
+        assert!(matches!(
+            WorkspaceKey::from_human(
+                "YKCRRP-2CK46H-H36RSR-CMVKJE-B1CRRK-8D9PC9-JK6D1Q-71GK8R-SKCRS0-H3X38D",
+            ),
+            Err(InvalidHumanKey)
+        ));
+
+        assert!(matches!(WorkspaceKey::from_human("bad-key",), Err(InvalidHumanKey)));
+        assert!(matches!(WorkspaceKey::from_human("",), Err(InvalidHumanKey)));
+
+        Ok(())
+    }
+}
diff --git a/crates/yaak-git/Cargo.toml b/crates/yaak-git/Cargo.toml
new file mode 100644
index 0000000..dc6f238
--- /dev/null
+++ b/crates/yaak-git/Cargo.toml
@@ -0,0 +1,24 @@
+[package]
+name = "yaak-git"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+chrono = { workspace = true, features = ["serde"] }
+git2 = { version = "0.20.4", features = ["vendored-libgit2", "vendored-openssl"] }
+log = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+serde_yaml = "0.9.34"
+thiserror = { workspace = true }
+tokio = { workspace = true, features = ["io-util"] }
+ts-rs = { workspace = true, features = ["chrono-impl", "serde-json-impl"] }
+url = "2"
+yaak-common = { workspace = true }
+yaak-models = { workspace = true }
+yaak-sync = { workspace = true }
+
+[dev-dependencies]
+tempfile = "3"
+tokio = { workspace = true, features = ["macros", "rt"] }
diff --git a/crates/yaak-git/bindings/gen_git.ts b/crates/yaak-git/bindings/gen_git.ts
new file mode 100644
index 0000000..1df93b1
--- /dev/null
+++ b/crates/yaak-git/bindings/gen_git.ts
@@ -0,0 +1,35 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { SyncModel } from "./gen_models";
+
+export type BranchDeleteResult = { "type": "success", message: string, } | { "type": "not_fully_merged" };
+
+export type CloneResult = { "type": "success" } | { "type": "cancelled" } | { "type": "needs_credentials", url: string, error: string | null, };
+
+export type GitAuthor = { name: string | null, email: string | null, };
+
+export type GitBranchInfo = { path: string, headRef: string | null, headRefShorthand: string | null, origins: Array<string>, localBranches: Array<string>, remoteBranches: Array<string>, ahead: number, behind: number, };
+
+export type GitCommit = { oid: string, author: GitAuthor, when: string, message: string | null, };
+
+export type GitFileDiff = { original: string, modified: string, };
+
+export type GitRemote = { name: string, url: string | null, };
+
+export type GitStatus = "untracked" | "conflict" | "current" | "modified" | "removed" | "renamed" | "type_change";
+
+export type GitStatusEntry = { relaPath: string, status: GitStatus, staged: boolean, prev: SyncModel | null, next: SyncModel | null, };
+
+export type GitStatusSummary = { path: string, 
+/**
+ * The status directory relative to the repo root ("" when it IS the root).
+ * Useful for displaying entry paths relative to the sync directory
+ */
+relaDir: string, headRef: string | null, headRefShorthand: string | null, entries: Array<GitStatusEntry>, origins: Array<string>, localBranches: Array<string>, remoteBranches: Array<string>, ahead: number, behind: number, };
+
+export type GitWorktreeStatus = { entries: Array<GitWorktreeStatusEntry>, };
+
+export type GitWorktreeStatusEntry = { relaPath: string, modelId: string | null, status: GitStatus, staged: boolean, };
+
+export type PullResult = { "type": "success", message: string, } | { "type": "up_to_date" } | { "type": "needs_credentials", url: string, error: string | null, } | { "type": "diverged", remote: string, branch: string, } | { "type": "uncommitted_changes" };
+
+export type PushResult = { "type": "success", message: string, } | { "type": "up_to_date" } | { "type": "needs_credentials", url: string, error: string | null, };
diff --git a/crates/yaak-git/bindings/gen_models.ts b/crates/yaak-git/bindings/gen_models.ts
new file mode 100644
index 0000000..2474d8e
--- /dev/null
+++ b/crates/yaak-git/bindings/gen_models.ts
@@ -0,0 +1,179 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type DnsOverride = {
+  hostname: string;
+  ipv4: Array<string>;
+  ipv6: Array<string>;
+  enabled?: boolean;
+};
+
+export type Environment = {
+  model: "environment";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  name: string;
+  public: boolean;
+  parentModel: string;
+  parentId: string | null;
+  /**
+   * Variables defined in this environment scope.
+   * Child environments override parent variables by name.
+   */
+  variables: Array<EnvironmentVariable>;
+  color: string | null;
+  sortPriority: number;
+};
+
+export type EnvironmentVariable = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type Folder = {
+  model: "folder";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  sortPriority: number;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type GrpcRequest = {
+  model: "grpc_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authenticationType: string | null;
+  authentication: Record<string, any>;
+  description: string;
+  message: string;
+  metadata: Array<HttpRequestHeader>;
+  method: string | null;
+  name: string;
+  service: string | null;
+  sortPriority: number;
+  /**
+   * Server URL (http for plaintext or https for secure)
+   */
+  url: string;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type HttpRequest = {
+  model: "http_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  body: Record<string, any>;
+  bodyType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  method: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type HttpRequestHeader = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type HttpUrlParameter = {
+  enabled?: boolean;
+  /**
+   * Colon-prefixed parameters are treated as path parameters if they match, like `/users/:id`
+   * Other entries are appended as query parameters
+   */
+  name: string;
+  value: string;
+  id?: string;
+};
+
+export type HttpVersion = "auto" | "http1" | "http2";
+
+export type InheritedBoolSetting = { enabled?: boolean; value: boolean };
+
+export type InheritedHttpVersionSetting = { enabled?: boolean; value: HttpVersion };
+
+export type InheritedIntSetting = { enabled?: boolean; value: number };
+
+export type SyncModel =
+  | ({ type: "workspace" } & Workspace)
+  | ({ type: "environment" } & Environment)
+  | ({ type: "folder" } & Folder)
+  | ({ type: "http_request" } & HttpRequest)
+  | ({ type: "grpc_request" } & GrpcRequest)
+  | ({ type: "websocket_request" } & WebsocketRequest);
+
+export type WebsocketRequest = {
+  model: "websocket_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  message: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type Workspace = {
+  model: "workspace";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  encryptionKeyChallenge: string | null;
+  settingValidateCertificates: boolean;
+  settingFollowRedirects: boolean;
+  settingRequestTimeout: number;
+  settingRequestMessageSize: number;
+  settingDnsOverrides: Array<DnsOverride>;
+  settingSendCookies: boolean;
+  settingStoreCookies: boolean;
+  settingHttpVersion: HttpVersion;
+};
diff --git a/crates/yaak-git/index.ts b/crates/yaak-git/index.ts
new file mode 100644
index 0000000..1653342
--- /dev/null
+++ b/crates/yaak-git/index.ts
@@ -0,0 +1,424 @@
+import { useQuery } from "@tanstack/react-query";
+import { platform } from "@yaakapp-internal/platform";
+import { createFastMutation } from "@yaakapp/yaak-client/hooks/useFastMutation";
+import { queryClient } from "@yaakapp/yaak-client/lib/queryClient";
+import { useMemo } from "react";
+import {
+  BranchDeleteResult,
+  CloneResult,
+  GitBranchInfo,
+  GitCommit,
+  GitFileDiff,
+  GitRemote,
+  GitStatusSummary,
+  GitWorktreeStatus,
+  PullResult,
+  PushResult,
+} from "./bindings/gen_git";
+import { showToast } from "@yaakapp/yaak-client/lib/toast";
+
+export * from "./bindings/gen_git";
+export * from "./bindings/gen_models";
+
+export interface GitCredentials {
+  username: string;
+  password: string;
+}
+
+export type DivergedStrategy = "force_reset" | "merge" | "cancel";
+
+export type UncommittedChangesStrategy = "reset" | "cancel";
+
+interface GitWatchResult {
+  unlistenEvent: string;
+}
+
+export interface GitCallbacks {
+  addRemote: () => Promise<GitRemote | null>;
+  promptCredentials: (
+    result: Extract<PushResult, { type: "needs_credentials" }>,
+  ) => Promise<GitCredentials | null>;
+  promptDiverged: (result: Extract<PullResult, { type: "diverged" }>) => Promise<DivergedStrategy>;
+  promptUncommittedChanges: () => Promise<UncommittedChangesStrategy>;
+  forceSync: () => Promise<void>;
+}
+
+const onSuccess = () => queryClient.invalidateQueries({ queryKey: ["git"] });
+
+function gitWorktreeStatusQueryKey(dir?: string, refreshKey?: string) {
+  return refreshKey == null
+    ? (["git", "worktree_status", dir] as const)
+    : (["git", "worktree_status", dir, refreshKey] as const);
+}
+
+export function invalidateGitWorktreeStatus(dir?: string) {
+  return queryClient.invalidateQueries({ queryKey: gitWorktreeStatusQueryKey(dir) });
+}
+
+export function useGitWorktreeStatus(dir: string, refreshKey?: string) {
+  return useQuery<GitWorktreeStatus, string>({
+    queryKey: gitWorktreeStatusQueryKey(dir, refreshKey),
+    queryFn: () => platform.rpc("cmd_git_worktree_status", { dir }),
+    placeholderData: (prev) => prev,
+  });
+}
+
+export function watchGitWorktreeStatus(dir: string, callback: (status: GitWorktreeStatus) => void) {
+  const handle = platform.rpcStream<GitWatchResult, GitWorktreeStatus>(
+    "cmd_git_watch_worktree_status",
+    { dir },
+    callback,
+  );
+
+  void handle
+    .then(({ result }) => {
+      addGitWatchKey(result.unlistenEvent);
+    })
+    .catch(console.debug);
+
+  return () =>
+    handle
+      .then(async ({ result, unlisten }) => {
+        unlistenGitWatcher(result.unlistenEvent);
+        unlisten();
+      })
+      .catch(console.error);
+}
+
+function useGitFetchAll(dir: string, refreshKey?: string) {
+  return useQuery<void, string>({
+    queryKey: ["git", "fetch_all", dir, refreshKey],
+    queryFn: () => platform.rpc("cmd_git_fetch_all", { dir }),
+    refetchInterval: 10 * 60_000,
+  });
+}
+
+function useGitBranchInfoQuery(dir: string, refreshKey?: string, fetchAllUpdatedAt?: number) {
+  return useQuery<GitBranchInfo, string>({
+    refetchOnMount: true,
+    queryKey: ["git", "branch_info", dir, refreshKey, fetchAllUpdatedAt],
+    queryFn: () => platform.rpc("cmd_git_branch_info", { dir }),
+    placeholderData: (prev) => prev,
+  });
+}
+
+export function useGitBranchInfo(dir: string, refreshKey?: string) {
+  const fetchAll = useGitFetchAll(dir, refreshKey);
+  return useGitBranchInfoQuery(dir, refreshKey, fetchAll.dataUpdatedAt);
+}
+
+export function useGitLog(dir: string, refreshKey?: string, relaPath?: string) {
+  return useQuery<GitCommit[], string>({
+    queryKey: ["git", "log", dir, refreshKey, relaPath],
+    queryFn: () =>
+      relaPath == null
+        ? platform.rpc("cmd_git_log", { dir })
+        : platform.rpc("cmd_git_log_for_file", { dir, relaPath }),
+    placeholderData: (prev) => prev,
+  });
+}
+
+export function useGitFileDiffForCommit(
+  dir: string,
+  relaPath: string,
+  commitOid: string | null | undefined,
+) {
+  return useQuery<GitFileDiff, string>({
+    enabled: commitOid != null,
+    queryKey: ["git", "file_diff_for_commit", dir, relaPath, commitOid],
+    queryFn: () => {
+      if (commitOid == null) throw new Error("Missing commit oid");
+      return platform.rpc("cmd_git_file_diff_for_commit", { dir, relaPath, commitOid });
+    },
+  });
+}
+
+export function useGit(dir: string, callbacks: GitCallbacks, refreshKey?: string) {
+  const mutations = useGitMutations(dir, callbacks);
+  const fetchAll = useGitFetchAll(dir, refreshKey);
+
+  return [
+    {
+      remotes: useQuery<GitRemote[], string>({
+        queryKey: ["git", "remotes", dir, refreshKey],
+        queryFn: () => getRemotes(dir),
+        placeholderData: (prev) => prev,
+      }),
+      log: useGitLog(dir, refreshKey),
+      status: useQuery<GitStatusSummary, string>({
+        refetchOnMount: true,
+        queryKey: ["git", "status", dir, refreshKey, fetchAll.dataUpdatedAt],
+        queryFn: () => platform.rpc("cmd_git_status", { dir }),
+        placeholderData: (prev) => prev,
+      }),
+    },
+    mutations,
+  ] as const;
+}
+
+export function useGitMutations(dir: string, callbacks: GitCallbacks) {
+  return useMemo(() => gitMutations(dir, callbacks), [dir, callbacks]);
+}
+
+export const gitMutations = (dir: string, callbacks: GitCallbacks) => {
+  const push = async () => {
+    const remotes = await getRemotes(dir);
+    if (remotes.length === 0) {
+      const remote = await callbacks.addRemote();
+      if (remote == null) throw new Error("No remote found");
+    }
+
+    const result = await platform.rpc<PushResult>("cmd_git_push", { dir });
+    if (result.type !== "needs_credentials") return result;
+
+    // Needs credentials, prompt for them
+    const creds = await callbacks.promptCredentials(result);
+    if (creds == null) throw new Error("Canceled");
+
+    await platform.rpc("cmd_git_add_credential", {
+      remoteUrl: result.url,
+      username: creds.username,
+      password: creds.password,
+    });
+
+    // Push again
+    return platform.rpc<PushResult>("cmd_git_push", { dir });
+  };
+
+  const handleError = (err: unknown) => {
+    showToast({
+      id: String(err),
+      message: String(err),
+      color: "danger",
+      timeout: 5000,
+    });
+  };
+
+  return {
+    init: createFastMutation<void, string, void>({
+      mutationKey: ["git", "init"],
+      mutationFn: () => platform.rpc("cmd_git_initialize", { dir }),
+      onSuccess,
+    }),
+    add: createFastMutation<void, string, { relaPaths: string[] }>({
+      mutationKey: ["git", "add", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_add", { dir, ...args }),
+      onSuccess,
+    }),
+    addRemote: createFastMutation<GitRemote, string, GitRemote>({
+      mutationKey: ["git", "add-remote"],
+      mutationFn: (args) => platform.rpc("cmd_git_add_remote", { dir, ...args }),
+      onSuccess,
+    }),
+    rmRemote: createFastMutation<void, string, { name: string }>({
+      mutationKey: ["git", "rm-remote", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_rm_remote", { dir, ...args }),
+      onSuccess,
+    }),
+    createBranch: createFastMutation<void, string, { branch: string; base?: string }>({
+      mutationKey: ["git", "branch", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_branch", { dir, ...args }),
+      onSuccess,
+    }),
+    mergeBranch: createFastMutation<void, string, { branch: string }>({
+      mutationKey: ["git", "merge", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_merge_branch", { dir, ...args }),
+      onSuccess,
+    }),
+    deleteBranch: createFastMutation<
+      BranchDeleteResult,
+      string,
+      { branch: string; force?: boolean }
+    >({
+      mutationKey: ["git", "delete-branch", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_delete_branch", { dir, ...args }),
+      onSuccess,
+    }),
+    deleteRemoteBranch: createFastMutation<void, string, { branch: string }>({
+      mutationKey: ["git", "delete-remote-branch", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_delete_remote_branch", { dir, ...args }),
+      onSuccess,
+    }),
+    renameBranch: createFastMutation<void, string, { oldName: string; newName: string }>({
+      mutationKey: ["git", "rename-branch", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_rename_branch", { dir, ...args }),
+      onSuccess,
+    }),
+    checkout: createFastMutation<string, string, { branch: string; force: boolean }>({
+      mutationKey: ["git", "checkout", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_checkout", { dir, ...args }),
+      onSuccess,
+    }),
+    commit: createFastMutation<void, string, { message: string }>({
+      mutationKey: ["git", "commit", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_commit", { dir, ...args }),
+      onSuccess,
+    }),
+    commitAndPush: createFastMutation<PushResult, string, { message: string }>({
+      mutationKey: ["git", "commit_push", dir],
+      mutationFn: async (args) => {
+        await platform.rpc("cmd_git_commit", { dir, ...args });
+        return push();
+      },
+      onSuccess,
+    }),
+
+    push: createFastMutation<PushResult, string, void>({
+      mutationKey: ["git", "push", dir],
+      mutationFn: push,
+      onSuccess,
+    }),
+    pull: createFastMutation<PullResult, string, void>({
+      mutationKey: ["git", "pull", dir],
+      async mutationFn() {
+        const result = await platform.rpc<PullResult>("cmd_git_pull", { dir });
+
+        if (result.type === "needs_credentials") {
+          const creds = await callbacks.promptCredentials(result);
+          if (creds == null) throw new Error("Canceled");
+
+          await platform.rpc("cmd_git_add_credential", {
+            remoteUrl: result.url,
+            username: creds.username,
+            password: creds.password,
+          });
+
+          // Pull again after credentials
+          return platform.rpc<PullResult>("cmd_git_pull", { dir });
+        }
+
+        if (result.type === "uncommitted_changes") {
+          void callbacks
+            .promptUncommittedChanges()
+            .then(async (strategy) => {
+              if (strategy === "cancel") return;
+
+              await platform.rpc("cmd_git_reset_changes", { dir });
+              return platform.rpc<PullResult>("cmd_git_pull", { dir });
+            })
+            .then(async () => {
+              await onSuccess();
+              await callbacks.forceSync();
+            }, handleError);
+        }
+
+        if (result.type === "diverged") {
+          void callbacks
+            .promptDiverged(result)
+            .then((strategy) => {
+              if (strategy === "cancel") return;
+
+              if (strategy === "force_reset") {
+                return platform.rpc<PullResult>("cmd_git_pull_force_reset", {
+                  dir,
+                  remote: result.remote,
+                  branch: result.branch,
+                });
+              }
+
+              return platform.rpc<PullResult>("cmd_git_pull_merge", {
+                dir,
+                remote: result.remote,
+                branch: result.branch,
+              });
+            })
+            .then(async () => {
+              await onSuccess();
+              await callbacks.forceSync();
+            }, handleError);
+        }
+
+        return result;
+      },
+      onSuccess,
+    }),
+    unstage: createFastMutation<void, string, { relaPaths: string[] }>({
+      mutationKey: ["git", "unstage", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_unstage", { dir, ...args }),
+      onSuccess,
+    }),
+    resetChanges: createFastMutation<void, string, void>({
+      mutationKey: ["git", "reset-changes", dir],
+      mutationFn: () => platform.rpc("cmd_git_reset_changes", { dir }),
+      onSuccess,
+    }),
+    restore: createFastMutation<void, string, { relaPaths: string[] }>({
+      mutationKey: ["git", "restore", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_restore_files", { dir, ...args }),
+      onSuccess,
+    }),
+    restoreFileFromCommit: createFastMutation<
+      void,
+      string,
+      { commitOid: string; relaPath: string }
+    >({
+      mutationKey: ["git", "restore-file-from-commit", dir],
+      mutationFn: (args) => platform.rpc("cmd_git_restore_file_from_commit", { dir, ...args }),
+      onSuccess,
+    }),
+  } as const;
+};
+
+async function getRemotes(dir: string) {
+  return platform.rpc<GitRemote[]>("cmd_git_remotes", { dir });
+}
+
+function unlistenGitWatcher(unlistenEvent: string) {
+  void platform.emit(unlistenEvent).then(() => {
+    removeGitWatchKey(unlistenEvent);
+  });
+}
+
+function getGitWatchKeys() {
+  return sessionStorage.getItem("git-worktree-watchers")?.split(",").filter(Boolean) ?? [];
+}
+
+function setGitWatchKeys(keys: string[]) {
+  sessionStorage.setItem("git-worktree-watchers", keys.join(","));
+}
+
+function addGitWatchKey(key: string) {
+  const keys = getGitWatchKeys();
+  setGitWatchKeys([...keys, key]);
+}
+
+function removeGitWatchKey(key: string) {
+  const keys = getGitWatchKeys();
+  setGitWatchKeys(keys.filter((k) => k !== key));
+}
+
+const gitWatchKeys = getGitWatchKeys();
+if (gitWatchKeys.length > 0) {
+  gitWatchKeys.forEach(unlistenGitWatcher);
+}
+
+/**
+ * Clone a git repository, prompting for credentials if needed.
+ */
+export async function gitClone(
+  url: string,
+  dir: string,
+  promptCredentials: (args: {
+    url: string;
+    error: string | null;
+  }) => Promise<GitCredentials | null>,
+): Promise<CloneResult> {
+  const result = await platform.rpc<CloneResult>("cmd_git_clone", { url, dir });
+  if (result.type !== "needs_credentials") return result;
+
+  // Prompt for credentials
+  const creds = await promptCredentials({
+    url: result.url,
+    error: result.error,
+  });
+  if (creds == null) return { type: "cancelled" };
+
+  // Store credentials and retry
+  await platform.rpc("cmd_git_add_credential", {
+    remoteUrl: result.url,
+    username: creds.username,
+    password: creds.password,
+  });
+
+  return platform.rpc<CloneResult>("cmd_git_clone", { url, dir });
+}
diff --git a/crates/yaak-git/package.json b/crates/yaak-git/package.json
new file mode 100644
index 0000000..671fe49
--- /dev/null
+++ b/crates/yaak-git/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/git",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates/yaak-git/src/add.rs b/crates/yaak-git/src/add.rs
new file mode 100644
index 0000000..ea50134
--- /dev/null
+++ b/crates/yaak-git/src/add.rs
@@ -0,0 +1,16 @@
+use crate::error::Result;
+use crate::repository::open_repo;
+use git2::IndexAddOption;
+use log::info;
+use std::path::Path;
+
+pub fn git_add(dir: &Path, rela_path: &Path) -> Result<()> {
+    let repo = open_repo(dir)?;
+    let mut index = repo.index()?;
+
+    info!("Staging file {rela_path:?} to {dir:?}");
+    index.add_all(&[rela_path], IndexAddOption::DEFAULT, None)?;
+    index.write()?;
+
+    Ok(())
+}
diff --git a/crates/yaak-git/src/binary.rs b/crates/yaak-git/src/binary.rs
new file mode 100644
index 0000000..3fb7923
--- /dev/null
+++ b/crates/yaak-git/src/binary.rs
@@ -0,0 +1,17 @@
+use crate::error::Error::GitNotFound;
+use crate::error::Result;
+use std::path::Path;
+use tokio::process::Command;
+use yaak_common::command::new_checked_command;
+
+/// Create a git command that runs in the specified directory
+pub(crate) async fn new_binary_command(dir: &Path) -> Result<Command> {
+    let mut cmd = new_binary_command_global().await?;
+    cmd.arg("-C").arg(dir);
+    Ok(cmd)
+}
+
+/// Create a git command without a specific directory (for global operations)
+pub(crate) async fn new_binary_command_global() -> Result<Command> {
+    new_checked_command("git", "--version").await.map_err(|_| GitNotFound)
+}
diff --git a/crates/yaak-git/src/branch.rs b/crates/yaak-git/src/branch.rs
new file mode 100644
index 0000000..a365951
--- /dev/null
+++ b/crates/yaak-git/src/branch.rs
@@ -0,0 +1,153 @@
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+
+use crate::binary::new_binary_command;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use std::path::Path;
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_git.ts")]
+pub enum BranchDeleteResult {
+    Success { message: String },
+    NotFullyMerged,
+}
+
+pub async fn git_checkout_branch(dir: &Path, branch_name: &str, force: bool) -> Result<String> {
+    let branch_name = branch_name.trim_start_matches("origin/");
+
+    let mut args = vec!["checkout"];
+    if force {
+        args.push("--force");
+    }
+    args.push(branch_name);
+
+    let out = new_binary_command(dir)
+        .await?
+        .args(&args)
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git checkout: {e}")))?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = format!("{}{}", stdout, stderr);
+
+    if !out.status.success() {
+        return Err(GenericError(format!("Failed to checkout: {}", combined.trim())));
+    }
+
+    Ok(branch_name.to_string())
+}
+
+pub async fn git_create_branch(dir: &Path, name: &str, base: Option<&str>) -> Result<()> {
+    let mut cmd = new_binary_command(dir).await?;
+    cmd.arg("branch").arg(name);
+    if let Some(base_branch) = base {
+        cmd.arg(base_branch);
+    }
+
+    let out =
+        cmd.output().await.map_err(|e| GenericError(format!("failed to run git branch: {e}")))?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = format!("{}{}", stdout, stderr);
+
+    if !out.status.success() {
+        return Err(GenericError(format!("Failed to create branch: {}", combined.trim())));
+    }
+
+    Ok(())
+}
+
+pub async fn git_delete_branch(dir: &Path, name: &str, force: bool) -> Result<BranchDeleteResult> {
+    let mut cmd = new_binary_command(dir).await?;
+
+    let out =
+        if force { cmd.args(["branch", "-D", name]) } else { cmd.args(["branch", "-d", name]) }
+            .output()
+            .await
+            .map_err(|e| GenericError(format!("failed to run git branch -d: {e}")))?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = format!("{}{}", stdout, stderr);
+
+    if !out.status.success() && stderr.to_lowercase().contains("not fully merged") {
+        return Ok(BranchDeleteResult::NotFullyMerged);
+    }
+
+    if !out.status.success() {
+        return Err(GenericError(format!("Failed to delete branch: {}", combined.trim())));
+    }
+
+    Ok(BranchDeleteResult::Success { message: combined })
+}
+
+pub async fn git_merge_branch(dir: &Path, name: &str) -> Result<()> {
+    let out = new_binary_command(dir)
+        .await?
+        .args(["merge", name])
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git merge: {e}")))?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = format!("{}{}", stdout, stderr);
+
+    if !out.status.success() {
+        // Check for merge conflicts
+        if combined.to_lowercase().contains("conflict") {
+            return Err(GenericError(
+                "Merge conflicts detected. Please resolve them manually.".to_string(),
+            ));
+        }
+        return Err(GenericError(format!("Failed to merge: {}", combined.trim())));
+    }
+
+    Ok(())
+}
+
+pub async fn git_delete_remote_branch(dir: &Path, name: &str) -> Result<()> {
+    // Remote branch names come in as "origin/branch-name", extract the branch name
+    let branch_name = name.trim_start_matches("origin/");
+
+    let out = new_binary_command(dir)
+        .await?
+        .args(["push", "origin", "--delete", branch_name])
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git push --delete: {e}")))?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = format!("{}{}", stdout, stderr);
+
+    if !out.status.success() {
+        return Err(GenericError(format!("Failed to delete remote branch: {}", combined.trim())));
+    }
+
+    Ok(())
+}
+
+pub async fn git_rename_branch(dir: &Path, old_name: &str, new_name: &str) -> Result<()> {
+    let out = new_binary_command(dir)
+        .await?
+        .args(["branch", "-m", old_name, new_name])
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git branch -m: {e}")))?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = format!("{}{}", stdout, stderr);
+
+    if !out.status.success() {
+        return Err(GenericError(format!("Failed to rename branch: {}", combined.trim())));
+    }
+
+    Ok(())
+}
diff --git a/crates/yaak-git/src/clone.rs b/crates/yaak-git/src/clone.rs
new file mode 100644
index 0000000..c3d8331
--- /dev/null
+++ b/crates/yaak-git/src/clone.rs
@@ -0,0 +1,53 @@
+use crate::binary::new_binary_command;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use log::info;
+use serde::{Deserialize, Serialize};
+use std::fs;
+use std::path::Path;
+use ts_rs::TS;
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_git.ts")]
+pub enum CloneResult {
+    Success,
+    Cancelled,
+    NeedsCredentials { url: String, error: Option<String> },
+}
+
+pub async fn git_clone(url: &str, dir: &Path) -> Result<CloneResult> {
+    let parent = dir.parent().ok_or_else(|| GenericError("Invalid clone directory".to_string()))?;
+    fs::create_dir_all(parent)
+        .map_err(|e| GenericError(format!("Failed to create directory: {e}")))?;
+    let mut cmd = new_binary_command(parent).await?;
+    cmd.args(["clone", url]).arg(dir).env("GIT_TERMINAL_PROMPT", "0");
+
+    let out =
+        cmd.output().await.map_err(|e| GenericError(format!("failed to run git clone: {e}")))?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = format!("{}{}", stdout, stderr);
+    let combined_lower = combined.to_lowercase();
+
+    info!("Cloned status={}: {combined}", out.status);
+
+    if !out.status.success() {
+        // Check for credentials error
+        if combined_lower.contains("could not read") {
+            return Ok(CloneResult::NeedsCredentials { url: url.to_string(), error: None });
+        }
+        if combined_lower.contains("unable to access")
+            || combined_lower.contains("authentication failed")
+        {
+            return Ok(CloneResult::NeedsCredentials {
+                url: url.to_string(),
+                error: Some(combined.to_string()),
+            });
+        }
+        return Err(GenericError(format!("Failed to clone: {}", combined.trim())));
+    }
+
+    Ok(CloneResult::Success)
+}
diff --git a/crates/yaak-git/src/commit.rs b/crates/yaak-git/src/commit.rs
new file mode 100644
index 0000000..10a83c8
--- /dev/null
+++ b/crates/yaak-git/src/commit.rs
@@ -0,0 +1,106 @@
+use crate::binary::new_binary_command;
+use crate::error::Error::GenericError;
+use crate::repository::open_repo;
+use crate::status::repo_relative_dir;
+use log::info;
+use std::path::Path;
+
+/// Commit the staged changes within `dir` (their current worktree content,
+/// matching what the commit dialog displays). Scoping the commit to the sync
+/// directory means files staged outside of it (e.g. elsewhere in a containing
+/// monorepo) are never swept into a Yaak commit — they stay staged for the
+/// user's own next commit.
+pub async fn git_commit(dir: &Path, message: &str) -> crate::error::Result<()> {
+    // Run git from the repo root: command-line pathspecs resolve relative to
+    // the working directory, and staged paths are repo-root-relative
+    let (workdir, rela_dir) = {
+        let repo = open_repo(dir)?;
+        let workdir = repo
+            .workdir()
+            .ok_or_else(|| GenericError("Repository has no worktree".to_string()))?
+            .to_path_buf();
+        (workdir, repo_relative_dir(&repo, dir))
+    };
+
+    let staged = staged_files(&workdir, rela_dir.as_deref()).await?;
+    if staged.is_empty() {
+        return Err(GenericError("No staged changes to commit".to_string()));
+    }
+
+    let mut cmd = new_binary_command(&workdir).await?;
+    // --literal-pathspecs: the staged paths are exact files, never patterns
+    cmd.arg("--literal-pathspecs");
+    cmd.args(["commit", "--message", message, "--"]);
+    cmd.args(staged);
+
+    let out = cmd.output().await?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = stdout + stderr;
+
+    if !out.status.success() {
+        return Err(GenericError(format!("Failed to commit: {}", combined)));
+    }
+
+    info!("Committed to {dir:?}");
+
+    Ok(())
+}
+
+/// Repo-relative paths of staged changes, limited to `rela_dir` when given.
+/// Must be run from the repo root so the pathspec resolves correctly. Uses
+/// -z for NUL separation so paths with special characters come through
+/// unquoted, --no-renames so staged renames list both sides, and
+/// --literal-pathspecs so a scope dir with glob characters isn't a pattern
+async fn staged_files(workdir: &Path, rela_dir: Option<&str>) -> crate::error::Result<Vec<String>> {
+    let mut cmd = new_binary_command(workdir).await?;
+    cmd.arg("--literal-pathspecs");
+    cmd.args(["diff", "--cached", "--name-only", "--no-renames", "-z"]);
+    if let Some(rela_dir) = rela_dir {
+        cmd.args(["--", rela_dir]);
+    }
+    let out = cmd.output().await?;
+
+    if !out.status.success() {
+        let stderr = String::from_utf8_lossy(&out.stderr);
+        return Err(GenericError(format!("Failed to list staged files: {}", stderr)));
+    }
+
+    Ok(String::from_utf8_lossy(&out.stdout)
+        .split('\0')
+        .filter(|p| !p.is_empty())
+        .map(String::from)
+        .collect())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[tokio::test]
+    async fn test_staged_files_scoped() {
+        let tmp = tempfile::tempdir().unwrap();
+        let repo = git2::Repository::init(tmp.path()).unwrap();
+
+        // Scope dir name doubles as a glob pattern; sync1 is its glob decoy
+        let sync_dir = tmp.path().join("sync[1]");
+        std::fs::create_dir(&sync_dir).unwrap();
+        std::fs::write(sync_dir.join("yaak.req_1.yaml"), "inside").unwrap();
+        std::fs::create_dir(tmp.path().join("sync1")).unwrap();
+        std::fs::write(tmp.path().join("sync1").join("decoy.txt"), "decoy").unwrap();
+        std::fs::write(tmp.path().join("outside.txt"), "outside").unwrap();
+
+        let mut index = repo.index().unwrap();
+        index.add_path(Path::new("sync[1]/yaak.req_1.yaml")).unwrap();
+        index.add_path(Path::new("sync1/decoy.txt")).unwrap();
+        index.add_path(Path::new("outside.txt")).unwrap();
+        index.write().unwrap();
+
+        let scoped = staged_files(tmp.path(), Some("sync[1]")).await.unwrap();
+        assert_eq!(scoped, vec!["sync[1]/yaak.req_1.yaml"]);
+
+        let all = staged_files(tmp.path(), None).await.unwrap();
+        assert_eq!(all.len(), 3);
+    }
+}
diff --git a/crates/yaak-git/src/credential.rs b/crates/yaak-git/src/credential.rs
new file mode 100644
index 0000000..41c7442
--- /dev/null
+++ b/crates/yaak-git/src/credential.rs
@@ -0,0 +1,44 @@
+use crate::binary::new_binary_command_global;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use std::process::Stdio;
+use tokio::io::AsyncWriteExt;
+use url::Url;
+
+pub async fn git_add_credential(remote_url: &str, username: &str, password: &str) -> Result<()> {
+    let url = Url::parse(remote_url)
+        .map_err(|e| GenericError(format!("Failed to parse remote url {remote_url}: {e:?}")))?;
+    let protocol = url.scheme();
+    let host = url.host_str().unwrap();
+    let path = Some(url.path());
+
+    let mut child = new_binary_command_global()
+        .await?
+        .args(["credential", "approve"])
+        .stdin(Stdio::piped())
+        .stdout(Stdio::null())
+        .spawn()?;
+
+    {
+        let stdin = child.stdin.as_mut().unwrap();
+        stdin.write_all(format!("protocol={}\n", protocol).as_bytes()).await?;
+        stdin.write_all(format!("host={}\n", host).as_bytes()).await?;
+        if let Some(path) = path {
+            if !path.is_empty() {
+                stdin
+                    .write_all(format!("path={}\n", path.trim_start_matches('/')).as_bytes())
+                    .await?;
+            }
+        }
+        stdin.write_all(format!("username={}\n", username).as_bytes()).await?;
+        stdin.write_all(format!("password={}\n", password).as_bytes()).await?;
+        stdin.write_all(b"\n").await?; // blank line terminator
+    }
+
+    let status = child.wait().await?;
+    if !status.success() {
+        return Err(GenericError("Failed to approve git credential".to_string()));
+    }
+
+    Ok(())
+}
diff --git a/crates/yaak-git/src/error.rs b/crates/yaak-git/src/error.rs
new file mode 100644
index 0000000..2200966
--- /dev/null
+++ b/crates/yaak-git/src/error.rs
@@ -0,0 +1,64 @@
+use serde::{Serialize, Serializer};
+use std::io;
+use std::path::PathBuf;
+use std::string::FromUtf8Error;
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error("Git repo not found {0}")]
+    GitRepoNotFound(PathBuf),
+
+    #[error("Git error: {0}")]
+    GitUnknown(#[from] git2::Error),
+
+    #[error("Yaml error: {0}")]
+    YamlParseError(#[from] serde_yaml::Error),
+
+    #[error(transparent)]
+    ModelError(#[from] yaak_models::error::Error),
+
+    #[error("Sync error: {0}")]
+    SyncError(#[from] yaak_sync::error::Error),
+
+    #[error("I/o error: {0}")]
+    IoError(#[from] io::Error),
+
+    #[error("JSON error: {0}")]
+    JsonParseError(#[from] serde_json::Error),
+
+    #[error("UTF8 error: {0}")]
+    Utf8ConversionError(#[from] FromUtf8Error),
+
+    #[error("Git error: {0}")]
+    GenericError(String),
+
+    #[error("'git' not found. Please ensure it's installed and available in $PATH")]
+    GitNotFound,
+
+    #[error("Credentials required: {0}")]
+    CredentialsRequiredError(String),
+
+    #[error("No default remote found")]
+    NoDefaultRemoteFound,
+
+    #[error("No remotes found for repo")]
+    NoRemotesFound,
+
+    #[error("Merge failed due to conflicts")]
+    MergeConflicts,
+
+    #[error("No active branch")]
+    NoActiveBranch,
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-git/src/fetch.rs b/crates/yaak-git/src/fetch.rs
new file mode 100644
index 0000000..027773f
--- /dev/null
+++ b/crates/yaak-git/src/fetch.rs
@@ -0,0 +1,22 @@
+use crate::binary::new_binary_command;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use std::path::Path;
+
+pub async fn git_fetch_all(dir: &Path) -> Result<()> {
+    let out = new_binary_command(dir)
+        .await?
+        .args(["fetch", "--all", "--prune", "--tags"])
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git pull: {e}")))?;
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = stdout + stderr;
+
+    if !out.status.success() {
+        return Err(GenericError(format!("Failed to fetch: {}", combined)));
+    }
+
+    Ok(())
+}
diff --git a/crates/yaak-git/src/init.rs b/crates/yaak-git/src/init.rs
new file mode 100644
index 0000000..553b89b
--- /dev/null
+++ b/crates/yaak-git/src/init.rs
@@ -0,0 +1,14 @@
+use crate::error::Result;
+use crate::repository::open_repo;
+use log::info;
+use std::path::Path;
+
+pub fn git_init(dir: &Path) -> Result<()> {
+    git2::Repository::init(dir)?;
+    let repo = open_repo(dir)?;
+    // Default to main instead of master, to align with
+    // the official Git and GitHub behavior
+    repo.set_head("refs/heads/main")?;
+    info!("Initialized {dir:?}");
+    Ok(())
+}
diff --git a/crates/yaak-git/src/lib.rs b/crates/yaak-git/src/lib.rs
new file mode 100644
index 0000000..9500fa6
--- /dev/null
+++ b/crates/yaak-git/src/lib.rs
@@ -0,0 +1,44 @@
+mod add;
+mod binary;
+mod branch;
+mod clone;
+mod commit;
+mod credential;
+pub mod error;
+mod fetch;
+mod init;
+mod log;
+
+mod pull;
+mod push;
+mod remotes;
+mod repository;
+mod reset;
+mod restore;
+mod status;
+mod unstage;
+mod util;
+
+// Re-export all git functions for external use
+pub use add::git_add;
+pub use branch::{
+    BranchDeleteResult, git_checkout_branch, git_create_branch, git_delete_branch,
+    git_delete_remote_branch, git_merge_branch, git_rename_branch,
+};
+pub use clone::{CloneResult, git_clone};
+pub use commit::git_commit;
+pub use credential::git_add_credential;
+pub use fetch::git_fetch_all;
+pub use init::git_init;
+pub use log::{GitCommit, GitFileDiff, git_file_diff_for_commit, git_log, git_log_for_file};
+pub use pull::{PullResult, git_pull, git_pull_force_reset, git_pull_merge};
+pub use push::{PushResult, git_push};
+pub use remotes::{GitRemote, git_add_remote, git_remotes, git_rm_remote};
+pub use repository::{GitRepositoryPaths, git_path_is_ignored, git_repository_paths};
+pub use reset::git_reset_changes;
+pub use restore::{git_restore, git_restore_file_from_commit};
+pub use status::{
+    GitBranchInfo, GitStatusSummary, GitWorktreeStatus, git_branch_info, git_status,
+    git_worktree_status,
+};
+pub use unstage::git_unstage;
diff --git a/crates/yaak-git/src/log.rs b/crates/yaak-git/src/log.rs
new file mode 100644
index 0000000..8b31f80
--- /dev/null
+++ b/crates/yaak-git/src/log.rs
@@ -0,0 +1,145 @@
+use crate::repository::open_repo;
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+use std::path::Path;
+use ts_rs::TS;
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_git.ts")]
+pub struct GitCommit {
+    pub oid: String,
+    pub author: GitAuthor,
+    pub when: DateTime<Utc>,
+    pub message: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_git.ts")]
+pub struct GitAuthor {
+    pub name: Option<String>,
+    pub email: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_git.ts")]
+pub struct GitFileDiff {
+    pub original: String,
+    pub modified: String,
+}
+
+pub fn git_log(dir: &Path) -> crate::error::Result<Vec<GitCommit>> {
+    git_log_inner(dir, None)
+}
+
+pub fn git_log_for_file(dir: &Path, rela_path: &Path) -> crate::error::Result<Vec<GitCommit>> {
+    git_log_inner(dir, Some(rela_path))
+}
+
+fn git_log_inner(dir: &Path, rela_path: Option<&Path>) -> crate::error::Result<Vec<GitCommit>> {
+    let repo = open_repo(dir)?;
+
+    // Return empty if empty repo or no head (new repo)
+    if repo.is_empty()? || repo.head().is_err() {
+        return Ok(vec![]);
+    }
+
+    let mut revwalk = repo.revwalk()?;
+    revwalk.push_head()?;
+    revwalk.set_sorting(git2::Sort::TIME)?;
+
+    // Run git log
+    macro_rules! filter_try {
+        ($e:expr) => {
+            match $e {
+                Ok(t) => t,
+                Err(_) => return None,
+            }
+        };
+    }
+    let log: Vec<GitCommit> = revwalk
+        .filter_map(|oid| {
+            let oid = filter_try!(oid);
+            let commit = filter_try!(repo.find_commit(oid));
+            if let Some(rela_path) = rela_path {
+                let touches_path = filter_try!(commit_touches_path(&repo, &commit, rela_path));
+                if !touches_path {
+                    return None;
+                }
+            }
+
+            let author = commit.author();
+            Some(GitCommit {
+                oid: oid.to_string(),
+                author: GitAuthor {
+                    name: author.name().map(|s| s.to_string()),
+                    email: author.email().map(|s| s.to_string()),
+                },
+                when: convert_git_time_to_date(author.when()),
+                message: commit.message().map(|m| m.to_string()),
+            })
+        })
+        .collect();
+
+    Ok(log)
+}
+
+pub fn git_file_diff_for_commit(
+    dir: &Path,
+    commit_oid: &str,
+    rela_path: &Path,
+) -> crate::error::Result<GitFileDiff> {
+    let repo = open_repo(dir)?;
+    let oid = git2::Oid::from_str(commit_oid)?;
+    let commit = repo.find_commit(oid)?;
+    let new_tree = commit.tree()?;
+    let old_tree = if commit.parent_count() > 0 { Some(commit.parent(0)?.tree()?) } else { None };
+
+    Ok(GitFileDiff {
+        original: blob_text_at_path(&repo, old_tree.as_ref(), rela_path)?,
+        modified: blob_text_at_path(&repo, Some(&new_tree), rela_path)?,
+    })
+}
+
+fn commit_touches_path(
+    repo: &git2::Repository,
+    commit: &git2::Commit,
+    rela_path: &Path,
+) -> crate::error::Result<bool> {
+    let new_tree = commit.tree()?;
+    let old_tree = if commit.parent_count() > 0 { Some(commit.parent(0)?.tree()?) } else { None };
+
+    let mut opts = git2::DiffOptions::new();
+    opts.pathspec(rela_path);
+
+    let diff = repo.diff_tree_to_tree(old_tree.as_ref(), Some(&new_tree), Some(&mut opts))?;
+    Ok(diff.deltas().len() > 0)
+}
+
+fn blob_text_at_path(
+    repo: &git2::Repository,
+    tree: Option<&git2::Tree>,
+    rela_path: &Path,
+) -> crate::error::Result<String> {
+    let Some(tree) = tree else {
+        return Ok(String::new());
+    };
+    let Ok(entry) = tree.get_path(rela_path) else {
+        return Ok(String::new());
+    };
+    let blob = entry.to_object(repo)?.peel_to_blob()?;
+    Ok(String::from_utf8(blob.content().to_vec())?)
+}
+
+#[cfg(test)]
+fn convert_git_time_to_date(_git_time: git2::Time) -> DateTime<Utc> {
+    DateTime::from_timestamp(0, 0).unwrap()
+}
+
+#[cfg(not(test))]
+fn convert_git_time_to_date(git_time: git2::Time) -> DateTime<Utc> {
+    let timestamp = git_time.seconds();
+    DateTime::from_timestamp(timestamp, 0).unwrap()
+}
diff --git a/crates/yaak-git/src/pull.rs b/crates/yaak-git/src/pull.rs
new file mode 100644
index 0000000..db61a2f
--- /dev/null
+++ b/crates/yaak-git/src/pull.rs
@@ -0,0 +1,208 @@
+use crate::binary::new_binary_command;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use crate::repository::open_repo;
+use crate::util::{get_current_branch_name, get_default_remote_in_repo};
+use log::info;
+use serde::{Deserialize, Serialize};
+use std::path::Path;
+use ts_rs::TS;
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_git.ts")]
+pub enum PullResult {
+    Success { message: String },
+    UpToDate,
+    NeedsCredentials { url: String, error: Option<String> },
+    Diverged { remote: String, branch: String },
+    UncommittedChanges,
+}
+
+fn has_uncommitted_changes(dir: &Path) -> Result<bool> {
+    let repo = open_repo(dir)?;
+    // Scoped to the sync directory: uncommitted changes elsewhere in a
+    // containing monorepo shouldn't block pulling. Git itself still refuses
+    // a merge that would clobber uncommitted files outside the sync dir
+    let mut opts = crate::status::scoped_status_options(&repo, dir);
+    opts.include_untracked(false);
+    let statuses = repo.statuses(Some(&mut opts))?;
+    Ok(statuses.iter().any(|e| e.status() != git2::Status::CURRENT))
+}
+
+pub async fn git_pull(dir: &Path) -> Result<PullResult> {
+    if has_uncommitted_changes(dir)? {
+        return Ok(PullResult::UncommittedChanges);
+    }
+
+    // Extract all git2 data before any await points (git2 types are not Send)
+    let (branch_name, remote_name, remote_url) = {
+        let repo = open_repo(dir)?;
+        let branch_name = get_current_branch_name(&repo)?;
+        let remote = get_default_remote_in_repo(&repo)?;
+        let remote_name =
+            remote.name().ok_or(GenericError("Failed to get remote name".to_string()))?.to_string();
+        let remote_url =
+            remote.url().ok_or(GenericError("Failed to get remote url".to_string()))?.to_string();
+        (branch_name, remote_name, remote_url)
+    };
+
+    // Step 1: fetch the specific branch
+    // NOTE: We use fetch + merge instead of `git pull` to avoid conflicts with
+    // global git config (e.g. pull.ff=only) and the background fetch --all.
+    let fetch_out = new_binary_command(dir)
+        .await?
+        .args(["fetch", &remote_name, &branch_name])
+        .env("GIT_TERMINAL_PROMPT", "0")
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git fetch: {e}")))?;
+
+    let fetch_stdout = String::from_utf8_lossy(&fetch_out.stdout);
+    let fetch_stderr = String::from_utf8_lossy(&fetch_out.stderr);
+    let fetch_combined = format!("{fetch_stdout}{fetch_stderr}");
+
+    info!("Fetched status={} {fetch_combined}", fetch_out.status);
+
+    if fetch_combined.to_lowercase().contains("could not read") {
+        return Ok(PullResult::NeedsCredentials { url: remote_url.to_string(), error: None });
+    }
+
+    if fetch_combined.to_lowercase().contains("unable to access") {
+        return Ok(PullResult::NeedsCredentials {
+            url: remote_url.to_string(),
+            error: Some(fetch_combined.to_string()),
+        });
+    }
+
+    if !fetch_out.status.success() {
+        return Err(GenericError(format!("Failed to fetch: {fetch_combined}")));
+    }
+
+    // Step 2: merge the fetched branch
+    let ref_name = format!("{}/{}", remote_name, branch_name);
+    let merge_out = new_binary_command(dir)
+        .await?
+        .args(["merge", "--ff-only", &ref_name])
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git merge: {e}")))?;
+
+    let merge_stdout = String::from_utf8_lossy(&merge_out.stdout);
+    let merge_stderr = String::from_utf8_lossy(&merge_out.stderr);
+    let merge_combined = format!("{merge_stdout}{merge_stderr}");
+
+    info!("Merged status={} {merge_combined}", merge_out.status);
+
+    if !merge_out.status.success() {
+        let merge_lower = merge_combined.to_lowercase();
+        if merge_lower.contains("cannot fast-forward")
+            || merge_lower.contains("not possible to fast-forward")
+            || merge_lower.contains("diverged")
+        {
+            return Ok(PullResult::Diverged { remote: remote_name, branch: branch_name });
+        }
+        return Err(GenericError(format!("Failed to merge: {merge_combined}")));
+    }
+
+    if merge_combined.to_lowercase().contains("up to date") {
+        return Ok(PullResult::UpToDate);
+    }
+
+    Ok(PullResult::Success { message: format!("Pulled from {}/{}", remote_name, branch_name) })
+}
+
+pub async fn git_pull_force_reset(dir: &Path, remote: &str, branch: &str) -> Result<PullResult> {
+    // Step 1: fetch the remote
+    let fetch_out = new_binary_command(dir)
+        .await?
+        .args(["fetch", remote])
+        .env("GIT_TERMINAL_PROMPT", "0")
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git fetch: {e}")))?;
+
+    if !fetch_out.status.success() {
+        let stderr = String::from_utf8_lossy(&fetch_out.stderr);
+        return Err(GenericError(format!("Failed to fetch: {stderr}")));
+    }
+
+    // Step 2: reset --hard to remote/branch
+    let ref_name = format!("{}/{}", remote, branch);
+    let reset_out = new_binary_command(dir)
+        .await?
+        .args(["reset", "--hard", &ref_name])
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git reset: {e}")))?;
+
+    if !reset_out.status.success() {
+        let stderr = String::from_utf8_lossy(&reset_out.stderr);
+        return Err(GenericError(format!("Failed to reset: {}", stderr.trim())));
+    }
+
+    Ok(PullResult::Success { message: format!("Reset to {}/{}", remote, branch) })
+}
+
+pub async fn git_pull_merge(dir: &Path, remote: &str, branch: &str) -> Result<PullResult> {
+    let out = new_binary_command(dir)
+        .await?
+        .args(["pull", "--no-rebase", remote, branch])
+        .env("GIT_TERMINAL_PROMPT", "0")
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git pull --no-rebase: {e}")))?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = format!("{}{}", stdout, stderr);
+
+    info!("Pull merge status={} {combined}", out.status);
+
+    if !out.status.success() {
+        if combined.to_lowercase().contains("conflict") {
+            return Err(GenericError(
+                "Merge conflicts detected. Please resolve them manually.".to_string(),
+            ));
+        }
+        return Err(GenericError(format!("Failed to merge pull: {}", combined.trim())));
+    }
+
+    Ok(PullResult::Success { message: format!("Merged from {}/{}", remote, branch) })
+}
+
+// pub(crate) fn git_pull_old(dir: &Path) -> Result<PullResult> {
+//     let repo = open_repo(dir)?;
+//
+//     let branch = get_current_branch(&repo)?.ok_or(NoActiveBranch)?;
+//     let branch_ref = branch.get();
+//     let branch_ref = bytes_to_string(branch_ref.name_bytes())?;
+//
+//     let remote_name = repo.branch_upstream_remote(&branch_ref)?;
+//     let remote_name = bytes_to_string(&remote_name)?;
+//     debug!("Pulling from {remote_name}");
+//
+//     let mut remote = repo.find_remote(&remote_name)?;
+//
+//     let mut options = FetchOptions::new();
+//     let callbacks = default_callbacks();
+//     options.remote_callbacks(callbacks);
+//
+//     let mut proxy = ProxyOptions::new();
+//     proxy.auto();
+//     options.proxy_options(proxy);
+//
+//     remote.fetch(&[&branch_ref], Some(&mut options), None)?;
+//
+//     let stats = remote.stats();
+//
+//     let fetch_head = repo.find_reference("FETCH_HEAD")?;
+//     let fetch_commit = repo.reference_to_annotated_commit(&fetch_head)?;
+//     do_merge(&repo, &branch, &fetch_commit)?;
+//
+//     Ok(PullResult::Success {
+//         message: "Hello".to_string(),
+//         // received_bytes: stats.received_bytes(),
+//         // received_objects: stats.received_objects(),
+//     })
+// }
diff --git a/crates/yaak-git/src/push.rs b/crates/yaak-git/src/push.rs
new file mode 100644
index 0000000..d368a9f
--- /dev/null
+++ b/crates/yaak-git/src/push.rs
@@ -0,0 +1,89 @@
+use crate::binary::new_binary_command;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use crate::repository::open_repo;
+use crate::util::{get_current_branch_name, get_default_remote_for_push_in_repo};
+use log::info;
+use serde::{Deserialize, Serialize};
+use std::path::Path;
+use ts_rs::TS;
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_git.ts")]
+pub enum PushResult {
+    Success { message: String },
+    UpToDate,
+    NeedsCredentials { url: String, error: Option<String> },
+}
+
+pub async fn git_push(dir: &Path) -> Result<PushResult> {
+    // Extract all git2 data before any await points (git2 types are not Send)
+    let (branch_name, remote_name, remote_url) = {
+        let repo = open_repo(dir)?;
+        let branch_name = get_current_branch_name(&repo)?;
+        let remote = get_default_remote_for_push_in_repo(&repo)?;
+        let remote_name =
+            remote.name().ok_or(GenericError("Failed to get remote name".to_string()))?.to_string();
+        let remote_url =
+            remote.url().ok_or(GenericError("Failed to get remote url".to_string()))?.to_string();
+        (branch_name, remote_name, remote_url)
+    };
+
+    let out = new_binary_command(dir)
+        .await?
+        .args(["push", &remote_name, &branch_name])
+        .env("GIT_TERMINAL_PROMPT", "0")
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git push: {e}")))?;
+
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    let combined = stdout + stderr;
+    let combined_lower = combined.to_lowercase();
+
+    info!("Pushed to repo status={} {combined}", out.status);
+
+    // Helper to check if this is a credentials error
+    let is_credentials_error = || {
+        combined_lower.contains("could not read")
+            || combined_lower.contains("unable to access")
+            || combined_lower.contains("authentication failed")
+    };
+
+    // Check for explicit rejection indicators first (e.g., protected branch rejections)
+    // These can occur even if some git servers don't properly set exit codes
+    if combined_lower.contains("rejected") || combined_lower.contains("failed to push") {
+        if is_credentials_error() {
+            return Ok(PushResult::NeedsCredentials {
+                url: remote_url.to_string(),
+                error: Some(combined.to_string()),
+            });
+        }
+        return Err(GenericError(format!("Failed to push: {combined}")));
+    }
+
+    // Check exit status for any other failures
+    if !out.status.success() {
+        if combined_lower.contains("could not read") {
+            return Ok(PushResult::NeedsCredentials { url: remote_url.to_string(), error: None });
+        }
+        if combined_lower.contains("unable to access")
+            || combined_lower.contains("authentication failed")
+        {
+            return Ok(PushResult::NeedsCredentials {
+                url: remote_url.to_string(),
+                error: Some(combined.to_string()),
+            });
+        }
+        return Err(GenericError(format!("Failed to push: {combined}")));
+    }
+
+    // Success cases (exit code 0 and no rejection indicators)
+    if combined_lower.contains("up-to-date") {
+        return Ok(PushResult::UpToDate);
+    }
+
+    Ok(PushResult::Success { message: format!("Pushed to {}/{}", remote_name, branch_name) })
+}
diff --git a/crates/yaak-git/src/remotes.rs b/crates/yaak-git/src/remotes.rs
new file mode 100644
index 0000000..7b508e3
--- /dev/null
+++ b/crates/yaak-git/src/remotes.rs
@@ -0,0 +1,47 @@
+use crate::error::Result;
+use crate::repository::open_repo;
+use log::warn;
+use serde::{Deserialize, Serialize};
+use std::path::Path;
+use ts_rs::TS;
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[ts(export, export_to = "gen_git.ts")]
+pub struct GitRemote {
+    name: String,
+    url: Option<String>,
+}
+
+pub fn git_remotes(dir: &Path) -> Result<Vec<GitRemote>> {
+    let repo = open_repo(dir)?;
+    let mut remotes = Vec::new();
+
+    for remote in repo.remotes()?.into_iter() {
+        let name = match remote {
+            None => continue,
+            Some(name) => name,
+        };
+        let r = match repo.find_remote(name) {
+            Ok(r) => r,
+            Err(e) => {
+                warn!("Failed to get remote {name}: {e:?}");
+                continue;
+            }
+        };
+        remotes.push(GitRemote { name: name.to_string(), url: r.url().map(|u| u.to_string()) });
+    }
+
+    Ok(remotes)
+}
+
+pub fn git_add_remote(dir: &Path, name: &str, url: &str) -> Result<GitRemote> {
+    let repo = open_repo(dir)?;
+    repo.remote(name, url)?;
+    Ok(GitRemote { name: name.to_string(), url: Some(url.to_string()) })
+}
+
+pub fn git_rm_remote(dir: &Path, name: &str) -> Result<()> {
+    let repo = open_repo(dir)?;
+    repo.remote_delete(name)?;
+    Ok(())
+}
diff --git a/crates/yaak-git/src/repository.rs b/crates/yaak-git/src/repository.rs
new file mode 100644
index 0000000..a229d70
--- /dev/null
+++ b/crates/yaak-git/src/repository.rs
@@ -0,0 +1,38 @@
+use crate::error::Error::{GitRepoNotFound, GitUnknown};
+use crate::error::{Error, Result};
+use std::path::{Path, PathBuf};
+
+#[derive(Debug, Clone)]
+pub struct GitRepositoryPaths {
+    pub workdir: PathBuf,
+    pub gitdir: PathBuf,
+    pub commondir: PathBuf,
+}
+
+pub(crate) fn open_repo(dir: &Path) -> crate::error::Result<git2::Repository> {
+    match git2::Repository::discover(dir) {
+        Ok(r) => Ok(r),
+        Err(e) if e.code() == git2::ErrorCode::NotFound => Err(GitRepoNotFound(dir.to_path_buf())),
+        Err(e) => Err(GitUnknown(e)),
+    }
+}
+
+pub fn git_repository_paths(dir: &Path) -> Result<GitRepositoryPaths> {
+    let repo = open_repo(dir)?;
+    let workdir = repo
+        .workdir()
+        .ok_or_else(|| Error::GenericError("Git repository does not have a worktree".into()))?
+        .to_path_buf();
+    Ok(GitRepositoryPaths {
+        workdir,
+        gitdir: repo.path().to_path_buf(),
+        // Same as gitdir except for linked worktrees, where shared refs and
+        // packed-refs live in the main repository's git directory
+        commondir: repo.commondir().to_path_buf(),
+    })
+}
+
+pub fn git_path_is_ignored(dir: &Path, rela_path: &Path) -> Result<bool> {
+    let repo = open_repo(dir)?;
+    Ok(repo.status_should_ignore(rela_path)?)
+}
diff --git a/crates/yaak-git/src/reset.rs b/crates/yaak-git/src/reset.rs
new file mode 100644
index 0000000..5e61ce3
--- /dev/null
+++ b/crates/yaak-git/src/reset.rs
@@ -0,0 +1,20 @@
+use crate::binary::new_binary_command;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use std::path::Path;
+
+pub async fn git_reset_changes(dir: &Path) -> Result<()> {
+    let out = new_binary_command(dir)
+        .await?
+        .args(["reset", "--hard", "HEAD"])
+        .output()
+        .await
+        .map_err(|e| GenericError(format!("failed to run git reset: {e}")))?;
+
+    if !out.status.success() {
+        let stderr = String::from_utf8_lossy(&out.stderr);
+        return Err(GenericError(format!("Failed to reset: {}", stderr.trim())));
+    }
+
+    Ok(())
+}
diff --git a/crates/yaak-git/src/restore.rs b/crates/yaak-git/src/restore.rs
new file mode 100644
index 0000000..3d7484f
--- /dev/null
+++ b/crates/yaak-git/src/restore.rs
@@ -0,0 +1,76 @@
+use crate::error::Result;
+use crate::repository::open_repo;
+use log::info;
+use std::fs;
+use std::path::{Component, Path};
+
+pub fn git_restore(dir: &Path, rela_path: &Path) -> Result<()> {
+    let repo = open_repo(dir)?;
+    validate_relative_path(rela_path)?;
+
+    let status = repo.status_file(rela_path).ok();
+    let is_untracked = status
+        .is_some_and(|s| s.contains(git2::Status::WT_NEW) || s.contains(git2::Status::INDEX_NEW));
+
+    info!("Restoring file {rela_path:?} in {dir:?}");
+    if is_untracked {
+        let mut index = repo.index()?;
+        let _ = index.remove_path(rela_path);
+        index.write()?;
+
+        let path = repo.workdir().unwrap_or(dir).join(rela_path);
+        if path.is_dir() {
+            fs::remove_dir_all(path)?;
+        } else if path.exists() {
+            fs::remove_file(path)?;
+        }
+        return Ok(());
+    }
+
+    let head = repo.head()?;
+    let commit = head.peel_to_commit()?;
+    repo.reset_default(Some(commit.as_object()), &[rela_path])?;
+
+    let mut checkout = git2::build::CheckoutBuilder::new();
+    checkout.force().path(rela_path);
+    repo.checkout_head(Some(&mut checkout))?;
+
+    Ok(())
+}
+
+pub fn git_restore_file_from_commit(dir: &Path, commit_oid: &str, rela_path: &Path) -> Result<()> {
+    let repo = open_repo(dir)?;
+    validate_relative_path(rela_path)?;
+
+    let oid = git2::Oid::from_str(commit_oid)?;
+    let commit = repo.find_commit(oid)?;
+    let tree = commit.tree()?;
+    let path = repo.workdir().unwrap_or(dir).join(rela_path);
+
+    info!("Restoring file {rela_path:?} from commit {commit_oid} in {dir:?}");
+    if tree.get_path(rela_path).is_err() {
+        if path.is_dir() {
+            fs::remove_dir_all(path)?;
+        } else if path.exists() {
+            fs::remove_file(path)?;
+        }
+        return Ok(());
+    }
+
+    let mut checkout = git2::build::CheckoutBuilder::new();
+    checkout.force().path(rela_path);
+    repo.checkout_tree(commit.as_object(), Some(&mut checkout))?;
+
+    Ok(())
+}
+
+fn validate_relative_path(path: &Path) -> Result<()> {
+    let is_safe = !path.as_os_str().is_empty()
+        && !path.is_absolute()
+        && path.components().all(|c| matches!(c, Component::Normal(_)));
+    if is_safe {
+        Ok(())
+    } else {
+        Err(crate::error::Error::GenericError(format!("Invalid restore path {}", path.display())))
+    }
+}
diff --git a/crates/yaak-git/src/status.rs b/crates/yaak-git/src/status.rs
new file mode 100644
index 0000000..6c4152d
--- /dev/null
+++ b/crates/yaak-git/src/status.rs
@@ -0,0 +1,375 @@
+use crate::repository::open_repo;
+use crate::util::{local_branch_names, remote_branch_names};
+use log::warn;
+use serde::{Deserialize, Serialize};
+use std::fs;
+use std::path::Path;
+use ts_rs::TS;
+use yaak_sync::models::SyncModel;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_git.ts")]
+pub struct GitStatusSummary {
+    pub path: String,
+    /// The status directory relative to the repo root ("" when it IS the root).
+    /// Useful for displaying entry paths relative to the sync directory
+    pub rela_dir: String,
+    pub head_ref: Option<String>,
+    pub head_ref_shorthand: Option<String>,
+    pub entries: Vec<GitStatusEntry>,
+    pub origins: Vec<String>,
+    pub local_branches: Vec<String>,
+    pub remote_branches: Vec<String>,
+    pub ahead: u32,
+    pub behind: u32,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_git.ts")]
+pub struct GitBranchInfo {
+    pub path: String,
+    pub head_ref: Option<String>,
+    pub head_ref_shorthand: Option<String>,
+    pub origins: Vec<String>,
+    pub local_branches: Vec<String>,
+    pub remote_branches: Vec<String>,
+    pub ahead: u32,
+    pub behind: u32,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_git.ts")]
+pub struct GitStatusEntry {
+    pub rela_path: String,
+    pub status: GitStatus,
+    pub staged: bool,
+    pub prev: Option<SyncModel>,
+    pub next: Option<SyncModel>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_git.ts")]
+pub struct GitWorktreeStatus {
+    pub entries: Vec<GitWorktreeStatusEntry>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_git.ts")]
+pub struct GitWorktreeStatusEntry {
+    pub rela_path: String,
+    pub model_id: Option<String>,
+    pub status: GitStatus,
+    pub staged: bool,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_git.ts")]
+pub enum GitStatus {
+    Untracked,
+    Conflict,
+    Current,
+    Modified,
+    Removed,
+    Renamed,
+    TypeChange,
+}
+
+pub fn git_worktree_status(dir: &Path) -> crate::error::Result<GitWorktreeStatus> {
+    let repo = open_repo(dir)?;
+    let mut opts = scoped_status_options(&repo, dir);
+    opts.include_unmodified(false);
+
+    let mut entries = Vec::new();
+    for entry in repo.statuses(Some(&mut opts))?.into_iter() {
+        let Some(rela_path) = entry.path() else {
+            continue;
+        };
+        let Some((status, staged)) = git_status_from_raw(entry.status()) else {
+            continue;
+        };
+
+        entries.push(GitWorktreeStatusEntry {
+            rela_path: rela_path.to_string(),
+            model_id: model_id_from_rela_path(Path::new(rela_path)),
+            status,
+            staged,
+        });
+    }
+
+    Ok(GitWorktreeStatus { entries })
+}
+
+pub fn git_branch_info(dir: &Path) -> crate::error::Result<GitBranchInfo> {
+    let repo = open_repo(dir)?;
+    git_branch_info_for_repo(&repo, dir)
+}
+
+pub fn git_status(dir: &Path) -> crate::error::Result<GitStatusSummary> {
+    let repo = open_repo(dir)?;
+    let branch_info = git_branch_info_for_repo(&repo, dir)?;
+    let head_tree = repo.head().ok().and_then(|head| head.peel_to_tree().ok());
+
+    let mut opts = scoped_status_options(&repo, dir);
+    opts.include_unmodified(true); // Include unchanged
+
+    // TODO: Support renames
+
+    let mut entries: Vec<GitStatusEntry> = Vec::new();
+    for entry in repo.statuses(Some(&mut opts))?.into_iter() {
+        let rela_path = entry.path().unwrap().to_string();
+        let Some((status, staged)) = git_status_from_raw(entry.status()) else {
+            continue;
+        };
+
+        // Get previous content from Git, if it's in there
+        let prev = match head_tree.clone() {
+            None => None,
+            Some(t) => match t.get_path(&Path::new(&rela_path)) {
+                Ok(entry) => {
+                    let obj = entry.to_object(&repo)?;
+                    let content = obj.as_blob().unwrap().content();
+                    let name = Path::new(entry.name().unwrap_or_default());
+                    SyncModel::from_bytes(content.into(), name)?.map(|m| m.0)
+                }
+                Err(_) => None,
+            },
+        };
+
+        let next = {
+            let full_path = repo.workdir().unwrap().join(rela_path.clone());
+            SyncModel::from_file(full_path.as_path())?.map(|m| m.0)
+        };
+
+        entries.push(GitStatusEntry {
+            status,
+            staged,
+            rela_path,
+            prev: prev.clone(),
+            next: next.clone(),
+        })
+    }
+
+    Ok(GitStatusSummary {
+        entries,
+        rela_dir: repo_relative_dir(&repo, dir).unwrap_or_default(),
+        path: branch_info.path,
+        head_ref: branch_info.head_ref,
+        head_ref_shorthand: branch_info.head_ref_shorthand,
+        origins: branch_info.origins,
+        local_branches: branch_info.local_branches,
+        remote_branches: branch_info.remote_branches,
+        ahead: branch_info.ahead,
+        behind: branch_info.behind,
+    })
+}
+
+fn git_branch_info_for_repo(
+    repo: &git2::Repository,
+    dir: &Path,
+) -> crate::error::Result<GitBranchInfo> {
+    let (head_ref, head_ref_shorthand) = git_head_refs(repo);
+    let origins = repo.remotes()?.into_iter().filter_map(|o| Some(o?.to_string())).collect();
+    let local_branches = local_branch_names(repo)?;
+    let remote_branches = remote_branch_names(repo)?;
+
+    // Compute ahead/behind relative to remote tracking branch
+    let (ahead, behind) = (|| -> Option<(usize, usize)> {
+        let head = repo.head().ok()?;
+        let local_oid = head.target()?;
+        let branch_name = head.shorthand()?;
+        let upstream_ref =
+            repo.find_branch(&format!("origin/{branch_name}"), git2::BranchType::Remote).ok()?;
+        let upstream_oid = upstream_ref.get().target()?;
+        repo.graph_ahead_behind(local_oid, upstream_oid).ok()
+    })()
+    .unwrap_or((0, 0));
+
+    Ok(GitBranchInfo {
+        path: dir.to_string_lossy().to_string(),
+        head_ref,
+        head_ref_shorthand,
+        origins,
+        local_branches,
+        remote_branches,
+        ahead: ahead as u32,
+        behind: behind as u32,
+    })
+}
+
+fn git_head_refs(repo: &git2::Repository) -> (Option<String>, Option<String>) {
+    match repo.head() {
+        Ok(head) => {
+            let head_ref = head.name().map(|s| s.to_string());
+            let head_ref_shorthand = head.shorthand().map(|s| s.to_string());
+            (head_ref, head_ref_shorthand)
+        }
+        Err(_) => {
+            // For "unborn" repos, reading from HEAD is the only way to get the branch name
+            // See https://github.com/starship/starship/pull/1336
+            let head_path = repo.path().join("HEAD");
+            let head_ref = fs::read_to_string(&head_path)
+                .ok()
+                .unwrap_or_default()
+                .lines()
+                .next()
+                .map(|s| s.trim_start_matches("ref:").trim().to_string());
+            let head_ref_shorthand =
+                head_ref.clone().map(|r| r.split('/').last().unwrap_or("unknown").to_string());
+            (head_ref, head_ref_shorthand)
+        }
+    }
+}
+
+fn git_status_from_raw(status: git2::Status) -> Option<(GitStatus, bool)> {
+    let index_status = match status {
+        // Note: order matters here, since we're checking a bitmap!
+        s if s.contains(git2::Status::CONFLICTED) => GitStatus::Conflict,
+        s if s.contains(git2::Status::INDEX_NEW) => GitStatus::Untracked,
+        s if s.contains(git2::Status::INDEX_MODIFIED) => GitStatus::Modified,
+        s if s.contains(git2::Status::INDEX_DELETED) => GitStatus::Removed,
+        s if s.contains(git2::Status::INDEX_RENAMED) => GitStatus::Renamed,
+        s if s.contains(git2::Status::INDEX_TYPECHANGE) => GitStatus::TypeChange,
+        s if s.contains(git2::Status::CURRENT) => GitStatus::Current,
+        s => {
+            warn!("Unknown index status {s:?}");
+            return None;
+        }
+    };
+
+    let worktree_status = match status {
+        // Note: order matters here, since we're checking a bitmap!
+        s if s.contains(git2::Status::CONFLICTED) => GitStatus::Conflict,
+        s if s.contains(git2::Status::WT_NEW) => GitStatus::Untracked,
+        s if s.contains(git2::Status::WT_MODIFIED) => GitStatus::Modified,
+        s if s.contains(git2::Status::WT_DELETED) => GitStatus::Removed,
+        s if s.contains(git2::Status::WT_RENAMED) => GitStatus::Renamed,
+        s if s.contains(git2::Status::WT_TYPECHANGE) => GitStatus::TypeChange,
+        s if s.contains(git2::Status::CURRENT) => GitStatus::Current,
+        s => {
+            warn!("Unknown worktree status {s:?}");
+            return None;
+        }
+    };
+
+    let status =
+        if index_status == GitStatus::Current { worktree_status } else { index_status.clone() };
+    let staged = index_status != GitStatus::Current;
+
+    Some((status, staged))
+}
+
+/// Construct StatusOptions for a walk scoped to `dir`. Yaak only cares about
+/// the sync directory, and a full walk is expensive when the containing repo
+/// is large (e.g. a sync dir inside a monorepo); scoping is a no-op when
+/// `dir` is the repo root. Always build status walks through this so a new
+/// call site can't forget the scoping.
+pub(crate) fn scoped_status_options(repo: &git2::Repository, dir: &Path) -> git2::StatusOptions {
+    let mut opts = git2::StatusOptions::new();
+    opts.include_ignored(false).include_untracked(true).recurse_untracked_dirs(true);
+    if let Some(rela) = repo_relative_dir(repo, dir) {
+        opts.pathspec(rela);
+        // Match the path literally (exact or directory prefix) instead of as
+        // a glob — directory names can contain pattern characters like [ or *
+        opts.disable_pathspec_match(true);
+    }
+    opts
+}
+
+/// The path of `dir` relative to the repo root as a forward-slash string
+/// (Git pathspecs use forward slashes even on Windows), or None when `dir`
+/// is the root itself (or outside the repo). Both sides are canonicalized so
+/// symlinked paths compare consistently.
+pub(crate) fn repo_relative_dir(repo: &git2::Repository, dir: &Path) -> Option<String> {
+    let workdir = repo.workdir()?;
+    let workdir = workdir.canonicalize().unwrap_or_else(|_| workdir.to_path_buf());
+    let canonical_dir = dir.canonicalize().unwrap_or_else(|_| dir.to_path_buf());
+    let rela = canonical_dir.strip_prefix(&workdir).ok()?;
+    if rela.as_os_str().is_empty() {
+        return None;
+    }
+    let parts: Vec<String> =
+        rela.components().map(|c| c.as_os_str().to_string_lossy().into_owned()).collect();
+    Some(parts.join("/"))
+}
+
+fn model_id_from_rela_path(path: &Path) -> Option<String> {
+    let ext = path.extension()?.to_str()?;
+    if ext != "yaml" && ext != "yml" && ext != "json" {
+        return None;
+    }
+
+    path.file_stem()?.to_str()?.strip_prefix("yaak.").map(String::from)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_worktree_status_scoped_to_subdir() {
+        let tmp = tempfile::tempdir().unwrap();
+        git2::Repository::init(tmp.path()).unwrap();
+
+        let sync_dir = tmp.path().join("sync");
+        std::fs::create_dir(&sync_dir).unwrap();
+        std::fs::write(sync_dir.join("yaak.req_1.yaml"), "inside").unwrap();
+        std::fs::write(tmp.path().join("outside.txt"), "outside").unwrap();
+
+        // Status on a subdirectory only reports that subdirectory
+        let status = git_worktree_status(&sync_dir).unwrap();
+        let paths: Vec<&str> = status.entries.iter().map(|e| e.rela_path.as_str()).collect();
+        assert_eq!(paths, vec!["sync/yaak.req_1.yaml"]);
+        assert_eq!(status.entries[0].model_id.as_deref(), Some("req_1"));
+
+        // Status on the repo root reports everything
+        let status = git_worktree_status(tmp.path()).unwrap();
+        assert_eq!(status.entries.len(), 2);
+    }
+
+    #[test]
+    fn test_worktree_status_scoped_literal_dir_name() {
+        let tmp = tempfile::tempdir().unwrap();
+        git2::Repository::init(tmp.path()).unwrap();
+
+        // A directory name that is also a valid glob pattern ([1] matches "1")
+        let sync_dir = tmp.path().join("sync[1]");
+        std::fs::create_dir(&sync_dir).unwrap();
+        std::fs::write(sync_dir.join("yaak.req_1.yaml"), "inside").unwrap();
+        std::fs::create_dir(tmp.path().join("sync1")).unwrap();
+        std::fs::write(tmp.path().join("sync1").join("decoy.txt"), "glob match").unwrap();
+
+        let status = git_worktree_status(&sync_dir).unwrap();
+        let paths: Vec<&str> = status.entries.iter().map(|e| e.rela_path.as_str()).collect();
+        assert_eq!(paths, vec!["sync[1]/yaak.req_1.yaml"]);
+    }
+
+    #[test]
+    fn test_status_scoped_to_subdir() {
+        let tmp = tempfile::tempdir().unwrap();
+        git2::Repository::init(tmp.path()).unwrap();
+
+        let sync_dir = tmp.path().join("sync");
+        std::fs::create_dir(&sync_dir).unwrap();
+        std::fs::write(sync_dir.join("yaak.req_1.yaml"), "inside").unwrap();
+        std::fs::write(sync_dir.join("README.md"), "external, but in sync dir").unwrap();
+        std::fs::write(tmp.path().join("outside.txt"), "outside").unwrap();
+
+        // The commit dialog's status only reports the sync directory
+        let status = git_status(&sync_dir).unwrap();
+        assert_eq!(status.rela_dir, "sync");
+        let mut paths: Vec<&str> = status.entries.iter().map(|e| e.rela_path.as_str()).collect();
+        paths.sort();
+        assert_eq!(paths, vec!["sync/README.md", "sync/yaak.req_1.yaml"]);
+
+        // Status on the repo root reports everything
+        let status = git_status(tmp.path()).unwrap();
+        assert_eq!(status.rela_dir, "");
+        assert_eq!(status.entries.len(), 3);
+    }
+}
diff --git a/crates/yaak-git/src/unstage.rs b/crates/yaak-git/src/unstage.rs
new file mode 100644
index 0000000..19d6127
--- /dev/null
+++ b/crates/yaak-git/src/unstage.rs
@@ -0,0 +1,27 @@
+use crate::repository::open_repo;
+use log::info;
+use std::path::Path;
+
+pub fn git_unstage(dir: &Path, rela_path: &Path) -> crate::error::Result<()> {
+    let repo = open_repo(dir)?;
+
+    let head = match repo.head() {
+        Ok(h) => h,
+        Err(e) if e.code() == git2::ErrorCode::UnbornBranch => {
+            info!("Unstaging file in empty branch {rela_path:?} to {dir:?}");
+            // Repo has no commits, so "unstage" means remove from index
+            let mut index = repo.index()?;
+            index.remove_path(rela_path)?;
+            index.write()?;
+            return Ok(());
+        }
+        Err(e) => return Err(e.into()),
+    };
+
+    // If repo has commits, update the index entry back to HEAD
+    info!("Unstaging file {rela_path:?} to {dir:?}");
+    let commit = head.peel_to_commit()?;
+    repo.reset_default(Some(commit.as_object()), &[rela_path])?;
+
+    Ok(())
+}
diff --git a/crates/yaak-git/src/util.rs b/crates/yaak-git/src/util.rs
new file mode 100644
index 0000000..6aa5c06
--- /dev/null
+++ b/crates/yaak-git/src/util.rs
@@ -0,0 +1,121 @@
+use crate::error::Error::{GenericError, NoDefaultRemoteFound};
+use crate::error::Result;
+use git2::{Branch, BranchType, Remote, Repository};
+
+const DEFAULT_REMOTE_NAME: &str = "origin";
+
+pub(crate) fn get_current_branch(repo: &Repository) -> Result<Option<Branch<'_>>> {
+    for b in repo.branches(None)? {
+        let branch = b?.0;
+        if branch.is_head() {
+            return Ok(Some(branch));
+        }
+    }
+    Ok(None)
+}
+
+pub(crate) fn get_current_branch_name(repo: &Repository) -> Result<String> {
+    Ok(get_current_branch(&repo)?
+        .ok_or(GenericError("Failed to get current branch".to_string()))?
+        .name()?
+        .ok_or(GenericError("Failed to get current branch name".to_string()))?
+        .to_string())
+}
+
+pub(crate) fn local_branch_names(repo: &Repository) -> Result<Vec<String>> {
+    let mut branches = Vec::new();
+    for branch in repo.branches(Some(BranchType::Local))? {
+        let (branch, _) = branch?;
+        let name = branch.name_bytes()?;
+        let name = bytes_to_string(name)?;
+        branches.push(name);
+    }
+    Ok(branches)
+}
+
+pub(crate) fn remote_branch_names(repo: &Repository) -> Result<Vec<String>> {
+    let mut branches = Vec::new();
+    for branch in repo.branches(Some(BranchType::Remote))? {
+        let (branch, _) = branch?;
+        let name = branch.name_bytes()?;
+        let name = bytes_to_string(name)?;
+        if name.ends_with("/HEAD") {
+            continue;
+        }
+        branches.push(name);
+    }
+    Ok(branches)
+}
+
+pub(crate) fn bytes_to_string(bytes: &[u8]) -> Result<String> {
+    Ok(String::from_utf8(bytes.to_vec())?)
+}
+
+pub(crate) fn get_default_remote_for_push_in_repo(repo: &'_ Repository) -> Result<Remote<'_>> {
+    let name = get_default_remote_name_for_push_in_repo(repo)?;
+    let remote = repo.find_remote(&name)?;
+    Ok(remote)
+}
+
+pub(crate) fn get_default_remote_name_for_push_in_repo(repo: &Repository) -> Result<String> {
+    let config = repo.config()?;
+
+    let branch = get_current_branch(repo)?;
+
+    if let Some(branch) = branch {
+        let remote_name = bytes_to_string(branch.name_bytes()?)?;
+
+        let entry_name = format!("branch.{}.pushRemote", &remote_name);
+
+        if let Ok(entry) = config.get_entry(&entry_name) {
+            return bytes_to_string(entry.value_bytes());
+        }
+
+        if let Ok(entry) = config.get_entry("remote.pushDefault") {
+            return bytes_to_string(entry.value_bytes());
+        }
+
+        let entry_name = format!("branch.{}.remote", &remote_name);
+
+        if let Ok(entry) = config.get_entry(&entry_name) {
+            return bytes_to_string(entry.value_bytes());
+        }
+    }
+
+    get_default_remote_name_in_repo(repo)
+}
+
+pub(crate) fn get_default_remote_in_repo(repo: &'_ Repository) -> Result<Remote<'_>> {
+    let name = get_default_remote_name_in_repo(repo)?;
+    let remote = repo.find_remote(&name)?;
+    Ok(remote)
+}
+
+pub(crate) fn get_default_remote_name_in_repo(repo: &Repository) -> Result<String> {
+    let remotes = repo.remotes()?;
+
+    if remotes.is_empty() {
+        return Err(NoDefaultRemoteFound);
+    }
+
+    // if `origin` exists return that
+    let found_origin = remotes.iter().any(|r| r.is_some_and(|r| r == DEFAULT_REMOTE_NAME));
+    if found_origin {
+        return Ok(DEFAULT_REMOTE_NAME.into());
+    }
+
+    // if only one remote exists, pick that
+    if remotes.len() == 1 {
+        let first_remote = remotes
+            .iter()
+            .next()
+            .flatten()
+            .map(String::from)
+            .ok_or_else(|| GenericError("no remote found".into()))?;
+
+        return Ok(first_remote);
+    }
+
+    // inconclusive
+    Err(NoDefaultRemoteFound)
+}
diff --git a/crates/yaak-grpc/Cargo.toml b/crates/yaak-grpc/Cargo.toml
new file mode 100644
index 0000000..ba0e2a9
--- /dev/null
+++ b/crates/yaak-grpc/Cargo.toml
@@ -0,0 +1,28 @@
+[package]
+name = "yaak-grpc"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+ts-rs = { workspace = true }
+anyhow = "1.0.97"
+async-recursion = "1.1.1"
+dunce = "1.0.4"
+hyper-rustls = { version = "0.27.7", default-features = false, features = ["http2"] }
+hyper-util = { version = "0.1.13", default-features = false, features = ["client-legacy"] }
+log = { workspace = true }
+md5 = "0.7.0"
+prost = "0.14.4"
+prost-reflect = { version = "0.16.5", default-features = false, features = ["serde", "derive"] }
+prost-types = "0.14.4"
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+tokio = { workspace = true, features = ["macros", "rt-multi-thread", "fs", "process"] }
+tokio-stream = "0.1.14"
+tonic = { version = "0.14.6", default-features = false, features = ["transport"] }
+tonic-reflection = "0.14.6"
+uuid = { version = "1.7.0", features = ["v4"] }
+yaak-common = { workspace = true }
+yaak-tls = { workspace = true }
+thiserror = "2.0.17"
diff --git a/crates/yaak-grpc/bindings/gen_grpc.ts b/crates/yaak-grpc/bindings/gen_grpc.ts
new file mode 100644
index 0000000..7f050ab
--- /dev/null
+++ b/crates/yaak-grpc/bindings/gen_grpc.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type MethodDefinition = { name: string, schema: string, clientStreaming: boolean, serverStreaming: boolean, };
+
+export type ServiceDefinition = { name: string, methods: Array<MethodDefinition>, };
diff --git a/crates/yaak-grpc/src/any.rs b/crates/yaak-grpc/src/any.rs
new file mode 100644
index 0000000..54b523b
--- /dev/null
+++ b/crates/yaak-grpc/src/any.rs
@@ -0,0 +1,61 @@
+use log::error;
+
+pub(crate) fn collect_any_types(json: &str, out: &mut Vec<String>) {
+    let value = match serde_json::from_str(json).map_err(|e| e.to_string()) {
+        Ok(v) => v,
+        Err(e) => {
+            error!("Failed to parse gRPC message JSON: {e:?}");
+            return;
+        }
+    };
+    collect_any_types_value(&value, out);
+}
+
+fn collect_any_types_value(json: &serde_json::Value, out: &mut Vec<String>) {
+    match json {
+        serde_json::Value::Object(map) => {
+            if let Some(t) = map.get("@type").and_then(|v| v.as_str()) {
+                if let Some(full_name) = t.rsplit_once('/').map(|(_, n)| n) {
+                    out.push(full_name.to_string());
+                }
+            }
+
+            for v in map.values() {
+                collect_any_types_value(v, out);
+            }
+        }
+        serde_json::Value::Array(arr) => {
+            for v in arr {
+                collect_any_types_value(v, out);
+            }
+        }
+        _ => {}
+    }
+}
+
+// Write tests for this
+#[cfg(test)]
+mod tests {
+    #[test]
+    fn test_collect_any_types() {
+        let json = r#"{
+            "mounts": [
+              {
+                "mountSource": {
+                  "@type": "type.googleapis.com/mount_source.MountSourceRBDVolume",
+                  "volumeID": "volumes/rbd"
+                }
+              }
+            ],
+            "foo": {
+              "@type": "type.googleapis.com/foo.bar",
+              "foo": "fooo"
+            }
+        }"#;
+
+        let mut out = Vec::new();
+        super::collect_any_types(json, &mut out);
+        out.sort();
+        assert_eq!(out, vec!["foo.bar", "mount_source.MountSourceRBDVolume"]);
+    }
+}
diff --git a/crates/yaak-grpc/src/client.rs b/crates/yaak-grpc/src/client.rs
new file mode 100644
index 0000000..c0bd0e3
--- /dev/null
+++ b/crates/yaak-grpc/src/client.rs
@@ -0,0 +1,188 @@
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use crate::manager::decorate_req;
+use crate::transport::get_transport;
+use async_recursion::async_recursion;
+use hyper_rustls::HttpsConnector;
+use hyper_util::client::legacy::Client;
+use hyper_util::client::legacy::connect::HttpConnector;
+use log::debug;
+use std::collections::BTreeMap;
+use tokio_stream::StreamExt;
+use tonic::Request;
+use tonic::body::Body;
+use tonic::transport::Uri;
+use tonic_reflection::pb::v1::server_reflection_request::MessageRequest;
+use tonic_reflection::pb::v1::server_reflection_response::MessageResponse;
+use tonic_reflection::pb::v1::{
+    ErrorResponse, ExtensionNumberResponse, ListServiceResponse, ServerReflectionRequest,
+    ServiceResponse,
+};
+use tonic_reflection::pb::v1::{ExtensionRequest, FileDescriptorResponse};
+use tonic_reflection::pb::{v1, v1alpha};
+use yaak_tls::ClientCertificateConfig;
+
+pub struct AutoReflectionClient<T = Client<HttpsConnector<HttpConnector>, Body>> {
+    use_v1alpha: bool,
+    client_v1: v1::server_reflection_client::ServerReflectionClient<T>,
+    client_v1alpha: v1alpha::server_reflection_client::ServerReflectionClient<T>,
+}
+
+impl AutoReflectionClient {
+    pub fn new(
+        uri: &Uri,
+        validate_certificates: bool,
+        client_cert: Option<ClientCertificateConfig>,
+        max_message_size: usize,
+    ) -> Result<Self> {
+        let client_v1 = v1::server_reflection_client::ServerReflectionClient::with_origin(
+            get_transport(validate_certificates, client_cert.clone())?,
+            uri.clone(),
+        )
+        .max_decoding_message_size(max_message_size)
+        .max_encoding_message_size(max_message_size);
+        let client_v1alpha =
+            v1alpha::server_reflection_client::ServerReflectionClient::with_origin(
+                get_transport(validate_certificates, client_cert.clone())?,
+                uri.clone(),
+            )
+            .max_decoding_message_size(max_message_size)
+            .max_encoding_message_size(max_message_size);
+        Ok(AutoReflectionClient { use_v1alpha: false, client_v1, client_v1alpha })
+    }
+
+    #[async_recursion]
+    pub async fn send_reflection_request(
+        &mut self,
+        message: MessageRequest,
+        metadata: &BTreeMap<String, String>,
+    ) -> Result<MessageResponse> {
+        let reflection_request = ServerReflectionRequest {
+            host: "".into(), // Doesn't matter
+            message_request: Some(message.clone()),
+        };
+
+        if self.use_v1alpha {
+            let mut request =
+                Request::new(tokio_stream::once(to_v1alpha_request(reflection_request)));
+            decorate_req(metadata, &mut request)?;
+
+            self.client_v1alpha
+                .server_reflection_info(request)
+                .await
+                .map_err(|e| match e.code() {
+                    tonic::Code::Unavailable => {
+                        GenericError("Failed to connect to endpoint".to_string())
+                    }
+                    tonic::Code::Unauthenticated => {
+                        GenericError("Authentication failed".to_string())
+                    }
+                    tonic::Code::DeadlineExceeded => GenericError("Deadline exceeded".to_string()),
+                    _ => GenericError(e.to_string()),
+                })?
+                .into_inner()
+                .next()
+                .await
+                .ok_or(GenericError("Missing reflection message".to_string()))??
+                .message_response
+                .ok_or(GenericError("No reflection response".to_string()))
+                .map(|resp| to_v1_msg_response(resp))
+        } else {
+            let mut request = Request::new(tokio_stream::once(reflection_request));
+            decorate_req(metadata, &mut request)?;
+
+            let resp = self.client_v1.server_reflection_info(request).await;
+            match resp {
+                Ok(r) => Ok(r),
+                Err(e) => match e.code().clone() {
+                    tonic::Code::Unimplemented => {
+                        // If v1 fails, change to v1alpha and try again
+                        debug!("gRPC schema reflection falling back to v1alpha");
+                        self.use_v1alpha = true;
+                        return self.send_reflection_request(message, metadata).await;
+                    }
+                    _ => Err(e),
+                },
+            }
+            .map_err(|e| match e.code() {
+                tonic::Code::Unavailable => {
+                    GenericError("Failed to connect to endpoint".to_string())
+                }
+                tonic::Code::Unauthenticated => GenericError("Authentication failed".to_string()),
+                tonic::Code::DeadlineExceeded => GenericError("Deadline exceeded".to_string()),
+                _ => GenericError(e.to_string()),
+            })?
+            .into_inner()
+            .next()
+            .await
+            .ok_or(GenericError("Missing reflection message".to_string()))??
+            .message_response
+            .ok_or(GenericError("No reflection response".to_string()))
+        }
+    }
+}
+
+fn to_v1_msg_response(
+    response: v1alpha::server_reflection_response::MessageResponse,
+) -> MessageResponse {
+    match response {
+        v1alpha::server_reflection_response::MessageResponse::FileDescriptorResponse(v) => {
+            MessageResponse::FileDescriptorResponse(FileDescriptorResponse {
+                file_descriptor_proto: v.file_descriptor_proto,
+            })
+        }
+        v1alpha::server_reflection_response::MessageResponse::AllExtensionNumbersResponse(v) => {
+            MessageResponse::AllExtensionNumbersResponse(ExtensionNumberResponse {
+                extension_number: v.extension_number,
+                base_type_name: v.base_type_name,
+            })
+        }
+        v1alpha::server_reflection_response::MessageResponse::ListServicesResponse(v) => {
+            MessageResponse::ListServicesResponse(ListServiceResponse {
+                service: v
+                    .service
+                    .iter()
+                    .map(|s| ServiceResponse { name: s.name.clone() })
+                    .collect(),
+            })
+        }
+        v1alpha::server_reflection_response::MessageResponse::ErrorResponse(v) => {
+            MessageResponse::ErrorResponse(ErrorResponse {
+                error_code: v.error_code,
+                error_message: v.error_message,
+            })
+        }
+    }
+}
+
+fn to_v1alpha_request(request: ServerReflectionRequest) -> v1alpha::ServerReflectionRequest {
+    v1alpha::ServerReflectionRequest {
+        host: request.host,
+        message_request: request.message_request.map(|m| to_v1alpha_msg_request(m)),
+    }
+}
+
+fn to_v1alpha_msg_request(
+    message: MessageRequest,
+) -> v1alpha::server_reflection_request::MessageRequest {
+    match message {
+        MessageRequest::FileByFilename(v) => {
+            v1alpha::server_reflection_request::MessageRequest::FileByFilename(v)
+        }
+        MessageRequest::FileContainingSymbol(v) => {
+            v1alpha::server_reflection_request::MessageRequest::FileContainingSymbol(v)
+        }
+        MessageRequest::FileContainingExtension(ExtensionRequest {
+            extension_number,
+            containing_type,
+        }) => v1alpha::server_reflection_request::MessageRequest::FileContainingExtension(
+            v1alpha::ExtensionRequest { extension_number, containing_type },
+        ),
+        MessageRequest::AllExtensionNumbersOfType(v) => {
+            v1alpha::server_reflection_request::MessageRequest::AllExtensionNumbersOfType(v)
+        }
+        MessageRequest::ListServices(v) => {
+            v1alpha::server_reflection_request::MessageRequest::ListServices(v)
+        }
+    }
+}
diff --git a/crates/yaak-grpc/src/codec.rs b/crates/yaak-grpc/src/codec.rs
new file mode 100644
index 0000000..2814c3b
--- /dev/null
+++ b/crates/yaak-grpc/src/codec.rs
@@ -0,0 +1,50 @@
+use prost_reflect::prost::Message;
+use prost_reflect::{DynamicMessage, MethodDescriptor};
+use tonic::Status;
+use tonic::codec::{Codec, DecodeBuf, Decoder, EncodeBuf, Encoder};
+
+#[derive(Clone)]
+pub struct DynamicCodec(MethodDescriptor);
+
+impl DynamicCodec {
+    #[allow(dead_code)]
+    pub fn new(md: MethodDescriptor) -> Self {
+        Self(md)
+    }
+}
+
+impl Codec for DynamicCodec {
+    type Encode = DynamicMessage;
+    type Decode = DynamicMessage;
+    type Encoder = Self;
+    type Decoder = Self;
+
+    fn encoder(&mut self) -> Self::Encoder {
+        self.clone()
+    }
+
+    fn decoder(&mut self) -> Self::Decoder {
+        self.clone()
+    }
+}
+
+impl Encoder for DynamicCodec {
+    type Item = DynamicMessage;
+    type Error = Status;
+
+    fn encode(&mut self, item: Self::Item, dst: &mut EncodeBuf<'_>) -> Result<(), Self::Error> {
+        item.encode(dst).expect("buffer is too small to decode this message");
+        Ok(())
+    }
+}
+
+impl Decoder for DynamicCodec {
+    type Item = DynamicMessage;
+    type Error = Status;
+
+    fn decode(&mut self, src: &mut DecodeBuf<'_>) -> Result<Option<Self::Item>, Self::Error> {
+        let mut msg = DynamicMessage::new(self.0.output());
+        msg.merge(src).map_err(|err| Status::internal(err.to_string()))?;
+        Ok(Some(msg))
+    }
+}
diff --git a/crates/yaak-grpc/src/error.rs b/crates/yaak-grpc/src/error.rs
new file mode 100644
index 0000000..9eba3e2
--- /dev/null
+++ b/crates/yaak-grpc/src/error.rs
@@ -0,0 +1,51 @@
+use crate::manager::GrpcStreamError;
+use prost::DecodeError;
+use serde::{Serialize, Serializer};
+use serde_json::Error as SerdeJsonError;
+use std::io;
+use thiserror::Error;
+use tonic::Status;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error(transparent)]
+    TlsError(#[from] yaak_tls::error::Error),
+
+    #[error(transparent)]
+    TonicError(#[from] Status),
+
+    #[error("Prost reflect error: {0:?}")]
+    ProstReflectError(#[from] prost_reflect::DescriptorError),
+
+    #[error(transparent)]
+    DeserializerError(#[from] SerdeJsonError),
+
+    #[error(transparent)]
+    GrpcStreamError(#[from] GrpcStreamError),
+
+    #[error(transparent)]
+    GrpcDecodeError(#[from] DecodeError),
+
+    #[error(transparent)]
+    GrpcInvalidMetadataKeyError(#[from] tonic::metadata::errors::InvalidMetadataKey),
+
+    #[error(transparent)]
+    GrpcInvalidMetadataValueError(#[from] tonic::metadata::errors::InvalidMetadataValue),
+
+    #[error(transparent)]
+    IOError(#[from] io::Error),
+
+    #[error("GRPC error: {0}")]
+    GenericError(String),
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-grpc/src/json_schema.rs b/crates/yaak-grpc/src/json_schema.rs
new file mode 100644
index 0000000..ee86624
--- /dev/null
+++ b/crates/yaak-grpc/src/json_schema.rs
@@ -0,0 +1,382 @@
+use prost_reflect::{DescriptorPool, FieldDescriptor, MessageDescriptor};
+use std::collections::{HashMap, HashSet, VecDeque};
+
+pub fn message_to_json_schema(_: &DescriptorPool, root_msg: MessageDescriptor) -> JsonSchemaEntry {
+    JsonSchemaGenerator::generate_json_schema(root_msg)
+}
+
+struct JsonSchemaGenerator {
+    msg_mapping: HashMap<String, JsonSchemaEntry>,
+}
+
+impl JsonSchemaGenerator {
+    pub fn new() -> Self {
+        JsonSchemaGenerator { msg_mapping: HashMap::new() }
+    }
+
+    pub fn generate_json_schema(msg: MessageDescriptor) -> JsonSchemaEntry {
+        let generator = JsonSchemaGenerator::new();
+        generator.scan_root(msg)
+    }
+
+    fn add_message(&mut self, msg: &MessageDescriptor) {
+        let name = msg.full_name().to_string();
+        if self.msg_mapping.contains_key(&name) {
+            return;
+        }
+        self.msg_mapping.insert(name.clone(), JsonSchemaEntry::object());
+    }
+
+    pub fn scan_root(mut self, root_msg: MessageDescriptor) -> JsonSchemaEntry {
+        self.init_structure(root_msg.clone());
+        self.fill_properties(root_msg.clone());
+
+        let mut root = self.msg_mapping.remove(root_msg.full_name()).unwrap();
+
+        if self.msg_mapping.len() > 0 {
+            root.defs = Some(self.msg_mapping);
+        }
+        root
+    }
+
+    fn fill_properties(&mut self, root_msg: MessageDescriptor) {
+        let root_name = root_msg.full_name().to_string();
+
+        let mut visited = HashSet::new();
+        let mut msg_queue = VecDeque::new();
+        msg_queue.push_back(root_msg);
+
+        while !msg_queue.is_empty() {
+            let msg = msg_queue.pop_front().unwrap();
+            let msg_name = msg.full_name();
+            if visited.contains(msg_name) {
+                continue;
+            }
+
+            visited.insert(msg_name.to_string());
+
+            let entry = self.msg_mapping.get_mut(msg_name).unwrap();
+
+            for field in msg.fields() {
+                let field_name = field.name().to_string();
+
+                if matches!(field.cardinality(), prost_reflect::Cardinality::Required) {
+                    entry.add_required(field_name.clone());
+                }
+
+                if let Some(oneof) = field.containing_oneof() {
+                    for oneof_field in oneof.fields() {
+                        if let Some(fm) = is_message_field(&oneof_field) {
+                            msg_queue.push_back(fm);
+                        }
+                        entry.add_property(
+                            oneof_field.name().to_string(),
+                            field_to_type_or_ref(&root_name, oneof_field),
+                        );
+                    }
+                    continue;
+                }
+
+                let (field_type, nest_msg) = {
+                    if let Some(fm) = is_message_field(&field) {
+                        if field.is_list() {
+                            // repeated message type
+                            (
+                                JsonSchemaEntry::array(field_to_type_or_ref(&root_name, field)),
+                                Some(fm),
+                            )
+                        } else if field.is_map() {
+                            let value_field = fm.get_field_by_name("value").unwrap();
+
+                            if let Some(fm) = is_message_field(&value_field) {
+                                (
+                                    JsonSchemaEntry::map(field_to_type_or_ref(
+                                        &root_name,
+                                        value_field,
+                                    )),
+                                    Some(fm),
+                                )
+                            } else {
+                                (
+                                    JsonSchemaEntry::map(field_to_type_or_ref(
+                                        &root_name,
+                                        value_field,
+                                    )),
+                                    None,
+                                )
+                            }
+                        } else {
+                            (field_to_type_or_ref(&root_name, field), Some(fm))
+                        }
+                    } else {
+                        if field.is_list() {
+                            // repeated scalar type
+                            (JsonSchemaEntry::array(field_to_type_or_ref(&root_name, field)), None)
+                        } else {
+                            (field_to_type_or_ref(&root_name, field), None)
+                        }
+                    }
+                };
+
+                if let Some(fm) = nest_msg {
+                    msg_queue.push_back(fm);
+                }
+
+                entry.add_property(field_name, field_type);
+            }
+        }
+    }
+
+    fn init_structure(&mut self, root_msg: MessageDescriptor) {
+        let mut visited = HashSet::new();
+        let mut msg_queue = VecDeque::new();
+        msg_queue.push_back(root_msg.clone());
+
+        // level traversal, to make sure all message type is defined before used
+        while !msg_queue.is_empty() {
+            let msg = msg_queue.pop_front().unwrap();
+            let name = msg.full_name();
+            if visited.contains(name) {
+                continue;
+            }
+            visited.insert(name.to_string());
+            self.add_message(&msg);
+
+            for child in msg.child_messages() {
+                if child.is_map_entry() {
+                    //  for field with map<key, value> type, there will be a child message type *Entry generated
+                    // just skip it
+                    continue;
+                }
+
+                self.add_message(&child);
+                msg_queue.push_back(child);
+            }
+
+            for field in msg.fields() {
+                if let Some(oneof) = field.containing_oneof() {
+                    for oneof_field in oneof.fields() {
+                        if let Some(fm) = is_message_field(&oneof_field) {
+                            self.add_message(&fm);
+                            msg_queue.push_back(fm);
+                        }
+                    }
+                    continue;
+                }
+                if field.is_map() {
+                    // key is always scalar type, so no need to process
+                    // value can be any type, so need to unpack value type
+                    let map_field_msg = is_message_field(&field).unwrap();
+                    let map_value_field = map_field_msg.get_field_by_name("value").unwrap();
+                    if let Some(value_fm) = is_message_field(&map_value_field) {
+                        self.add_message(&value_fm);
+                        msg_queue.push_back(value_fm);
+                    }
+                    continue;
+                }
+                if let Some(fm) = is_message_field(&field) {
+                    self.add_message(&fm);
+                    msg_queue.push_back(fm);
+                }
+            }
+        }
+    }
+}
+
+fn field_to_type_or_ref(root_name: &str, field: FieldDescriptor) -> JsonSchemaEntry {
+    match field.kind() {
+        prost_reflect::Kind::Bool => JsonSchemaEntry::boolean(),
+        prost_reflect::Kind::Double => JsonSchemaEntry::number("double"),
+        prost_reflect::Kind::Float => JsonSchemaEntry::number("float"),
+        prost_reflect::Kind::Int32 => JsonSchemaEntry::number("int32"),
+        prost_reflect::Kind::Int64 => JsonSchemaEntry::string_with_format("int64"),
+        prost_reflect::Kind::Uint32 => JsonSchemaEntry::number("int64"),
+        prost_reflect::Kind::Uint64 => JsonSchemaEntry::string_with_format("uint64"),
+        prost_reflect::Kind::Sint32 => JsonSchemaEntry::number("sint32"),
+        prost_reflect::Kind::Sint64 => JsonSchemaEntry::string_with_format("sint64"),
+        prost_reflect::Kind::Fixed32 => JsonSchemaEntry::number("int64"),
+        prost_reflect::Kind::Fixed64 => JsonSchemaEntry::string_with_format("fixed64"),
+        prost_reflect::Kind::Sfixed32 => JsonSchemaEntry::number("sfixed32"),
+        prost_reflect::Kind::Sfixed64 => JsonSchemaEntry::string_with_format("sfixed64"),
+        prost_reflect::Kind::String => JsonSchemaEntry::string(),
+        prost_reflect::Kind::Bytes => JsonSchemaEntry::string_with_format("byte"),
+        prost_reflect::Kind::Enum(enums) => {
+            let values = enums.values().map(|v| v.name().to_string()).collect::<Vec<_>>();
+            JsonSchemaEntry::enums(values)
+        }
+        prost_reflect::Kind::Message(fm) => {
+            let field_type_full_name = fm.full_name();
+            match field_type_full_name {
+                // [Protocol Buffers Well-Known Types]: https://protobuf.dev/reference/protobuf/google.protobuf/
+                "google.protobuf.FieldMask" => JsonSchemaEntry::string(),
+                "google.protobuf.Timestamp" => JsonSchemaEntry::string_with_format("date-time"),
+                "google.protobuf.Duration" => JsonSchemaEntry::string_with_format("duration"),
+                "google.protobuf.StringValue" => JsonSchemaEntry::string(),
+                "google.protobuf.BytesValue" => JsonSchemaEntry::string_with_format("byte"),
+                "google.protobuf.Int32Value" => JsonSchemaEntry::number("int32"),
+                "google.protobuf.UInt32Value" => JsonSchemaEntry::string_with_format("int64"),
+                "google.protobuf.Int64Value" => JsonSchemaEntry::string_with_format("int64"),
+                "google.protobuf.UInt64Value" => JsonSchemaEntry::string_with_format("uint64"),
+                "google.protobuf.FloatValue" => JsonSchemaEntry::number("float"),
+                "google.protobuf.DoubleValue" => JsonSchemaEntry::number("double"),
+                "google.protobuf.BoolValue" => JsonSchemaEntry::boolean(),
+                "google.protobuf.Empty" => JsonSchemaEntry::default(),
+                "google.protobuf.Struct" => JsonSchemaEntry::object(),
+                "google.protobuf.ListValue" => JsonSchemaEntry::array(JsonSchemaEntry::default()),
+                "google.protobuf.NullValue" => JsonSchemaEntry::null(),
+                name @ _ if name == root_name => JsonSchemaEntry::root_reference(),
+                _ => JsonSchemaEntry::reference(fm.full_name()),
+            }
+        }
+    }
+}
+
+fn is_message_field(field: &FieldDescriptor) -> Option<MessageDescriptor> {
+    match field.kind() {
+        prost_reflect::Kind::Message(m) => Some(m),
+        _ => None,
+    }
+}
+
+#[derive(Default, serde::Serialize)]
+#[serde(default, rename_all = "camelCase")]
+pub struct JsonSchemaEntry {
+    #[serde(skip_serializing_if = "Option::is_none")]
+    title: Option<String>,
+
+    #[serde(rename = "type", skip_serializing_if = "Option::is_none")]
+    type_: Option<JsonType>,
+
+    #[serde(skip_serializing_if = "Option::is_none")]
+    format: Option<String>,
+
+    #[serde(skip_serializing_if = "Option::is_none")]
+    description: Option<String>,
+
+    #[serde(skip_serializing_if = "Option::is_none")]
+    properties: Option<HashMap<String, JsonSchemaEntry>>,
+
+    #[serde(rename = "enum", skip_serializing_if = "Option::is_none")]
+    enum_: Option<Vec<String>>,
+
+    // for map type
+    #[serde(skip_serializing_if = "Option::is_none")]
+    additional_properties: Option<Box<JsonSchemaEntry>>,
+
+    // Set all properties to required
+    #[serde(skip_serializing_if = "Option::is_none")]
+    required: Option<Vec<String>>,
+
+    #[serde(skip_serializing_if = "Option::is_none")]
+    items: Option<Box<JsonSchemaEntry>>,
+
+    #[serde(skip_serializing_if = "Option::is_none", rename = "$defs")]
+    defs: Option<HashMap<String, JsonSchemaEntry>>,
+
+    #[serde(skip_serializing_if = "Option::is_none", rename = "$ref")]
+    ref_: Option<String>,
+}
+
+impl JsonSchemaEntry {
+    pub fn add_property(&mut self, name: String, entry: JsonSchemaEntry) {
+        if self.properties.is_none() {
+            self.properties = Some(HashMap::new());
+        }
+        self.properties.as_mut().unwrap().insert(name, entry);
+    }
+
+    pub fn add_required(&mut self, name: String) {
+        if self.required.is_none() {
+            self.required = Some(Vec::new());
+        }
+        self.required.as_mut().unwrap().push(name);
+    }
+}
+
+impl JsonSchemaEntry {
+    pub fn object() -> Self {
+        JsonSchemaEntry { type_: Some(JsonType::Object), ..Default::default() }
+    }
+    pub fn boolean() -> Self {
+        JsonSchemaEntry { type_: Some(JsonType::Boolean), ..Default::default() }
+    }
+    pub fn number<S: Into<String>>(format: S) -> Self {
+        JsonSchemaEntry {
+            type_: Some(JsonType::Number),
+            format: Some(format.into()),
+            ..Default::default()
+        }
+    }
+    pub fn string() -> Self {
+        JsonSchemaEntry { type_: Some(JsonType::String), ..Default::default() }
+    }
+
+    pub fn string_with_format<S: Into<String>>(format: S) -> Self {
+        JsonSchemaEntry {
+            type_: Some(JsonType::String),
+            format: Some(format.into()),
+            ..Default::default()
+        }
+    }
+    pub fn reference<S: AsRef<str>>(ref_: S) -> Self {
+        JsonSchemaEntry { ref_: Some(format!("#/$defs/{}", ref_.as_ref())), ..Default::default() }
+    }
+    pub fn root_reference() -> Self {
+        JsonSchemaEntry { ref_: Some("#".to_string()), ..Default::default() }
+    }
+    pub fn array(item: JsonSchemaEntry) -> Self {
+        JsonSchemaEntry {
+            type_: Some(JsonType::Array),
+            items: Some(Box::new(item)),
+            ..Default::default()
+        }
+    }
+    pub fn enums(enums: Vec<String>) -> Self {
+        JsonSchemaEntry { type_: Some(JsonType::String), enum_: Some(enums), ..Default::default() }
+    }
+
+    pub fn map(value_type: JsonSchemaEntry) -> Self {
+        JsonSchemaEntry {
+            type_: Some(JsonType::Object),
+            additional_properties: Some(Box::new(value_type)),
+            ..Default::default()
+        }
+    }
+
+    pub fn null() -> Self {
+        JsonSchemaEntry { type_: Some(JsonType::Null), ..Default::default() }
+    }
+}
+
+enum JsonType {
+    String,
+    Number,
+    Object,
+    Array,
+    Boolean,
+    Null,
+    _UNKNOWN,
+}
+
+impl Default for JsonType {
+    fn default() -> Self {
+        JsonType::_UNKNOWN
+    }
+}
+
+impl serde::Serialize for JsonType {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: serde::Serializer,
+    {
+        match self {
+            JsonType::String => serializer.serialize_str("string"),
+            JsonType::Number => serializer.serialize_str("number"),
+            JsonType::Object => serializer.serialize_str("object"),
+            JsonType::Array => serializer.serialize_str("array"),
+            JsonType::Boolean => serializer.serialize_str("boolean"),
+            JsonType::Null => serializer.serialize_str("null"),
+            JsonType::_UNKNOWN => serializer.serialize_str("unknown"),
+        }
+    }
+}
diff --git a/crates/yaak-grpc/src/lib.rs b/crates/yaak-grpc/src/lib.rs
new file mode 100644
index 0000000..8911108
--- /dev/null
+++ b/crates/yaak-grpc/src/lib.rs
@@ -0,0 +1,56 @@
+use prost_reflect::{DynamicMessage, MethodDescriptor, SerializeOptions};
+use serde::{Deserialize, Serialize};
+use serde_json::Deserializer;
+
+mod any;
+mod client;
+mod codec;
+pub mod error;
+mod json_schema;
+pub mod manager;
+mod reflection;
+mod transport;
+
+pub use tonic::Code;
+pub use tonic::metadata::*;
+
+pub fn serialize_options() -> SerializeOptions {
+    SerializeOptions::new().skip_default_fields(false)
+}
+
+#[derive(Serialize, Deserialize, Debug, Default, ts_rs::TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_grpc.ts")]
+pub struct ServiceDefinition {
+    pub name: String,
+    pub methods: Vec<MethodDefinition>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Default, ts_rs::TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_grpc.ts")]
+pub struct MethodDefinition {
+    pub name: String,
+    pub schema: String,
+    pub client_streaming: bool,
+    pub server_streaming: bool,
+}
+
+static SERIALIZE_OPTIONS: &'static SerializeOptions =
+    &SerializeOptions::new().skip_default_fields(false).stringify_64_bit_integers(false);
+
+pub(crate) fn serialize_dynamic_message_json(msg: &DynamicMessage) -> Result<String, String> {
+    let mut buf = Vec::new();
+    let mut se = serde_json::Serializer::pretty(&mut buf);
+    msg.serialize_with_options(&mut se, SERIALIZE_OPTIONS).map_err(|e| e.to_string())?;
+    let s = String::from_utf8(buf).expect("serde_json to emit valid utf8");
+    Ok(s)
+}
+
+pub fn deserialize_message(msg: &str, method: MethodDescriptor) -> Result<DynamicMessage, String> {
+    let mut deserializer = Deserializer::from_str(&msg);
+    let req_message = DynamicMessage::deserialize(method.input(), &mut deserializer)
+        .map_err(|e| e.to_string())?;
+    deserializer.end().map_err(|e| e.to_string())?;
+    Ok(req_message)
+}
diff --git a/crates/yaak-grpc/src/manager.rs b/crates/yaak-grpc/src/manager.rs
new file mode 100644
index 0000000..20c28ee
--- /dev/null
+++ b/crates/yaak-grpc/src/manager.rs
@@ -0,0 +1,553 @@
+use crate::codec::DynamicCodec;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use crate::reflection::{
+    fill_pool_from_files, fill_pool_from_reflection, method_desc_to_path,
+    reflect_types_for_dynamic_message, reflect_types_for_message,
+};
+use crate::transport::get_transport;
+use crate::{MethodDefinition, ServiceDefinition, json_schema};
+use hyper_rustls::HttpsConnector;
+use hyper_util::client::legacy::Client;
+use hyper_util::client::legacy::connect::HttpConnector;
+use log::{info, warn};
+pub use prost_reflect::DynamicMessage;
+use prost_reflect::ReflectMessage;
+use prost_reflect::prost::Message;
+use prost_reflect::{DescriptorPool, MethodDescriptor, ServiceDescriptor};
+use serde_json::Deserializer;
+use std::borrow::Cow;
+use std::collections::BTreeMap;
+use std::error::Error;
+use std::fmt;
+use std::fmt::Display;
+use std::path::PathBuf;
+use std::str::FromStr;
+use std::sync::Arc;
+use tokio::sync::RwLock;
+use tokio_stream::StreamExt;
+use tokio_stream::wrappers::ReceiverStream;
+use tonic::body::Body;
+use tonic::metadata::{MetadataKey, MetadataValue};
+use tonic::transport::Uri;
+use tonic::{IntoRequest, IntoStreamingRequest, Request, Response, Status, Streaming};
+use yaak_tls::ClientCertificateConfig;
+
+#[derive(Clone)]
+pub struct GrpcConnection {
+    pool: Arc<RwLock<DescriptorPool>>,
+    conn: Client<HttpsConnector<HttpConnector>, Body>,
+    pub uri: Uri,
+    use_reflection: bool,
+    max_message_size: usize,
+}
+
+#[derive(Default, Debug)]
+pub struct GrpcStreamError {
+    pub message: String,
+    pub status: Option<Status>,
+}
+
+impl Error for GrpcStreamError {}
+
+impl Display for GrpcStreamError {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match &self.status {
+            Some(status) => write!(f, "[{}] {}", status, self.message),
+            None => write!(f, "{}", self.message),
+        }
+    }
+}
+
+impl From<String> for GrpcStreamError {
+    fn from(value: String) -> Self {
+        GrpcStreamError { message: value.to_string(), status: None }
+    }
+}
+
+impl From<Status> for GrpcStreamError {
+    fn from(s: Status) -> Self {
+        GrpcStreamError { message: s.message().to_string(), status: Some(s) }
+    }
+}
+
+impl GrpcConnection {
+    pub async fn method(&self, service: &str, method: &str) -> Result<MethodDescriptor> {
+        let service = self.service(service).await?;
+        let method = service
+            .methods()
+            .find(|m| m.name() == method)
+            .ok_or(GenericError("Failed to find method".to_string()))?;
+        Ok(method)
+    }
+
+    async fn service(&self, service: &str) -> Result<ServiceDescriptor> {
+        let pool = self.pool.read().await;
+        let service = pool
+            .get_service_by_name(service)
+            .ok_or(GenericError("Failed to find service".to_string()))?;
+        Ok(service)
+    }
+
+    pub async fn unary(
+        &self,
+        service: &str,
+        method: &str,
+        message: &str,
+        metadata: &BTreeMap<String, String>,
+        client_cert: Option<ClientCertificateConfig>,
+    ) -> Result<Response<DynamicMessage>> {
+        if self.use_reflection {
+            reflect_types_for_message(
+                self.pool.clone(),
+                &self.uri,
+                message,
+                metadata,
+                client_cert,
+                self.max_message_size,
+            )
+            .await?;
+        }
+        let method = &self.method(&service, &method).await?;
+        let input_message = method.input();
+
+        let mut deserializer = Deserializer::from_str(message);
+        let req_message = DynamicMessage::deserialize(input_message, &mut deserializer)?;
+        deserializer.end()?;
+
+        let mut client = grpc_client(self.conn.clone(), self.uri.clone(), self.max_message_size);
+
+        let mut req = req_message.into_request();
+        decorate_req(metadata, &mut req)?;
+
+        let path = method_desc_to_path(method);
+        let codec = DynamicCodec::new(method.clone());
+        client.ready().await.map_err(|e| GenericError(format!("Failed to connect: {}", e)))?;
+
+        Ok(client.unary(req, path, codec).await?)
+    }
+
+    pub async fn serialize_message(
+        &self,
+        message: &DynamicMessage,
+        metadata: &BTreeMap<String, String>,
+        client_cert: Option<ClientCertificateConfig>,
+    ) -> Result<String> {
+        let message = if self.use_reflection {
+            reflect_types_for_dynamic_message(
+                self.pool.clone(),
+                &self.uri,
+                message,
+                metadata,
+                client_cert,
+                self.max_message_size,
+            )
+            .await?;
+
+            let message_name = message.descriptor().full_name().to_string();
+            let message_desc = {
+                let pool = self.pool.read().await;
+                pool.get_message_by_name(&message_name)
+                    .ok_or(GenericError(format!("Failed to find message {message_name}")))?
+            };
+            let mut message_with_updated_pool = DynamicMessage::new(message_desc);
+            message_with_updated_pool.merge(message.encode_to_vec().as_slice())?;
+            Cow::Owned(message_with_updated_pool)
+        } else {
+            Cow::Borrowed(message)
+        };
+
+        crate::serialize_dynamic_message_json(message.as_ref()).map_err(GenericError)
+    }
+
+    pub async fn streaming<F>(
+        &self,
+        service: &str,
+        method: &str,
+        stream: ReceiverStream<String>,
+        metadata: &BTreeMap<String, String>,
+        client_cert: Option<ClientCertificateConfig>,
+        on_message: F,
+    ) -> Result<Response<Streaming<DynamicMessage>>>
+    where
+        F: Fn(std::result::Result<String, String>) + Send + Sync + Clone + 'static,
+    {
+        let method = &self.method(&service, &method).await?;
+        let mapped_stream = {
+            let input_message = method.input();
+            let pool = self.pool.clone();
+            let uri = self.uri.clone();
+            let md = metadata.clone();
+            let use_reflection = self.use_reflection.clone();
+            let client_cert = client_cert.clone();
+            let max_message_size = self.max_message_size;
+            stream
+                .then(move |json| {
+                    let pool = pool.clone();
+                    let uri = uri.clone();
+                    let input_message = input_message.clone();
+                    let md = md.clone();
+                    let use_reflection = use_reflection.clone();
+                    let client_cert = client_cert.clone();
+                    let on_message = on_message.clone();
+                    let json_clone = json.clone();
+                    async move {
+                        if use_reflection {
+                            if let Err(e) = reflect_types_for_message(
+                                pool,
+                                &uri,
+                                &json,
+                                &md,
+                                client_cert,
+                                max_message_size,
+                            )
+                            .await
+                            {
+                                warn!("Failed to resolve Any types: {e}");
+                            }
+                        }
+                        let mut de = Deserializer::from_str(&json);
+                        match DynamicMessage::deserialize(input_message, &mut de) {
+                            Ok(m) => {
+                                on_message(Ok(json_clone));
+                                Some(m)
+                            }
+                            Err(e) => {
+                                warn!("Failed to deserialize message: {e}");
+                                on_message(Err(e.to_string()));
+                                None
+                            }
+                        }
+                    }
+                })
+                .filter_map(|x| x)
+        };
+
+        let mut client = grpc_client(self.conn.clone(), self.uri.clone(), self.max_message_size);
+        let path = method_desc_to_path(method);
+        let codec = DynamicCodec::new(method.clone());
+
+        let mut req = mapped_stream.into_streaming_request();
+        decorate_req(metadata, &mut req)?;
+
+        client.ready().await.map_err(|e| GenericError(format!("Failed to connect: {}", e)))?;
+        Ok(client.streaming(req, path, codec).await?)
+    }
+
+    pub async fn client_streaming<F>(
+        &self,
+        service: &str,
+        method: &str,
+        stream: ReceiverStream<String>,
+        metadata: &BTreeMap<String, String>,
+        client_cert: Option<ClientCertificateConfig>,
+        on_message: F,
+    ) -> Result<Response<DynamicMessage>>
+    where
+        F: Fn(std::result::Result<String, String>) + Send + Sync + Clone + 'static,
+    {
+        let method = &self.method(&service, &method).await?;
+        let mapped_stream = {
+            let input_message = method.input();
+            let pool = self.pool.clone();
+            let uri = self.uri.clone();
+            let md = metadata.clone();
+            let use_reflection = self.use_reflection.clone();
+            let client_cert = client_cert.clone();
+            let max_message_size = self.max_message_size;
+            stream
+                .then(move |json| {
+                    let pool = pool.clone();
+                    let uri = uri.clone();
+                    let input_message = input_message.clone();
+                    let md = md.clone();
+                    let use_reflection = use_reflection.clone();
+                    let client_cert = client_cert.clone();
+                    let on_message = on_message.clone();
+                    let json_clone = json.clone();
+                    async move {
+                        if use_reflection {
+                            if let Err(e) = reflect_types_for_message(
+                                pool,
+                                &uri,
+                                &json,
+                                &md,
+                                client_cert,
+                                max_message_size,
+                            )
+                            .await
+                            {
+                                warn!("Failed to resolve Any types: {e}");
+                            }
+                        }
+                        let mut de = Deserializer::from_str(&json);
+                        match DynamicMessage::deserialize(input_message, &mut de) {
+                            Ok(m) => {
+                                on_message(Ok(json_clone));
+                                Some(m)
+                            }
+                            Err(e) => {
+                                warn!("Failed to deserialize message: {e}");
+                                on_message(Err(e.to_string()));
+                                None
+                            }
+                        }
+                    }
+                })
+                .filter_map(|x| x)
+        };
+
+        let mut client = grpc_client(self.conn.clone(), self.uri.clone(), self.max_message_size);
+        let path = method_desc_to_path(method);
+        let codec = DynamicCodec::new(method.clone());
+
+        let mut req = mapped_stream.into_streaming_request();
+        decorate_req(metadata, &mut req)?;
+
+        client.ready().await.map_err(|e| GenericError(format!("Failed to connect: {}", e)))?;
+        Ok(client
+            .client_streaming(req, path, codec)
+            .await
+            .map_err(|e| GrpcStreamError { message: e.message().to_string(), status: Some(e) })?)
+    }
+
+    pub async fn server_streaming(
+        &self,
+        service: &str,
+        method: &str,
+        message: &str,
+        metadata: &BTreeMap<String, String>,
+    ) -> Result<Response<Streaming<DynamicMessage>>> {
+        let method = &self.method(&service, &method).await?;
+        let input_message = method.input();
+
+        let mut deserializer = Deserializer::from_str(message);
+        let req_message = DynamicMessage::deserialize(input_message, &mut deserializer)?;
+        deserializer.end()?;
+
+        let mut client = grpc_client(self.conn.clone(), self.uri.clone(), self.max_message_size);
+
+        let mut req = req_message.into_request();
+        decorate_req(metadata, &mut req)?;
+
+        let path = method_desc_to_path(method);
+        let codec = DynamicCodec::new(method.clone());
+        client.ready().await.map_err(|e| GenericError(format!("Failed to connect: {}", e)))?;
+        Ok(client.server_streaming(req, path, codec).await?)
+    }
+}
+
+fn grpc_client(
+    conn: Client<HttpsConnector<HttpConnector>, Body>,
+    uri: Uri,
+    max_message_size: usize,
+) -> tonic::client::Grpc<Client<HttpsConnector<HttpConnector>, Body>> {
+    tonic::client::Grpc::with_origin(conn, uri)
+        .max_decoding_message_size(max_message_size)
+        .max_encoding_message_size(max_message_size)
+}
+
+fn message_size_limit(setting: i32) -> usize {
+    match setting.try_into() {
+        Ok(0) | Err(_) => usize::MAX,
+        Ok(limit) => limit,
+    }
+}
+
+/// Configuration for GrpcHandle to compile proto files
+#[derive(Clone)]
+pub struct GrpcConfig {
+    /// Path to the protoc include directory (vendored/protoc/include)
+    pub protoc_include_dir: PathBuf,
+    /// Path to the yaakprotoc sidecar binary
+    pub protoc_bin_path: PathBuf,
+}
+
+pub struct GrpcHandle {
+    config: GrpcConfig,
+    pools: BTreeMap<String, DescriptorPool>,
+}
+
+impl GrpcHandle {
+    pub fn new(config: GrpcConfig) -> Self {
+        let pools = BTreeMap::new();
+        Self { pools, config }
+    }
+}
+
+impl GrpcHandle {
+    /// Remove cached descriptor pool for the given key, if present.
+    pub fn invalidate_pool(&mut self, id: &str, uri: &str, proto_files: &Vec<PathBuf>) {
+        let key = make_pool_key(id, uri, proto_files);
+        self.pools.remove(&key);
+    }
+
+    pub async fn reflect(
+        &mut self,
+        id: &str,
+        uri: &str,
+        proto_files: &Vec<PathBuf>,
+        metadata: &BTreeMap<String, String>,
+        validate_certificates: bool,
+        client_cert: Option<ClientCertificateConfig>,
+        request_message_size: i32,
+    ) -> Result<bool> {
+        let server_reflection = proto_files.is_empty();
+        let key = make_pool_key(id, uri, proto_files);
+
+        // If we already have a pool for this key, reuse it and avoid re-reflection
+        if self.pools.contains_key(&key) {
+            return Ok(server_reflection);
+        }
+
+        let pool = if server_reflection {
+            let full_uri = uri_from_str(uri)?;
+            fill_pool_from_reflection(
+                &full_uri,
+                metadata,
+                validate_certificates,
+                client_cert,
+                message_size_limit(request_message_size),
+            )
+            .await
+        } else {
+            fill_pool_from_files(&self.config, proto_files).await
+        }?;
+
+        self.pools.insert(key, pool.clone());
+        Ok(server_reflection)
+    }
+
+    pub async fn services(
+        &mut self,
+        id: &str,
+        uri: &str,
+        proto_files: &Vec<PathBuf>,
+        metadata: &BTreeMap<String, String>,
+        validate_certificates: bool,
+        client_cert: Option<ClientCertificateConfig>,
+        request_message_size: i32,
+    ) -> Result<Vec<ServiceDefinition>> {
+        // Ensure we have a pool; reflect only if missing
+        if self.get_pool(id, uri, proto_files).is_none() {
+            info!("Reflecting gRPC services for {} at {}", id, uri);
+            self.reflect(
+                id,
+                uri,
+                proto_files,
+                metadata,
+                validate_certificates,
+                client_cert,
+                request_message_size,
+            )
+            .await?;
+        }
+
+        let pool = self
+            .get_pool(id, uri, proto_files)
+            .ok_or(GenericError("Failed to get pool".to_string()))?;
+        Ok(self.services_from_pool(&pool))
+    }
+
+    fn services_from_pool(&self, pool: &DescriptorPool) -> Vec<ServiceDefinition> {
+        pool.services()
+            .map(|s| {
+                let mut def =
+                    ServiceDefinition { name: s.full_name().to_string(), methods: vec![] };
+                for method in s.methods() {
+                    let input_message = method.input();
+                    def.methods.push(MethodDefinition {
+                        name: method.name().to_string(),
+                        server_streaming: method.is_server_streaming(),
+                        client_streaming: method.is_client_streaming(),
+                        schema: serde_json::to_string_pretty(&json_schema::message_to_json_schema(
+                            &pool,
+                            input_message,
+                        ))
+                        .expect("Failed to serialize JSON schema"),
+                    })
+                }
+                def
+            })
+            .collect::<Vec<_>>()
+    }
+
+    pub async fn connect(
+        &mut self,
+        id: &str,
+        uri: &str,
+        proto_files: &Vec<PathBuf>,
+        metadata: &BTreeMap<String, String>,
+        validate_certificates: bool,
+        client_cert: Option<ClientCertificateConfig>,
+        request_message_size: i32,
+    ) -> Result<GrpcConnection> {
+        let use_reflection = proto_files.is_empty();
+        let max_message_size = message_size_limit(request_message_size);
+        if self.get_pool(id, uri, proto_files).is_none() {
+            self.reflect(
+                id,
+                uri,
+                proto_files,
+                metadata,
+                validate_certificates,
+                client_cert.clone(),
+                request_message_size,
+            )
+            .await?;
+        }
+        let pool = self
+            .get_pool(id, uri, proto_files)
+            .ok_or(GenericError("Failed to get pool".to_string()))?
+            .clone();
+        let uri = uri_from_str(uri)?;
+        let conn = get_transport(validate_certificates, client_cert.clone())?;
+        Ok(GrpcConnection {
+            pool: Arc::new(RwLock::new(pool)),
+            use_reflection,
+            conn,
+            uri,
+            max_message_size,
+        })
+    }
+
+    fn get_pool(&self, id: &str, uri: &str, proto_files: &Vec<PathBuf>) -> Option<&DescriptorPool> {
+        self.pools.get(make_pool_key(id, uri, proto_files).as_str())
+    }
+}
+
+pub(crate) fn decorate_req<T>(
+    metadata: &BTreeMap<String, String>,
+    req: &mut Request<T>,
+) -> Result<()> {
+    for (k, v) in metadata {
+        req.metadata_mut()
+            .insert(MetadataKey::from_str(k.as_str())?, MetadataValue::from_str(v.as_str())?);
+    }
+    Ok(())
+}
+
+fn uri_from_str(uri_str: &str) -> Result<Uri> {
+    match Uri::from_str(uri_str) {
+        Ok(uri) => Ok(uri),
+        Err(err) => {
+            // Uri::from_str basically only returns "invalid format" so we add more context here
+            Err(GenericError(format!("Failed to parse URL, {}", err.to_string())))
+        }
+    }
+}
+
+fn make_pool_key(id: &str, uri: &str, proto_files: &Vec<PathBuf>) -> String {
+    let pool_key = format!(
+        "{}::{}::{}",
+        id,
+        uri,
+        proto_files
+            .iter()
+            .map(|p| p.to_string_lossy().to_string())
+            .collect::<Vec<String>>()
+            .join(":")
+    );
+
+    format!("{:x}", md5::compute(pool_key))
+}
diff --git a/crates/yaak-grpc/src/reflection.rs b/crates/yaak-grpc/src/reflection.rs
new file mode 100644
index 0000000..e154d4b
--- /dev/null
+++ b/crates/yaak-grpc/src/reflection.rs
@@ -0,0 +1,533 @@
+use crate::any::collect_any_types;
+use crate::client::AutoReflectionClient;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use crate::manager::GrpcConfig;
+use anyhow::anyhow;
+use async_recursion::async_recursion;
+use log::{debug, info, warn};
+use prost::Message;
+use prost_reflect::{DescriptorPool, DynamicMessage, MethodDescriptor, ReflectMessage, Value};
+use prost_types::{FileDescriptorProto, FileDescriptorSet};
+use std::collections::{BTreeMap, HashSet};
+use std::env::temp_dir;
+use std::ops::Deref;
+use std::path::{Path, PathBuf};
+use std::str::FromStr;
+use std::sync::Arc;
+use tokio::fs;
+use tokio::sync::RwLock;
+use tonic::codegen::http::uri::PathAndQuery;
+use tonic::transport::Uri;
+use tonic_reflection::pb::v1::server_reflection_request::MessageRequest;
+use tonic_reflection::pb::v1::server_reflection_response::MessageResponse;
+use yaak_common::command::new_xplatform_command;
+use yaak_tls::ClientCertificateConfig;
+
+pub async fn fill_pool_from_files(
+    config: &GrpcConfig,
+    paths: &Vec<PathBuf>,
+) -> Result<DescriptorPool> {
+    let mut pool = DescriptorPool::new();
+    let random_file_name = format!("{}.desc", uuid::Uuid::new_v4());
+    let desc_path = temp_dir().join(random_file_name);
+
+    // HACK: Remove UNC prefix for Windows paths
+    let global_import_dir =
+        dunce::simplified(config.protoc_include_dir.as_path()).to_string_lossy().to_string();
+    let desc_path = dunce::simplified(desc_path.as_path());
+
+    let mut args = vec![
+        "--include_imports".to_string(),
+        "--include_source_info".to_string(),
+        "-I".to_string(),
+        global_import_dir,
+        "-o".to_string(),
+        desc_path.to_string_lossy().to_string(),
+    ];
+
+    let mut include_dirs = HashSet::new();
+    let mut include_protos = HashSet::new();
+
+    for p in paths {
+        if !p.exists() {
+            continue;
+        }
+
+        // Dirs are added as includes
+        if p.is_dir() {
+            include_dirs.insert(p.to_string_lossy().to_string());
+            continue;
+        }
+
+        let parent = p.as_path().parent();
+        if let Some(parent_path) = parent {
+            match find_parent_proto_dir(parent_path) {
+                None => {
+                    // Add parent/grandparent as fallback
+                    include_dirs.insert(parent_path.to_string_lossy().to_string());
+                    if let Some(grandparent_path) = parent_path.parent() {
+                        include_dirs.insert(grandparent_path.to_string_lossy().to_string());
+                    }
+                }
+                Some(p) => {
+                    include_dirs.insert(p.to_string_lossy().to_string());
+                }
+            };
+        } else {
+            debug!("ignoring {:?} since it does not exist.", parent)
+        }
+
+        include_protos.insert(p.to_string_lossy().to_string());
+    }
+
+    for d in include_dirs.clone() {
+        args.push("-I".to_string());
+        args.push(d);
+    }
+    for p in include_protos.clone() {
+        args.push(p);
+    }
+
+    info!("Invoking protoc with {}", args.join(" "));
+
+    let mut cmd = new_xplatform_command(&config.protoc_bin_path);
+    cmd.args(&args);
+
+    let out =
+        cmd.output().await.map_err(|e| GenericError(format!("Failed to run protoc: {}", e)))?;
+
+    if !out.status.success() {
+        return Err(GenericError(format!(
+            "protoc failed with status {}: {}",
+            out.status.code().unwrap_or(-1),
+            String::from_utf8_lossy(out.stderr.as_slice())
+        )));
+    }
+
+    let bytes = fs::read(desc_path).await?;
+    let fdp = FileDescriptorSet::decode(bytes.deref())?;
+    pool.add_file_descriptor_set(fdp)?;
+
+    fs::remove_file(desc_path).await?;
+
+    Ok(pool)
+}
+
+pub async fn fill_pool_from_reflection(
+    uri: &Uri,
+    metadata: &BTreeMap<String, String>,
+    validate_certificates: bool,
+    client_cert: Option<ClientCertificateConfig>,
+    max_message_size: usize,
+) -> Result<DescriptorPool> {
+    let mut pool = DescriptorPool::new();
+    let mut client =
+        AutoReflectionClient::new(uri, validate_certificates, client_cert, max_message_size)?;
+
+    for service in list_services(&mut client, metadata).await? {
+        if service == "grpc.reflection.v1alpha.ServerReflection" {
+            continue;
+        }
+        if service == "grpc.reflection.v1.ServerReflection" {
+            continue;
+        }
+        debug!("Fetching descriptors for {}", service);
+        file_descriptor_set_from_service_name(&service, &mut pool, &mut client, metadata).await;
+    }
+
+    Ok(pool)
+}
+
+async fn list_services(
+    client: &mut AutoReflectionClient,
+    metadata: &BTreeMap<String, String>,
+) -> Result<Vec<String>> {
+    let response =
+        client.send_reflection_request(MessageRequest::ListServices("".into()), metadata).await?;
+
+    let list_services_response = match response {
+        MessageResponse::ListServicesResponse(resp) => resp,
+        _ => panic!("Expected a ListServicesResponse variant"),
+    };
+
+    Ok(list_services_response.service.iter().map(|s| s.name.clone()).collect::<Vec<_>>())
+}
+
+async fn file_descriptor_set_from_service_name(
+    service_name: &str,
+    pool: &mut DescriptorPool,
+    client: &mut AutoReflectionClient,
+    metadata: &BTreeMap<String, String>,
+) {
+    let response = match client
+        .send_reflection_request(
+            MessageRequest::FileContainingSymbol(service_name.into()),
+            metadata,
+        )
+        .await
+    {
+        Ok(resp) => resp,
+        Err(e) => {
+            warn!("Error fetching file descriptor for service {}: {:?}", service_name, e);
+            return;
+        }
+    };
+
+    let file_descriptor_response = match response {
+        MessageResponse::FileDescriptorResponse(resp) => resp,
+        _ => panic!("Expected a FileDescriptorResponse variant"),
+    };
+
+    add_file_descriptors_to_pool(
+        file_descriptor_response.file_descriptor_proto,
+        pool,
+        client,
+        metadata,
+    )
+    .await;
+}
+
+pub(crate) async fn reflect_types_for_message(
+    pool: Arc<RwLock<DescriptorPool>>,
+    uri: &Uri,
+    json: &str,
+    metadata: &BTreeMap<String, String>,
+    client_cert: Option<ClientCertificateConfig>,
+    max_message_size: usize,
+) -> Result<()> {
+    // 1. Collect all Any types in the JSON
+    let mut extra_types = Vec::new();
+    collect_any_types(json, &mut extra_types);
+
+    if extra_types.is_empty() {
+        return Ok(()); // nothing to do
+    }
+
+    let mut client = AutoReflectionClient::new(uri, false, client_cert, max_message_size)?;
+    for extra_type in extra_types {
+        {
+            let guard = pool.read().await;
+            if guard.get_message_by_name(&extra_type).is_some() {
+                continue;
+            }
+        }
+        info!("Adding file descriptor for {:?} from reflection", extra_type);
+        let req = MessageRequest::FileContainingSymbol(extra_type.clone().into());
+        let resp = match client.send_reflection_request(req, metadata).await {
+            Ok(r) => r,
+            Err(e) => {
+                return Err(GenericError(format!(
+                    "Error sending reflection request for @type \"{extra_type}\": {e:?}",
+                )));
+            }
+        };
+        let files = match resp {
+            MessageResponse::FileDescriptorResponse(resp) => resp.file_descriptor_proto,
+            _ => panic!("Expected a FileDescriptorResponse variant"),
+        };
+
+        {
+            let mut guard = pool.write().await;
+            add_file_descriptors_to_pool(files, &mut *guard, &mut client, metadata).await;
+        }
+    }
+
+    Ok(())
+}
+
+pub(crate) async fn reflect_types_for_dynamic_message(
+    pool: Arc<RwLock<DescriptorPool>>,
+    uri: &Uri,
+    message: &DynamicMessage,
+    metadata: &BTreeMap<String, String>,
+    client_cert: Option<ClientCertificateConfig>,
+    max_message_size: usize,
+) -> Result<()> {
+    let mut extra_types = HashSet::new();
+    collect_any_types_from_dynamic_message(message, &mut extra_types);
+
+    if extra_types.is_empty() {
+        return Ok(());
+    }
+
+    let mut client = AutoReflectionClient::new(uri, false, client_cert, max_message_size)?;
+    for extra_type in extra_types {
+        {
+            let guard = pool.read().await;
+            if guard.get_message_by_name(&extra_type).is_some() {
+                continue;
+            }
+        }
+        info!("Adding response file descriptor for {:?} from reflection", extra_type);
+        let req = MessageRequest::FileContainingSymbol(extra_type.clone().into());
+        let resp = match client.send_reflection_request(req, metadata).await {
+            Ok(r) => r,
+            Err(e) => {
+                return Err(GenericError(format!(
+                    "Error sending reflection request for response @type \"{extra_type}\": {e:?}",
+                )));
+            }
+        };
+        let files = match resp {
+            MessageResponse::FileDescriptorResponse(resp) => resp.file_descriptor_proto,
+            _ => panic!("Expected a FileDescriptorResponse variant"),
+        };
+
+        {
+            let mut guard = pool.write().await;
+            add_file_descriptors_to_pool(files, &mut *guard, &mut client, metadata).await;
+        }
+    }
+
+    Ok(())
+}
+
+fn collect_any_types_from_dynamic_message(message: &DynamicMessage, out: &mut HashSet<String>) {
+    if message.descriptor().full_name() == "google.protobuf.Any" {
+        if let Some(Value::String(type_url)) = message.get_field_by_name("type_url").as_deref() {
+            if let Some(full_name) = type_url.rsplit_once('/').map(|(_, name)| name) {
+                out.insert(full_name.to_string());
+            }
+        }
+    }
+
+    for (_, value) in message.fields() {
+        collect_any_types_from_value(value, out);
+    }
+}
+
+fn collect_any_types_from_value(value: &Value, out: &mut HashSet<String>) {
+    match value {
+        Value::Message(message) => collect_any_types_from_dynamic_message(message, out),
+        Value::List(values) => {
+            for value in values {
+                collect_any_types_from_value(value, out);
+            }
+        }
+        Value::Map(values) => {
+            for value in values.values() {
+                collect_any_types_from_value(value, out);
+            }
+        }
+        _ => {}
+    }
+}
+
+#[async_recursion]
+pub(crate) async fn add_file_descriptors_to_pool(
+    fds: Vec<Vec<u8>>,
+    pool: &mut DescriptorPool,
+    client: &mut AutoReflectionClient,
+    metadata: &BTreeMap<String, String>,
+) {
+    let mut topo_sort = topology::SimpleTopoSort::new();
+    let mut fd_mapping = std::collections::HashMap::with_capacity(fds.len());
+
+    for fd in fds {
+        let fdp = FileDescriptorProto::decode(fd.deref()).unwrap();
+
+        topo_sort.insert(fdp.name().to_string(), fdp.dependency.clone());
+        fd_mapping.insert(fdp.name().to_string(), fdp);
+    }
+
+    for node in topo_sort {
+        match node {
+            Ok(node) => {
+                if let Some(fdp) = fd_mapping.remove(&node) {
+                    pool.add_file_descriptor_proto(fdp).expect("add file descriptor proto");
+                } else {
+                    file_descriptor_set_by_filename(node.as_str(), pool, client, metadata).await;
+                }
+            }
+            Err(_) => panic!("proto file got cycle!"),
+        }
+    }
+}
+
+async fn file_descriptor_set_by_filename(
+    filename: &str,
+    pool: &mut DescriptorPool,
+    client: &mut AutoReflectionClient,
+    metadata: &BTreeMap<String, String>,
+) {
+    // We already fetched this file
+    if let Some(_) = pool.get_file_by_name(filename) {
+        return;
+    }
+
+    let msg = MessageRequest::FileByFilename(filename.into());
+    let response = client.send_reflection_request(msg, metadata).await;
+    let file_descriptor_response = match response {
+        Ok(MessageResponse::FileDescriptorResponse(resp)) => resp,
+        Ok(_) => {
+            panic!("Expected a FileDescriptorResponse variant")
+        }
+        Err(e) => {
+            warn!("Error fetching file descriptor for {}: {:?}", filename, e);
+            return;
+        }
+    };
+
+    add_file_descriptors_to_pool(
+        file_descriptor_response.file_descriptor_proto,
+        pool,
+        client,
+        metadata,
+    )
+    .await;
+}
+
+pub fn method_desc_to_path(md: &MethodDescriptor) -> PathAndQuery {
+    let full_name = md.full_name();
+    let (namespace, method_name) = full_name
+        .rsplit_once('.')
+        .ok_or_else(|| anyhow!("invalid method path"))
+        .expect("invalid method path");
+    PathAndQuery::from_str(&format!("/{}/{}", namespace, method_name)).expect("invalid method path")
+}
+
+mod topology {
+    use std::collections::{HashMap, HashSet};
+
+    pub struct SimpleTopoSort<T> {
+        out_graph: HashMap<T, HashSet<T>>,
+        in_graph: HashMap<T, HashSet<T>>,
+    }
+
+    impl<T> SimpleTopoSort<T>
+    where
+        T: Eq + std::hash::Hash + Clone,
+    {
+        pub fn new() -> Self {
+            SimpleTopoSort { out_graph: HashMap::new(), in_graph: HashMap::new() }
+        }
+
+        pub fn insert<I: IntoIterator<Item = T>>(&mut self, node: T, deps: I) {
+            self.out_graph.entry(node.clone()).or_insert(HashSet::new());
+            for dep in deps {
+                self.out_graph.entry(node.clone()).or_insert(HashSet::new()).insert(dep.clone());
+                self.in_graph.entry(dep.clone()).or_insert(HashSet::new()).insert(node.clone());
+            }
+        }
+    }
+
+    impl<T> IntoIterator for SimpleTopoSort<T>
+    where
+        T: Eq + std::hash::Hash + Clone,
+    {
+        type Item = <SimpleTopoSortIter<T> as Iterator>::Item;
+        type IntoIter = SimpleTopoSortIter<T>;
+
+        fn into_iter(self) -> Self::IntoIter {
+            SimpleTopoSortIter::new(self)
+        }
+    }
+
+    pub struct SimpleTopoSortIter<T> {
+        data: SimpleTopoSort<T>,
+        zero_indegree: Vec<T>,
+    }
+
+    impl<T> SimpleTopoSortIter<T>
+    where
+        T: Eq + std::hash::Hash + Clone,
+    {
+        pub fn new(data: SimpleTopoSort<T>) -> Self {
+            let mut zero_indegree = Vec::new();
+            for (node, _) in data.in_graph.iter() {
+                if !data.out_graph.contains_key(node) {
+                    zero_indegree.push(node.clone());
+                }
+            }
+            for (node, deps) in data.out_graph.iter() {
+                if deps.is_empty() {
+                    zero_indegree.push(node.clone());
+                }
+            }
+
+            SimpleTopoSortIter { data, zero_indegree }
+        }
+    }
+
+    impl<T> Iterator for SimpleTopoSortIter<T>
+    where
+        T: Eq + std::hash::Hash + Clone,
+    {
+        type Item = Result<T, &'static str>;
+
+        fn next(&mut self) -> Option<Self::Item> {
+            if self.zero_indegree.is_empty() {
+                if self.data.out_graph.is_empty() {
+                    return None;
+                }
+                return Some(Err("Cycle detected"));
+            }
+
+            let node = self.zero_indegree.pop().unwrap();
+            if let Some(parents) = self.data.in_graph.get(&node) {
+                for parent in parents.iter() {
+                    let deps = self.data.out_graph.get_mut(parent).unwrap();
+                    deps.remove(&node);
+                    if deps.is_empty() {
+                        self.zero_indegree.push(parent.clone());
+                    }
+                }
+            }
+            self.data.out_graph.remove(&node);
+
+            Some(Ok(node))
+        }
+    }
+
+    #[test]
+    fn test_sort() {
+        {
+            let mut topo_sort = SimpleTopoSort::new();
+            topo_sort.insert("a", []);
+
+            for node in topo_sort {
+                match node {
+                    Ok(n) => assert_eq!(n, "a"),
+                    Err(e) => panic!("err {}", e),
+                }
+            }
+        }
+
+        {
+            let mut topo_sort = SimpleTopoSort::new();
+            topo_sort.insert("a", ["b"]);
+            topo_sort.insert("b", []);
+
+            let mut iter = topo_sort.into_iter();
+            match iter.next() {
+                Some(Ok(n)) => assert_eq!(n, "b"),
+                _ => panic!("err"),
+            }
+            match iter.next() {
+                Some(Ok(n)) => assert_eq!(n, "a"),
+                _ => panic!("err"),
+            }
+            assert_eq!(iter.next(), None);
+        }
+    }
+}
+
+fn find_parent_proto_dir(start_path: impl AsRef<Path>) -> Option<PathBuf> {
+    let mut dir = start_path.as_ref().canonicalize().ok()?;
+
+    loop {
+        if let Some(name) = dir.file_name().and_then(|n| n.to_str()) {
+            if name == "proto" {
+                return Some(dir);
+            }
+        }
+
+        let parent = dir.parent()?;
+        if parent == dir {
+            return None; // Reached root
+        }
+
+        dir = parent.to_path_buf();
+    }
+}
diff --git a/crates/yaak-grpc/src/transport.rs b/crates/yaak-grpc/src/transport.rs
new file mode 100644
index 0000000..3e81b68
--- /dev/null
+++ b/crates/yaak-grpc/src/transport.rs
@@ -0,0 +1,40 @@
+use crate::error::Result;
+use hyper_rustls::{HttpsConnector, HttpsConnectorBuilder};
+use hyper_util::client::legacy::Client;
+use hyper_util::client::legacy::connect::HttpConnector;
+use hyper_util::rt::TokioExecutor;
+use log::info;
+use tonic::body::Body;
+use yaak_tls::{ClientCertificateConfig, get_tls_config};
+
+// I think ALPN breaks this because we're specifying http2_only
+const WITH_ALPN: bool = false;
+
+pub(crate) fn get_transport(
+    validate_certificates: bool,
+    client_cert: Option<ClientCertificateConfig>,
+) -> Result<Client<HttpsConnector<HttpConnector>, Body>> {
+    let tls_config = get_tls_config(validate_certificates, WITH_ALPN, client_cert.clone())?;
+
+    let mut http = HttpConnector::new();
+    http.enforce_http(false);
+
+    let connector = HttpsConnectorBuilder::new()
+        .with_tls_config(tls_config)
+        .https_or_http()
+        .enable_http2()
+        .build();
+
+    let client = Client::builder(TokioExecutor::new())
+        .pool_max_idle_per_host(0)
+        .http2_only(true)
+        .build(connector);
+
+    info!(
+        "Created gRPC client validate_certs={} client_cert={}",
+        validate_certificates,
+        client_cert.is_some()
+    );
+
+    Ok(client)
+}
diff --git a/crates/yaak-http/Cargo.toml b/crates/yaak-http/Cargo.toml
new file mode 100644
index 0000000..a6f8ba0
--- /dev/null
+++ b/crates/yaak-http/Cargo.toml
@@ -0,0 +1,43 @@
+[package]
+name = "yaak-http"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+async-compression = { version = "0.4", features = ["tokio", "gzip", "deflate", "brotli", "zstd"] }
+async-trait = "0.1"
+brotli = "7"
+bytes = "1.11.1"
+cookie = "0.18.1"
+flate2 = "1"
+futures-util = "0.3"
+http-body = "1"
+url = "2"
+zstd = "0.13"
+hyper-util = { version = "0.1.17", default-features = false, features = ["client-legacy"] }
+log = { workspace = true }
+mime_guess = "2.0.5"
+native-tls = { version = "0.2", features = ["alpn"] }
+reqwest = { workspace = true, features = [
+  "rustls-no-provider",
+  "native-tls",
+  "socks",
+  "http2",
+  "stream",
+] }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+thiserror = { workspace = true }
+tokio = { workspace = true, features = ["macros", "rt", "fs", "io-util"] }
+tokio-util = { version = "0.7", features = ["codec", "io", "io-util"] }
+tower-service = "0.3.3"
+urlencoding = "2.1.3"
+yaak-common = { workspace = true }
+yaak-models = { workspace = true }
+yaak-templates = { workspace = true }
+yaak-tls = { workspace = true }
+
+[dev-dependencies]
+tempfile = "3"
+tokio = { workspace = true, features = ["net"] }
diff --git a/crates/yaak-http/src/chained_reader.rs b/crates/yaak-http/src/chained_reader.rs
new file mode 100644
index 0000000..7b5f10a
--- /dev/null
+++ b/crates/yaak-http/src/chained_reader.rs
@@ -0,0 +1,78 @@
+use std::io;
+use std::pin::Pin;
+use std::task::{Context, Poll};
+use tokio::io::{AsyncRead, ReadBuf};
+
+/// A stream that chains multiple AsyncRead sources together
+pub(crate) struct ChainedReader {
+    readers: Vec<ReaderType>,
+    current_index: usize,
+    current_reader: Option<Box<dyn AsyncRead + Send + Unpin + 'static>>,
+}
+
+#[derive(Clone)]
+pub(crate) enum ReaderType {
+    Bytes(Vec<u8>),
+    FilePath(String),
+}
+
+impl ChainedReader {
+    pub(crate) fn new(readers: Vec<ReaderType>) -> Self {
+        Self { readers, current_index: 0, current_reader: None }
+    }
+}
+
+impl AsyncRead for ChainedReader {
+    fn poll_read(
+        mut self: Pin<&mut Self>,
+        cx: &mut Context<'_>,
+        buf: &mut ReadBuf<'_>,
+    ) -> Poll<io::Result<()>> {
+        loop {
+            // Try to read from current reader if we have one
+            if let Some(ref mut reader) = self.current_reader {
+                let before_len = buf.filled().len();
+                return match Pin::new(reader).poll_read(cx, buf) {
+                    Poll::Ready(Ok(())) => {
+                        if buf.filled().len() == before_len && buf.remaining() > 0 {
+                            // Current reader is exhausted, move to next
+                            self.current_reader = None;
+                            continue;
+                        }
+                        Poll::Ready(Ok(()))
+                    }
+                    Poll::Ready(Err(e)) => Poll::Ready(Err(e)),
+                    Poll::Pending => Poll::Pending,
+                };
+            }
+
+            // We need to get the next reader
+            if self.current_index >= self.readers.len() {
+                // No more readers
+                return Poll::Ready(Ok(()));
+            }
+
+            // Get the next reader
+            let reader_type = self.readers[self.current_index].clone();
+            self.current_index += 1;
+
+            match reader_type {
+                ReaderType::Bytes(bytes) => {
+                    self.current_reader = Some(Box::new(io::Cursor::new(bytes)));
+                }
+                ReaderType::FilePath(path) => {
+                    // We need to handle file opening synchronously in poll_read
+                    // This is a limitation - we'll use blocking file open
+                    match std::fs::File::open(&path) {
+                        Ok(file) => {
+                            // Convert std File to tokio File
+                            let tokio_file = tokio::fs::File::from_std(file);
+                            self.current_reader = Some(Box::new(tokio_file));
+                        }
+                        Err(e) => return Poll::Ready(Err(e)),
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/crates/yaak-http/src/client.rs b/crates/yaak-http/src/client.rs
new file mode 100644
index 0000000..6a0cddf
--- /dev/null
+++ b/crates/yaak-http/src/client.rs
@@ -0,0 +1,504 @@
+use crate::dns::{AddressFilter, LocalhostResolver};
+use crate::error::Result;
+use log::{debug, info, warn};
+use reqwest::{Client, ClientBuilder, Proxy, redirect};
+use std::sync::{Arc, Mutex};
+use yaak_models::models::{DnsOverride, HttpVersion};
+use yaak_tls::{
+    ClientCertificateConfig, NativeClientIdentity, get_tls_config, load_native_client_identity,
+};
+
+pub const HTTP2_MAX_RESPONSE_HEADER_LIST_SIZE: u32 = 1024 * 1024;
+
+/// hyper caps HTTP/1 responses at 100 headers, which real servers exceed.
+/// https://yaak.app/feedback/posts/when-response-headers-exceed-a-certain-count-hyper-throws-error
+pub const HTTP1_MAX_RESPONSE_HEADERS: usize = 1024;
+
+fn client_builder() -> ClientBuilder {
+    Client::builder()
+        .http2_max_header_list_size(HTTP2_MAX_RESPONSE_HEADER_LIST_SIZE)
+        .http1_max_headers(HTTP1_MAX_RESPONSE_HEADERS)
+}
+
+#[derive(Clone)]
+pub struct ConfiguredClient {
+    inner: Client,
+}
+
+impl ConfiguredClient {
+    pub(crate) fn build_default() -> Result<Self> {
+        Ok(Self { inner: client_builder().build()? })
+    }
+
+    pub(crate) fn from_inner(inner: Client) -> Self {
+        Self { inner }
+    }
+
+    pub(crate) fn inner(&self) -> &Client {
+        &self.inner
+    }
+}
+
+/// Build a native-tls connector for maximum compatibility when certificate
+/// validation is disabled. Unlike rustls, native-tls uses the OS TLS stack
+/// (Secure Transport on macOS, SChannel on Windows, OpenSSL on Linux) which
+/// supports TLS 1.0+ for legacy servers.
+fn build_native_tls_connector(
+    client_cert: Option<ClientCertificateConfig>,
+    http_version: HttpVersion,
+) -> Result<native_tls::TlsConnector> {
+    let mut builder = native_tls::TlsConnector::builder();
+    builder.danger_accept_invalid_certs(true);
+    builder.danger_accept_invalid_hostnames(true);
+    builder.min_protocol_version(Some(native_tls::Protocol::Tlsv10));
+    // reqwest cannot add ALPN to a connector it did not build, so without this
+    // the native path would silently negotiate HTTP/1.1 for every request.
+    match http_version {
+        HttpVersion::Auto => builder.request_alpns(&["h2", "http/1.1"]),
+        HttpVersion::Http1 => builder.request_alpns(&["http/1.1"]),
+        HttpVersion::Http2 => builder.request_alpns(&["h2"]),
+    };
+
+    if let Some(identity) = build_native_tls_identity(client_cert)? {
+        builder.identity(identity);
+    }
+
+    Ok(builder.build()?)
+}
+
+/// Serializes PKCS#12 imports. On macOS native-tls imports every identity into
+/// one process-wide temporary keychain, and it releases its own lock before
+/// importing, so concurrent imports fail with an opaque OSStatus.
+static IDENTITY_IMPORT: Mutex<()> = Mutex::new(());
+
+fn build_native_tls_identity(
+    client_cert: Option<ClientCertificateConfig>,
+) -> Result<Option<native_tls::Identity>> {
+    let Some(material) = load_native_client_identity(client_cert)? else {
+        return Ok(None);
+    };
+
+    let _guard = IDENTITY_IMPORT.lock().unwrap_or_else(|e| e.into_inner());
+    Ok(Some(match material {
+        NativeClientIdentity::Pkcs12 { data, password } => {
+            native_tls::Identity::from_pkcs12(&data, &password)?
+        }
+        NativeClientIdentity::Pkcs8 { chain_pem, key_pem } => {
+            native_tls::Identity::from_pkcs8(&chain_pem, &key_pem)?
+        }
+    }))
+}
+
+#[derive(Clone)]
+pub struct HttpConnectionProxySettingAuth {
+    pub user: String,
+    pub password: String,
+}
+
+#[derive(Clone)]
+pub enum HttpConnectionProxySetting {
+    Disabled,
+    System,
+    Enabled {
+        http: String,
+        https: String,
+        auth: Option<HttpConnectionProxySettingAuth>,
+        bypass: String,
+    },
+}
+
+#[derive(Clone)]
+pub struct HttpConnectionOptions {
+    pub id: String,
+    pub validate_certificates: bool,
+    pub http_version: HttpVersion,
+    pub proxy: HttpConnectionProxySetting,
+    pub client_certificate: Option<ClientCertificateConfig>,
+    pub dns_overrides: Vec<DnsOverride>,
+    /// Refuse connections to addresses a hostname resolves to. `None` means
+    /// every resolved address is connectable, which is what the desktop wants:
+    /// a user sending to their own machine or their own network is the point.
+    /// A hosted sender is the caller that supplies one.
+    pub address_filter: Option<AddressFilter>,
+}
+
+impl HttpConnectionOptions {
+    /// Build a reqwest Client and return it along with the DNS resolver.
+    /// The resolver is returned separately so it can be configured per-request
+    /// to emit DNS timing events to the appropriate channel.
+    pub fn build_client(&self) -> Result<(ConfiguredClient, Arc<LocalhostResolver>)> {
+        let mut client = client_builder()
+            .connection_verbose(true)
+            .redirect(redirect::Policy::none())
+            // Decompression is handled by HttpTransaction, not reqwest
+            .no_gzip()
+            .no_brotli()
+            .no_deflate()
+            .referer(false)
+            .tls_info(true)
+            // Disable connection pooling to ensure DNS resolution happens on each request
+            // This is needed so we can emit DNS timing events for each request
+            .pool_max_idle_per_host(0);
+
+        match self.http_version {
+            HttpVersion::Auto => {}
+            HttpVersion::Http1 => client = client.http1_only(),
+            HttpVersion::Http2 => client = client.http2_prior_knowledge(),
+        }
+
+        // Configure TLS
+        if self.validate_certificates {
+            // Use rustls with platform certificate verification (TLS 1.2+ only)
+            let mut config = get_tls_config(true, true, self.client_certificate.clone())?;
+            // A forced version must also constrain ALPN, or the server may
+            // negotiate a protocol the client then refuses to speak
+            match self.http_version {
+                HttpVersion::Auto => {}
+                HttpVersion::Http1 => config.alpn_protocols = vec![b"http/1.1".to_vec()],
+                HttpVersion::Http2 => config.alpn_protocols = vec![b"h2".to_vec()],
+            }
+            client = client.use_preconfigured_tls(config);
+        } else {
+            // Use native TLS for maximum compatibility (supports TLS 1.0+)
+            let connector =
+                build_native_tls_connector(self.client_certificate.clone(), self.http_version)?;
+            client = client.use_preconfigured_tls(connector);
+        }
+
+        // Configure DNS resolver - keep a reference to configure per-request
+        let resolver = LocalhostResolver::with_address_filter(
+            self.dns_overrides.clone(),
+            self.address_filter.clone(),
+        );
+        client = client.dns_resolver(resolver.clone());
+
+        // Configure proxy
+        match self.proxy.clone() {
+            HttpConnectionProxySetting::System => { /* Default */ }
+            HttpConnectionProxySetting::Disabled => {
+                client = client.no_proxy();
+            }
+            HttpConnectionProxySetting::Enabled { http, https, auth, bypass } => {
+                for p in build_enabled_proxy(http, https, auth, bypass) {
+                    client = client.proxy(p)
+                }
+            }
+        }
+
+        info!(
+            "Building new HTTP client validate_certificates={} client_cert={}",
+            self.validate_certificates,
+            self.client_certificate.is_some()
+        );
+
+        Ok((ConfiguredClient::from_inner(client.build()?), resolver))
+    }
+}
+
+fn build_enabled_proxy(
+    http: String,
+    https: String,
+    auth: Option<HttpConnectionProxySettingAuth>,
+    bypass: String,
+) -> Vec<Proxy> {
+    debug!("Using proxy http={http} https={https} bypass={bypass}");
+
+    let mut proxies = Vec::new();
+
+    if !http.is_empty() {
+        match Proxy::http(http) {
+            Ok(mut proxy) => {
+                if let Some(HttpConnectionProxySettingAuth { user, password }) = auth.clone() {
+                    debug!("Using http proxy auth");
+                    proxy = proxy.basic_auth(user.as_str(), password.as_str());
+                }
+                proxies.push(proxy.no_proxy(reqwest::NoProxy::from_string(&bypass)));
+            }
+            Err(e) => {
+                warn!("Failed to apply http proxy {e:?}");
+            }
+        };
+    }
+
+    if !https.is_empty() {
+        match Proxy::https(https) {
+            Ok(mut proxy) => {
+                if let Some(HttpConnectionProxySettingAuth { user, password }) = auth {
+                    debug!("Using https proxy auth");
+                    proxy = proxy.basic_auth(user.as_str(), password.as_str());
+                }
+                proxies.push(proxy.no_proxy(reqwest::NoProxy::from_string(&bypass)));
+            }
+            Err(e) => {
+                warn!("Failed to apply https proxy {e:?}");
+            }
+        };
+    }
+
+    proxies
+}
+
+#[cfg(test)]
+mod client_certificate_tests {
+    use super::*;
+    use yaak_tls::get_tls_config;
+
+    // Self-signed throwaway certificates, generated only for these tests.
+    const RSA_CRT: &str = r#"-----BEGIN CERTIFICATE-----
+MIIDEzCCAfugAwIBAgIUI3A1FyWKpilH/z1Ehnd68J9bpeEwDQYJKoZIhvcNAQEL
+BQAwGDEWMBQGA1UEAwwNeWFhay10ZXN0LXJzYTAgFw0yNjA4MTQyMDQ2MjRaGA8y
+MTI2MDcyMTIwNDYyNFowGDEWMBQGA1UEAwwNeWFhay10ZXN0LXJzYTCCASIwDQYJ
+KoZIhvcNAQEBBQADggEPADCCAQoCggEBAK6o+exvMUs02ChHi81ILcaDkEaCzgFP
+of6yDTF2m7jU1CUVwAcH4R0OKPetPVVqxPF+b/+LMdIeRIT/F5yaJgzWI6LQGmkZ
+2hBrqQwuHKJq7g01+OuY0nQ13j/6HKRNKGdOiQRsKomMao1tcFYo1QMgD3lvhroO
+Kr+zXPG8BP1T+b3taYyc9apeNaCouVBlY8cHk5/JxDjzOAP2s2oWBUGMSIFdjvQ+
+h0oCJ5MavHXC9mMf/7nUi9bdfClZKfitUOuLiPf4qAjPW0zsyj+6IVzOG69ds5CV
+/yM5B30fZxpRBqOlklisLW3r+aU1X8PsUeNyM31n8HfUzJMN+QBVmAkCAwEAAaNT
+MFEwHQYDVR0OBBYEFBN40FBTuNs2ITuWp54ydZjYEx8YMB8GA1UdIwQYMBaAFBN4
+0FBTuNs2ITuWp54ydZjYEx8YMA8GA1UdEwEB/wQFMAMBAf8wDQYJKoZIhvcNAQEL
+BQADggEBAHdr7OgkQueHqkV31MyZAZQqOkEn6SnNo1lKwCdl5Axby2gNbSCdZLey
+sHoQwEI1nbeRjXhK/Un+UB/aPBSpNTXjh7kLC6EhEj+xL1moUqcxEBxpSHY6awim
+vAqRVnxA9IeZPDQy6si6W7nomaZzvdS5YBEDh9xFwsfbo/HGaHIGtngQwnglVKt2
+XedN38Z71J0ZPPdBcod5trSkJGJwsh5q4i9h1TbLvVT4Am/3IU/WsPldmQs654cn
+Vaj38PL32yhzo2HUUndf+4XRQezQXcqgAZBqJTpZShXXoJuvqYobB9gdeS8HvBoa
+c9aYuXK5sppEg3haLax8XRWjhra/yAI=
+-----END CERTIFICATE-----"#;
+
+    const RSA_PKCS1_KEY: &str = r#"-----BEGIN RSA PRIVATE KEY-----
+MIIEpAIBAAKCAQEArqj57G8xSzTYKEeLzUgtxoOQRoLOAU+h/rINMXabuNTUJRXA
+BwfhHQ4o9609VWrE8X5v/4sx0h5EhP8XnJomDNYjotAaaRnaEGupDC4comruDTX4
+65jSdDXeP/ocpE0oZ06JBGwqiYxqjW1wVijVAyAPeW+Gug4qv7Nc8bwE/VP5ve1p
+jJz1ql41oKi5UGVjxweTn8nEOPM4A/azahYFQYxIgV2O9D6HSgInkxq8dcL2Yx//
+udSL1t18KVkp+K1Q64uI9/ioCM9bTOzKP7ohXM4br12zkJX/IzkHfR9nGlEGo6WS
+WKwtbev5pTVfw+xR43IzfWfwd9TMkw35AFWYCQIDAQABAoIBAATW9PvpR6BrnFr0
+QwM/i4MrbJhgB1cFIIFeL3/Kkf10YyoorjY+VB89g4Lto/++cmOndaoup3blO8HD
+j6hneLzU0dyw/a8+so4kwnL8l1YkdovpcbLVw5dX0cdE/vZYa/wMK4aA7gK0GRvb
+oIuNwCZkjA9x1TXl/PxsXpu/1fc5j/CUj0Kk3f/5Rj5cxM/nLqxVvd+EzVgt9TVv
+fyspUPK0uRz2PK4ZXIVFAbJXVcpV3V3nY7UGjy8OukOVfEbAXtYeSq/eoI4H5Biu
+gS1AnfST8ESe8r4OKl0Ii1sdhVS9etmBx+/EQjyjAGDe9Q38AgJL/6kPR7fuDdvU
+SJ1ZM20CgYEA2NR01F2Yt8Z8/+02v213NPK+WYqFfOq7qusnBYdcibaivbszFNKO
+kAzkaiWs4seou7ga9BbF5/kKjSlx2ud3Ks548IYg6/05XddXdiN4MT2rNn9m3IAm
+zis5Sk/Elhw6HIilBJJgISjQVNj19nq1o2YTCSrvlccZNqn205DAEtUCgYEAzjZT
+8OBaLcF1sEGY7hpVOeOe7377dG5B0ZO3k/q9IeW8f/W0xP6rcxdK+Rdun25Uig9H
+36t2VYpboWTh1adTRUQRgcTFlFjulZilvofvFIgErLpRELqSghrd/O+0e1DPvx1w
+YiMjZ5VMfvoOIvoYrNtgAmRBrkq/ohDvFEIGgmUCgYAPTh/ZBapL/pTAM+xTYtSx
+RhktlNuLT75jeCnO+BkOF3gxUE9wvtQVUvOkkng7ocBFT9+HLzxU/X1DLZO90ezV
+drGOuMkGH1+3QgYIbsSDJUk6lY+bLOiQUPjASBUmS2PGs9aCFhr2/DyIYLAr78l2
+eTQKx58VwXIEK8cic+s66QKBgQC0VdyIvZr/gr0KPAOizpKTwpS+u1zqEHYs8rLL
+ja6TE1cKzHSfBlwnlUoyliRe9tyltAFWAJvG6O2DMjcxYlg3LfTleJCVUEStvMXN
+3xDc8qqr53B3YcI4V4ik53f9k8lqSDN9D1+p+W3haYqtWev0VxEaZlTuOF5oO8jo
+/Wi15QKBgQDOc9FRdEPrW6KEA9QJROjt8vEmElWgJu14KxMpK8Jq6HgZ2/CqC6Hl
+wdphddrz57mWSuJtrAnmbSiiGyw3uUZFSQV8CLW12k5qaulxR9ODdosNjaEjJ/Rl
+yUXONJ+DpurH+/ZzRKM5q1AqMG54EeX/WoCQbBOPB9zfYJJ1AKuZ5g==
+-----END RSA PRIVATE KEY-----"#;
+
+    const RSA_PKCS8_KEY: &str = r#"-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCuqPnsbzFLNNgo
+R4vNSC3Gg5BGgs4BT6H+sg0xdpu41NQlFcAHB+EdDij3rT1VasTxfm//izHSHkSE
+/xecmiYM1iOi0BppGdoQa6kMLhyiau4NNfjrmNJ0Nd4/+hykTShnTokEbCqJjGqN
+bXBWKNUDIA95b4a6Diq/s1zxvAT9U/m97WmMnPWqXjWgqLlQZWPHB5OfycQ48zgD
+9rNqFgVBjEiBXY70PodKAieTGrx1wvZjH/+51IvW3XwpWSn4rVDri4j3+KgIz1tM
+7Mo/uiFczhuvXbOQlf8jOQd9H2caUQajpZJYrC1t6/mlNV/D7FHjcjN9Z/B31MyT
+DfkAVZgJAgMBAAECggEABNb0++lHoGucWvRDAz+LgytsmGAHVwUggV4vf8qR/XRj
+KiiuNj5UHz2Dgu2j/75yY6d1qi6nduU7wcOPqGd4vNTR3LD9rz6yjiTCcvyXViR2
+i+lxstXDl1fRx0T+9lhr/AwrhoDuArQZG9ugi43AJmSMD3HVNeX8/Gxem7/V9zmP
+8JSPQqTd//lGPlzEz+curFW934TNWC31NW9/KylQ8rS5HPY8rhlchUUBsldVylXd
+XedjtQaPLw66Q5V8RsBe1h5Kr96gjgfkGK6BLUCd9JPwRJ7yvg4qXQiLWx2FVL16
+2YHH78RCPKMAYN71DfwCAkv/qQ9Ht+4N29RInVkzbQKBgQDY1HTUXZi3xnz/7Ta/
+bXc08r5ZioV86ruq6ycFh1yJtqK9uzMU0o6QDORqJazix6i7uBr0FsXn+QqNKXHa
+53cqznjwhiDr/Tld11d2I3gxPas2f2bcgCbOKzlKT8SWHDociKUEkmAhKNBU2PX2
+erWjZhMJKu+Vxxk2qfbTkMAS1QKBgQDONlPw4FotwXWwQZjuGlU5457vfvt0bkHR
+k7eT+r0h5bx/9bTE/qtzF0r5F26fblSKD0ffq3ZViluhZOHVp1NFRBGBxMWUWO6V
+mKW+h+8UiASsulEQupKCGt3877R7UM+/HXBiIyNnlUx++g4i+his22ACZEGuSr+i
+EO8UQgaCZQKBgA9OH9kFqkv+lMAz7FNi1LFGGS2U24tPvmN4Kc74GQ4XeDFQT3C+
+1BVS86SSeDuhwEVP34cvPFT9fUMtk73R7NV2sY64yQYfX7dCBghuxIMlSTqVj5ss
+6JBQ+MBIFSZLY8az1oIWGvb8PIhgsCvvyXZ5NArHnxXBcgQrxyJz6zrpAoGBALRV
+3Ii9mv+CvQo8A6LOkpPClL67XOoQdizyssuNrpMTVwrMdJ8GXCeVSjKWJF723KW0
+AVYAm8bo7YMyNzFiWDct9OV4kJVQRK28xc3fENzyqqvncHdhwjhXiKTnd/2TyWpI
+M30PX6n5beFpiq1Z6/RXERpmVO44Xmg7yOj9aLXlAoGBAM5z0VF0Q+tbooQD1AlE
+6O3y8SYSVaAm7XgrEykrwmroeBnb8KoLoeXB2mF12vPnuZZK4m2sCeZtKKIbLDe5
+RkVJBXwItbXaTmpq6XFH04N2iw2NoSMn9GXJRc40n4Om6sf79nNEozmrUCowbngR
+5f9agJBsE48H3N9gknUAq5nm
+-----END PRIVATE KEY-----"#;
+
+    const EC_CRT: &str = r#"-----BEGIN CERTIFICATE-----
+MIIBhTCCASugAwIBAgIUB8703dqXCUOJQbhbyaMUMbVFOjwwCgYIKoZIzj0EAwIw
+FzEVMBMGA1UEAwwMeWFhay10ZXN0LWVjMCAXDTI2MDgxNDIwNDYyNFoYDzIxMjYw
+NzIxMjA0NjI0WjAXMRUwEwYDVQQDDAx5YWFrLXRlc3QtZWMwWTATBgcqhkjOPQIB
+BggqhkjOPQMBBwNCAATCYYKhzgHEaRaGsYVjJSoXvoroL8qe1yeEA0VtfxFzMBg+
++bkPQ0nCtMyFfvQQtXWYIakxzsWJyhI8wPjUj6QSo1MwUTAdBgNVHQ4EFgQUKq40
+Hl+2DziVkBVR/tGsPj9FRo0wHwYDVR0jBBgwFoAUKq40Hl+2DziVkBVR/tGsPj9F
+Ro0wDwYDVR0TAQH/BAUwAwEB/zAKBggqhkjOPQQDAgNIADBFAiEAj1dx5XLl9iCZ
+rD0CW+a3RTluxQ5icXno9WJ9qaS6L08CIFx2t0y9znQr7n5x+SmfXbfZtkDola8e
+8nEZga/HXSeu
+-----END CERTIFICATE-----"#;
+
+    const EC_SEC1_KEY: &str = r#"-----BEGIN EC PRIVATE KEY-----
+MHcCAQEEIIoiiZ/hb4h6eHkZUVBTQFz7KLrVKJqQtWee2ygOjijNoAoGCCqGSM49
+AwEHoUQDQgAEwmGCoc4BxGkWhrGFYyUqF76K6C/KntcnhANFbX8RczAYPvm5D0NJ
+wrTMhX70ELV1mCGpMc7FicoSPMD41I+kEg==
+-----END EC PRIVATE KEY-----"#;
+
+    const EC_PKCS8_KEY: &str = r#"-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgiiKJn+FviHp4eRlR
+UFNAXPsoutUompC1Z57bKA6OKM2hRANCAATCYYKhzgHEaRaGsYVjJSoXvoroL8qe
+1yeEA0VtfxFzMBg++bkPQ0nCtMyFfvQQtXWYIakxzsWJyhI8wPjUj6QS
+-----END PRIVATE KEY-----"#;
+
+    /// Every key format the rustls path accepts, in the encodings users
+    /// actually have on disk.
+    fn key_formats() -> Vec<(&'static str, &'static str, &'static str)> {
+        vec![
+            ("RSA cert with PKCS#8 key", RSA_CRT, RSA_PKCS8_KEY),
+            ("RSA cert with PKCS#1 key", RSA_CRT, RSA_PKCS1_KEY),
+            ("EC cert with PKCS#8 key", EC_CRT, EC_PKCS8_KEY),
+            ("EC cert with SEC1 key", EC_CRT, EC_SEC1_KEY),
+        ]
+    }
+
+    fn write_pair(dir: &tempfile::TempDir, crt: &str, key: &str) -> ClientCertificateConfig {
+        let crt_path = dir.path().join("client.crt");
+        let key_path = dir.path().join("client.key");
+        std::fs::write(&crt_path, crt).unwrap();
+        std::fs::write(&key_path, key).unwrap();
+        ClientCertificateConfig {
+            crt_file: Some(crt_path.to_str().unwrap().to_string()),
+            key_file: Some(key_path.to_str().unwrap().to_string()),
+            pfx_file: None,
+            passphrase: None,
+        }
+    }
+
+    #[test]
+    fn native_tls_accepts_every_format_rustls_accepts() {
+        for (name, crt, key) in key_formats() {
+            let dir = tempfile::TempDir::new().unwrap();
+            let config = write_pair(&dir, crt, key);
+
+            get_tls_config(false, true, Some(config.clone()))
+                .unwrap_or_else(|e| panic!("rustls rejected {name}: {e}"));
+
+            let identity = build_native_tls_identity(Some(config))
+                .unwrap_or_else(|e| panic!("native-tls rejected {name}: {e}"));
+            assert!(identity.is_some(), "no identity built for {name}");
+        }
+    }
+
+    #[test]
+    fn a_leading_header_line_before_the_key_is_tolerated() {
+        let dir = tempfile::TempDir::new().unwrap();
+        let key = format!("Bag Attributes: friendlyName=client\n{RSA_PKCS8_KEY}");
+        let config = write_pair(&dir, RSA_CRT, &key);
+        assert!(build_native_tls_identity(Some(config)).unwrap().is_some());
+    }
+
+    #[test]
+    fn no_identity_is_built_without_a_configured_certificate() {
+        assert!(build_native_tls_identity(None).unwrap().is_none());
+
+        let empty = ClientCertificateConfig {
+            crt_file: Some("".into()),
+            key_file: Some("".into()),
+            pfx_file: Some("".into()),
+            passphrase: None,
+        };
+        assert!(build_native_tls_identity(Some(empty)).unwrap().is_none());
+    }
+}
+
+#[cfg(test)]
+mod header_limit_tests {
+    use super::*;
+    use tokio::io::{AsyncReadExt, AsyncWriteExt};
+    use tokio::net::TcpListener;
+
+    /// Accepts one connection and replies with a response head of exactly
+    /// `total_headers` fields. The trailing `Content-Length` is one of them,
+    /// because hyper counts every field against its limit.
+    async fn serve_response_with_header_count(total_headers: usize) -> String {
+        let listener = TcpListener::bind("127.0.0.1:0").await.unwrap();
+        let addr = listener.local_addr().unwrap();
+
+        tokio::spawn(async move {
+            let (mut socket, _) = listener.accept().await.unwrap();
+
+            // Read the request head so the client is not writing into a closed socket
+            let mut buf = [0u8; 4096];
+            loop {
+                let n = socket.read(&mut buf).await.unwrap();
+                if n == 0 || buf[..n].windows(4).any(|w| w == b"\r\n\r\n") {
+                    break;
+                }
+            }
+
+            let mut response = String::from("HTTP/1.1 200 OK\r\n");
+            for i in 0..total_headers - 1 {
+                response.push_str(&format!("X-Test-{i}: value-{i}\r\n"));
+            }
+            response.push_str("Content-Length: 0\r\n\r\n");
+
+            // A response the client rejects mid-parse closes the socket under
+            // us, so a failed write here is an expected outcome, not a fault
+            let _ = socket.write_all(response.as_bytes()).await;
+            let _ = socket.flush().await;
+        });
+
+        format!("http://{addr}/")
+    }
+
+    fn options() -> HttpConnectionOptions {
+        HttpConnectionOptions {
+            id: "test".to_string(),
+            validate_certificates: true,
+            http_version: HttpVersion::Http1,
+            proxy: HttpConnectionProxySetting::Disabled,
+            client_certificate: None,
+            dns_overrides: Vec::new(),
+            address_filter: None,
+        }
+    }
+
+    /// hyper defaults to 100 header fields per HTTP/1 response and fails the
+    /// whole request past that, which is what users hit in the field.
+    #[tokio::test]
+    async fn responses_with_more_than_100_headers_are_accepted() {
+        let url = serve_response_with_header_count(150).await;
+        let (client, _resolver) = options().build_client().unwrap();
+
+        let response = client
+            .inner()
+            .get(&url)
+            .send()
+            .await
+            .expect("request with 150 response headers should succeed");
+
+        assert_eq!(response.status(), 200);
+        assert_eq!(response.headers().len(), 150);
+        for i in 0..149 {
+            assert_eq!(
+                response.headers().get(format!("x-test-{i}")).unwrap(),
+                format!("value-{i}").as_str(),
+            );
+        }
+    }
+
+    /// Pins both sides of the boundary. The sizes are written out rather than
+    /// derived from `HTTP1_MAX_RESPONSE_HEADERS`, so retuning the limit trips
+    /// this test instead of silently moving with it.
+    #[tokio::test]
+    async fn the_limit_is_exactly_1024_header_fields() {
+        let (client, _resolver) = options().build_client().unwrap();
+
+        let at_limit = serve_response_with_header_count(1024).await;
+        let response = client
+            .inner()
+            .get(&at_limit)
+            .send()
+            .await
+            .expect("a response with 1024 header fields should succeed");
+        assert_eq!(response.headers().len(), 1024);
+
+        let over_limit = serve_response_with_header_count(1025).await;
+        assert!(client.inner().get(&over_limit).send().await.is_err());
+    }
+}
diff --git a/crates/yaak-http/src/cookies.rs b/crates/yaak-http/src/cookies.rs
new file mode 100644
index 0000000..efdddc6
--- /dev/null
+++ b/crates/yaak-http/src/cookies.rs
@@ -0,0 +1,581 @@
+//! Custom cookie handling for HTTP requests
+//!
+//! This module provides cookie storage and matching functionality that was previously
+//! delegated to reqwest. It implements RFC 6265 cookie domain and path matching.
+
+use log::debug;
+use std::sync::{Arc, Mutex};
+use std::time::{Duration, SystemTime, UNIX_EPOCH};
+use url::Url;
+use yaak_models::models::{Cookie, CookieDomain, CookieExpires, CookieSameSite};
+
+/// A thread-safe cookie store that can be shared across requests
+#[derive(Debug, Clone)]
+pub struct CookieStore {
+    cookies: Arc<Mutex<Vec<Cookie>>>,
+}
+
+impl Default for CookieStore {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl CookieStore {
+    /// Create a new empty cookie store
+    pub fn new() -> Self {
+        Self { cookies: Arc::new(Mutex::new(Vec::new())) }
+    }
+
+    /// Create a cookie store from existing cookies
+    pub fn from_cookies(cookies: Vec<Cookie>) -> Self {
+        Self { cookies: Arc::new(Mutex::new(cookies)) }
+    }
+
+    /// Get all cookies (for persistence)
+    pub fn get_all_cookies(&self) -> Vec<Cookie> {
+        self.cookies.lock().unwrap().clone()
+    }
+
+    /// Get the Cookie header value for the given URL
+    pub fn get_cookie_header(&self, url: &Url) -> Option<String> {
+        let cookies = self.cookies.lock().unwrap();
+        let now = SystemTime::now();
+
+        let matching_cookies: Vec<_> = cookies
+            .iter()
+            .filter(|cookie| self.cookie_matches(cookie, url, &now))
+            .map(|cookie| (cookie.name.clone(), cookie.value.clone()))
+            .collect();
+
+        if matching_cookies.is_empty() {
+            None
+        } else {
+            Some(
+                matching_cookies
+                    .into_iter()
+                    .map(|(name, value)| format!("{}={}", name, value))
+                    .collect::<Vec<_>>()
+                    .join("; "),
+            )
+        }
+    }
+
+    /// Parse Set-Cookie headers and add cookies to the store
+    pub fn store_cookies_from_response(&self, url: &Url, set_cookie_headers: &[String]) {
+        let mut cookies = self.cookies.lock().unwrap();
+
+        for header_value in set_cookie_headers {
+            if let Some(cookie) = parse_set_cookie(header_value, url) {
+                // Remove any existing cookie with the same name and domain
+                cookies.retain(|existing| !cookies_match(existing, &cookie));
+                debug!("Storing cookie: {} for domain {:?}", cookie.name, cookie.domain);
+                cookies.push(cookie);
+            }
+        }
+    }
+
+    /// Check if a cookie matches the given URL
+    fn cookie_matches(&self, cookie: &Cookie, url: &Url, now: &SystemTime) -> bool {
+        // Check expiration
+        if let CookieExpires::AtUtc(expiry_str) = &cookie.expires {
+            if let Ok(expiry) = parse_cookie_date(expiry_str) {
+                if expiry < *now {
+                    return false;
+                }
+            }
+        }
+
+        // Check domain
+        let url_host = match url.host_str() {
+            Some(h) => h.to_lowercase(),
+            None => return false,
+        };
+
+        let domain_matches = match &cookie.domain {
+            CookieDomain::HostOnly(domain) => url_host == domain.to_lowercase(),
+            CookieDomain::Suffix(domain) => {
+                let domain_lower = domain.to_lowercase();
+                url_host == domain_lower || url_host.ends_with(&format!(".{}", domain_lower))
+            }
+            // NotPresent and Empty should never occur in practice since we always set domain
+            // when parsing Set-Cookie headers. Treat as non-matching to be safe.
+            CookieDomain::NotPresent | CookieDomain::Empty => false,
+        };
+
+        if !domain_matches {
+            return false;
+        }
+
+        // Check path
+        let url_path = url.path();
+
+        path_matches(url_path, &cookie.path)
+    }
+}
+
+/// Get a stored cookie value by name, optionally scoped to an exact stored domain.
+pub fn get_cookie_value_from_jar(
+    cookies: impl IntoIterator<Item = Cookie>,
+    name: &str,
+    domain: Option<&str>,
+) -> Option<String> {
+    let domain = domain.and_then(normalize_cookie_domain_filter);
+
+    cookies.into_iter().find_map(|cookie| {
+        if cookie.name != name {
+            return None;
+        }
+
+        if let Some(domain) = domain.as_deref() {
+            if !cookie_domain_matches_filter(&cookie.domain, domain) {
+                return None;
+            }
+        }
+
+        Some(cookie.value)
+    })
+}
+
+/// Parse name=value from a cookie string (raw_cookie format)
+#[cfg(test)]
+fn parse_cookie_name_value(raw_cookie: &str) -> Option<(String, String)> {
+    // The raw_cookie typically looks like "name=value" or "name=value; attr1; attr2=..."
+    let first_part = raw_cookie.split(';').next()?;
+    let mut parts = first_part.splitn(2, '=');
+    let name = parts.next()?.trim().to_string();
+    let value = parts.next().unwrap_or("").trim().to_string();
+
+    if name.is_empty() { None } else { Some((name, value)) }
+}
+
+fn normalize_cookie_domain_filter(domain: &str) -> Option<String> {
+    let domain = domain.trim().trim_start_matches('.').to_lowercase();
+    if domain.is_empty() { None } else { Some(domain) }
+}
+
+fn cookie_domain_matches_filter(cookie_domain: &CookieDomain, domain: &str) -> bool {
+    match cookie_domain {
+        CookieDomain::HostOnly(cookie_domain) | CookieDomain::Suffix(cookie_domain) => {
+            normalize_cookie_domain_filter(cookie_domain).is_some_and(|d| d == domain)
+        }
+        CookieDomain::NotPresent | CookieDomain::Empty => false,
+    }
+}
+
+/// Parse a Set-Cookie header into a Cookie
+fn parse_set_cookie(header_value: &str, request_url: &Url) -> Option<Cookie> {
+    let parsed = cookie::Cookie::parse(header_value).ok()?;
+
+    // Determine domain
+    let domain = if let Some(domain_attr) = parsed.domain() {
+        // Domain attribute present - this is a suffix match
+        let domain = domain_attr.trim_start_matches('.').to_lowercase();
+
+        // Reject single-component domains (TLDs) except localhost
+        if is_single_component_domain(&domain) && !is_localhost(&domain) {
+            debug!("Rejecting cookie with single-component domain: {}", domain);
+            return None;
+        }
+
+        CookieDomain::Suffix(domain)
+    } else {
+        // No domain attribute - host-only cookie
+        CookieDomain::HostOnly(request_url.host_str().unwrap_or("").to_lowercase())
+    };
+
+    // Determine expiration
+    let expires = if let Some(max_age) = parsed.max_age() {
+        let duration = Duration::from_secs(max_age.whole_seconds().max(0) as u64);
+        let expiry = SystemTime::now() + duration;
+        let expiry_secs = expiry.duration_since(UNIX_EPOCH).unwrap_or_default().as_secs();
+        CookieExpires::AtUtc(format!("{}", expiry_secs))
+    } else if let Some(expires_time) = parsed.expires() {
+        match expires_time {
+            cookie::Expiration::DateTime(dt) => {
+                let timestamp = dt.unix_timestamp();
+                CookieExpires::AtUtc(format!("{}", timestamp))
+            }
+            cookie::Expiration::Session => CookieExpires::SessionEnd,
+        }
+    } else {
+        CookieExpires::SessionEnd
+    };
+
+    // Determine path
+    let path = if let Some(path_attr) = parsed.path() {
+        path_attr.to_string()
+    } else {
+        // Default path is the directory of the request URI
+        default_cookie_path(request_url.path())
+    };
+
+    let same_site = parsed.same_site().map(|same_site| match same_site {
+        cookie::SameSite::Strict => CookieSameSite::Strict,
+        cookie::SameSite::Lax => CookieSameSite::Lax,
+        cookie::SameSite::None => CookieSameSite::None,
+    });
+
+    Some(Cookie {
+        name: parsed.name().to_string(),
+        value: parsed.value().to_string(),
+        domain,
+        expires,
+        path,
+        secure: parsed.secure().unwrap_or(false),
+        http_only: parsed.http_only().unwrap_or(false),
+        same_site,
+    })
+}
+
+/// Get the default cookie path from a request path (RFC 6265 Section 5.1.4)
+fn default_cookie_path(request_path: &str) -> String {
+    if request_path.is_empty() || !request_path.starts_with('/') {
+        return "/".to_string();
+    }
+
+    // Find the last slash
+    if let Some(last_slash) = request_path.rfind('/') {
+        if last_slash == 0 { "/".to_string() } else { request_path[..last_slash].to_string() }
+    } else {
+        "/".to_string()
+    }
+}
+
+/// Check if a request path matches a cookie path (RFC 6265 Section 5.1.4)
+fn path_matches(request_path: &str, cookie_path: &str) -> bool {
+    if request_path == cookie_path {
+        return true;
+    }
+
+    if request_path.starts_with(cookie_path) {
+        // Cookie path must end with / or the char after cookie_path in request_path must be /
+        if cookie_path.ends_with('/') {
+            return true;
+        }
+        if request_path.chars().nth(cookie_path.len()) == Some('/') {
+            return true;
+        }
+    }
+
+    false
+}
+
+/// Check if two cookies match (same name and domain)
+fn cookies_match(a: &Cookie, b: &Cookie) -> bool {
+    if a.name != b.name {
+        return false;
+    }
+
+    // Check domain match
+    match (&a.domain, &b.domain) {
+        (CookieDomain::HostOnly(d1), CookieDomain::HostOnly(d2)) => {
+            d1.to_lowercase() == d2.to_lowercase()
+        }
+        (CookieDomain::Suffix(d1), CookieDomain::Suffix(d2)) => {
+            d1.to_lowercase() == d2.to_lowercase()
+        }
+        _ => false,
+    }
+}
+
+/// Parse a cookie date string (Unix timestamp in our format)
+fn parse_cookie_date(date_str: &str) -> Result<SystemTime, ()> {
+    let timestamp: i64 = date_str.parse().map_err(|_| ())?;
+    let duration = Duration::from_secs(timestamp.max(0) as u64);
+    Ok(UNIX_EPOCH + duration)
+}
+
+/// Check if a domain is a single-component domain (TLD)
+/// e.g., "com", "org", "net" - domains without any dots
+fn is_single_component_domain(domain: &str) -> bool {
+    // Empty or only dots
+    let trimmed = domain.trim_matches('.');
+    if trimmed.is_empty() {
+        return true;
+    }
+    // IPv6 addresses use colons, not dots - don't consider them single-component
+    if domain.contains(':') {
+        return false;
+    }
+    !trimmed.contains('.')
+}
+
+/// Check if a domain is localhost or a localhost variant
+fn is_localhost(domain: &str) -> bool {
+    let lower = domain.to_lowercase();
+    lower == "localhost"
+        || lower.ends_with(".localhost")
+        || lower == "127.0.0.1"
+        || lower == "::1"
+        || lower == "[::1]"
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn cookie(raw_cookie: &str, domain: CookieDomain) -> Cookie {
+        let (name, value) = parse_cookie_name_value(raw_cookie).unwrap();
+        Cookie {
+            name,
+            value,
+            domain,
+            expires: CookieExpires::SessionEnd,
+            path: "/".to_string(),
+            secure: false,
+            http_only: false,
+            same_site: None,
+        }
+    }
+
+    #[test]
+    fn test_parse_cookie_name_value() {
+        assert_eq!(
+            parse_cookie_name_value("session=abc123"),
+            Some(("session".to_string(), "abc123".to_string()))
+        );
+        assert_eq!(
+            parse_cookie_name_value("name=value; Path=/; HttpOnly"),
+            Some(("name".to_string(), "value".to_string()))
+        );
+        assert_eq!(parse_cookie_name_value("empty="), Some(("empty".to_string(), "".to_string())));
+        assert_eq!(parse_cookie_name_value(""), None);
+    }
+
+    #[test]
+    fn test_path_matches() {
+        assert!(path_matches("/", "/"));
+        assert!(path_matches("/foo", "/"));
+        assert!(path_matches("/foo/bar", "/foo"));
+        assert!(path_matches("/foo/bar", "/foo/"));
+        assert!(!path_matches("/foobar", "/foo"));
+        assert!(!path_matches("/foo", "/foo/bar"));
+    }
+
+    #[test]
+    fn test_default_cookie_path() {
+        assert_eq!(default_cookie_path("/"), "/");
+        assert_eq!(default_cookie_path("/foo"), "/");
+        assert_eq!(default_cookie_path("/foo/bar"), "/foo");
+        assert_eq!(default_cookie_path("/foo/bar/baz"), "/foo/bar");
+        assert_eq!(default_cookie_path(""), "/");
+    }
+
+    #[test]
+    fn test_cookie_store_basic() {
+        let store = CookieStore::new();
+        let url = Url::parse("https://example.com/path").unwrap();
+
+        // Initially empty
+        assert!(store.get_cookie_header(&url).is_none());
+
+        // Add a cookie
+        store.store_cookies_from_response(&url, &["session=abc123".to_string()]);
+
+        // Should now have the cookie
+        let header = store.get_cookie_header(&url);
+        assert_eq!(header, Some("session=abc123".to_string()));
+    }
+
+    #[test]
+    fn test_cookie_domain_matching() {
+        let store = CookieStore::new();
+        let url = Url::parse("https://example.com/").unwrap();
+
+        // Cookie with domain attribute (suffix match)
+        store.store_cookies_from_response(
+            &url,
+            &["domain_cookie=value; Domain=example.com".to_string()],
+        );
+
+        // Should match example.com
+        assert!(store.get_cookie_header(&url).is_some());
+
+        // Should match subdomain
+        let subdomain_url = Url::parse("https://sub.example.com/").unwrap();
+        assert!(store.get_cookie_header(&subdomain_url).is_some());
+
+        // Should not match different domain
+        let other_url = Url::parse("https://other.com/").unwrap();
+        assert!(store.get_cookie_header(&other_url).is_none());
+    }
+
+    #[test]
+    fn test_cookie_path_matching() {
+        let store = CookieStore::new();
+        let url = Url::parse("https://example.com/api/v1").unwrap();
+
+        // Cookie with path
+        store.store_cookies_from_response(&url, &["api_cookie=value; Path=/api".to_string()]);
+
+        // Should match /api/v1
+        assert!(store.get_cookie_header(&url).is_some());
+
+        // Should match /api
+        let api_url = Url::parse("https://example.com/api").unwrap();
+        assert!(store.get_cookie_header(&api_url).is_some());
+
+        // Should not match /other
+        let other_url = Url::parse("https://example.com/other").unwrap();
+        assert!(store.get_cookie_header(&other_url).is_none());
+    }
+
+    #[test]
+    fn test_cookie_replacement() {
+        let store = CookieStore::new();
+        let url = Url::parse("https://example.com/").unwrap();
+
+        // Add a cookie
+        store.store_cookies_from_response(&url, &["session=old".to_string()]);
+        assert_eq!(store.get_cookie_header(&url), Some("session=old".to_string()));
+
+        // Replace with new value
+        store.store_cookies_from_response(&url, &["session=new".to_string()]);
+        assert_eq!(store.get_cookie_header(&url), Some("session=new".to_string()));
+
+        // Should only have one cookie
+        assert_eq!(store.get_all_cookies().len(), 1);
+    }
+
+    #[test]
+    fn test_get_cookie_value_preserves_name_only_first_match() {
+        let cookies = vec![
+            cookie("co-auth=", CookieDomain::HostOnly("foo.example.com".to_string())),
+            cookie("co-auth=token", CookieDomain::Suffix("example.com".to_string())),
+        ];
+
+        assert_eq!(get_cookie_value_from_jar(cookies, "co-auth", None), Some("".to_string()));
+    }
+
+    #[test]
+    fn test_get_cookie_value_matches_domain() {
+        let cookies = vec![
+            cookie("co-auth=", CookieDomain::HostOnly("foo.example.com".to_string())),
+            cookie("co-auth=token", CookieDomain::Suffix("example.com".to_string())),
+        ];
+
+        assert_eq!(
+            get_cookie_value_from_jar(cookies, "co-auth", Some("example.com")),
+            Some("token".to_string())
+        );
+    }
+
+    #[test]
+    fn test_get_cookie_value_normalizes_domain_filter() {
+        let cookies = vec![cookie(
+            "co-auth=token",
+            CookieDomain::Suffix("Example.COM".to_string()),
+        )];
+
+        assert_eq!(
+            get_cookie_value_from_jar(cookies, "co-auth", Some(" .example.com ")),
+            Some("token".to_string())
+        );
+    }
+
+    #[test]
+    fn test_get_cookie_value_requires_exact_stored_domain_match() {
+        let cookies = vec![cookie(
+            "co-auth=token",
+            CookieDomain::HostOnly("foo.example.com".to_string()),
+        )];
+
+        assert_eq!(get_cookie_value_from_jar(cookies, "co-auth", Some("example.com")), None);
+    }
+
+    #[test]
+    fn test_is_single_component_domain() {
+        // Single-component domains (TLDs)
+        assert!(is_single_component_domain("com"));
+        assert!(is_single_component_domain("org"));
+        assert!(is_single_component_domain("net"));
+        assert!(is_single_component_domain("localhost")); // Still single-component, but allowed separately
+
+        // Multi-component domains
+        assert!(!is_single_component_domain("example.com"));
+        assert!(!is_single_component_domain("sub.example.com"));
+        assert!(!is_single_component_domain("co.uk"));
+
+        // Edge cases
+        assert!(is_single_component_domain("")); // Empty is treated as single-component
+        assert!(is_single_component_domain(".")); // Only dots
+        assert!(is_single_component_domain("..")); // Only dots
+
+        // IPv6 addresses (have colons, not dots)
+        assert!(!is_single_component_domain("::1")); // IPv6 localhost
+        assert!(!is_single_component_domain("[::1]")); // Bracketed IPv6
+        assert!(!is_single_component_domain("2001:db8::1")); // IPv6 address
+    }
+
+    #[test]
+    fn test_is_localhost() {
+        // Localhost variants
+        assert!(is_localhost("localhost"));
+        assert!(is_localhost("LOCALHOST")); // Case-insensitive
+        assert!(is_localhost("sub.localhost"));
+        assert!(is_localhost("app.sub.localhost"));
+
+        // IP localhost
+        assert!(is_localhost("127.0.0.1"));
+        assert!(is_localhost("::1"));
+        assert!(is_localhost("[::1]"));
+
+        // Not localhost
+        assert!(!is_localhost("example.com"));
+        assert!(!is_localhost("localhost.com")); // .com domain, not localhost
+        assert!(!is_localhost("notlocalhost"));
+    }
+
+    #[test]
+    fn test_reject_tld_cookies() {
+        let store = CookieStore::new();
+        let url = Url::parse("https://example.com/").unwrap();
+
+        // Try to set a cookie with Domain=com (TLD)
+        store.store_cookies_from_response(&url, &["bad=cookie; Domain=com".to_string()]);
+
+        // Should be rejected - no cookies stored
+        assert_eq!(store.get_all_cookies().len(), 0);
+        assert!(store.get_cookie_header(&url).is_none());
+    }
+
+    #[test]
+    fn test_allow_localhost_cookies() {
+        let store = CookieStore::new();
+        let url = Url::parse("http://localhost:3000/").unwrap();
+
+        // Cookie with Domain=localhost should be allowed
+        store.store_cookies_from_response(&url, &["session=abc; Domain=localhost".to_string()]);
+
+        // Should be accepted
+        assert_eq!(store.get_all_cookies().len(), 1);
+        assert!(store.get_cookie_header(&url).is_some());
+    }
+
+    #[test]
+    fn test_allow_127_0_0_1_cookies() {
+        let store = CookieStore::new();
+        let url = Url::parse("http://127.0.0.1:8080/").unwrap();
+
+        // Cookie without Domain attribute (host-only) should work
+        store.store_cookies_from_response(&url, &["session=xyz".to_string()]);
+
+        // Should be accepted
+        assert_eq!(store.get_all_cookies().len(), 1);
+        assert!(store.get_cookie_header(&url).is_some());
+    }
+
+    #[test]
+    fn test_allow_normal_domain_cookies() {
+        let store = CookieStore::new();
+        let url = Url::parse("https://example.com/").unwrap();
+
+        // Cookie with valid domain should be allowed
+        store.store_cookies_from_response(&url, &["session=abc; Domain=example.com".to_string()]);
+
+        // Should be accepted
+        assert_eq!(store.get_all_cookies().len(), 1);
+        assert!(store.get_cookie_header(&url).is_some());
+    }
+}
diff --git a/crates/yaak-http/src/decompress.rs b/crates/yaak-http/src/decompress.rs
new file mode 100644
index 0000000..e3764ea
--- /dev/null
+++ b/crates/yaak-http/src/decompress.rs
@@ -0,0 +1,188 @@
+use crate::error::{Error, Result};
+use async_compression::tokio::bufread::{
+    BrotliDecoder, DeflateDecoder as AsyncDeflateDecoder, GzipDecoder,
+    ZstdDecoder as AsyncZstdDecoder,
+};
+use flate2::read::{DeflateDecoder, GzDecoder};
+use std::io::Read;
+use tokio::io::{AsyncBufRead, AsyncRead};
+
+/// Supported compression encodings
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum ContentEncoding {
+    Gzip,
+    Deflate,
+    Brotli,
+    Zstd,
+    Identity,
+}
+
+impl ContentEncoding {
+    /// Parse a Content-Encoding header value into an encoding type.
+    /// Returns Identity for unknown or missing encodings.
+    pub fn from_header(value: Option<&str>) -> Self {
+        match value.map(|s| s.trim().to_lowercase()).as_deref() {
+            Some("gzip") | Some("x-gzip") => ContentEncoding::Gzip,
+            Some("deflate") => ContentEncoding::Deflate,
+            Some("br") => ContentEncoding::Brotli,
+            Some("zstd") => ContentEncoding::Zstd,
+            _ => ContentEncoding::Identity,
+        }
+    }
+}
+
+/// Result of decompression, containing both the decompressed data and size info
+#[derive(Debug)]
+pub struct DecompressResult {
+    pub data: Vec<u8>,
+    pub compressed_size: u64,
+    pub decompressed_size: u64,
+}
+
+/// Decompress data based on the Content-Encoding.
+/// Returns the original data unchanged if encoding is Identity or unknown.
+pub fn decompress(data: Vec<u8>, encoding: ContentEncoding) -> Result<DecompressResult> {
+    let compressed_size = data.len() as u64;
+
+    let decompressed = match encoding {
+        ContentEncoding::Identity => data,
+        ContentEncoding::Gzip => decompress_gzip(&data)?,
+        ContentEncoding::Deflate => decompress_deflate(&data)?,
+        ContentEncoding::Brotli => decompress_brotli(&data)?,
+        ContentEncoding::Zstd => decompress_zstd(&data)?,
+    };
+
+    let decompressed_size = decompressed.len() as u64;
+
+    Ok(DecompressResult { data: decompressed, compressed_size, decompressed_size })
+}
+
+fn decompress_gzip(data: &[u8]) -> Result<Vec<u8>> {
+    let mut decoder = GzDecoder::new(data);
+    let mut decompressed = Vec::new();
+    decoder
+        .read_to_end(&mut decompressed)
+        .map_err(|e| Error::DecompressionError(format!("gzip decompression failed: {}", e)))?;
+    Ok(decompressed)
+}
+
+fn decompress_deflate(data: &[u8]) -> Result<Vec<u8>> {
+    let mut decoder = DeflateDecoder::new(data);
+    let mut decompressed = Vec::new();
+    decoder
+        .read_to_end(&mut decompressed)
+        .map_err(|e| Error::DecompressionError(format!("deflate decompression failed: {}", e)))?;
+    Ok(decompressed)
+}
+
+fn decompress_brotli(data: &[u8]) -> Result<Vec<u8>> {
+    let mut decompressed = Vec::new();
+    brotli::BrotliDecompress(&mut std::io::Cursor::new(data), &mut decompressed)
+        .map_err(|e| Error::DecompressionError(format!("brotli decompression failed: {}", e)))?;
+    Ok(decompressed)
+}
+
+fn decompress_zstd(data: &[u8]) -> Result<Vec<u8>> {
+    zstd::stream::decode_all(std::io::Cursor::new(data))
+        .map_err(|e| Error::DecompressionError(format!("zstd decompression failed: {}", e)))
+}
+
+/// Create a streaming decompressor that wraps an async reader.
+/// Returns an AsyncRead that decompresses data on-the-fly.
+pub fn streaming_decoder<R: AsyncBufRead + Unpin + Send + 'static>(
+    reader: R,
+    encoding: ContentEncoding,
+) -> Box<dyn AsyncRead + Unpin + Send> {
+    match encoding {
+        ContentEncoding::Identity => Box::new(reader),
+        ContentEncoding::Gzip => Box::new(GzipDecoder::new(reader)),
+        ContentEncoding::Deflate => Box::new(AsyncDeflateDecoder::new(reader)),
+        ContentEncoding::Brotli => Box::new(BrotliDecoder::new(reader)),
+        ContentEncoding::Zstd => Box::new(AsyncZstdDecoder::new(reader)),
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use flate2::Compression;
+    use flate2::write::GzEncoder;
+    use std::io::Write;
+
+    #[test]
+    fn test_content_encoding_from_header() {
+        assert_eq!(ContentEncoding::from_header(Some("gzip")), ContentEncoding::Gzip);
+        assert_eq!(ContentEncoding::from_header(Some("x-gzip")), ContentEncoding::Gzip);
+        assert_eq!(ContentEncoding::from_header(Some("GZIP")), ContentEncoding::Gzip);
+        assert_eq!(ContentEncoding::from_header(Some("deflate")), ContentEncoding::Deflate);
+        assert_eq!(ContentEncoding::from_header(Some("br")), ContentEncoding::Brotli);
+        assert_eq!(ContentEncoding::from_header(Some("zstd")), ContentEncoding::Zstd);
+        assert_eq!(ContentEncoding::from_header(Some("identity")), ContentEncoding::Identity);
+        assert_eq!(ContentEncoding::from_header(Some("unknown")), ContentEncoding::Identity);
+        assert_eq!(ContentEncoding::from_header(None), ContentEncoding::Identity);
+    }
+
+    #[test]
+    fn test_decompress_identity() {
+        let data = b"hello world".to_vec();
+        let result = decompress(data.clone(), ContentEncoding::Identity).unwrap();
+        assert_eq!(result.data, data);
+        assert_eq!(result.compressed_size, 11);
+        assert_eq!(result.decompressed_size, 11);
+    }
+
+    #[test]
+    fn test_decompress_gzip() {
+        // Compress some data with gzip
+        let original = b"hello world, this is a test of gzip compression";
+        let mut encoder = GzEncoder::new(Vec::new(), Compression::default());
+        encoder.write_all(original).unwrap();
+        let compressed = encoder.finish().unwrap();
+
+        let result = decompress(compressed.clone(), ContentEncoding::Gzip).unwrap();
+        assert_eq!(result.data, original);
+        assert_eq!(result.compressed_size, compressed.len() as u64);
+        assert_eq!(result.decompressed_size, original.len() as u64);
+    }
+
+    #[test]
+    fn test_decompress_deflate() {
+        // Compress some data with deflate
+        let original = b"hello world, this is a test of deflate compression";
+        let mut encoder = flate2::write::DeflateEncoder::new(Vec::new(), Compression::default());
+        encoder.write_all(original).unwrap();
+        let compressed = encoder.finish().unwrap();
+
+        let result = decompress(compressed.clone(), ContentEncoding::Deflate).unwrap();
+        assert_eq!(result.data, original);
+        assert_eq!(result.compressed_size, compressed.len() as u64);
+        assert_eq!(result.decompressed_size, original.len() as u64);
+    }
+
+    #[test]
+    fn test_decompress_brotli() {
+        // Compress some data with brotli
+        let original = b"hello world, this is a test of brotli compression";
+        let mut compressed = Vec::new();
+        let mut writer = brotli::CompressorWriter::new(&mut compressed, 4096, 4, 22);
+        writer.write_all(original).unwrap();
+        drop(writer);
+
+        let result = decompress(compressed.clone(), ContentEncoding::Brotli).unwrap();
+        assert_eq!(result.data, original);
+        assert_eq!(result.compressed_size, compressed.len() as u64);
+        assert_eq!(result.decompressed_size, original.len() as u64);
+    }
+
+    #[test]
+    fn test_decompress_zstd() {
+        // Compress some data with zstd
+        let original = b"hello world, this is a test of zstd compression";
+        let compressed = zstd::stream::encode_all(std::io::Cursor::new(original), 3).unwrap();
+
+        let result = decompress(compressed.clone(), ContentEncoding::Zstd).unwrap();
+        assert_eq!(result.data, original);
+        assert_eq!(result.compressed_size, compressed.len() as u64);
+        assert_eq!(result.decompressed_size, original.len() as u64);
+    }
+}
diff --git a/crates/yaak-http/src/dns.rs b/crates/yaak-http/src/dns.rs
new file mode 100644
index 0000000..913e690
--- /dev/null
+++ b/crates/yaak-http/src/dns.rs
@@ -0,0 +1,225 @@
+use crate::sender::HttpResponseEvent;
+use hyper_util::client::legacy::connect::dns::{
+    GaiResolver as HyperGaiResolver, Name as HyperName,
+};
+use log::info;
+use reqwest::dns::{Addrs, Name, Resolve, Resolving};
+use std::collections::HashMap;
+use std::net::{IpAddr, Ipv4Addr, Ipv6Addr, SocketAddr};
+use std::str::FromStr;
+use std::sync::Arc;
+use std::time::Instant;
+use tokio::sync::{RwLock, mpsc};
+use tower_service::Service;
+use yaak_models::models::DnsOverride;
+
+/// Stores resolved addresses for a hostname override
+#[derive(Clone)]
+pub struct ResolvedOverride {
+    pub ipv4: Vec<Ipv4Addr>,
+    pub ipv6: Vec<Ipv6Addr>,
+}
+
+/// A veto on the addresses a hostname resolves to, consulted after resolution
+/// and before any connection is made. Returning `Err` refuses the whole lookup
+/// with that message; a hostname is never partially allowed.
+///
+/// A hosted sender uses this to refuse private and metadata ranges no matter
+/// what name they hide behind. Checking here rather than on the URL is what
+/// catches a public hostname that resolves to an internal address.
+pub type AddressFilter = Arc<dyn Fn(IpAddr) -> std::result::Result<(), String> + Send + Sync>;
+
+#[derive(Clone)]
+pub struct LocalhostResolver {
+    fallback: HyperGaiResolver,
+    event_tx: Arc<RwLock<Option<mpsc::Sender<HttpResponseEvent>>>>,
+    overrides: Arc<HashMap<String, ResolvedOverride>>,
+    address_filter: Option<AddressFilter>,
+}
+
+impl LocalhostResolver {
+    pub fn new(dns_overrides: Vec<DnsOverride>) -> Arc<Self> {
+        Self::with_address_filter(dns_overrides, None)
+    }
+
+    pub fn with_address_filter(
+        dns_overrides: Vec<DnsOverride>,
+        address_filter: Option<AddressFilter>,
+    ) -> Arc<Self> {
+        let resolver = HyperGaiResolver::new();
+
+        // Pre-parse DNS overrides into a lookup map
+        let mut overrides = HashMap::new();
+        for o in dns_overrides {
+            if !o.enabled {
+                continue;
+            }
+            let hostname = o.hostname.to_lowercase();
+
+            let ipv4: Vec<Ipv4Addr> =
+                o.ipv4.iter().filter_map(|s| s.parse::<Ipv4Addr>().ok()).collect();
+
+            let ipv6: Vec<Ipv6Addr> =
+                o.ipv6.iter().filter_map(|s| s.parse::<Ipv6Addr>().ok()).collect();
+
+            // Only add if at least one address is valid
+            if !ipv4.is_empty() || !ipv6.is_empty() {
+                overrides.insert(hostname, ResolvedOverride { ipv4, ipv6 });
+            }
+        }
+
+        Arc::new(Self {
+            fallback: resolver,
+            event_tx: Arc::new(RwLock::new(None)),
+            overrides: Arc::new(overrides),
+            address_filter,
+        })
+    }
+
+    /// Apply the address filter, if any, to a resolved address list.
+    fn filter_addrs(
+        filter: &Option<AddressFilter>,
+        addrs: &[SocketAddr],
+    ) -> std::result::Result<(), Box<dyn std::error::Error + Send + Sync>> {
+        if let Some(filter) = filter {
+            for addr in addrs {
+                if let Err(reason) = filter(addr.ip()) {
+                    return Err(Box::new(std::io::Error::other(reason)));
+                }
+            }
+        }
+        Ok(())
+    }
+
+    /// Set the event sender for the current request.
+    /// This should be called before each request to direct DNS events
+    /// to the appropriate channel.
+    pub async fn set_event_sender(&self, tx: Option<mpsc::Sender<HttpResponseEvent>>) {
+        let mut guard = self.event_tx.write().await;
+        *guard = tx;
+    }
+}
+
+impl Resolve for LocalhostResolver {
+    fn resolve(&self, name: Name) -> Resolving {
+        let host = name.as_str().to_lowercase();
+        let event_tx = self.event_tx.clone();
+        let overrides = self.overrides.clone();
+        let address_filter = self.address_filter.clone();
+
+        info!("DNS resolve called for: {}", host);
+
+        // Check for DNS override first
+        if let Some(resolved) = overrides.get(&host) {
+            log::debug!("DNS override found for: {}", host);
+            let hostname = host.clone();
+            let mut addrs: Vec<SocketAddr> = Vec::new();
+
+            // Add IPv4 addresses
+            for ip in &resolved.ipv4 {
+                addrs.push(SocketAddr::new(IpAddr::V4(*ip), 0));
+            }
+
+            // Add IPv6 addresses
+            for ip in &resolved.ipv6 {
+                addrs.push(SocketAddr::new(IpAddr::V6(*ip), 0));
+            }
+
+            let addresses: Vec<String> = addrs.iter().map(|a| a.ip().to_string()).collect();
+
+            return Box::pin(async move {
+                Self::filter_addrs(&address_filter, &addrs)?;
+
+                // Emit DNS event for override
+                let guard = event_tx.read().await;
+                if let Some(tx) = guard.as_ref() {
+                    let _ = tx
+                        .send(HttpResponseEvent::DnsResolved {
+                            hostname,
+                            addresses,
+                            duration: 0,
+                            overridden: true,
+                        })
+                        .await;
+                }
+
+                Ok::<Addrs, Box<dyn std::error::Error + Send + Sync>>(Box::new(addrs.into_iter()))
+            });
+        }
+
+        // Check for .localhost suffix
+        let is_localhost = host.ends_with(".localhost");
+        if is_localhost {
+            let hostname = host.clone();
+            // Port 0 is fine; reqwest replaces it with the URL's explicit
+            // port or the scheme's default (80/443, etc.).
+            let addrs: Vec<SocketAddr> = vec![
+                SocketAddr::new(IpAddr::V4(Ipv4Addr::LOCALHOST), 0),
+                SocketAddr::new(IpAddr::V6(Ipv6Addr::LOCALHOST), 0),
+            ];
+
+            let addresses: Vec<String> = addrs.iter().map(|a| a.ip().to_string()).collect();
+
+            return Box::pin(async move {
+                Self::filter_addrs(&address_filter, &addrs)?;
+
+                // Emit DNS event for localhost resolution
+                let guard = event_tx.read().await;
+                if let Some(tx) = guard.as_ref() {
+                    let _ = tx
+                        .send(HttpResponseEvent::DnsResolved {
+                            hostname,
+                            addresses,
+                            duration: 0,
+                            overridden: false,
+                        })
+                        .await;
+                }
+
+                Ok::<Addrs, Box<dyn std::error::Error + Send + Sync>>(Box::new(addrs.into_iter()))
+            });
+        }
+
+        // Fall back to system DNS
+        let mut fallback = self.fallback.clone();
+        let name_str = name.as_str().to_string();
+        let hostname = host.clone();
+
+        Box::pin(async move {
+            let start = Instant::now();
+
+            let result = match HyperName::from_str(&name_str) {
+                Ok(n) => fallback.call(n).await,
+                Err(e) => return Err(Box::new(e) as Box<dyn std::error::Error + Send + Sync>),
+            };
+
+            let duration = start.elapsed().as_millis() as u64;
+
+            match result {
+                Ok(addrs) => {
+                    // Collect addresses for event emission
+                    let addr_vec: Vec<SocketAddr> = addrs.collect();
+                    Self::filter_addrs(&address_filter, &addr_vec)?;
+                    let addresses: Vec<String> =
+                        addr_vec.iter().map(|a| a.ip().to_string()).collect();
+
+                    // Emit DNS event
+                    let guard = event_tx.read().await;
+                    if let Some(tx) = guard.as_ref() {
+                        let _ = tx
+                            .send(HttpResponseEvent::DnsResolved {
+                                hostname,
+                                addresses,
+                                duration,
+                                overridden: false,
+                            })
+                            .await;
+                    }
+
+                    Ok(Box::new(addr_vec.into_iter()) as Addrs)
+                }
+                Err(err) => Err(Box::new(err) as Box<dyn std::error::Error + Send + Sync>),
+            }
+        })
+    }
+}
diff --git a/crates/yaak-http/src/error.rs b/crates/yaak-http/src/error.rs
new file mode 100644
index 0000000..ce72bd1
--- /dev/null
+++ b/crates/yaak-http/src/error.rs
@@ -0,0 +1,43 @@
+use serde::{Serialize, Serializer};
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error("Client error: {0:?}")]
+    Client(#[from] reqwest::Error),
+
+    #[error(transparent)]
+    TlsError(#[from] yaak_tls::error::Error),
+
+    #[error("Native TLS error: {0}")]
+    NativeTlsError(#[from] native_tls::Error),
+
+    #[error("IO error: {0}")]
+    IoError(#[from] std::io::Error),
+
+    #[error("Request failed with {0:?}")]
+    RequestError(String),
+
+    #[error("Request canceled")]
+    RequestCanceledError,
+
+    #[error("Timeout of {0:?} reached")]
+    RequestTimeout(std::time::Duration),
+
+    #[error("Decompression error: {0}")]
+    DecompressionError(String),
+
+    #[error("Failed to read response body: {0}")]
+    BodyReadError(String),
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-http/src/lib.rs b/crates/yaak-http/src/lib.rs
new file mode 100644
index 0000000..2a4155c
--- /dev/null
+++ b/crates/yaak-http/src/lib.rs
@@ -0,0 +1,16 @@
+mod chained_reader;
+pub mod client;
+pub mod cookies;
+pub mod decompress;
+pub mod dns;
+pub mod error;
+pub mod manager;
+mod proto;
+pub mod sender;
+pub mod tee_reader;
+pub mod transaction;
+pub mod types;
+
+// Moved to yaak-models so the browser's wasm host can render requests with the
+// same code; re-exported here so existing callers keep their path.
+pub use yaak_models::path_placeholders;
diff --git a/crates/yaak-http/src/manager.rs b/crates/yaak-http/src/manager.rs
new file mode 100644
index 0000000..a4c3ba5
--- /dev/null
+++ b/crates/yaak-http/src/manager.rs
@@ -0,0 +1,53 @@
+use crate::client::{ConfiguredClient, HttpConnectionOptions};
+use crate::dns::LocalhostResolver;
+use crate::error::Result;
+use std::collections::BTreeMap;
+use std::sync::Arc;
+use std::time::{Duration, Instant};
+use tokio::sync::RwLock;
+
+/// A cached HTTP client along with its DNS resolver.
+/// The resolver is needed to set the event sender per-request.
+pub struct CachedClient {
+    pub client: ConfiguredClient,
+    pub resolver: Arc<LocalhostResolver>,
+}
+
+pub struct HttpConnectionManager {
+    connections: Arc<RwLock<BTreeMap<String, (CachedClient, Instant)>>>,
+    ttl: Duration,
+}
+
+impl HttpConnectionManager {
+    pub fn new() -> Self {
+        Self {
+            connections: Arc::new(RwLock::new(BTreeMap::new())),
+            ttl: Duration::from_secs(10 * 60),
+        }
+    }
+
+    pub async fn get_client(&self, opt: &HttpConnectionOptions) -> Result<CachedClient> {
+        let mut connections = self.connections.write().await;
+        // The key must include any per-request option that changes how the
+        // client is built, or a send after a settings change reuses a client
+        // built with the old value for up to the cache TTL.
+        let id = format!("{}::{}::{}", opt.id, opt.validate_certificates, opt.http_version);
+
+        // Clean old connections
+        connections.retain(|_, (_, last_used)| last_used.elapsed() <= self.ttl);
+
+        if let Some((cached, last_used)) = connections.get_mut(&id) {
+            *last_used = Instant::now();
+            return Ok(CachedClient {
+                client: cached.client.clone(),
+                resolver: cached.resolver.clone(),
+            });
+        }
+
+        let (client, resolver) = opt.build_client()?;
+        let cached = CachedClient { client: client.clone(), resolver: resolver.clone() };
+        connections.insert(id.into(), (cached, Instant::now()));
+
+        Ok(CachedClient { client, resolver })
+    }
+}
diff --git a/crates/yaak-http/src/proto.rs b/crates/yaak-http/src/proto.rs
new file mode 100644
index 0000000..fd36a0e
--- /dev/null
+++ b/crates/yaak-http/src/proto.rs
@@ -0,0 +1,29 @@
+use reqwest::Url;
+use std::str::FromStr;
+
+pub(crate) fn ensure_proto(url_str: &str) -> String {
+    if url_str.is_empty() {
+        return "".to_string();
+    }
+
+    if url_str.starts_with("http://") || url_str.starts_with("https://") {
+        return url_str.to_string();
+    }
+
+    // Url::from_str will fail without a proto, so add one
+    let parseable_url = format!("http://{}", url_str);
+    if let Ok(u) = Url::from_str(parseable_url.as_str()) {
+        match u.host() {
+            Some(host) => {
+                let h = host.to_string();
+                // These TLDs force HTTPS
+                if h.ends_with(".app") || h.ends_with(".dev") || h.ends_with(".page") {
+                    return format!("https://{url_str}");
+                }
+            }
+            None => {}
+        }
+    }
+
+    format!("http://{url_str}")
+}
diff --git a/crates/yaak-http/src/sender.rs b/crates/yaak-http/src/sender.rs
new file mode 100644
index 0000000..2ffdcde
--- /dev/null
+++ b/crates/yaak-http/src/sender.rs
@@ -0,0 +1,641 @@
+use crate::decompress::{ContentEncoding, streaming_decoder};
+use crate::error::{Error, Result};
+use crate::types::{SendableBody, SendableHttpRequest};
+use async_trait::async_trait;
+use bytes::Bytes;
+use futures_util::StreamExt;
+use http_body::{Body as HttpBody, Frame, SizeHint};
+use reqwest::{Method, Version};
+use std::fmt::Display;
+use std::pin::Pin;
+use std::task::{Context, Poll};
+use std::time::Duration;
+use tokio::io::{AsyncRead, AsyncReadExt, BufReader, ReadBuf};
+use tokio::sync::mpsc;
+use tokio_util::io::StreamReader;
+
+#[derive(Debug, Clone)]
+pub enum RedirectBehavior {
+    /// 307/308: Method and body are preserved
+    Preserve,
+    /// 303 or 301/302 with POST: Method changed to GET, body dropped
+    DropBody,
+}
+
+#[derive(Debug, Clone)]
+pub enum HttpResponseEvent {
+    Setting {
+        name: String,
+        value: String,
+        source_model: Option<String>,
+        source_id: Option<String>,
+        source_name: Option<String>,
+    },
+    Info(String),
+    Redirect {
+        url: String,
+        status: u16,
+        behavior: RedirectBehavior,
+        dropped_body: bool,
+        dropped_headers: Vec<String>,
+    },
+    SendUrl {
+        method: String,
+        scheme: String,
+        username: String,
+        password: String,
+        host: String,
+        port: u16,
+        path: String,
+        query: String,
+        fragment: String,
+    },
+    ReceiveUrl {
+        version: Version,
+        status: String,
+    },
+    HeaderUp(String, String),
+    HeaderDown(String, String),
+    ChunkSent {
+        bytes: usize,
+    },
+    ChunkReceived {
+        bytes: usize,
+    },
+    DnsResolved {
+        hostname: String,
+        addresses: Vec<String>,
+        duration: u64,
+        overridden: bool,
+    },
+}
+
+impl Display for HttpResponseEvent {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            HttpResponseEvent::Setting { name, value, .. } => {
+                write!(f, "* Setting {}={}", name, value)
+            }
+            HttpResponseEvent::Info(s) => write!(f, "* {}", s),
+            HttpResponseEvent::Redirect {
+                url,
+                status,
+                behavior,
+                dropped_body,
+                dropped_headers,
+            } => {
+                let behavior_str = match behavior {
+                    RedirectBehavior::Preserve => "preserve",
+                    RedirectBehavior::DropBody => "drop body",
+                };
+                let body_str = if *dropped_body { ", body dropped" } else { "" };
+                let headers_str = if dropped_headers.is_empty() {
+                    String::new()
+                } else {
+                    format!(", headers dropped: {}", dropped_headers.join(", "))
+                };
+                write!(
+                    f,
+                    "* Redirect {} -> {} ({}{}{})",
+                    status, url, behavior_str, body_str, headers_str
+                )
+            }
+            HttpResponseEvent::SendUrl {
+                method,
+                scheme,
+                username,
+                password,
+                host,
+                port,
+                path,
+                query,
+                fragment,
+            } => {
+                let auth_str = if username.is_empty() && password.is_empty() {
+                    String::new()
+                } else {
+                    format!("{}:{}@", username, password)
+                };
+                let query_str =
+                    if query.is_empty() { String::new() } else { format!("?{}", query) };
+                let fragment_str =
+                    if fragment.is_empty() { String::new() } else { format!("#{}", fragment) };
+                write!(
+                    f,
+                    "> {} {}://{}{}:{}{}{}{}",
+                    method, scheme, auth_str, host, port, path, query_str, fragment_str
+                )
+            }
+            HttpResponseEvent::ReceiveUrl { version, status } => {
+                write!(f, "< {} {}", version_to_str(version), status)
+            }
+            HttpResponseEvent::HeaderUp(name, value) => write!(f, "> {}: {}", name, value),
+            HttpResponseEvent::HeaderDown(name, value) => write!(f, "< {}: {}", name, value),
+            HttpResponseEvent::ChunkSent { bytes } => write!(f, "> [{} bytes sent]", bytes),
+            HttpResponseEvent::ChunkReceived { bytes } => write!(f, "< [{} bytes received]", bytes),
+            HttpResponseEvent::DnsResolved { hostname, addresses, duration, overridden } => {
+                if *overridden {
+                    write!(f, "* DNS override {} -> {}", hostname, addresses.join(", "))
+                } else {
+                    write!(
+                        f,
+                        "* DNS resolved {} to {} ({}ms)",
+                        hostname,
+                        addresses.join(", "),
+                        duration
+                    )
+                }
+            }
+        }
+    }
+}
+
+impl From<HttpResponseEvent> for yaak_models::models::HttpResponseEventData {
+    fn from(event: HttpResponseEvent) -> Self {
+        use yaak_models::models::HttpResponseEventData as D;
+        match event {
+            HttpResponseEvent::Setting { name, value, source_model, source_id, source_name } => {
+                D::Setting { name, value, source_model, source_id, source_name }
+            }
+            HttpResponseEvent::Info(message) => D::Info { message },
+            HttpResponseEvent::Redirect {
+                url,
+                status,
+                behavior,
+                dropped_body,
+                dropped_headers,
+            } => D::Redirect {
+                url,
+                status,
+                behavior: match behavior {
+                    RedirectBehavior::Preserve => "preserve".to_string(),
+                    RedirectBehavior::DropBody => "drop_body".to_string(),
+                },
+                dropped_body,
+                dropped_headers,
+            },
+            HttpResponseEvent::SendUrl {
+                method,
+                scheme,
+                username,
+                password,
+                host,
+                port,
+                path,
+                query,
+                fragment,
+            } => {
+                D::SendUrl { method, scheme, username, password, host, port, path, query, fragment }
+            }
+            HttpResponseEvent::ReceiveUrl { version, status } => {
+                D::ReceiveUrl { version: format!("{:?}", version), status }
+            }
+            HttpResponseEvent::HeaderUp(name, value) => D::HeaderUp { name, value },
+            HttpResponseEvent::HeaderDown(name, value) => D::HeaderDown { name, value },
+            HttpResponseEvent::ChunkSent { bytes } => D::ChunkSent { bytes },
+            HttpResponseEvent::ChunkReceived { bytes } => D::ChunkReceived { bytes },
+            HttpResponseEvent::DnsResolved { hostname, addresses, duration, overridden } => {
+                D::DnsResolved { hostname, addresses, duration, overridden }
+            }
+        }
+    }
+}
+
+/// Statistics about the body after consumption
+#[derive(Debug, Default, Clone)]
+pub struct BodyStats {
+    /// Size of the body as received over the wire (before decompression)
+    pub size_compressed: u64,
+    /// Size of the body after decompression
+    pub size_decompressed: u64,
+}
+
+/// An AsyncRead wrapper that sends chunk events as data is read
+pub struct TrackingRead<R> {
+    inner: R,
+    event_tx: mpsc::Sender<HttpResponseEvent>,
+    ended: bool,
+}
+
+impl<R> TrackingRead<R> {
+    pub fn new(inner: R, event_tx: mpsc::Sender<HttpResponseEvent>) -> Self {
+        Self { inner, event_tx, ended: false }
+    }
+}
+
+impl<R: AsyncRead + Unpin> AsyncRead for TrackingRead<R> {
+    fn poll_read(
+        mut self: Pin<&mut Self>,
+        cx: &mut Context<'_>,
+        buf: &mut ReadBuf<'_>,
+    ) -> Poll<std::io::Result<()>> {
+        let before = buf.filled().len();
+        let result = Pin::new(&mut self.inner).poll_read(cx, buf);
+        if let Poll::Ready(Ok(())) = &result {
+            let bytes_read = buf.filled().len() - before;
+            if bytes_read > 0 {
+                // Ignore send errors - receiver may have been dropped or channel is full
+                let _ =
+                    self.event_tx.try_send(HttpResponseEvent::ChunkReceived { bytes: bytes_read });
+            } else if !self.ended {
+                self.ended = true;
+            }
+        }
+        result
+    }
+}
+
+/// Type alias for the body stream
+type BodyStream = Pin<Box<dyn AsyncRead + Send>>;
+
+/// HTTP response with deferred body consumption.
+/// Headers are available immediately after send(), body can be consumed in different ways.
+/// Note: Debug is manually implemented since BodyStream doesn't implement Debug.
+pub struct HttpResponse {
+    /// HTTP status code
+    pub status: u16,
+    /// HTTP status reason phrase (e.g., "OK", "Not Found")
+    pub status_reason: Option<String>,
+    /// Response headers (Vec to support multiple headers with same name, e.g., Set-Cookie)
+    pub headers: Vec<(String, String)>,
+    /// Request headers (Vec to support multiple headers with same name)
+    pub request_headers: Vec<(String, String)>,
+    /// Content-Length from headers (may differ from actual body size)
+    pub content_length: Option<u64>,
+    /// Final URL (after redirects)
+    pub url: String,
+    /// Remote address of the server
+    pub remote_addr: Option<String>,
+    /// HTTP version (e.g., "HTTP/1.1", "HTTP/2")
+    pub version: Option<String>,
+
+    /// The body stream (consumed when calling bytes(), text(), write_to_file(), or drain())
+    body_stream: Option<BodyStream>,
+    /// Content-Encoding for decompression
+    encoding: ContentEncoding,
+}
+
+impl std::fmt::Debug for HttpResponse {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("HttpResponse")
+            .field("status", &self.status)
+            .field("status_reason", &self.status_reason)
+            .field("headers", &self.headers)
+            .field("content_length", &self.content_length)
+            .field("url", &self.url)
+            .field("remote_addr", &self.remote_addr)
+            .field("version", &self.version)
+            .field("body_stream", &"<stream>")
+            .field("encoding", &self.encoding)
+            .finish()
+    }
+}
+
+impl HttpResponse {
+    /// Create a new HttpResponse with an unconsumed body stream
+    #[allow(clippy::too_many_arguments)]
+    pub fn new(
+        status: u16,
+        status_reason: Option<String>,
+        headers: Vec<(String, String)>,
+        request_headers: Vec<(String, String)>,
+        content_length: Option<u64>,
+        url: String,
+        remote_addr: Option<String>,
+        version: Option<String>,
+        body_stream: BodyStream,
+        encoding: ContentEncoding,
+    ) -> Self {
+        Self {
+            status,
+            status_reason,
+            headers,
+            request_headers,
+            content_length,
+            url,
+            remote_addr,
+            version,
+            body_stream: Some(body_stream),
+            encoding,
+        }
+    }
+
+    /// Consume the body and return it as bytes (loads entire body into memory).
+    /// Also decompresses the body if Content-Encoding is set.
+    pub async fn bytes(mut self) -> Result<(Vec<u8>, BodyStats)> {
+        let stream = self.body_stream.take().ok_or_else(|| {
+            Error::RequestError("Response body has already been consumed".to_string())
+        })?;
+
+        let buf_reader = BufReader::new(stream);
+        let mut decoder = streaming_decoder(buf_reader, self.encoding);
+
+        let mut decompressed = Vec::new();
+        let mut bytes_read = 0u64;
+
+        // Read through the decoder in chunks to track compressed size
+        let mut buf = [0u8; 8192];
+        loop {
+            match decoder.read(&mut buf).await {
+                Ok(0) => break,
+                Ok(n) => {
+                    decompressed.extend_from_slice(&buf[..n]);
+                    bytes_read += n as u64;
+                }
+                Err(e) => {
+                    return Err(Error::BodyReadError(e.to_string()));
+                }
+            }
+        }
+
+        let stats = BodyStats {
+            // For now, we can't easily track compressed size when streaming through decoder
+            // Use content_length as an approximation, or decompressed size if identity encoding
+            size_compressed: self.content_length.unwrap_or(bytes_read),
+            size_decompressed: decompressed.len() as u64,
+        };
+
+        Ok((decompressed, stats))
+    }
+
+    /// Consume the body and return it as a UTF-8 string.
+    pub async fn text(self) -> Result<(String, BodyStats)> {
+        let (bytes, stats) = self.bytes().await?;
+        let text = String::from_utf8(bytes)
+            .map_err(|e| Error::RequestError(format!("Response is not valid UTF-8: {}", e)))?;
+        Ok((text, stats))
+    }
+
+    /// Take the body stream for manual consumption.
+    /// Returns an AsyncRead that decompresses on-the-fly if Content-Encoding is set.
+    /// The caller is responsible for reading and processing the stream.
+    pub fn into_body_stream(&mut self) -> Result<Box<dyn AsyncRead + Unpin + Send>> {
+        let stream = self.body_stream.take().ok_or_else(|| {
+            Error::RequestError("Response body has already been consumed".to_string())
+        })?;
+
+        let buf_reader = BufReader::new(stream);
+        let decoder = streaming_decoder(buf_reader, self.encoding);
+
+        Ok(decoder)
+    }
+
+    /// Discard the body without reading it (useful for redirects).
+    pub async fn drain(mut self) -> Result<()> {
+        let stream = self.body_stream.take().ok_or_else(|| {
+            Error::RequestError("Response body has already been consumed".to_string())
+        })?;
+
+        // Just read and discard all bytes
+        let mut reader = stream;
+        let mut buf = [0u8; 8192];
+        loop {
+            match reader.read(&mut buf).await {
+                Ok(0) => break,
+                Ok(_) => continue,
+                Err(e) => {
+                    return Err(Error::RequestError(format!(
+                        "Failed to drain response body: {}",
+                        e
+                    )));
+                }
+            }
+        }
+
+        Ok(())
+    }
+}
+
+/// Trait for sending HTTP requests
+#[async_trait]
+pub trait HttpSender: Send + Sync {
+    /// Send an HTTP request and return the response with headers.
+    /// The body is not consumed until you call bytes(), text(), write_to_file(), or drain().
+    /// Events are sent through the provided channel.
+    async fn send(
+        &self,
+        request: SendableHttpRequest,
+        event_tx: mpsc::Sender<HttpResponseEvent>,
+    ) -> Result<HttpResponse>;
+}
+
+/// Reqwest-based implementation of HttpSender
+pub struct ReqwestSender {
+    client: crate::client::ConfiguredClient,
+}
+
+impl ReqwestSender {
+    /// Create a new ReqwestSender with a default client
+    pub fn new() -> Result<Self> {
+        let client = crate::client::ConfiguredClient::build_default()?;
+        Ok(Self { client })
+    }
+
+    /// Create a new ReqwestSender with a configured client
+    pub fn with_client(client: crate::client::ConfiguredClient) -> Self {
+        Self { client }
+    }
+}
+
+#[async_trait]
+impl HttpSender for ReqwestSender {
+    async fn send(
+        &self,
+        request: SendableHttpRequest,
+        event_tx: mpsc::Sender<HttpResponseEvent>,
+    ) -> Result<HttpResponse> {
+        // Helper to send events (ignores errors if receiver is dropped or channel is full)
+        let send_event = |event: HttpResponseEvent| {
+            let _ = event_tx.try_send(event);
+        };
+
+        // Parse the HTTP method
+        let method = Method::from_bytes(request.method.as_bytes())
+            .map_err(|e| Error::RequestError(format!("Invalid HTTP method: {}", e)))?;
+
+        // Build the request
+        let mut req_builder = self.client.inner().request(method, &request.url);
+
+        // Add headers
+        for header in request.headers {
+            if header.0.is_empty() {
+                continue;
+            }
+            req_builder = req_builder.header(&header.0, &header.1);
+        }
+
+        // Configure timeout
+        if let Some(d) = request.options.timeout
+            && !d.is_zero()
+        {
+            req_builder = req_builder.timeout(d);
+        }
+
+        // Add body
+        match request.body {
+            None => {}
+            Some(SendableBody::Bytes(bytes)) => {
+                req_builder = req_builder.body(bytes);
+            }
+            Some(SendableBody::Stream { data, content_length }) => {
+                // Convert AsyncRead stream to reqwest Body. If content length is
+                // known, wrap with a SizedBody so hyper can set Content-Length
+                // automatically (for both HTTP/1.1 and HTTP/2).
+                let stream = tokio_util::io::ReaderStream::new(data);
+                let body = if let Some(len) = content_length {
+                    reqwest::Body::wrap(SizedBody::new(stream, len))
+                } else {
+                    reqwest::Body::wrap_stream(stream)
+                };
+                req_builder = req_builder.body(body);
+            }
+        }
+
+        // Send the request
+        let sendable_req = req_builder.build()?;
+        send_event(HttpResponseEvent::SendUrl {
+            method: sendable_req.method().to_string(),
+            scheme: sendable_req.url().scheme().to_string(),
+            username: sendable_req.url().username().to_string(),
+            password: sendable_req.url().password().unwrap_or_default().to_string(),
+            host: sendable_req.url().host_str().unwrap_or_default().to_string(),
+            port: sendable_req.url().port_or_known_default().unwrap_or(0),
+            path: sendable_req.url().path().to_string(),
+            query: sendable_req.url().query().unwrap_or_default().to_string(),
+            fragment: sendable_req.url().fragment().unwrap_or_default().to_string(),
+        });
+
+        let mut request_headers = Vec::new();
+        for (name, value) in sendable_req.headers() {
+            let v = value.to_str().unwrap_or_default().to_string();
+            request_headers.push((name.to_string(), v.clone()));
+            send_event(HttpResponseEvent::HeaderUp(name.to_string(), v));
+        }
+        send_event(HttpResponseEvent::Info("Sending request to server".to_string()));
+
+        // Map some errors to our own, so they look nicer
+        let response = self.client.inner().execute(sendable_req).await.map_err(|e| {
+            if reqwest::Error::is_timeout(&e) {
+                Error::RequestTimeout(
+                    request.options.timeout.unwrap_or(Duration::from_secs(0)).clone(),
+                )
+            } else {
+                Error::Client(e)
+            }
+        })?;
+
+        let status = response.status().as_u16();
+        let status_reason = response.status().canonical_reason().map(|s| s.to_string());
+        let url = response.url().to_string();
+        let remote_addr = response.remote_addr().map(|a| a.to_string());
+        let version = Some(version_to_str(&response.version()));
+        let content_length = response.content_length();
+
+        send_event(HttpResponseEvent::ReceiveUrl {
+            version: response.version(),
+            status: response.status().to_string(),
+        });
+
+        // Extract headers (use Vec to preserve duplicates like Set-Cookie)
+        let mut headers = Vec::new();
+        for (key, value) in response.headers() {
+            if let Ok(v) = value.to_str() {
+                send_event(HttpResponseEvent::HeaderDown(key.to_string(), v.to_string()));
+                headers.push((key.to_string(), v.to_string()));
+            }
+        }
+
+        // Determine content encoding for decompression
+        // HTTP headers are case-insensitive, so we need to search for any casing
+        let encoding = ContentEncoding::from_header(
+            headers
+                .iter()
+                .find(|(k, _)| k.eq_ignore_ascii_case("content-encoding"))
+                .map(|(_, v)| v.as_str()),
+        );
+
+        // Get the byte stream instead of loading into memory
+        let byte_stream = response.bytes_stream();
+
+        // Convert the stream to an AsyncRead
+        let stream_reader = StreamReader::new(
+            byte_stream.map(|result| result.map_err(|e| std::io::Error::other(e))),
+        );
+
+        // Wrap the stream with tracking to emit chunk received events via the same channel
+        let tracking_reader = TrackingRead::new(stream_reader, event_tx);
+        let body_stream: BodyStream = Box::pin(tracking_reader);
+
+        Ok(HttpResponse::new(
+            status,
+            status_reason,
+            headers,
+            request_headers,
+            content_length,
+            url,
+            remote_addr,
+            version,
+            body_stream,
+            encoding,
+        ))
+    }
+}
+
+/// A wrapper around a byte stream that reports a known content length via
+/// `size_hint()`. This lets hyper set the `Content-Length` header
+/// automatically based on the body size, without us having to add it as an
+/// explicit header — which can cause duplicate `Content-Length` headers and
+/// break HTTP/2.
+struct SizedBody<S> {
+    stream: std::sync::Mutex<S>,
+    remaining: u64,
+}
+
+impl<S> SizedBody<S> {
+    fn new(stream: S, content_length: u64) -> Self {
+        Self { stream: std::sync::Mutex::new(stream), remaining: content_length }
+    }
+}
+
+impl<S> HttpBody for SizedBody<S>
+where
+    S: futures_util::Stream<Item = std::result::Result<Bytes, std::io::Error>>
+        + Send
+        + Unpin
+        + 'static,
+{
+    type Data = Bytes;
+    type Error = std::io::Error;
+
+    fn poll_frame(
+        self: Pin<&mut Self>,
+        cx: &mut Context<'_>,
+    ) -> Poll<Option<std::result::Result<Frame<Self::Data>, Self::Error>>> {
+        let this = self.get_mut();
+        let mut stream = this.stream.lock().unwrap();
+        match stream.poll_next_unpin(cx) {
+            Poll::Ready(Some(Ok(chunk))) => {
+                this.remaining = this.remaining.saturating_sub(chunk.len() as u64);
+                Poll::Ready(Some(Ok(Frame::data(chunk))))
+            }
+            Poll::Ready(Some(Err(e))) => Poll::Ready(Some(Err(e))),
+            Poll::Ready(None) => Poll::Ready(None),
+            Poll::Pending => Poll::Pending,
+        }
+    }
+
+    fn size_hint(&self) -> SizeHint {
+        SizeHint::with_exact(self.remaining)
+    }
+}
+
+fn version_to_str(version: &Version) -> String {
+    match *version {
+        Version::HTTP_09 => "HTTP/0.9".to_string(),
+        Version::HTTP_10 => "HTTP/1.0".to_string(),
+        Version::HTTP_11 => "HTTP/1.1".to_string(),
+        Version::HTTP_2 => "HTTP/2".to_string(),
+        Version::HTTP_3 => "HTTP/3".to_string(),
+        _ => "unknown".to_string(),
+    }
+}
diff --git a/crates/yaak-http/src/tee_reader.rs b/crates/yaak-http/src/tee_reader.rs
new file mode 100644
index 0000000..2ee7008
--- /dev/null
+++ b/crates/yaak-http/src/tee_reader.rs
@@ -0,0 +1,159 @@
+use std::io;
+use std::pin::Pin;
+use std::task::{Context, Poll};
+use tokio::io::{AsyncRead, ReadBuf};
+use tokio::sync::mpsc;
+
+/// A reader that forwards all read data to a channel while also returning it to the caller.
+/// This allows capturing request body data as it's being sent.
+/// Uses an unbounded channel to ensure all data is captured without blocking the request.
+pub struct TeeReader<R> {
+    inner: R,
+    tx: mpsc::UnboundedSender<Vec<u8>>,
+}
+
+impl<R> TeeReader<R> {
+    pub fn new(inner: R, tx: mpsc::UnboundedSender<Vec<u8>>) -> Self {
+        Self { inner, tx }
+    }
+}
+
+impl<R: AsyncRead + Unpin> AsyncRead for TeeReader<R> {
+    fn poll_read(
+        mut self: Pin<&mut Self>,
+        cx: &mut Context<'_>,
+        buf: &mut ReadBuf<'_>,
+    ) -> Poll<io::Result<()>> {
+        let before_len = buf.filled().len();
+
+        match Pin::new(&mut self.inner).poll_read(cx, buf) {
+            Poll::Ready(Ok(())) => {
+                let after_len = buf.filled().len();
+                if after_len > before_len {
+                    // Data was read, send a copy to the channel
+                    let data = buf.filled()[before_len..after_len].to_vec();
+                    // Send to unbounded channel - this never blocks
+                    // Ignore error if receiver is closed
+                    let _ = self.tx.send(data);
+                }
+                Poll::Ready(Ok(()))
+            }
+            Poll::Ready(Err(e)) => Poll::Ready(Err(e)),
+            Poll::Pending => Poll::Pending,
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::io::Cursor;
+    use tokio::io::AsyncReadExt;
+
+    #[tokio::test]
+    async fn test_tee_reader_captures_all_data() {
+        let data = b"Hello, World!";
+        let cursor = Cursor::new(data.to_vec());
+        let (tx, mut rx) = mpsc::unbounded_channel();
+
+        let mut tee = TeeReader::new(cursor, tx);
+        let mut output = Vec::new();
+        tee.read_to_end(&mut output).await.unwrap();
+
+        // Verify the reader returns the correct data
+        assert_eq!(output, data);
+
+        // Verify the channel received the data
+        let mut captured = Vec::new();
+        while let Ok(chunk) = rx.try_recv() {
+            captured.extend(chunk);
+        }
+        assert_eq!(captured, data);
+    }
+
+    #[tokio::test]
+    async fn test_tee_reader_with_chunked_reads() {
+        let data = b"ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+        let cursor = Cursor::new(data.to_vec());
+        let (tx, mut rx) = mpsc::unbounded_channel();
+
+        let mut tee = TeeReader::new(cursor, tx);
+
+        // Read in small chunks
+        let mut buf = [0u8; 5];
+        let mut output = Vec::new();
+        loop {
+            let n = tee.read(&mut buf).await.unwrap();
+            if n == 0 {
+                break;
+            }
+            output.extend_from_slice(&buf[..n]);
+        }
+
+        // Verify the reader returns the correct data
+        assert_eq!(output, data);
+
+        // Verify the channel received all chunks
+        let mut captured = Vec::new();
+        while let Ok(chunk) = rx.try_recv() {
+            captured.extend(chunk);
+        }
+        assert_eq!(captured, data);
+    }
+
+    #[tokio::test]
+    async fn test_tee_reader_empty_data() {
+        let data: Vec<u8> = vec![];
+        let cursor = Cursor::new(data.clone());
+        let (tx, mut rx) = mpsc::unbounded_channel();
+
+        let mut tee = TeeReader::new(cursor, tx);
+        let mut output = Vec::new();
+        tee.read_to_end(&mut output).await.unwrap();
+
+        // Verify empty output
+        assert!(output.is_empty());
+
+        // Verify no data was sent to channel
+        assert!(rx.try_recv().is_err());
+    }
+
+    #[tokio::test]
+    async fn test_tee_reader_works_when_receiver_dropped() {
+        let data = b"Hello, World!";
+        let cursor = Cursor::new(data.to_vec());
+        let (tx, rx) = mpsc::unbounded_channel();
+
+        // Drop the receiver before reading
+        drop(rx);
+
+        let mut tee = TeeReader::new(cursor, tx);
+        let mut output = Vec::new();
+
+        // Should still work even though receiver is dropped
+        tee.read_to_end(&mut output).await.unwrap();
+        assert_eq!(output, data);
+    }
+
+    #[tokio::test]
+    async fn test_tee_reader_large_data() {
+        // Test with 1MB of data
+        let data: Vec<u8> = (0..1024 * 1024).map(|i| (i % 256) as u8).collect();
+        let cursor = Cursor::new(data.clone());
+        let (tx, mut rx) = mpsc::unbounded_channel();
+
+        let mut tee = TeeReader::new(cursor, tx);
+        let mut output = Vec::new();
+        tee.read_to_end(&mut output).await.unwrap();
+
+        // Verify the reader returns the correct data
+        assert_eq!(output, data);
+
+        // Verify the channel received all data
+        let mut captured = Vec::new();
+        while let Ok(chunk) = rx.try_recv() {
+            captured.extend(chunk);
+        }
+        assert_eq!(captured, data);
+    }
+}
diff --git a/crates/yaak-http/src/transaction.rs b/crates/yaak-http/src/transaction.rs
new file mode 100644
index 0000000..be7ce97
--- /dev/null
+++ b/crates/yaak-http/src/transaction.rs
@@ -0,0 +1,1089 @@
+use crate::cookies::CookieStore;
+use crate::error::Result;
+use crate::sender::{HttpResponse, HttpResponseEvent, HttpSender, RedirectBehavior};
+use crate::types::{SendableBody, SendableHttpRequest};
+use log::debug;
+use tokio::sync::mpsc;
+use tokio::sync::watch::Receiver;
+use url::Url;
+
+/// HTTP Transaction that manages the lifecycle of a request, including redirect handling
+pub struct HttpTransaction<S: HttpSender> {
+    sender: S,
+    max_redirects: usize,
+    cookie_store: Option<CookieStore>,
+    send_cookies: bool,
+    store_cookies: bool,
+}
+
+impl<S: HttpSender> HttpTransaction<S> {
+    /// Create a new transaction with default settings
+    pub fn new(sender: S) -> Self {
+        Self {
+            sender,
+            max_redirects: 10,
+            cookie_store: None,
+            send_cookies: false,
+            store_cookies: false,
+        }
+    }
+
+    /// Create a new transaction with custom max redirects
+    pub fn with_max_redirects(sender: S, max_redirects: usize) -> Self {
+        Self {
+            sender,
+            max_redirects,
+            cookie_store: None,
+            send_cookies: false,
+            store_cookies: false,
+        }
+    }
+
+    /// Create a new transaction with a cookie store
+    pub fn with_cookie_store(sender: S, cookie_store: CookieStore) -> Self {
+        Self {
+            sender,
+            max_redirects: 10,
+            cookie_store: Some(cookie_store),
+            send_cookies: true,
+            store_cookies: true,
+        }
+    }
+
+    /// Create a new transaction with a cookie store and explicit send/store behavior
+    pub fn with_cookie_behavior(
+        sender: S,
+        cookie_store: CookieStore,
+        send_cookies: bool,
+        store_cookies: bool,
+    ) -> Self {
+        Self {
+            sender,
+            max_redirects: 10,
+            cookie_store: Some(cookie_store),
+            send_cookies,
+            store_cookies,
+        }
+    }
+
+    /// Create a new transaction with custom max redirects and a cookie store
+    pub fn with_options(
+        sender: S,
+        max_redirects: usize,
+        cookie_store: Option<CookieStore>,
+    ) -> Self {
+        Self {
+            sender,
+            max_redirects,
+            send_cookies: cookie_store.is_some(),
+            store_cookies: cookie_store.is_some(),
+            cookie_store,
+        }
+    }
+
+    /// Execute the request with cancellation support.
+    /// Returns an HttpResponse with unconsumed body - caller decides how to consume it.
+    /// Events are sent through the provided channel.
+    pub async fn execute_with_cancellation(
+        &self,
+        request: SendableHttpRequest,
+        mut cancelled_rx: Receiver<bool>,
+        event_tx: mpsc::Sender<HttpResponseEvent>,
+    ) -> Result<HttpResponse> {
+        let mut redirect_count = 0;
+        let mut current_url = request.url;
+        let mut current_method = request.method;
+        let mut current_headers = request.headers;
+        let mut current_body = request.body;
+
+        // Helper to send events (ignores errors if receiver is dropped or channel is full)
+        let send_event = |event: HttpResponseEvent| {
+            let _ = event_tx.try_send(event);
+        };
+
+        loop {
+            // Check for cancellation before each request
+            if *cancelled_rx.borrow() {
+                return Err(crate::error::Error::RequestCanceledError);
+            }
+
+            // Inject cookies into headers if we have a cookie store
+            let headers_with_cookies = if self.send_cookies {
+                let mut headers = current_headers.clone();
+                if let (Some(cookie_store), Ok(url)) =
+                    (&self.cookie_store, Url::parse(¤t_url))
+                {
+                    if let Some(cookie_header) = cookie_store.get_cookie_header(&url) {
+                        debug!("Injecting Cookie header: {}", cookie_header);
+                        // Check if there's already a Cookie header and merge if so
+                        if let Some(existing) =
+                            headers.iter_mut().find(|h| h.0.eq_ignore_ascii_case("cookie"))
+                        {
+                            existing.1 = format!("{}; {}", existing.1, cookie_header);
+                        } else {
+                            headers.push(("Cookie".to_string(), cookie_header));
+                        }
+                    }
+                }
+                headers
+            } else {
+                current_headers.clone()
+            };
+
+            // Build request for this iteration
+            let preserved_body = match ¤t_body {
+                Some(SendableBody::Bytes(b)) => Some(SendableBody::Bytes(b.clone())),
+                _ => None,
+            };
+            let request_had_body = current_body.is_some();
+            let req = SendableHttpRequest {
+                url: current_url.clone(),
+                method: current_method.clone(),
+                headers: headers_with_cookies,
+                body: current_body,
+                options: request.options.clone(),
+            };
+
+            // Execute with cancellation support
+            let response = tokio::select! {
+                result = self.sender.send(req, event_tx.clone()) => result?,
+                _ = cancelled_rx.changed() => {
+                    return Err(crate::error::Error::RequestCanceledError);
+                }
+            };
+
+            // Parse Set-Cookie headers and store cookies
+            if self.store_cookies {
+                if let (Some(cookie_store), Ok(url)) =
+                    (&self.cookie_store, Url::parse(¤t_url))
+                {
+                    let set_cookie_headers: Vec<String> = response
+                        .headers
+                        .iter()
+                        .filter(|(k, _)| k.eq_ignore_ascii_case("set-cookie"))
+                        .map(|(_, v)| v.clone())
+                        .collect();
+
+                    if !set_cookie_headers.is_empty() {
+                        debug!("Storing {} cookies from response", set_cookie_headers.len());
+                        cookie_store.store_cookies_from_response(&url, &set_cookie_headers);
+                    }
+                }
+            }
+
+            if !Self::is_redirect(response.status) {
+                // Not a redirect - return the response for caller to consume body
+                return Ok(response);
+            }
+
+            if !request.options.follow_redirects {
+                // Redirects disabled - return the redirect response as-is
+                return Ok(response);
+            }
+
+            // Check if we've exceeded max redirects
+            if redirect_count >= self.max_redirects {
+                // Drain the response before returning error
+                let _ = response.drain().await;
+                return Err(crate::error::Error::RequestError(format!(
+                    "Maximum redirect limit ({}) exceeded",
+                    self.max_redirects
+                )));
+            }
+
+            // Extract Location header before draining (headers are available immediately)
+            // HTTP headers are case-insensitive, so we need to search for any casing
+            let location = response
+                .headers
+                .iter()
+                .find(|(k, _)| k.eq_ignore_ascii_case("location"))
+                .map(|(_, v)| v.clone())
+                .ok_or_else(|| {
+                    crate::error::Error::RequestError(
+                        "Redirect response missing Location header".to_string(),
+                    )
+                })?;
+
+            // Also get status before draining
+            let status = response.status;
+
+            send_event(HttpResponseEvent::Info("Ignoring the response body".to_string()));
+
+            // Drain the redirect response body before following
+            response.drain().await?;
+
+            // Update the request URL
+            let previous_url = current_url.clone();
+            current_url = if location.starts_with("http://") || location.starts_with("https://") {
+                // Absolute URL
+                location
+            } else if location.starts_with('/') {
+                // Absolute path - need to extract base URL from current request
+                let base_url = Self::extract_base_url(¤t_url)?;
+                format!("{}{}", base_url, location)
+            } else {
+                // Relative path - need to resolve relative to current path
+                let base_path = Self::extract_base_path(¤t_url)?;
+                format!("{}/{}", base_path, location)
+            };
+
+            // Determine redirect behavior based on status code and method
+            let behavior = if status == 303 {
+                // 303 See Other always changes to GET
+                RedirectBehavior::DropBody
+            } else if (status == 301 || status == 302) && current_method == "POST" {
+                // For 301/302, change POST to GET (common browser behavior)
+                RedirectBehavior::DropBody
+            } else {
+                // For 307 and 308, the method and body are preserved
+                // Also for 301/302 with non-POST methods
+                RedirectBehavior::Preserve
+            };
+
+            let mut dropped_headers =
+                Self::remove_sensitive_headers(&mut current_headers, &previous_url, ¤t_url);
+
+            // Handle method changes for certain redirect codes
+            if matches!(behavior, RedirectBehavior::DropBody) {
+                if current_method != "GET" {
+                    current_method = "GET".to_string();
+                }
+                // Remove content-related headers
+                current_headers.retain(|h| {
+                    let name_lower = h.0.to_lowercase();
+                    let should_drop =
+                        name_lower.starts_with("content-") || name_lower == "transfer-encoding";
+                    if should_drop {
+                        Self::push_header_if_missing(&mut dropped_headers, &h.0);
+                    }
+                    !should_drop
+                });
+            }
+
+            // Restore body for Preserve redirects (307/308), drop for others.
+            // Stream bodies can't be replayed (same limitation as reqwest).
+            current_body = if matches!(behavior, RedirectBehavior::Preserve) {
+                if request_had_body && preserved_body.is_none() {
+                    // Stream body was consumed and can't be replayed (same as reqwest)
+                    return Err(crate::error::Error::RequestError(
+                        "Cannot follow redirect: request body was a stream and cannot be resent"
+                            .to_string(),
+                    ));
+                }
+                preserved_body
+            } else {
+                None
+            };
+
+            // Body was dropped if the request had one but we can't resend it
+            let dropped_body = request_had_body && current_body.is_none();
+
+            send_event(HttpResponseEvent::Redirect {
+                url: current_url.clone(),
+                status,
+                behavior: behavior.clone(),
+                dropped_body,
+                dropped_headers,
+            });
+
+            redirect_count += 1;
+        }
+    }
+
+    /// Remove sensitive headers when redirecting to a different host.
+    /// This matches reqwest's `remove_sensitive_headers()` behavior and prevents
+    /// credentials from being forwarded to third-party servers (e.g., an
+    /// Authorization header sent from an API redirect to an S3 bucket).
+    fn remove_sensitive_headers(
+        headers: &mut Vec<(String, String)>,
+        previous_url: &str,
+        next_url: &str,
+    ) -> Vec<String> {
+        let mut dropped_headers = Vec::new();
+        let previous_host = Url::parse(previous_url).ok().and_then(|u| {
+            u.host_str().map(|h| format!("{}:{}", h, u.port_or_known_default().unwrap_or(0)))
+        });
+        let next_host = Url::parse(next_url).ok().and_then(|u| {
+            u.host_str().map(|h| format!("{}:{}", h, u.port_or_known_default().unwrap_or(0)))
+        });
+        if previous_host != next_host {
+            headers.retain(|h| {
+                let name_lower = h.0.to_lowercase();
+                let should_drop = name_lower == "authorization"
+                    || name_lower == "cookie"
+                    || name_lower == "cookie2"
+                    || name_lower == "proxy-authorization"
+                    || name_lower == "www-authenticate";
+                if should_drop {
+                    Self::push_header_if_missing(&mut dropped_headers, &h.0);
+                }
+                !should_drop
+            });
+        }
+        dropped_headers
+    }
+
+    fn push_header_if_missing(headers: &mut Vec<String>, name: &str) {
+        if !headers.iter().any(|h| h.eq_ignore_ascii_case(name)) {
+            headers.push(name.to_string());
+        }
+    }
+
+    /// Check if a status code indicates a redirect
+    fn is_redirect(status: u16) -> bool {
+        matches!(status, 301 | 302 | 303 | 307 | 308)
+    }
+
+    /// Extract the base URL (scheme + host) from a full URL
+    fn extract_base_url(url: &str) -> Result<String> {
+        // Find the position after "://"
+        let scheme_end = url.find("://").ok_or_else(|| {
+            crate::error::Error::RequestError(format!("Invalid URL format: {}", url))
+        })?;
+
+        // Find the first '/' after the scheme
+        let path_start = url[scheme_end + 3..].find('/');
+
+        if let Some(idx) = path_start {
+            Ok(url[..scheme_end + 3 + idx].to_string())
+        } else {
+            // No path, return entire URL
+            Ok(url.to_string())
+        }
+    }
+
+    /// Extract the base path (everything except the last segment) from a URL
+    fn extract_base_path(url: &str) -> Result<String> {
+        if let Some(last_slash) = url.rfind('/') {
+            // Don't include the trailing slash if it's part of the host
+            if url[..last_slash].ends_with("://") || url[..last_slash].ends_with(':') {
+                Ok(url.to_string())
+            } else {
+                Ok(url[..last_slash].to_string())
+            }
+        } else {
+            Ok(url.to_string())
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::decompress::ContentEncoding;
+    use crate::sender::{HttpResponseEvent, HttpSender};
+    use async_trait::async_trait;
+    use std::pin::Pin;
+    use std::sync::Arc;
+    use tokio::io::AsyncRead;
+    use tokio::sync::Mutex;
+
+    /// Captured request metadata for test assertions
+    #[derive(Debug, Clone)]
+    #[allow(dead_code)]
+    struct CapturedRequest {
+        url: String,
+        method: String,
+        headers: Vec<(String, String)>,
+    }
+
+    /// Mock sender for testing
+    struct MockSender {
+        responses: Arc<Mutex<Vec<MockResponse>>>,
+        /// Captured requests for assertions
+        captured_requests: Arc<Mutex<Vec<CapturedRequest>>>,
+    }
+
+    struct MockResponse {
+        status: u16,
+        headers: Vec<(String, String)>,
+        body: Vec<u8>,
+    }
+
+    impl MockSender {
+        fn new(responses: Vec<MockResponse>) -> Self {
+            Self {
+                responses: Arc::new(Mutex::new(responses)),
+                captured_requests: Arc::new(Mutex::new(Vec::new())),
+            }
+        }
+    }
+
+    #[async_trait]
+    impl HttpSender for MockSender {
+        async fn send(
+            &self,
+            request: SendableHttpRequest,
+            _event_tx: mpsc::Sender<HttpResponseEvent>,
+        ) -> Result<HttpResponse> {
+            // Capture the request metadata for later assertions
+            self.captured_requests.lock().await.push(CapturedRequest {
+                url: request.url.clone(),
+                method: request.method.clone(),
+                headers: request.headers.clone(),
+            });
+
+            let mut responses = self.responses.lock().await;
+            if responses.is_empty() {
+                Err(crate::error::Error::RequestError("No more mock responses".to_string()))
+            } else {
+                let mock = responses.remove(0);
+                // Create a simple in-memory stream from the body
+                let body_stream: Pin<Box<dyn AsyncRead + Send>> =
+                    Box::pin(std::io::Cursor::new(mock.body));
+                Ok(HttpResponse::new(
+                    mock.status,
+                    None, // status_reason
+                    mock.headers,
+                    Vec::new(),
+                    None,                              // content_length
+                    "https://example.com".to_string(), // url
+                    None,                              // remote_addr
+                    Some("HTTP/1.1".to_string()),      // version
+                    body_stream,
+                    ContentEncoding::Identity,
+                ))
+            }
+        }
+    }
+
+    #[tokio::test]
+    async fn test_transaction_no_redirect() {
+        let response = MockResponse { status: 200, headers: Vec::new(), body: b"OK".to_vec() };
+        let sender = MockSender::new(vec![response]);
+        let transaction = HttpTransaction::new(sender);
+
+        let request = SendableHttpRequest {
+            url: "https://example.com".to_string(),
+            method: "GET".to_string(),
+            headers: vec![],
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await.unwrap();
+        assert_eq!(result.status, 200);
+
+        // Consume the body to verify it
+        let (body, _) = result.bytes().await.unwrap();
+        assert_eq!(body, b"OK");
+    }
+
+    #[tokio::test]
+    async fn test_transaction_single_redirect() {
+        let redirect_headers =
+            vec![("Location".to_string(), "https://example.com/new".to_string())];
+
+        let responses = vec![
+            MockResponse { status: 302, headers: redirect_headers, body: vec![] },
+            MockResponse { status: 200, headers: Vec::new(), body: b"Final".to_vec() },
+        ];
+
+        let sender = MockSender::new(responses);
+        let transaction = HttpTransaction::new(sender);
+
+        let request = SendableHttpRequest {
+            url: "https://example.com/old".to_string(),
+            method: "GET".to_string(),
+            options: crate::types::SendableHttpRequestOptions {
+                follow_redirects: true,
+                ..Default::default()
+            },
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await.unwrap();
+        assert_eq!(result.status, 200);
+
+        let (body, _) = result.bytes().await.unwrap();
+        assert_eq!(body, b"Final");
+    }
+
+    #[tokio::test]
+    async fn test_transaction_max_redirects_exceeded() {
+        let redirect_headers =
+            vec![("Location".to_string(), "https://example.com/loop".to_string())];
+
+        // Create more redirects than allowed
+        let responses: Vec<MockResponse> = (0..12)
+            .map(|_| MockResponse { status: 302, headers: redirect_headers.clone(), body: vec![] })
+            .collect();
+
+        let sender = MockSender::new(responses);
+        let transaction = HttpTransaction::with_max_redirects(sender, 10);
+
+        let request = SendableHttpRequest {
+            url: "https://example.com/start".to_string(),
+            method: "GET".to_string(),
+            options: crate::types::SendableHttpRequestOptions {
+                follow_redirects: true,
+                ..Default::default()
+            },
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await;
+        if let Err(crate::error::Error::RequestError(msg)) = result {
+            assert!(msg.contains("Maximum redirect limit"));
+        } else {
+            panic!("Expected RequestError with max redirect message. Got {result:?}");
+        }
+    }
+
+    #[test]
+    fn test_is_redirect() {
+        assert!(HttpTransaction::<MockSender>::is_redirect(301));
+        assert!(HttpTransaction::<MockSender>::is_redirect(302));
+        assert!(HttpTransaction::<MockSender>::is_redirect(303));
+        assert!(HttpTransaction::<MockSender>::is_redirect(307));
+        assert!(HttpTransaction::<MockSender>::is_redirect(308));
+        assert!(!HttpTransaction::<MockSender>::is_redirect(200));
+        assert!(!HttpTransaction::<MockSender>::is_redirect(404));
+        assert!(!HttpTransaction::<MockSender>::is_redirect(500));
+    }
+
+    #[test]
+    fn test_extract_base_url() {
+        let result =
+            HttpTransaction::<MockSender>::extract_base_url("https://example.com/path/to/resource");
+        assert_eq!(result.unwrap(), "https://example.com");
+
+        let result = HttpTransaction::<MockSender>::extract_base_url("http://localhost:8080/api");
+        assert_eq!(result.unwrap(), "http://localhost:8080");
+
+        let result = HttpTransaction::<MockSender>::extract_base_url("invalid-url");
+        assert!(result.is_err());
+    }
+
+    #[test]
+    fn test_extract_base_path() {
+        let result = HttpTransaction::<MockSender>::extract_base_path(
+            "https://example.com/path/to/resource",
+        );
+        assert_eq!(result.unwrap(), "https://example.com/path/to");
+
+        let result = HttpTransaction::<MockSender>::extract_base_path("https://example.com/single");
+        assert_eq!(result.unwrap(), "https://example.com");
+
+        let result = HttpTransaction::<MockSender>::extract_base_path("https://example.com/");
+        assert_eq!(result.unwrap(), "https://example.com");
+    }
+
+    #[tokio::test]
+    async fn test_cookie_injection() {
+        // Create a mock sender that verifies the Cookie header was injected
+        struct CookieVerifyingSender {
+            expected_cookie: String,
+        }
+
+        #[async_trait]
+        impl HttpSender for CookieVerifyingSender {
+            async fn send(
+                &self,
+                request: SendableHttpRequest,
+                _event_tx: mpsc::Sender<HttpResponseEvent>,
+            ) -> Result<HttpResponse> {
+                // Verify the Cookie header was injected
+                let cookie_header =
+                    request.headers.iter().find(|(k, _)| k.eq_ignore_ascii_case("cookie"));
+
+                assert!(cookie_header.is_some(), "Cookie header should be present");
+                assert!(
+                    cookie_header.unwrap().1.contains(&self.expected_cookie),
+                    "Cookie header should contain expected value"
+                );
+
+                let body_stream: Pin<Box<dyn AsyncRead + Send>> =
+                    Box::pin(std::io::Cursor::new(vec![]));
+                Ok(HttpResponse::new(
+                    200,
+                    None,
+                    Vec::new(),
+                    Vec::new(),
+                    None,
+                    "https://example.com".to_string(),
+                    None,
+                    Some("HTTP/1.1".to_string()),
+                    body_stream,
+                    ContentEncoding::Identity,
+                ))
+            }
+        }
+
+        use yaak_models::models::{Cookie, CookieDomain, CookieExpires};
+
+        // Create a cookie store with a test cookie
+        let cookie = Cookie {
+            name: "session".to_string(),
+            value: "abc123".to_string(),
+            domain: CookieDomain::HostOnly("example.com".to_string()),
+            expires: CookieExpires::SessionEnd,
+            path: "/".to_string(),
+            secure: false,
+            http_only: false,
+            same_site: None,
+        };
+        let cookie_store = CookieStore::from_cookies(vec![cookie]);
+
+        let sender = CookieVerifyingSender { expected_cookie: "session=abc123".to_string() };
+        let transaction = HttpTransaction::with_cookie_store(sender, cookie_store);
+
+        let request = SendableHttpRequest {
+            url: "https://example.com/api".to_string(),
+            method: "GET".to_string(),
+            headers: vec![],
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await;
+        assert!(result.is_ok());
+    }
+
+    #[tokio::test]
+    async fn test_cookie_injection_can_be_disabled() {
+        struct CookieRejectingSender;
+
+        #[async_trait]
+        impl HttpSender for CookieRejectingSender {
+            async fn send(
+                &self,
+                request: SendableHttpRequest,
+                _event_tx: mpsc::Sender<HttpResponseEvent>,
+            ) -> Result<HttpResponse> {
+                let cookie_header =
+                    request.headers.iter().find(|(k, _)| k.eq_ignore_ascii_case("cookie"));
+                assert!(cookie_header.is_none(), "Cookie header should not be present");
+
+                let body_stream: Pin<Box<dyn AsyncRead + Send>> =
+                    Box::pin(std::io::Cursor::new(vec![]));
+                Ok(HttpResponse::new(
+                    200,
+                    None,
+                    Vec::new(),
+                    Vec::new(),
+                    None,
+                    "https://example.com".to_string(),
+                    None,
+                    Some("HTTP/1.1".to_string()),
+                    body_stream,
+                    ContentEncoding::Identity,
+                ))
+            }
+        }
+
+        use yaak_models::models::{Cookie, CookieDomain, CookieExpires};
+
+        let cookie = Cookie {
+            name: "session".to_string(),
+            value: "abc123".to_string(),
+            domain: CookieDomain::HostOnly("example.com".to_string()),
+            expires: CookieExpires::SessionEnd,
+            path: "/".to_string(),
+            secure: false,
+            http_only: false,
+            same_site: None,
+        };
+        let cookie_store = CookieStore::from_cookies(vec![cookie]);
+        let transaction =
+            HttpTransaction::with_cookie_behavior(CookieRejectingSender, cookie_store, false, true);
+
+        let request = SendableHttpRequest {
+            url: "https://example.com/api".to_string(),
+            method: "GET".to_string(),
+            headers: vec![],
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await;
+        assert!(result.is_ok());
+    }
+
+    #[tokio::test]
+    async fn test_set_cookie_parsing() {
+        // Create a cookie store
+        let cookie_store = CookieStore::new();
+
+        // Mock sender that returns a Set-Cookie header
+        struct SetCookieSender;
+
+        #[async_trait]
+        impl HttpSender for SetCookieSender {
+            async fn send(
+                &self,
+                _request: SendableHttpRequest,
+                _event_tx: mpsc::Sender<HttpResponseEvent>,
+            ) -> Result<HttpResponse> {
+                let headers =
+                    vec![("set-cookie".to_string(), "session=xyz789; Path=/".to_string())];
+
+                let body_stream: Pin<Box<dyn AsyncRead + Send>> =
+                    Box::pin(std::io::Cursor::new(vec![]));
+                Ok(HttpResponse::new(
+                    200,
+                    None,
+                    headers,
+                    Vec::new(),
+                    None,
+                    "https://example.com".to_string(),
+                    None,
+                    Some("HTTP/1.1".to_string()),
+                    body_stream,
+                    ContentEncoding::Identity,
+                ))
+            }
+        }
+
+        let sender = SetCookieSender;
+        let transaction = HttpTransaction::with_cookie_store(sender, cookie_store.clone());
+
+        let request = SendableHttpRequest {
+            url: "https://example.com/login".to_string(),
+            method: "POST".to_string(),
+            headers: vec![],
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await;
+        assert!(result.is_ok());
+
+        // Verify the cookie was stored
+        let cookies = cookie_store.get_all_cookies();
+        assert_eq!(cookies.len(), 1);
+        assert_eq!(cookies[0].name, "session");
+        assert_eq!(cookies[0].value, "xyz789");
+    }
+
+    #[tokio::test]
+    async fn test_set_cookie_storage_can_be_disabled() {
+        let cookie_store = CookieStore::new();
+
+        struct SetCookieSender;
+
+        #[async_trait]
+        impl HttpSender for SetCookieSender {
+            async fn send(
+                &self,
+                _request: SendableHttpRequest,
+                _event_tx: mpsc::Sender<HttpResponseEvent>,
+            ) -> Result<HttpResponse> {
+                let headers =
+                    vec![("set-cookie".to_string(), "session=xyz789; Path=/".to_string())];
+
+                let body_stream: Pin<Box<dyn AsyncRead + Send>> =
+                    Box::pin(std::io::Cursor::new(vec![]));
+                Ok(HttpResponse::new(
+                    200,
+                    None,
+                    headers,
+                    Vec::new(),
+                    None,
+                    "https://example.com".to_string(),
+                    None,
+                    Some("HTTP/1.1".to_string()),
+                    body_stream,
+                    ContentEncoding::Identity,
+                ))
+            }
+        }
+
+        let transaction = HttpTransaction::with_cookie_behavior(
+            SetCookieSender,
+            cookie_store.clone(),
+            true,
+            false,
+        );
+
+        let request = SendableHttpRequest {
+            url: "https://example.com/login".to_string(),
+            method: "POST".to_string(),
+            headers: vec![],
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await;
+        assert!(result.is_ok());
+        assert!(cookie_store.get_all_cookies().is_empty());
+    }
+
+    #[tokio::test]
+    async fn test_multiple_set_cookie_headers() {
+        // Create a cookie store
+        let cookie_store = CookieStore::new();
+
+        // Mock sender that returns multiple Set-Cookie headers
+        struct MultiSetCookieSender;
+
+        #[async_trait]
+        impl HttpSender for MultiSetCookieSender {
+            async fn send(
+                &self,
+                _request: SendableHttpRequest,
+                _event_tx: mpsc::Sender<HttpResponseEvent>,
+            ) -> Result<HttpResponse> {
+                // Multiple Set-Cookie headers (this is standard HTTP behavior)
+                let headers = vec![
+                    ("set-cookie".to_string(), "session=abc123; Path=/".to_string()),
+                    ("set-cookie".to_string(), "user_id=42; Path=/".to_string()),
+                    (
+                        "set-cookie".to_string(),
+                        "preferences=dark; Path=/; Max-Age=86400".to_string(),
+                    ),
+                ];
+
+                let body_stream: Pin<Box<dyn AsyncRead + Send>> =
+                    Box::pin(std::io::Cursor::new(vec![]));
+                Ok(HttpResponse::new(
+                    200,
+                    None,
+                    headers,
+                    Vec::new(),
+                    None,
+                    "https://example.com".to_string(),
+                    None,
+                    Some("HTTP/1.1".to_string()),
+                    body_stream,
+                    ContentEncoding::Identity,
+                ))
+            }
+        }
+
+        let sender = MultiSetCookieSender;
+        let transaction = HttpTransaction::with_cookie_store(sender, cookie_store.clone());
+
+        let request = SendableHttpRequest {
+            url: "https://example.com/login".to_string(),
+            method: "POST".to_string(),
+            headers: vec![],
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await;
+        assert!(result.is_ok());
+
+        // Verify all three cookies were stored
+        let cookies = cookie_store.get_all_cookies();
+        assert_eq!(cookies.len(), 3, "All three Set-Cookie headers should be parsed and stored");
+
+        let cookie_values: Vec<_> =
+            cookies.iter().map(|c| format!("{}={}", c.name, c.value)).collect();
+        assert!(
+            cookie_values.iter().any(|c| c == "session=abc123"),
+            "session cookie should be stored"
+        );
+        assert!(cookie_values.iter().any(|c| c == "user_id=42"), "user_id cookie should be stored");
+        assert!(
+            cookie_values.iter().any(|c| c == "preferences=dark"),
+            "preferences cookie should be stored"
+        );
+    }
+
+    #[tokio::test]
+    async fn test_cookies_across_redirects() {
+        use std::sync::atomic::{AtomicUsize, Ordering};
+
+        // Create a cookie store
+        let cookie_store = CookieStore::new();
+
+        // Track request count
+        let request_count = Arc::new(AtomicUsize::new(0));
+        let request_count_clone = request_count.clone();
+
+        struct RedirectWithCookiesSender {
+            request_count: Arc<AtomicUsize>,
+        }
+
+        #[async_trait]
+        impl HttpSender for RedirectWithCookiesSender {
+            async fn send(
+                &self,
+                request: SendableHttpRequest,
+                _event_tx: mpsc::Sender<HttpResponseEvent>,
+            ) -> Result<HttpResponse> {
+                let count = self.request_count.fetch_add(1, Ordering::SeqCst);
+
+                let (status, headers) = if count == 0 {
+                    // First request: return redirect with Set-Cookie
+                    let h = vec![
+                        ("location".to_string(), "https://example.com/final".to_string()),
+                        ("set-cookie".to_string(), "redirect_cookie=value1".to_string()),
+                    ];
+                    (302, h)
+                } else {
+                    // Second request: verify cookie was sent
+                    let cookie_header =
+                        request.headers.iter().find(|(k, _)| k.eq_ignore_ascii_case("cookie"));
+
+                    assert!(cookie_header.is_some(), "Cookie header should be present on redirect");
+                    assert!(
+                        cookie_header.unwrap().1.contains("redirect_cookie=value1"),
+                        "Redirect cookie should be included"
+                    );
+
+                    (200, Vec::new())
+                };
+
+                let body_stream: Pin<Box<dyn AsyncRead + Send>> =
+                    Box::pin(std::io::Cursor::new(vec![]));
+                Ok(HttpResponse::new(
+                    status,
+                    None,
+                    headers,
+                    Vec::new(),
+                    None,
+                    "https://example.com".to_string(),
+                    None,
+                    Some("HTTP/1.1".to_string()),
+                    body_stream,
+                    ContentEncoding::Identity,
+                ))
+            }
+        }
+
+        let sender = RedirectWithCookiesSender { request_count: request_count_clone };
+        let transaction = HttpTransaction::with_cookie_store(sender, cookie_store);
+
+        let request = SendableHttpRequest {
+            url: "https://example.com/start".to_string(),
+            method: "GET".to_string(),
+            headers: vec![],
+            options: crate::types::SendableHttpRequestOptions {
+                follow_redirects: true,
+                ..Default::default()
+            },
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await;
+        assert!(result.is_ok());
+        assert_eq!(request_count.load(Ordering::SeqCst), 2);
+    }
+
+    #[tokio::test]
+    async fn test_cross_origin_redirect_strips_auth_headers() {
+        // Redirect from api.example.com -> s3.amazonaws.com should strip Authorization
+        let responses = vec![
+            MockResponse {
+                status: 302,
+                headers: vec![(
+                    "Location".to_string(),
+                    "https://s3.amazonaws.com/bucket/file.pdf".to_string(),
+                )],
+                body: vec![],
+            },
+            MockResponse { status: 200, headers: Vec::new(), body: b"PDF content".to_vec() },
+        ];
+
+        let sender = MockSender::new(responses);
+        let captured = sender.captured_requests.clone();
+        let transaction = HttpTransaction::new(sender);
+
+        let request = SendableHttpRequest {
+            url: "https://api.example.com/download".to_string(),
+            method: "GET".to_string(),
+            headers: vec![
+                ("Authorization".to_string(), "Basic dXNlcjpwYXNz".to_string()),
+                ("Accept".to_string(), "application/pdf".to_string()),
+            ],
+            options: crate::types::SendableHttpRequestOptions {
+                follow_redirects: true,
+                ..Default::default()
+            },
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await.unwrap();
+        assert_eq!(result.status, 200);
+
+        let requests = captured.lock().await;
+        assert_eq!(requests.len(), 2);
+
+        // First request should have the Authorization header
+        assert!(
+            requests[0].headers.iter().any(|(k, _)| k.eq_ignore_ascii_case("authorization")),
+            "First request should have Authorization header"
+        );
+
+        // Second request (to different host) should NOT have the Authorization header
+        assert!(
+            !requests[1].headers.iter().any(|(k, _)| k.eq_ignore_ascii_case("authorization")),
+            "Redirected request to different host should NOT have Authorization header"
+        );
+
+        // Non-sensitive headers should still be present
+        assert!(
+            requests[1].headers.iter().any(|(k, _)| k.eq_ignore_ascii_case("accept")),
+            "Non-sensitive headers should be preserved across cross-origin redirects"
+        );
+    }
+
+    #[tokio::test]
+    async fn test_same_origin_redirect_preserves_auth_headers() {
+        // Redirect within the same host should keep Authorization
+        let responses = vec![
+            MockResponse {
+                status: 302,
+                headers: vec![(
+                    "Location".to_string(),
+                    "https://api.example.com/v2/download".to_string(),
+                )],
+                body: vec![],
+            },
+            MockResponse { status: 200, headers: Vec::new(), body: b"OK".to_vec() },
+        ];
+
+        let sender = MockSender::new(responses);
+        let captured = sender.captured_requests.clone();
+        let transaction = HttpTransaction::new(sender);
+
+        let request = SendableHttpRequest {
+            url: "https://api.example.com/v1/download".to_string(),
+            method: "GET".to_string(),
+            headers: vec![
+                ("Authorization".to_string(), "Bearer token123".to_string()),
+                ("Accept".to_string(), "application/json".to_string()),
+            ],
+            options: crate::types::SendableHttpRequestOptions {
+                follow_redirects: true,
+                ..Default::default()
+            },
+            ..Default::default()
+        };
+
+        let (_tx, rx) = tokio::sync::watch::channel(false);
+        let (event_tx, _event_rx) = mpsc::channel(100);
+        let result = transaction.execute_with_cancellation(request, rx, event_tx).await.unwrap();
+        assert_eq!(result.status, 200);
+
+        let requests = captured.lock().await;
+        assert_eq!(requests.len(), 2);
+
+        // Both requests should have the Authorization header (same host)
+        assert!(
+            requests[0].headers.iter().any(|(k, _)| k.eq_ignore_ascii_case("authorization")),
+            "First request should have Authorization header"
+        );
+        assert!(
+            requests[1].headers.iter().any(|(k, _)| k.eq_ignore_ascii_case("authorization")),
+            "Redirected request to same host should preserve Authorization header"
+        );
+    }
+}
diff --git a/crates/yaak-http/src/types.rs b/crates/yaak-http/src/types.rs
new file mode 100644
index 0000000..8800c06
--- /dev/null
+++ b/crates/yaak-http/src/types.rs
@@ -0,0 +1,1262 @@
+use crate::chained_reader::{ChainedReader, ReaderType};
+use crate::error::Error::RequestError;
+use crate::error::Result;
+use crate::path_placeholders::apply_path_placeholders;
+use crate::proto::ensure_proto;
+use bytes::Bytes;
+use log::warn;
+use std::collections::BTreeMap;
+use std::pin::Pin;
+use std::time::Duration;
+use tokio::io::AsyncRead;
+use yaak_common::serde::{get_bool, get_bool_map, get_str, get_str_map};
+use yaak_models::models::HttpRequest;
+use yaak_templates::strip_json_comments::{maybe_strip_json_comments, strip_json_comments};
+
+pub(crate) const MULTIPART_BOUNDARY: &str = "------YaakFormBoundary";
+
+pub enum SendableBody {
+    Bytes(Bytes),
+    Stream {
+        data: Pin<Box<dyn AsyncRead + Send + 'static>>,
+        /// Known content length for the stream, if available. This is used by
+        /// the sender to set the body size hint so that hyper can set
+        /// Content-Length automatically for both HTTP/1.1 and HTTP/2.
+        content_length: Option<u64>,
+    },
+}
+
+enum SendableBodyWithMeta {
+    Bytes(Bytes),
+    Stream {
+        data: Pin<Box<dyn AsyncRead + Send + 'static>>,
+        content_length: Option<usize>,
+    },
+}
+
+impl From<SendableBodyWithMeta> for SendableBody {
+    fn from(value: SendableBodyWithMeta) -> Self {
+        match value {
+            SendableBodyWithMeta::Bytes(b) => SendableBody::Bytes(b),
+            SendableBodyWithMeta::Stream { data, content_length } => {
+                SendableBody::Stream { data, content_length: content_length.map(|l| l as u64) }
+            }
+        }
+    }
+}
+
+#[derive(Default)]
+pub struct SendableHttpRequest {
+    pub url: String,
+    pub method: String,
+    pub headers: Vec<(String, String)>,
+    pub body: Option<SendableBody>,
+    pub options: SendableHttpRequestOptions,
+}
+
+#[derive(Default, Clone)]
+pub struct SendableHttpRequestOptions {
+    pub timeout: Option<Duration>,
+    pub follow_redirects: bool,
+}
+
+impl SendableHttpRequest {
+    pub async fn from_http_request(
+        r: &HttpRequest,
+        options: SendableHttpRequestOptions,
+    ) -> Result<Self> {
+        let initial_headers = build_headers(r);
+        let (body, headers) = build_body(&r.method, &r.body_type, &r.body, initial_headers).await?;
+
+        Ok(Self {
+            url: build_url(r),
+            method: r.method.to_uppercase(),
+            headers,
+            body: body.into(),
+            options,
+        })
+    }
+
+    pub fn insert_header(&mut self, header: (String, String)) {
+        if header.0.eq_ignore_ascii_case("cookie") {
+            if let Some(existing) =
+                self.headers.iter_mut().find(|h| h.0.eq_ignore_ascii_case("cookie"))
+            {
+                existing.1 = format!("{}; {}", existing.1, header.1);
+            } else {
+                self.headers.push(header);
+            }
+            return;
+        }
+
+        if let Some(existing) =
+            self.headers.iter_mut().find(|h| h.0.eq_ignore_ascii_case(&header.0))
+        {
+            existing.1 = header.1;
+        } else {
+            self.headers.push(header);
+        }
+    }
+}
+
+pub fn append_query_params(url: &str, params: Vec<(String, String)>) -> String {
+    let url_string = url.to_string();
+    if params.is_empty() {
+        return url.to_string();
+    }
+
+    // Build query string
+    let query_string = params
+        .iter()
+        .map(|(name, value)| {
+            format!("{}={}", urlencoding::encode(name), urlencoding::encode(value))
+        })
+        .collect::<Vec<_>>()
+        .join("&");
+
+    // Split URL into parts: base URL, query, and fragment
+    let (base_and_query, fragment) = if let Some(hash_pos) = url_string.find('#') {
+        let (before_hash, after_hash) = url_string.split_at(hash_pos);
+        (before_hash.to_string(), Some(after_hash.to_string()))
+    } else {
+        (url_string, None)
+    };
+
+    // Now handle query parameters on the base URL (without fragment)
+    let mut result = if base_and_query.contains('?') {
+        // Check if there's already a query string after the '?'
+        let parts: Vec<&str> = base_and_query.splitn(2, '?').collect();
+        if parts.len() == 2 && !parts[1].trim().is_empty() {
+            // Append with & if there are existing parameters
+            format!("{}&{}", base_and_query, query_string)
+        } else {
+            // Just append the new parameters directly (URL ends with '?')
+            format!("{}{}", base_and_query, query_string)
+        }
+    } else {
+        // No existing query parameters, add with '?'
+        format!("{}?{}", base_and_query, query_string)
+    };
+
+    // Re-append the fragment if it exists
+    if let Some(fragment) = fragment {
+        result.push_str(&fragment);
+    }
+
+    result
+}
+
+fn strip_query_params(url: &str, names: &[&str]) -> String {
+    // Split off fragment
+    let (base_and_query, fragment) = if let Some(hash_pos) = url.find('#') {
+        (&url[..hash_pos], Some(&url[hash_pos..]))
+    } else {
+        (url, None)
+    };
+
+    let result = if let Some(q_pos) = base_and_query.find('?') {
+        let base = &base_and_query[..q_pos];
+        let query = &base_and_query[q_pos + 1..];
+        let filtered: Vec<&str> = query
+            .split('&')
+            .filter(|pair| {
+                let key = pair.split('=').next().unwrap_or("");
+                let decoded = urlencoding::decode(key).unwrap_or_default();
+                !names.contains(&decoded.as_ref())
+            })
+            .collect();
+        if filtered.is_empty() {
+            base.to_string()
+        } else {
+            format!("{}?{}", base, filtered.join("&"))
+        }
+    } else {
+        base_and_query.to_string()
+    };
+
+    match fragment {
+        Some(f) => format!("{}{}", result, f),
+        None => result,
+    }
+}
+
+fn build_url(r: &HttpRequest) -> String {
+    let (url_string, params) = apply_path_placeholders(&ensure_proto(&r.url), &r.url_parameters);
+    let mut url = append_query_params(
+        &url_string,
+        params
+            .iter()
+            .filter(|p| p.enabled && !p.name.is_empty())
+            .map(|p| (p.name.clone(), p.value.clone()))
+            .collect(),
+    );
+
+    // GraphQL GET requests encode query/variables as URL query parameters
+    if r.method.to_lowercase() == "get" && r.body_type.as_deref() == Some("graphql") {
+        url = append_graphql_query_params(&url, &r.body);
+    }
+
+    url
+}
+
+fn append_graphql_query_params(url: &str, body: &BTreeMap<String, serde_json::Value>) -> String {
+    let query = get_str_map(body, "query").to_string();
+    let variables = strip_json_comments(&get_str_map(body, "variables"));
+    let operation_name = get_str_map(body, "operationName").to_string();
+    let mut params = vec![("query".to_string(), query)];
+    if !variables.trim().is_empty() {
+        params.push(("variables".to_string(), variables));
+    }
+    if !operation_name.trim().is_empty() {
+        params.push(("operationName".to_string(), operation_name));
+    }
+    // Strip existing query/variables params to avoid duplicates
+    let url = strip_query_params(url, &["query", "variables", "operationName"]);
+    append_query_params(&url, params)
+}
+
+fn build_headers(r: &HttpRequest) -> Vec<(String, String)> {
+    // RFC 6265 allows only one Cookie field, so enabled Cookie rows fold into
+    // the first one
+    let mut headers: Vec<(String, String)> = Vec::new();
+    for h in &r.headers {
+        if !h.enabled || h.name.is_empty() {
+            continue;
+        }
+        if h.name.eq_ignore_ascii_case("cookie") {
+            if let Some(existing) = headers.iter_mut().find(|e| e.0.eq_ignore_ascii_case("cookie"))
+            {
+                existing.1 = format!("{}; {}", existing.1, h.value);
+                continue;
+            }
+        }
+        headers.push((h.name.clone(), h.value.clone()));
+    }
+    headers
+}
+
+async fn build_body(
+    method: &str,
+    body_type: &Option<String>,
+    body: &BTreeMap<String, serde_json::Value>,
+    headers: Vec<(String, String)>,
+) -> Result<(Option<SendableBody>, Vec<(String, String)>)> {
+    let body_type = match &body_type {
+        None => return Ok((None, headers)),
+        Some(t) => t,
+    };
+
+    let (body, content_type) = match body_type.as_str() {
+        "binary" => (build_binary_body(&body).await?, None),
+        "graphql" => (build_graphql_body(&method, &body), None),
+        "application/x-www-form-urlencoded" => (build_form_body(&body), None),
+        "multipart/form-data" => build_multipart_body(&body, &headers).await?,
+        _ if body.contains_key("text") => (build_text_body(&body, body_type), None),
+        t => {
+            warn!("Unsupported body type: {}", t);
+            (None, None)
+        }
+    };
+
+    // Add or update the Content-Type header
+    let mut headers = headers;
+    if let Some(ct) = content_type {
+        if let Some(existing) = headers.iter_mut().find(|h| h.0.to_lowercase() == "content-type") {
+            existing.1 = ct;
+        } else {
+            headers.push(("Content-Type".to_string(), ct));
+        }
+    }
+
+    // NOTE: Content-Length is NOT set as an explicit header here. Instead, the
+    // body's content length is carried via SendableBody::Stream { content_length }
+    // and used by the sender to set the body size hint. This lets hyper handle
+    // Content-Length automatically for both HTTP/1.1 and HTTP/2, avoiding the
+    // duplicate Content-Length that breaks HTTP/2 servers.
+
+    Ok((body.map(|b| b.into()), headers))
+}
+
+fn build_form_body(body: &BTreeMap<String, serde_json::Value>) -> Option<SendableBodyWithMeta> {
+    let form_params = match body.get("form").map(|f| f.as_array()) {
+        Some(Some(f)) => f,
+        _ => return None,
+    };
+
+    let mut body = String::new();
+    for p in form_params {
+        let enabled = get_bool(p, "enabled", true);
+        let name = get_str(p, "name");
+        if !enabled || name.is_empty() {
+            continue;
+        }
+        let value = get_str(p, "value");
+        if !body.is_empty() {
+            body.push('&');
+        }
+        body.push_str(&urlencoding::encode(&name));
+        body.push('=');
+        body.push_str(&urlencoding::encode(&value));
+    }
+
+    if body.is_empty() { None } else { Some(SendableBodyWithMeta::Bytes(Bytes::from(body))) }
+}
+
+async fn build_binary_body(
+    body: &BTreeMap<String, serde_json::Value>,
+) -> Result<Option<SendableBodyWithMeta>> {
+    let file_path = match body.get("filePath").map(|f| f.as_str()) {
+        Some(Some(f)) => f,
+        _ => return Ok(None),
+    };
+
+    // Open a file for streaming
+    let content_length = tokio::fs::metadata(file_path)
+        .await
+        .map_err(|e| RequestError(format!("Failed to get file metadata: {}", e)))?
+        .len();
+
+    let file = tokio::fs::File::open(file_path)
+        .await
+        .map_err(|e| RequestError(format!("Failed to open file: {}", e)))?;
+
+    Ok(Some(SendableBodyWithMeta::Stream {
+        data: Box::pin(file),
+        content_length: Some(content_length as usize),
+    }))
+}
+
+fn build_text_body(
+    body: &BTreeMap<String, serde_json::Value>,
+    body_type: &str,
+) -> Option<SendableBodyWithMeta> {
+    let text = get_str_map(body, "text");
+    if text.is_empty() {
+        return None;
+    }
+
+    let send_comments = get_bool_map(body, "sendJsonComments", false);
+    let text = if !send_comments && body_type == "application/json" {
+        maybe_strip_json_comments(text)
+    } else {
+        text.to_string()
+    };
+
+    Some(SendableBodyWithMeta::Bytes(Bytes::from(text)))
+}
+
+fn build_graphql_body(
+    method: &str,
+    body: &BTreeMap<String, serde_json::Value>,
+) -> Option<SendableBodyWithMeta> {
+    let query = get_str_map(body, "query");
+    let variables = strip_json_comments(&get_str_map(body, "variables"));
+    let operation_name = get_str_map(body, "operationName");
+
+    if method.to_lowercase() == "get" {
+        // GraphQL GET requests use query parameters, not a body
+        return None;
+    }
+
+    let mut body = serde_json::Map::new();
+    body.insert("query".to_string(), serde_json::Value::String(query.to_string()));
+    if !variables.trim().is_empty() {
+        body.insert(
+            "variables".to_string(),
+            serde_json::from_str(&variables)
+                .unwrap_or_else(|_| serde_json::Value::String(variables)),
+        );
+    }
+    if !operation_name.trim().is_empty() {
+        body.insert(
+            "operationName".to_string(),
+            serde_json::Value::String(operation_name.to_string()),
+        );
+    }
+
+    Some(SendableBodyWithMeta::Bytes(Bytes::from(serde_json::to_string(&body).unwrap_or_default())))
+}
+
+async fn build_multipart_body(
+    body: &BTreeMap<String, serde_json::Value>,
+    headers: &Vec<(String, String)>,
+) -> Result<(Option<SendableBodyWithMeta>, Option<String>)> {
+    let boundary = extract_boundary_from_headers(headers);
+
+    let form_params = match body.get("form").map(|f| f.as_array()) {
+        Some(Some(f)) => f,
+        _ => return Ok((None, None)),
+    };
+
+    // Build a list of readers for streaming and calculate total content length
+    let mut readers: Vec<ReaderType> = Vec::new();
+    let mut has_content = false;
+    let mut total_size: usize = 0;
+
+    for p in form_params {
+        let enabled = get_bool(p, "enabled", true);
+        let name = get_str(p, "name");
+        if !enabled || name.is_empty() {
+            continue;
+        }
+
+        has_content = true;
+
+        // Add boundary delimiter
+        let boundary_bytes = format!("--{}\r\n", boundary).into_bytes();
+        total_size += boundary_bytes.len();
+        readers.push(ReaderType::Bytes(boundary_bytes));
+
+        let file_path = get_str(p, "file");
+        let value = get_str(p, "value");
+        let content_type = get_str(p, "contentType");
+
+        if file_path.is_empty() {
+            // Text field
+            let header = if !content_type.is_empty() {
+                format!(
+                    "Content-Disposition: form-data; name=\"{}\"\r\nContent-Type: {}\r\n\r\n{}",
+                    name, content_type, value
+                )
+            } else {
+                format!("Content-Disposition: form-data; name=\"{}\"\r\n\r\n{}", name, value)
+            };
+            let header_bytes = header.into_bytes();
+            total_size += header_bytes.len();
+            readers.push(ReaderType::Bytes(header_bytes));
+        } else {
+            // File field - validate that file exists first
+            if !tokio::fs::try_exists(file_path).await.unwrap_or(false) {
+                return Err(RequestError(format!("File not found: {}", file_path)));
+            }
+
+            // Get file size for content length calculation
+            let file_metadata = tokio::fs::metadata(file_path)
+                .await
+                .map_err(|e| RequestError(format!("Failed to get file metadata: {}", e)))?;
+            let file_size = file_metadata.len() as usize;
+
+            let filename = get_str(p, "filename");
+            let filename = if filename.is_empty() {
+                std::path::Path::new(file_path)
+                    .file_name()
+                    .and_then(|n| n.to_str())
+                    .unwrap_or("file")
+            } else {
+                filename
+            };
+
+            // Add content type
+            let mime_type = if !content_type.is_empty() {
+                content_type.to_string()
+            } else {
+                // Guess mime type from file extension
+                mime_guess::from_path(file_path).first_or_octet_stream().to_string()
+            };
+
+            let header = format!(
+                "Content-Disposition: form-data; name=\"{}\"; filename=\"{}\"\r\nContent-Type: {}\r\n\r\n",
+                name, filename, mime_type
+            );
+            let header_bytes = header.into_bytes();
+            total_size += header_bytes.len();
+            total_size += file_size;
+            readers.push(ReaderType::Bytes(header_bytes));
+
+            // Add a file path for streaming
+            readers.push(ReaderType::FilePath(file_path.to_string()));
+        }
+
+        let line_ending = b"\r\n".to_vec();
+        total_size += line_ending.len();
+        readers.push(ReaderType::Bytes(line_ending));
+    }
+
+    if has_content {
+        // Add the final boundary
+        let final_boundary = format!("--{}--\r\n", boundary).into_bytes();
+        total_size += final_boundary.len();
+        readers.push(ReaderType::Bytes(final_boundary));
+
+        let content_type = format!("multipart/form-data; boundary={}", boundary);
+        let stream = ChainedReader::new(readers);
+        Ok((
+            Some(SendableBodyWithMeta::Stream {
+                data: Box::pin(stream),
+                content_length: Some(total_size),
+            }),
+            Some(content_type),
+        ))
+    } else {
+        Ok((None, None))
+    }
+}
+
+fn extract_boundary_from_headers(headers: &Vec<(String, String)>) -> String {
+    headers
+        .iter()
+        .find(|h| h.0.to_lowercase() == "content-type")
+        .and_then(|h| {
+            // Extract boundary from the Content-Type header (e.g., "multipart/form-data; boundary=xyz")
+            h.1.split(';')
+                .find(|part| part.trim().starts_with("boundary="))
+                .and_then(|boundary_part| boundary_part.split('=').nth(1))
+                .map(|b| b.trim().to_string())
+        })
+        .unwrap_or_else(|| MULTIPART_BOUNDARY.to_string())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use bytes::Bytes;
+    use serde_json::json;
+    use std::collections::BTreeMap;
+    use yaak_models::models::{HttpRequest, HttpRequestHeader, HttpUrlParameter};
+
+    #[tokio::test]
+    async fn test_sendable_request_preserves_independent_cookie_enabled_states() {
+        let request = HttpRequest {
+            url: "https://example.com/api".to_string(),
+            headers: vec![
+                HttpRequestHeader {
+                    enabled: true,
+                    name: "Cookie".to_string(),
+                    value: "session=abc".to_string(),
+                    id: None,
+                },
+                HttpRequestHeader {
+                    enabled: false,
+                    name: "Cookie".to_string(),
+                    value: "debug=verbose".to_string(),
+                    id: None,
+                },
+            ],
+            ..Default::default()
+        };
+
+        let sendable =
+            SendableHttpRequest::from_http_request(&request, SendableHttpRequestOptions::default())
+                .await
+                .unwrap();
+
+        assert_eq!(sendable.headers, vec![("Cookie".to_string(), "session=abc".to_string())]);
+    }
+
+    #[tokio::test]
+    async fn test_sendable_request_merges_enabled_cookie_rows_into_one_field() {
+        let request = HttpRequest {
+            url: "https://example.com/api".to_string(),
+            headers: vec![
+                HttpRequestHeader {
+                    enabled: true,
+                    name: "Cookie".to_string(),
+                    value: "session=abc".to_string(),
+                    id: None,
+                },
+                HttpRequestHeader {
+                    enabled: false,
+                    name: "Cookie".to_string(),
+                    value: "debug=verbose".to_string(),
+                    id: None,
+                },
+                HttpRequestHeader {
+                    enabled: true,
+                    name: "cookie".to_string(),
+                    value: "theme=dark".to_string(),
+                    id: None,
+                },
+            ],
+            ..Default::default()
+        };
+
+        let sendable =
+            SendableHttpRequest::from_http_request(&request, SendableHttpRequestOptions::default())
+                .await
+                .unwrap();
+
+        assert_eq!(
+            sendable.headers,
+            vec![("Cookie".to_string(), "session=abc; theme=dark".to_string())],
+        );
+    }
+
+    #[test]
+    fn test_insert_header_appends_authentication_cookie() {
+        let mut request = SendableHttpRequest {
+            headers: vec![
+                ("Cookie".to_string(), "session=abc".to_string()),
+                ("Cookie".to_string(), "theme=dark".to_string()),
+            ],
+            ..Default::default()
+        };
+
+        request.insert_header(("cookie".to_string(), "api_key=secret".to_string()));
+
+        assert_eq!(
+            request.headers,
+            vec![
+                ("Cookie".to_string(), "session=abc; api_key=secret".to_string()),
+                ("Cookie".to_string(), "theme=dark".to_string()),
+            ],
+        );
+    }
+
+    #[tokio::test]
+    async fn test_sendable_request_preserves_serialized_path_delimiters() {
+        let request = HttpRequest {
+            url: "https://example.com/labels/.one%2Ftwo.three/matrix/;x=1%3Bspoof%3D2;y=2"
+                .to_string(),
+            ..Default::default()
+        };
+
+        let sendable =
+            SendableHttpRequest::from_http_request(&request, SendableHttpRequestOptions::default())
+                .await
+                .unwrap();
+
+        assert_eq!(
+            sendable.url,
+            "https://example.com/labels/.one%2Ftwo.three/matrix/;x=1%3Bspoof%3D2;y=2",
+        );
+    }
+
+    #[test]
+    fn test_build_url_no_params() {
+        let r = HttpRequest {
+            url: "https://example.com/api".to_string(),
+            url_parameters: vec![],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://example.com/api");
+    }
+
+    #[test]
+    fn test_build_url_with_params() {
+        let r = HttpRequest {
+            url: "https://example.com/api".to_string(),
+            url_parameters: vec![
+                HttpUrlParameter {
+                    enabled: true,
+                    name: "foo".to_string(),
+                    value: "bar".to_string(),
+                    id: None,
+                },
+                HttpUrlParameter {
+                    enabled: true,
+                    name: "baz".to_string(),
+                    value: "qux".to_string(),
+                    id: None,
+                },
+            ],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://example.com/api?foo=bar&baz=qux");
+    }
+
+    #[test]
+    fn test_build_url_replaces_graphql_operation_name_from_body() {
+        let mut body = BTreeMap::new();
+        body.insert("query".to_string(), json!("query Foo { foo } query Bar { bar }"));
+        body.insert("operationName".to_string(), json!("Bar"));
+
+        let r = HttpRequest {
+            method: "GET".to_string(),
+            body_type: Some("graphql".to_string()),
+            body,
+            url: "https://example.com/graphql".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "operationName".to_string(),
+                value: "Foo".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(
+            result,
+            "https://example.com/graphql?query=query%20Foo%20%7B%20foo%20%7D%20query%20Bar%20%7B%20bar%20%7D&operationName=Bar",
+        );
+    }
+
+    #[test]
+    fn test_build_url_with_disabled_params() {
+        let r = HttpRequest {
+            url: "https://example.com/api".to_string(),
+            url_parameters: vec![
+                HttpUrlParameter {
+                    enabled: false,
+                    name: "disabled".to_string(),
+                    value: "value".to_string(),
+                    id: None,
+                },
+                HttpUrlParameter {
+                    enabled: true,
+                    name: "enabled".to_string(),
+                    value: "value".to_string(),
+                    id: None,
+                },
+            ],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://example.com/api?enabled=value");
+    }
+
+    #[test]
+    fn test_build_url_with_existing_query() {
+        let r = HttpRequest {
+            url: "https://example.com/api?existing=param".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "new".to_string(),
+                value: "value".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://example.com/api?existing=param&new=value");
+    }
+
+    #[test]
+    fn test_build_url_with_empty_existing_query() {
+        let r = HttpRequest {
+            url: "https://example.com/api?".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "new".to_string(),
+                value: "value".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://example.com/api?new=value");
+    }
+
+    #[test]
+    fn test_build_url_with_special_chars() {
+        let r = HttpRequest {
+            url: "https://example.com/api".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "special chars!@#".to_string(),
+                value: "value with spaces & symbols".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(
+            result,
+            "https://example.com/api?special%20chars%21%40%23=value%20with%20spaces%20%26%20symbols"
+        );
+    }
+
+    #[test]
+    fn test_build_url_adds_protocol() {
+        let r = HttpRequest {
+            url: "example.com/api".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "foo".to_string(),
+                value: "bar".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        // ensure_proto defaults to http:// for regular domains
+        assert_eq!(result, "http://example.com/api?foo=bar");
+    }
+
+    #[test]
+    fn test_build_url_adds_https_for_dev_domain() {
+        let r = HttpRequest {
+            url: "example.dev/api".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "foo".to_string(),
+                value: "bar".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        // .dev domains force https
+        assert_eq!(result, "https://example.dev/api?foo=bar");
+    }
+
+    #[test]
+    fn test_build_url_with_fragment() {
+        let r = HttpRequest {
+            url: "https://example.com/api#section".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "foo".to_string(),
+                value: "bar".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://example.com/api?foo=bar#section");
+    }
+
+    #[test]
+    fn test_build_url_with_existing_query_and_fragment() {
+        let r = HttpRequest {
+            url: "https://yaak.app?foo=bar#some-hash".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "baz".to_string(),
+                value: "qux".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://yaak.app?foo=bar&baz=qux#some-hash");
+    }
+
+    #[test]
+    fn test_build_url_with_empty_query_and_fragment() {
+        let r = HttpRequest {
+            url: "https://example.com/api?#section".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "foo".to_string(),
+                value: "bar".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://example.com/api?foo=bar#section");
+    }
+
+    #[test]
+    fn test_build_url_with_fragment_containing_special_chars() {
+        let r = HttpRequest {
+            url: "https://example.com#section/with/slashes?and=fake&query".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "real".to_string(),
+                value: "param".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://example.com?real=param#section/with/slashes?and=fake&query");
+    }
+
+    #[test]
+    fn test_build_url_preserves_empty_fragment() {
+        let r = HttpRequest {
+            url: "https://example.com/api#".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "foo".to_string(),
+                value: "bar".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        assert_eq!(result, "https://example.com/api?foo=bar#");
+    }
+
+    #[test]
+    fn test_build_url_with_multiple_fragments() {
+        // Testing edge case where the URL has multiple # characters (though technically invalid)
+        let r = HttpRequest {
+            url: "https://example.com#section#subsection".to_string(),
+            url_parameters: vec![HttpUrlParameter {
+                enabled: true,
+                name: "foo".to_string(),
+                value: "bar".to_string(),
+                id: None,
+            }],
+            ..Default::default()
+        };
+
+        let result = build_url(&r);
+        // Should treat everything after first # as fragment
+        assert_eq!(result, "https://example.com?foo=bar#section#subsection");
+    }
+
+    #[tokio::test]
+    async fn test_text_body() {
+        let mut body = BTreeMap::new();
+        body.insert("text".to_string(), json!("Hello, World!"));
+
+        let result = build_text_body(&body, "application/json");
+        match result {
+            Some(SendableBodyWithMeta::Bytes(bytes)) => {
+                assert_eq!(bytes, Bytes::from("Hello, World!"))
+            }
+            _ => panic!("Expected Some(SendableBody::Bytes)"),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_text_body_empty() {
+        let mut body = BTreeMap::new();
+        body.insert("text".to_string(), json!(""));
+
+        let result = build_text_body(&body, "application/json");
+        assert!(result.is_none());
+    }
+
+    #[tokio::test]
+    async fn test_text_body_missing() {
+        let body = BTreeMap::new();
+
+        let result = build_text_body(&body, "application/json");
+        assert!(result.is_none());
+    }
+
+    #[tokio::test]
+    async fn test_text_body_strips_json_comments_by_default() {
+        let mut body = BTreeMap::new();
+        body.insert("text".to_string(), json!("{\n  // comment\n  \"foo\": \"bar\"\n}"));
+
+        let result = build_text_body(&body, "application/json");
+        match result {
+            Some(SendableBodyWithMeta::Bytes(bytes)) => {
+                let text = String::from_utf8_lossy(&bytes);
+                assert!(!text.contains("// comment"));
+                assert!(text.contains("\"foo\": \"bar\""));
+            }
+            _ => panic!("Expected Some(SendableBody::Bytes)"),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_text_body_send_json_comments_when_opted_in() {
+        let mut body = BTreeMap::new();
+        body.insert("text".to_string(), json!("{\n  // comment\n  \"foo\": \"bar\"\n}"));
+        body.insert("sendJsonComments".to_string(), json!(true));
+
+        let result = build_text_body(&body, "application/json");
+        match result {
+            Some(SendableBodyWithMeta::Bytes(bytes)) => {
+                let text = String::from_utf8_lossy(&bytes);
+                assert!(text.contains("// comment"));
+            }
+            _ => panic!("Expected Some(SendableBody::Bytes)"),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_text_body_no_strip_for_non_json() {
+        let mut body = BTreeMap::new();
+        body.insert("text".to_string(), json!("// not json\nsome text"));
+
+        let result = build_text_body(&body, "text/plain");
+        match result {
+            Some(SendableBodyWithMeta::Bytes(bytes)) => {
+                let text = String::from_utf8_lossy(&bytes);
+                assert!(text.contains("// not json"));
+            }
+            _ => panic!("Expected Some(SendableBody::Bytes)"),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_form_urlencoded_body() -> Result<()> {
+        let mut body = BTreeMap::new();
+        body.insert(
+            "form".to_string(),
+            json!([
+                { "enabled": true, "name": "basic", "value": "aaa"},
+                { "enabled": true, "name": "fUnkey Stuff!$*#(", "value": "*)%&#$)@ *$#)@&"},
+                { "enabled": false, "name": "disabled", "value": "won't show"},
+            ]),
+        );
+
+        let result = build_form_body(&body);
+        match result {
+            Some(SendableBodyWithMeta::Bytes(bytes)) => {
+                let expected = "basic=aaa&fUnkey%20Stuff%21%24%2A%23%28=%2A%29%25%26%23%24%29%40%20%2A%24%23%29%40%26";
+                assert_eq!(bytes, Bytes::from(expected));
+            }
+            _ => panic!("Expected Some(SendableBody::Bytes)"),
+        }
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn test_form_urlencoded_body_missing_form() {
+        let body = BTreeMap::new();
+        let result = build_form_body(&body);
+        assert!(result.is_none());
+    }
+
+    #[tokio::test]
+    async fn test_binary_body() -> Result<()> {
+        let mut body = BTreeMap::new();
+        body.insert("filePath".to_string(), json!("./tests/test.txt"));
+
+        let result = build_binary_body(&body).await?;
+        assert!(matches!(result, Some(SendableBodyWithMeta::Stream { .. })));
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn test_binary_body_file_not_found() {
+        let mut body = BTreeMap::new();
+        body.insert("filePath".to_string(), json!("./nonexistent/file.txt"));
+
+        let result = build_binary_body(&body).await;
+        assert!(result.is_err());
+        if let Err(e) = result {
+            assert!(matches!(e, RequestError(_)));
+        }
+    }
+
+    #[tokio::test]
+    async fn test_graphql_body_with_variables() {
+        let mut body = BTreeMap::new();
+        body.insert("query".to_string(), json!("{ user(id: $id) { name } }"));
+        body.insert("variables".to_string(), json!(r#"{"id": "123"}"#));
+
+        let result = build_graphql_body("POST", &body);
+        match result {
+            Some(SendableBodyWithMeta::Bytes(bytes)) => {
+                assert_eq!(
+                    serde_json::from_slice::<serde_json::Value>(&bytes).unwrap(),
+                    json!({
+                        "query": "{ user(id: $id) { name } }",
+                        "variables": { "id": "123" },
+                    }),
+                );
+            }
+            _ => panic!("Expected Some(SendableBody::Bytes)"),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_graphql_body_with_operation_name() {
+        let mut body = BTreeMap::new();
+        body.insert("query".to_string(), json!("query Search { viewer { id } }"));
+        body.insert("operationName".to_string(), json!("Search"));
+
+        let result = build_graphql_body("POST", &body);
+        match result {
+            Some(SendableBodyWithMeta::Bytes(bytes)) => {
+                assert_eq!(
+                    serde_json::from_slice::<serde_json::Value>(&bytes).unwrap(),
+                    json!({
+                        "query": "query Search { viewer { id } }",
+                        "operationName": "Search",
+                    }),
+                );
+            }
+            _ => panic!("Expected Some(SendableBody::Bytes)"),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_graphql_body_without_variables() {
+        let mut body = BTreeMap::new();
+        body.insert("query".to_string(), json!("{ users { name } }"));
+        body.insert("variables".to_string(), json!(""));
+
+        let result = build_graphql_body("POST", &body);
+        match result {
+            Some(SendableBodyWithMeta::Bytes(bytes)) => {
+                let expected = r#"{"query":"{ users { name } }"}"#;
+                assert_eq!(bytes, Bytes::from(expected));
+            }
+            _ => panic!("Expected Some(SendableBody::Bytes)"),
+        }
+    }
+
+    #[tokio::test]
+    async fn test_graphql_body_get_method() {
+        let mut body = BTreeMap::new();
+        body.insert("query".to_string(), json!("{ users { name } }"));
+
+        let result = build_graphql_body("GET", &body);
+        assert!(result.is_none());
+    }
+
+    #[tokio::test]
+    async fn test_multipart_body_text_fields() -> Result<()> {
+        let mut body = BTreeMap::new();
+        body.insert(
+            "form".to_string(),
+            json!([
+                { "enabled": true, "name": "field1", "value": "value1", "file": "" },
+                { "enabled": true, "name": "field2", "value": "value2", "file": "" },
+                { "enabled": false, "name": "disabled", "value": "won't show", "file": "" },
+            ]),
+        );
+
+        let (result, content_type) = build_multipart_body(&body, &vec![]).await?;
+        assert!(content_type.is_some());
+
+        match result {
+            Some(SendableBodyWithMeta::Stream { data: mut stream, content_length }) => {
+                // Read the entire stream to verify content
+                let mut buf = Vec::new();
+                use tokio::io::AsyncReadExt;
+                stream.read_to_end(&mut buf).await.expect("Failed to read stream");
+                let body_str = String::from_utf8_lossy(&buf);
+                assert_eq!(
+                    body_str,
+                    "--------YaakFormBoundary\r\nContent-Disposition: form-data; name=\"field1\"\r\n\r\nvalue1\r\n--------YaakFormBoundary\r\nContent-Disposition: form-data; name=\"field2\"\r\n\r\nvalue2\r\n--------YaakFormBoundary--\r\n",
+                );
+                assert_eq!(content_length, Some(body_str.len()));
+            }
+            _ => panic!("Expected Some(SendableBody::Stream)"),
+        }
+
+        assert_eq!(
+            content_type.unwrap(),
+            format!("multipart/form-data; boundary={}", MULTIPART_BOUNDARY)
+        );
+
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn test_multipart_body_with_file() -> Result<()> {
+        let mut body = BTreeMap::new();
+        body.insert(
+            "form".to_string(),
+            json!([
+                { "enabled": true, "name": "file_field", "file": "./tests/test.txt", "filename": "custom.txt", "contentType": "text/plain" },
+            ]),
+        );
+
+        let (result, content_type) = build_multipart_body(&body, &vec![]).await?;
+        assert!(content_type.is_some());
+
+        match result {
+            Some(SendableBodyWithMeta::Stream { data: mut stream, content_length }) => {
+                // Read the entire stream to verify content
+                let mut buf = Vec::new();
+                use tokio::io::AsyncReadExt;
+                stream.read_to_end(&mut buf).await.expect("Failed to read stream");
+                let body_str = String::from_utf8_lossy(&buf);
+                assert_eq!(
+                    body_str,
+                    "--------YaakFormBoundary\r\nContent-Disposition: form-data; name=\"file_field\"; filename=\"custom.txt\"\r\nContent-Type: text/plain\r\n\r\nThis is a test file!\n\r\n--------YaakFormBoundary--\r\n"
+                );
+                assert_eq!(content_length, Some(body_str.len()));
+            }
+            _ => panic!("Expected Some(SendableBody::Stream)"),
+        }
+
+        assert_eq!(
+            content_type.unwrap(),
+            format!("multipart/form-data; boundary={}", MULTIPART_BOUNDARY)
+        );
+
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn test_multipart_body_empty() -> Result<()> {
+        let body = BTreeMap::new();
+        let (result, content_type) = build_multipart_body(&body, &vec![]).await?;
+        assert!(result.is_none());
+        assert_eq!(content_type, None);
+        Ok(())
+    }
+
+    #[test]
+    fn test_extract_boundary_from_headers_with_custom_boundary() {
+        let headers = vec![(
+            "Content-Type".to_string(),
+            "multipart/form-data; boundary=customBoundary123".to_string(),
+        )];
+        let boundary = extract_boundary_from_headers(&headers);
+        assert_eq!(boundary, "customBoundary123");
+    }
+
+    #[test]
+    fn test_extract_boundary_from_headers_default() {
+        let headers = vec![("Accept".to_string(), "*/*".to_string())];
+        let boundary = extract_boundary_from_headers(&headers);
+        assert_eq!(boundary, MULTIPART_BOUNDARY);
+    }
+
+    #[test]
+    fn test_extract_boundary_from_headers_no_boundary_in_content_type() {
+        let headers = vec![("Content-Type".to_string(), "multipart/form-data".to_string())];
+        let boundary = extract_boundary_from_headers(&headers);
+        assert_eq!(boundary, MULTIPART_BOUNDARY);
+    }
+
+    #[test]
+    fn test_extract_boundary_case_insensitive() {
+        let headers = vec![(
+            "Content-Type".to_string(),
+            "multipart/form-data; boundary=myBoundary".to_string(),
+        )];
+        let boundary = extract_boundary_from_headers(&headers);
+        assert_eq!(boundary, "myBoundary");
+    }
+
+    #[tokio::test]
+    async fn test_no_content_length_header_added_by_build_body() -> Result<()> {
+        let mut body = BTreeMap::new();
+        body.insert("text".to_string(), json!("Hello, World!"));
+
+        let headers = vec![];
+
+        let (_, result_headers) =
+            build_body("POST", &Some("text/plain".to_string()), &body, headers).await?;
+
+        // Content-Length should NOT be set as an explicit header. Instead, the
+        // sender uses the body's size_hint to let hyper set it automatically,
+        // which works correctly for both HTTP/1.1 and HTTP/2.
+        let has_content_length =
+            result_headers.iter().any(|h| h.0.to_lowercase() == "content-length");
+        assert!(!has_content_length, "Content-Length should not be set as an explicit header");
+
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn test_chunked_encoding_header_preserved() -> Result<()> {
+        let mut body = BTreeMap::new();
+        body.insert("text".to_string(), json!("Hello, World!"));
+
+        // Headers with Transfer-Encoding: chunked
+        let headers = vec![("Transfer-Encoding".to_string(), "chunked".to_string())];
+
+        let (_, result_headers) =
+            build_body("POST", &Some("text/plain".to_string()), &body, headers).await?;
+
+        // Verify that the Transfer-Encoding header is still present
+        let has_chunked = result_headers.iter().any(|h| {
+            h.0.to_lowercase() == "transfer-encoding" && h.1.to_lowercase().contains("chunked")
+        });
+        assert!(has_chunked, "Transfer-Encoding: chunked should be preserved");
+
+        Ok(())
+    }
+}
diff --git a/crates/yaak-http/tests/test.txt b/crates/yaak-http/tests/test.txt
new file mode 100644
index 0000000..c66d471
--- /dev/null
+++ b/crates/yaak-http/tests/test.txt
@@ -0,0 +1 @@
+This is a test file!
diff --git a/crates/yaak-lifecycle/Cargo.toml b/crates/yaak-lifecycle/Cargo.toml
new file mode 100644
index 0000000..cbcfa8f
--- /dev/null
+++ b/crates/yaak-lifecycle/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "yaak-lifecycle"
+version = "0.0.0"
+edition = "2024"
+authors = ["Gregory Schier"]
+publish = false
+
+[dependencies]
+log = { workspace = true }
+yaak-models = { workspace = true }
diff --git a/crates/yaak-lifecycle/src/lib.rs b/crates/yaak-lifecycle/src/lib.rs
new file mode 100644
index 0000000..bbcc42b
--- /dev/null
+++ b/crates/yaak-lifecycle/src/lib.rs
@@ -0,0 +1,126 @@
+//! Lifecycle hooks shared by every host (desktop, browser, CLI). The hooks say
+//! what happens at each moment; the host decides when and on which thread.
+//!
+//! Builds for wasm32, so it can depend on `yaak-models` but not on the send
+//! engine or plugin runtime.
+
+use log::info;
+use std::path::PathBuf;
+use yaak_models::blob_manager::BlobManager;
+use yaak_models::client_db::WriteDb;
+use yaak_models::error::Result;
+
+const MODEL_CHANGES_RETENTION_HOURS: i64 = 1;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Role {
+    /// Has the database for the life of the app (desktop, browser worker)
+    Owner,
+    /// Short-lived, and an owner may be using the database right now (CLI).
+    /// Must not touch anything in flight.
+    Guest,
+}
+
+/// Paths are `None` on hosts without a filesystem (the browser).
+#[derive(Debug, Clone)]
+pub struct Host {
+    pub role: Role,
+    pub responses_dir: Option<PathBuf>,
+}
+
+impl Host {
+    pub fn owner() -> Self {
+        Self { role: Role::Owner, responses_dir: None }
+    }
+
+    pub fn guest() -> Self {
+        Self { role: Role::Guest, responses_dir: None }
+    }
+
+    pub fn with_responses_dir(mut self, dir: impl Into<PathBuf>) -> Self {
+        self.responses_dir = Some(dir.into());
+        self
+    }
+}
+
+/// Run once after the database is open, before the host answers anything.
+/// Takes the write handle: a launch closes what the last session left open.
+pub fn on_launch(host: &Host, db: &WriteDb, blobs: &BlobManager) -> Result<()> {
+    db.prune_model_changes_older_than_hours(MODEL_CHANGES_RETENTION_HOURS)?;
+
+    if host.role == Role::Owner {
+        // Anything still in flight was left by the last session
+        db.cancel_pending_http_responses()?;
+        db.cancel_pending_grpc_connections()?;
+        db.cancel_pending_websocket_connections()?;
+
+        // Cascaded deletes never cleaned up response bodies
+        let deleted = match host.responses_dir.as_deref() {
+            Some(dir) => db.delete_orphaned_response_bodies(blobs, dir)?,
+            None => db.delete_orphaned_response_body_blobs(blobs)?,
+        };
+        if deleted > 0 {
+            info!("Deleted {deleted} orphaned response bodies");
+        }
+    }
+
+    Ok(())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use yaak_models::blob_manager::BodyChunk;
+    use yaak_models::init_in_memory;
+    use yaak_models::models::{HttpRequest, HttpResponse, HttpResponseState, Workspace};
+    use yaak_models::util::UpdateSource;
+
+    #[test]
+    fn only_the_owner_closes_what_the_last_session_left_open() {
+        let (query_manager, blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        let source = &UpdateSource::Background;
+
+        let pending = query_manager
+            .with_tx(|db| {
+                let workspace = db.upsert_workspace(
+                    &Workspace { name: "Hooks".to_string(), ..Default::default() },
+                    source,
+                )?;
+                let request = db.upsert_http_request(
+                    &HttpRequest { workspace_id: workspace.id.clone(), ..Default::default() },
+                    source,
+                )?;
+                db.upsert_http_response(
+                    &HttpResponse {
+                        request_id: request.id.clone(),
+                        workspace_id: workspace.id.clone(),
+                        state: HttpResponseState::Connected,
+                        ..Default::default()
+                    },
+                    source,
+                    &blob_manager,
+                )
+            })
+            .unwrap();
+
+        query_manager.with_tx(|db| on_launch(&Host::guest(), db, &blob_manager)).unwrap();
+        let response = query_manager.connect().get_http_response(&pending.id).unwrap();
+        assert!(matches!(response.state, HttpResponseState::Connected));
+
+        query_manager.with_tx(|db| on_launch(&Host::owner(), db, &blob_manager)).unwrap();
+        let response = query_manager.connect().get_http_response(&pending.id).unwrap();
+        assert!(matches!(response.state, HttpResponseState::Closed));
+    }
+
+    #[test]
+    fn owner_without_a_filesystem_still_sweeps_blobs() {
+        let (query_manager, blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        blob_manager
+            .with_tx(|b| b.insert_chunk(&BodyChunk::new("rs_gone", 0, b"dead".to_vec())))
+            .unwrap();
+
+        query_manager.with_tx(|db| on_launch(&Host::owner(), db, &blob_manager)).unwrap();
+
+        assert!(!blob_manager.connect().body_exists("rs_gone").unwrap());
+    }
+}
diff --git a/crates/yaak-models/Cargo.toml b/crates/yaak-models/Cargo.toml
new file mode 100644
index 0000000..e9cff8c
--- /dev/null
+++ b/crates/yaak-models/Cargo.toml
@@ -0,0 +1,29 @@
+[package]
+name = "yaak-models"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+chrono = { version = "0.4.38", features = ["serde"] }
+yaak-database = { workspace = true }
+hex = { workspace = true }
+include_dir = "0.7"
+log = { workspace = true }
+nanoid = "0.4.0"
+rusqlite = { version = "0.38", features = ["bundled", "chrono"] }
+sea-query = { version = "1.0", features = ["with-chrono", "attr"] }
+sea-query-rusqlite = { version = "0.8.0", features = ["with-chrono"] }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+schemars = { workspace = true }
+sha2 = { workspace = true }
+thiserror = { workspace = true }
+urlencoding = "2.1.3"
+ts-rs = { workspace = true, features = ["chrono-impl", "serde-json-impl"] }
+yaak-core = { workspace = true }
+yaak-templates = { path = "../yaak-templates", default-features = false }
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+r2d2 = "0.8.10"
+r2d2_sqlite = { version = "0.32" }
diff --git a/crates/yaak-models/bindings/ModelChangeEvent.ts b/crates/yaak-models/bindings/ModelChangeEvent.ts
new file mode 100644
index 0000000..36c8397
--- /dev/null
+++ b/crates/yaak-models/bindings/ModelChangeEvent.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type ModelChangeEvent = { "type": "upsert", created: boolean, } | { "type": "delete" };
diff --git a/crates/yaak-models/bindings/gen_models.ts b/crates/yaak-models/bindings/gen_models.ts
new file mode 100644
index 0000000..c4a4a1f
--- /dev/null
+++ b/crates/yaak-models/bindings/gen_models.ts
@@ -0,0 +1,580 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { ModelChangeEvent } from "./ModelChangeEvent";
+
+export type AnyModel =
+  | CookieJar
+  | Environment
+  | Folder
+  | GraphQlIntrospection
+  | GrpcConnection
+  | GrpcEvent
+  | GrpcRequest
+  | HttpRequest
+  | HttpResponse
+  | HttpResponseEvent
+  | ImportSource
+  | KeyValue
+  | Plugin
+  | Settings
+  | SyncState
+  | WebsocketConnection
+  | WebsocketEvent
+  | WebsocketRequest
+  | Workspace
+  | WorkspaceMeta;
+
+export type ClientCertificate = {
+  host: string;
+  port: number | null;
+  crtFile: string | null;
+  keyFile: string | null;
+  pfxFile: string | null;
+  passphrase: string | null;
+  enabled?: boolean;
+};
+
+export type Cookie = {
+  name: string;
+  value: string;
+  domain: CookieDomain;
+  expires: CookieExpires;
+  path: string;
+  secure: boolean;
+  httpOnly: boolean;
+  sameSite: CookieSameSite | null;
+};
+
+export type CookieDomain = { HostOnly: string } | { Suffix: string } | "NotPresent" | "Empty";
+
+export type CookieExpires = { AtUtc: string } | "SessionEnd";
+
+export type CookieJar = {
+  model: "cookie_jar";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  cookies: Array<Cookie>;
+  name: string;
+};
+
+export type CookieSameSite = "Strict" | "Lax" | "None";
+
+export type DnsOverride = {
+  hostname: string;
+  ipv4: Array<string>;
+  ipv6: Array<string>;
+  enabled?: boolean;
+};
+
+export type EditorKeymap = "default" | "vim" | "vscode" | "emacs";
+
+export type EncryptedKey = { encryptedKey: string };
+
+export type Environment = {
+  model: "environment";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  name: string;
+  public: boolean;
+  parentModel: string;
+  parentId: string | null;
+  /**
+   * Variables defined in this environment scope.
+   * Child environments override parent variables by name.
+   */
+  variables: Array<EnvironmentVariable>;
+  color: string | null;
+  sortPriority: number;
+};
+
+export type EnvironmentVariable = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type Folder = {
+  model: "folder";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  sortPriority: number;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type GraphQlIntrospection = {
+  model: "graphql_introspection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  content: string | null;
+};
+
+export type GrpcConnection = {
+  model: "grpc_connection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  elapsed: number;
+  error: string | null;
+  method: string;
+  service: string;
+  status: number;
+  state: GrpcConnectionState;
+  trailers: { [key in string]?: string };
+  url: string;
+};
+
+export type GrpcConnectionState = "initialized" | "connected" | "closed";
+
+export type GrpcEvent = {
+  model: "grpc_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  connectionId: string;
+  content: string;
+  error: string | null;
+  eventType: GrpcEventType;
+  metadata: { [key in string]?: string };
+  status: number | null;
+};
+
+export type GrpcEventType =
+  | "info"
+  | "error"
+  | "client_message"
+  | "server_message"
+  | "connection_start"
+  | "connection_end";
+
+export type GrpcRequest = {
+  model: "grpc_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authenticationType: string | null;
+  authentication: Record<string, any>;
+  description: string;
+  message: string;
+  metadata: Array<HttpRequestHeader>;
+  method: string | null;
+  name: string;
+  service: string | null;
+  sortPriority: number;
+  /**
+   * Server URL (http for plaintext or https for secure)
+   */
+  url: string;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type HttpRequest = {
+  model: "http_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  body: Record<string, any>;
+  bodyType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  method: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type HttpRequestHeader = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type HttpResponse = {
+  model: "http_response";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  contentLength: number | null;
+  contentLengthCompressed: number | null;
+  elapsed: number;
+  elapsedHeaders: number;
+  elapsedDns: number;
+  error: string | null;
+  headers: Array<HttpResponseHeader>;
+  remoteAddr: string | null;
+  requestContentLength: number | null;
+  requestHeaders: Array<HttpResponseHeader>;
+  status: number;
+  statusReason: string | null;
+  state: HttpResponseState;
+  url: string;
+  version: string | null;
+};
+
+export type HttpResponseEvent = {
+  model: "http_response_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  responseId: string;
+  event: HttpResponseEventData;
+};
+
+/**
+ * Serializable representation of HTTP response events for DB storage.
+ * This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
+ * The `From` impl is in yaak-http to avoid circular dependencies.
+ */
+export type HttpResponseEventData =
+  | {
+      type: "setting";
+      name: string;
+      value: string;
+      source_model?: string;
+      source_id?: string;
+      source_name?: string;
+    }
+  | { type: "info"; message: string }
+  | {
+      type: "redirect";
+      url: string;
+      status: number;
+      behavior: string;
+      dropped_body: boolean;
+      dropped_headers: Array<string>;
+    }
+  | {
+      type: "send_url";
+      method: string;
+      scheme: string;
+      username: string;
+      password: string;
+      host: string;
+      port: number;
+      path: string;
+      query: string;
+      fragment: string;
+    }
+  | { type: "receive_url"; version: string; status: string }
+  | { type: "header_up"; name: string; value: string }
+  | { type: "header_down"; name: string; value: string }
+  | { type: "chunk_sent"; bytes: number }
+  | { type: "chunk_received"; bytes: number }
+  | {
+      type: "dns_resolved";
+      hostname: string;
+      addresses: Array<string>;
+      duration: bigint;
+      overridden: boolean;
+    };
+
+export type HttpResponseHeader = { name: string; value: string };
+
+export type HttpResponseState = "initialized" | "connected" | "closed";
+
+/**
+ * The resolved send settings, values only: what an executor has to obey, with the sources
+ * (which model each came from) left behind in [`ResolvedHttpRequestSettings`]. This is what
+ * crosses from a tab to the Yaak server, and what the server reads.
+ */
+export type HttpSendSettings = {
+  validateCertificates: boolean;
+  followRedirects: boolean;
+  /**
+   * Milliseconds. Zero or negative means no timeout.
+   */
+  timeoutMs: number;
+  sendCookies: boolean;
+  storeCookies: boolean;
+  httpVersion: HttpVersion;
+};
+
+export type HttpUrlParameter = {
+  enabled?: boolean;
+  /**
+   * Colon-prefixed parameters are treated as path parameters if they match, like `/users/:id`
+   * Other entries are appended as query parameters
+   */
+  name: string;
+  value: string;
+  id?: string;
+};
+
+export type HttpVersion = "auto" | "http1" | "http2";
+
+export type ImportSource = {
+  model: "import_source";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  importer: string;
+  origin: string;
+  originLabel: string;
+  lastImportedAt: string;
+};
+
+export type ImportSourceResource = {
+  model: "import_source_resource";
+  createdAt: string;
+  updatedAt: string;
+  importSourceId: string;
+  sourceKey: string;
+  modelType: string;
+  /**
+   * `None` once the user has decided not to import this key
+   */
+  modelId?: string;
+  /**
+   * Hash of the resource as last applied or decided from the source, if one was recorded
+   */
+  contentHash?: string;
+};
+
+export type InheritedBoolSetting = { enabled?: boolean; value: boolean };
+
+export type InheritedHttpVersionSetting = { enabled?: boolean; value: HttpVersion };
+
+export type InheritedIntSetting = { enabled?: boolean; value: number };
+
+export type KeyValue = {
+  model: "key_value";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  key: string;
+  namespace: string;
+  value: string;
+};
+
+export type ModelPayload = {
+  model: AnyModel;
+  updateSource: UpdateSource;
+  change: ModelChangeEvent;
+};
+
+export type ParentAuthentication = {
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+};
+
+export type ParentHeaders = { headers: Array<HttpRequestHeader> };
+
+export type Plugin = {
+  model: "plugin";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  checkedAt: string | null;
+  directory: string;
+  enabled: boolean;
+  url: string | null;
+  source: PluginSource;
+};
+
+export type PluginKeyValue = {
+  model: "plugin_key_value";
+  createdAt: string;
+  updatedAt: string;
+  pluginName: string;
+  key: string;
+  value: string;
+};
+
+export type PluginSource = "bundled" | "filesystem" | "registry";
+
+export type ProxySetting =
+  | {
+      type: "enabled";
+      http: string;
+      https: string;
+      auth: ProxySettingAuth | null;
+      bypass: string;
+      disabled: boolean;
+    }
+  | { type: "disabled" };
+
+export type ProxySettingAuth = { user: string; password: string };
+
+export type Settings = {
+  model: "settings";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  appearance: string;
+  clientCertificates: Array<ClientCertificate>;
+  coloredMethods: boolean;
+  editorFont: string | null;
+  editorFontSize: number;
+  editorKeymap: EditorKeymap;
+  editorSoftWrap: boolean;
+  hideWindowControls: boolean;
+  useNativeTitlebar: boolean;
+  interfaceFont: string | null;
+  interfaceFontSize: number;
+  interfaceScale: number;
+  openWorkspaceNewWindow: boolean | null;
+  proxy: ProxySetting | null;
+  themeDark: string;
+  themeLight: string;
+  updateChannel: string;
+  hideLicenseBadge: boolean;
+  promptFeedback: boolean;
+  autoupdate: boolean;
+  autoDownloadUpdates: boolean;
+  checkNotifications: boolean;
+  hotkeys: { [key in string]?: Array<string> };
+};
+
+export type SyncState = {
+  model: "sync_state";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  flushedAt: string;
+  modelId: string;
+  checksum: string;
+  relPath: string;
+  syncDir: string;
+};
+
+export type UpdateSource =
+  | { type: "background" }
+  | { type: "import" }
+  | { type: "plugin" }
+  | { type: "sync" }
+  | { type: "window"; label: string };
+
+export type WebsocketConnection = {
+  model: "websocket_connection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  elapsed: number;
+  error: string | null;
+  headers: Array<HttpResponseHeader>;
+  state: WebsocketConnectionState;
+  status: number;
+  url: string;
+};
+
+export type WebsocketConnectionState = "initialized" | "connected" | "closing" | "closed";
+
+export type WebsocketEvent = {
+  model: "websocket_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  connectionId: string;
+  isServer: boolean;
+  message: Array<number>;
+  messageType: WebsocketEventType;
+};
+
+export type WebsocketEventType =
+  | "binary"
+  | "close"
+  | "error"
+  | "frame"
+  | "open"
+  | "ping"
+  | "pong"
+  | "text";
+
+export type WebsocketMessageType = "text" | "binary";
+
+export type WebsocketRequest = {
+  model: "websocket_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  message: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type Workspace = {
+  model: "workspace";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  encryptionKeyChallenge: string | null;
+  settingValidateCertificates: boolean;
+  settingFollowRedirects: boolean;
+  settingRequestTimeout: number;
+  settingRequestMessageSize: number;
+  settingDnsOverrides: Array<DnsOverride>;
+  settingSendCookies: boolean;
+  settingStoreCookies: boolean;
+  settingHttpVersion: HttpVersion;
+};
+
+export type WorkspaceMeta = {
+  model: "workspace_meta";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  encryptionKey: EncryptedKey | null;
+  settingSyncDir: string | null;
+};
diff --git a/crates/yaak-models/bindings/gen_util.ts b/crates/yaak-models/bindings/gen_util.ts
new file mode 100644
index 0000000..3217af2
--- /dev/null
+++ b/crates/yaak-models/bindings/gen_util.ts
@@ -0,0 +1,107 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type {
+  Environment,
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from "./gen_models";
+
+export type BatchUpsertResult = {
+  workspaces: Array<Workspace>;
+  environments: Array<Environment>;
+  folders: Array<Folder>;
+  httpRequests: Array<HttpRequest>;
+  grpcRequests: Array<GrpcRequest>;
+  websocketRequests: Array<WebsocketRequest>;
+};
+
+export type ImportConflictResolution = "keep_mine" | "take_source";
+
+/**
+ * Where a staged import will be committed.
+ *
+ * The destination workspace and optional folder IDs are captured in the plan so the preview describes
+ * the exact destination that confirmation will use.
+ */
+export type ImportDestination =
+  | { type: "new_workspace" }
+  | { type: "existing_workspace"; workspaceId: string; folderId?: string };
+
+/**
+ * Where an import's contents came from, used to link the committed workspace back to it.
+ */
+export type ImportOrigin = {
+  /**
+   * The absolute file path or URL the contents were read from.
+   */
+  origin: string;
+  label: string;
+};
+
+export type ImportPlan = {
+  importer: string;
+  destination: ImportDestination;
+  resources: BatchUpsertResult;
+  warnings: Array<ImportPlanWarning>;
+  /**
+   * Stable source key for every model in `resources`, keyed by its planned ID.
+   */
+  sourceKeys: { [key in string]?: string };
+  /**
+   * One entry per plannable resource; commit applies only the selected ones.
+   */
+  items: Array<ImportPlanItem>;
+  origin?: ImportOrigin;
+};
+
+export type ImportPlanAction =
+  | "create"
+  | "update"
+  | "delete"
+  | "unchanged"
+  | "keep_local"
+  | "conflict"
+  | "ignored";
+
+export type ImportPlanItem = {
+  action: ImportPlanAction;
+  model: ImportResourceType;
+  modelId: string;
+  name: string;
+  /**
+   * Planned parent folder ID for incoming resources; current parent for deletions.
+   */
+  parentId?: string;
+  selected: boolean;
+  resolution?: ImportConflictResolution;
+  reason?: ImportPlanReason;
+  /**
+   * Fields where the source and the local copy disagree, so the preview can say why
+   */
+  changedFields: Array<string>;
+};
+
+/**
+ * Extra context for an action that would otherwise be indistinguishable from its plain form.
+ */
+export type ImportPlanReason = "moved_into_ignored_folder";
+
+export type ImportPlanWarning = { title: string; detail: string; level: ImportPlanWarningLevel };
+
+/**
+ * Whether a plan's note is something to know or something to think twice about.
+ */
+export type ImportPlanWarningLevel = "info" | "warning";
+
+/**
+ * The model types an import plan can contain.
+ */
+export type ImportResourceType =
+  | "environment"
+  | "folder"
+  | "grpc_request"
+  | "http_request"
+  | "websocket_request"
+  | "workspace";
diff --git a/crates/yaak-models/blob_migrations/00000000000000_init.sql b/crates/yaak-models/blob_migrations/00000000000000_init.sql
new file mode 100644
index 0000000..7589cb4
--- /dev/null
+++ b/crates/yaak-models/blob_migrations/00000000000000_init.sql
@@ -0,0 +1,12 @@
+CREATE TABLE body_chunks
+(
+    id          TEXT PRIMARY KEY,
+    body_id     TEXT    NOT NULL,
+    chunk_index INTEGER NOT NULL,
+    data        BLOB    NOT NULL,
+    created_at  DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+
+    UNIQUE (body_id, chunk_index)
+);
+
+CREATE INDEX idx_body_chunks_body_id ON body_chunks (body_id, chunk_index);
diff --git a/crates/yaak-models/build.rs b/crates/yaak-models/build.rs
new file mode 100644
index 0000000..157d24d
--- /dev/null
+++ b/crates/yaak-models/build.rs
@@ -0,0 +1,5 @@
+fn main() {
+    // Migrations are embedded with include_dir!, so trigger rebuilds when SQL files change.
+    println!("cargo:rerun-if-changed=migrations");
+    println!("cargo:rerun-if-changed=blob_migrations");
+}
diff --git a/crates/yaak-models/guest-js/atoms.test.ts b/crates/yaak-models/guest-js/atoms.test.ts
new file mode 100644
index 0000000..517c818
--- /dev/null
+++ b/crates/yaak-models/guest-js/atoms.test.ts
@@ -0,0 +1,59 @@
+import { createStore } from "jotai";
+import { expect, test } from "vitest";
+import type { HttpResponseEvent } from "../bindings/gen_models";
+import { httpResponseEventsAtom, modelStoreDataAtom } from "./atoms";
+import { newStoreData } from "./util";
+
+// The five setting events that every send writes, all within the same millisecond
+const SETTING_NAMES = [
+  "validate_certificates",
+  "redirects",
+  "timeout",
+  "send_cookies",
+  "store_cookies",
+];
+
+function settingEvent(id: string, name: string, createdAt: string): HttpResponseEvent {
+  return {
+    model: "http_response_event",
+    id,
+    createdAt,
+    updatedAt: createdAt,
+    workspaceId: "wk_1",
+    responseId: "rs_1",
+    event: { type: "setting", name, value: "true" },
+  };
+}
+
+test("events with equal createdAt keep store (DB) insertion order", () => {
+  const store = createStore();
+  const data = newStoreData();
+  SETTING_NAMES.forEach((name, i) => {
+    data.http_response_event[`hre_${i}`] = settingEvent(
+      `hre_${i}`,
+      name,
+      "2026-08-17T00:00:00.123",
+    );
+  });
+  store.set(modelStoreDataAtom, data);
+
+  const names = store.get(httpResponseEventsAtom).map((e) => {
+    return e.event.type === "setting" ? e.event.name : e.event.type;
+  });
+  expect(names).toEqual(SETTING_NAMES);
+});
+
+test("events with distinct createdAt sort ascending", () => {
+  const store = createStore();
+  const data = newStoreData();
+  for (const [id, createdAt] of [
+    ["hre_b", "2026-08-17T00:00:00.456"],
+    ["hre_a", "2026-08-17T00:00:00.123"],
+    ["hre_c", "2026-08-17T00:00:00.789"],
+  ]) {
+    data.http_response_event[id!] = settingEvent(id!, "timeout", createdAt!);
+  }
+  store.set(modelStoreDataAtom, data);
+
+  expect(store.get(httpResponseEventsAtom).map((e) => e.id)).toEqual(["hre_a", "hre_b", "hre_c"]);
+});
diff --git a/crates/yaak-models/guest-js/atoms.ts b/crates/yaak-models/guest-js/atoms.ts
new file mode 100644
index 0000000..24c6823
--- /dev/null
+++ b/crates/yaak-models/guest-js/atoms.ts
@@ -0,0 +1,87 @@
+import { atom } from "jotai";
+
+import { selectAtom } from "jotai/utils";
+import type { AnyModel } from "../bindings/gen_models";
+import { ExtractModel } from "./types";
+import { newStoreData } from "./util";
+
+export const modelStoreDataAtom = atom(newStoreData());
+
+export const cookieJarsAtom = createOrderedModelAtom("cookie_jar", "name", "asc");
+export const environmentsAtom = createOrderedModelAtom("environment", "sortPriority", "asc");
+export const foldersAtom = createModelAtom("folder");
+export const grpcConnectionsAtom = createOrderedModelAtom("grpc_connection", "createdAt", "desc");
+export const grpcEventsAtom = createOrderedModelAtom("grpc_event", "createdAt", "asc");
+export const grpcRequestsAtom = createModelAtom("grpc_request");
+export const httpRequestsAtom = createModelAtom("http_request");
+export const httpResponsesAtom = createOrderedModelAtom("http_response", "createdAt", "desc");
+export const httpResponseEventsAtom = createOrderedModelAtom(
+  "http_response_event",
+  "createdAt",
+  "asc",
+);
+export const keyValuesAtom = createModelAtom("key_value");
+export const pluginsAtom = createModelAtom("plugin");
+export const settingsAtom = createSingularModelAtom("settings");
+export const websocketRequestsAtom = createModelAtom("websocket_request");
+export const websocketEventsAtom = createOrderedModelAtom("websocket_event", "createdAt", "asc");
+export const websocketConnectionsAtom = createOrderedModelAtom(
+  "websocket_connection",
+  "createdAt",
+  "desc",
+);
+export const workspaceMetasAtom = createModelAtom("workspace_meta");
+export const workspacesAtom = createOrderedModelAtom("workspace", "name", "asc");
+
+export function createModelAtom<M extends AnyModel["model"]>(modelType: M) {
+  return selectAtom(
+    modelStoreDataAtom,
+    (data) => Object.values(data[modelType] ?? {}),
+    shallowEqual,
+  );
+}
+
+export function createSingularModelAtom<M extends AnyModel["model"]>(modelType: M) {
+  return selectAtom(modelStoreDataAtom, (data) => {
+    const modelData = Object.values(data[modelType] ?? {});
+    const item = modelData[0];
+    if (item == null) throw new Error("Failed creating singular model with no data: " + modelType);
+    return item;
+  });
+}
+
+export function createOrderedModelAtom<M extends AnyModel["model"]>(
+  modelType: M,
+  field: keyof ExtractModel<AnyModel, M>,
+  order: "asc" | "desc",
+) {
+  return selectAtom(
+    modelStoreDataAtom,
+    (data) => {
+      const modelData = data[modelType] ?? {};
+      return Object.values(modelData).sort(
+        (a: ExtractModel<AnyModel, M>, b: ExtractModel<AnyModel, M>) => {
+          // NOTE: ties must return 0, or the comparator is inconsistent and V8 reorders
+          //  equal-keyed rows. Sort is stable, so 0 preserves store (DB) insertion order.
+          const n = a[field] === b[field] ? 0 : a[field] > b[field] ? 1 : -1;
+          return order === "desc" ? n * -1 : n;
+        },
+      );
+    },
+    shallowEqual,
+  );
+}
+
+function shallowEqual<T>(a: T[], b: T[]): boolean {
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/crates/yaak-models/guest-js/index.ts b/crates/yaak-models/guest-js/index.ts
new file mode 100644
index 0000000..7ceff15
--- /dev/null
+++ b/crates/yaak-models/guest-js/index.ts
@@ -0,0 +1,11 @@
+import { AnyModel } from "../bindings/gen_models";
+
+export * from "../bindings/gen_models";
+export * from "../bindings/gen_util";
+export * from "./store";
+export * from "./atoms";
+
+export function modelTypeLabel(m: AnyModel): string {
+  const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+  return m.model.split("_").map(capitalize).join(" ");
+}
diff --git a/crates/yaak-models/guest-js/store.ts b/crates/yaak-models/guest-js/store.ts
new file mode 100644
index 0000000..5f37e47
--- /dev/null
+++ b/crates/yaak-models/guest-js/store.ts
@@ -0,0 +1,413 @@
+import { platform } from "@yaakapp-internal/platform";
+import { debounce } from "@yaakapp-internal/lib";
+import { AnyModel, ModelPayload } from "../bindings/gen_models";
+import { modelStoreDataAtom } from "./atoms";
+import { ExtractModel, JotaiStore, ModelStoreData } from "./types";
+import { newStoreData } from "./util";
+
+let _store: JotaiStore | null = null;
+
+const pendingModelWrites = new Set<Promise<unknown>>();
+
+export function initModelStore(store: JotaiStore) {
+  _store = store;
+
+  // Don't lose debounced patches if the window closes while one is pending
+  window.addEventListener("beforeunload", flushAllPendingPatches);
+
+  platform.listen<ModelPayload[]>("model_writes", (payloads) => {
+    mustStore().set(modelStoreDataAtom, (prev: ModelStoreData) => {
+      // Apply the entire batch in one update, cloning each touched bucket only
+      // once. Bulk writes (imports, sync, CLI) can carry hundreds of models.
+      const next = { ...prev };
+      const clonedBuckets = new Set<AnyModel["model"]>();
+      let changed = false;
+
+      for (const payload of payloads) {
+        if (shouldIgnoreModel(payload)) continue;
+        if (isUnsafeObjectKey(payload.model.model)) continue;
+        if (isUnsafeObjectKey(payload.model.id)) continue;
+
+        if (payload.change.type === "upsert") {
+          const modelType = payload.model.model;
+          if (!clonedBuckets.has(modelType)) {
+            next[modelType] = { ...next[modelType] } as never;
+            clonedBuckets.add(modelType);
+          }
+          (next[modelType] as Record<string, AnyModel>)[payload.model.id] = payload.model;
+          changed = true;
+        } else {
+          changed = applyModelDelete(next, clonedBuckets, payload.model) || changed;
+        }
+      }
+
+      return changed ? next : prev;
+    });
+  });
+}
+
+/**
+ * Model buckets are plain objects keyed by model id, so ids that collide with
+ * Object.prototype members ("__proto__" etc.) could pollute the prototype.
+ * Real model ids are backend-generated and never look like this.
+ */
+function isUnsafeObjectKey(key: string): boolean {
+  return key === "__proto__" || key === "constructor" || key === "prototype";
+}
+
+function deleteFromBucket(
+  next: ModelStoreData,
+  clonedBuckets: Set<AnyModel["model"]>,
+  modelType: AnyModel["model"],
+  id: string,
+): boolean {
+  if (isUnsafeObjectKey(modelType)) return false;
+  if (isUnsafeObjectKey(id)) return false;
+  if (!Object.prototype.hasOwnProperty.call(next[modelType], id)) return false;
+  if (!clonedBuckets.has(modelType)) {
+    next[modelType] = { ...next[modelType] } as never;
+    clonedBuckets.add(modelType);
+  }
+  delete (next[modelType] as Record<string, AnyModel>)[id];
+  return true;
+}
+
+/**
+ * Apply a model delete to store data, mutating `next` in place (buckets are
+ * cloned once, tracked via `clonedBuckets`). A workspace delete implies its
+ * entire subtree: the backend bulk-deletes children and records/emits only the
+ * workspace event (see ModelChangeEvent), so prune them here.
+ */
+function applyModelDelete(
+  next: ModelStoreData,
+  clonedBuckets: Set<AnyModel["model"]>,
+  model: AnyModel,
+): boolean {
+  let changed = deleteFromBucket(next, clonedBuckets, model.model, model.id);
+
+  if (model.model === "workspace") {
+    for (const modelType of Object.keys(next) as AnyModel["model"][]) {
+      const bucket = next[modelType] as Record<string, AnyModel>;
+      for (const [id, m] of Object.entries(bucket)) {
+        if ("workspaceId" in m && m.workspaceId === model.id) {
+          changed = deleteFromBucket(next, clonedBuckets, modelType, id) || changed;
+        }
+      }
+    }
+  }
+
+  return changed;
+}
+
+function mustStore(): JotaiStore {
+  if (_store == null) {
+    throw new Error("Model store was not initialized");
+  }
+
+  return _store;
+}
+
+function trackModelWrite<T>(write: Promise<T>): Promise<T> {
+  const tracked = write.finally(() => {
+    pendingModelWrites.delete(tracked);
+  });
+
+  pendingModelWrites.add(tracked);
+  return tracked;
+}
+
+export async function flushAllModelWrites(): Promise<void> {
+  flushAllPendingPatches();
+  const results = await Promise.allSettled(pendingModelWrites);
+  const rejected = results.find((result) => result.status === "rejected");
+  if (rejected?.status === "rejected") {
+    throw rejected.reason;
+  }
+}
+
+const PATCH_DEBOUNCE_MS = 400;
+
+interface PendingPatch {
+  model: AnyModel["model"];
+  id: string;
+  patch: Record<string, unknown>;
+  write: ReturnType<typeof debounce>;
+}
+
+const pendingPatches = new Map<string, PendingPatch>();
+
+/**
+ * Like patchModel, but coalesces rapid patches to the same model (eg. one per
+ * keystroke) into a single write. Later fields overwrite earlier ones, so it's
+ * only safe for whole-value fields like url, body, or headers. Pending patches
+ * flush after a short delay, and flushAllModelWrites() (called before sends and
+ * duplicates) flushes them immediately.
+ */
+export function patchModelDebounced<
+  M extends AnyModel["model"],
+  T extends ExtractModel<AnyModel, M>,
+>(base: Pick<T, "id" | "model">, patch: Partial<T>): void {
+  const key = `${base.model}.${base.id}`;
+  let pending = pendingPatches.get(key);
+  if (pending == null) {
+    pending = {
+      model: base.model,
+      id: base.id,
+      patch: {},
+      write: debounce(() => writePendingPatch(key), PATCH_DEBOUNCE_MS),
+    };
+    pendingPatches.set(key, pending);
+  }
+  pending.patch = { ...pending.patch, ...patch };
+  pending.write();
+}
+
+function writePendingPatch(key: string) {
+  const pending = pendingPatches.get(key);
+  if (pending == null) return;
+  pendingPatches.delete(key);
+  try {
+    void patchModelById(pending.model, pending.id, pending.patch);
+  } catch (err) {
+    // Model may have been deleted while the patch was pending
+    console.warn("Failed to flush pending patch", key, err);
+  }
+}
+
+export function flushAllPendingPatches() {
+  for (const pending of Array.from(pendingPatches.values())) {
+    pending.write.flush();
+  }
+}
+
+/**
+ * Apply a model's pending patch, if it has one that hasn't been written yet.
+ *
+ * The store only moves forward when the backend echoes a write back, so between a keystroke and
+ * its debounced write the stored copy is behind what the user typed. Reading through the pending
+ * patch keeps that window invisible to the imperative readers below, which are the ones that go
+ * on to write the model back.
+ */
+function withPendingPatch<T>(model: T | null): T | null {
+  if (model == null || pendingPatches.size === 0) return model;
+  const { model: modelType, id } = model as { model?: string; id?: string };
+  const pending = pendingPatches.get(`${modelType}.${id}`);
+  return pending == null ? model : ({ ...model, ...pending.patch } as T);
+}
+
+/** Drop a model's pending patch and cancel its scheduled write */
+function consumePendingPatch(model: AnyModel["model"], id: string) {
+  const key = `${model}.${id}`;
+  const pending = pendingPatches.get(key);
+  if (pending == null) return;
+  pending.write.cancel();
+  pendingPatches.delete(key);
+}
+
+let _activeWorkspaceId: string | null = null;
+
+export async function changeModelStoreWorkspace(workspaceId: string | null) {
+  console.log("Syncing models with new workspace", workspaceId);
+  const workspaceModelsStr = await platform.rpc<string>("models_workspace_models", {
+    workspaceId, // NOTE: if no workspace id provided, it will just fetch global models
+  });
+  const workspaceModels = JSON.parse(workspaceModelsStr) as AnyModel[];
+  const data = newStoreData();
+  for (const model of workspaceModels) {
+    data[model.model][model.id] = model;
+  }
+
+  mustStore().set(modelStoreDataAtom, data);
+
+  console.log("Synced model store with workspace", workspaceId, data);
+
+  _activeWorkspaceId = workspaceId;
+}
+
+export function listModels<M extends AnyModel["model"], T extends ExtractModel<AnyModel, M>>(
+  modelType: M | ReadonlyArray<M>,
+): T[] {
+  let data = mustStore().get(modelStoreDataAtom);
+  const types: ReadonlyArray<M> = Array.isArray(modelType) ? modelType : [modelType];
+  return types.flatMap((t) => Object.values(data[t]) as T[]);
+}
+
+export function getModel<M extends AnyModel["model"], T extends ExtractModel<AnyModel, M>>(
+  modelType: M | ReadonlyArray<M>,
+  id: string,
+): T | null {
+  let data = mustStore().get(modelStoreDataAtom);
+  const types: ReadonlyArray<M> = Array.isArray(modelType) ? modelType : [modelType];
+  for (const t of types) {
+    let v = data[t][id];
+    if (v?.model === t) return withPendingPatch(v as T);
+  }
+  return null;
+}
+
+export function getAnyModel(id: string): AnyModel | null {
+  let data = mustStore().get(modelStoreDataAtom);
+  for (const t of Object.keys(data)) {
+    // oxlint-disable-next-line no-explicit-any -- dynamic key access
+    let v = (data as any)[t]?.[id];
+    if (v?.model === t) return withPendingPatch(v);
+  }
+  return null;
+}
+
+export function patchModelById<M extends AnyModel["model"], T extends ExtractModel<AnyModel, M>>(
+  model: M,
+  id: string,
+  patch: Partial<T> | ((prev: T) => T),
+): Promise<string> {
+  // Reads through any pending debounced patch, so the merge below can't put a stale value back
+  // over something the user has already typed
+  let prev = getModel<M, T>(model, id);
+  if (prev == null) {
+    throw new Error(`Failed to get model to patch id=${id} model=${model}`);
+  }
+
+  // `prev` already carries the pending patch, so this write supersedes it. Leaving it queued
+  // would let it land afterwards and undo whatever this write decided.
+  consumePendingPatch(model, id);
+
+  const newModel = typeof patch === "function" ? patch(prev) : { ...prev, ...patch };
+  return updateModel(newModel);
+}
+
+export async function patchModel<M extends AnyModel["model"], T extends ExtractModel<AnyModel, M>>(
+  base: Pick<T, "id" | "model">,
+  patch: Partial<T>,
+): Promise<string> {
+  return patchModelById<M, T>(base.model, base.id, patch);
+}
+
+export async function updateModel<M extends AnyModel["model"], T extends ExtractModel<AnyModel, M>>(
+  model: T,
+): Promise<string> {
+  return trackModelWrite(platform.rpc<string>("models_upsert", { model }));
+}
+
+export async function deleteModelById<
+  M extends AnyModel["model"],
+  T extends ExtractModel<AnyModel, M>,
+>(modelType: M | M[], id: string) {
+  let model = getModel<M, T>(modelType, id);
+  await deleteModel(model);
+}
+
+export async function deleteModel<M extends AnyModel["model"], T extends ExtractModel<AnyModel, M>>(
+  model: T | null,
+) {
+  if (model == null) {
+    throw new Error("Failed to delete null model");
+  }
+  await trackModelWrite(platform.rpc<string>("models_delete", { model }));
+
+  // Apply the delete locally right away so callers can rely on the store once the
+  // promise resolves. The backend echo arrives async, so anything that reads the
+  // store immediately after awaiting (e.g. redirecting away from a deleted
+  // workspace) would otherwise race it. The echo re-applying later is a no-op.
+  mustStore().set(modelStoreDataAtom, (prev: ModelStoreData) => {
+    const next = { ...prev };
+    return applyModelDelete(next, new Set(), model as AnyModel) ? next : prev;
+  });
+}
+
+export async function duplicateModel<
+  M extends AnyModel["model"],
+  T extends ExtractModel<AnyModel, M>,
+>(model: T | null): Promise<string> {
+  if (model == null) {
+    throw new Error("Failed to duplicate null model");
+  }
+
+  // Flush pending writes first, since the backend duplicates from the DB (the passed-in
+  // model may be a stale snapshot, eg. from the memoized sidebar tree). Conflict-free
+  // naming ("Foo Copy 2") is also handled by the backend.
+  await flushAllModelWrites();
+
+  return trackModelWrite(
+    platform.rpc<string>("models_duplicate", { modelType: model.model, modelId: model.id }),
+  );
+}
+
+export async function createGlobalModel<T extends Exclude<AnyModel, { workspaceId: string }>>(
+  patch: Partial<T> & Pick<T, "model">,
+): Promise<string> {
+  return trackModelWrite(platform.rpc<string>("models_upsert", { model: patch }));
+}
+
+export async function createWorkspaceModel<T extends Extract<AnyModel, { workspaceId: string }>>(
+  patch: Partial<T> & Pick<T, "model" | "workspaceId">,
+): Promise<string> {
+  return trackModelWrite(platform.rpc<string>("models_upsert", { model: patch }));
+}
+
+export function replaceModelsInStore<
+  M extends AnyModel["model"],
+  T extends Extract<AnyModel, { model: M }>,
+>(model: M, models: T[]) {
+  const newModels: Record<string, T> = {};
+  for (const model of models) {
+    newModels[model.id] = model;
+  }
+
+  mustStore().set(modelStoreDataAtom, (prev: ModelStoreData) => {
+    return {
+      ...prev,
+      [model]: newModels,
+    };
+  });
+}
+
+export function mergeModelsInStore<
+  M extends AnyModel["model"],
+  T extends Extract<AnyModel, { model: M }>,
+>(model: M, models: T[], filter?: (model: T) => boolean) {
+  mustStore().set(modelStoreDataAtom, (prev: ModelStoreData) => {
+    const existingModels = { ...prev[model] } as Record<string, T>;
+
+    // Merge in new models first
+    for (const m of models) {
+      existingModels[m.id] = m;
+    }
+
+    // Then filter out unwanted models
+    if (filter) {
+      for (const [id, m] of Object.entries(existingModels)) {
+        if (!filter(m)) {
+          delete existingModels[id];
+        }
+      }
+    }
+
+    return {
+      ...prev,
+      [model]: existingModels,
+    };
+  });
+}
+
+function shouldIgnoreModel({ model, updateSource }: ModelPayload) {
+  // Never ignore updates from non-user sources
+  if (updateSource.type !== "window") {
+    return false;
+  }
+
+  // Never ignore same-window updates
+  if (updateSource.label === platform.window.label) {
+    return false;
+  }
+
+  // Only sync models that belong to this workspace, if a workspace ID is present
+  if ("workspaceId" in model && model.workspaceId !== _activeWorkspaceId) {
+    return true;
+  }
+
+  if (model.model === "key_value" && model.namespace === "no_sync") {
+    return true;
+  }
+
+  return false;
+}
diff --git a/crates/yaak-models/guest-js/types.ts b/crates/yaak-models/guest-js/types.ts
new file mode 100644
index 0000000..56f6306
--- /dev/null
+++ b/crates/yaak-models/guest-js/types.ts
@@ -0,0 +1,8 @@
+import { createStore } from "jotai";
+import { AnyModel } from "../bindings/gen_models";
+
+export type ExtractModel<T, M> = T extends { model: M } ? T : never;
+export type ModelStoreData<T extends AnyModel = AnyModel> = {
+  [M in T["model"]]: Record<string, Extract<T, { model: M }>>;
+};
+export type JotaiStore = ReturnType<typeof createStore>;
diff --git a/crates/yaak-models/guest-js/util.ts b/crates/yaak-models/guest-js/util.ts
new file mode 100644
index 0000000..cee6758
--- /dev/null
+++ b/crates/yaak-models/guest-js/util.ts
@@ -0,0 +1,26 @@
+import { ModelStoreData } from "./types";
+
+export function newStoreData(): ModelStoreData {
+  return {
+    cookie_jar: {},
+    environment: {},
+    folder: {},
+    graphql_introspection: {},
+    grpc_connection: {},
+    grpc_event: {},
+    grpc_request: {},
+    http_request: {},
+    http_response: {},
+    http_response_event: {},
+    import_source: {},
+    key_value: {},
+    plugin: {},
+    settings: {},
+    sync_state: {},
+    websocket_connection: {},
+    websocket_event: {},
+    websocket_request: {},
+    workspace: {},
+    workspace_meta: {},
+  };
+}
diff --git a/crates/yaak-models/migrations/20230225181302_init.sql b/crates/yaak-models/migrations/20230225181302_init.sql
new file mode 100644
index 0000000..52fa79e
--- /dev/null
+++ b/crates/yaak-models/migrations/20230225181302_init.sql
@@ -0,0 +1,65 @@
+CREATE TABLE key_values
+(
+    model      TEXT     DEFAULT 'key_value'       NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at DATETIME,
+    namespace  TEXT                               NOT NULL,
+    key        TEXT                               NOT NULL,
+    value      TEXT                               NOT NULL,
+    PRIMARY KEY (namespace, key)
+);
+
+CREATE TABLE workspaces
+(
+    id          TEXT                               NOT NULL
+        PRIMARY KEY,
+    model       TEXT     DEFAULT 'workspace'       NOT NULL,
+    created_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at  DATETIME,
+    name        TEXT                               NOT NULL,
+    description TEXT                               NOT NULL
+);
+
+CREATE TABLE http_requests
+(
+    id           TEXT                               NOT NULL
+        PRIMARY KEY,
+    model        TEXT     DEFAULT 'http_request'    NOT NULL,
+    workspace_id TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at   DATETIME,
+    name         TEXT                               NOT NULL,
+    url          TEXT                               NOT NULL,
+    method       TEXT                               NOT NULL,
+    headers      TEXT                               NOT NULL,
+    body         TEXT,
+    body_type    TEXT
+);
+
+CREATE TABLE http_responses
+(
+    id            TEXT                               NOT NULL
+        PRIMARY KEY,
+    model         TEXT     DEFAULT 'http_response'   NOT NULL,
+    request_id    TEXT                               NOT NULL
+        REFERENCES http_requests
+            ON DELETE CASCADE,
+    workspace_id  TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    created_at    DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at    DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at    DATETIME,
+    elapsed       INTEGER                            NOT NULL,
+    status        INTEGER                            NOT NULL,
+    status_reason TEXT,
+    url           TEXT                               NOT NULL,
+    body          TEXT                               NOT NULL,
+    headers       TEXT                               NOT NULL,
+    error         TEXT
+);
diff --git a/crates/yaak-models/migrations/20230319042610_sort-priority.sql b/crates/yaak-models/migrations/20230319042610_sort-priority.sql
new file mode 100644
index 0000000..29a1924
--- /dev/null
+++ b/crates/yaak-models/migrations/20230319042610_sort-priority.sql
@@ -0,0 +1 @@
+ALTER TABLE main.http_requests ADD COLUMN sort_priority REAL NOT NULL DEFAULT 0;
diff --git a/crates/yaak-models/migrations/20230330143214_request-auth.sql b/crates/yaak-models/migrations/20230330143214_request-auth.sql
new file mode 100644
index 0000000..6e792c6
--- /dev/null
+++ b/crates/yaak-models/migrations/20230330143214_request-auth.sql
@@ -0,0 +1,2 @@
+ALTER TABLE http_requests ADD COLUMN authentication TEXT NOT NULL DEFAULT '{}';
+ALTER TABLE http_requests ADD COLUMN authentication_type TEXT;
diff --git a/crates/yaak-models/migrations/20230413232435_response-body-blob.sql b/crates/yaak-models/migrations/20230413232435_response-body-blob.sql
new file mode 100644
index 0000000..3296e69
--- /dev/null
+++ b/crates/yaak-models/migrations/20230413232435_response-body-blob.sql
@@ -0,0 +1,5 @@
+DELETE FROM main.http_responses;
+ALTER TABLE http_responses DROP COLUMN body;
+ALTER TABLE http_responses ADD COLUMN body BLOB;
+ALTER TABLE http_responses ADD COLUMN body_path TEXT;
+ALTER TABLE http_responses ADD COLUMN content_length INTEGER;
diff --git a/crates/yaak-models/migrations/20231022205109_environments.sql b/crates/yaak-models/migrations/20231022205109_environments.sql
new file mode 100644
index 0000000..5bba9bd
--- /dev/null
+++ b/crates/yaak-models/migrations/20231022205109_environments.sql
@@ -0,0 +1,15 @@
+CREATE TABLE environments
+(
+    id          TEXT                               NOT NULL
+        PRIMARY KEY,
+    model       TEXT     DEFAULT 'workspace'       NOT NULL,
+    created_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at  DATETIME,
+    workspace_id TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    name        TEXT                               NOT NULL,
+    data        TEXT                               NOT NULL
+        DEFAULT '{}'
+);
diff --git a/crates/yaak-models/migrations/20231028161007_variables.sql b/crates/yaak-models/migrations/20231028161007_variables.sql
new file mode 100644
index 0000000..f8caa9d
--- /dev/null
+++ b/crates/yaak-models/migrations/20231028161007_variables.sql
@@ -0,0 +1,2 @@
+ALTER TABLE environments DROP COLUMN data;
+ALTER TABLE environments ADD COLUMN variables DEFAULT '[]' NOT NULL;
diff --git a/crates/yaak-models/migrations/20231103004111_workspace-variables.sql b/crates/yaak-models/migrations/20231103004111_workspace-variables.sql
new file mode 100644
index 0000000..5873f12
--- /dev/null
+++ b/crates/yaak-models/migrations/20231103004111_workspace-variables.sql
@@ -0,0 +1 @@
+ALTER TABLE workspaces ADD COLUMN variables DEFAULT '[]' NOT NULL;
diff --git a/crates/yaak-models/migrations/20231103142807_folders.sql b/crates/yaak-models/migrations/20231103142807_folders.sql
new file mode 100644
index 0000000..5278e9e
--- /dev/null
+++ b/crates/yaak-models/migrations/20231103142807_folders.sql
@@ -0,0 +1,19 @@
+CREATE TABLE folders
+(
+    id            TEXT                               NOT NULL
+        PRIMARY   KEY,
+    model         TEXT     DEFAULT 'folder'          NOT NULL,
+    created_at    DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at    DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at    DATETIME,
+    workspace_id  TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    folder_id     TEXT                               NULL
+        REFERENCES folders
+            ON DELETE CASCADE,
+    name          TEXT                               NOT NULL,
+    sort_priority REAL     DEFAULT 0                 NOT NULL
+);
+
+ALTER TABLE http_requests ADD COLUMN folder_id TEXT REFERENCES folders(id) ON DELETE CASCADE;
diff --git a/crates/yaak-models/migrations/20231112180500_body_object.sql b/crates/yaak-models/migrations/20231112180500_body_object.sql
new file mode 100644
index 0000000..bba1b0a
--- /dev/null
+++ b/crates/yaak-models/migrations/20231112180500_body_object.sql
@@ -0,0 +1,16 @@
+-- Rename old column to backup name
+ALTER TABLE http_requests
+    RENAME COLUMN body TO body_old;
+
+-- Create desired new body column
+ALTER TABLE http_requests
+    ADD COLUMN body TEXT NOT NULL DEFAULT '{}';
+
+-- Copy data from old to new body, in new JSON format
+UPDATE http_requests
+SET body = CASE WHEN body_old IS NULL THEN '{}' ELSE JSON_OBJECT('text', body_old) END
+WHERE TRUE;
+
+-- Drop old column
+ALTER TABLE http_requests
+    DROP COLUMN body_old;
diff --git a/crates/yaak-models/migrations/20231113183810_url_params.sql b/crates/yaak-models/migrations/20231113183810_url_params.sql
new file mode 100644
index 0000000..acdd827
--- /dev/null
+++ b/crates/yaak-models/migrations/20231113183810_url_params.sql
@@ -0,0 +1,2 @@
+ALTER TABLE http_requests
+    ADD COLUMN url_parameters TEXT NOT NULL DEFAULT '[]';
diff --git a/crates/yaak-models/migrations/20231122055216_remove_body.sql b/crates/yaak-models/migrations/20231122055216_remove_body.sql
new file mode 100644
index 0000000..524579d
--- /dev/null
+++ b/crates/yaak-models/migrations/20231122055216_remove_body.sql
@@ -0,0 +1 @@
+ALTER TABLE http_responses DROP COLUMN body;
diff --git a/crates/yaak-models/migrations/20240111221224_settings.sql b/crates/yaak-models/migrations/20240111221224_settings.sql
new file mode 100644
index 0000000..4044bef
--- /dev/null
+++ b/crates/yaak-models/migrations/20240111221224_settings.sql
@@ -0,0 +1,13 @@
+CREATE TABLE settings
+(
+    id                    TEXT                               NOT NULL
+        PRIMARY KEY,
+    model                 TEXT     DEFAULT 'settings'        NOT NULL,
+    created_at            DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at            DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    follow_redirects      BOOLEAN  DEFAULT TRUE              NOT NULL,
+    validate_certificates BOOLEAN  DEFAULT TRUE              NOT NULL,
+    request_timeout       INTEGER  DEFAULT 0                 NOT NULL,
+    theme                 TEXT     DEFAULT 'default'         NOT NULL,
+    appearance            TEXT     DEFAULT 'system'          NOT NULL
+);
diff --git a/crates/yaak-models/migrations/20240115193751_workspace_settings.sql b/crates/yaak-models/migrations/20240115193751_workspace_settings.sql
new file mode 100644
index 0000000..c09669a
--- /dev/null
+++ b/crates/yaak-models/migrations/20240115193751_workspace_settings.sql
@@ -0,0 +1,9 @@
+-- Add existing request-related settings to workspace
+ALTER TABLE workspaces ADD COLUMN setting_request_timeout INTEGER DEFAULT '0' NOT NULL;
+ALTER TABLE workspaces ADD COLUMN setting_validate_certificates BOOLEAN DEFAULT TRUE NOT NULL;
+ALTER TABLE workspaces ADD COLUMN setting_follow_redirects BOOLEAN DEFAULT TRUE NOT NULL;
+
+-- Remove old settings that used to be global
+ALTER TABLE settings DROP COLUMN request_timeout;
+ALTER TABLE settings DROP COLUMN follow_redirects;
+ALTER TABLE settings DROP COLUMN validate_certificates;
diff --git a/crates/yaak-models/migrations/20240118181105_channel_setting.sql b/crates/yaak-models/migrations/20240118181105_channel_setting.sql
new file mode 100644
index 0000000..8d81be2
--- /dev/null
+++ b/crates/yaak-models/migrations/20240118181105_channel_setting.sql
@@ -0,0 +1 @@
+ALTER TABLE settings ADD COLUMN update_channel TEXT DEFAULT 'stable' NOT NULL;
diff --git a/crates/yaak-models/migrations/20240127013915_cookies.sql b/crates/yaak-models/migrations/20240127013915_cookies.sql
new file mode 100644
index 0000000..bd513c4
--- /dev/null
+++ b/crates/yaak-models/migrations/20240127013915_cookies.sql
@@ -0,0 +1,10 @@
+CREATE TABLE cookie_jars
+(
+    id           TEXT                               NOT NULL PRIMARY KEY,
+    model        TEXT     DEFAULT 'cookie_jar'      NOT NULL,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    name         TEXT                               NOT NULL,
+    cookies      TEXT     DEFAULT '[]'              NOT NULL,
+    workspace_id TEXT                               NOT NULL
+);
diff --git a/crates/yaak-models/migrations/20240128230717_more_response_attrs.sql b/crates/yaak-models/migrations/20240128230717_more_response_attrs.sql
new file mode 100644
index 0000000..742149f
--- /dev/null
+++ b/crates/yaak-models/migrations/20240128230717_more_response_attrs.sql
@@ -0,0 +1,3 @@
+ALTER TABLE http_responses ADD COLUMN elapsed_headers INTEGER NOT NULL DEFAULT 0;
+ALTER TABLE http_responses ADD COLUMN remote_addr TEXT;
+ALTER TABLE http_responses ADD COLUMN version TEXT;
diff --git a/crates/yaak-models/migrations/20240203164833_grpc.sql b/crates/yaak-models/migrations/20240203164833_grpc.sql
new file mode 100644
index 0000000..d0ebe6a
--- /dev/null
+++ b/crates/yaak-models/migrations/20240203164833_grpc.sql
@@ -0,0 +1,68 @@
+CREATE TABLE grpc_requests
+(
+    id                  TEXT                                                    NOT NULL
+        PRIMARY KEY,
+    model               TEXT     DEFAULT 'grpc_request'                         NOT NULL,
+    workspace_id        TEXT                                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    folder_id           TEXT                                                    NULL
+        REFERENCES folders
+            ON DELETE CASCADE,
+    created_at          DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    updated_at          DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    name                TEXT                                                    NOT NULL,
+    sort_priority       REAL                                                    NOT NULL,
+    url                 TEXT                                                    NOT NULL,
+    service             TEXT                                                    NULL,
+    method              TEXT                                                    NULL,
+    message             TEXT                                                    NOT NULL,
+    authentication      TEXT     DEFAULT '{}'                                   NOT NULL,
+    authentication_type TEXT                                                    NULL,
+    metadata            TEXT     DEFAULT '[]'                                   NOT NULL
+);
+
+CREATE TABLE grpc_connections
+(
+    id           TEXT                                                    NOT NULL
+        PRIMARY KEY,
+    model        TEXT     DEFAULT 'grpc_connection'                      NOT NULL,
+    workspace_id TEXT                                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    request_id   TEXT                                                    NOT NULL
+        REFERENCES grpc_requests
+            ON DELETE CASCADE,
+    created_at   DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    updated_at   DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    url          TEXT                                                    NOT NULL,
+    service      TEXT                                                    NOT NULL,
+    method       TEXT                                                    NOT NULL,
+    status       INTEGER  DEFAULT -1                                     NOT NULL,
+    error        TEXT                                                    NULL,
+    elapsed      INTEGER  DEFAULT 0                                      NOT NULL,
+    trailers     TEXT     DEFAULT '{}'                                   NOT NULL
+);
+
+CREATE TABLE grpc_events
+(
+    id            TEXT                                                    NOT NULL
+        PRIMARY KEY,
+    model         TEXT     DEFAULT 'grpc_event'                           NOT NULL,
+    workspace_id  TEXT                                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    request_id    TEXT                                                    NOT NULL
+        REFERENCES grpc_requests
+            ON DELETE CASCADE,
+    connection_id TEXT                                                    NOT NULL
+        REFERENCES grpc_connections
+            ON DELETE CASCADE,
+    created_at    DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    updated_at    DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    metadata      TEXT     DEFAULT '{}'                                   NOT NULL,
+    event_type    TEXT                                                    NOT NULL,
+    status        INTEGER                                                 NULL,
+    error         TEXT                                                    NULL,
+    content       TEXT                                                    NOT NULL
+);
diff --git a/crates/yaak-models/migrations/20240522031045_theme-settings.sql b/crates/yaak-models/migrations/20240522031045_theme-settings.sql
new file mode 100644
index 0000000..57c51e2
--- /dev/null
+++ b/crates/yaak-models/migrations/20240522031045_theme-settings.sql
@@ -0,0 +1,4 @@
+ALTER TABLE settings
+    ADD COLUMN theme_dark TEXT DEFAULT 'yaak-dark' NOT NULL;
+ALTER TABLE settings
+    ADD COLUMN theme_light TEXT DEFAULT 'yaak-light' NOT NULL;
diff --git a/crates/yaak-models/migrations/20240529143147_more-settings.sql b/crates/yaak-models/migrations/20240529143147_more-settings.sql
new file mode 100644
index 0000000..70c247a
--- /dev/null
+++ b/crates/yaak-models/migrations/20240529143147_more-settings.sql
@@ -0,0 +1,4 @@
+ALTER TABLE settings ADD COLUMN interface_font_size INTEGER DEFAULT 15 NOT NULL;
+ALTER TABLE settings ADD COLUMN interface_scale INTEGER DEFAULT 1 NOT NULL;
+ALTER TABLE settings ADD COLUMN editor_font_size INTEGER DEFAULT 13 NOT NULL;
+ALTER TABLE settings ADD COLUMN editor_soft_wrap BOOLEAN DEFAULT 1 NOT NULL;
diff --git a/crates/yaak-models/migrations/20240607151115_open-workspace-setting.sql b/crates/yaak-models/migrations/20240607151115_open-workspace-setting.sql
new file mode 100644
index 0000000..99869d9
--- /dev/null
+++ b/crates/yaak-models/migrations/20240607151115_open-workspace-setting.sql
@@ -0,0 +1 @@
+ALTER TABLE settings ADD COLUMN open_workspace_new_window BOOLEAN NULL DEFAULT NULL;
diff --git a/crates/yaak-models/migrations/20240814013812_fix-env-model.sql b/crates/yaak-models/migrations/20240814013812_fix-env-model.sql
new file mode 100644
index 0000000..cacb615
--- /dev/null
+++ b/crates/yaak-models/migrations/20240814013812_fix-env-model.sql
@@ -0,0 +1,2 @@
+ALTER TABLE environments DROP COLUMN model;
+ALTER TABLE environments ADD COLUMN model TEXT DEFAULT 'environment';
diff --git a/crates/yaak-models/migrations/20240826184943_disable-telemetry.sql b/crates/yaak-models/migrations/20240826184943_disable-telemetry.sql
new file mode 100644
index 0000000..53ea827
--- /dev/null
+++ b/crates/yaak-models/migrations/20240826184943_disable-telemetry.sql
@@ -0,0 +1 @@
+ALTER TABLE settings ADD COLUMN telemetry BOOLEAN DEFAULT TRUE;
diff --git a/crates/yaak-models/migrations/20240829131004_plugins.sql b/crates/yaak-models/migrations/20240829131004_plugins.sql
new file mode 100644
index 0000000..da8adb0
--- /dev/null
+++ b/crates/yaak-models/migrations/20240829131004_plugins.sql
@@ -0,0 +1,12 @@
+CREATE TABLE plugins
+(
+    id         TEXT                               NOT NULL
+        PRIMARY KEY,
+    model      TEXT     DEFAULT 'plugin'          NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    checked_at DATETIME NULL,
+    enabled    BOOLEAN                            NOT NULL,
+    directory  TEXT NULL                          NOT NULL,
+    url        TEXT NULL
+);
diff --git a/crates/yaak-models/migrations/20241003134208_response-state.sql b/crates/yaak-models/migrations/20241003134208_response-state.sql
new file mode 100644
index 0000000..7f26c95
--- /dev/null
+++ b/crates/yaak-models/migrations/20241003134208_response-state.sql
@@ -0,0 +1,5 @@
+ALTER TABLE http_responses
+    ADD COLUMN state TEXT DEFAULT 'closed' NOT NULL;
+
+ALTER TABLE grpc_connections
+    ADD COLUMN state TEXT DEFAULT 'closed' NOT NULL;
diff --git a/crates/yaak-models/migrations/20241012181547_proxy-setting.sql b/crates/yaak-models/migrations/20241012181547_proxy-setting.sql
new file mode 100644
index 0000000..57e4371
--- /dev/null
+++ b/crates/yaak-models/migrations/20241012181547_proxy-setting.sql
@@ -0,0 +1 @@
+ALTER TABLE settings ADD COLUMN proxy TEXT;
diff --git a/crates/yaak-models/migrations/20241217204951_docs.sql b/crates/yaak-models/migrations/20241217204951_docs.sql
new file mode 100644
index 0000000..5bedee7
--- /dev/null
+++ b/crates/yaak-models/migrations/20241217204951_docs.sql
@@ -0,0 +1,8 @@
+ALTER TABLE http_requests
+    ADD COLUMN description TEXT DEFAULT '' NOT NULL;
+
+ALTER TABLE grpc_requests
+    ADD COLUMN description TEXT DEFAULT '' NOT NULL;
+
+ALTER TABLE folders
+    ADD COLUMN description TEXT DEFAULT '' NOT NULL;
diff --git a/crates/yaak-models/migrations/20241219140051_base-environments.sql b/crates/yaak-models/migrations/20241219140051_base-environments.sql
new file mode 100644
index 0000000..d96ae8f
--- /dev/null
+++ b/crates/yaak-models/migrations/20241219140051_base-environments.sql
@@ -0,0 +1,45 @@
+-- Add the new field
+ALTER TABLE environments
+    ADD COLUMN environment_id TEXT REFERENCES environments (id) ON DELETE CASCADE;
+
+-- Create temporary column so we know which rows are meant to be base environments. We'll use this to update
+-- child environments to point to them.
+ALTER TABLE environments
+    ADD COLUMN migrated_base_env BOOLEAN DEFAULT FALSE NOT NULL;
+
+-- Create a base environment for each workspace
+INSERT INTO environments (id, workspace_id, name, variables, migrated_base_env)
+SELECT (
+           -- This is the best way to generate a random string in SQLite, apparently
+           'ev_' || SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1)
+           ),
+       workspaces.id,
+       'Global Variables',
+       variables,
+       TRUE
+FROM workspaces;
+
+-- Update all non-base environments to point to newly created base environments
+UPDATE environments
+SET environment_id = ( SELECT base_env.id
+                       FROM environments AS base_env
+                       WHERE base_env.workspace_id = environments.workspace_id
+                         AND base_env.migrated_base_env IS TRUE )
+WHERE migrated_base_env IS FALSE;
+
+-- Drop temporary column
+ALTER TABLE environments
+    DROP COLUMN migrated_base_env;
+
+-- Drop the old variables column
+-- IMPORTANT: Skip to give the user the option to roll back to a previous app version. We can drop it once the migration working in the real world
+-- ALTER TABLE workspaces DROP COLUMN variables;
diff --git a/crates/yaak-models/migrations/20250102141937_sync.sql b/crates/yaak-models/migrations/20250102141937_sync.sql
new file mode 100644
index 0000000..69b325e
--- /dev/null
+++ b/crates/yaak-models/migrations/20250102141937_sync.sql
@@ -0,0 +1,21 @@
+ALTER TABLE workspaces
+    ADD COLUMN setting_sync_dir TEXT;
+
+CREATE TABLE sync_states
+(
+    id           TEXT                               NOT NULL
+        PRIMARY KEY,
+    model        TEXT     DEFAULT 'sync_state'      NOT NULL,
+    workspace_id TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    flushed_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    checksum     TEXT                               NOT NULL,
+    model_id     TEXT                               NOT NULL,
+    sync_dir     TEXT                               NOT NULL,
+    rel_path     TEXT                               NOT NULL,
+
+    UNIQUE (workspace_id, model_id)
+);
diff --git a/crates/yaak-models/migrations/20250108035425_editor-keymap.sql b/crates/yaak-models/migrations/20250108035425_editor-keymap.sql
new file mode 100644
index 0000000..8d0d50b
--- /dev/null
+++ b/crates/yaak-models/migrations/20250108035425_editor-keymap.sql
@@ -0,0 +1,2 @@
+ALTER TABLE settings
+    ADD COLUMN editor_keymap TEXT DEFAULT 'codemirror' NOT NULL;
diff --git a/crates/yaak-models/migrations/20250108205117_workspace-meta.sql b/crates/yaak-models/migrations/20250108205117_workspace-meta.sql
new file mode 100644
index 0000000..1646a65
--- /dev/null
+++ b/crates/yaak-models/migrations/20250108205117_workspace-meta.sql
@@ -0,0 +1,11 @@
+CREATE TABLE workspace_metas
+(
+    id               TEXT                               NOT NULL
+        PRIMARY KEY,
+    model            TEXT     DEFAULT 'workspace_meta'  NOT NULL,
+    workspace_id     TEXT                               NOT NULL
+        REFERENCES workspaces ON DELETE CASCADE,
+    created_at       DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at       DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    setting_sync_dir TEXT
+);
diff --git a/crates/yaak-models/migrations/20250114160022_remove-workspace-sync-setting.sql b/crates/yaak-models/migrations/20250114160022_remove-workspace-sync-setting.sql
new file mode 100644
index 0000000..1d8f849
--- /dev/null
+++ b/crates/yaak-models/migrations/20250114160022_remove-workspace-sync-setting.sql
@@ -0,0 +1,2 @@
+-- This setting was moved to the new workspace_metas table
+ALTER TABLE workspaces DROP COLUMN setting_sync_dir;
diff --git a/crates/yaak-models/migrations/20250123192023_plugin-kv.sql b/crates/yaak-models/migrations/20250123192023_plugin-kv.sql
new file mode 100644
index 0000000..1d0d569
--- /dev/null
+++ b/crates/yaak-models/migrations/20250123192023_plugin-kv.sql
@@ -0,0 +1,11 @@
+CREATE TABLE plugin_key_values
+(
+    model       TEXT     DEFAULT 'plugin_key_value' NOT NULL,
+    created_at  DATETIME DEFAULT CURRENT_TIMESTAMP  NOT NULL,
+    updated_at  DATETIME DEFAULT CURRENT_TIMESTAMP  NOT NULL,
+    deleted_at  DATETIME,
+    plugin_name TEXT                                NOT NULL,
+    key         TEXT                                NOT NULL,
+    value       TEXT                                NOT NULL,
+    PRIMARY KEY (plugin_name, key)
+);
diff --git a/crates/yaak-models/migrations/20250128155623_websockets.sql b/crates/yaak-models/migrations/20250128155623_websockets.sql
new file mode 100644
index 0000000..d3e03ac
--- /dev/null
+++ b/crates/yaak-models/migrations/20250128155623_websockets.sql
@@ -0,0 +1,66 @@
+CREATE TABLE websocket_requests
+(
+    id                  TEXT                                 NOT NULL
+        PRIMARY KEY,
+    model               TEXT     DEFAULT 'websocket_request' NOT NULL,
+    workspace_id        TEXT                                 NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    folder_id           TEXT
+        REFERENCES folders
+            ON DELETE CASCADE,
+    created_at          DATETIME DEFAULT CURRENT_TIMESTAMP   NOT NULL,
+    updated_at          DATETIME DEFAULT CURRENT_TIMESTAMP   NOT NULL,
+    deleted_at          DATETIME,
+    authentication      TEXT     DEFAULT '{}'                NOT NULL,
+    authentication_type TEXT,
+    description         TEXT                                 NOT NULL,
+    name                TEXT                                 NOT NULL,
+    url                 TEXT                                 NOT NULL,
+    headers             TEXT                                 NOT NULL,
+    message             TEXT                                 NOT NULL,
+    sort_priority       REAL                                 NOT NULL,
+    url_parameters      TEXT     DEFAULT '[]'                NOT NULL
+);
+
+CREATE TABLE websocket_connections
+(
+    id           TEXT                                    NOT NULL
+        PRIMARY KEY,
+    model        TEXT     DEFAULT 'websocket_connection' NOT NULL,
+    workspace_id TEXT                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    request_id   TEXT                                    NOT NULL
+        REFERENCES websocket_requests
+            ON DELETE CASCADE,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP      NOT NULL,
+    updated_at   DATETIME DEFAULT CURRENT_TIMESTAMP      NOT NULL,
+    url          TEXT                                    NOT NULL,
+    state        TEXT                                    NOT NULL,
+    status       INTEGER  DEFAULT -1                     NOT NULL,
+    error        TEXT                                    NULL,
+    elapsed      INTEGER  DEFAULT 0                      NOT NULL,
+    headers      TEXT     DEFAULT '{}'                   NOT NULL
+);
+
+CREATE TABLE websocket_events
+(
+    id            TEXT                                                    NOT NULL
+        PRIMARY KEY,
+    model         TEXT     DEFAULT 'websocket_event'                      NOT NULL,
+    workspace_id  TEXT                                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    request_id    TEXT                                                    NOT NULL
+        REFERENCES websocket_requests
+            ON DELETE CASCADE,
+    connection_id TEXT                                                    NOT NULL
+        REFERENCES websocket_connections
+            ON DELETE CASCADE,
+    created_at    DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    updated_at    DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    is_server     BOOLEAN                                                 NOT NULL,
+    message_type  TEXT                                                    NOT NULL,
+    message       BLOB                                                    NOT NULL
+);
diff --git a/crates/yaak-models/migrations/20250302041707_hide-window-controls.sql b/crates/yaak-models/migrations/20250302041707_hide-window-controls.sql
new file mode 100644
index 0000000..fb2017f
--- /dev/null
+++ b/crates/yaak-models/migrations/20250302041707_hide-window-controls.sql
@@ -0,0 +1,2 @@
+ALTER TABLE settings
+    ADD COLUMN hide_window_controls BOOLEAN DEFAULT FALSE NOT NULL;
diff --git a/crates/yaak-models/migrations/20250326193143_key-value-id.sql b/crates/yaak-models/migrations/20250326193143_key-value-id.sql
new file mode 100644
index 0000000..a045c05
--- /dev/null
+++ b/crates/yaak-models/migrations/20250326193143_key-value-id.sql
@@ -0,0 +1,43 @@
+-- 1. Create the new table with `id` as the primary key
+CREATE TABLE key_values_new
+(
+    id         TEXT PRIMARY KEY,
+    model      TEXT     DEFAULT 'key_value'       NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at DATETIME,
+    namespace  TEXT                               NOT NULL,
+    key        TEXT                               NOT NULL,
+    value      TEXT                               NOT NULL
+);
+
+-- 2. Copy data from the old table
+INSERT INTO key_values_new (id, model, created_at, updated_at, deleted_at, namespace, key, value)
+SELECT (
+           -- This is the best way to generate a random string in SQLite, apparently
+           'kv_' || SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1) ||
+           SUBSTR('abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23457789', (ABS(RANDOM()) % 57) + 1, 1)
+           ) AS id,
+       model,
+       created_at,
+       updated_at,
+       deleted_at,
+       namespace,
+       key,
+       value
+FROM key_values;
+
+-- 3. Drop the old table
+DROP TABLE key_values;
+
+-- 4. Rename the new table
+ALTER TABLE key_values_new
+    RENAME TO key_values;
diff --git a/crates/yaak-models/migrations/20250401122407_encrypted-key.sql b/crates/yaak-models/migrations/20250401122407_encrypted-key.sql
new file mode 100644
index 0000000..7a0bddb
--- /dev/null
+++ b/crates/yaak-models/migrations/20250401122407_encrypted-key.sql
@@ -0,0 +1 @@
+ALTER TABLE workspace_metas ADD COLUMN encryption_key TEXT NULL DEFAULT NULL;
diff --git a/crates/yaak-models/migrations/20250402144842_encryption-key-challenge.sql b/crates/yaak-models/migrations/20250402144842_encryption-key-challenge.sql
new file mode 100644
index 0000000..5d014e5
--- /dev/null
+++ b/crates/yaak-models/migrations/20250402144842_encryption-key-challenge.sql
@@ -0,0 +1 @@
+ALTER TABLE workspaces ADD COLUMN encryption_key_challenge TEXT NULL;
diff --git a/crates/yaak-models/migrations/20250424152740_remove-fks.sql b/crates/yaak-models/migrations/20250424152740_remove-fks.sql
new file mode 100644
index 0000000..3d383a0
--- /dev/null
+++ b/crates/yaak-models/migrations/20250424152740_remove-fks.sql
@@ -0,0 +1,243 @@
+-- NOTE: SQLite does not support dropping foreign keys, so we need to create new
+-- tables and copy data instead. To prevent cascade deletes from wrecking stuff,
+-- we start with the leaf tables and finish with the parent tables (eg. folder).
+
+----------------------------
+-- Remove http request FK --
+----------------------------
+
+CREATE TABLE http_requests_dg_tmp
+(
+    id                  TEXT                               NOT NULL
+        PRIMARY KEY,
+    model               TEXT     DEFAULT 'http_request'    NOT NULL,
+    workspace_id        TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    created_at          DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at          DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at          DATETIME,
+    name                TEXT                               NOT NULL,
+    url                 TEXT                               NOT NULL,
+    method              TEXT                               NOT NULL,
+    headers             TEXT                               NOT NULL,
+    body_type           TEXT,
+    sort_priority       REAL     DEFAULT 0                 NOT NULL,
+    authentication      TEXT     DEFAULT '{}'              NOT NULL,
+    authentication_type TEXT,
+    folder_id           TEXT,
+    body                TEXT     DEFAULT '{}'              NOT NULL,
+    url_parameters      TEXT     DEFAULT '[]'              NOT NULL,
+    description         TEXT     DEFAULT ''                NOT NULL
+);
+
+INSERT INTO http_requests_dg_tmp(id, model, workspace_id, created_at, updated_at, deleted_at, name, url, method,
+                                 headers, body_type, sort_priority, authentication, authentication_type, folder_id,
+                                 body, url_parameters, description)
+SELECT id,
+       model,
+       workspace_id,
+       created_at,
+       updated_at,
+       deleted_at,
+       name,
+       url,
+       method,
+       headers,
+       body_type,
+       sort_priority,
+       authentication,
+       authentication_type,
+       folder_id,
+       body,
+       url_parameters,
+       description
+FROM http_requests;
+
+DROP TABLE http_requests;
+
+ALTER TABLE http_requests_dg_tmp
+    RENAME TO http_requests;
+
+----------------------------
+-- Remove grpc request FK --
+----------------------------
+
+CREATE TABLE grpc_requests_dg_tmp
+(
+    id                  TEXT                                                    NOT NULL
+        PRIMARY KEY,
+    model               TEXT     DEFAULT 'grpc_request'                         NOT NULL,
+    workspace_id        TEXT                                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    folder_id           TEXT,
+    created_at          DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    updated_at          DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    name                TEXT                                                    NOT NULL,
+    sort_priority       REAL                                                    NOT NULL,
+    url                 TEXT                                                    NOT NULL,
+    service             TEXT,
+    method              TEXT,
+    message             TEXT                                                    NOT NULL,
+    authentication      TEXT     DEFAULT '{}'                                   NOT NULL,
+    authentication_type TEXT,
+    metadata            TEXT     DEFAULT '[]'                                   NOT NULL,
+    description         TEXT     DEFAULT ''                                     NOT NULL
+);
+
+INSERT INTO grpc_requests_dg_tmp(id, model, workspace_id, folder_id, created_at, updated_at, name, sort_priority, url,
+                                 service, method, message, authentication, authentication_type, metadata, description)
+SELECT id,
+       model,
+       workspace_id,
+       folder_id,
+       created_at,
+       updated_at,
+       name,
+       sort_priority,
+       url,
+       service,
+       method,
+       message,
+       authentication,
+       authentication_type,
+       metadata,
+       description
+FROM grpc_requests;
+
+DROP TABLE grpc_requests;
+
+ALTER TABLE grpc_requests_dg_tmp
+    RENAME TO grpc_requests;
+
+---------------------------------
+-- Remove websocket request FK --
+---------------------------------
+
+CREATE TABLE websocket_requests_dg_tmp
+(
+    id                  TEXT                                 NOT NULL
+        PRIMARY KEY,
+    model               TEXT     DEFAULT 'websocket_request' NOT NULL,
+    workspace_id        TEXT                                 NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    folder_id           TEXT,
+    created_at          DATETIME DEFAULT CURRENT_TIMESTAMP   NOT NULL,
+    updated_at          DATETIME DEFAULT CURRENT_TIMESTAMP   NOT NULL,
+    deleted_at          DATETIME,
+    authentication      TEXT     DEFAULT '{}'                NOT NULL,
+    authentication_type TEXT,
+    description         TEXT                                 NOT NULL,
+    name                TEXT                                 NOT NULL,
+    url                 TEXT                                 NOT NULL,
+    headers             TEXT                                 NOT NULL,
+    message             TEXT                                 NOT NULL,
+    sort_priority       REAL                                 NOT NULL,
+    url_parameters      TEXT     DEFAULT '[]'                NOT NULL
+);
+
+INSERT INTO websocket_requests_dg_tmp(id, model, workspace_id, folder_id, created_at, updated_at, deleted_at,
+                                      authentication, authentication_type, description, name, url, headers, message,
+                                      sort_priority, url_parameters)
+SELECT id,
+       model,
+       workspace_id,
+       folder_id,
+       created_at,
+       updated_at,
+       deleted_at,
+       authentication,
+       authentication_type,
+       description,
+       name,
+       url,
+       headers,
+       message,
+       sort_priority,
+       url_parameters
+FROM websocket_requests;
+
+DROP TABLE websocket_requests;
+
+ALTER TABLE websocket_requests_dg_tmp
+    RENAME TO websocket_requests;
+
+---------------------------
+-- Remove environment FK --
+---------------------------
+
+CREATE TABLE environments_dg_tmp
+(
+    id             TEXT                               NOT NULL
+        PRIMARY KEY,
+    created_at     DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at     DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at     DATETIME,
+    workspace_id   TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    name           TEXT                               NOT NULL,
+    variables               DEFAULT '[]'              NOT NULL,
+    model          TEXT     DEFAULT 'environment',
+    environment_id TEXT
+);
+
+INSERT INTO environments_dg_tmp(id, created_at, updated_at, deleted_at, workspace_id, name, variables, model,
+                                environment_id)
+SELECT id,
+       created_at,
+       updated_at,
+       deleted_at,
+       workspace_id,
+       name,
+       variables,
+       model,
+       environment_id
+FROM environments;
+
+DROP TABLE environments;
+
+ALTER TABLE environments_dg_tmp
+    RENAME TO environments;
+
+----------------------
+-- Remove folder FK --
+----------------------
+
+CREATE TABLE folders_dg_tmp
+(
+    id            TEXT                               NOT NULL
+        PRIMARY KEY,
+    model         TEXT     DEFAULT 'folder'          NOT NULL,
+    created_at    DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at    DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at    DATETIME,
+    workspace_id  TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    folder_id     TEXT,
+    name          TEXT                               NOT NULL,
+    sort_priority REAL     DEFAULT 0                 NOT NULL,
+    description   TEXT     DEFAULT ''                NOT NULL
+);
+
+INSERT INTO folders_dg_tmp(id, model, created_at, updated_at, deleted_at, workspace_id, folder_id, name, sort_priority,
+                           description)
+SELECT id,
+       model,
+       created_at,
+       updated_at,
+       deleted_at,
+       workspace_id,
+       folder_id,
+       name,
+       sort_priority,
+       description
+FROM folders;
+
+DROP TABLE folders;
+
+ALTER TABLE folders_dg_tmp
+    RENAME TO folders;
diff --git a/crates/yaak-models/migrations/20250507140702_remove-ev-sync-states.sql b/crates/yaak-models/migrations/20250507140702_remove-ev-sync-states.sql
new file mode 100644
index 0000000..dc860cf
--- /dev/null
+++ b/crates/yaak-models/migrations/20250507140702_remove-ev-sync-states.sql
@@ -0,0 +1,11 @@
+-- There used to be sync code that skipped over environments because we didn't
+-- want to sync potentially insecure data. With encryption, it is now possible
+-- to sync environments securely. However, there were already sync states in the
+-- DB that marked environments as "Synced". Running the sync code on these envs
+-- would mark them as deleted by FS (exist in SyncState but not on FS).
+--
+-- To undo this mess, we have this migration to delete all environment-related
+-- sync states so we can sync from a clean slate.
+DELETE
+FROM sync_states
+WHERE model_id LIKE 'ev_%';
diff --git a/crates/yaak-models/migrations/20250508161145_public-environments.sql b/crates/yaak-models/migrations/20250508161145_public-environments.sql
new file mode 100644
index 0000000..48d7a5e
--- /dev/null
+++ b/crates/yaak-models/migrations/20250508161145_public-environments.sql
@@ -0,0 +1,20 @@
+-- Add a public column to represent whether an environment can be shared or exported
+ALTER TABLE environments
+    ADD COLUMN public BOOLEAN DEFAULT FALSE;
+
+-- Add a base column to represent whether an environment is a base or sub environment. We used to
+-- do this with environment_id, but we need a more flexible solution now that envs can be optionally
+-- synced. E.g., it's now possible to only import a sub environment from a different client without
+-- its base environment "parent."
+ALTER TABLE environments
+    ADD COLUMN base BOOLEAN DEFAULT FALSE;
+
+-- SQLite doesn't support dynamic default values, so we update `base` based on the value of
+-- environment_id.
+UPDATE environments
+SET base = TRUE
+WHERE environment_id IS NULL;
+
+-- Finally, we drop the old `environment_id` column that will no longer be used
+ALTER TABLE environments
+    DROP COLUMN environment_id;
diff --git a/crates/yaak-models/migrations/20250516182745_default-attrs.sql b/crates/yaak-models/migrations/20250516182745_default-attrs.sql
new file mode 100644
index 0000000..4b5691f
--- /dev/null
+++ b/crates/yaak-models/migrations/20250516182745_default-attrs.sql
@@ -0,0 +1,15 @@
+-- Auth
+ALTER TABLE workspaces
+    ADD COLUMN authentication TEXT NOT NULL DEFAULT '{}';
+ALTER TABLE folders
+    ADD COLUMN authentication TEXT NOT NULL DEFAULT '{}';
+ALTER TABLE workspaces
+    ADD COLUMN authentication_type TEXT;
+ALTER TABLE folders
+    ADD COLUMN authentication_type TEXT;
+
+-- Headers
+ALTER TABLE workspaces
+    ADD COLUMN headers TEXT NOT NULL DEFAULT '[]';
+ALTER TABLE folders
+    ADD COLUMN headers TEXT NOT NULL DEFAULT '[]';
diff --git a/crates/yaak-models/migrations/20250530174021_graphql-introspection.sql b/crates/yaak-models/migrations/20250530174021_graphql-introspection.sql
new file mode 100644
index 0000000..ea47ee2
--- /dev/null
+++ b/crates/yaak-models/migrations/20250530174021_graphql-introspection.sql
@@ -0,0 +1,21 @@
+-- Clean up old key/values that are no longer used
+DELETE
+FROM key_values
+WHERE key LIKE 'graphql_introspection::%';
+
+CREATE TABLE graphql_introspections
+(
+
+    id           TEXT                                     NOT NULL
+        PRIMARY KEY,
+    model        TEXT     DEFAULT 'graphql_introspection' NOT NULL,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP       NOT NULL,
+    updated_at   DATETIME DEFAULT CURRENT_TIMESTAMP       NOT NULL,
+    workspace_id TEXT                                     NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    request_id   TEXT                                     NULL
+        REFERENCES http_requests
+            ON DELETE CASCADE,
+    content      TEXT                                     NULL
+);
diff --git a/crates/yaak-models/migrations/20250531193722_sync-state-index.sql b/crates/yaak-models/migrations/20250531193722_sync-state-index.sql
new file mode 100644
index 0000000..510d1d7
--- /dev/null
+++ b/crates/yaak-models/migrations/20250531193722_sync-state-index.sql
@@ -0,0 +1,43 @@
+-- Add sync_dir to the unique index, or else it will fail if the user disables sync
+-- and re-enables it for a different directory.
+
+-- Step 1: Rename the existing table
+ALTER TABLE sync_states
+    RENAME TO sync_states_old;
+
+-- Step 2: Create the new table with the updated unique constraint
+CREATE TABLE sync_states
+(
+    id           TEXT                               NOT NULL PRIMARY KEY,
+    model        TEXT     DEFAULT 'sync_state'      NOT NULL,
+    workspace_id TEXT                               NOT NULL
+        REFERENCES workspaces ON DELETE CASCADE,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    flushed_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    checksum     TEXT                               NOT NULL,
+    model_id     TEXT                               NOT NULL,
+    sync_dir     TEXT                               NOT NULL,
+    rel_path     TEXT                               NOT NULL
+);
+
+CREATE UNIQUE INDEX idx_sync_states_unique
+    ON sync_states (workspace_id, model_id, sync_dir);
+
+-- Step 3: Copy the data
+INSERT INTO sync_states (id, model, workspace_id, created_at, updated_at,
+                         flushed_at, checksum, model_id, sync_dir, rel_path)
+SELECT id,
+       model,
+       workspace_id,
+       created_at,
+       updated_at,
+       flushed_at,
+       checksum,
+       model_id,
+       sync_dir,
+       rel_path
+FROM sync_states_old;
+
+-- Step 4: Drop the old table
+DROP TABLE sync_states_old;
diff --git a/crates/yaak-models/migrations/20250604102922_colored-methods-setting.sql b/crates/yaak-models/migrations/20250604102922_colored-methods-setting.sql
new file mode 100644
index 0000000..ca26f6a
--- /dev/null
+++ b/crates/yaak-models/migrations/20250604102922_colored-methods-setting.sql
@@ -0,0 +1,2 @@
+ALTER TABLE settings
+    ADD COLUMN colored_methods BOOLEAN DEFAULT FALSE;
diff --git a/crates/yaak-models/migrations/20250608150053_font-settings.sql b/crates/yaak-models/migrations/20250608150053_font-settings.sql
new file mode 100644
index 0000000..8cb83e7
--- /dev/null
+++ b/crates/yaak-models/migrations/20250608150053_font-settings.sql
@@ -0,0 +1,2 @@
+ALTER TABLE settings ADD COLUMN interface_font TEXT;
+ALTER TABLE settings ADD COLUMN editor_font TEXT;
diff --git a/crates/yaak-models/migrations/20250611120000_environment-color.sql b/crates/yaak-models/migrations/20250611120000_environment-color.sql
new file mode 100644
index 0000000..e707110
--- /dev/null
+++ b/crates/yaak-models/migrations/20250611120000_environment-color.sql
@@ -0,0 +1 @@
+ALTER TABLE environments ADD COLUMN color TEXT; 
\ No newline at end of file
diff --git a/crates/yaak-models/migrations/20250727190746_autoupdate_setting.sql b/crates/yaak-models/migrations/20250727190746_autoupdate_setting.sql
new file mode 100644
index 0000000..0ac9c1f
--- /dev/null
+++ b/crates/yaak-models/migrations/20250727190746_autoupdate_setting.sql
@@ -0,0 +1 @@
+ALTER TABLE settings ADD COLUMN autoupdate BOOLEAN DEFAULT true NOT NULL;
diff --git a/crates/yaak-models/migrations/20250918141129_request-folder-environments.sql b/crates/yaak-models/migrations/20250918141129_request-folder-environments.sql
new file mode 100644
index 0000000..727bdaf
--- /dev/null
+++ b/crates/yaak-models/migrations/20250918141129_request-folder-environments.sql
@@ -0,0 +1,62 @@
+-- Create temporary table for migration
+CREATE TABLE environments__new
+(
+    id           TEXT                               NOT NULL PRIMARY KEY,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at   DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at   DATETIME,
+    workspace_id TEXT                               NOT NULL
+        REFERENCES workspaces ON DELETE CASCADE,
+
+    name         TEXT                               NOT NULL,
+    variables    TEXT     DEFAULT '[]'              NOT NULL,
+    model        TEXT     DEFAULT 'environment',
+    public       BOOLEAN  DEFAULT FALSE,
+    color        TEXT,
+
+    -- NEW
+    parent_model TEXT     DEFAULT 'workspace'       NOT NULL,
+    parent_id    TEXT
+);
+
+-- Backfill the data from the old table
+--    - base=1  -> (workspace, NULL)
+--    - base=0  -> (environment, id_of_workspace_base)  (fallback to workspace,NULL if none)
+INSERT INTO environments__new
+(id, created_at, updated_at, deleted_at, workspace_id, name, variables, model, public, color, parent_model, parent_id)
+SELECT
+    e.id,
+    e.created_at,
+    e.updated_at,
+    e.deleted_at,
+    e.workspace_id,
+    e.name,
+    e.variables,
+    e.model,
+    e.public,
+    e.color,
+    CASE
+        WHEN e.base = 1 THEN 'workspace'
+        WHEN (
+                 SELECT COUNT(1)
+                 FROM environments b
+                 WHERE b.workspace_id = e.workspace_id AND b.base = 1
+             ) > 0 THEN 'environment'
+        ELSE 'workspace'
+        END AS parent_model,
+    CASE
+        WHEN e.base = 1 THEN NULL
+        ELSE (
+            SELECT b.id
+            FROM environments b
+            WHERE b.workspace_id = e.workspace_id AND b.base = 1
+            ORDER BY b.created_at ASC, b.id ASC
+            LIMIT 1
+        )
+        END AS parent_id
+FROM environments e;
+
+-- Move everything to the new table
+DROP TABLE environments;
+ALTER TABLE environments__new
+    RENAME TO environments;
diff --git a/crates/yaak-models/migrations/20250929132954_dismiss-license-badge.sql b/crates/yaak-models/migrations/20250929132954_dismiss-license-badge.sql
new file mode 100644
index 0000000..9fe005a
--- /dev/null
+++ b/crates/yaak-models/migrations/20250929132954_dismiss-license-badge.sql
@@ -0,0 +1,10 @@
+ALTER TABLE settings
+    ADD COLUMN hide_license_badge BOOLEAN DEFAULT FALSE;
+
+-- 2. Backfill based on old JSON
+UPDATE settings
+SET hide_license_badge = 1
+WHERE EXISTS ( SELECT 1
+               FROM key_values kv
+               WHERE kv.key = 'license_confirmation'
+                 AND JSON_EXTRACT(kv.value, '$.confirmedPersonalUse') = TRUE );
diff --git a/crates/yaak-models/migrations/20251001082054_auto-download.sql b/crates/yaak-models/migrations/20251001082054_auto-download.sql
new file mode 100644
index 0000000..94af4bc
--- /dev/null
+++ b/crates/yaak-models/migrations/20251001082054_auto-download.sql
@@ -0,0 +1,2 @@
+ALTER TABLE settings
+    ADD COLUMN auto_download_updates BOOLEAN DEFAULT TRUE;
diff --git a/crates/yaak-models/migrations/20251028060300_check_notifications_setting.sql b/crates/yaak-models/migrations/20251028060300_check_notifications_setting.sql
new file mode 100644
index 0000000..9b1f350
--- /dev/null
+++ b/crates/yaak-models/migrations/20251028060300_check_notifications_setting.sql
@@ -0,0 +1 @@
+ALTER TABLE settings ADD COLUMN check_notifications BOOLEAN DEFAULT true NOT NULL;
diff --git a/crates/yaak-models/migrations/20251029062024_aws-auth-name.sql b/crates/yaak-models/migrations/20251029062024_aws-auth-name.sql
new file mode 100644
index 0000000..7f2b092
--- /dev/null
+++ b/crates/yaak-models/migrations/20251029062024_aws-auth-name.sql
@@ -0,0 +1,11 @@
+UPDATE http_requests
+SET authentication_type = 'awsv4'
+WHERE authentication_type = 'auth-aws-sig-v4';
+
+UPDATE folders
+SET authentication_type = 'awsv4'
+WHERE authentication_type = 'auth-aws-sig-v4';
+
+UPDATE workspaces
+SET authentication_type = 'awsv4'
+WHERE authentication_type = 'auth-aws-sig-v4';
diff --git a/crates/yaak-models/migrations/20251031070515_environment-sort-priority.sql b/crates/yaak-models/migrations/20251031070515_environment-sort-priority.sql
new file mode 100644
index 0000000..741687d
--- /dev/null
+++ b/crates/yaak-models/migrations/20251031070515_environment-sort-priority.sql
@@ -0,0 +1,2 @@
+ALTER TABLE environments
+    ADD COLUMN sort_priority REAL DEFAULT 0 NOT NULL;
diff --git a/crates/yaak-models/migrations/20251202080000_use-native-titlebar.sql b/crates/yaak-models/migrations/20251202080000_use-native-titlebar.sql
new file mode 100644
index 0000000..10804c1
--- /dev/null
+++ b/crates/yaak-models/migrations/20251202080000_use-native-titlebar.sql
@@ -0,0 +1,3 @@
+-- Add a setting to force native window title bar / controls
+ALTER TABLE settings
+    ADD COLUMN use_native_titlebar BOOLEAN DEFAULT FALSE NOT NULL;
diff --git a/crates/yaak-models/migrations/20251209000000_client-certificates.sql b/crates/yaak-models/migrations/20251209000000_client-certificates.sql
new file mode 100644
index 0000000..e0f2a34
--- /dev/null
+++ b/crates/yaak-models/migrations/20251209000000_client-certificates.sql
@@ -0,0 +1 @@
+ALTER TABLE settings ADD COLUMN client_certificates TEXT DEFAULT '[]' NOT NULL;
diff --git a/crates/yaak-models/migrations/20251219074602_default-workspace-headers.sql b/crates/yaak-models/migrations/20251219074602_default-workspace-headers.sql
new file mode 100644
index 0000000..8793b2a
--- /dev/null
+++ b/crates/yaak-models/migrations/20251219074602_default-workspace-headers.sql
@@ -0,0 +1,15 @@
+-- Add default User-Agent header to workspaces that don't already have one (case-insensitive check)
+UPDATE workspaces
+SET headers = json_insert(headers, '$[#]', json('{"enabled":true,"name":"User-Agent","value":"yaak"}'))
+WHERE NOT EXISTS (
+    SELECT 1 FROM json_each(workspaces.headers)
+    WHERE LOWER(json_extract(value, '$.name')) = 'user-agent'
+);
+
+-- Add default Accept header to workspaces that don't already have one (case-insensitive check)
+UPDATE workspaces
+SET headers = json_insert(headers, '$[#]', json('{"enabled":true,"name":"Accept","value":"*/*"}'))
+WHERE NOT EXISTS (
+    SELECT 1 FROM json_each(workspaces.headers)
+    WHERE LOWER(json_extract(value, '$.name')) = 'accept'
+);
diff --git a/crates/yaak-models/migrations/20251220000000_response-request-headers.sql b/crates/yaak-models/migrations/20251220000000_response-request-headers.sql
new file mode 100644
index 0000000..36e73ae
--- /dev/null
+++ b/crates/yaak-models/migrations/20251220000000_response-request-headers.sql
@@ -0,0 +1,3 @@
+-- Add request_headers and content_length_compressed columns to http_responses table
+ALTER TABLE http_responses ADD COLUMN request_headers TEXT NOT NULL DEFAULT '[]';
+ALTER TABLE http_responses ADD COLUMN content_length_compressed INTEGER;
diff --git a/crates/yaak-models/migrations/20251221000000_http-response-events.sql b/crates/yaak-models/migrations/20251221000000_http-response-events.sql
new file mode 100644
index 0000000..ad9f0fa
--- /dev/null
+++ b/crates/yaak-models/migrations/20251221000000_http-response-events.sql
@@ -0,0 +1,15 @@
+CREATE TABLE http_response_events
+(
+    id           TEXT                                                    NOT NULL
+        PRIMARY KEY,
+    model        TEXT     DEFAULT 'http_response_event'                  NOT NULL,
+    workspace_id TEXT                                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    response_id  TEXT                                                    NOT NULL
+        REFERENCES http_responses
+            ON DELETE CASCADE,
+    created_at   DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    updated_at   DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    event        TEXT                                                    NOT NULL
+);
diff --git a/crates/yaak-models/migrations/20251221100000_request-content-length.sql b/crates/yaak-models/migrations/20251221100000_request-content-length.sql
new file mode 100644
index 0000000..16625cf
--- /dev/null
+++ b/crates/yaak-models/migrations/20251221100000_request-content-length.sql
@@ -0,0 +1,2 @@
+ALTER TABLE http_responses
+    ADD COLUMN request_content_length INTEGER;
diff --git a/crates/yaak-models/migrations/20260104000000_hotkeys.sql b/crates/yaak-models/migrations/20260104000000_hotkeys.sql
new file mode 100644
index 0000000..fbc28b7
--- /dev/null
+++ b/crates/yaak-models/migrations/20260104000000_hotkeys.sql
@@ -0,0 +1 @@
+ALTER TABLE settings ADD COLUMN hotkeys TEXT DEFAULT '{}' NOT NULL;
diff --git a/crates/yaak-models/migrations/20260111000000_dns-timing.sql b/crates/yaak-models/migrations/20260111000000_dns-timing.sql
new file mode 100644
index 0000000..c7f2807
--- /dev/null
+++ b/crates/yaak-models/migrations/20260111000000_dns-timing.sql
@@ -0,0 +1,2 @@
+-- Add DNS resolution timing to http_responses
+ALTER TABLE http_responses ADD COLUMN elapsed_dns INTEGER DEFAULT 0 NOT NULL;
diff --git a/crates/yaak-models/migrations/20260112000000_dns-overrides.sql b/crates/yaak-models/migrations/20260112000000_dns-overrides.sql
new file mode 100644
index 0000000..4f4d652
--- /dev/null
+++ b/crates/yaak-models/migrations/20260112000000_dns-overrides.sql
@@ -0,0 +1,2 @@
+-- Add DNS overrides setting to workspaces
+ALTER TABLE workspaces ADD COLUMN setting_dns_overrides TEXT DEFAULT '[]' NOT NULL;
diff --git a/crates/yaak-models/migrations/20260119045146_remove-default-workspace-headers.sql b/crates/yaak-models/migrations/20260119045146_remove-default-workspace-headers.sql
new file mode 100644
index 0000000..44c71f9
--- /dev/null
+++ b/crates/yaak-models/migrations/20260119045146_remove-default-workspace-headers.sql
@@ -0,0 +1,12 @@
+-- Filter out headers that match the hardcoded defaults (User-Agent: yaak, Accept: */*),
+-- keeping any other custom headers the user may have added.
+UPDATE workspaces
+SET headers = (
+    SELECT json_group_array(json(value))
+    FROM json_each(headers)
+    WHERE NOT (
+        (LOWER(json_extract(value, '$.name')) = 'user-agent' AND json_extract(value, '$.value') = 'yaak')
+        OR (LOWER(json_extract(value, '$.name')) = 'accept' AND json_extract(value, '$.value') = '*/*')
+    )
+)
+WHERE json_array_length(headers) > 0;
diff --git a/crates/yaak-models/migrations/20260216000000_model-changes.sql b/crates/yaak-models/migrations/20260216000000_model-changes.sql
new file mode 100644
index 0000000..419853c
--- /dev/null
+++ b/crates/yaak-models/migrations/20260216000000_model-changes.sql
@@ -0,0 +1,12 @@
+CREATE TABLE model_changes
+(
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    model         TEXT                                                    NOT NULL,
+    model_id      TEXT                                                    NOT NULL,
+    change        TEXT                                                    NOT NULL,
+    update_source TEXT                                                    NOT NULL,
+    payload       TEXT                                                    NOT NULL,
+    created_at    DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL
+);
+
+CREATE INDEX idx_model_changes_created_at ON model_changes (created_at);
diff --git a/crates/yaak-models/migrations/20260217000000_remove-legacy-faker-plugin.sql b/crates/yaak-models/migrations/20260217000000_remove-legacy-faker-plugin.sql
new file mode 100644
index 0000000..fe5b5d9
--- /dev/null
+++ b/crates/yaak-models/migrations/20260217000000_remove-legacy-faker-plugin.sql
@@ -0,0 +1,3 @@
+-- Remove stale plugin rows left over from the brief period when faker shipped as bundled.
+DELETE FROM plugins
+WHERE directory LIKE '%template-function-faker';
diff --git a/crates/yaak-models/migrations/20260301000000_plugin-source-and-unique-directory.sql b/crates/yaak-models/migrations/20260301000000_plugin-source-and-unique-directory.sql
new file mode 100644
index 0000000..dca3a15
--- /dev/null
+++ b/crates/yaak-models/migrations/20260301000000_plugin-source-and-unique-directory.sql
@@ -0,0 +1,33 @@
+ALTER TABLE plugins
+    ADD COLUMN source TEXT DEFAULT 'filesystem' NOT NULL;
+
+-- Existing registry installs have a URL; classify them first.
+UPDATE plugins
+SET source = 'registry'
+WHERE url IS NOT NULL;
+
+-- Best-effort bundled backfill for legacy rows.
+UPDATE plugins
+SET source = 'bundled'
+WHERE source = 'filesystem'
+  AND (
+    -- Normalize separators so this also works for Windows paths.
+    replace(directory, '\', '/') LIKE '%/vendored/plugins/%'
+        OR replace(directory, '\', '/') LIKE '%/vendored-plugins/%'
+    );
+
+-- Keep one row per exact directory before adding uniqueness.
+-- Tie-break by recency.
+WITH ranked AS (SELECT id,
+                       ROW_NUMBER() OVER (
+                           PARTITION BY directory
+                           ORDER BY updated_at DESC,
+                               created_at DESC
+                           ) AS row_num
+                FROM plugins)
+DELETE
+FROM plugins
+WHERE id IN (SELECT id FROM ranked WHERE row_num > 1);
+
+CREATE UNIQUE INDEX IF NOT EXISTS idx_plugins_directory_unique
+    ON plugins (directory);
diff --git a/crates/yaak-models/migrations/20260302000000_inherited-request-settings.sql b/crates/yaak-models/migrations/20260302000000_inherited-request-settings.sql
new file mode 100644
index 0000000..3f83e8c
--- /dev/null
+++ b/crates/yaak-models/migrations/20260302000000_inherited-request-settings.sql
@@ -0,0 +1,17 @@
+ALTER TABLE workspaces ADD COLUMN setting_send_cookies BOOLEAN DEFAULT TRUE NOT NULL;
+ALTER TABLE workspaces ADD COLUMN setting_store_cookies BOOLEAN DEFAULT TRUE NOT NULL;
+
+ALTER TABLE folders ADD COLUMN setting_send_cookies TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+ALTER TABLE folders ADD COLUMN setting_store_cookies TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+ALTER TABLE folders ADD COLUMN setting_request_timeout TEXT DEFAULT '{"enabled":false,"value":0}' NOT NULL;
+ALTER TABLE folders ADD COLUMN setting_validate_certificates TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+ALTER TABLE folders ADD COLUMN setting_follow_redirects TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+
+ALTER TABLE http_requests ADD COLUMN setting_send_cookies TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+ALTER TABLE http_requests ADD COLUMN setting_store_cookies TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+ALTER TABLE http_requests ADD COLUMN setting_request_timeout TEXT DEFAULT '{"enabled":false,"value":0}' NOT NULL;
+ALTER TABLE http_requests ADD COLUMN setting_validate_certificates TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+ALTER TABLE http_requests ADD COLUMN setting_follow_redirects TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+
+ALTER TABLE websocket_requests ADD COLUMN setting_send_cookies TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+ALTER TABLE websocket_requests ADD COLUMN setting_store_cookies TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
diff --git a/crates/yaak-models/migrations/20260303000000_protocol-tls-settings.sql b/crates/yaak-models/migrations/20260303000000_protocol-tls-settings.sql
new file mode 100644
index 0000000..12e2be4
--- /dev/null
+++ b/crates/yaak-models/migrations/20260303000000_protocol-tls-settings.sql
@@ -0,0 +1,3 @@
+ALTER TABLE websocket_requests ADD COLUMN setting_validate_certificates TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
+
+ALTER TABLE grpc_requests ADD COLUMN setting_validate_certificates TEXT DEFAULT '{"enabled":false,"value":true}' NOT NULL;
diff --git a/crates/yaak-models/migrations/20260629000000_request-message-size.sql b/crates/yaak-models/migrations/20260629000000_request-message-size.sql
new file mode 100644
index 0000000..a6dd95a
--- /dev/null
+++ b/crates/yaak-models/migrations/20260629000000_request-message-size.sql
@@ -0,0 +1,7 @@
+ALTER TABLE workspaces ADD COLUMN setting_request_message_size INTEGER DEFAULT 67108864 NOT NULL;
+
+ALTER TABLE folders ADD COLUMN setting_request_message_size TEXT DEFAULT '{"enabled":false,"value":67108864}' NOT NULL;
+
+ALTER TABLE websocket_requests ADD COLUMN setting_request_message_size TEXT DEFAULT '{"enabled":false,"value":67108864}' NOT NULL;
+
+ALTER TABLE grpc_requests ADD COLUMN setting_request_message_size TEXT DEFAULT '{"enabled":false,"value":67108864}' NOT NULL;
diff --git a/crates/yaak-models/migrations/20260704000000_prompt-feedback.sql b/crates/yaak-models/migrations/20260704000000_prompt-feedback.sql
new file mode 100644
index 0000000..448c894
--- /dev/null
+++ b/crates/yaak-models/migrations/20260704000000_prompt-feedback.sql
@@ -0,0 +1,3 @@
+-- Add a setting to enable in-app feature feedback prompts
+ALTER TABLE settings
+    ADD COLUMN prompt_feedback BOOLEAN DEFAULT TRUE NOT NULL;
diff --git a/crates/yaak-models/migrations/20260826000000_http-version.sql b/crates/yaak-models/migrations/20260826000000_http-version.sql
new file mode 100644
index 0000000..fd6fcbc
--- /dev/null
+++ b/crates/yaak-models/migrations/20260826000000_http-version.sql
@@ -0,0 +1,5 @@
+ALTER TABLE workspaces ADD COLUMN setting_http_version TEXT DEFAULT 'auto' NOT NULL;
+
+ALTER TABLE folders ADD COLUMN setting_http_version TEXT DEFAULT '{"enabled":false,"value":"auto"}' NOT NULL;
+
+ALTER TABLE http_requests ADD COLUMN setting_http_version TEXT DEFAULT '{"enabled":false,"value":"auto"}' NOT NULL;
diff --git a/crates/yaak-models/migrations/20260901000000_import-sources.sql b/crates/yaak-models/migrations/20260901000000_import-sources.sql
new file mode 100644
index 0000000..83d42d0
--- /dev/null
+++ b/crates/yaak-models/migrations/20260901000000_import-sources.sql
@@ -0,0 +1,25 @@
+CREATE TABLE import_sources
+(
+    id               TEXT                                NOT NULL PRIMARY KEY,
+    model            TEXT     DEFAULT 'import_source'    NOT NULL,
+    created_at       DATETIME DEFAULT CURRENT_TIMESTAMP  NOT NULL,
+    updated_at       DATETIME DEFAULT CURRENT_TIMESTAMP  NOT NULL,
+    workspace_id     TEXT                                NOT NULL,
+    importer         TEXT                                NOT NULL,
+    origin           TEXT                                NOT NULL,
+    origin_label     TEXT                                NOT NULL,
+    last_imported_at DATETIME DEFAULT CURRENT_TIMESTAMP  NOT NULL
+);
+
+CREATE TABLE import_source_resources
+(
+    model            TEXT     DEFAULT 'import_source_resource' NOT NULL,
+    created_at       DATETIME DEFAULT CURRENT_TIMESTAMP        NOT NULL,
+    updated_at       DATETIME DEFAULT CURRENT_TIMESTAMP        NOT NULL,
+    import_source_id TEXT                                      NOT NULL,
+    source_key       TEXT                                      NOT NULL,
+    model_type       TEXT                                      NOT NULL,
+    model_id         TEXT                                      NOT NULL,
+    snapshot         TEXT                                      NOT NULL,
+    PRIMARY KEY (import_source_id, source_key)
+);
diff --git a/crates/yaak-models/migrations/20260902000000_import-source-content-hash.sql b/crates/yaak-models/migrations/20260902000000_import-source-content-hash.sql
new file mode 100644
index 0000000..b1001c0
--- /dev/null
+++ b/crates/yaak-models/migrations/20260902000000_import-source-content-hash.sql
@@ -0,0 +1,24 @@
+-- Replace the per-resource snapshot with a content hash, and let a row exist without a model
+-- so a resource the user chose not to import can be remembered.
+CREATE TABLE import_source_resources_new
+(
+    model            TEXT     DEFAULT 'import_source_resource' NOT NULL,
+    created_at       DATETIME DEFAULT CURRENT_TIMESTAMP        NOT NULL,
+    updated_at       DATETIME DEFAULT CURRENT_TIMESTAMP        NOT NULL,
+    import_source_id TEXT                                      NOT NULL,
+    source_key       TEXT                                      NOT NULL,
+    model_type       TEXT                                      NOT NULL,
+    model_id         TEXT,
+    content_hash     TEXT,
+    PRIMARY KEY (import_source_id, source_key)
+);
+
+INSERT INTO import_source_resources_new (model, created_at, updated_at, import_source_id,
+                                         source_key, model_type, model_id, content_hash)
+SELECT model, created_at, updated_at, import_source_id, source_key, model_type, model_id, NULL
+FROM import_source_resources;
+
+DROP TABLE import_source_resources;
+
+ALTER TABLE import_source_resources_new
+    RENAME TO import_source_resources;
diff --git a/crates/yaak-models/package.json b/crates/yaak-models/package.json
new file mode 100644
index 0000000..a1e2ed7
--- /dev/null
+++ b/crates/yaak-models/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/models",
+  "version": "1.0.0",
+  "private": true,
+  "main": "guest-js/index.ts"
+}
diff --git a/crates/yaak-models/src/blob_manager.rs b/crates/yaak-models/src/blob_manager.rs
new file mode 100644
index 0000000..41ba8bc
--- /dev/null
+++ b/crates/yaak-models/src/blob_manager.rs
@@ -0,0 +1,414 @@
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use crate::util::generate_prefixed_id;
+use include_dir::{Dir, include_dir};
+use log::{debug, info};
+use rusqlite::{OptionalExtension, Transaction, TransactionBehavior, params};
+use std::ops::Deref;
+use yaak_database::{ConnectionOrTx, SqlitePool};
+
+static BLOB_MIGRATIONS_DIR: Dir = include_dir!("$CARGO_MANIFEST_DIR/blob_migrations");
+
+/// A chunk of body data stored in the blob database.
+#[derive(Debug, Clone)]
+pub struct BodyChunk {
+    pub id: String,
+    pub body_id: String,
+    pub chunk_index: i32,
+    pub data: Vec<u8>,
+}
+
+impl BodyChunk {
+    pub fn new(body_id: impl Into<String>, chunk_index: i32, data: Vec<u8>) -> Self {
+        Self { id: generate_prefixed_id("bc"), body_id: body_id.into(), chunk_index, data }
+    }
+}
+
+/// Manages the blob database: a reader pool and a single writer, for the
+/// same reason as [`crate::query_manager::QueryManager`].
+// Pools are internally synchronized — don't wrap them in a Mutex. A Mutex held across the
+// blocking `get()` serializes every blob access behind the slowest waiter, freezing the
+// whole app whenever the pool is exhausted.
+#[derive(Debug, Clone)]
+pub struct BlobManager {
+    readers: SqlitePool,
+    writer: SqlitePool,
+}
+
+impl BlobManager {
+    /// `writer` must be a pool with a single connection.
+    pub fn new(readers: SqlitePool, writer: SqlitePool) -> Self {
+        Self { readers, writer }
+    }
+
+    /// A read handle from the reader pool.
+    pub fn connect(&self) -> BlobContext<'_> {
+        let conn = self.readers.get().expect("Failed to get blob DB connection from pool");
+        BlobContext { conn: ConnectionOrTx::Connection(conn) }
+    }
+
+    /// Run `func` in a transaction on the writer connection.
+    pub fn with_tx<T, E>(
+        &self,
+        func: impl FnOnce(&BlobWriter) -> std::result::Result<T, E>,
+    ) -> std::result::Result<T, E>
+    where
+        E: From<crate::error::Error>,
+    {
+        let conn = self.writer.get().map_err(crate::error::Error::SqlPoolError)?;
+        let tx = Transaction::new_unchecked(&conn, TransactionBehavior::Immediate)
+            .map_err(crate::error::Error::SqlError)?;
+        let writer = BlobWriter { ctx: BlobContext { conn: ConnectionOrTx::Transaction(&tx) } };
+        match func(&writer) {
+            Ok(val) => {
+                tx.commit().map_err(|e| {
+                    GenericError(format!("Failed to commit blob transaction {e:?}"))
+                })?;
+                Ok(val)
+            }
+            Err(e) => {
+                tx.rollback().map_err(|e| {
+                    GenericError(format!("Failed to rollback blob transaction {e:?}"))
+                })?;
+                Err(e)
+            }
+        }
+    }
+}
+
+/// Read handle for the blob database.
+pub struct BlobContext<'a> {
+    conn: ConnectionOrTx<'a>,
+}
+
+impl<'a> BlobContext<'a> {
+    /// Get all chunks for a body, ordered by chunk_index.
+    pub fn get_chunks(&self, body_id: &str) -> Result<Vec<BodyChunk>> {
+        let mut stmt = self.conn.prepare(
+            "SELECT id, body_id, chunk_index, data FROM body_chunks
+             WHERE body_id = ?1 ORDER BY chunk_index ASC",
+        )?;
+
+        let chunks = stmt
+            .query_map(params![body_id], |row| {
+                Ok(BodyChunk {
+                    id: row.get(0)?,
+                    body_id: row.get(1)?,
+                    chunk_index: row.get(2)?,
+                    data: row.get(3)?,
+                })
+            })?
+            .collect::<std::result::Result<Vec<_>, _>>()?;
+
+        Ok(chunks)
+    }
+
+    /// List all distinct body IDs in the blob database.
+    pub fn list_body_ids(&self) -> Result<Vec<String>> {
+        let mut stmt = self.conn.prepare("SELECT DISTINCT body_id FROM body_chunks")?;
+        let ids = stmt
+            .query_map([], |row| row.get(0))?
+            .collect::<std::result::Result<Vec<String>, _>>()?;
+        Ok(ids)
+    }
+
+    /// Get total size of a body without loading data.
+    pub fn get_body_size(&self, body_id: &str) -> Result<usize> {
+        let size: i64 = self
+            .conn
+            .resolve()
+            .query_row(
+                "SELECT COALESCE(SUM(LENGTH(data)), 0) FROM body_chunks WHERE body_id = ?1",
+                params![body_id],
+                |row| row.get(0),
+            )
+            .unwrap_or(0);
+        Ok(size as usize)
+    }
+
+    /// Check if a body exists.
+    pub fn body_exists(&self, body_id: &str) -> Result<bool> {
+        let count: i64 = self
+            .conn
+            .resolve()
+            .query_row(
+                "SELECT COUNT(*) FROM body_chunks WHERE body_id = ?1",
+                params![body_id],
+                |row| row.get(0),
+            )
+            .unwrap_or(0);
+        Ok(count > 0)
+    }
+}
+
+/// Write handle for the blob database. Derefs to [`BlobContext`] for reads.
+pub struct BlobWriter<'a> {
+    ctx: BlobContext<'a>,
+}
+
+impl<'a> Deref for BlobWriter<'a> {
+    type Target = BlobContext<'a>;
+
+    fn deref(&self) -> &BlobContext<'a> {
+        &self.ctx
+    }
+}
+
+impl<'a> BlobWriter<'a> {
+    /// Insert a single chunk.
+    pub fn insert_chunk(&self, chunk: &BodyChunk) -> Result<()> {
+        self.conn.execute(
+            "INSERT INTO body_chunks (id, body_id, chunk_index, data) VALUES (?1, ?2, ?3, ?4)",
+            params![chunk.id, chunk.body_id, chunk.chunk_index, chunk.data],
+        )?;
+        Ok(())
+    }
+
+    /// Delete all chunks for a body.
+    pub fn delete_chunks(&self, body_id: &str) -> Result<()> {
+        self.conn.execute("DELETE FROM body_chunks WHERE body_id = ?1", params![body_id])?;
+        Ok(())
+    }
+
+    /// Delete all chunks matching a body_id prefix (e.g., "rs_abc123.%" to delete all
+    /// bodies for a response).
+    pub fn delete_chunks_like(&self, body_id_prefix: &str) -> Result<()> {
+        self.conn
+            .execute("DELETE FROM body_chunks WHERE body_id LIKE ?1", params![body_id_prefix])?;
+        Ok(())
+    }
+}
+
+/// Run migrations for the blob database.
+pub fn migrate_blob_db(pool: &SqlitePool) -> Result<()> {
+    info!("Running blob database migrations");
+
+    // Create migrations tracking table
+    pool.get()?.execute(
+        "CREATE TABLE IF NOT EXISTS _blob_migrations (
+            version     TEXT PRIMARY KEY,
+            description TEXT NOT NULL,
+            applied_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL
+        )",
+        [],
+    )?;
+
+    // Read and sort all .sql files
+    let mut entries: Vec<_> = BLOB_MIGRATIONS_DIR
+        .entries()
+        .iter()
+        .filter(|e| e.path().extension().map(|ext| ext == "sql").unwrap_or(false))
+        .collect();
+
+    entries.sort_by_key(|e| e.path());
+
+    let mut ran_migrations = 0;
+    for entry in &entries {
+        let filename = entry.path().file_name().unwrap().to_str().unwrap();
+        let version = filename.split('_').next().unwrap();
+
+        // Check if already applied
+        let already_applied: Option<i64> = pool
+            .get()?
+            .query_row("SELECT 1 FROM _blob_migrations WHERE version = ?", [version], |r| r.get(0))
+            .optional()?;
+
+        if already_applied.is_some() {
+            debug!("Skipping already applied blob migration: {}", filename);
+            continue;
+        }
+
+        let sql =
+            entry.as_file().unwrap().contents_utf8().expect("Failed to read blob migration file");
+
+        info!("Applying blob migration: {}", filename);
+        let conn = pool.get()?;
+        conn.execute_batch(sql)?;
+
+        // Record migration
+        conn.execute(
+            "INSERT INTO _blob_migrations (version, description) VALUES (?, ?)",
+            params![version, filename],
+        )?;
+
+        ran_migrations += 1;
+    }
+
+    if ran_migrations == 0 {
+        info!("No blob migrations to run");
+    } else {
+        info!("Ran {} blob migration(s)", ran_migrations);
+    }
+
+    Ok(())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::error::Error;
+
+    fn create_test_manager() -> BlobManager {
+        let manager = r2d2_sqlite::SqliteConnectionManager::memory();
+        let pool = r2d2::Pool::builder().max_size(1).build(manager).unwrap();
+        migrate_blob_db(&pool).unwrap();
+        BlobManager::new(pool.clone(), pool)
+    }
+
+    fn insert(manager: &BlobManager, chunks: &[BodyChunk]) {
+        manager
+            .with_tx(|b| {
+                for c in chunks {
+                    b.insert_chunk(c)?;
+                }
+                Ok::<_, Error>(())
+            })
+            .unwrap();
+    }
+
+    #[test]
+    fn test_insert_and_get_chunks() {
+        let manager = create_test_manager();
+        let body_id = "rs_test123.request";
+        insert(
+            &manager,
+            &[
+                BodyChunk::new(body_id, 0, b"Hello, ".to_vec()),
+                BodyChunk::new(body_id, 1, b"World!".to_vec()),
+            ],
+        );
+
+        let chunks = manager.connect().get_chunks(body_id).unwrap();
+        assert_eq!(chunks.len(), 2);
+        assert_eq!(chunks[0].chunk_index, 0);
+        assert_eq!(chunks[0].data, b"Hello, ");
+        assert_eq!(chunks[1].chunk_index, 1);
+        assert_eq!(chunks[1].data, b"World!");
+    }
+
+    #[test]
+    fn test_get_chunks_ordered_by_index() {
+        let manager = create_test_manager();
+        let body_id = "rs_test123.request";
+        // Insert out of order
+        insert(
+            &manager,
+            &[
+                BodyChunk::new(body_id, 2, b"C".to_vec()),
+                BodyChunk::new(body_id, 0, b"A".to_vec()),
+                BodyChunk::new(body_id, 1, b"B".to_vec()),
+            ],
+        );
+
+        let chunks = manager.connect().get_chunks(body_id).unwrap();
+        assert_eq!(chunks.len(), 3);
+        assert_eq!(chunks[0].data, b"A");
+        assert_eq!(chunks[1].data, b"B");
+        assert_eq!(chunks[2].data, b"C");
+    }
+
+    #[test]
+    fn test_delete_chunks() {
+        let manager = create_test_manager();
+        let body_id = "rs_test123.request";
+        insert(&manager, &[BodyChunk::new(body_id, 0, b"data".to_vec())]);
+        assert!(manager.connect().body_exists(body_id).unwrap());
+
+        manager.with_tx(|b| b.delete_chunks(body_id)).unwrap();
+
+        let ctx = manager.connect();
+        assert!(!ctx.body_exists(body_id).unwrap());
+        assert_eq!(ctx.get_chunks(body_id).unwrap().len(), 0);
+    }
+
+    #[test]
+    fn test_delete_chunks_like() {
+        let manager = create_test_manager();
+        // Insert chunks for same response but different body types
+        insert(
+            &manager,
+            &[
+                BodyChunk::new("rs_abc.request", 0, b"req".to_vec()),
+                BodyChunk::new("rs_abc.response", 0, b"resp".to_vec()),
+                BodyChunk::new("rs_other.request", 0, b"other".to_vec()),
+            ],
+        );
+
+        // Delete all bodies for rs_abc
+        manager.with_tx(|b| b.delete_chunks_like("rs_abc.%")).unwrap();
+
+        let ctx = manager.connect();
+        assert!(!ctx.body_exists("rs_abc.request").unwrap());
+        assert!(!ctx.body_exists("rs_abc.response").unwrap());
+        assert!(ctx.body_exists("rs_other.request").unwrap());
+    }
+
+    #[test]
+    fn test_get_body_size() {
+        let manager = create_test_manager();
+        let body_id = "rs_test123.request";
+        insert(
+            &manager,
+            &[
+                BodyChunk::new(body_id, 0, b"Hello".to_vec()),
+                BodyChunk::new(body_id, 1, b"World".to_vec()),
+            ],
+        );
+
+        let size = manager.connect().get_body_size(body_id).unwrap();
+        assert_eq!(size, 10); // "Hello" + "World" = 10 bytes
+    }
+
+    #[test]
+    fn test_get_body_size_empty() {
+        let manager = create_test_manager();
+        let size = manager.connect().get_body_size("nonexistent").unwrap();
+        assert_eq!(size, 0);
+    }
+
+    #[test]
+    fn test_body_exists() {
+        let manager = create_test_manager();
+        assert!(!manager.connect().body_exists("rs_test.request").unwrap());
+
+        insert(&manager, &[BodyChunk::new("rs_test.request", 0, b"data".to_vec())]);
+
+        assert!(manager.connect().body_exists("rs_test.request").unwrap());
+    }
+
+    #[test]
+    fn test_multiple_bodies_isolated() {
+        let manager = create_test_manager();
+        insert(
+            &manager,
+            &[
+                BodyChunk::new("body1", 0, b"data1".to_vec()),
+                BodyChunk::new("body2", 0, b"data2".to_vec()),
+            ],
+        );
+
+        let ctx = manager.connect();
+        let chunks1 = ctx.get_chunks("body1").unwrap();
+        let chunks2 = ctx.get_chunks("body2").unwrap();
+
+        assert_eq!(chunks1.len(), 1);
+        assert_eq!(chunks1[0].data, b"data1");
+        assert_eq!(chunks2.len(), 1);
+        assert_eq!(chunks2[0].data, b"data2");
+    }
+
+    #[test]
+    fn test_large_chunk() {
+        let manager = create_test_manager();
+        // 1MB chunk
+        let large_data: Vec<u8> = (0..1024 * 1024).map(|i| (i % 256) as u8).collect();
+        let body_id = "rs_large.request";
+        insert(&manager, &[BodyChunk::new(body_id, 0, large_data.clone())]);
+
+        let ctx = manager.connect();
+        let chunks = ctx.get_chunks(body_id).unwrap();
+        assert_eq!(chunks.len(), 1);
+        assert_eq!(chunks[0].data, large_data);
+        assert_eq!(ctx.get_body_size(body_id).unwrap(), 1024 * 1024);
+    }
+}
diff --git a/crates/yaak-models/src/client_db.rs b/crates/yaak-models/src/client_db.rs
new file mode 100644
index 0000000..b7a71f7
--- /dev/null
+++ b/crates/yaak-models/src/client_db.rs
@@ -0,0 +1,176 @@
+use crate::error::Result;
+use crate::models::{AnyModel, UpsertModelInfo};
+use crate::util::{ModelChangeEvent, ModelPayload, UpdateSource};
+use rusqlite::params;
+use sea_query::{IntoColumnRef, IntoIden, SimpleExpr};
+use std::cell::RefCell;
+use std::fmt::Debug;
+use std::ops::Deref;
+use yaak_database::DbContext;
+
+/// A read handle. Comes from the reader pool and can only query.
+///
+/// Anything that changes a row lives on [`WriteDb`], which is only ever handed
+/// out inside a transaction on the single writer connection. That split is
+/// what keeps the pool from filling with writers waiting on each other: there
+/// is one writer, so there is never a second one to wait for.
+pub struct ClientDb<'a> {
+    pub(crate) ctx: DbContext<'a>,
+}
+
+impl<'a> ClientDb<'a> {
+    pub fn new(ctx: DbContext<'a>) -> Self {
+        Self { ctx }
+    }
+
+    /// Access the underlying connection for custom queries.
+    pub(crate) fn conn(&self) -> &yaak_database::ConnectionOrTx<'a> {
+        self.ctx.conn()
+    }
+
+    pub(crate) fn find_one<M>(
+        &self,
+        col: impl IntoColumnRef + IntoIden + Clone,
+        value: impl Into<SimpleExpr> + Debug,
+    ) -> Result<M>
+    where
+        M: UpsertModelInfo,
+    {
+        Ok(self.ctx.find_one(col, value)?)
+    }
+
+    pub(crate) fn find_optional<M>(
+        &self,
+        col: impl IntoColumnRef,
+        value: impl Into<SimpleExpr>,
+    ) -> Option<M>
+    where
+        M: UpsertModelInfo,
+    {
+        self.ctx.find_optional(col, value)
+    }
+
+    pub(crate) fn find_all<M>(&self) -> Result<Vec<M>>
+    where
+        M: UpsertModelInfo,
+    {
+        Ok(self.ctx.find_all()?)
+    }
+
+    pub(crate) fn find_many<M>(
+        &self,
+        col: impl IntoColumnRef,
+        value: impl Into<SimpleExpr>,
+        limit: Option<u64>,
+    ) -> Result<Vec<M>>
+    where
+        M: UpsertModelInfo,
+    {
+        Ok(self.ctx.find_many(col, value, limit)?)
+    }
+}
+
+/// A write handle: a [`ClientDb`] on the writer connection, inside a
+/// transaction, that can also change rows. Derefs to [`ClientDb`] so every
+/// query is available while writing, and reads inside the transaction see
+/// its own uncommitted writes.
+///
+/// Model events are held back until the transaction commits; a rollback
+/// discards them along with the rows.
+pub struct WriteDb<'a> {
+    db: ClientDb<'a>,
+    pending_events: RefCell<Vec<ModelPayload>>,
+}
+
+impl<'a> Deref for WriteDb<'a> {
+    type Target = ClientDb<'a>;
+
+    fn deref(&self) -> &ClientDb<'a> {
+        &self.db
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn new(ctx: DbContext<'a>) -> Self {
+        Self { db: ClientDb::new(ctx), pending_events: RefCell::new(Vec::new()) }
+    }
+
+    /// The events for everything written so far, to send once the
+    /// transaction has committed.
+    pub(crate) fn into_events(self) -> Vec<ModelPayload> {
+        self.pending_events.into_inner()
+    }
+
+    /// Bulk-delete all rows matching a column value WITHOUT recording model
+    /// changes or emitting events. Only use for cascades whose deletion is
+    /// implied by a recorded parent delete (e.g. workspace children — see
+    /// [`ModelChangeEvent::Delete`]).
+    pub(crate) fn delete_many_untracked<M>(
+        &self,
+        col: impl IntoColumnRef,
+        value: impl Into<SimpleExpr>,
+    ) -> Result<usize>
+    where
+        M: UpsertModelInfo,
+    {
+        Ok(self.ctx.delete_many::<M>(col, value)?)
+    }
+
+    pub(crate) fn upsert<M>(&self, model: &M, source: &UpdateSource) -> Result<M>
+    where
+        M: Into<AnyModel> + UpsertModelInfo + Clone,
+    {
+        let (m, created) = self.ctx.upsert(model, &source.to_db())?;
+
+        let payload = ModelPayload {
+            model: m.clone().into(),
+            update_source: source.clone(),
+            change: ModelChangeEvent::Upsert { created },
+        };
+
+        self.record_model_change(&payload)?;
+        self.pending_events.borrow_mut().push(payload);
+
+        Ok(m)
+    }
+
+    pub(crate) fn delete<M>(&self, m: &M, source: &UpdateSource) -> Result<M>
+    where
+        M: Into<AnyModel> + Clone + UpsertModelInfo,
+    {
+        self.ctx.delete(m)?;
+
+        let payload = ModelPayload {
+            model: m.clone().into(),
+            update_source: source.clone(),
+            change: ModelChangeEvent::Delete,
+        };
+
+        self.record_model_change(&payload)?;
+        self.pending_events.borrow_mut().push(payload);
+
+        Ok(m.clone())
+    }
+
+    fn record_model_change(&self, payload: &ModelPayload) -> Result<()> {
+        let payload_json = serde_json::to_string(payload)?;
+        let source_json = serde_json::to_string(&payload.update_source)?;
+        let change_json = serde_json::to_string(&payload.change)?;
+
+        self.ctx.conn().resolve().execute(
+            r#"
+                INSERT INTO model_changes (model, model_id, change, update_source, payload)
+                VALUES (?1, ?2, ?3, ?4, ?5)
+            "#,
+            params![
+                payload.model.model(),
+                payload.model.id(),
+                change_json,
+                source_json,
+                payload_json,
+            ],
+        )?;
+
+        Ok(())
+    }
+}
diff --git a/crates/yaak-models/src/connection_or_tx.rs b/crates/yaak-models/src/connection_or_tx.rs
new file mode 100644
index 0000000..1fed341
--- /dev/null
+++ b/crates/yaak-models/src/connection_or_tx.rs
@@ -0,0 +1 @@
+pub use yaak_database::connection_or_tx::ConnectionOrTx;
diff --git a/crates/yaak-models/src/cookies.rs b/crates/yaak-models/src/cookies.rs
new file mode 100644
index 0000000..0b45013
--- /dev/null
+++ b/crates/yaak-models/src/cookies.rs
@@ -0,0 +1,107 @@
+//! Carrying a send's cookie changes back into a jar.
+//!
+//! A send starts from a snapshot of the jar and hands back the jar as the
+//! transaction left it. Writing that whole result over the jar would also
+//! write over anything the user changed *while* the send was in flight — a
+//! cookie edited or deleted in the jar view, or set by another send. So the
+//! send's contribution is taken as a difference (what it added, changed, or
+//! removed relative to its snapshot) and applied to whatever the jar holds now.
+
+use crate::models::{Cookie, CookieDomain};
+
+/// The identity of a cookie in a jar: two cookies with the same name, domain
+/// and path are the same cookie, whatever their value or attributes.
+type CookieKey = (String, CookieDomain, String);
+
+fn key(c: &Cookie) -> CookieKey {
+    (c.name.clone(), c.domain.clone(), c.path.clone())
+}
+
+/// Apply the changes between `before` (the snapshot a send started from) and
+/// `after` (the jar as the send left it) to `current` (the jar as it is now).
+///
+/// Cookies the send removed are removed; cookies it added or changed replace
+/// their counterpart in `current`, or are appended. Cookies the send did not
+/// touch are left exactly as `current` has them.
+pub fn apply_cookie_changes(
+    current: Vec<Cookie>,
+    before: &[Cookie],
+    after: &[Cookie],
+) -> Vec<Cookie> {
+    let removed: Vec<CookieKey> =
+        before.iter().filter(|b| !after.iter().any(|a| key(a) == key(b))).map(key).collect();
+    let changed: Vec<&Cookie> = after.iter().filter(|a| !before.iter().any(|b| b == *a)).collect();
+
+    let mut result: Vec<Cookie> =
+        current.into_iter().filter(|c| !removed.contains(&key(c))).collect();
+    for cookie in changed {
+        match result.iter_mut().find(|c| key(c) == key(cookie)) {
+            Some(existing) => *existing = cookie.clone(),
+            None => result.push(cookie.clone()),
+        }
+    }
+    result
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::models::CookieExpires;
+
+    fn cookie(name: &str, value: &str) -> Cookie {
+        Cookie {
+            name: name.to_string(),
+            value: value.to_string(),
+            domain: CookieDomain::HostOnly("example.com".to_string()),
+            expires: CookieExpires::SessionEnd,
+            path: "/".to_string(),
+            secure: false,
+            http_only: false,
+            same_site: None,
+        }
+    }
+
+    #[test]
+    fn a_send_that_changed_nothing_leaves_the_jar_alone() {
+        let before = vec![cookie("a", "1")];
+        let current = vec![cookie("a", "edited"), cookie("b", "2")];
+        assert_eq!(apply_cookie_changes(current.clone(), &before, &before), current);
+    }
+
+    #[test]
+    fn additions_and_changes_land_without_touching_concurrent_edits() {
+        let before = vec![cookie("a", "1"), cookie("b", "2")];
+        let after = vec![cookie("a", "1"), cookie("b", "3"), cookie("c", "4")];
+        // Meanwhile the user edited `a` and added `d`.
+        let current = vec![cookie("a", "edited"), cookie("b", "2"), cookie("d", "5")];
+        assert_eq!(
+            apply_cookie_changes(current, &before, &after),
+            vec![
+                cookie("a", "edited"),
+                cookie("b", "3"),
+                cookie("d", "5"),
+                cookie("c", "4")
+            ]
+        );
+    }
+
+    #[test]
+    fn a_cookie_the_send_removed_is_removed() {
+        let before = vec![cookie("a", "1"), cookie("b", "2")];
+        let after = vec![cookie("b", "2")];
+        let current = vec![cookie("a", "1"), cookie("b", "2"), cookie("c", "3")];
+        assert_eq!(
+            apply_cookie_changes(current, &before, &after),
+            vec![cookie("b", "2"), cookie("c", "3")]
+        );
+    }
+
+    #[test]
+    fn a_cookie_the_user_deleted_mid_send_stays_deleted_unless_the_send_set_it() {
+        let before = vec![cookie("a", "1")];
+        let after = vec![cookie("a", "1")]; // untouched by the send
+        assert_eq!(apply_cookie_changes(vec![], &before, &after), vec![]);
+        let after = vec![cookie("a", "fresh")]; // the send set it again
+        assert_eq!(apply_cookie_changes(vec![], &before, &after), vec![cookie("a", "fresh")]);
+    }
+}
diff --git a/crates/yaak-models/src/error.rs b/crates/yaak-models/src/error.rs
new file mode 100644
index 0000000..06ac848
--- /dev/null
+++ b/crates/yaak-models/src/error.rs
@@ -0,0 +1,69 @@
+use serde::{Serialize, Serializer};
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error("SQL error: {0}")]
+    SqlError(#[from] rusqlite::Error),
+
+    #[error("SQL Pool error: {0}")]
+    SqlPoolError(#[from] yaak_database::PoolError),
+
+    #[error("Database error: {0}")]
+    Database(String),
+
+    #[error("IO error: {0}")]
+    Io(#[from] std::io::Error),
+
+    #[error("JSON error: {0}")]
+    JsonError(#[from] serde_json::Error),
+
+    #[error("Model not found: {0}")]
+    ModelNotFound(String),
+
+    #[error("Model serialization error: {0}")]
+    ModelSerializationError(String),
+
+    #[error("HTTP error: {0}")]
+    GenericError(String),
+
+    #[error("DB Migration Failed: {0}")]
+    MigrationError(String),
+
+    #[error("No base environment for {0}")]
+    MissingBaseEnvironment(String),
+
+    #[error("Invalid environment selection: {0}")]
+    InvalidEnvironment(String),
+
+    #[error("Multiple base environments for {0}. Delete duplicates before continuing.")]
+    MultipleBaseEnvironments(String),
+
+    #[error("unknown error")]
+    Unknown,
+}
+
+impl From<yaak_database::Error> for Error {
+    fn from(e: yaak_database::Error) -> Self {
+        match e {
+            yaak_database::Error::SqlError(e) => Error::SqlError(e),
+            yaak_database::Error::SqlPoolError(e) => Error::SqlPoolError(e),
+            yaak_database::Error::Database(s) => Error::Database(s),
+            yaak_database::Error::Io(e) => Error::Io(e),
+            yaak_database::Error::JsonError(e) => Error::JsonError(e),
+            yaak_database::Error::ModelNotFound(s) => Error::ModelNotFound(s),
+            yaak_database::Error::MigrationError(s) => Error::MigrationError(s),
+        }
+    }
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-models/src/example.rs b/crates/yaak-models/src/example.rs
new file mode 100644
index 0000000..63f8042
--- /dev/null
+++ b/crates/yaak-models/src/example.rs
@@ -0,0 +1,104 @@
+//! The example workspace offered during onboarding.
+//!
+//! Authored as JSON with `{{PLACEHOLDER}}` ids so requests can reference each
+//! other (the chaining example names another request by id). Every placeholder
+//! gets a fresh id per creation, so the example can be created more than once.
+
+use crate::error::Result;
+use crate::models::{Environment, Folder, HttpRequest, UpsertModelInfo, Workspace};
+use crate::query_manager::QueryManager;
+use crate::util::{BatchUpsertResult, UpdateSource};
+
+const EXAMPLE_JSON: &str = include_str!("example_workspace.json");
+
+const WORKSPACE_IDS: &[&str] = &["WORKSPACE"];
+const ENVIRONMENT_IDS: &[&str] = &["ENV_BASE", "ENV_USER_2"];
+const FOLDER_IDS: &[&str] = &[
+    "FOLDER_BASICS",
+    "FOLDER_VARIABLES",
+    "FOLDER_CHAINING",
+    "FOLDER_AUTH",
+];
+const REQUEST_IDS: &[&str] = &[
+    "RQ_LIST_POSTS",
+    "RQ_GET_POST",
+    "RQ_CREATE_POST",
+    "RQ_CURRENT_USER",
+    "RQ_LIST_USERS",
+    "RQ_POSTS_BY_FIRST_USER",
+    "RQ_TODOS",
+    "RQ_LOG_IN",
+    "RQ_ME",
+];
+
+pub fn create_example_workspace(
+    query_manager: &QueryManager,
+    source: &UpdateSource,
+) -> Result<BatchUpsertResult> {
+    let resources = example_resources()?;
+    Ok(query_manager.with_tx(|tx| {
+        tx.batch_upsert(
+            resources.workspaces,
+            resources.environments,
+            resources.folders,
+            resources.http_requests,
+            resources.grpc_requests,
+            resources.websocket_requests,
+            source,
+        )
+    })?)
+}
+
+fn example_resources() -> Result<BatchUpsertResult> {
+    let mut json = EXAMPLE_JSON.to_string();
+    let placeholders = WORKSPACE_IDS
+        .iter()
+        .map(|p| (*p, Workspace::generate_id()))
+        .chain(ENVIRONMENT_IDS.iter().map(|p| (*p, Environment::generate_id())))
+        .chain(FOLDER_IDS.iter().map(|p| (*p, Folder::generate_id())))
+        .chain(REQUEST_IDS.iter().map(|p| (*p, HttpRequest::generate_id())));
+    for (placeholder, id) in placeholders {
+        json = json.replace(&format!("{{{{{placeholder}}}}}"), &id);
+    }
+    debug_assert!(!json.contains("{{"), "example workspace has an unmapped placeholder");
+    Ok(serde_json::from_str(&json)?)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::init_in_memory;
+
+    #[test]
+    fn every_placeholder_is_mapped() {
+        let json = serde_json::to_string(&example_resources().unwrap()).unwrap();
+        assert!(!json.contains("{{"), "unmapped placeholder in {json}");
+    }
+
+    #[test]
+    fn chained_request_references_a_created_request() {
+        let (query_manager, _blobs, _rx) = init_in_memory().unwrap();
+        let created = create_example_workspace(&query_manager, &UpdateSource::Background).unwrap();
+        assert_eq!(created.workspaces.len(), 1);
+        let workspace_id = &created.workspaces[0].id;
+
+        let db = query_manager.connect();
+        let requests = db.list_http_requests(workspace_id).unwrap();
+        assert_eq!(requests.len(), REQUEST_IDS.len());
+        assert_eq!(db.list_folders(workspace_id).unwrap().len(), FOLDER_IDS.len());
+        assert_eq!(db.list_environments(workspace_id).unwrap().len(), ENVIRONMENT_IDS.len());
+
+        let list_users = requests.iter().find(|r| r.name == "List users").unwrap();
+        let chained = requests.iter().find(|r| r.name == "Posts by the first user").unwrap();
+        let param = &chained.url_parameters[0].value;
+        assert!(param.contains(&format!("request='{}'", list_users.id)), "{param}");
+    }
+
+    #[test]
+    fn creating_twice_makes_two_workspaces() {
+        let (query_manager, _blobs, _rx) = init_in_memory().unwrap();
+        create_example_workspace(&query_manager, &UpdateSource::Background).unwrap();
+        create_example_workspace(&query_manager, &UpdateSource::Background).unwrap();
+        assert_eq!(query_manager.connect().list_workspaces().unwrap().len(), 2);
+    }
+}
diff --git a/crates/yaak-models/src/example_workspace.json b/crates/yaak-models/src/example_workspace.json
new file mode 100644
index 0000000..bd1dbac
--- /dev/null
+++ b/crates/yaak-models/src/example_workspace.json
@@ -0,0 +1,181 @@
+{
+  "workspaces": [
+    {
+      "id": "{{WORKSPACE}}",
+      "name": "Example Workspace",
+      "description": "A small tour of Yaak using the [Yaak Playground](https://yaak.run) API. Nothing here needs an account.\n\n1. Open **Getting Started / List posts** and press Send\n2. Open **Variables / Get the current user**, then switch the environment in the top-left to change which user it fetches\n3. Open **Chaining / Posts by the first user** to see how one request reads a value out of another request's response\n4. Open **Authentication / Get my profile** to see a login token used for you\n\nDelete this workspace whenever you're done with it."
+    }
+  ],
+  "environments": [
+    {
+      "id": "{{ENV_BASE}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "name": "Global Variables",
+      "parentModel": "workspace",
+      "public": true,
+      "variables": [
+        { "name": "base_url", "value": "https://yaak.run", "enabled": true },
+        { "name": "user_id", "value": "1", "enabled": true },
+        { "name": "username", "value": "ada", "enabled": true },
+        { "name": "password", "value": "yaak", "enabled": true }
+      ]
+    },
+    {
+      "id": "{{ENV_USER_2}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "name": "Another User",
+      "parentModel": "environment",
+      "public": true,
+      "color": "#c084fc",
+      "variables": [
+        { "name": "user_id", "value": "2", "enabled": true },
+        { "name": "username", "value": "grace", "enabled": true }
+      ]
+    }
+  ],
+  "folders": [
+    {
+      "id": "{{FOLDER_BASICS}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "name": "Getting Started",
+      "sortPriority": 1,
+      "description": "Plain requests. Send one, then look through the response tabs: Body, Headers, Cookies, and Timeline."
+    },
+    {
+      "id": "{{FOLDER_VARIABLES}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "name": "Variables",
+      "sortPriority": 2,
+      "description": "Anything wrapped in `${[ ... ]}` is a template. Variables come from the environment selected in the top-left, and sub-environments override the base values."
+    },
+    {
+      "id": "{{FOLDER_CHAINING}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "name": "Chaining",
+      "sortPriority": 3,
+      "description": "The `response()` template function reads a value out of another request's response, sending that request first if it has to. Put the cursor in a URL and press Ctrl+Space to insert one."
+    },
+    {
+      "id": "{{FOLDER_AUTH}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "name": "Authentication",
+      "sortPriority": 4,
+      "description": "This folder sets Bearer auth to the token from the **Log in** response. Every request inside inherits it, so the token lives in one place. When the last login is more than 50 minutes old, Yaak logs in again before sending.",
+      "authenticationType": "bearer",
+      "authentication": {
+        "token": "${[ response.body.path(request='{{RQ_LOG_IN}}', path='$.accessToken', behavior='ttl', ttl='3000') ]}"
+      }
+    }
+  ],
+  "httpRequests": [
+    {
+      "id": "{{RQ_LIST_POSTS}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "folderId": "{{FOLDER_BASICS}}",
+      "name": "List posts",
+      "method": "GET",
+      "url": "${[ base_url ]}/posts",
+      "sortPriority": 1,
+      "urlParameters": [{ "name": "limit", "value": "5", "enabled": true }],
+      "description": "Query parameters live in the Params tab. Try raising `limit`."
+    },
+    {
+      "id": "{{RQ_GET_POST}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "folderId": "{{FOLDER_BASICS}}",
+      "name": "Get a post",
+      "method": "GET",
+      "url": "${[ base_url ]}/posts/1",
+      "sortPriority": 2,
+      "description": "Change the ID at the end of the URL and send again."
+    },
+    {
+      "id": "{{RQ_CREATE_POST}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "folderId": "{{FOLDER_BASICS}}",
+      "name": "Create a post",
+      "method": "POST",
+      "url": "${[ base_url ]}/posts",
+      "sortPriority": 3,
+      "bodyType": "application/json",
+      "body": {
+        "text": "{\n  \"title\": \"Hello from Yaak\",\n  \"body\": \"Templates work inside bodies too\",\n  \"userId\": ${[ user_id ]}\n}"
+      },
+      "headers": [{ "name": "Content-Type", "value": "application/json", "enabled": true }],
+      "description": "Posts you create are only visible to you, and go back to the sample data after an hour. Put the new ID into **Get a post** to read it back."
+    },
+    {
+      "id": "{{RQ_CURRENT_USER}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "folderId": "{{FOLDER_VARIABLES}}",
+      "name": "Get the current user",
+      "method": "GET",
+      "url": "${[ base_url ]}/users/${[ user_id ]}",
+      "sortPriority": 1,
+      "description": "Switch to the **Another User** environment in the top-left and send again. Hover a template in the URL to see what it resolves to."
+    },
+    {
+      "id": "{{RQ_TODOS}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "folderId": "{{FOLDER_VARIABLES}}",
+      "name": "List the user's todos",
+      "method": "GET",
+      "url": "${[ base_url ]}/users/${[ user_id ]}/todos",
+      "sortPriority": 2,
+      "urlParameters": [{ "name": "completed", "value": "false", "enabled": true }],
+      "description": "The same `user_id` variable, used in a different request. Disable the `completed` parameter to see finished todos too."
+    },
+    {
+      "id": "{{RQ_LIST_USERS}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "folderId": "{{FOLDER_CHAINING}}",
+      "name": "List users",
+      "method": "GET",
+      "url": "${[ base_url ]}/users",
+      "sortPriority": 1
+    },
+    {
+      "id": "{{RQ_POSTS_BY_FIRST_USER}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "folderId": "{{FOLDER_CHAINING}}",
+      "name": "Posts by the first user",
+      "method": "GET",
+      "url": "${[ base_url ]}/posts",
+      "sortPriority": 2,
+      "urlParameters": [
+        {
+          "name": "userId",
+          "value": "${[ response.body.path(request='{{RQ_LIST_USERS}}', path='$[0].id') ]}",
+          "enabled": true
+        }
+      ],
+      "description": "The `userId` parameter is pulled from the **List users** response with the JSONPath `$[0].id`. If that request hasn't been sent yet, Yaak sends it first."
+    },
+    {
+      "id": "{{RQ_LOG_IN}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "folderId": "{{FOLDER_AUTH}}",
+      "name": "Log in",
+      "method": "POST",
+      "url": "${[ base_url ]}/auth/token",
+      "sortPriority": 1,
+      "authenticationType": "none",
+      "bodyType": "application/json",
+      "body": {
+        "text": "{\n  \"username\": \"${[ username ]}\",\n  \"password\": \"${[ password ]}\"\n}"
+      },
+      "headers": [{ "name": "Content-Type", "value": "application/json", "enabled": true }],
+      "description": "Sends the username and password from the environment and returns a token. Its Auth tab is set to No Auth, so it doesn't try to use the token it's fetching."
+    },
+    {
+      "id": "{{RQ_ME}}",
+      "workspaceId": "{{WORKSPACE}}",
+      "folderId": "{{FOLDER_AUTH}}",
+      "name": "Get my profile",
+      "method": "GET",
+      "url": "${[ base_url ]}/auth/me",
+      "sortPriority": 2,
+      "description": "Open the Auth tab: it inherits Bearer auth from the folder, and there's nothing to copy and paste. Check the Timeline tab after sending to see the Authorization header that was sent. To try it as someone else, switch to **Another User** and send **Log in** again."
+    }
+  ]
+}
diff --git a/crates/yaak-models/src/export.rs b/crates/yaak-models/src/export.rs
new file mode 100644
index 0000000..9326333
--- /dev/null
+++ b/crates/yaak-models/src/export.rs
@@ -0,0 +1,33 @@
+//! Building an export document.
+//!
+//! Here rather than in `yaak` because the whole of it is this crate: a connection, the
+//! resources, and JSON. Putting it where the browser can reach it too is what keeps a
+//! tab's export from being a second implementation that drifts.
+
+use crate::error::Result;
+use crate::query_manager::QueryManager;
+use crate::util::get_workspace_export_resources;
+
+pub struct ExportDataParams<'a> {
+    pub query_manager: &'a QueryManager,
+    pub yaak_version: &'a str,
+    pub workspace_ids: Vec<&'a str>,
+    pub include_private_environments: bool,
+}
+
+/// The export document, as JSON.
+///
+/// Returned rather than written: where an export goes is the host's to decide, and a browser
+/// tab has no path to be handed. The desktop hands the bytes to its save dialog, the CLI
+/// writes them, a tab downloads them. None of that is this function's business.
+pub fn export_data(params: ExportDataParams<'_>) -> Result<String> {
+    let db = params.query_manager.connect();
+    let export_data = get_workspace_export_resources(
+        &db,
+        params.yaak_version,
+        params.workspace_ids,
+        params.include_private_environments,
+    )?;
+
+    Ok(serde_json::to_string_pretty(&export_data)?)
+}
diff --git a/crates/yaak-models/src/lib.rs b/crates/yaak-models/src/lib.rs
new file mode 100644
index 0000000..60eab2e
--- /dev/null
+++ b/crates/yaak-models/src/lib.rs
@@ -0,0 +1,183 @@
+use crate::blob_manager::{BlobManager, migrate_blob_db};
+use crate::error::Result;
+use crate::migrate::migrate_db;
+use crate::query_manager::QueryManager;
+use crate::util::ModelPayload;
+use log::info;
+use std::path::Path;
+use std::sync::mpsc;
+use yaak_database::SqlitePool;
+
+pub mod blob_manager;
+pub mod client_db;
+mod connection_or_tx;
+pub mod cookies;
+pub mod error;
+pub mod example;
+pub mod export;
+pub mod migrate;
+pub mod models;
+pub mod models_ops;
+pub mod path_placeholders;
+pub mod queries;
+pub mod query_manager;
+pub mod render;
+pub mod util;
+
+/// Per-connection setup, applied by every pool on every connection it opens.
+fn init_connection(conn: &rusqlite::Connection) -> rusqlite::Result<()> {
+    conn.busy_timeout(std::time::Duration::from_millis(5000))
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+fn init_file_connection(conn: &rusqlite::Connection) -> rusqlite::Result<()> {
+    conn.pragma_update(None, "journal_mode", "WAL")?;
+    conn.pragma_update(None, "synchronous", "NORMAL")?;
+    init_connection(conn)
+}
+
+/// The two ways a pool comes to exist, one per target.
+///
+/// On the desktop and CLI, an r2d2 pool over a file. In a browser, a single
+/// connection over whatever VFS the host registered before calling in — the
+/// path is a name inside that VFS, not a place on disk. Everything downstream
+/// of `SqlitePool` is target-agnostic; this is the only fork.
+#[cfg(not(target_arch = "wasm32"))]
+mod open {
+    use super::*;
+    use crate::error::Error;
+    use r2d2::Pool;
+    use r2d2_sqlite::SqliteConnectionManager;
+    use std::path::PathBuf;
+    use std::time::Duration;
+
+    pub fn file_pool(path: impl Into<PathBuf>, max_size: u32, min_idle: u32) -> Result<SqlitePool> {
+        let path: PathBuf = path.into();
+        // Create parent directories if needed
+        if let Some(parent) = path.parent() {
+            std::fs::create_dir_all(parent)?;
+        }
+        let manager = SqliteConnectionManager::file(path).with_init(|c| init_file_connection(c));
+        Pool::builder()
+            .max_size(max_size)
+            .min_idle(Some(min_idle))
+            .connection_timeout(Duration::from_secs(10))
+            .build(manager)
+            .map_err(|e| Error::Database(e.to_string()))
+    }
+
+    /// `(readers, writer)` over one file: a pool of `max_size` readers and a
+    /// pool of exactly one writer.
+    pub fn file_pools(
+        path: impl Into<PathBuf>,
+        max_size: u32,
+        min_idle: u32,
+    ) -> Result<(SqlitePool, SqlitePool)> {
+        let path: PathBuf = path.into();
+        Ok((file_pool(&path, max_size, min_idle)?, file_pool(&path, 1, 1)?))
+    }
+
+    pub fn memory_pool() -> Result<SqlitePool> {
+        let manager = SqliteConnectionManager::memory().with_init(|c| init_connection(c));
+        // In-memory DB doesn't support multiple connections
+        Pool::builder().max_size(1).build(manager).map_err(|e| Error::Database(e.to_string()))
+    }
+}
+
+#[cfg(target_arch = "wasm32")]
+mod open {
+    use super::*;
+    use rusqlite::Connection;
+    use std::path::PathBuf;
+
+    pub fn file_pool(
+        path: impl Into<PathBuf>,
+        _max_size: u32,
+        _min_idle: u32,
+    ) -> Result<SqlitePool> {
+        // No WAL: the browser VFSs are single-connection and journal their own
+        // way; the pragma is accepted and ignored on some and rejected on
+        // others, so it is not applied at all here.
+        let conn = Connection::open(path.into())?;
+        init_connection(&conn)?;
+        Ok(SqlitePool::single(conn))
+    }
+
+    /// One connection is all a browser VFS allows, so it reads and writes.
+    pub fn file_pools(
+        path: impl Into<PathBuf>,
+        max_size: u32,
+        min_idle: u32,
+    ) -> Result<(SqlitePool, SqlitePool)> {
+        let pool = file_pool(path, max_size, min_idle)?;
+        Ok((pool.clone(), pool))
+    }
+
+    pub fn memory_pool() -> Result<SqlitePool> {
+        let conn = Connection::open_in_memory()?;
+        init_connection(&conn)?;
+        Ok(SqlitePool::single(conn))
+    }
+}
+
+/// Initialize the database managers for standalone (non-Tauri) usage.
+///
+/// Returns a tuple of (QueryManager, BlobManager, event_receiver).
+/// The event_receiver can be used to listen for model change events.
+pub fn init_standalone(
+    db_path: impl AsRef<Path>,
+    blob_path: impl AsRef<Path>,
+) -> Result<(QueryManager, BlobManager, mpsc::Receiver<ModelPayload>)> {
+    let db_path = db_path.as_ref();
+    let blob_path = blob_path.as_ref();
+
+    // Each database gets a reader pool and a one-connection writer pool; see
+    // `QueryManager` for why. Reader pools are sized for concurrent in-flight
+    // queries, not concurrent app features — connections are held per-statement,
+    // so even heavy fan-out (e.g. many gRPC streams) only needs a handful at once.
+    // Keep them modest: WAL connections hold ~3 file descriptors each, and macOS
+    // GUI apps get a 256 fd soft limit.
+    info!("Initializing app database {db_path:?}");
+    let (readers, writer) = open::file_pools(db_path, 20, 2)?;
+    migrate_db(&writer)?;
+
+    info!("Initializing blobs database {blob_path:?}");
+    let (blob_readers, blob_writer) = open::file_pools(blob_path, 10, 1)?;
+    migrate_blob_db(&blob_writer)?;
+
+    let (tx, rx) = mpsc::channel();
+    let query_manager = QueryManager::new(readers, writer, tx);
+    let blob_manager = BlobManager::new(blob_readers, blob_writer);
+    bootstrap(&query_manager)?;
+
+    Ok((query_manager, blob_manager, rx))
+}
+
+/// Initialize the database managers with in-memory SQLite databases.
+/// Useful for testing and CI environments.
+///
+/// An in-memory database is private to its connection, so the one connection
+/// is both the reader pool and the writer.
+pub fn init_in_memory() -> Result<(QueryManager, BlobManager, mpsc::Receiver<ModelPayload>)> {
+    let pool = open::memory_pool()?;
+    migrate_db(&pool)?;
+
+    let blob_pool = open::memory_pool()?;
+    migrate_blob_db(&blob_pool)?;
+
+    let (tx, rx) = mpsc::channel();
+    let query_manager = QueryManager::new(pool.clone(), pool, tx);
+    let blob_manager = BlobManager::new(blob_pool.clone(), blob_pool);
+    bootstrap(&query_manager)?;
+
+    Ok((query_manager, blob_manager, rx))
+}
+
+/// The rows every client assumes exist. Workspaces are not among them: a fresh
+/// install has none, and the client shows onboarding until the user makes one.
+fn bootstrap(query_manager: &QueryManager) -> Result<()> {
+    query_manager.with_tx(|tx| {
+        tx.ensure_settings()?;
+        Ok(())
+    })
+}
diff --git a/crates/yaak-models/src/migrate.rs b/crates/yaak-models/src/migrate.rs
new file mode 100644
index 0000000..607045e
--- /dev/null
+++ b/crates/yaak-models/src/migrate.rs
@@ -0,0 +1,147 @@
+use crate::error::Error::MigrationError;
+use crate::error::Result;
+use include_dir::{Dir, DirEntry, include_dir};
+use log::{debug, info};
+use rusqlite::{OptionalExtension, Transaction, TransactionBehavior, params};
+use sha2::{Digest, Sha384};
+use yaak_database::SqlitePool;
+
+static MIGRATIONS_DIR: Dir = include_dir!("$CARGO_MANIFEST_DIR/migrations");
+
+pub fn migrate_db(pool: &SqlitePool) -> Result<()> {
+    info!("Running database migrations");
+
+    // Ensure the table exists
+    // NOTE: Yaak used to use sqlx for migrations, so we need to mirror that table structure. We
+    //  are writing checksum but not verifying because we want to be able to change migrations after
+    //  a release in case something breaks.
+    pool.get()?.execute(
+        "CREATE TABLE IF NOT EXISTS _sqlx_migrations (
+            version        BIGINT PRIMARY KEY,
+            description    TEXT NOT NULL,
+            installed_on   TIMESTAMP default CURRENT_TIMESTAMP NOT NULL,
+            success        BOOLEAN                             NOT NULL,
+            checksum       BLOB                                NOT NULL,
+            execution_time BIGINT                              NOT NULL
+        )",
+        [],
+    )?;
+
+    // Read and sort all .sql files
+    let mut entries = MIGRATIONS_DIR
+        .entries()
+        .into_iter()
+        .filter(|e| e.path().extension().map(|ext| ext == "sql").unwrap_or(false))
+        .collect::<Vec<_>>();
+
+    // Ensure they're in the correct order
+    entries.sort_by_key(|e| e.path());
+
+    // Run each migration in a transaction
+    let mut num_migrations = 0;
+    let mut ran_migrations = 0;
+    for entry in entries {
+        num_migrations += 1;
+        let conn = pool.get()?;
+        // `new_unchecked` takes `&Connection`; see yaak_database::pool for why
+        // the pool never hands out `&mut`.
+        let mut tx = Transaction::new_unchecked(&conn, TransactionBehavior::Immediate)?;
+        match run_migration(entry, &mut tx) {
+            Ok(ran) => {
+                if ran {
+                    ran_migrations += 1;
+                }
+                tx.commit()?
+            }
+            Err(e) => {
+                let msg = format!(
+                    "{} failed with {}",
+                    entry.path().file_name().unwrap().to_str().unwrap(),
+                    e.to_string()
+                );
+                tx.rollback()?;
+                return Err(MigrationError(msg));
+            }
+        };
+    }
+
+    if ran_migrations == 0 {
+        info!("No migrations to run out of {}", num_migrations);
+    } else {
+        info!("Ran {}/{} migrations", ran_migrations, num_migrations);
+    }
+
+    Ok(())
+}
+
+fn run_migration(migration_path: &DirEntry, tx: &mut rusqlite::Transaction) -> Result<bool> {
+    let start = elapsed_timer();
+    let (version, description) = split_migration_filename(migration_path.path().to_str().unwrap())
+        .expect("Failed to parse migration filename");
+
+    // Skip if already applied
+    let row: Option<i64> = tx
+        .query_row("SELECT 1 FROM _sqlx_migrations WHERE version = ?", [version.clone()], |r| {
+            r.get(0)
+        })
+        .optional()?;
+
+    if row.is_some() {
+        debug!("Skipping already run migration {description}");
+        return Ok(false); // Migration was already run
+    }
+
+    let sql =
+        migration_path.as_file().unwrap().contents_utf8().expect("Failed to read migration file");
+    info!("Applying migration {description}");
+
+    // Split on `;`? → optional depending on how your SQL is structured
+    tx.execute_batch(&sql)?;
+
+    let execution_time = start();
+    let checksum = sha384_hex_prefixed(sql.as_bytes());
+
+    // NOTE: The success column is never used. It's just there for sqlx compatibility.
+    tx.execute(
+        "INSERT INTO _sqlx_migrations (version, description, execution_time, checksum, success) VALUES (?, ?, ?, ?, ?)",
+        params![version, description, execution_time, checksum, true],
+    )?;
+
+    Ok(true)
+}
+
+/// Nanoseconds since the timer was started, for the sqlx-compatible
+/// `execution_time` column. `Instant` does not exist on `wasm32-unknown-unknown`
+/// (there is no monotonic clock to ask), and the column is bookkeeping, so
+/// there it reads as zero rather than taking the migrator down with it.
+#[cfg(not(target_arch = "wasm32"))]
+fn elapsed_timer() -> impl Fn() -> i64 {
+    let start = std::time::Instant::now();
+    move || start.elapsed().as_nanos() as i64
+}
+
+#[cfg(target_arch = "wasm32")]
+fn elapsed_timer() -> impl Fn() -> i64 {
+    || 0
+}
+
+fn split_migration_filename(filename: &str) -> Option<(String, String)> {
+    // Remove the .sql extension
+    let trimmed = filename.strip_suffix(".sql")?;
+
+    // Split on the first underscore
+    let mut parts = trimmed.splitn(2, '_');
+    let version = parts.next()?.to_string();
+    let description = parts.next()?.to_string();
+
+    Some((version, description))
+}
+
+fn sha384_hex_prefixed(input: &[u8]) -> String {
+    let mut hasher = Sha384::new();
+    hasher.update(input);
+    let result = hasher.finalize();
+
+    // Format as 0x... with uppercase hex
+    format!("0x{}", hex::encode_upper(result))
+}
diff --git a/crates/yaak-models/src/models.rs b/crates/yaak-models/src/models.rs
new file mode 100644
index 0000000..8750122
--- /dev/null
+++ b/crates/yaak-models/src/models.rs
@@ -0,0 +1,3358 @@
+use crate::error::Result;
+use crate::models::HttpRequestIden::{
+    Authentication, AuthenticationType, Body, BodyType, CreatedAt, Description, FolderId, Headers,
+    Method, Name, SettingFollowRedirects, SettingHttpVersion, SettingRequestTimeout,
+    SettingSendCookies, SettingStoreCookies, SettingValidateCertificates, SortPriority, UpdatedAt,
+    Url, UrlParameters, WorkspaceId,
+};
+use crate::util::generate_prefixed_id;
+use chrono::{NaiveDateTime, Utc};
+use rusqlite::Row;
+use schemars::JsonSchema;
+use sea_query::Order::Desc;
+use sea_query::{IntoColumnRef, IntoIden, IntoTableRef, Order, SimpleExpr, enum_def};
+use serde::{Deserialize, Deserializer, Serialize};
+use serde_json::Value;
+use std::collections::BTreeMap;
+use std::collections::HashMap;
+use std::fmt::{Debug, Display};
+use std::str::FromStr;
+use ts_rs::TS;
+use yaak_database::{Result as DbResult, UpdateSource};
+pub use yaak_database::{UpsertModelInfo, upsert_date};
+
+pub const DEFAULT_REQUEST_MESSAGE_SIZE: i32 = 64 * 1024 * 1024;
+
+#[macro_export]
+macro_rules! impl_model {
+    ($t:ty, $variant:ident) => {
+        impl $crate::Model for $t {
+            fn into_any(self) -> $crate::AnyModel {
+                $crate::AnyModel::$variant(self)
+            }
+        }
+    };
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase", tag = "type")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum ProxySetting {
+    Enabled {
+        http: String,
+        https: String,
+        auth: Option<ProxySettingAuth>,
+
+        // These were added later, so give them defaults
+        #[serde(default)]
+        bypass: String,
+        #[serde(default)]
+        disabled: bool,
+    },
+    Disabled,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct ProxySettingAuth {
+    pub user: String,
+    pub password: String,
+}
+
+impl Default for ClientCertificate {
+    fn default() -> Self {
+        Self {
+            host: String::new(),
+            port: None,
+            crt_file: None,
+            key_file: None,
+            pfx_file: None,
+            passphrase: None,
+            enabled: true,
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct ClientCertificate {
+    pub host: String,
+    #[serde(default)]
+    pub port: Option<i32>,
+    #[serde(default)]
+    pub crt_file: Option<String>,
+    #[serde(default)]
+    pub key_file: Option<String>,
+    #[serde(default)]
+    pub pfx_file: Option<String>,
+    #[serde(default)]
+    pub passphrase: Option<String>,
+    #[ts(optional, as = "Option<bool>")]
+    pub enabled: bool,
+}
+
+impl Default for DnsOverride {
+    fn default() -> Self {
+        Self { hostname: String::new(), ipv4: Vec::new(), ipv6: Vec::new(), enabled: true }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct DnsOverride {
+    pub hostname: String,
+    #[serde(default)]
+    pub ipv4: Vec<String>,
+    #[serde(default)]
+    pub ipv6: Vec<String>,
+    #[ts(optional, as = "Option<bool>")]
+    pub enabled: bool,
+}
+
+#[derive(Debug, Clone, PartialEq, Default)]
+pub struct ResolvedSetting<T> {
+    pub value: T,
+    pub source_model: String,
+    pub source_id: Option<String>,
+    pub source_name: Option<String>,
+}
+
+impl<T> ResolvedSetting<T> {
+    pub fn from_model(value: T, model: AnyModel) -> Self {
+        Self {
+            value,
+            source_model: model.model().to_string(),
+            source_id: Some(model.id().to_string()),
+            source_name: Some(model.resolved_name()),
+        }
+    }
+
+    pub fn default_source(value: T) -> Self {
+        Self { value, source_model: "default".to_string(), source_id: None, source_name: None }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct ResolvedHttpRequestSettings {
+    pub validate_certificates: ResolvedSetting<bool>,
+    pub follow_redirects: ResolvedSetting<bool>,
+    pub request_timeout: ResolvedSetting<i32>,
+    pub request_message_size: ResolvedSetting<i32>,
+    pub send_cookies: ResolvedSetting<bool>,
+    pub store_cookies: ResolvedSetting<bool>,
+    pub http_version: ResolvedSetting<HttpVersion>,
+}
+
+impl Default for ResolvedHttpRequestSettings {
+    fn default() -> Self {
+        Self {
+            validate_certificates: ResolvedSetting::default_source(true),
+            follow_redirects: ResolvedSetting::default_source(true),
+            request_timeout: ResolvedSetting::default_source(0),
+            request_message_size: ResolvedSetting::default_source(DEFAULT_REQUEST_MESSAGE_SIZE),
+            send_cookies: ResolvedSetting::default_source(true),
+            store_cookies: ResolvedSetting::default_source(true),
+            http_version: ResolvedSetting::default_source(HttpVersion::Auto),
+        }
+    }
+}
+
+impl ResolvedHttpRequestSettings {
+    /// The `* Setting name=value` lines a send writes at the top of its timeline, sources and
+    /// all. Built here, once, so every host that runs a send — the desktop, the CLI, the browser
+    /// tab handing off to a proxy — records the same lines the same way.
+    pub fn timeline_events(&self) -> Vec<HttpResponseEventData> {
+        fn event<T>(
+            name: &str,
+            value: String,
+            setting: &ResolvedSetting<T>,
+        ) -> HttpResponseEventData {
+            HttpResponseEventData::Setting {
+                name: name.to_string(),
+                value,
+                source_model: Some(setting.source_model.clone()),
+                source_id: setting.source_id.clone(),
+                source_name: setting.source_name.clone(),
+            }
+        }
+        let timeout = if self.request_timeout.value > 0 {
+            format!("{:?}", std::time::Duration::from_millis(self.request_timeout.value as u64))
+        } else {
+            "Infinity".to_string()
+        };
+        vec![
+            event(
+                "validate_certificates",
+                self.validate_certificates.value.to_string(),
+                &self.validate_certificates,
+            ),
+            event("redirects", self.follow_redirects.value.to_string(), &self.follow_redirects),
+            event("timeout", timeout, &self.request_timeout),
+            event("send_cookies", self.send_cookies.value.to_string(), &self.send_cookies),
+            event("store_cookies", self.store_cookies.value.to_string(), &self.store_cookies),
+            event("http_version", self.http_version.value.to_string(), &self.http_version),
+        ]
+    }
+}
+
+/// The resolved send settings, values only: what an executor has to obey, with the sources
+/// (which model each came from) left behind in [`ResolvedHttpRequestSettings`]. This is what
+/// crosses from a tab to the Yaak server, and what the server reads.
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct HttpSendSettings {
+    pub validate_certificates: bool,
+    pub follow_redirects: bool,
+    /// Milliseconds. Zero or negative means no timeout.
+    pub timeout_ms: i32,
+    pub send_cookies: bool,
+    pub store_cookies: bool,
+    #[serde(default)]
+    pub http_version: HttpVersion,
+}
+
+impl From<&ResolvedHttpRequestSettings> for HttpSendSettings {
+    fn from(s: &ResolvedHttpRequestSettings) -> Self {
+        Self {
+            validate_certificates: s.validate_certificates.value,
+            follow_redirects: s.follow_redirects.value,
+            timeout_ms: s.request_timeout.value,
+            send_cookies: s.send_cookies.value,
+            store_cookies: s.store_cookies.value,
+            http_version: s.http_version.value,
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct InheritedBoolSetting {
+    #[serde(default)]
+    #[ts(optional, as = "Option<bool>")]
+    pub enabled: bool,
+    pub value: bool,
+}
+
+impl Default for InheritedBoolSetting {
+    fn default() -> Self {
+        Self { enabled: false, value: true }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct InheritedIntSetting {
+    #[serde(default)]
+    #[ts(optional, as = "Option<bool>")]
+    pub enabled: bool,
+    #[serde(default)]
+    pub value: i32,
+}
+
+impl Default for InheritedIntSetting {
+    fn default() -> Self {
+        Self { enabled: false, value: 0 }
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum HttpVersion {
+    #[default]
+    Auto,
+    Http1,
+    Http2,
+}
+
+impl FromStr for HttpVersion {
+    type Err = crate::error::Error;
+
+    fn from_str(s: &str) -> Result<Self> {
+        match s {
+            "http1" => Ok(Self::Http1),
+            "http2" => Ok(Self::Http2),
+            _ => Ok(Self::Auto),
+        }
+    }
+}
+
+impl Display for HttpVersion {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let str = match self {
+            HttpVersion::Auto => "auto",
+            HttpVersion::Http1 => "http1",
+            HttpVersion::Http2 => "http2",
+        };
+        write!(f, "{}", str)
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Default, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct InheritedHttpVersionSetting {
+    #[serde(default)]
+    #[ts(optional, as = "Option<bool>")]
+    pub enabled: bool,
+    pub value: HttpVersion,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum EditorKeymap {
+    Default,
+    Vim,
+    Vscode,
+    Emacs,
+}
+
+impl FromStr for EditorKeymap {
+    type Err = crate::error::Error;
+
+    fn from_str(s: &str) -> Result<Self> {
+        match s {
+            "default" => Ok(Self::Default),
+            "vscode" => Ok(Self::Vscode),
+            "vim" => Ok(Self::Vim),
+            "emacs" => Ok(Self::Emacs),
+            _ => Ok(Self::default()),
+        }
+    }
+}
+
+impl Display for EditorKeymap {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let str = match self {
+            EditorKeymap::Default => "default".to_string(),
+            EditorKeymap::Vscode => "vscode".to_string(),
+            EditorKeymap::Vim => "vim".to_string(),
+            EditorKeymap::Emacs => "emacs".to_string(),
+        };
+        write!(f, "{}", str)
+    }
+}
+
+impl Default for EditorKeymap {
+    fn default() -> Self {
+        Self::Default
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "settings")]
+pub struct Settings {
+    #[ts(type = "\"settings\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+
+    pub appearance: String,
+    pub client_certificates: Vec<ClientCertificate>,
+    pub colored_methods: bool,
+    pub editor_font: Option<String>,
+    pub editor_font_size: i32,
+    pub editor_keymap: EditorKeymap,
+    pub editor_soft_wrap: bool,
+    pub hide_window_controls: bool,
+    // When true (primarily on Windows/Linux), use the native OS window title bar and controls
+    pub use_native_titlebar: bool,
+    pub interface_font: Option<String>,
+    pub interface_font_size: i32,
+    pub interface_scale: f32,
+    pub open_workspace_new_window: Option<bool>,
+    pub proxy: Option<ProxySetting>,
+    pub theme_dark: String,
+    pub theme_light: String,
+    pub update_channel: String,
+    pub hide_license_badge: bool,
+    pub prompt_feedback: bool,
+    pub autoupdate: bool,
+    pub auto_download_updates: bool,
+    pub check_notifications: bool,
+    pub hotkeys: HashMap<String, Vec<String>>,
+}
+
+impl UpsertModelInfo for Settings {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        SettingsIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        SettingsIden::Id
+    }
+
+    fn generate_id() -> String {
+        panic!("Settings does not have unique IDs")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (SettingsIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use SettingsIden::*;
+        let proxy = match self.proxy {
+            None => None,
+            Some(p) => Some(serde_json::to_string(&p)?),
+        };
+        let client_certificates = serde_json::to_string(&self.client_certificates)?;
+        let hotkeys = serde_json::to_string(&self.hotkeys)?;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (Appearance, self.appearance.as_str().into()),
+            (ClientCertificates, client_certificates.into()),
+            (EditorFontSize, self.editor_font_size.into()),
+            (EditorKeymap, self.editor_keymap.to_string().into()),
+            (EditorSoftWrap, self.editor_soft_wrap.into()),
+            (EditorFont, self.editor_font.into()),
+            (InterfaceFont, self.interface_font.into()),
+            (InterfaceFontSize, self.interface_font_size.into()),
+            (InterfaceScale, self.interface_scale.into()),
+            (HideWindowControls, self.hide_window_controls.into()),
+            (UseNativeTitlebar, self.use_native_titlebar.into()),
+            (OpenWorkspaceNewWindow, self.open_workspace_new_window.into()),
+            (ThemeDark, self.theme_dark.as_str().into()),
+            (ThemeLight, self.theme_light.as_str().into()),
+            (UpdateChannel, self.update_channel.into()),
+            (HideLicenseBadge, self.hide_license_badge.into()),
+            (PromptFeedback, self.prompt_feedback.into()),
+            (Autoupdate, self.autoupdate.into()),
+            (AutoDownloadUpdates, self.auto_download_updates.into()),
+            (ColoredMethods, self.colored_methods.into()),
+            (CheckNotifications, self.check_notifications.into()),
+            (Proxy, proxy.into()),
+            (Hotkeys, hotkeys.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            SettingsIden::UpdatedAt,
+            SettingsIden::Appearance,
+            SettingsIden::ClientCertificates,
+            SettingsIden::EditorFontSize,
+            SettingsIden::EditorKeymap,
+            SettingsIden::EditorSoftWrap,
+            SettingsIden::EditorFont,
+            SettingsIden::InterfaceFontSize,
+            SettingsIden::InterfaceScale,
+            SettingsIden::InterfaceFont,
+            SettingsIden::HideWindowControls,
+            SettingsIden::UseNativeTitlebar,
+            SettingsIden::OpenWorkspaceNewWindow,
+            SettingsIden::Proxy,
+            SettingsIden::ThemeDark,
+            SettingsIden::ThemeLight,
+            SettingsIden::UpdateChannel,
+            SettingsIden::HideLicenseBadge,
+            SettingsIden::PromptFeedback,
+            SettingsIden::Autoupdate,
+            SettingsIden::AutoDownloadUpdates,
+            SettingsIden::ColoredMethods,
+            SettingsIden::CheckNotifications,
+            SettingsIden::Hotkeys,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let proxy: Option<String> = row.get("proxy")?;
+        let client_certificates: String = row.get("client_certificates")?;
+        let editor_keymap: String = row.get("editor_keymap")?;
+        let hotkeys: String = row.get("hotkeys")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            appearance: row.get("appearance")?,
+            client_certificates: serde_json::from_str(&client_certificates).unwrap_or_default(),
+            editor_font_size: row.get("editor_font_size")?,
+            editor_font: row.get("editor_font")?,
+            editor_keymap: EditorKeymap::from_str(editor_keymap.as_str()).unwrap(),
+            editor_soft_wrap: row.get("editor_soft_wrap")?,
+            interface_font_size: row.get("interface_font_size")?,
+            interface_scale: row.get("interface_scale")?,
+            interface_font: row.get("interface_font")?,
+            use_native_titlebar: row.get("use_native_titlebar")?,
+            open_workspace_new_window: row.get("open_workspace_new_window")?,
+            proxy: proxy.map(|p| -> ProxySetting { serde_json::from_str(p.as_str()).unwrap() }),
+            theme_dark: row.get("theme_dark")?,
+            theme_light: row.get("theme_light")?,
+            hide_window_controls: row.get("hide_window_controls")?,
+            update_channel: row.get("update_channel")?,
+            autoupdate: row.get("autoupdate")?,
+            auto_download_updates: row.get("auto_download_updates")?,
+            hide_license_badge: row.get("hide_license_badge")?,
+            prompt_feedback: row.get("prompt_feedback")?,
+            colored_methods: row.get("colored_methods")?,
+            check_notifications: row.get("check_notifications")?,
+            hotkeys: serde_json::from_str(&hotkeys).unwrap_or_default(),
+        })
+    }
+}
+
+impl Default for Workspace {
+    fn default() -> Self {
+        Self {
+            model: "workspace".to_string(),
+            id: String::new(),
+            created_at: NaiveDateTime::default(),
+            updated_at: NaiveDateTime::default(),
+            authentication: BTreeMap::new(),
+            authentication_type: None,
+            description: String::new(),
+            headers: Vec::new(),
+            name: String::new(),
+            encryption_key_challenge: None,
+            setting_validate_certificates: true,
+            setting_follow_redirects: true,
+            setting_request_timeout: 0,
+            setting_request_message_size: DEFAULT_REQUEST_MESSAGE_SIZE,
+            setting_dns_overrides: Vec::new(),
+            setting_send_cookies: true,
+            setting_store_cookies: true,
+            setting_http_version: HttpVersion::Auto,
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "workspaces")]
+pub struct Workspace {
+    #[ts(type = "\"workspace\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+
+    #[ts(type = "Record<string, any>")]
+    pub authentication: BTreeMap<String, Value>,
+    pub authentication_type: Option<String>,
+    pub description: String,
+    pub headers: Vec<HttpRequestHeader>,
+    pub name: String,
+    pub encryption_key_challenge: Option<String>,
+
+    // Settings
+    pub setting_validate_certificates: bool,
+    pub setting_follow_redirects: bool,
+    pub setting_request_timeout: i32,
+    pub setting_request_message_size: i32,
+    #[serde(default)]
+    pub setting_dns_overrides: Vec<DnsOverride>,
+    pub setting_send_cookies: bool,
+    pub setting_store_cookies: bool,
+    pub setting_http_version: HttpVersion,
+}
+
+impl UpsertModelInfo for Workspace {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        WorkspaceIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        WorkspaceIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("wk")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (WorkspaceIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use WorkspaceIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (Name, self.name.trim().into()),
+            (Authentication, serde_json::to_string(&self.authentication)?.into()),
+            (AuthenticationType, self.authentication_type.into()),
+            (Headers, serde_json::to_string(&self.headers)?.into()),
+            (Description, self.description.into()),
+            (EncryptionKeyChallenge, self.encryption_key_challenge.into()),
+            (SettingFollowRedirects, self.setting_follow_redirects.into()),
+            (SettingRequestTimeout, self.setting_request_timeout.into()),
+            (SettingRequestMessageSize, self.setting_request_message_size.into()),
+            (SettingValidateCertificates, self.setting_validate_certificates.into()),
+            (SettingDnsOverrides, serde_json::to_string(&self.setting_dns_overrides)?.into()),
+            (SettingSendCookies, self.setting_send_cookies.into()),
+            (SettingStoreCookies, self.setting_store_cookies.into()),
+            (SettingHttpVersion, self.setting_http_version.to_string().into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            WorkspaceIden::UpdatedAt,
+            WorkspaceIden::Name,
+            WorkspaceIden::Authentication,
+            WorkspaceIden::AuthenticationType,
+            WorkspaceIden::Headers,
+            WorkspaceIden::Description,
+            WorkspaceIden::EncryptionKeyChallenge,
+            WorkspaceIden::SettingRequestTimeout,
+            WorkspaceIden::SettingFollowRedirects,
+            WorkspaceIden::SettingRequestMessageSize,
+            WorkspaceIden::SettingValidateCertificates,
+            WorkspaceIden::SettingDnsOverrides,
+            WorkspaceIden::SettingSendCookies,
+            WorkspaceIden::SettingStoreCookies,
+            WorkspaceIden::SettingHttpVersion,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let headers: String = row.get("headers")?;
+        let authentication: String = row.get("authentication")?;
+        let setting_dns_overrides: String = row.get("setting_dns_overrides")?;
+        let setting_http_version: String = row.get("setting_http_version")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            name: row.get("name")?,
+            description: row.get("description")?,
+            encryption_key_challenge: row.get("encryption_key_challenge")?,
+            headers: serde_json::from_str(&headers).unwrap_or_default(),
+            authentication: serde_json::from_str(&authentication).unwrap_or_default(),
+            authentication_type: row.get("authentication_type")?,
+            setting_follow_redirects: row.get("setting_follow_redirects")?,
+            setting_request_timeout: row.get("setting_request_timeout")?,
+            setting_request_message_size: row.get("setting_request_message_size")?,
+            setting_validate_certificates: row.get("setting_validate_certificates")?,
+            setting_dns_overrides: serde_json::from_str(&setting_dns_overrides).unwrap_or_default(),
+            setting_send_cookies: row.get("setting_send_cookies")?,
+            setting_store_cookies: row.get("setting_store_cookies")?,
+            setting_http_version: setting_http_version.parse().unwrap_or_default(),
+        })
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct EncryptedKey {
+    pub encrypted_key: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "workspace_metas")]
+pub struct WorkspaceMeta {
+    #[ts(type = "\"workspace_meta\"")]
+    pub model: String,
+    pub id: String,
+    pub workspace_id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub encryption_key: Option<EncryptedKey>,
+    pub setting_sync_dir: Option<String>,
+}
+
+impl UpsertModelInfo for WorkspaceMeta {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        WorkspaceMetaIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        WorkspaceMetaIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("wm")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (WorkspaceMetaIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use WorkspaceMetaIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (EncryptionKey, self.encryption_key.map(|e| serde_json::to_string(&e).unwrap()).into()),
+            (SettingSyncDir, self.setting_sync_dir.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            WorkspaceMetaIden::UpdatedAt,
+            WorkspaceMetaIden::EncryptionKey,
+            WorkspaceMetaIden::SettingSyncDir,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let encryption_key: Option<String> = row.get("encryption_key")?;
+        Ok(Self {
+            id: row.get("id")?,
+            workspace_id: row.get("workspace_id")?,
+            model: row.get("model")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            encryption_key: encryption_key.map(|e| serde_json::from_str(&e).unwrap()),
+            setting_sync_dir: row.get("setting_sync_dir")?,
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum CookieDomain {
+    HostOnly(String),
+    Suffix(String),
+    NotPresent,
+    Empty,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum CookieExpires {
+    AtUtc(String),
+    SessionEnd,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum CookieSameSite {
+    Strict,
+    Lax,
+    None,
+}
+
+#[derive(Debug, Clone, Serialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct Cookie {
+    pub name: String,
+    pub value: String,
+    pub domain: CookieDomain,
+    pub expires: CookieExpires,
+    pub path: String,
+    pub secure: bool,
+    pub http_only: bool,
+    pub same_site: Option<CookieSameSite>,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct CookieFields {
+    name: String,
+    value: String,
+    domain: CookieDomain,
+    expires: CookieExpires,
+    path: String,
+    #[serde(default)]
+    secure: bool,
+    #[serde(default)]
+    http_only: bool,
+    #[serde(default)]
+    same_site: Option<CookieSameSite>,
+}
+
+#[derive(Deserialize)]
+struct LegacyCookie {
+    raw_cookie: String,
+    domain: CookieDomain,
+    expires: CookieExpires,
+    path: (String, bool),
+}
+
+#[derive(Deserialize)]
+#[serde(untagged)]
+enum CookieCompat {
+    New(CookieFields),
+    Legacy(LegacyCookie),
+}
+
+impl<'de> Deserialize<'de> for Cookie {
+    fn deserialize<D>(deserializer: D) -> std::result::Result<Self, D::Error>
+    where
+        D: Deserializer<'de>,
+    {
+        Ok(match CookieCompat::deserialize(deserializer)? {
+            CookieCompat::New(cookie) => Self {
+                name: cookie.name,
+                value: cookie.value,
+                domain: cookie.domain,
+                expires: cookie.expires,
+                path: cookie.path,
+                secure: cookie.secure,
+                http_only: cookie.http_only,
+                same_site: cookie.same_site,
+            },
+            CookieCompat::Legacy(cookie) => {
+                let (name, value, secure, http_only, same_site) =
+                    parse_legacy_cookie_parts(&cookie.raw_cookie);
+                Self {
+                    name,
+                    value,
+                    domain: cookie.domain,
+                    expires: cookie.expires,
+                    path: cookie.path.0,
+                    secure,
+                    http_only,
+                    same_site,
+                }
+            }
+        })
+    }
+}
+
+fn parse_legacy_cookie_parts(
+    raw_cookie: &str,
+) -> (String, String, bool, bool, Option<CookieSameSite>) {
+    let mut parts = raw_cookie.split(';').map(str::trim);
+    let (name, value) = parts
+        .next()
+        .and_then(|part| {
+            let mut nv = part.splitn(2, '=');
+            Some((nv.next()?.trim().to_string(), nv.next().unwrap_or("").trim().to_string()))
+        })
+        .unwrap_or_default();
+
+    let mut secure = false;
+    let mut http_only = false;
+    let mut same_site = None;
+
+    for part in parts {
+        let mut attr = part.splitn(2, '=');
+        let key = attr.next().unwrap_or("").trim().to_lowercase();
+        let value = attr.next().unwrap_or("").trim().to_lowercase();
+        match key.as_str() {
+            "secure" => secure = true,
+            "httponly" => http_only = true,
+            "samesite" => {
+                same_site = match value.as_str() {
+                    "strict" => Some(CookieSameSite::Strict),
+                    "lax" => Some(CookieSameSite::Lax),
+                    "none" => Some(CookieSameSite::None),
+                    _ => same_site,
+                };
+            }
+            _ => {}
+        }
+    }
+
+    (name, value, secure, http_only, same_site)
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "cookie_jars")]
+pub struct CookieJar {
+    #[ts(type = "\"cookie_jar\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+
+    pub cookies: Vec<Cookie>,
+    pub name: String,
+}
+
+impl UpsertModelInfo for CookieJar {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        CookieJarIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        CookieJarIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("cj")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (CookieJarIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use CookieJarIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (Name, self.name.trim().into()),
+            (Cookies, serde_json::to_string(&self.cookies)?.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            CookieJarIden::UpdatedAt,
+            CookieJarIden::Name,
+            CookieJarIden::Cookies,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let cookies: String = row.get("cookies")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            workspace_id: row.get("workspace_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            name: row.get("name")?,
+            cookies: serde_json::from_str(cookies.as_str()).unwrap_or_default(),
+        })
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, Default, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "environments")]
+pub struct Environment {
+    #[ts(type = "\"environment\"")]
+    pub model: String,
+    pub id: String,
+    pub workspace_id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+
+    pub name: String,
+    pub public: bool,
+    #[deprecated(
+        note = "parent_model is used instead. This field will be removed when schema field is added for sync/export."
+    )]
+    #[ts(skip)]
+    pub base: bool,
+    pub parent_model: String,
+    pub parent_id: Option<String>,
+    /// Variables defined in this environment scope.
+    /// Child environments override parent variables by name.
+    pub variables: Vec<EnvironmentVariable>,
+    pub color: Option<String>,
+    pub sort_priority: f64,
+}
+
+impl UpsertModelInfo for Environment {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        EnvironmentIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        EnvironmentIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("ev")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (EnvironmentIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use EnvironmentIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (ParentId, self.parent_id.into()),
+            (ParentModel, self.parent_model.into()),
+            (Color, self.color.into()),
+            (Name, self.name.trim().into()),
+            (Public, self.public.into()),
+            (SortPriority, self.sort_priority.into()),
+            (Variables, serde_json::to_string(&self.variables)?.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            EnvironmentIden::UpdatedAt,
+            EnvironmentIden::ParentId,
+            EnvironmentIden::ParentModel,
+            EnvironmentIden::Color,
+            EnvironmentIden::Name,
+            EnvironmentIden::Public,
+            EnvironmentIden::Variables,
+            EnvironmentIden::SortPriority,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let variables: String = row.get("variables")?;
+        let parent_model = row.get("parent_model")?;
+        let base = parent_model == "workspace";
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            workspace_id: row.get("workspace_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            parent_id: row.get("parent_id")?,
+            parent_model,
+            color: row.get("color")?,
+            name: row.get("name")?,
+            public: row.get("public")?,
+            variables: serde_json::from_str(variables.as_str()).unwrap_or_default(),
+            sort_priority: row.get("sort_priority")?,
+
+            // Deprecated field, but we need to keep it around for a couple of versions
+            // for compatibility because sync/export don't have a schema field
+            #[allow(deprecated)]
+            base,
+        })
+    }
+}
+
+impl Default for EnvironmentVariable {
+    fn default() -> Self {
+        Self { enabled: true, name: String::new(), value: String::new(), id: None }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct EnvironmentVariable {
+    #[ts(optional, as = "Option<bool>")]
+    pub enabled: bool,
+    pub name: String,
+    pub value: String,
+    #[ts(optional, as = "Option<String>")]
+    pub id: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct ParentAuthentication {
+    #[ts(type = "Record<string, any>")]
+    pub authentication: BTreeMap<String, Value>,
+    pub authentication_type: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct ParentHeaders {
+    pub headers: Vec<HttpRequestHeader>,
+}
+
+impl Default for Folder {
+    fn default() -> Self {
+        Self {
+            model: "folder".to_string(),
+            id: String::new(),
+            created_at: NaiveDateTime::default(),
+            updated_at: NaiveDateTime::default(),
+            workspace_id: String::new(),
+            folder_id: None,
+            authentication: BTreeMap::new(),
+            authentication_type: None,
+            description: String::new(),
+            headers: Vec::new(),
+            name: String::new(),
+            sort_priority: 0.0,
+            setting_send_cookies: InheritedBoolSetting::default(),
+            setting_store_cookies: InheritedBoolSetting::default(),
+            setting_validate_certificates: InheritedBoolSetting::default(),
+            setting_follow_redirects: InheritedBoolSetting::default(),
+            setting_request_timeout: InheritedIntSetting::default(),
+            setting_request_message_size: InheritedIntSetting {
+                enabled: false,
+                value: DEFAULT_REQUEST_MESSAGE_SIZE,
+            },
+            setting_http_version: InheritedHttpVersionSetting::default(),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "folders")]
+pub struct Folder {
+    #[ts(type = "\"folder\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub folder_id: Option<String>,
+
+    #[ts(type = "Record<string, any>")]
+    pub authentication: BTreeMap<String, Value>,
+    pub authentication_type: Option<String>,
+    pub description: String,
+    pub headers: Vec<HttpRequestHeader>,
+    pub name: String,
+    pub sort_priority: f64,
+    pub setting_send_cookies: InheritedBoolSetting,
+    pub setting_store_cookies: InheritedBoolSetting,
+    pub setting_validate_certificates: InheritedBoolSetting,
+    pub setting_follow_redirects: InheritedBoolSetting,
+    pub setting_request_timeout: InheritedIntSetting,
+    pub setting_request_message_size: InheritedIntSetting,
+    pub setting_http_version: InheritedHttpVersionSetting,
+}
+
+impl UpsertModelInfo for Folder {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        FolderIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        FolderIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("fl")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (FolderIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use FolderIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (FolderId, self.folder_id.into()),
+            (Authentication, serde_json::to_string(&self.authentication)?.into()),
+            (AuthenticationType, self.authentication_type.into()),
+            (Headers, serde_json::to_string(&self.headers)?.into()),
+            (Description, self.description.into()),
+            (Name, self.name.trim().into()),
+            (SortPriority, self.sort_priority.into()),
+            (SettingSendCookies, serde_json::to_string(&self.setting_send_cookies)?.into()),
+            (SettingStoreCookies, serde_json::to_string(&self.setting_store_cookies)?.into()),
+            (
+                SettingValidateCertificates,
+                serde_json::to_string(&self.setting_validate_certificates)?.into(),
+            ),
+            (SettingFollowRedirects, serde_json::to_string(&self.setting_follow_redirects)?.into()),
+            (SettingRequestTimeout, serde_json::to_string(&self.setting_request_timeout)?.into()),
+            (
+                SettingRequestMessageSize,
+                serde_json::to_string(&self.setting_request_message_size)?.into(),
+            ),
+            (SettingHttpVersion, serde_json::to_string(&self.setting_http_version)?.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            FolderIden::UpdatedAt,
+            FolderIden::Name,
+            FolderIden::Authentication,
+            FolderIden::AuthenticationType,
+            FolderIden::Headers,
+            FolderIden::Description,
+            FolderIden::FolderId,
+            FolderIden::SortPriority,
+            FolderIden::SettingSendCookies,
+            FolderIden::SettingStoreCookies,
+            FolderIden::SettingValidateCertificates,
+            FolderIden::SettingFollowRedirects,
+            FolderIden::SettingRequestTimeout,
+            FolderIden::SettingRequestMessageSize,
+            FolderIden::SettingHttpVersion,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let headers: String = row.get("headers")?;
+        let authentication: String = row.get("authentication")?;
+        let setting_send_cookies: String = row.get("setting_send_cookies")?;
+        let setting_store_cookies: String = row.get("setting_store_cookies")?;
+        let setting_validate_certificates: String = row.get("setting_validate_certificates")?;
+        let setting_follow_redirects: String = row.get("setting_follow_redirects")?;
+        let setting_request_timeout: String = row.get("setting_request_timeout")?;
+        let setting_request_message_size: String = row.get("setting_request_message_size")?;
+        let setting_http_version: String = row.get("setting_http_version")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            sort_priority: row.get("sort_priority")?,
+            workspace_id: row.get("workspace_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            folder_id: row.get("folder_id")?,
+            name: row.get("name")?,
+            description: row.get("description")?,
+            headers: serde_json::from_str(&headers).unwrap_or_default(),
+            authentication_type: row.get("authentication_type")?,
+            authentication: serde_json::from_str(&authentication).unwrap_or_default(),
+            setting_send_cookies: serde_json::from_str(&setting_send_cookies).unwrap_or_default(),
+            setting_store_cookies: serde_json::from_str(&setting_store_cookies).unwrap_or_default(),
+            setting_validate_certificates: serde_json::from_str(&setting_validate_certificates)
+                .unwrap_or_default(),
+            setting_follow_redirects: serde_json::from_str(&setting_follow_redirects)
+                .unwrap_or_default(),
+            setting_request_timeout: serde_json::from_str(&setting_request_timeout)
+                .unwrap_or_default(),
+            setting_request_message_size: serde_json::from_str(&setting_request_message_size)
+                .unwrap_or_else(|_| default_request_message_size_setting()),
+            setting_http_version: serde_json::from_str(&setting_http_version).unwrap_or_default(),
+        })
+    }
+}
+
+impl Default for HttpRequestHeader {
+    fn default() -> Self {
+        Self { enabled: true, name: String::new(), value: String::new(), id: None }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct HttpRequestHeader {
+    #[ts(optional, as = "Option<bool>")]
+    pub enabled: bool,
+    pub name: String,
+    pub value: String,
+    #[ts(optional, as = "Option<String>")]
+    pub id: Option<String>,
+}
+
+impl Default for HttpUrlParameter {
+    fn default() -> Self {
+        Self { enabled: true, name: String::new(), value: String::new(), id: None }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct HttpUrlParameter {
+    #[ts(optional, as = "Option<bool>")]
+    pub enabled: bool,
+    /// Colon-prefixed parameters are treated as path parameters if they match, like `/users/:id`
+    /// Other entries are appended as query parameters
+    pub name: String,
+    pub value: String,
+    #[ts(optional, as = "Option<String>")]
+    pub id: Option<String>,
+}
+
+impl Default for HttpRequest {
+    fn default() -> Self {
+        Self {
+            model: "http_request".to_string(),
+            id: String::new(),
+            created_at: NaiveDateTime::default(),
+            updated_at: NaiveDateTime::default(),
+            workspace_id: String::new(),
+            folder_id: None,
+            authentication: BTreeMap::new(),
+            authentication_type: None,
+            body: BTreeMap::new(),
+            body_type: None,
+            description: String::new(),
+            headers: Vec::new(),
+            method: "GET".to_string(),
+            name: String::new(),
+            sort_priority: 0.0,
+            url: String::new(),
+            url_parameters: Vec::new(),
+            setting_send_cookies: InheritedBoolSetting::default(),
+            setting_store_cookies: InheritedBoolSetting::default(),
+            setting_validate_certificates: InheritedBoolSetting::default(),
+            setting_follow_redirects: InheritedBoolSetting::default(),
+            setting_request_timeout: InheritedIntSetting::default(),
+            setting_http_version: InheritedHttpVersionSetting::default(),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "http_requests")]
+pub struct HttpRequest {
+    #[ts(type = "\"http_request\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub folder_id: Option<String>,
+
+    #[ts(type = "Record<string, any>")]
+    pub authentication: BTreeMap<String, Value>,
+    pub authentication_type: Option<String>,
+    #[ts(type = "Record<string, any>")]
+    pub body: BTreeMap<String, Value>,
+    pub body_type: Option<String>,
+    pub description: String,
+    pub headers: Vec<HttpRequestHeader>,
+    pub method: String,
+    pub name: String,
+    pub sort_priority: f64,
+    pub url: String,
+    /// URL parameters used for both path placeholders (`:id`) and query string entries.
+    pub url_parameters: Vec<HttpUrlParameter>,
+    pub setting_send_cookies: InheritedBoolSetting,
+    pub setting_store_cookies: InheritedBoolSetting,
+    pub setting_validate_certificates: InheritedBoolSetting,
+    pub setting_follow_redirects: InheritedBoolSetting,
+    pub setting_request_timeout: InheritedIntSetting,
+    pub setting_http_version: InheritedHttpVersionSetting,
+}
+
+impl UpsertModelInfo for HttpRequest {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        HttpRequestIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        HttpRequestIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("rq")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (HttpResponseIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.to_string()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (FolderId, self.folder_id.into()),
+            (Name, self.name.trim().into()),
+            (Description, self.description.into()),
+            (Url, self.url.into()),
+            (UrlParameters, serde_json::to_string(&self.url_parameters)?.into()),
+            (Method, self.method.into()),
+            (Body, serde_json::to_string(&self.body)?.into()),
+            (BodyType, self.body_type.into()),
+            (Authentication, serde_json::to_string(&self.authentication)?.into()),
+            (AuthenticationType, self.authentication_type.into()),
+            (Headers, serde_json::to_string(&self.headers)?.into()),
+            (SortPriority, self.sort_priority.into()),
+            (SettingSendCookies, serde_json::to_string(&self.setting_send_cookies)?.into()),
+            (SettingStoreCookies, serde_json::to_string(&self.setting_store_cookies)?.into()),
+            (
+                SettingValidateCertificates,
+                serde_json::to_string(&self.setting_validate_certificates)?.into(),
+            ),
+            (SettingFollowRedirects, serde_json::to_string(&self.setting_follow_redirects)?.into()),
+            (SettingRequestTimeout, serde_json::to_string(&self.setting_request_timeout)?.into()),
+            (SettingHttpVersion, serde_json::to_string(&self.setting_http_version)?.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            UpdatedAt,
+            WorkspaceId,
+            Name,
+            Description,
+            FolderId,
+            Method,
+            Headers,
+            Body,
+            BodyType,
+            Authentication,
+            AuthenticationType,
+            Url,
+            UrlParameters,
+            SortPriority,
+            SettingSendCookies,
+            SettingStoreCookies,
+            SettingValidateCertificates,
+            SettingFollowRedirects,
+            SettingRequestTimeout,
+            SettingHttpVersion,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self> {
+        let url_parameters: String = row.get("url_parameters")?;
+        let body: String = row.get("body")?;
+        let authentication: String = row.get("authentication")?;
+        let headers: String = row.get("headers")?;
+        let setting_send_cookies: String = row.get("setting_send_cookies")?;
+        let setting_store_cookies: String = row.get("setting_store_cookies")?;
+        let setting_validate_certificates: String = row.get("setting_validate_certificates")?;
+        let setting_follow_redirects: String = row.get("setting_follow_redirects")?;
+        let setting_request_timeout: String = row.get("setting_request_timeout")?;
+        let setting_http_version: String = row.get("setting_http_version")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            workspace_id: row.get("workspace_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            authentication: serde_json::from_str(authentication.as_str()).unwrap_or_default(),
+            authentication_type: row.get("authentication_type")?,
+            body: serde_json::from_str(body.as_str()).unwrap_or_default(),
+            body_type: row.get("body_type")?,
+            description: row.get("description")?,
+            folder_id: row.get("folder_id")?,
+            headers: serde_json::from_str(headers.as_str()).unwrap_or_default(),
+            method: row.get("method")?,
+            name: row.get("name")?,
+            sort_priority: row.get("sort_priority")?,
+            url: row.get("url")?,
+            url_parameters: serde_json::from_str(url_parameters.as_str()).unwrap_or_default(),
+            setting_send_cookies: serde_json::from_str(&setting_send_cookies).unwrap_or_default(),
+            setting_store_cookies: serde_json::from_str(&setting_store_cookies).unwrap_or_default(),
+            setting_validate_certificates: serde_json::from_str(&setting_validate_certificates)
+                .unwrap_or_default(),
+            setting_follow_redirects: serde_json::from_str(&setting_follow_redirects)
+                .unwrap_or_default(),
+            setting_request_timeout: serde_json::from_str(&setting_request_timeout)
+                .unwrap_or_default(),
+            setting_http_version: serde_json::from_str(&setting_http_version).unwrap_or_default(),
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum WebsocketConnectionState {
+    Initialized,
+    Connected,
+    Closing,
+    Closed,
+}
+
+impl Default for WebsocketConnectionState {
+    fn default() -> Self {
+        Self::Initialized
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "websocket_connections")]
+pub struct WebsocketConnection {
+    #[ts(type = "\"websocket_connection\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub request_id: String,
+
+    pub elapsed: i32,
+    pub error: Option<String>,
+    pub headers: Vec<HttpResponseHeader>,
+    pub state: WebsocketConnectionState,
+    pub status: i32,
+    pub url: String,
+}
+
+impl UpsertModelInfo for WebsocketConnection {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        WebsocketConnectionIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        WebsocketConnectionIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("wc")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (WebsocketConnectionIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use WebsocketConnectionIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (RequestId, self.request_id.into()),
+            (Elapsed, self.elapsed.into()),
+            (Error, self.error.into()),
+            (Headers, serde_json::to_string(&self.headers)?.into()),
+            (State, serde_json::to_value(&self.state)?.as_str().into()),
+            (Status, self.status.into()),
+            (Url, self.url.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            WebsocketConnectionIden::UpdatedAt,
+            WebsocketConnectionIden::Elapsed,
+            WebsocketConnectionIden::Error,
+            WebsocketConnectionIden::Headers,
+            WebsocketConnectionIden::State,
+            WebsocketConnectionIden::Status,
+            WebsocketConnectionIden::Url,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let headers: String = row.get("headers")?;
+        let state: String = row.get("state")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            workspace_id: row.get("workspace_id")?,
+            request_id: row.get("request_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            url: row.get("url")?,
+            headers: serde_json::from_str(headers.as_str()).unwrap_or_default(),
+            elapsed: row.get("elapsed")?,
+            error: row.get("error")?,
+            state: serde_json::from_str(format!(r#""{state}""#).as_str()).unwrap(),
+            status: row.get("status")?,
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Eq, PartialEq, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum WebsocketMessageType {
+    Text,
+    Binary,
+}
+
+impl Default for WebsocketMessageType {
+    fn default() -> Self {
+        Self::Text
+    }
+}
+
+impl Default for WebsocketRequest {
+    fn default() -> Self {
+        Self {
+            model: "websocket_request".to_string(),
+            id: String::new(),
+            created_at: NaiveDateTime::default(),
+            updated_at: NaiveDateTime::default(),
+            workspace_id: String::new(),
+            folder_id: None,
+            authentication: BTreeMap::new(),
+            authentication_type: None,
+            description: String::new(),
+            headers: Vec::new(),
+            message: String::new(),
+            name: String::new(),
+            sort_priority: 0.0,
+            url: String::new(),
+            url_parameters: Vec::new(),
+            setting_send_cookies: InheritedBoolSetting::default(),
+            setting_store_cookies: InheritedBoolSetting::default(),
+            setting_validate_certificates: InheritedBoolSetting::default(),
+            setting_request_message_size: InheritedIntSetting {
+                enabled: false,
+                value: DEFAULT_REQUEST_MESSAGE_SIZE,
+            },
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "websocket_requests")]
+pub struct WebsocketRequest {
+    #[ts(type = "\"websocket_request\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub folder_id: Option<String>,
+
+    #[ts(type = "Record<string, any>")]
+    pub authentication: BTreeMap<String, Value>,
+    pub authentication_type: Option<String>,
+    pub description: String,
+    pub headers: Vec<HttpRequestHeader>,
+    pub message: String,
+    pub name: String,
+    pub sort_priority: f64,
+    pub url: String,
+    /// URL parameters used for both path placeholders (`:id`) and query string entries.
+    pub url_parameters: Vec<HttpUrlParameter>,
+    pub setting_send_cookies: InheritedBoolSetting,
+    pub setting_store_cookies: InheritedBoolSetting,
+    pub setting_validate_certificates: InheritedBoolSetting,
+    pub setting_request_message_size: InheritedIntSetting,
+}
+
+impl UpsertModelInfo for WebsocketRequest {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        WebsocketRequestIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        WebsocketRequestIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("wr")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (WebsocketRequestIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use WebsocketRequestIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (FolderId, self.folder_id.as_ref().map(|s| s.as_str()).into()),
+            (Authentication, serde_json::to_string(&self.authentication)?.into()),
+            (AuthenticationType, self.authentication_type.into()),
+            (Description, self.description.into()),
+            (Headers, serde_json::to_string(&self.headers)?.into()),
+            (Message, self.message.into()),
+            (Name, self.name.trim().into()),
+            (SortPriority, self.sort_priority.into()),
+            (Url, self.url.into()),
+            (UrlParameters, serde_json::to_string(&self.url_parameters)?.into()),
+            (SettingSendCookies, serde_json::to_string(&self.setting_send_cookies)?.into()),
+            (SettingStoreCookies, serde_json::to_string(&self.setting_store_cookies)?.into()),
+            (
+                SettingValidateCertificates,
+                serde_json::to_string(&self.setting_validate_certificates)?.into(),
+            ),
+            (
+                SettingRequestMessageSize,
+                serde_json::to_string(&self.setting_request_message_size)?.into(),
+            ),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            WebsocketRequestIden::UpdatedAt,
+            WebsocketRequestIden::WorkspaceId,
+            WebsocketRequestIden::FolderId,
+            WebsocketRequestIden::Authentication,
+            WebsocketRequestIden::AuthenticationType,
+            WebsocketRequestIden::Description,
+            WebsocketRequestIden::Headers,
+            WebsocketRequestIden::Message,
+            WebsocketRequestIden::Name,
+            WebsocketRequestIden::SortPriority,
+            WebsocketRequestIden::Url,
+            WebsocketRequestIden::UrlParameters,
+            WebsocketRequestIden::SettingSendCookies,
+            WebsocketRequestIden::SettingStoreCookies,
+            WebsocketRequestIden::SettingValidateCertificates,
+            WebsocketRequestIden::SettingRequestMessageSize,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let url_parameters: String = row.get("url_parameters")?;
+        let authentication: String = row.get("authentication")?;
+        let headers: String = row.get("headers")?;
+        let setting_send_cookies: String = row.get("setting_send_cookies")?;
+        let setting_store_cookies: String = row.get("setting_store_cookies")?;
+        let setting_validate_certificates: String = row.get("setting_validate_certificates")?;
+        let setting_request_message_size: String = row.get("setting_request_message_size")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            sort_priority: row.get("sort_priority")?,
+            workspace_id: row.get("workspace_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            url: row.get("url")?,
+            url_parameters: serde_json::from_str(url_parameters.as_str()).unwrap_or_default(),
+            message: row.get("message")?,
+            description: row.get("description")?,
+            authentication: serde_json::from_str(authentication.as_str()).unwrap_or_default(),
+            authentication_type: row.get("authentication_type")?,
+            headers: serde_json::from_str(headers.as_str()).unwrap_or_default(),
+            folder_id: row.get("folder_id")?,
+            name: row.get("name")?,
+            setting_send_cookies: serde_json::from_str(&setting_send_cookies).unwrap_or_default(),
+            setting_store_cookies: serde_json::from_str(&setting_store_cookies).unwrap_or_default(),
+            setting_validate_certificates: serde_json::from_str(&setting_validate_certificates)
+                .unwrap_or_default(),
+            setting_request_message_size: serde_json::from_str(&setting_request_message_size)
+                .unwrap_or_else(|_| default_request_message_size_setting()),
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Eq, PartialEq, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum WebsocketEventType {
+    Binary,
+    Close,
+    Error,
+    Frame,
+    Open,
+    Ping,
+    Pong,
+    Text,
+}
+
+impl Default for WebsocketEventType {
+    fn default() -> Self {
+        Self::Text
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "websocket_events")]
+pub struct WebsocketEvent {
+    #[ts(type = "\"websocket_event\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub request_id: String,
+    pub connection_id: String,
+    pub is_server: bool,
+
+    pub message: Vec<u8>,
+    pub message_type: WebsocketEventType,
+}
+
+impl UpsertModelInfo for WebsocketEvent {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        WebsocketEventIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        WebsocketEventIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("we")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (WebsocketEventIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use WebsocketEventIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (ConnectionId, self.connection_id.into()),
+            (RequestId, self.request_id.into()),
+            (MessageType, serde_json::to_string(&self.message_type)?.into()),
+            (IsServer, self.is_server.into()),
+            (Message, self.message.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            WebsocketEventIden::UpdatedAt,
+            WebsocketEventIden::MessageType,
+            WebsocketEventIden::IsServer,
+            WebsocketEventIden::Message,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let message_type: String = row.get("message_type")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            workspace_id: row.get("workspace_id")?,
+            request_id: row.get("request_id")?,
+            connection_id: row.get("connection_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            message: row.get("message")?,
+            is_server: row.get("is_server")?,
+            message_type: serde_json::from_str(message_type.as_str()).unwrap_or_default(),
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct HttpResponseHeader {
+    pub name: String,
+    pub value: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum HttpResponseState {
+    Initialized,
+    Connected,
+    Closed,
+}
+
+impl Default for HttpResponseState {
+    fn default() -> Self {
+        Self::Initialized
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "http_responses")]
+pub struct HttpResponse {
+    #[ts(type = "\"http_response\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub request_id: String,
+
+    /// Where the engine put the body, when it puts it in a file.
+    ///
+    /// Not exported to TypeScript: a path is only meaningful to a host that
+    /// has the filesystem it names, and bodies are moving off it. Read a body
+    /// by response id instead — the frontend through
+    /// `cmd_http_response_body_path`, plugins through `ctx.httpResponse.body`.
+    #[ts(skip)]
+    pub body_path: Option<String>,
+    pub content_length: Option<i32>,
+    pub content_length_compressed: Option<i32>,
+    pub elapsed: i32,
+    pub elapsed_headers: i32,
+    pub elapsed_dns: i32,
+    pub error: Option<String>,
+    pub headers: Vec<HttpResponseHeader>,
+    pub remote_addr: Option<String>,
+    pub request_content_length: Option<i32>,
+    pub request_headers: Vec<HttpResponseHeader>,
+    pub status: i32,
+    pub status_reason: Option<String>,
+    pub state: HttpResponseState,
+    pub url: String,
+    pub version: Option<String>,
+}
+
+impl UpsertModelInfo for HttpResponse {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        HttpResponseIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        HttpResponseIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("rs")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (HttpResponseIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use HttpResponseIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (RequestId, self.request_id.into()),
+            (WorkspaceId, self.workspace_id.into()),
+            (BodyPath, self.body_path.into()),
+            (ContentLength, self.content_length.into()),
+            (ContentLengthCompressed, self.content_length_compressed.into()),
+            (Elapsed, self.elapsed.into()),
+            (ElapsedHeaders, self.elapsed_headers.into()),
+            (ElapsedDns, self.elapsed_dns.into()),
+            (Error, self.error.into()),
+            (Headers, serde_json::to_string(&self.headers)?.into()),
+            (RemoteAddr, self.remote_addr.into()),
+            (RequestHeaders, serde_json::to_string(&self.request_headers)?.into()),
+            (State, serde_json::to_value(self.state)?.as_str().into()),
+            (Status, self.status.into()),
+            (StatusReason, self.status_reason.into()),
+            (Url, self.url.into()),
+            (Version, self.version.into()),
+            (RequestContentLength, self.request_content_length.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            HttpResponseIden::UpdatedAt,
+            HttpResponseIden::BodyPath,
+            HttpResponseIden::ContentLength,
+            HttpResponseIden::ContentLengthCompressed,
+            HttpResponseIden::Elapsed,
+            HttpResponseIden::ElapsedHeaders,
+            HttpResponseIden::ElapsedDns,
+            HttpResponseIden::Error,
+            HttpResponseIden::Headers,
+            HttpResponseIden::RemoteAddr,
+            HttpResponseIden::RequestContentLength,
+            HttpResponseIden::RequestHeaders,
+            HttpResponseIden::State,
+            HttpResponseIden::Status,
+            HttpResponseIden::StatusReason,
+            HttpResponseIden::Url,
+            HttpResponseIden::Version,
+        ]
+    }
+
+    fn from_row(r: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let headers: String = r.get("headers")?;
+        let state: String = r.get("state")?;
+        Ok(Self {
+            id: r.get("id")?,
+            model: r.get("model")?,
+            workspace_id: r.get("workspace_id")?,
+            request_id: r.get("request_id")?,
+            created_at: r.get("created_at")?,
+            updated_at: r.get("updated_at")?,
+            error: r.get("error")?,
+            url: r.get("url")?,
+            content_length: r.get("content_length")?,
+            content_length_compressed: r.get("content_length_compressed").unwrap_or_default(),
+            version: r.get("version")?,
+            elapsed: r.get("elapsed")?,
+            elapsed_headers: r.get("elapsed_headers")?,
+            elapsed_dns: r.get("elapsed_dns").unwrap_or_default(),
+            remote_addr: r.get("remote_addr")?,
+            status: r.get("status")?,
+            status_reason: r.get("status_reason")?,
+            state: serde_json::from_str(format!(r#""{state}""#).as_str()).unwrap(),
+            body_path: r.get("body_path")?,
+            headers: serde_json::from_str(headers.as_str()).unwrap_or_default(),
+            request_content_length: r.get("request_content_length").unwrap_or_default(),
+            request_headers: serde_json::from_str(
+                r.get::<_, String>("request_headers").unwrap_or_default().as_str(),
+            )
+            .unwrap_or_default(),
+        })
+    }
+}
+
+/// Serializable representation of HTTP response events for DB storage.
+/// This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
+/// The `From` impl is in yaak-http to avoid circular dependencies.
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(tag = "type", rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum HttpResponseEventData {
+    Setting {
+        name: String,
+        value: String,
+        #[serde(default, skip_serializing_if = "Option::is_none")]
+        #[ts(optional, as = "Option<String>")]
+        source_model: Option<String>,
+        #[serde(default, skip_serializing_if = "Option::is_none")]
+        #[ts(optional, as = "Option<String>")]
+        source_id: Option<String>,
+        #[serde(default, skip_serializing_if = "Option::is_none")]
+        #[ts(optional, as = "Option<String>")]
+        source_name: Option<String>,
+    },
+    Info {
+        message: String,
+    },
+    Redirect {
+        url: String,
+        status: u16,
+        behavior: String,
+        #[serde(default)]
+        dropped_body: bool,
+        #[serde(default)]
+        dropped_headers: Vec<String>,
+    },
+    SendUrl {
+        method: String,
+        #[serde(default)]
+        scheme: String,
+        #[serde(default)]
+        username: String,
+        #[serde(default)]
+        password: String,
+        #[serde(default)]
+        host: String,
+        #[serde(default)]
+        port: u16,
+        path: String,
+        #[serde(default)]
+        query: String,
+        #[serde(default)]
+        fragment: String,
+    },
+    ReceiveUrl {
+        version: String,
+        status: String,
+    },
+    HeaderUp {
+        name: String,
+        value: String,
+    },
+    HeaderDown {
+        name: String,
+        value: String,
+    },
+    ChunkSent {
+        bytes: usize,
+    },
+    ChunkReceived {
+        bytes: usize,
+    },
+    DnsResolved {
+        hostname: String,
+        addresses: Vec<String>,
+        duration: u64,
+        overridden: bool,
+    },
+}
+
+impl Default for HttpResponseEventData {
+    fn default() -> Self {
+        Self::Info { message: String::new() }
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "http_response_events")]
+pub struct HttpResponseEvent {
+    #[ts(type = "\"http_response_event\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub response_id: String,
+    pub event: HttpResponseEventData,
+}
+
+impl UpsertModelInfo for HttpResponseEvent {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        HttpResponseEventIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        HttpResponseEventIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("re")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (HttpResponseEventIden::CreatedAt, Order::Asc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use HttpResponseEventIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (ResponseId, self.response_id.into()),
+            (Event, serde_json::to_string(&self.event)?.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            HttpResponseEventIden::UpdatedAt,
+            HttpResponseEventIden::Event,
+        ]
+    }
+
+    fn from_row(r: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let event: String = r.get("event")?;
+        Ok(Self {
+            id: r.get("id")?,
+            model: r.get("model")?,
+            workspace_id: r.get("workspace_id")?,
+            response_id: r.get("response_id")?,
+            created_at: r.get("created_at")?,
+            updated_at: r.get("updated_at")?,
+            event: serde_json::from_str(&event).unwrap_or_default(),
+        })
+    }
+}
+
+impl HttpResponseEvent {
+    pub fn new(response_id: &str, workspace_id: &str, event: HttpResponseEventData) -> Self {
+        Self {
+            model: "http_response_event".to_string(),
+            id: Self::generate_id(),
+            created_at: Utc::now().naive_utc(),
+            updated_at: Utc::now().naive_utc(),
+            workspace_id: workspace_id.to_string(),
+            response_id: response_id.to_string(),
+            event,
+        }
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "graphql_introspections")]
+pub struct GraphQlIntrospection {
+    #[ts(type = "\"graphql_introspection\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub request_id: String,
+    pub content: Option<String>,
+}
+
+impl UpsertModelInfo for GraphQlIntrospection {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        GraphQlIntrospectionIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        GraphQlIntrospectionIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("gi")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (GraphQlIntrospectionIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use GraphQlIntrospectionIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (RequestId, self.request_id.into()),
+            (Content, self.content.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            GraphQlIntrospectionIden::UpdatedAt,
+            GraphQlIntrospectionIden::Content,
+        ]
+    }
+
+    fn from_row(r: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        Ok(Self {
+            id: r.get("id")?,
+            model: r.get("model")?,
+            created_at: r.get("created_at")?,
+            updated_at: r.get("updated_at")?,
+            workspace_id: r.get("workspace_id")?,
+            request_id: r.get("request_id")?,
+            content: r.get("content")?,
+        })
+    }
+}
+
+impl Default for GrpcRequest {
+    fn default() -> Self {
+        Self {
+            model: "grpc_request".to_string(),
+            id: String::new(),
+            created_at: NaiveDateTime::default(),
+            updated_at: NaiveDateTime::default(),
+            workspace_id: String::new(),
+            folder_id: None,
+            authentication_type: None,
+            authentication: BTreeMap::new(),
+            description: String::new(),
+            message: String::new(),
+            metadata: Vec::new(),
+            method: None,
+            name: String::new(),
+            service: None,
+            sort_priority: 0.0,
+            url: String::new(),
+            setting_validate_certificates: InheritedBoolSetting::default(),
+            setting_request_message_size: InheritedIntSetting {
+                enabled: false,
+                value: DEFAULT_REQUEST_MESSAGE_SIZE,
+            },
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "grpc_requests")]
+pub struct GrpcRequest {
+    #[ts(type = "\"grpc_request\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub folder_id: Option<String>,
+
+    pub authentication_type: Option<String>,
+    #[ts(type = "Record<string, any>")]
+    pub authentication: BTreeMap<String, Value>,
+    pub description: String,
+    pub message: String,
+    pub metadata: Vec<HttpRequestHeader>,
+    pub method: Option<String>,
+    pub name: String,
+    pub service: Option<String>,
+    pub sort_priority: f64,
+    /// Server URL (http for plaintext or https for secure)
+    pub url: String,
+    pub setting_validate_certificates: InheritedBoolSetting,
+    pub setting_request_message_size: InheritedIntSetting,
+}
+
+impl UpsertModelInfo for GrpcRequest {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        GrpcRequestIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        GrpcRequestIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("gr")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (GrpcRequestIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use GrpcRequestIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (Name, self.name.trim().into()),
+            (Description, self.description.into()),
+            (WorkspaceId, self.workspace_id.into()),
+            (FolderId, self.folder_id.into()),
+            (SortPriority, self.sort_priority.into()),
+            (Url, self.url.into()),
+            (Service, self.service.into()),
+            (Method, self.method.into()),
+            (Message, self.message.into()),
+            (AuthenticationType, self.authentication_type.into()),
+            (Authentication, serde_json::to_string(&self.authentication)?.into()),
+            (Metadata, serde_json::to_string(&self.metadata)?.into()),
+            (
+                SettingValidateCertificates,
+                serde_json::to_string(&self.setting_validate_certificates)?.into(),
+            ),
+            (
+                SettingRequestMessageSize,
+                serde_json::to_string(&self.setting_request_message_size)?.into(),
+            ),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            GrpcRequestIden::UpdatedAt,
+            GrpcRequestIden::WorkspaceId,
+            GrpcRequestIden::Name,
+            GrpcRequestIden::Description,
+            GrpcRequestIden::FolderId,
+            GrpcRequestIden::SortPriority,
+            GrpcRequestIden::Url,
+            GrpcRequestIden::Service,
+            GrpcRequestIden::Method,
+            GrpcRequestIden::Message,
+            GrpcRequestIden::AuthenticationType,
+            GrpcRequestIden::Authentication,
+            GrpcRequestIden::Metadata,
+            GrpcRequestIden::SettingValidateCertificates,
+            GrpcRequestIden::SettingRequestMessageSize,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let authentication: String = row.get("authentication")?;
+        let metadata: String = row.get("metadata")?;
+        let setting_validate_certificates: String = row.get("setting_validate_certificates")?;
+        let setting_request_message_size: String = row.get("setting_request_message_size")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            workspace_id: row.get("workspace_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            folder_id: row.get("folder_id")?,
+            name: row.get("name")?,
+            description: row.get("description")?,
+            service: row.get("service")?,
+            method: row.get("method")?,
+            message: row.get("message")?,
+            authentication_type: row.get("authentication_type")?,
+            authentication: serde_json::from_str(authentication.as_str()).unwrap_or_default(),
+            url: row.get("url")?,
+            sort_priority: row.get("sort_priority")?,
+            metadata: serde_json::from_str(metadata.as_str()).unwrap_or_default(),
+            setting_validate_certificates: serde_json::from_str(&setting_validate_certificates)
+                .unwrap_or_default(),
+            setting_request_message_size: serde_json::from_str(&setting_request_message_size)
+                .unwrap_or_else(|_| default_request_message_size_setting()),
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum GrpcConnectionState {
+    Initialized,
+    Connected,
+    Closed,
+}
+
+impl Default for GrpcConnectionState {
+    fn default() -> Self {
+        Self::Initialized
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "grpc_connections")]
+pub struct GrpcConnection {
+    #[ts(type = "\"grpc_connection\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub request_id: String,
+
+    pub elapsed: i32,
+    pub error: Option<String>,
+    pub method: String,
+    pub service: String,
+    pub status: i32,
+    pub state: GrpcConnectionState,
+    pub trailers: BTreeMap<String, String>,
+    pub url: String,
+}
+
+impl UpsertModelInfo for GrpcConnection {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        GrpcConnectionIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        GrpcConnectionIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("gc")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (GrpcConnectionIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use GrpcConnectionIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (RequestId, self.request_id.into()),
+            (Service, self.service.into()),
+            (Method, self.method.into()),
+            (Elapsed, self.elapsed.into()),
+            (State, serde_json::to_value(&self.state)?.as_str().into()),
+            (Status, self.status.into()),
+            (Error, self.error.as_ref().map(|s| s.as_str()).into()),
+            (Trailers, serde_json::to_string(&self.trailers)?.into()),
+            (Url, self.url.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            GrpcConnectionIden::UpdatedAt,
+            GrpcConnectionIden::Service,
+            GrpcConnectionIden::Method,
+            GrpcConnectionIden::Elapsed,
+            GrpcConnectionIden::Status,
+            GrpcConnectionIden::State,
+            GrpcConnectionIden::Error,
+            GrpcConnectionIden::Trailers,
+            GrpcConnectionIden::Url,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let trailers: String = row.get("trailers")?;
+        let state: String = row.get("state")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            workspace_id: row.get("workspace_id")?,
+            request_id: row.get("request_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            service: row.get("service")?,
+            method: row.get("method")?,
+            elapsed: row.get("elapsed")?,
+            state: serde_json::from_str(format!(r#""{state}""#).as_str()).unwrap(),
+            status: row.get("status")?,
+            url: row.get("url")?,
+            error: row.get("error")?,
+            trailers: serde_json::from_str(trailers.as_str()).unwrap_or_default(),
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Eq, PartialEq, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum GrpcEventType {
+    Info,
+    Error,
+    ClientMessage,
+    ServerMessage,
+    ConnectionStart,
+    ConnectionEnd,
+}
+
+impl Default for GrpcEventType {
+    fn default() -> Self {
+        GrpcEventType::Info
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "grpc_events")]
+pub struct GrpcEvent {
+    #[ts(type = "\"grpc_event\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+    pub request_id: String,
+    pub connection_id: String,
+
+    pub content: String,
+    pub error: Option<String>,
+    pub event_type: GrpcEventType,
+    pub metadata: BTreeMap<String, String>,
+    pub status: Option<i32>,
+}
+
+impl UpsertModelInfo for GrpcEvent {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        GrpcEventIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        GrpcEventIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("ge")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (GrpcEventIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use GrpcEventIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (RequestId, self.request_id.into()),
+            (ConnectionId, self.connection_id.into()),
+            (Content, self.content.into()),
+            (EventType, serde_json::to_string(&self.event_type)?.into()),
+            (Metadata, serde_json::to_string(&self.metadata)?.into()),
+            (Status, self.status.into()),
+            (Error, self.error.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            GrpcEventIden::UpdatedAt,
+            GrpcEventIden::Content,
+            GrpcEventIden::EventType,
+            GrpcEventIden::Metadata,
+            GrpcEventIden::Status,
+            GrpcEventIden::Error,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        let event_type: String = row.get("event_type")?;
+        let metadata: String = row.get("metadata")?;
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            workspace_id: row.get("workspace_id")?,
+            request_id: row.get("request_id")?,
+            connection_id: row.get("connection_id")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            content: row.get("content")?,
+            event_type: serde_json::from_str(event_type.as_str()).unwrap_or_default(),
+            metadata: serde_json::from_str(metadata.as_str()).unwrap_or_default(),
+            status: row.get("status")?,
+            error: row.get("error")?,
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "plugins")]
+pub struct Plugin {
+    #[ts(type = "\"plugin\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+
+    pub checked_at: Option<NaiveDateTime>,
+    pub directory: String,
+    pub enabled: bool,
+    pub url: Option<String>,
+    pub source: PluginSource,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum PluginSource {
+    Bundled,
+    Filesystem,
+    Registry,
+}
+
+impl FromStr for PluginSource {
+    type Err = crate::error::Error;
+
+    fn from_str(s: &str) -> Result<Self> {
+        match s {
+            "bundled" => Ok(Self::Bundled),
+            "filesystem" => Ok(Self::Filesystem),
+            "registry" => Ok(Self::Registry),
+            _ => Ok(Self::default()),
+        }
+    }
+}
+
+impl Display for PluginSource {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let str = match self {
+            PluginSource::Bundled => "bundled".to_string(),
+            PluginSource::Filesystem => "filesystem".to_string(),
+            PluginSource::Registry => "registry".to_string(),
+        };
+        write!(f, "{}", str)
+    }
+}
+
+impl Default for PluginSource {
+    fn default() -> Self {
+        Self::Filesystem
+    }
+}
+
+impl UpsertModelInfo for Plugin {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        PluginIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        PluginIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("pg")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (PluginIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use PluginIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (CheckedAt, self.checked_at.into()),
+            (Directory, self.directory.into()),
+            (Url, self.url.into()),
+            (Enabled, self.enabled.into()),
+            (Source, self.source.to_string().into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            PluginIden::UpdatedAt,
+            PluginIden::CheckedAt,
+            PluginIden::Directory,
+            PluginIden::Url,
+            PluginIden::Enabled,
+            PluginIden::Source,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            checked_at: row.get("checked_at")?,
+            url: row.get("url")?,
+            directory: row.get("directory")?,
+            enabled: row.get("enabled")?,
+            source: PluginSource::from_str(row.get::<_, String>("source")?.as_str()).unwrap(),
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "sync_states")]
+pub struct SyncState {
+    #[ts(type = "\"sync_state\"")]
+    pub model: String,
+    pub id: String,
+    pub workspace_id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub flushed_at: NaiveDateTime,
+
+    pub model_id: String,
+    pub checksum: String,
+    pub rel_path: String,
+    pub sync_dir: String,
+}
+
+impl UpsertModelInfo for SyncState {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        SyncStateIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        SyncStateIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("ss")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (SyncStateIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use SyncStateIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (FlushedAt, self.flushed_at.into()),
+            (Checksum, self.checksum.into()),
+            (ModelId, self.model_id.into()),
+            (RelPath, self.rel_path.into()),
+            (SyncDir, self.sync_dir.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            SyncStateIden::UpdatedAt,
+            SyncStateIden::FlushedAt,
+            SyncStateIden::Checksum,
+            SyncStateIden::RelPath,
+            SyncStateIden::SyncDir,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        Ok(Self {
+            id: row.get("id")?,
+            workspace_id: row.get("workspace_id")?,
+            model: row.get("model")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            flushed_at: row.get("flushed_at")?,
+            checksum: row.get("checksum")?,
+            model_id: row.get("model_id")?,
+            sync_dir: row.get("sync_dir")?,
+            rel_path: row.get("rel_path")?,
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "key_values")]
+pub struct KeyValue {
+    #[ts(type = "\"key_value\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+
+    pub key: String,
+    pub namespace: String,
+    pub value: String,
+}
+
+impl UpsertModelInfo for KeyValue {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        KeyValueIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        KeyValueIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("kv")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (KeyValueIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use KeyValueIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (Namespace, self.namespace.clone().into()),
+            (Key, self.key.clone().into()),
+            (Value, self.value.clone().into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![KeyValueIden::UpdatedAt, KeyValueIden::Value]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            namespace: row.get("namespace")?,
+            key: row.get("key")?,
+            value: row.get("value")?,
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "plugin_key_values")]
+pub struct PluginKeyValue {
+    #[ts(type = "\"plugin_key_value\"")]
+    pub model: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+
+    pub plugin_name: String,
+    pub key: String,
+    pub value: String,
+}
+
+impl<'s> TryFrom<&Row<'s>> for PluginKeyValue {
+    type Error = rusqlite::Error;
+
+    fn try_from(r: &Row<'s>) -> std::result::Result<Self, Self::Error> {
+        Ok(Self {
+            model: r.get("model")?,
+            created_at: r.get("created_at")?,
+            updated_at: r.get("updated_at")?,
+            plugin_name: r.get("plugin_name")?,
+            key: r.get("key")?,
+            value: r.get("value")?,
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "import_sources")]
+pub struct ImportSource {
+    #[ts(type = "\"import_source\"")]
+    pub model: String,
+    pub id: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub workspace_id: String,
+
+    pub importer: String,
+    pub origin: String,
+    pub origin_label: String,
+    pub last_imported_at: NaiveDateTime,
+}
+
+impl UpsertModelInfo for ImportSource {
+    fn table_name() -> impl IntoTableRef + IntoIden {
+        ImportSourceIden::Table
+    }
+
+    fn id_column() -> impl IntoIden + Eq + Clone {
+        ImportSourceIden::Id
+    }
+
+    fn generate_id() -> String {
+        generate_prefixed_id("im")
+    }
+
+    fn order_by() -> (impl IntoColumnRef, Order) {
+        (ImportSourceIden::CreatedAt, Desc)
+    }
+
+    fn get_id(&self) -> String {
+        self.id.clone()
+    }
+
+    fn insert_values(
+        self,
+        source: &UpdateSource,
+    ) -> DbResult<Vec<(impl IntoIden + Eq, impl Into<SimpleExpr>)>> {
+        use ImportSourceIden::*;
+        Ok(vec![
+            (CreatedAt, upsert_date(source, self.created_at)),
+            (UpdatedAt, upsert_date(source, self.updated_at)),
+            (WorkspaceId, self.workspace_id.into()),
+            (Importer, self.importer.into()),
+            (Origin, self.origin.into()),
+            (OriginLabel, self.origin_label.into()),
+            (LastImportedAt, self.last_imported_at.into()),
+        ])
+    }
+
+    fn update_columns() -> Vec<impl IntoIden> {
+        vec![
+            ImportSourceIden::UpdatedAt,
+            ImportSourceIden::Importer,
+            ImportSourceIden::Origin,
+            ImportSourceIden::OriginLabel,
+            ImportSourceIden::LastImportedAt,
+        ]
+    }
+
+    fn from_row(row: &Row) -> rusqlite::Result<Self>
+    where
+        Self: Sized,
+    {
+        Ok(Self {
+            id: row.get("id")?,
+            model: row.get("model")?,
+            created_at: row.get("created_at")?,
+            updated_at: row.get("updated_at")?,
+            workspace_id: row.get("workspace_id")?,
+            importer: row.get("importer")?,
+            origin: row.get("origin")?,
+            origin_label: row.get("origin_label")?,
+            last_imported_at: row.get("last_imported_at")?,
+        })
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+#[enum_def(table_name = "import_source_resources")]
+pub struct ImportSourceResource {
+    #[ts(type = "\"import_source_resource\"")]
+    pub model: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+
+    pub import_source_id: String,
+    pub source_key: String,
+    pub model_type: String,
+    /// `None` once the user has decided not to import this key
+    #[ts(optional)]
+    pub model_id: Option<String>,
+    /// Hash of the resource as last applied or decided from the source, if one was recorded
+    #[ts(optional)]
+    pub content_hash: Option<String>,
+}
+
+impl<'s> TryFrom<&Row<'s>> for ImportSourceResource {
+    type Error = rusqlite::Error;
+
+    fn try_from(r: &Row<'s>) -> std::result::Result<Self, Self::Error> {
+        Ok(Self {
+            model: r.get("model")?,
+            created_at: r.get("created_at")?,
+            updated_at: r.get("updated_at")?,
+            import_source_id: r.get("import_source_id")?,
+            source_key: r.get("source_key")?,
+            model_type: r.get("model_type")?,
+            model_id: r.get("model_id")?,
+            content_hash: r.get("content_hash")?,
+        })
+    }
+}
+
+/// Only used as a `from_row` fallback for an unparseable settings column. The
+/// value a *new* model gets comes from that model's `Default` impl.
+fn default_request_message_size_setting() -> InheritedIntSetting {
+    InheritedIntSetting { enabled: false, value: DEFAULT_REQUEST_MESSAGE_SIZE }
+}
+
+#[macro_export]
+macro_rules! define_any_model {
+    ($($type:ident),* $(,)?) => {
+        #[derive(Debug, Clone, Serialize, TS)]
+        #[serde(rename_all = "camelCase", untagged)]
+        #[ts(export, export_to = "gen_models.ts")]
+        pub enum AnyModel {
+            $(
+                $type($type),
+            )*
+        }
+
+        impl AnyModel {
+            #[inline]
+            pub fn id(&self) -> &str {
+                match self {
+                    $(
+                        AnyModel::$type(inner) => &inner.id,
+                    )*
+                }
+            }
+
+            #[inline]
+            pub fn model(&self) -> &str {
+                match self {
+                    $(
+                        AnyModel::$type(inner) => &inner.model,
+                    )*
+                }
+            }
+        }
+
+        $(
+            impl From<$type> for AnyModel {
+                fn from(value: $type) -> Self {
+                    AnyModel::$type(value)
+                }
+            }
+
+            impl From<AnyModel> for $type {
+                fn from(value: AnyModel) -> $type {
+                    match value {
+                        AnyModel::$type(inner) => inner,
+                        _ => panic!( // Should never happen because this macro also generates the enum variant
+                            "Tried to convert AnyModel into `{}`, but found a different variant",
+                            stringify!($type)
+                        ),
+                    }
+                }
+            }
+        )*
+    };
+}
+
+define_any_model! {
+    CookieJar,
+    Environment,
+    Folder,
+    GraphQlIntrospection,
+    GrpcConnection,
+    GrpcEvent,
+    GrpcRequest,
+    HttpRequest,
+    HttpResponse,
+    HttpResponseEvent,
+    ImportSource,
+    KeyValue,
+    Plugin,
+    Settings,
+    SyncState,
+    WebsocketConnection,
+    WebsocketEvent,
+    WebsocketRequest,
+    Workspace,
+    WorkspaceMeta,
+}
+
+impl<'de> Deserialize<'de> for AnyModel {
+    fn deserialize<D>(deserializer: D) -> std::result::Result<Self, D::Error>
+    where
+        D: Deserializer<'de>,
+    {
+        let value = Value::deserialize(deserializer)?;
+        let model = value.as_object().unwrap();
+        use AnyModel::*;
+        use serde_json::from_value as fv;
+
+        let model = match model.get("model") {
+            Some(m) if m == "cookie_jar" => CookieJar(fv(value).unwrap()),
+            Some(m) if m == "environment" => Environment(fv(value).unwrap()),
+            Some(m) if m == "folder" => Folder(fv(value).unwrap()),
+            Some(m) if m == "graphql_introspection" => GraphQlIntrospection(fv(value).unwrap()),
+            Some(m) if m == "grpc_connection" => GrpcConnection(fv(value).unwrap()),
+            Some(m) if m == "grpc_event" => GrpcEvent(fv(value).unwrap()),
+            Some(m) if m == "grpc_request" => GrpcRequest(fv(value).unwrap()),
+            Some(m) if m == "http_request" => HttpRequest(fv(value).unwrap()),
+            Some(m) if m == "http_response" => HttpResponse(fv(value).unwrap()),
+            Some(m) if m == "http_response_event" => HttpResponseEvent(fv(value).unwrap()),
+            Some(m) if m == "import_source" => ImportSource(fv(value).unwrap()),
+            Some(m) if m == "key_value" => KeyValue(fv(value).unwrap()),
+            Some(m) if m == "plugin" => Plugin(fv(value).unwrap()),
+            Some(m) if m == "settings" => Settings(fv(value).unwrap()),
+            Some(m) if m == "sync_state" => SyncState(fv(value).unwrap()),
+            Some(m) if m == "websocket_connection" => WebsocketConnection(fv(value).unwrap()),
+            Some(m) if m == "websocket_event" => WebsocketEvent(fv(value).unwrap()),
+            Some(m) if m == "websocket_request" => WebsocketRequest(fv(value).unwrap()),
+            Some(m) if m == "workspace" => Workspace(fv(value).unwrap()),
+            Some(m) if m == "workspace_meta" => WorkspaceMeta(fv(value).unwrap()),
+            Some(m) => {
+                return Err(serde::de::Error::custom(format!(
+                    "Failed to deserialize AnyModel {}",
+                    m
+                )));
+            }
+            None => {
+                return Err(serde::de::Error::custom("Missing or invalid model"));
+            }
+        };
+
+        Ok(model)
+    }
+}
+
+impl AnyModel {
+    pub fn resolved_name(&self) -> String {
+        let compute_name = |name: &str, url: &str, fallback: &str| -> String {
+            if !name.is_empty() {
+                return name.to_string();
+            }
+            let without_variables = url.replace(r"\$\{\[\s*([^\]\s]+)\s*]}", "$1");
+            if without_variables.is_empty() { fallback.to_string() } else { without_variables }
+        };
+
+        match self.clone() {
+            AnyModel::CookieJar(v) => v.name,
+            AnyModel::Environment(v) => v.name,
+            AnyModel::Folder(v) => v.name,
+            AnyModel::GrpcRequest(v) => compute_name(&v.name, &v.url, "gRPC Request"),
+            AnyModel::HttpRequest(v) => compute_name(&v.name, &v.url, "HTTP Request"),
+            AnyModel::WebsocketRequest(v) => compute_name(&v.name, &v.url, "WebSocket Request"),
+            AnyModel::Workspace(v) => v.name,
+            _ => "No Name".to_string(),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// Every model below carries `#[serde(default)]` at the container level, so a
+    /// missing key is filled from `Default::default()`, which makes each `Default`
+    /// impl the single definition of that model's defaults.
+    ///
+    /// Deserializing `{}` therefore equals `Default::default()` by construction
+    /// today. What this catches is the two ways that can come apart again, both of
+    /// which have already bitten us:
+    ///
+    /// 1. A field-level `#[serde(default = "...")]` (or bare `#[serde(default)]`)
+    ///    added back on a field whose `Default` says something else. That is exactly
+    ///    the shape of the bug this replaced: `setting_send_cookies` deserialized as
+    ///    true but a derived `Default` produced false, so the bootstrapped workspace
+    ///    silently sent no cookies.
+    /// 2. The container-level `#[serde(default)]` being dropped, which turns every
+    ///    missing key into a deserialization error instead.
+    macro_rules! assert_default_matches_serde {
+        ($($t:ty),+ $(,)?) => {
+            $(
+                assert_eq!(
+                    serde_json::from_str::<$t>("{}").expect(concat!(
+                        stringify!($t),
+                        " must deserialize from an empty object"
+                    )),
+                    <$t>::default(),
+                    concat!(stringify!($t), ": Default::default() disagrees with its serde defaults"),
+                );
+            )+
+        };
+    }
+
+    #[test]
+    fn defaults_match_serde_defaults() {
+        assert_default_matches_serde!(
+            Workspace,
+            HttpRequest,
+            Folder,
+            GrpcRequest,
+            WebsocketRequest,
+            HttpRequestHeader,
+            HttpUrlParameter,
+            EnvironmentVariable,
+            DnsOverride,
+            ClientCertificate,
+            InheritedBoolSetting,
+            InheritedIntSetting,
+        );
+    }
+
+    #[test]
+    fn defaults_carry_their_model_name() {
+        assert_eq!(Workspace::default().model, "workspace");
+        assert_eq!(HttpRequest::default().model, "http_request");
+        assert_eq!(Folder::default().model, "folder");
+        assert_eq!(GrpcRequest::default().model, "grpc_request");
+        assert_eq!(WebsocketRequest::default().model, "websocket_request");
+    }
+}
diff --git a/crates/yaak-models/src/models_ops.rs b/crates/yaak-models/src/models_ops.rs
new file mode 100644
index 0000000..2dfe808
--- /dev/null
+++ b/crates/yaak-models/src/models_ops.rs
@@ -0,0 +1,89 @@
+//! Generic model writes, shared by every host.
+//!
+//! `upsert`, `delete` and `duplicate` take an `AnyModel` and fan out to the
+//! typed query for its variant. That fan-out is long, mechanical, and has to
+//! grow a new arm every time a model is added — exactly the code that should
+//! not exist twice. The host supplies the database handles and the
+//! `UpdateSource` identifying who is writing; nothing here knows whether the
+//! caller is a desktop window or an HTTP request.
+
+use crate::blob_manager::BlobManager;
+use crate::client_db::WriteDb;
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use crate::models::AnyModel;
+use crate::util::UpdateSource;
+
+pub fn upsert_model(
+    db: &WriteDb,
+    blobs: &BlobManager,
+    model: AnyModel,
+    source: &UpdateSource,
+) -> Result<String> {
+    let id = match model {
+        AnyModel::CookieJar(m) => db.upsert_cookie_jar(&m, source)?.id,
+        AnyModel::Environment(m) => db.upsert_environment(&m, source)?.id,
+        AnyModel::Folder(m) => db.upsert_folder(&m, source)?.id,
+        AnyModel::GrpcRequest(m) => db.upsert_grpc_request(&m, source)?.id,
+        AnyModel::HttpRequest(m) => db.upsert_http_request(&m, source)?.id,
+        AnyModel::HttpResponse(m) => db.upsert_http_response(&m, source, blobs)?.id,
+        AnyModel::KeyValue(m) => db.upsert_key_value(&m, source)?.id,
+        AnyModel::Plugin(m) => db.upsert_plugin(&m, source)?.id,
+        AnyModel::Settings(m) => db.upsert_settings(&m, source)?.id,
+        AnyModel::WebsocketRequest(m) => db.upsert_websocket_request(&m, source)?.id,
+        AnyModel::Workspace(m) => db.upsert_workspace(&m, source)?.id,
+        AnyModel::WorkspaceMeta(m) => db.upsert_workspace_meta(&m, source)?.id,
+        a => return Err(GenericError(format!("Cannot upsert AnyModel {a:?})"))),
+    };
+
+    Ok(id)
+}
+
+/// Deletes cascade, so callers run this inside a transaction.
+pub fn delete_model(
+    tx: &WriteDb,
+    blobs: &BlobManager,
+    model: AnyModel,
+    source: &UpdateSource,
+) -> Result<String> {
+    let id = match model {
+        AnyModel::CookieJar(m) => tx.delete_cookie_jar(&m, source)?.id,
+        AnyModel::Environment(m) => tx.delete_environment(&m, source)?.id,
+        AnyModel::Folder(m) => tx.delete_folder(&m, source)?.id,
+        AnyModel::GrpcConnection(m) => tx.delete_grpc_connection(&m, source)?.id,
+        AnyModel::GrpcRequest(m) => tx.delete_grpc_request(&m, source)?.id,
+        AnyModel::HttpRequest(m) => tx.delete_http_request(&m, source)?.id,
+        AnyModel::HttpResponse(m) => tx.delete_http_response(&m, source, blobs)?.id,
+        AnyModel::Plugin(m) => tx.delete_plugin(&m, source)?.id,
+        AnyModel::WebsocketConnection(m) => tx.delete_websocket_connection(&m, source)?.id,
+        AnyModel::WebsocketRequest(m) => tx.delete_websocket_request(&m, source)?.id,
+        AnyModel::Workspace(m) => tx.delete_workspace(&m, source, blobs)?.id,
+        a => return Err(GenericError(format!("Cannot delete AnyModel {a:?})"))),
+    };
+
+    Ok(id)
+}
+
+/// Duplicates recurse, so callers run this inside a transaction.
+///
+/// The model is re-read from the database rather than taken from the caller, so
+/// a duplicate never comes from a stale frontend snapshot.
+pub fn duplicate_model(
+    tx: &WriteDb,
+    model_type: &str,
+    model_id: &str,
+    source: &UpdateSource,
+) -> Result<String> {
+    let id = match model_type {
+        "environment" => tx.duplicate_environment(&tx.get_environment(model_id)?, source)?.id,
+        "folder" => tx.duplicate_folder(&tx.get_folder(model_id)?, source)?.id,
+        "grpc_request" => tx.duplicate_grpc_request(&tx.get_grpc_request(model_id)?, source)?.id,
+        "http_request" => tx.duplicate_http_request(&tx.get_http_request(model_id)?, source)?.id,
+        "websocket_request" => {
+            tx.duplicate_websocket_request(&tx.get_websocket_request(model_id)?, source)?.id
+        }
+        t => return Err(GenericError(format!("Cannot duplicate model type {t}"))),
+    };
+
+    Ok(id)
+}
diff --git a/crates/yaak-models/src/path_placeholders.rs b/crates/yaak-models/src/path_placeholders.rs
new file mode 100644
index 0000000..e1a1d08
--- /dev/null
+++ b/crates/yaak-models/src/path_placeholders.rs
@@ -0,0 +1,220 @@
+use crate::models::HttpUrlParameter;
+
+pub fn apply_path_placeholders(
+    url: &str,
+    parameters: &Vec<HttpUrlParameter>,
+) -> (String, Vec<HttpUrlParameter>) {
+    let mut new_parameters = Vec::new();
+
+    let mut url = url.to_string();
+    for p in parameters {
+        if !p.enabled || p.name.is_empty() {
+            continue;
+        }
+
+        // Replace path parameters with values from URL parameters
+        let old_url_string = url.clone();
+        url = replace_path_placeholder(&p, url.as_str());
+
+        // Remove as param if it modified the URL
+        if old_url_string == *url {
+            new_parameters.push(p.to_owned());
+        }
+    }
+
+    (url, new_parameters)
+}
+
+fn replace_path_placeholder(p: &HttpUrlParameter, url: &str) -> String {
+    if !p.enabled {
+        return url.to_string();
+    }
+
+    if !p.name.starts_with(":") {
+        return url.to_string();
+    }
+
+    // A placeholder is `/` followed by the parameter's name (which starts with `:`), and it
+    // ends at `/`, `?`, `#`, a literal `:`, or the end of the URL. The `:` boundary is what
+    // lets `/:id:increment-importance` substitute the `:id` placeholder while leaving
+    // `:increment-importance` as literal text. `/:foooo` is not a match for `:foo`.
+    //
+    // A plain scan rather than a regex: the name is matched literally, so a name containing
+    // `.` or `+` means exactly that, and nothing else in the model layer needs a regex engine.
+    let name = p.name.as_str();
+    let value = urlencoding::encode(p.value.as_str());
+    let mut result = String::with_capacity(url.len());
+    let mut rest = url;
+    while let Some(slash) = rest.find('/') {
+        let after_slash = &rest[slash + 1..];
+        let is_placeholder = after_slash.starts_with(name)
+            && after_slash[name.len()..]
+                .chars()
+                .next()
+                .is_none_or(|c| matches!(c, '/' | '?' | '#' | ':'));
+        if is_placeholder {
+            result.push_str(&rest[..=slash]);
+            result.push_str(&value);
+            rest = &after_slash[name.len()..];
+        } else {
+            result.push_str(&rest[..=slash]);
+            rest = after_slash;
+        }
+    }
+    result.push_str(rest);
+    result
+}
+
+#[cfg(test)]
+mod placeholder_tests {
+    use crate::models::{HttpRequest, HttpUrlParameter};
+    use crate::path_placeholders::{apply_path_placeholders, replace_path_placeholder};
+
+    #[test]
+    fn placeholder_middle() {
+        let p =
+            HttpUrlParameter { name: ":foo".into(), value: "xxx".into(), enabled: true, id: None };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/:foo/bar"),
+            "https://example.com/xxx/bar",
+        );
+    }
+
+    #[test]
+    fn placeholder_end() {
+        let p =
+            HttpUrlParameter { name: ":foo".into(), value: "xxx".into(), enabled: true, id: None };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/:foo"),
+            "https://example.com/xxx",
+        );
+    }
+
+    #[test]
+    fn placeholder_query() {
+        let p =
+            HttpUrlParameter { name: ":foo".into(), value: "xxx".into(), enabled: true, id: None };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/:foo?:foo"),
+            "https://example.com/xxx?:foo",
+        );
+    }
+
+    #[test]
+    fn placeholder_followed_by_literal_colon() {
+        // AIP-136-style custom method: `:id` is the placeholder, `:increment-importance`
+        // is literal text in the same path segment.
+        let p =
+            HttpUrlParameter { name: ":id".into(), value: "42".into(), enabled: true, id: None };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/tasks/:id:increment-importance"),
+            "https://example.com/tasks/42:increment-importance",
+        );
+    }
+
+    #[test]
+    fn placeholder_name_is_matched_literally() {
+        // `.` in a name is a dot, not "any character".
+        let p = HttpUrlParameter {
+            name: ":id.v2".into(),
+            value: "xxx".into(),
+            enabled: true,
+            id: None,
+        };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/:id.v2/:idXv2"),
+            "https://example.com/xxx/:idXv2",
+        );
+    }
+
+    #[test]
+    fn placeholder_repeated() {
+        let p = HttpUrlParameter { name: ":id".into(), value: "7".into(), enabled: true, id: None };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/:id/:id"),
+            "https://example.com/7/7",
+        );
+    }
+
+    #[test]
+    fn placeholder_missing() {
+        let p = HttpUrlParameter {
+            enabled: true,
+            name: "".to_string(),
+            value: "".to_string(),
+            id: None,
+        };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/:missing"),
+            "https://example.com/:missing",
+        );
+    }
+
+    #[test]
+    fn placeholder_disabled() {
+        let p = HttpUrlParameter {
+            enabled: false,
+            name: ":foo".to_string(),
+            value: "xxx".to_string(),
+            id: None,
+        };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/:foo"),
+            "https://example.com/:foo",
+        );
+    }
+
+    #[test]
+    fn placeholder_prefix() {
+        let p =
+            HttpUrlParameter { name: ":foo".into(), value: "xxx".into(), enabled: true, id: None };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/:foooo"),
+            "https://example.com/:foooo",
+        );
+    }
+
+    #[test]
+    fn placeholder_encode() {
+        let p = HttpUrlParameter {
+            name: ":foo".into(),
+            value: "Hello World".into(),
+            enabled: true,
+            id: None,
+        };
+        assert_eq!(
+            replace_path_placeholder(&p, "https://example.com/:foo"),
+            "https://example.com/Hello%20World",
+        );
+    }
+
+    #[test]
+    fn apply_placeholder() {
+        let req = HttpRequest {
+            url: "example.com/:a/bar".to_string(),
+            url_parameters: vec![
+                HttpUrlParameter {
+                    name: "b".to_string(),
+                    value: "bbb".to_string(),
+                    enabled: true,
+                    id: None,
+                },
+                HttpUrlParameter {
+                    name: ":a".to_string(),
+                    value: "aaa".to_string(),
+                    enabled: true,
+                    id: None,
+                },
+            ],
+            ..Default::default()
+        };
+
+        let (url, url_parameters) = apply_path_placeholders(&req.url, &req.url_parameters);
+
+        // Pattern match back to access it
+        assert_eq!(url, "example.com/aaa/bar");
+        assert_eq!(url_parameters.len(), 1);
+        assert_eq!(url_parameters[0].name, "b");
+        assert_eq!(url_parameters[0].value, "bbb");
+    }
+}
diff --git a/crates/yaak-models/src/queries/any_request.rs b/crates/yaak-models/src/queries/any_request.rs
new file mode 100644
index 0000000..bff17b5
--- /dev/null
+++ b/crates/yaak-models/src/queries/any_request.rs
@@ -0,0 +1,21 @@
+use crate::client_db::ClientDb;
+use crate::error::Result;
+use crate::models::{GrpcRequest, HttpRequest, WebsocketRequest};
+
+pub enum AnyRequest {
+    HttpRequest(HttpRequest),
+    GrpcRequest(GrpcRequest),
+    WebsocketRequest(WebsocketRequest),
+}
+
+impl<'a> ClientDb<'a> {
+    pub fn get_any_request(&self, id: &str) -> Result<AnyRequest> {
+        if let Ok(http_request) = self.get_http_request(id) {
+            Ok(AnyRequest::HttpRequest(http_request))
+        } else if let Ok(grpc_request) = self.get_grpc_request(id) {
+            Ok(AnyRequest::GrpcRequest(grpc_request))
+        } else {
+            Ok(AnyRequest::WebsocketRequest(self.get_websocket_request(id)?))
+        }
+    }
+}
diff --git a/crates/yaak-models/src/queries/batch.rs b/crates/yaak-models/src/queries/batch.rs
new file mode 100644
index 0000000..9c96b24
--- /dev/null
+++ b/crates/yaak-models/src/queries/batch.rs
@@ -0,0 +1,73 @@
+use crate::client_db::WriteDb;
+use crate::error::Result;
+use crate::models::{Environment, Folder, GrpcRequest, HttpRequest, WebsocketRequest, Workspace};
+use crate::util::{BatchUpsertResult, UpdateSource};
+use log::info;
+
+impl<'a> WriteDb<'a> {
+    pub fn batch_upsert(
+        &self,
+        workspaces: Vec<Workspace>,
+        environments: Vec<Environment>,
+        folders: Vec<Folder>,
+        http_requests: Vec<HttpRequest>,
+        grpc_requests: Vec<GrpcRequest>,
+        websocket_requests: Vec<WebsocketRequest>,
+        source: &UpdateSource,
+    ) -> Result<BatchUpsertResult> {
+        let mut imported_resources = BatchUpsertResult::default();
+
+        if workspaces.len() > 0 {
+            for v in workspaces {
+                let x = self.upsert_workspace(&v, source)?;
+                imported_resources.workspaces.push(x.clone());
+            }
+            info!("Upserted {} workspaces", imported_resources.workspaces.len());
+        }
+
+        if http_requests.len() > 0 {
+            for v in http_requests {
+                let x = self.upsert_http_request(&v, source)?;
+                imported_resources.http_requests.push(x.clone());
+            }
+            info!("Upserted Imported {} http_requests", imported_resources.http_requests.len());
+        }
+
+        if grpc_requests.len() > 0 {
+            for v in grpc_requests {
+                let x = self.upsert_grpc_request(&v, source)?;
+                imported_resources.grpc_requests.push(x.clone());
+            }
+            info!("Upserted {} grpc_requests", imported_resources.grpc_requests.len());
+        }
+
+        if websocket_requests.len() > 0 {
+            for v in websocket_requests {
+                let x = self.upsert_websocket_request(&v, source)?;
+                imported_resources.websocket_requests.push(x.clone());
+            }
+            info!("Upserted {} websocket_requests", imported_resources.websocket_requests.len());
+        }
+
+        // Do folders after their children so the UI doesn't render empty folders before populating
+        // immediately after.
+        if folders.len() > 0 {
+            for v in folders {
+                let x = self.upsert_folder(&v, source)?;
+                imported_resources.folders.push(x.clone());
+            }
+            info!("Upserted {} folders", imported_resources.folders.len());
+        }
+
+        // Do environments last because they can depend on many models (requests, folders, etc)
+        if environments.len() > 0 {
+            for x in environments {
+                let x = self.upsert_environment(&x, source)?;
+                imported_resources.environments.push(x.clone());
+            }
+            info!("Upserted {} environments", imported_resources.environments.len());
+        }
+
+        Ok(imported_resources)
+    }
+}
diff --git a/crates/yaak-models/src/queries/cookie_jars.rs b/crates/yaak-models/src/queries/cookie_jars.rs
new file mode 100644
index 0000000..2b9aa16
--- /dev/null
+++ b/crates/yaak-models/src/queries/cookie_jars.rs
@@ -0,0 +1,50 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{CookieJar, CookieJarIden};
+use crate::util::UpdateSource;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_cookie_jar(&self, id: &str) -> Result<CookieJar> {
+        self.find_one(CookieJarIden::Id, id)
+    }
+
+    pub fn list_cookie_jars(&self, workspace_id: &str) -> Result<Vec<CookieJar>> {
+        self.find_many(CookieJarIden::WorkspaceId, workspace_id, None)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    /// A workspace with no cookie jar gets a default one.
+    pub fn ensure_default_cookie_jar(&self, workspace_id: &str) -> Result<()> {
+        if self.list_cookie_jars(workspace_id)?.is_empty() {
+            let jar = CookieJar {
+                name: "Default".to_string(),
+                workspace_id: workspace_id.to_string(),
+                ..Default::default()
+            };
+            self.upsert_cookie_jar(&jar, &UpdateSource::Background)?;
+        }
+        Ok(())
+    }
+
+    pub fn delete_cookie_jar(
+        &self,
+        cookie_jar: &CookieJar,
+        source: &UpdateSource,
+    ) -> Result<CookieJar> {
+        self.delete(cookie_jar, source)
+    }
+
+    pub fn delete_cookie_jar_by_id(&self, id: &str, source: &UpdateSource) -> Result<CookieJar> {
+        let cookie_jar = self.get_cookie_jar(id)?;
+        self.delete_cookie_jar(&cookie_jar, source)
+    }
+
+    pub fn upsert_cookie_jar(
+        &self,
+        cookie_jar: &CookieJar,
+        source: &UpdateSource,
+    ) -> Result<CookieJar> {
+        self.upsert(cookie_jar, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/duplicate_name.rs b/crates/yaak-models/src/queries/duplicate_name.rs
new file mode 100644
index 0000000..87aedaf
--- /dev/null
+++ b/crates/yaak-models/src/queries/duplicate_name.rs
@@ -0,0 +1,56 @@
+/// Compute a name for a duplicated model that doesn't conflict with any sibling
+/// name, following the " Copy N" convention. Empty names are kept empty so the
+/// display falls back to the URL.
+pub(crate) fn conflict_free_name(name: &str, sibling_names: &[String]) -> String {
+    if name.is_empty() {
+        return String::new();
+    }
+
+    let mut name = name.to_string();
+    for _ in 0..100 {
+        if !sibling_names.contains(&name) {
+            break;
+        }
+        name = next_copy_name(&name);
+    }
+    name
+}
+
+fn next_copy_name(name: &str) -> String {
+    if let Some(base) = name.strip_suffix(" Copy") {
+        return format!("{base} Copy 2");
+    }
+
+    if let Some(idx) = name.rfind(" Copy ") {
+        let n = &name[idx + " Copy ".len()..];
+        if !n.is_empty() && n.chars().all(|c| c.is_ascii_digit()) {
+            if let Ok(n) = n.parse::<u64>() {
+                return format!("{} Copy {}", &name[..idx], n + 1);
+            }
+        }
+    }
+
+    format!("{name} Copy")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_next_copy_name() {
+        assert_eq!(next_copy_name("Foo"), "Foo Copy");
+        assert_eq!(next_copy_name("Foo Copy"), "Foo Copy 2");
+        assert_eq!(next_copy_name("Foo Copy 2"), "Foo Copy 3");
+        assert_eq!(next_copy_name("Foo Copy 99"), "Foo Copy 100");
+        assert_eq!(next_copy_name("Copy"), "Copy Copy");
+    }
+
+    #[test]
+    fn test_conflict_free_name() {
+        let siblings = vec!["Foo".to_string(), "Foo Copy".to_string(), "".to_string()];
+        assert_eq!(conflict_free_name("Foo", &siblings), "Foo Copy 2");
+        assert_eq!(conflict_free_name("Bar", &siblings), "Bar");
+        assert_eq!(conflict_free_name("", &siblings), "");
+    }
+}
diff --git a/crates/yaak-models/src/queries/environments.rs b/crates/yaak-models/src/queries/environments.rs
new file mode 100644
index 0000000..5fc0402
--- /dev/null
+++ b/crates/yaak-models/src/queries/environments.rs
@@ -0,0 +1,362 @@
+use super::conflict_free_name;
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Error::{MissingBaseEnvironment, MultipleBaseEnvironments};
+use crate::error::Result;
+use crate::models::{Environment, EnvironmentIden, EnvironmentVariable};
+use crate::util::UpdateSource;
+use log::{info, warn};
+
+impl<'a> ClientDb<'a> {
+    pub fn get_environment(&self, id: &str) -> Result<Environment> {
+        self.find_one(EnvironmentIden::Id, id)
+    }
+
+    /// Resolve an explicit execution environment, rejecting foreign and folder environments.
+    /// Folder variables are inherited from the request's folder, never selected globally.
+    pub fn get_environment_for_workspace(
+        &self,
+        workspace_id: &str,
+        environment_id: &str,
+    ) -> Result<Environment> {
+        let environment = self.get_environment(environment_id)?;
+        if environment.workspace_id != workspace_id {
+            return Err(crate::error::Error::InvalidEnvironment(format!(
+                "Environment {environment_id} does not belong to workspace {workspace_id}"
+            )));
+        }
+        if !matches!(environment.parent_model.as_str(), "workspace" | "environment") {
+            return Err(crate::error::Error::InvalidEnvironment(format!(
+                "Environment {environment_id} is not a workspace environment"
+            )));
+        }
+        Ok(environment)
+    }
+
+    pub fn get_environment_by_folder_id(&self, folder_id: &str) -> Result<Option<Environment>> {
+        let mut environments: Vec<Environment> =
+            self.find_many(EnvironmentIden::ParentId, folder_id, None)?;
+        // Sort so we return the most recently updated environment
+        environments.sort_by(|a, b| b.updated_at.cmp(&a.updated_at));
+        Ok(environments.get(0).cloned())
+    }
+
+    pub fn get_base_environment(&self, workspace_id: &str) -> Result<Environment> {
+        let environments = self.list_environments(workspace_id)?;
+        let base_environments = environments
+            .into_iter()
+            .filter(|e| e.parent_model == "workspace")
+            .collect::<Vec<Environment>>();
+
+        if base_environments.len() > 1 {
+            return Err(MultipleBaseEnvironments(workspace_id.to_string()));
+        }
+
+        Ok(base_environments
+            .first()
+            .cloned()
+            .ok_or(MissingBaseEnvironment(workspace_id.to_string()))?)
+    }
+
+    pub fn list_environments(&self, workspace_id: &str) -> Result<Vec<Environment>> {
+        Ok(self.find_many::<Environment>(EnvironmentIden::WorkspaceId, workspace_id, None)?)
+    }
+
+    /// Find other environments with the same parent folder
+    fn list_duplicate_folder_environments(&self, environment: &Environment) -> Vec<Environment> {
+        if environment.parent_model != "folder" {
+            return Vec::new();
+        }
+
+        self.list_environments(&environment.workspace_id)
+            .unwrap_or_default()
+            .into_iter()
+            .filter(|e| {
+                e.id != environment.id
+                    && e.parent_model == "folder"
+                    && e.parent_id == environment.parent_id
+            })
+            .collect()
+    }
+
+    pub fn resolve_environments(
+        &self,
+        workspace_id: &str,
+        folder_id: Option<&str>,
+        active_environment_id: Option<&str>,
+    ) -> Result<Vec<Environment>> {
+        let mut environments = Vec::new();
+
+        if let Some(folder_id) = folder_id {
+            let folder = self.get_folder(folder_id)?;
+
+            // Add current folder's environment
+            if let Some(e) = self.get_environment_by_folder_id(folder_id)? {
+                environments.push(e);
+            };
+
+            // Recurse up
+            let ancestors = self.resolve_environments(
+                workspace_id,
+                folder.folder_id.as_deref(),
+                active_environment_id,
+            )?;
+            environments.extend(ancestors);
+        } else {
+            // Add active and base environments
+            if let Some(id) = active_environment_id {
+                if let Ok(e) = self.get_environment(&id) {
+                    // Add active sub environment
+                    environments.push(e);
+                };
+            };
+
+            // Add the base environment. A workspace that has never been
+            // opened has none yet; it simply contributes no variables.
+            match self.get_base_environment(workspace_id) {
+                Ok(e) => environments.push(e),
+                Err(MissingBaseEnvironment(_)) => {}
+                Err(e) => return Err(e),
+            }
+        }
+
+        Ok(environments)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    /// The workspace's base environment, created if it does not exist.
+    pub fn ensure_base_environment(&self, workspace_id: &str) -> Result<Environment> {
+        match self.get_base_environment(workspace_id) {
+            Err(MissingBaseEnvironment(_)) => {}
+            other => return other,
+        }
+        let e = self.upsert_environment(
+            &Environment {
+                workspace_id: workspace_id.to_string(),
+                name: "Global Variables".to_string(),
+                parent_model: "workspace".to_string(),
+                ..Default::default()
+            },
+            &UpdateSource::Background,
+        )?;
+        info!("Created base environment {} for {workspace_id}", e.id);
+        Ok(e)
+    }
+
+    pub fn delete_environment(
+        &self,
+        environment: &Environment,
+        source: &UpdateSource,
+    ) -> Result<Environment> {
+        let deleted_environment = self.delete(environment, source)?;
+
+        // Recreate the base environment if we happened to delete it
+        self.ensure_base_environment(&environment.workspace_id)?;
+
+        Ok(deleted_environment)
+    }
+
+    pub fn delete_environment_by_id(&self, id: &str, source: &UpdateSource) -> Result<Environment> {
+        let environment = self.get_environment(id)?;
+        self.delete_environment(&environment, source)
+    }
+
+    pub fn duplicate_environment(
+        &self,
+        environment: &Environment,
+        source: &UpdateSource,
+    ) -> Result<Environment> {
+        let mut environment = environment.clone();
+        environment.id = "".to_string();
+        let sibling_names = self
+            .list_environments(&environment.workspace_id)?
+            .into_iter()
+            .map(|e| e.name)
+            .collect::<Vec<_>>();
+        environment.name = conflict_free_name(&environment.name, &sibling_names);
+        self.upsert_environment(&environment, source)
+    }
+
+    pub fn upsert_environment(
+        &self,
+        environment: &Environment,
+        source: &UpdateSource,
+    ) -> Result<Environment> {
+        let cleaned_variables = environment
+            .variables
+            .iter()
+            .filter(|v| !v.name.is_empty() || !v.value.is_empty())
+            .cloned()
+            .collect::<Vec<EnvironmentVariable>>();
+
+        // Sometimes a new environment can be created via sync/import, so we'll just delete
+        // the others when that happens. Not the best, but it's good for now.
+        let duplicates = self.list_duplicate_folder_environments(environment);
+        for duplicate in duplicates {
+            warn!(
+                "Deleting duplicate environment {} for folder {:?}",
+                duplicate.id, environment.parent_id
+            );
+            _ = self.delete(&duplicate, source);
+        }
+
+        // Automatically update the environment name based on the folder name
+        let mut name = environment.name.clone();
+        match (environment.parent_model.as_str(), environment.parent_id.as_deref()) {
+            ("folder", Some(folder_id)) => {
+                if let Ok(folder) = self.get_folder(folder_id) {
+                    name = format!("{} Environment", folder.name);
+                }
+            }
+            _ => {}
+        }
+
+        self.upsert(
+            &Environment { name, variables: cleaned_variables, ..environment.clone() },
+            source,
+        )
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::error::Error;
+    use crate::init_in_memory;
+    use crate::models::{Environment, EnvironmentVariable, Folder, Workspace};
+    use crate::query_manager::QueryManager;
+    use crate::render::make_vars_hashmap;
+    use crate::util::UpdateSource;
+
+    fn fixture() -> (QueryManager, Environment, Environment, Environment) {
+        let (manager, _blobs, _rx) = init_in_memory().unwrap();
+        let source = &UpdateSource::Background;
+        let (base, staging, folder) = manager
+            .with_tx(|db| {
+                // Fresh databases no longer come with a workspace, so make one
+                let workspace = db.upsert_workspace(
+                    &Workspace { name: "Test".into(), ..Default::default() },
+                    source,
+                )?;
+                let variable = |name: &str, value: &str| EnvironmentVariable {
+                    enabled: true,
+                    name: name.into(),
+                    value: value.into(),
+                    ..Default::default()
+                };
+                let base = db.ensure_base_environment(&workspace.id)?;
+                let base = db.upsert_environment(
+                    &Environment {
+                        variables: vec![
+                            variable("marker", "global"),
+                            variable("global_only", "inherited"),
+                        ],
+                        ..base
+                    },
+                    source,
+                )?;
+                let staging = db.upsert_environment(
+                    &Environment {
+                        workspace_id: workspace.id.clone(),
+                        parent_model: "environment".into(),
+                        parent_id: Some(base.id.clone()),
+                        name: "Staging".into(),
+                        variables: vec![variable("marker", "staging")],
+                        ..Default::default()
+                    },
+                    source,
+                )?;
+                let folder = db.upsert_folder(
+                    &Folder {
+                        workspace_id: workspace.id.clone(),
+                        name: "Folder".into(),
+                        ..Default::default()
+                    },
+                    source,
+                )?;
+                let folder = db.upsert_environment(
+                    &Environment {
+                        workspace_id: workspace.id,
+                        parent_model: "folder".into(),
+                        parent_id: Some(folder.id),
+                        variables: vec![variable("marker", "folder")],
+                        ..Default::default()
+                    },
+                    source,
+                )?;
+                Ok::<_, Error>((base, staging, folder))
+            })
+            .unwrap();
+        (manager, base, staging, folder)
+    }
+
+    #[test]
+    fn explicit_environment_preserves_global_and_folder_inheritance() {
+        let (manager, base, staging, folder) = fixture();
+        let db = manager.connect();
+        let selected = db.get_environment_for_workspace(&base.workspace_id, &staging.id).unwrap();
+        let vars = make_vars_hashmap(
+            db.resolve_environments(&base.workspace_id, None, Some(&selected.id)).unwrap(),
+        );
+        assert_eq!(vars["marker"], "staging");
+        assert_eq!(vars["global_only"], "inherited");
+
+        let vars = make_vars_hashmap(
+            db.resolve_environments(
+                &base.workspace_id,
+                folder.parent_id.as_deref(),
+                Some(&selected.id),
+            )
+            .unwrap(),
+        );
+        assert_eq!(vars["marker"], "folder");
+        assert_eq!(vars["global_only"], "inherited");
+    }
+
+    #[test]
+    fn base_environment_can_be_selected_explicitly() {
+        let (manager, base, _staging, _folder) = fixture();
+        let db = manager.connect();
+        let selected = db.get_environment_for_workspace(&base.workspace_id, &base.id).unwrap();
+        let vars = make_vars_hashmap(
+            db.resolve_environments(&base.workspace_id, None, Some(&selected.id)).unwrap(),
+        );
+        assert_eq!(vars["marker"], "global");
+    }
+
+    #[test]
+    fn explicit_environment_rejects_empty_and_missing_ids() {
+        let (manager, base, _staging, _folder) = fixture();
+        for id in ["", "ev_missing"] {
+            assert!(matches!(
+                manager.connect().get_environment_for_workspace(&base.workspace_id, id),
+                Err(Error::ModelNotFound(_))
+            ));
+        }
+    }
+
+    #[test]
+    fn explicit_environment_rejects_another_workspace() {
+        let (manager, _base, staging, _folder) = fixture();
+        let other = manager
+            .with_tx(|db| {
+                db.upsert_workspace(
+                    &Workspace { name: "Other".into(), ..Default::default() },
+                    &UpdateSource::Background,
+                )
+            })
+            .unwrap();
+        assert!(matches!(
+            manager.connect().get_environment_for_workspace(&other.id, &staging.id),
+            Err(Error::InvalidEnvironment(_))
+        ));
+    }
+
+    #[test]
+    fn explicit_environment_rejects_folder_variables() {
+        let (manager, base, _staging, folder) = fixture();
+        assert!(matches!(
+            manager.connect().get_environment_for_workspace(&base.workspace_id, &folder.id),
+            Err(Error::InvalidEnvironment(_))
+        ));
+    }
+}
diff --git a/crates/yaak-models/src/queries/folders.rs b/crates/yaak-models/src/queries/folders.rs
new file mode 100644
index 0000000..df325a4
--- /dev/null
+++ b/crates/yaak-models/src/queries/folders.rs
@@ -0,0 +1,223 @@
+use super::{conflict_free_name, merge_headers};
+use crate::client_db::{ClientDb, WriteDb};
+use crate::connection_or_tx::ConnectionOrTx;
+use crate::error::Result;
+use crate::models::{
+    AnyModel, Environment, EnvironmentIden, Folder, FolderIden, GrpcRequest, GrpcRequestIden,
+    HttpRequest, HttpRequestHeader, HttpRequestIden, ResolvedHttpRequestSettings, ResolvedSetting,
+    WebsocketRequest, WebsocketRequestIden,
+};
+use crate::util::UpdateSource;
+use serde_json::Value;
+use std::collections::BTreeMap;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_folder(&self, id: &str) -> Result<Folder> {
+        self.find_one(FolderIden::Id, id)
+    }
+
+    pub fn list_folders(&self, workspace_id: &str) -> Result<Vec<Folder>> {
+        self.find_many(FolderIden::WorkspaceId, workspace_id, None)
+    }
+
+    pub fn resolve_auth_for_folder(
+        &self,
+        folder: &Folder,
+    ) -> Result<(Option<String>, BTreeMap<String, Value>, String)> {
+        if let Some(at) = folder.authentication_type.clone() {
+            return Ok((Some(at), folder.authentication.clone(), folder.id.clone()));
+        }
+
+        if let Some(folder_id) = folder.folder_id.clone() {
+            let folder = self.get_folder(&folder_id)?;
+            return self.resolve_auth_for_folder(&folder);
+        }
+
+        let workspace = self.get_workspace(&folder.workspace_id)?;
+        Ok(self.resolve_auth_for_workspace(&workspace))
+    }
+
+    pub fn resolve_headers_for_folder(&self, folder: &Folder) -> Result<Vec<HttpRequestHeader>> {
+        let mut headers = Vec::new();
+
+        if let Some(folder_id) = folder.folder_id.clone() {
+            let parent_folder = self.get_folder(&folder_id)?;
+            let mut folder_headers = self.resolve_headers_for_folder(&parent_folder)?;
+            // NOTE: Add parent headers first, so overrides are logical
+            headers.append(&mut folder_headers);
+        } else {
+            let workspace = self.get_workspace(&folder.workspace_id)?;
+            let mut workspace_headers = self.resolve_headers_for_workspace(&workspace);
+            headers.append(&mut workspace_headers);
+        }
+
+        Ok(merge_headers(headers, folder.headers.clone()))
+    }
+
+    pub fn resolve_settings_for_folder(
+        &self,
+        folder: &Folder,
+    ) -> Result<ResolvedHttpRequestSettings> {
+        let parent = if let Some(folder_id) = folder.folder_id.clone() {
+            let parent_folder = self.get_folder(&folder_id)?;
+            self.resolve_settings_for_folder(&parent_folder)?
+        } else {
+            let workspace = self.get_workspace(&folder.workspace_id)?;
+            self.resolve_settings_for_workspace(&workspace)
+        };
+
+        Ok(ResolvedHttpRequestSettings {
+            validate_certificates: if folder.setting_validate_certificates.enabled {
+                ResolvedSetting::from_model(
+                    folder.setting_validate_certificates.value,
+                    AnyModel::Folder(folder.clone()),
+                )
+            } else {
+                parent.validate_certificates
+            },
+            follow_redirects: if folder.setting_follow_redirects.enabled {
+                ResolvedSetting::from_model(
+                    folder.setting_follow_redirects.value,
+                    AnyModel::Folder(folder.clone()),
+                )
+            } else {
+                parent.follow_redirects
+            },
+            request_timeout: if folder.setting_request_timeout.enabled {
+                ResolvedSetting::from_model(
+                    folder.setting_request_timeout.value,
+                    AnyModel::Folder(folder.clone()),
+                )
+            } else {
+                parent.request_timeout
+            },
+            request_message_size: if folder.setting_request_message_size.enabled {
+                ResolvedSetting::from_model(
+                    folder.setting_request_message_size.value,
+                    AnyModel::Folder(folder.clone()),
+                )
+            } else {
+                parent.request_message_size
+            },
+            send_cookies: if folder.setting_send_cookies.enabled {
+                ResolvedSetting::from_model(
+                    folder.setting_send_cookies.value,
+                    AnyModel::Folder(folder.clone()),
+                )
+            } else {
+                parent.send_cookies
+            },
+            store_cookies: if folder.setting_store_cookies.enabled {
+                ResolvedSetting::from_model(
+                    folder.setting_store_cookies.value,
+                    AnyModel::Folder(folder.clone()),
+                )
+            } else {
+                parent.store_cookies
+            },
+            http_version: if folder.setting_http_version.enabled {
+                ResolvedSetting::from_model(
+                    folder.setting_http_version.value,
+                    AnyModel::Folder(folder.clone()),
+                )
+            } else {
+                parent.http_version
+            },
+        })
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn delete_folder(&self, folder: &Folder, source: &UpdateSource) -> Result<Folder> {
+        match self.conn() {
+            ConnectionOrTx::Connection(_) => {}
+            ConnectionOrTx::Transaction(_) => {}
+        }
+
+        let fid = &folder.id;
+        for m in self.find_many::<HttpRequest>(HttpRequestIden::FolderId, fid, None)? {
+            self.delete_http_request(&m, source)?;
+        }
+
+        for m in self.find_many::<GrpcRequest>(GrpcRequestIden::FolderId, fid, None)? {
+            self.delete_grpc_request(&m, source)?;
+        }
+
+        for m in self.find_many::<WebsocketRequest>(WebsocketRequestIden::FolderId, fid, None)? {
+            self.delete_websocket_request(&m, source)?;
+        }
+
+        for e in self.find_many(EnvironmentIden::ParentId, fid, None)? {
+            self.delete_environment(&e, source)?;
+        }
+
+        // Recurse down into child folders
+        for folder in self.find_many::<Folder>(FolderIden::FolderId, fid, None)? {
+            self.delete_folder(&folder, source)?;
+        }
+
+        self.delete(folder, source)
+    }
+
+    pub fn delete_folder_by_id(&self, id: &str, source: &UpdateSource) -> Result<Folder> {
+        let folder = self.get_folder(id)?;
+        self.delete_folder(&folder, source)
+    }
+
+    pub fn upsert_folder(&self, folder: &Folder, source: &UpdateSource) -> Result<Folder> {
+        self.upsert(folder, source)
+    }
+
+    pub fn duplicate_folder(&self, src_folder: &Folder, source: &UpdateSource) -> Result<Folder> {
+        let fid = &src_folder.id;
+
+        let mut folder = Folder {
+            id: "".into(),
+            sort_priority: src_folder.sort_priority + 0.001,
+            ..src_folder.clone()
+        };
+        let sibling_names = self
+            .list_folders(&folder.workspace_id)?
+            .into_iter()
+            .filter(|f| f.folder_id == folder.folder_id)
+            .map(|f| f.name)
+            .collect::<Vec<_>>();
+        folder.name = conflict_free_name(&folder.name, &sibling_names);
+        let new_folder = self.upsert_folder(&folder, source)?;
+
+        for m in self.find_many::<HttpRequest>(HttpRequestIden::FolderId, fid, None)? {
+            self.upsert_http_request(
+                &HttpRequest { id: "".into(), folder_id: Some(new_folder.id.clone()), ..m },
+                source,
+            )?;
+        }
+
+        for m in self.find_many::<WebsocketRequest>(WebsocketRequestIden::FolderId, fid, None)? {
+            self.upsert_websocket_request(
+                &WebsocketRequest { id: "".into(), folder_id: Some(new_folder.id.clone()), ..m },
+                source,
+            )?;
+        }
+
+        for m in self.find_many::<GrpcRequest>(GrpcRequestIden::FolderId, fid, None)? {
+            self.upsert_grpc_request(
+                &GrpcRequest { id: "".into(), folder_id: Some(new_folder.id.clone()), ..m },
+                source,
+            )?;
+        }
+
+        for m in self.find_many::<Environment>(EnvironmentIden::ParentId, fid, None)? {
+            self.upsert_environment(
+                &Environment { id: "".into(), parent_id: Some(new_folder.id.clone()), ..m },
+                source,
+            )?;
+        }
+
+        for m in self.find_many::<Folder>(FolderIden::FolderId, fid, None)? {
+            // Recurse down
+            self.duplicate_folder(&Folder { folder_id: Some(new_folder.id.clone()), ..m }, source)?;
+        }
+
+        Ok(new_folder)
+    }
+}
diff --git a/crates/yaak-models/src/queries/graphql_introspections.rs b/crates/yaak-models/src/queries/graphql_introspections.rs
new file mode 100644
index 0000000..ffaa5a1
--- /dev/null
+++ b/crates/yaak-models/src/queries/graphql_introspections.rs
@@ -0,0 +1,54 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{GraphQlIntrospection, GraphQlIntrospectionIden};
+use crate::util::UpdateSource;
+use chrono::{Duration, Utc};
+use sea_query::ExprTrait;
+use sea_query::{Expr, Query, SqliteQueryBuilder};
+use sea_query_rusqlite::RusqliteBinder;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_graphql_introspection(&self, request_id: &str) -> Option<GraphQlIntrospection> {
+        self.find_optional(GraphQlIntrospectionIden::RequestId, request_id)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn upsert_graphql_introspection(
+        &self,
+        workspace_id: &str,
+        request_id: &str,
+        content: Option<String>,
+        source: &UpdateSource,
+    ) -> Result<GraphQlIntrospection> {
+        // Clean up old ones every time a new one is upserted
+        self.delete_expired_graphql_introspections()?;
+
+        match self.get_graphql_introspection(request_id) {
+            None => self.upsert(
+                &GraphQlIntrospection {
+                    content,
+                    request_id: request_id.to_string(),
+                    workspace_id: workspace_id.to_string(),
+                    ..Default::default()
+                },
+                source,
+            ),
+            Some(introspection) => {
+                self.upsert(&GraphQlIntrospection { content, ..introspection }, source)
+            }
+        }
+    }
+
+    pub fn delete_expired_graphql_introspections(&self) -> Result<()> {
+        let cutoff = Utc::now().naive_utc() - Duration::days(7);
+        let (sql, params) = Query::delete()
+            .from_table(GraphQlIntrospectionIden::Table)
+            .cond_where(Expr::col(GraphQlIntrospectionIden::UpdatedAt).lt(cutoff))
+            .build_rusqlite(SqliteQueryBuilder);
+
+        let mut stmt = self.conn().resolve().prepare(sql.as_str())?;
+        stmt.execute(&*params.as_params())?;
+        Ok(())
+    }
+}
diff --git a/crates/yaak-models/src/queries/grpc_connections.rs b/crates/yaak-models/src/queries/grpc_connections.rs
new file mode 100644
index 0000000..f8e1539
--- /dev/null
+++ b/crates/yaak-models/src/queries/grpc_connections.rs
@@ -0,0 +1,97 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{GrpcConnection, GrpcConnectionIden, GrpcConnectionState};
+use crate::queries::MAX_HISTORY_ITEMS;
+use crate::util::UpdateSource;
+use log::debug;
+use sea_query::ExprTrait;
+use sea_query::{Expr, Query, SqliteQueryBuilder};
+use sea_query_rusqlite::RusqliteBinder;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_grpc_connection(&self, id: &str) -> Result<GrpcConnection> {
+        self.find_one(GrpcConnectionIden::Id, id)
+    }
+
+    pub fn list_grpc_connections_for_request(
+        &self,
+        request_id: &str,
+        limit: Option<u64>,
+    ) -> Result<Vec<GrpcConnection>> {
+        self.find_many(GrpcConnectionIden::RequestId, request_id, limit)
+    }
+
+    pub fn list_grpc_connections(&self, workspace_id: &str) -> Result<Vec<GrpcConnection>> {
+        self.find_many(GrpcConnectionIden::WorkspaceId, workspace_id, None)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn delete_all_grpc_connections_for_request(
+        &self,
+        request_id: &str,
+        source: &UpdateSource,
+    ) -> Result<()> {
+        let responses = self.list_grpc_connections_for_request(request_id, None)?;
+        for m in responses {
+            self.delete(&m, source)?;
+        }
+        Ok(())
+    }
+
+    pub fn delete_all_grpc_connections_for_workspace(
+        &self,
+        workspace_id: &str,
+        source: &UpdateSource,
+    ) -> Result<()> {
+        for m in self.list_grpc_connections(workspace_id)? {
+            self.delete(&m, source)?;
+        }
+        Ok(())
+    }
+
+    pub fn delete_grpc_connection(
+        &self,
+        m: &GrpcConnection,
+        source: &UpdateSource,
+    ) -> Result<GrpcConnection> {
+        self.delete(m, source)
+    }
+
+    pub fn delete_grpc_connection_by_id(
+        &self,
+        id: &str,
+        source: &UpdateSource,
+    ) -> Result<GrpcConnection> {
+        let grpc_connection = self.get_grpc_connection(id)?;
+        self.delete_grpc_connection(&grpc_connection, source)
+    }
+
+    pub fn cancel_pending_grpc_connections(&self) -> Result<()> {
+        let closed = serde_json::to_value(&GrpcConnectionState::Closed)?;
+        let (sql, params) = Query::update()
+            .table(GrpcConnectionIden::Table)
+            .values([(GrpcConnectionIden::State, closed.as_str().into())])
+            .cond_where(Expr::col(GrpcConnectionIden::State).ne(closed.as_str()))
+            .build_rusqlite(SqliteQueryBuilder);
+        let mut stmt = self.conn().prepare(sql.as_str())?;
+        stmt.execute(&*params.as_params())?;
+        Ok(())
+    }
+
+    pub fn upsert_grpc_connection(
+        &self,
+        grpc_connection: &GrpcConnection,
+        source: &UpdateSource,
+    ) -> Result<GrpcConnection> {
+        let connections =
+            self.list_grpc_connections_for_request(grpc_connection.request_id.as_str(), None)?;
+
+        for m in connections.iter().skip(MAX_HISTORY_ITEMS - 1) {
+            debug!("Deleting old gRPC connection {}", grpc_connection.id);
+            self.delete_grpc_connection(&m, source)?;
+        }
+
+        self.upsert(grpc_connection, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/grpc_events.rs b/crates/yaak-models/src/queries/grpc_events.rs
new file mode 100644
index 0000000..353ac77
--- /dev/null
+++ b/crates/yaak-models/src/queries/grpc_events.rs
@@ -0,0 +1,24 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{GrpcEvent, GrpcEventIden};
+use crate::util::UpdateSource;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_grpc_events(&self, id: &str) -> Result<GrpcEvent> {
+        self.find_one(GrpcEventIden::Id, id)
+    }
+
+    pub fn list_grpc_events(&self, connection_id: &str) -> Result<Vec<GrpcEvent>> {
+        self.find_many(GrpcEventIden::ConnectionId, connection_id, None)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn upsert_grpc_event(
+        &self,
+        grpc_event: &GrpcEvent,
+        source: &UpdateSource,
+    ) -> Result<GrpcEvent> {
+        self.upsert(grpc_event, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/grpc_requests.rs b/crates/yaak-models/src/queries/grpc_requests.rs
new file mode 100644
index 0000000..b7f43b1
--- /dev/null
+++ b/crates/yaak-models/src/queries/grpc_requests.rs
@@ -0,0 +1,150 @@
+use super::{conflict_free_name, merge_headers};
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{
+    AnyModel, Folder, FolderIden, GrpcRequest, GrpcRequestIden, HttpRequestHeader,
+    ResolvedHttpRequestSettings, ResolvedSetting,
+};
+use crate::util::UpdateSource;
+use serde_json::Value;
+use std::collections::BTreeMap;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_grpc_request(&self, id: &str) -> Result<GrpcRequest> {
+        self.find_one(GrpcRequestIden::Id, id)
+    }
+
+    pub fn list_grpc_requests(&self, workspace_id: &str) -> Result<Vec<GrpcRequest>> {
+        self.find_many(GrpcRequestIden::WorkspaceId, workspace_id, None)
+    }
+
+    pub fn list_grpc_requests_for_folder_recursive(
+        &self,
+        folder_id: &str,
+    ) -> Result<Vec<GrpcRequest>> {
+        let mut children = Vec::new();
+        for folder in self.find_many::<Folder>(FolderIden::FolderId, folder_id, None)? {
+            children.extend(self.list_grpc_requests_for_folder_recursive(&folder.id)?);
+        }
+        for request in self.find_many::<GrpcRequest>(GrpcRequestIden::FolderId, folder_id, None)? {
+            children.push(request);
+        }
+        Ok(children)
+    }
+
+    pub fn resolve_auth_for_grpc_request(
+        &self,
+        grpc_request: &GrpcRequest,
+    ) -> Result<(Option<String>, BTreeMap<String, Value>, String)> {
+        if let Some(at) = grpc_request.authentication_type.clone() {
+            return Ok((Some(at), grpc_request.authentication.clone(), grpc_request.id.clone()));
+        }
+
+        if let Some(folder_id) = grpc_request.folder_id.clone() {
+            let folder = self.get_folder(&folder_id)?;
+            return self.resolve_auth_for_folder(&folder);
+        }
+
+        let workspace = self.get_workspace(&grpc_request.workspace_id)?;
+        Ok(self.resolve_auth_for_workspace(&workspace))
+    }
+
+    pub fn resolve_metadata_for_grpc_request(
+        &self,
+        grpc_request: &GrpcRequest,
+    ) -> Result<Vec<HttpRequestHeader>> {
+        // Resolved headers should be from furthest to closest ancestor, to override logically.
+        let mut metadata = Vec::new();
+
+        if let Some(folder_id) = grpc_request.folder_id.clone() {
+            let parent_folder = self.get_folder(&folder_id)?;
+            let mut folder_headers = self.resolve_headers_for_folder(&parent_folder)?;
+            metadata.append(&mut folder_headers);
+        } else {
+            let workspace = self.get_workspace(&grpc_request.workspace_id)?;
+            let mut workspace_metadata = self.resolve_headers_for_workspace(&workspace);
+            metadata.append(&mut workspace_metadata);
+        }
+
+        Ok(merge_headers(metadata, grpc_request.metadata.clone()))
+    }
+
+    pub fn resolve_settings_for_grpc_request(
+        &self,
+        grpc_request: &GrpcRequest,
+    ) -> Result<ResolvedHttpRequestSettings> {
+        let parent = if let Some(folder_id) = grpc_request.folder_id.clone() {
+            let folder = self.get_folder(&folder_id)?;
+            self.resolve_settings_for_folder(&folder)?
+        } else {
+            let workspace = self.get_workspace(&grpc_request.workspace_id)?;
+            self.resolve_settings_for_workspace(&workspace)
+        };
+
+        Ok(ResolvedHttpRequestSettings {
+            validate_certificates: if grpc_request.setting_validate_certificates.enabled {
+                ResolvedSetting::from_model(
+                    grpc_request.setting_validate_certificates.value,
+                    AnyModel::GrpcRequest(grpc_request.clone()),
+                )
+            } else {
+                parent.validate_certificates
+            },
+            request_message_size: if grpc_request.setting_request_message_size.enabled {
+                ResolvedSetting::from_model(
+                    grpc_request.setting_request_message_size.value,
+                    AnyModel::GrpcRequest(grpc_request.clone()),
+                )
+            } else {
+                parent.request_message_size
+            },
+            ..parent
+        })
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn delete_grpc_request(
+        &self,
+        m: &GrpcRequest,
+        source: &UpdateSource,
+    ) -> Result<GrpcRequest> {
+        self.delete_all_grpc_connections_for_request(m.id.as_str(), source)?;
+        self.delete(m, source)
+    }
+
+    pub fn delete_grpc_request_by_id(
+        &self,
+        id: &str,
+        source: &UpdateSource,
+    ) -> Result<GrpcRequest> {
+        let request = self.get_grpc_request(id)?;
+        self.delete_grpc_request(&request, source)
+    }
+
+    pub fn duplicate_grpc_request(
+        &self,
+        grpc_request: &GrpcRequest,
+        source: &UpdateSource,
+    ) -> Result<GrpcRequest> {
+        let mut request = grpc_request.clone();
+        request.id = "".to_string();
+        request.sort_priority = request.sort_priority + 0.001;
+        let sibling_names = self
+            .list_grpc_requests(&request.workspace_id)?
+            .into_iter()
+            .filter(|m| m.folder_id == request.folder_id)
+            .map(|m| m.name)
+            .collect::<Vec<_>>();
+        request.name = conflict_free_name(&request.name, &sibling_names);
+        self.upsert(&request, source)
+    }
+
+    pub fn upsert_grpc_request(
+        &self,
+        grpc_request: &GrpcRequest,
+        source: &UpdateSource,
+    ) -> Result<GrpcRequest> {
+        self.upsert(grpc_request, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/http_requests.rs b/crates/yaak-models/src/queries/http_requests.rs
new file mode 100644
index 0000000..27a942b
--- /dev/null
+++ b/crates/yaak-models/src/queries/http_requests.rs
@@ -0,0 +1,312 @@
+use super::{conflict_free_name, merge_headers};
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{
+    AnyModel, Folder, FolderIden, HttpRequest, HttpRequestHeader, HttpRequestIden,
+    ResolvedHttpRequestSettings, ResolvedSetting,
+};
+use crate::util::UpdateSource;
+use serde_json::Value;
+use std::collections::BTreeMap;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_http_request(&self, id: &str) -> Result<HttpRequest> {
+        self.find_one(HttpRequestIden::Id, id)
+    }
+
+    pub fn list_http_requests(&self, workspace_id: &str) -> Result<Vec<HttpRequest>> {
+        self.find_many(HttpRequestIden::WorkspaceId, workspace_id, None)
+    }
+
+    pub fn resolve_auth_for_http_request(
+        &self,
+        http_request: &HttpRequest,
+    ) -> Result<(Option<String>, BTreeMap<String, Value>, String)> {
+        if let Some(at) = http_request.authentication_type.clone() {
+            return Ok((Some(at), http_request.authentication.clone(), http_request.id.clone()));
+        }
+
+        if let Some(folder_id) = http_request.folder_id.clone() {
+            let folder = self.get_folder(&folder_id)?;
+            return self.resolve_auth_for_folder(&folder);
+        }
+
+        let workspace = self.get_workspace(&http_request.workspace_id)?;
+        Ok(self.resolve_auth_for_workspace(&workspace))
+    }
+
+    pub fn resolve_headers_for_http_request(
+        &self,
+        http_request: &HttpRequest,
+    ) -> Result<Vec<HttpRequestHeader>> {
+        // Resolved headers should be from furthest to closest ancestor, to override logically.
+        let mut headers = Vec::new();
+
+        if let Some(folder_id) = http_request.folder_id.clone() {
+            let parent_folder = self.get_folder(&folder_id)?;
+            let mut folder_headers = self.resolve_headers_for_folder(&parent_folder)?;
+            headers.append(&mut folder_headers);
+        } else {
+            let workspace = self.get_workspace(&http_request.workspace_id)?;
+            let mut workspace_headers = self.resolve_headers_for_workspace(&workspace);
+            headers.append(&mut workspace_headers);
+        }
+
+        Ok(merge_headers(headers, http_request.headers.clone()))
+    }
+
+    pub fn resolve_settings_for_http_request(
+        &self,
+        http_request: &HttpRequest,
+    ) -> Result<ResolvedHttpRequestSettings> {
+        let parent = if let Some(folder_id) = http_request.folder_id.clone() {
+            let folder = self.get_folder(&folder_id)?;
+            self.resolve_settings_for_folder(&folder)?
+        } else {
+            let workspace = self.get_workspace(&http_request.workspace_id)?;
+            self.resolve_settings_for_workspace(&workspace)
+        };
+
+        Ok(ResolvedHttpRequestSettings {
+            validate_certificates: if http_request.setting_validate_certificates.enabled {
+                ResolvedSetting::from_model(
+                    http_request.setting_validate_certificates.value,
+                    AnyModel::HttpRequest(http_request.clone()),
+                )
+            } else {
+                parent.validate_certificates
+            },
+            follow_redirects: if http_request.setting_follow_redirects.enabled {
+                ResolvedSetting::from_model(
+                    http_request.setting_follow_redirects.value,
+                    AnyModel::HttpRequest(http_request.clone()),
+                )
+            } else {
+                parent.follow_redirects
+            },
+            request_timeout: if http_request.setting_request_timeout.enabled {
+                ResolvedSetting::from_model(
+                    http_request.setting_request_timeout.value,
+                    AnyModel::HttpRequest(http_request.clone()),
+                )
+            } else {
+                parent.request_timeout
+            },
+            request_message_size: parent.request_message_size,
+            send_cookies: if http_request.setting_send_cookies.enabled {
+                ResolvedSetting::from_model(
+                    http_request.setting_send_cookies.value,
+                    AnyModel::HttpRequest(http_request.clone()),
+                )
+            } else {
+                parent.send_cookies
+            },
+            store_cookies: if http_request.setting_store_cookies.enabled {
+                ResolvedSetting::from_model(
+                    http_request.setting_store_cookies.value,
+                    AnyModel::HttpRequest(http_request.clone()),
+                )
+            } else {
+                parent.store_cookies
+            },
+            http_version: if http_request.setting_http_version.enabled {
+                ResolvedSetting::from_model(
+                    http_request.setting_http_version.value,
+                    AnyModel::HttpRequest(http_request.clone()),
+                )
+            } else {
+                parent.http_version
+            },
+        })
+    }
+
+    pub fn list_http_requests_for_folder_recursive(
+        &self,
+        folder_id: &str,
+    ) -> Result<Vec<HttpRequest>> {
+        let mut children = Vec::new();
+        for m in self.find_many::<Folder>(FolderIden::FolderId, folder_id, None)? {
+            children.extend(self.list_http_requests_for_folder_recursive(&m.id)?);
+        }
+        for m in self.find_many::<HttpRequest>(FolderIden::FolderId, folder_id, None)? {
+            children.push(m);
+        }
+        Ok(children)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn delete_http_request(
+        &self,
+        m: &HttpRequest,
+        source: &UpdateSource,
+    ) -> Result<HttpRequest> {
+        self.delete_all_http_responses_for_request(m.id.as_str(), source)?;
+        self.delete(m, source)
+    }
+
+    pub fn delete_http_request_by_id(
+        &self,
+        id: &str,
+        source: &UpdateSource,
+    ) -> Result<HttpRequest> {
+        let http_request = self.get_http_request(id)?;
+        self.delete_http_request(&http_request, source)
+    }
+
+    pub fn duplicate_http_request(
+        &self,
+        http_request: &HttpRequest,
+        source: &UpdateSource,
+    ) -> Result<HttpRequest> {
+        let mut http_request = http_request.clone();
+        http_request.id = "".to_string();
+        http_request.sort_priority = http_request.sort_priority + 0.001;
+        let sibling_names = self
+            .list_http_requests(&http_request.workspace_id)?
+            .into_iter()
+            .filter(|m| m.folder_id == http_request.folder_id)
+            .map(|m| m.name)
+            .collect::<Vec<_>>();
+        http_request.name = conflict_free_name(&http_request.name, &sibling_names);
+        self.upsert(&http_request, source)
+    }
+
+    pub fn upsert_http_request(
+        &self,
+        http_request: &HttpRequest,
+        source: &UpdateSource,
+    ) -> Result<HttpRequest> {
+        self.upsert(http_request, source)
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::init_in_memory;
+    use crate::models::{
+        Folder, HttpRequest, HttpRequestHeader, HttpVersion, InheritedHttpVersionSetting, Workspace,
+    };
+    use crate::util::UpdateSource;
+
+    #[test]
+    fn request_resolution_preserves_duplicate_request_headers() {
+        let (query_manager, _blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        let workspace = query_manager
+            .with_tx(|tx| tx.upsert_workspace(&Workspace::default(), &UpdateSource::Background))
+            .expect("Failed to create workspace");
+        let db = query_manager.connect();
+        let request = HttpRequest {
+            workspace_id: workspace.id,
+            headers: vec![
+                HttpRequestHeader {
+                    name: "Cookie".to_string(),
+                    value: "required=1".to_string(),
+                    ..Default::default()
+                },
+                HttpRequestHeader {
+                    enabled: false,
+                    name: "Cookie".to_string(),
+                    value: "optional=1".to_string(),
+                    ..Default::default()
+                },
+            ],
+            ..Default::default()
+        };
+
+        let resolved = db.resolve_headers_for_http_request(&request).expect("Failed to resolve");
+        let cookies = resolved
+            .iter()
+            .filter(|header| header.name.eq_ignore_ascii_case("cookie"))
+            .collect::<Vec<_>>();
+
+        assert_eq!(cookies.len(), 2);
+        assert_eq!(cookies[0].value, "required=1");
+        assert_eq!(cookies[1].value, "optional=1");
+        assert!(!cookies[1].enabled);
+    }
+
+    #[test]
+    fn http_version_resolves_through_the_inheritance_chain() {
+        let (query_manager, _blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        let source = &UpdateSource::Background;
+
+        let (folder, request) = query_manager
+            .with_tx(|db| {
+                let workspace = db.upsert_workspace(
+                    &Workspace {
+                        name: "Test".to_string(),
+                        setting_http_version: HttpVersion::Http2,
+                        ..Default::default()
+                    },
+                    source,
+                )?;
+                let folder = db.upsert_folder(
+                    &Folder { workspace_id: workspace.id.clone(), ..Default::default() },
+                    source,
+                )?;
+                let request = db.upsert_http_request(
+                    &HttpRequest {
+                        workspace_id: workspace.id.clone(),
+                        folder_id: Some(folder.id.clone()),
+                        ..Default::default()
+                    },
+                    source,
+                )?;
+                Ok::<_, crate::error::Error>((folder, request))
+            })
+            .expect("Failed to seed");
+
+        // No overrides, so the workspace base value applies
+        let resolved = query_manager
+            .connect()
+            .resolve_settings_for_http_request(&request)
+            .expect("Failed to resolve");
+        assert_eq!(resolved.http_version.value, HttpVersion::Http2);
+        assert_eq!(resolved.http_version.source_model, "workspace");
+
+        // A folder override beats the workspace base
+        query_manager
+            .with_tx(|db| {
+                db.upsert_folder(
+                    &Folder {
+                        setting_http_version: InheritedHttpVersionSetting {
+                            enabled: true,
+                            value: HttpVersion::Http1,
+                        },
+                        ..folder
+                    },
+                    source,
+                )
+            })
+            .expect("Failed to update folder");
+        let resolved = query_manager
+            .connect()
+            .resolve_settings_for_http_request(&request)
+            .expect("Failed to resolve");
+        assert_eq!(resolved.http_version.value, HttpVersion::Http1);
+        assert_eq!(resolved.http_version.source_model, "folder");
+
+        // A request override beats them both
+        let request = query_manager
+            .with_tx(|db| {
+                db.upsert_http_request(
+                    &HttpRequest {
+                        setting_http_version: InheritedHttpVersionSetting {
+                            enabled: true,
+                            value: HttpVersion::Auto,
+                        },
+                        ..request
+                    },
+                    source,
+                )
+            })
+            .expect("Failed to update request");
+        let resolved = query_manager
+            .connect()
+            .resolve_settings_for_http_request(&request)
+            .expect("Failed to resolve");
+        assert_eq!(resolved.http_version.value, HttpVersion::Auto);
+        assert_eq!(resolved.http_version.source_model, "http_request");
+    }
+}
diff --git a/crates/yaak-models/src/queries/http_response_events.rs b/crates/yaak-models/src/queries/http_response_events.rs
new file mode 100644
index 0000000..9e5bb8a
--- /dev/null
+++ b/crates/yaak-models/src/queries/http_response_events.rs
@@ -0,0 +1,20 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{HttpResponseEvent, HttpResponseEventIden};
+use crate::util::UpdateSource;
+
+impl<'a> ClientDb<'a> {
+    pub fn list_http_response_events(&self, response_id: &str) -> Result<Vec<HttpResponseEvent>> {
+        self.find_many(HttpResponseEventIden::ResponseId, response_id, None)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn upsert_http_response_event(
+        &self,
+        http_response_event: &HttpResponseEvent,
+        source: &UpdateSource,
+    ) -> Result<HttpResponseEvent> {
+        self.upsert(http_response_event, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/http_responses.rs b/crates/yaak-models/src/queries/http_responses.rs
new file mode 100644
index 0000000..5151d28
--- /dev/null
+++ b/crates/yaak-models/src/queries/http_responses.rs
@@ -0,0 +1,300 @@
+use crate::blob_manager::BlobManager;
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{HttpResponse, HttpResponseIden, HttpResponseState};
+use crate::queries::MAX_HISTORY_ITEMS;
+use crate::util::UpdateSource;
+use log::{debug, error};
+use sea_query::ExprTrait;
+use sea_query::{Expr, Query, SqliteQueryBuilder};
+use sea_query_rusqlite::RusqliteBinder;
+use std::fs;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_http_response(&self, id: &str) -> Result<HttpResponse> {
+        self.find_one(HttpResponseIden::Id, id)
+    }
+
+    pub fn list_http_responses_for_request(
+        &self,
+        request_id: &str,
+        limit: Option<u64>,
+    ) -> Result<Vec<HttpResponse>> {
+        self.find_many(HttpResponseIden::RequestId, request_id, limit)
+    }
+
+    pub fn list_http_responses(
+        &self,
+        workspace_id: &str,
+        limit: Option<u64>,
+    ) -> Result<Vec<HttpResponse>> {
+        self.find_many(HttpResponseIden::WorkspaceId, workspace_id, limit)
+    }
+
+    /// Delete blob-stored response bodies whose owning HTTP response row no
+    /// longer exists. Blob ids are keyed by the response that owns them —
+    /// "{response_id}" for a response body, "{response_id}.request" for the
+    /// request that produced it — so ownership is the id's first segment.
+    ///
+    /// The blob half of [`Self::delete_orphaned_response_bodies`], on its own
+    /// for hosts with no filesystem to hold body files. See `crate::hooks`.
+    ///
+    /// Returns the number of orphaned bodies deleted.
+    pub fn delete_orphaned_response_body_blobs(&self, blobs: &BlobManager) -> Result<usize> {
+        let orphaned = blobs
+            .connect()
+            .list_body_ids()?
+            .into_iter()
+            .filter(|body_id| {
+                let response_id = body_id.split('.').next().unwrap_or_default();
+                self.find_optional::<HttpResponse>(HttpResponseIden::Id, response_id).is_none()
+            })
+            .collect::<Vec<_>>();
+
+        blobs.with_tx(|b| {
+            for body_id in &orphaned {
+                b.delete_chunks(body_id)?;
+            }
+            Ok::<_, crate::error::Error>(())
+        })?;
+
+        Ok(orphaned.len())
+    }
+
+    /// Delete response body data (blob chunks and body files) whose owning HTTP
+    /// response row no longer exists. Cascaded deletes (request, folder,
+    /// workspace) historically never cleaned the blob DB or the responses
+    /// directory, so orphans accumulate; this runs in the background at startup.
+    ///
+    /// Safe against in-flight sends: the response row is created before its
+    /// body file or chunks are written.
+    ///
+    /// Returns the number of orphaned bodies deleted.
+    pub fn delete_orphaned_response_bodies(
+        &self,
+        blobs: &BlobManager,
+        responses_dir: &std::path::Path,
+    ) -> Result<usize> {
+        let mut deleted = self.delete_orphaned_response_body_blobs(blobs)?;
+
+        // Body files are stored as {responses_dir}/{response_id}
+        if let Ok(entries) = fs::read_dir(responses_dir) {
+            for entry in entries.flatten() {
+                let path = entry.path();
+                if !path.is_file() {
+                    continue;
+                }
+                let Some(response_id) = path.file_name().and_then(|n| n.to_str()) else {
+                    continue;
+                };
+                if self.find_optional::<HttpResponse>(HttpResponseIden::Id, response_id).is_some() {
+                    continue;
+                }
+                if fs::remove_file(&path).is_ok() {
+                    deleted += 1;
+                }
+            }
+        }
+
+        Ok(deleted)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    /// Returns the number of responses deleted.
+    pub fn delete_all_http_responses_for_request(
+        &self,
+        request_id: &str,
+        source: &UpdateSource,
+    ) -> Result<usize> {
+        let responses = self.list_http_responses_for_request(request_id, None)?;
+        let count = responses.len();
+        for m in responses {
+            self.delete(&m, source)?;
+        }
+        Ok(count)
+    }
+
+    /// Returns the number of responses deleted.
+    pub fn delete_all_http_responses_for_workspace(
+        &self,
+        workspace_id: &str,
+        source: &UpdateSource,
+    ) -> Result<usize> {
+        let responses =
+            self.find_many::<HttpResponse>(HttpResponseIden::WorkspaceId, workspace_id, None)?;
+        let count = responses.len();
+        for m in responses {
+            self.delete(&m, source)?;
+        }
+        Ok(count)
+    }
+
+    pub fn delete_http_response(
+        &self,
+        http_response: &HttpResponse,
+        source: &UpdateSource,
+        blob_manager: &BlobManager,
+    ) -> Result<HttpResponse> {
+        // Delete the body file if it exists
+        if let Some(p) = http_response.body_path.clone() {
+            if let Err(e) = fs::remove_file(p) {
+                error!("Failed to delete body file: {}", e);
+            };
+        }
+
+        // Delete request body blobs (pattern: {response_id}.request)
+        let body_id = format!("{}.request", http_response.id);
+        if let Err(e) = blob_manager.with_tx(|b| b.delete_chunks(&body_id)) {
+            error!("Failed to delete request body blobs: {}", e);
+        }
+
+        Ok(self.delete(http_response, source)?)
+    }
+
+    pub fn upsert_http_response(
+        &self,
+        http_response: &HttpResponse,
+        source: &UpdateSource,
+        blob_manager: &BlobManager,
+    ) -> Result<HttpResponse> {
+        let responses = self.list_http_responses_for_request(&http_response.request_id, None)?;
+
+        for m in responses.iter().skip(MAX_HISTORY_ITEMS - 1) {
+            debug!("Deleting old HTTP response {}", http_response.id);
+            self.delete_http_response(&m, source, blob_manager)?;
+        }
+
+        self.upsert(http_response, source)
+    }
+
+    pub fn cancel_pending_http_responses(&self) -> Result<()> {
+        let closed = serde_json::to_value(&HttpResponseState::Closed)?;
+        let (sql, params) = Query::update()
+            .table(HttpResponseIden::Table)
+            .values([(HttpResponseIden::State, closed.as_str().into())])
+            .cond_where(Expr::col(HttpResponseIden::State).ne(closed.as_str()))
+            .build_rusqlite(SqliteQueryBuilder);
+        let mut stmt = self.conn().prepare(sql.as_str())?;
+        stmt.execute(&*params.as_params())?;
+        Ok(())
+    }
+
+    pub fn update_http_response_if_id(
+        &self,
+        response: &HttpResponse,
+        source: &UpdateSource,
+    ) -> Result<HttpResponse> {
+        if response.id.is_empty() { Ok(response.clone()) } else { self.upsert(response, source) }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::blob_manager::{BlobManager, BodyChunk};
+    use crate::error::Error;
+    use crate::init_in_memory;
+    use crate::models::{HttpRequest, HttpResponse, Workspace};
+    use crate::query_manager::QueryManager;
+    use crate::util::UpdateSource;
+
+    /// A workspace, a request, and one response that still exists.
+    fn seed_live_response(
+        query_manager: &QueryManager,
+        blob_manager: &BlobManager,
+    ) -> HttpResponse {
+        let source = &UpdateSource::Background;
+        query_manager
+            .with_tx(|db| {
+                let workspace = db.upsert_workspace(
+                    &Workspace { name: "GC Test".to_string(), ..Default::default() },
+                    source,
+                )?;
+                let request = db.upsert_http_request(
+                    &HttpRequest { workspace_id: workspace.id.clone(), ..Default::default() },
+                    source,
+                )?;
+                db.upsert_http_response(
+                    &HttpResponse {
+                        request_id: request.id.clone(),
+                        workspace_id: workspace.id.clone(),
+                        ..Default::default()
+                    },
+                    source,
+                    blob_manager,
+                )
+            })
+            .expect("Failed to seed response")
+    }
+
+    fn insert_bodies(blob_manager: &BlobManager, body_ids: &[&str]) {
+        blob_manager
+            .with_tx(|b| {
+                for id in body_ids {
+                    b.insert_chunk(&BodyChunk::new(*id, 0, b"data".to_vec()))?;
+                }
+                Ok::<_, Error>(())
+            })
+            .expect("Failed to insert chunks");
+    }
+
+    /// What a browser host runs: no filesystem, so bodies exist only as blob
+    /// chunks, under both id shapes the blob DB uses.
+    #[test]
+    fn deletes_orphaned_response_body_blobs() {
+        let (query_manager, blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+
+        let live = seed_live_response(&query_manager, &blob_manager);
+        let live_request_body_id = format!("{}.request", live.id);
+        insert_bodies(
+            &blob_manager,
+            &[
+                &live.id,
+                &live_request_body_id,
+                "rs_gone",
+                "rs_gone.request",
+            ],
+        );
+
+        let deleted = query_manager
+            .connect()
+            .delete_orphaned_response_body_blobs(&blob_manager)
+            .expect("Failed to GC response body blobs");
+        assert_eq!(deleted, 2);
+
+        let blob_ctx = blob_manager.connect();
+        assert!(blob_ctx.body_exists(&live.id).unwrap());
+        assert!(blob_ctx.body_exists(&live_request_body_id).unwrap());
+        assert!(!blob_ctx.body_exists("rs_gone").unwrap());
+        assert!(!blob_ctx.body_exists("rs_gone.request").unwrap());
+    }
+
+    #[test]
+    fn deletes_orphaned_response_bodies() {
+        let (query_manager, blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+
+        let live = seed_live_response(&query_manager, &blob_manager);
+        let live_body_id = format!("{}.request", live.id);
+        insert_bodies(&blob_manager, &[&live_body_id, "rs_gone.request"]);
+
+        let dir = std::env::temp_dir().join(format!("yaak-blob-gc-test-{}", live.id));
+        std::fs::create_dir_all(&dir).unwrap();
+        std::fs::write(dir.join(&live.id), b"live").unwrap();
+        std::fs::write(dir.join("rs_gone"), b"dead").unwrap();
+
+        let deleted = query_manager
+            .connect()
+            .delete_orphaned_response_bodies(&blob_manager, &dir)
+            .expect("Failed to GC response bodies");
+        assert_eq!(deleted, 2);
+
+        // Live data survives, orphans are gone
+        let blob_ctx = blob_manager.connect();
+        assert!(blob_ctx.body_exists(&live_body_id).unwrap());
+        assert!(!blob_ctx.body_exists("rs_gone.request").unwrap());
+        assert!(dir.join(&live.id).exists());
+        assert!(!dir.join("rs_gone").exists());
+
+        std::fs::remove_dir_all(&dir).ok();
+    }
+}
diff --git a/crates/yaak-models/src/queries/import_source_resources.rs b/crates/yaak-models/src/queries/import_source_resources.rs
new file mode 100644
index 0000000..91fa190
--- /dev/null
+++ b/crates/yaak-models/src/queries/import_source_resources.rs
@@ -0,0 +1,96 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{ImportSourceResource, ImportSourceResourceIden};
+use sea_query::ExprTrait;
+use sea_query::Keyword::CurrentTimestamp;
+use sea_query::{Asterisk, Cond, Expr, OnConflict, Query, SqliteQueryBuilder};
+use sea_query_rusqlite::RusqliteBinder;
+
+impl<'a> ClientDb<'a> {
+    pub fn list_import_source_resources(
+        &self,
+        import_source_id: &str,
+    ) -> Result<Vec<ImportSourceResource>> {
+        let (sql, params) = Query::select()
+            .from(ImportSourceResourceIden::Table)
+            .column(Asterisk)
+            .cond_where(Expr::col(ImportSourceResourceIden::ImportSourceId).eq(import_source_id))
+            .build_rusqlite(SqliteQueryBuilder);
+        let mut stmt = self.conn().prepare(sql.as_str())?;
+        let items = stmt.query_map(&*params.as_params(), |row| row.try_into())?;
+        Ok(items.filter_map(|v| v.ok()).collect())
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn upsert_import_source_resource(
+        &self,
+        resource: &ImportSourceResource,
+    ) -> Result<ImportSourceResource> {
+        let (sql, params) = Query::insert()
+            .into_table(ImportSourceResourceIden::Table)
+            .columns([
+                ImportSourceResourceIden::CreatedAt,
+                ImportSourceResourceIden::UpdatedAt,
+                ImportSourceResourceIden::ImportSourceId,
+                ImportSourceResourceIden::SourceKey,
+                ImportSourceResourceIden::ModelType,
+                ImportSourceResourceIden::ModelId,
+                ImportSourceResourceIden::ContentHash,
+            ])
+            .values_panic([
+                CurrentTimestamp.into(),
+                CurrentTimestamp.into(),
+                resource.import_source_id.as_str().into(),
+                resource.source_key.as_str().into(),
+                resource.model_type.as_str().into(),
+                resource.model_id.clone().into(),
+                resource.content_hash.clone().into(),
+            ])
+            .on_conflict(
+                OnConflict::columns([
+                    ImportSourceResourceIden::ImportSourceId,
+                    ImportSourceResourceIden::SourceKey,
+                ])
+                .update_columns([
+                    ImportSourceResourceIden::UpdatedAt,
+                    ImportSourceResourceIden::ModelType,
+                    ImportSourceResourceIden::ModelId,
+                    ImportSourceResourceIden::ContentHash,
+                ])
+                .to_owned(),
+            )
+            .returning_all()
+            .build_rusqlite(SqliteQueryBuilder);
+
+        let mut stmt = self.conn().prepare(sql.as_str())?;
+        let m = stmt.query_row(&*params.as_params(), |row| row.try_into())?;
+        Ok(m)
+    }
+
+    pub fn delete_import_source_resource(
+        &self,
+        import_source_id: &str,
+        source_key: &str,
+    ) -> Result<()> {
+        let (sql, params) = Query::delete()
+            .from_table(ImportSourceResourceIden::Table)
+            .cond_where(
+                Cond::all()
+                    .add(Expr::col(ImportSourceResourceIden::ImportSourceId).eq(import_source_id))
+                    .add(Expr::col(ImportSourceResourceIden::SourceKey).eq(source_key)),
+            )
+            .build_rusqlite(SqliteQueryBuilder);
+        self.conn().execute(sql.as_str(), &*params.as_params())?;
+        Ok(())
+    }
+
+    pub fn delete_import_source_resources(&self, import_source_id: &str) -> Result<()> {
+        let (sql, params) = Query::delete()
+            .from_table(ImportSourceResourceIden::Table)
+            .cond_where(Expr::col(ImportSourceResourceIden::ImportSourceId).eq(import_source_id))
+            .build_rusqlite(SqliteQueryBuilder);
+        self.conn().execute(sql.as_str(), &*params.as_params())?;
+        Ok(())
+    }
+}
diff --git a/crates/yaak-models/src/queries/import_sources.rs b/crates/yaak-models/src/queries/import_sources.rs
new file mode 100644
index 0000000..342a7cc
--- /dev/null
+++ b/crates/yaak-models/src/queries/import_sources.rs
@@ -0,0 +1,47 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{ImportSource, ImportSourceIden};
+use crate::util::UpdateSource;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_import_source(&self, id: &str) -> Result<ImportSource> {
+        self.find_one(ImportSourceIden::Id, id)
+    }
+
+    pub fn list_import_sources(&self, workspace_id: &str) -> Result<Vec<ImportSource>> {
+        self.find_many(ImportSourceIden::WorkspaceId, workspace_id, None)
+    }
+
+    pub fn list_import_sources_by_origin(&self, origin: &str) -> Result<Vec<ImportSource>> {
+        self.find_many(ImportSourceIden::Origin, origin, None)
+    }
+
+    pub fn find_import_source(
+        &self,
+        workspace_id: &str,
+        importer: &str,
+        origin: &str,
+    ) -> Result<Option<ImportSource>> {
+        let sources = self.list_import_sources(workspace_id)?;
+        Ok(sources.into_iter().find(|s| s.importer == importer && s.origin == origin))
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn upsert_import_source(
+        &self,
+        import_source: &ImportSource,
+        source: &UpdateSource,
+    ) -> Result<ImportSource> {
+        self.upsert(import_source, source)
+    }
+
+    pub fn delete_import_source(
+        &self,
+        import_source: &ImportSource,
+        source: &UpdateSource,
+    ) -> Result<ImportSource> {
+        self.delete_import_source_resources(&import_source.id)?;
+        self.delete(import_source, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/key_values.rs b/crates/yaak-models/src/queries/key_values.rs
new file mode 100644
index 0000000..ff5ad18
--- /dev/null
+++ b/crates/yaak-models/src/queries/key_values.rs
@@ -0,0 +1,179 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{KeyValue, KeyValueIden, UpsertModelInfo};
+use crate::util::UpdateSource;
+use chrono::NaiveDateTime;
+use log::error;
+use sea_query::ExprTrait;
+use sea_query::{Asterisk, Cond, Expr, Query, SqliteQueryBuilder};
+use sea_query_rusqlite::RusqliteBinder;
+
+impl<'a> ClientDb<'a> {
+    pub fn list_key_values(&self) -> Result<Vec<KeyValue>> {
+        let (sql, params) = Query::select()
+            .from(KeyValueIden::Table)
+            .column(Asterisk)
+            // Temporary clause to prevent bug when reverting to the previous version, before the
+            // ID column was added. A previous version will not know about ID and will create
+            // key/value entries that don't have one. This clause ensures they are not queried
+            // TODO: Add migration to delete key/values with NULL IDs later on, then remove this
+            .cond_where(Expr::col(KeyValueIden::Id).is_not_null())
+            .build_rusqlite(SqliteQueryBuilder);
+        let mut stmt = self.conn().prepare(sql.as_str())?;
+        let items = stmt.query_map(&*params.as_params(), KeyValue::from_row)?;
+        Ok(items.map(|v| v.unwrap()).collect())
+    }
+
+    pub fn get_key_value_str(&self, namespace: &str, key: &str, default: &str) -> String {
+        match self.get_key_value_raw(namespace, key) {
+            None => default.to_string(),
+            Some(v) => {
+                let result = serde_json::from_str(&v.value);
+                match result {
+                    Ok(v) => v,
+                    Err(e) => {
+                        error!("Failed to parse string key value: {}", e);
+                        default.to_string()
+                    }
+                }
+            }
+        }
+    }
+
+    pub fn get_key_value_dte(
+        &self,
+        namespace: &str,
+        key: &str,
+        default: NaiveDateTime,
+    ) -> NaiveDateTime {
+        match self.get_key_value_raw(namespace, key) {
+            None => default,
+            Some(v) => {
+                let result = serde_json::from_str(&v.value);
+                match result {
+                    Ok(v) => v,
+                    Err(e) => {
+                        error!("Failed to parse date key value: {}", e);
+                        default
+                    }
+                }
+            }
+        }
+    }
+
+    pub fn get_key_value_int(&self, namespace: &str, key: &str, default: i32) -> i32 {
+        match self.get_key_value_raw(namespace, key) {
+            None => default.clone(),
+            Some(v) => {
+                let result = serde_json::from_str(&v.value);
+                match result {
+                    Ok(v) => v,
+                    Err(e) => {
+                        error!("Failed to parse int key value: {}", e);
+                        default.clone()
+                    }
+                }
+            }
+        }
+    }
+
+    pub fn get_key_value_raw(&self, namespace: &str, key: &str) -> Option<KeyValue> {
+        let (sql, params) = Query::select()
+            .from(KeyValueIden::Table)
+            .column(Asterisk)
+            .cond_where(
+                Cond::all()
+                    .add(Expr::col(KeyValueIden::Namespace).eq(namespace))
+                    .add(Expr::col(KeyValueIden::Key).eq(key)),
+            )
+            .build_rusqlite(SqliteQueryBuilder);
+        self.conn().resolve().query_row(sql.as_str(), &*params.as_params(), KeyValue::from_row).ok()
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn set_key_value_dte(
+        &self,
+        namespace: &str,
+        key: &str,
+        value: NaiveDateTime,
+        source: &UpdateSource,
+    ) -> (KeyValue, bool) {
+        let encoded = serde_json::to_string(&value).unwrap();
+        self.set_key_value_raw(namespace, key, &encoded, source)
+    }
+
+    pub fn set_key_value_str(
+        &self,
+        namespace: &str,
+        key: &str,
+        value: &str,
+        source: &UpdateSource,
+    ) -> (KeyValue, bool) {
+        let encoded = serde_json::to_string(&value).unwrap();
+        self.set_key_value_raw(namespace, key, &encoded, source)
+    }
+
+    pub fn set_key_value_int(
+        &self,
+        namespace: &str,
+        key: &str,
+        value: i32,
+        source: &UpdateSource,
+    ) -> (KeyValue, bool) {
+        let encoded = serde_json::to_string(&value).unwrap();
+        self.set_key_value_raw(namespace, key, &encoded, source)
+    }
+
+    pub fn set_key_value_raw(
+        &self,
+        namespace: &str,
+        key: &str,
+        value: &str,
+        source: &UpdateSource,
+    ) -> (KeyValue, bool) {
+        match self.get_key_value_raw(namespace, key) {
+            None => (
+                self.upsert_key_value(
+                    &KeyValue {
+                        namespace: namespace.to_string(),
+                        key: key.to_string(),
+                        value: value.to_string(),
+                        ..Default::default()
+                    },
+                    source,
+                )
+                .expect("Failed to create key value"),
+                true,
+            ),
+            Some(kv) => (
+                self.upsert_key_value(&KeyValue { value: value.to_string(), ..kv }, source)
+                    .expect("Failed to update key value"),
+                false,
+            ),
+        }
+    }
+
+    pub fn upsert_key_value(
+        &self,
+        key_value: &KeyValue,
+        source: &UpdateSource,
+    ) -> Result<KeyValue> {
+        self.upsert(key_value, source)
+    }
+
+    pub fn delete_key_value(
+        &self,
+        namespace: &str,
+        key: &str,
+        source: &UpdateSource,
+    ) -> Result<()> {
+        let kv = match self.get_key_value_raw(namespace, key) {
+            None => return Ok(()),
+            Some(m) => m,
+        };
+
+        self.delete(&kv, source)?;
+        Ok(())
+    }
+}
diff --git a/crates/yaak-models/src/queries/mod.rs b/crates/yaak-models/src/queries/mod.rs
new file mode 100644
index 0000000..65e4039
--- /dev/null
+++ b/crates/yaak-models/src/queries/mod.rs
@@ -0,0 +1,88 @@
+pub mod any_request;
+mod batch;
+mod cookie_jars;
+mod duplicate_name;
+mod environments;
+mod folders;
+mod graphql_introspections;
+mod grpc_connections;
+mod grpc_events;
+mod grpc_requests;
+mod http_requests;
+mod http_response_events;
+mod http_responses;
+mod import_source_resources;
+mod import_sources;
+mod key_values;
+mod model_changes;
+mod plugin_key_values;
+mod plugins;
+mod settings;
+mod sync_states;
+mod websocket_connections;
+mod websocket_events;
+mod websocket_requests;
+mod workspace_metas;
+pub mod workspaces;
+pub(crate) use duplicate_name::conflict_free_name;
+pub use model_changes::PersistedModelChange;
+
+const MAX_HISTORY_ITEMS: usize = 20;
+
+use crate::models::HttpRequestHeader;
+use std::collections::HashSet;
+
+/// Merge a more-specific header layer over its parent. Names in the child replace
+/// inherited values case-insensitively, while duplicates declared together in
+/// either layer remain independent entries.
+pub(crate) fn merge_headers(
+    mut parent: Vec<HttpRequestHeader>,
+    child: Vec<HttpRequestHeader>,
+) -> Vec<HttpRequestHeader> {
+    let child_names = child.iter().map(|header| header.name.to_lowercase()).collect::<HashSet<_>>();
+    parent.retain(|header| !child_names.contains(&header.name.to_lowercase()));
+    parent.extend(child);
+    parent
+}
+
+#[cfg(test)]
+mod tests {
+    use super::merge_headers;
+    use crate::models::HttpRequestHeader;
+
+    fn header(name: &str, value: &str) -> HttpRequestHeader {
+        HttpRequestHeader { name: name.to_string(), value: value.to_string(), ..Default::default() }
+    }
+
+    #[test]
+    fn preserves_duplicate_headers_declared_in_one_layer() {
+        let merged = merge_headers(
+            vec![header("Cookie", "inherited=1")],
+            vec![
+                header("Cookie", "required=1"),
+                header("cookie", "optional=1"),
+            ],
+        );
+
+        assert_eq!(
+            merged.iter().map(|header| header.value.as_str()).collect::<Vec<_>>(),
+            vec!["required=1", "optional=1"],
+        );
+    }
+
+    #[test]
+    fn child_names_override_parent_names_without_affecting_other_headers() {
+        let merged = merge_headers(
+            vec![header("Accept", "*/*"), header("X-Parent", "kept")],
+            vec![header("accept", "application/json")],
+        );
+
+        assert_eq!(
+            merged
+                .iter()
+                .map(|header| (header.name.as_str(), header.value.as_str()))
+                .collect::<Vec<_>>(),
+            vec![("X-Parent", "kept"), ("accept", "application/json")],
+        );
+    }
+}
diff --git a/crates/yaak-models/src/queries/model_changes.rs b/crates/yaak-models/src/queries/model_changes.rs
new file mode 100644
index 0000000..57e62fd
--- /dev/null
+++ b/crates/yaak-models/src/queries/model_changes.rs
@@ -0,0 +1,330 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::util::ModelPayload;
+use rusqlite::params;
+use rusqlite::types::Type;
+
+#[derive(Debug, Clone)]
+pub struct PersistedModelChange {
+    pub id: i64,
+    pub created_at: String,
+    pub payload: ModelPayload,
+}
+
+impl<'a> ClientDb<'a> {
+    pub fn list_model_changes_after(
+        &self,
+        after_id: i64,
+        limit: usize,
+    ) -> Result<Vec<PersistedModelChange>> {
+        let mut stmt = self.conn().prepare(
+            r#"
+                SELECT id, created_at, payload
+                FROM model_changes
+                WHERE id > ?1
+                ORDER BY id ASC
+                LIMIT ?2
+            "#,
+        )?;
+
+        let items = stmt.query_map(params![after_id, limit as i64], |row| {
+            let id: i64 = row.get(0)?;
+            let created_at: String = row.get(1)?;
+            let payload_raw: String = row.get(2)?;
+            let payload = serde_json::from_str::<ModelPayload>(&payload_raw).map_err(|e| {
+                rusqlite::Error::FromSqlConversionFailure(2, Type::Text, Box::new(e))
+            })?;
+            Ok(PersistedModelChange { id, created_at, payload })
+        })?;
+
+        Ok(items.collect::<std::result::Result<Vec<_>, rusqlite::Error>>()?)
+    }
+
+    pub fn list_model_changes_since(
+        &self,
+        since_created_at: &str,
+        since_id: i64,
+        limit: usize,
+    ) -> Result<Vec<PersistedModelChange>> {
+        let mut stmt = self.conn().prepare(
+            r#"
+                SELECT id, created_at, payload
+                FROM model_changes
+                WHERE created_at > ?1
+                   OR (created_at = ?1 AND id > ?2)
+                ORDER BY created_at ASC, id ASC
+                LIMIT ?3
+            "#,
+        )?;
+
+        let items = stmt.query_map(params![since_created_at, since_id, limit as i64], |row| {
+            let id: i64 = row.get(0)?;
+            let created_at: String = row.get(1)?;
+            let payload_raw: String = row.get(2)?;
+            let payload = serde_json::from_str::<ModelPayload>(&payload_raw).map_err(|e| {
+                rusqlite::Error::FromSqlConversionFailure(2, Type::Text, Box::new(e))
+            })?;
+            Ok(PersistedModelChange { id, created_at, payload })
+        })?;
+
+        Ok(items.collect::<std::result::Result<Vec<_>, rusqlite::Error>>()?)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn prune_model_changes_older_than_days(&self, days: i64) -> Result<usize> {
+        let offset = format!("-{days} days");
+        Ok(self.conn().resolve().execute(
+            r#"
+                DELETE FROM model_changes
+                WHERE created_at < STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW', ?1)
+            "#,
+            params![offset],
+        )?)
+    }
+
+    pub fn prune_model_changes_older_than_hours(&self, hours: i64) -> Result<usize> {
+        let offset = format!("-{hours} hours");
+        Ok(self.conn().resolve().execute(
+            r#"
+                DELETE FROM model_changes
+                WHERE created_at < STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW', ?1)
+            "#,
+            params![offset],
+        )?)
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::init_in_memory;
+    use crate::models::Workspace;
+    use crate::util::{ModelChangeEvent, UpdateSource};
+    use serde_json::json;
+
+    /// Startup bootstraps rows of its own; these tests count only their own.
+    fn clear_changes(query_manager: &crate::query_manager::QueryManager) {
+        query_manager
+            .with_tx(|db| {
+                db.conn().resolve().execute("DELETE FROM model_changes", [])?;
+                Ok::<_, crate::error::Error>(())
+            })
+            .expect("Failed to clear model changes");
+    }
+
+    #[test]
+    fn records_model_changes_for_upsert_and_delete() {
+        let (query_manager, blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        clear_changes(&query_manager);
+
+        let workspace = query_manager
+            .with_tx(|db| {
+                db.upsert_workspace(
+                    &Workspace {
+                        name: "Changes Test".to_string(),
+                        setting_follow_redirects: true,
+                        setting_validate_certificates: true,
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                )
+            })
+            .expect("Failed to upsert workspace");
+
+        let db = query_manager.connect();
+        let created_changes = db.list_model_changes_after(0, 10).expect("Failed to list changes");
+        assert_eq!(created_changes.len(), 1);
+        assert_eq!(created_changes[0].payload.model.id(), workspace.id);
+        assert_eq!(created_changes[0].payload.model.model(), "workspace");
+        assert!(matches!(
+            created_changes[0].payload.change,
+            ModelChangeEvent::Upsert { created: true }
+        ));
+        assert!(matches!(created_changes[0].payload.update_source, UpdateSource::Sync));
+
+        drop(db);
+        query_manager
+            .with_tx(|db| {
+                db.delete_workspace_by_id(&workspace.id, &UpdateSource::Sync, &blob_manager)
+            })
+            .expect("Failed to delete workspace");
+
+        let db = query_manager.connect();
+        let all_changes = db.list_model_changes_after(0, 10).expect("Failed to list changes");
+        assert_eq!(all_changes.len(), 2);
+        assert!(matches!(all_changes[1].payload.change, ModelChangeEvent::Delete));
+        assert!(all_changes[1].id > all_changes[0].id);
+
+        let changes_after_first = db
+            .list_model_changes_after(all_changes[0].id, 10)
+            .expect("Failed to list changes after cursor");
+        assert_eq!(changes_after_first.len(), 1);
+        assert!(matches!(changes_after_first[0].payload.change, ModelChangeEvent::Delete));
+    }
+
+    #[test]
+    fn prunes_old_model_changes() {
+        let (query_manager, _blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        clear_changes(&query_manager);
+
+        query_manager
+            .with_tx(|db| {
+                db.upsert_workspace(
+                    &Workspace {
+                        name: "Prune Test".to_string(),
+                        setting_follow_redirects: true,
+                        setting_validate_certificates: true,
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                )
+            })
+            .expect("Failed to upsert workspace");
+
+        let db = query_manager.connect();
+        let changes = db.list_model_changes_after(0, 10).expect("Failed to list changes");
+        assert_eq!(changes.len(), 1);
+
+        db.conn()
+            .resolve()
+            .execute(
+                "UPDATE model_changes SET created_at = '2000-01-01 00:00:00.000' WHERE id = ?1",
+                params![changes[0].id],
+            )
+            .expect("Failed to age model change row");
+
+        drop(db);
+        let pruned = query_manager
+            .with_tx(|db| db.prune_model_changes_older_than_days(30))
+            .expect("Failed to prune model changes");
+        assert_eq!(pruned, 1);
+        assert!(
+            query_manager
+                .connect()
+                .list_model_changes_after(0, 10)
+                .expect("Failed to list changes")
+                .is_empty()
+        );
+    }
+
+    #[test]
+    fn list_model_changes_since_uses_timestamp_with_id_tiebreaker() {
+        let (query_manager, blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        clear_changes(&query_manager);
+
+        query_manager
+            .with_tx(|db| {
+                let workspace = db.upsert_workspace(
+                    &Workspace {
+                        name: "Cursor Test".to_string(),
+                        setting_follow_redirects: true,
+                        setting_validate_certificates: true,
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                )?;
+                db.delete_workspace_by_id(&workspace.id, &UpdateSource::Sync, &blob_manager)
+            })
+            .expect("Failed to seed changes");
+
+        let db = query_manager.connect();
+        let all = db.list_model_changes_after(0, 10).expect("Failed to list changes");
+        assert_eq!(all.len(), 2);
+
+        let fixed_ts = "2026-02-16 00:00:00.000";
+        db.conn()
+            .resolve()
+            .execute("UPDATE model_changes SET created_at = ?1", params![fixed_ts])
+            .expect("Failed to normalize timestamps");
+
+        let after_first =
+            db.list_model_changes_since(fixed_ts, all[0].id, 10).expect("Failed to query cursor");
+        assert_eq!(after_first.len(), 1);
+        assert_eq!(after_first[0].id, all[1].id);
+    }
+
+    #[test]
+    fn prunes_old_model_changes_by_hours() {
+        let (query_manager, _blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        clear_changes(&query_manager);
+
+        query_manager
+            .with_tx(|db| {
+                db.upsert_workspace(
+                    &Workspace {
+                        name: "Prune Hour Test".to_string(),
+                        setting_follow_redirects: true,
+                        setting_validate_certificates: true,
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                )
+            })
+            .expect("Failed to upsert workspace");
+
+        let db = query_manager.connect();
+        let changes = db.list_model_changes_after(0, 10).expect("Failed to list changes");
+        assert_eq!(changes.len(), 1);
+
+        db.conn()
+            .resolve()
+            .execute(
+                "UPDATE model_changes SET created_at = STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW', '-2 hours') WHERE id = ?1",
+                params![changes[0].id],
+            )
+            .expect("Failed to age model change row");
+
+        drop(db);
+        let pruned = query_manager
+            .with_tx(|db| db.prune_model_changes_older_than_hours(1))
+            .expect("Failed to prune model changes");
+        assert_eq!(pruned, 1);
+    }
+
+    #[test]
+    fn list_model_changes_deserializes_http_response_event_payload() {
+        let (query_manager, _blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        clear_changes(&query_manager);
+        let db = query_manager.connect();
+
+        let payload = json!({
+            "model": {
+                "model": "http_response_event",
+                "id": "re_test",
+                "createdAt": "2026-02-16T21:01:34.809162",
+                "updatedAt": "2026-02-16T21:01:34.809163",
+                "workspaceId": "wk_test",
+                "responseId": "rs_test",
+                "event": {
+                    "type": "info",
+                    "message": "hello"
+                }
+            },
+            "updateSource": { "type": "sync" },
+            "change": { "type": "upsert", "created": false }
+        });
+
+        db.conn()
+            .resolve()
+            .execute(
+                r#"
+                INSERT INTO model_changes (model, model_id, change, update_source, payload)
+                VALUES (?1, ?2, ?3, ?4, ?5)
+                "#,
+                params![
+                    "http_response_event",
+                    "re_test",
+                    r#"{"type":"upsert","created":false}"#,
+                    r#"{"type":"sync"}"#,
+                    payload.to_string(),
+                ],
+            )
+            .expect("Failed to insert model change row");
+
+        let changes = db.list_model_changes_after(0, 10).expect("Failed to list changes");
+        assert_eq!(changes.len(), 1);
+        assert_eq!(changes[0].payload.model.model(), "http_response_event");
+        assert_eq!(changes[0].payload.model.id(), "re_test");
+    }
+}
diff --git a/crates/yaak-models/src/queries/plugin_key_values.rs b/crates/yaak-models/src/queries/plugin_key_values.rs
new file mode 100644
index 0000000..dabc8bb
--- /dev/null
+++ b/crates/yaak-models/src/queries/plugin_key_values.rs
@@ -0,0 +1,85 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{PluginKeyValue, PluginKeyValueIden};
+use sea_query::ExprTrait;
+use sea_query::Keyword::CurrentTimestamp;
+use sea_query::{Asterisk, Cond, Expr, OnConflict, Query, SqliteQueryBuilder};
+use sea_query_rusqlite::RusqliteBinder;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_plugin_key_value(&self, plugin_name: &str, key: &str) -> Option<PluginKeyValue> {
+        let (sql, params) = Query::select()
+            .from(PluginKeyValueIden::Table)
+            .column(Asterisk)
+            .cond_where(
+                Cond::all()
+                    .add(Expr::col(PluginKeyValueIden::PluginName).eq(plugin_name))
+                    .add(Expr::col(PluginKeyValueIden::Key).eq(key)),
+            )
+            .build_rusqlite(SqliteQueryBuilder);
+        self.conn()
+            .resolve()
+            .query_row(sql.as_str(), &*params.as_params(), |row| row.try_into())
+            .ok()
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn set_plugin_key_value(
+        &self,
+        plugin_name: &str,
+        key: &str,
+        value: &str,
+    ) -> (PluginKeyValue, bool) {
+        let existing = self.get_plugin_key_value(plugin_name, key);
+
+        let (sql, params) = Query::insert()
+            .into_table(PluginKeyValueIden::Table)
+            .columns([
+                PluginKeyValueIden::CreatedAt,
+                PluginKeyValueIden::UpdatedAt,
+                PluginKeyValueIden::PluginName,
+                PluginKeyValueIden::Key,
+                PluginKeyValueIden::Value,
+            ])
+            .values_panic([
+                CurrentTimestamp.into(),
+                CurrentTimestamp.into(),
+                plugin_name.into(),
+                key.into(),
+                value.into(),
+            ])
+            .on_conflict(
+                OnConflict::new()
+                    .update_columns([PluginKeyValueIden::UpdatedAt, PluginKeyValueIden::Value])
+                    .to_owned(),
+            )
+            .returning_all()
+            .build_rusqlite(SqliteQueryBuilder);
+
+        let mut stmt =
+            self.conn().prepare(sql.as_str()).expect("Failed to prepare PluginKeyValue upsert");
+        let m: PluginKeyValue = stmt
+            .query_row(&*params.as_params(), |row| row.try_into())
+            .expect("Failed to upsert KeyValue");
+
+        (m, existing.is_none())
+    }
+
+    pub fn delete_plugin_key_value(&self, namespace: &str, key: &str) -> Result<bool> {
+        if let None = self.get_plugin_key_value(namespace, key) {
+            return Ok(false);
+        };
+
+        let (sql, params) = Query::delete()
+            .from_table(PluginKeyValueIden::Table)
+            .cond_where(
+                Cond::all()
+                    .add(Expr::col(PluginKeyValueIden::PluginName).eq(namespace))
+                    .add(Expr::col(PluginKeyValueIden::Key).eq(key)),
+            )
+            .build_rusqlite(SqliteQueryBuilder);
+        self.conn().execute(sql.as_str(), &*params.as_params())?;
+        Ok(true)
+    }
+}
diff --git a/crates/yaak-models/src/queries/plugins.rs b/crates/yaak-models/src/queries/plugins.rs
new file mode 100644
index 0000000..007c921
--- /dev/null
+++ b/crates/yaak-models/src/queries/plugins.rs
@@ -0,0 +1,37 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{Plugin, PluginIden};
+use crate::util::UpdateSource;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_plugin(&self, id: &str) -> Result<Plugin> {
+        self.find_one(PluginIden::Id, id)
+    }
+
+    pub fn get_plugin_by_directory(&self, directory: &str) -> Option<Plugin> {
+        self.find_optional(PluginIden::Directory, directory)
+    }
+
+    pub fn list_plugins(&self) -> Result<Vec<Plugin>> {
+        self.find_all()
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn delete_plugin(&self, plugin: &Plugin, source: &UpdateSource) -> Result<Plugin> {
+        self.delete(plugin, source)
+    }
+
+    pub fn delete_plugin_by_id(&self, id: &str, source: &UpdateSource) -> Result<Plugin> {
+        let plugin = self.get_plugin(id)?;
+        self.delete_plugin(&plugin, source)
+    }
+
+    pub fn upsert_plugin(&self, plugin: &Plugin, source: &UpdateSource) -> Result<Plugin> {
+        let mut plugin_to_upsert = plugin.clone();
+        if let Some(existing) = self.get_plugin_by_directory(&plugin.directory) {
+            plugin_to_upsert.id = existing.id;
+        }
+        self.upsert(&plugin_to_upsert, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/settings.rs b/crates/yaak-models/src/queries/settings.rs
new file mode 100644
index 0000000..12fd175
--- /dev/null
+++ b/crates/yaak-models/src/queries/settings.rs
@@ -0,0 +1,61 @@
+use std::collections::HashMap;
+
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{EditorKeymap, Settings, SettingsIden};
+use crate::util::UpdateSource;
+
+impl<'a> ClientDb<'a> {
+    /// The settings row, or the defaults if it has not been written yet.
+    /// [`WriteDb::ensure_settings`] persists it at startup.
+    pub fn get_settings(&self) -> Settings {
+        self.find_optional::<Settings>(SettingsIden::Id, "default").unwrap_or_else(default_settings)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    /// Create the settings row if it does not exist.
+    pub fn ensure_settings(&self) -> Result<Settings> {
+        if let Some(s) = self.find_optional::<Settings>(SettingsIden::Id, "default") {
+            return Ok(s);
+        }
+        self.upsert(&default_settings(), &UpdateSource::Background)
+    }
+
+    pub fn upsert_settings(&self, settings: &Settings, source: &UpdateSource) -> Result<Settings> {
+        self.upsert(settings, source)
+    }
+}
+
+fn default_settings() -> Settings {
+    Settings {
+        model: "settings".to_string(),
+        id: "default".to_string(),
+        created_at: Default::default(),
+        updated_at: Default::default(),
+
+        appearance: "system".to_string(),
+        client_certificates: Vec::new(),
+        editor_font_size: 12,
+        editor_font: None,
+        editor_keymap: EditorKeymap::Default,
+        editor_soft_wrap: true,
+        interface_font_size: 14,
+        interface_scale: 1.0,
+        interface_font: None,
+        hide_window_controls: false,
+        use_native_titlebar: false,
+        open_workspace_new_window: None,
+        proxy: None,
+        theme_dark: "yaak-dark".to_string(),
+        theme_light: "yaak-light".to_string(),
+        update_channel: "stable".to_string(),
+        autoupdate: true,
+        colored_methods: false,
+        hide_license_badge: false,
+        prompt_feedback: true,
+        auto_download_updates: true,
+        check_notifications: true,
+        hotkeys: HashMap::new(),
+    }
+}
diff --git a/crates/yaak-models/src/queries/sync_states.rs b/crates/yaak-models/src/queries/sync_states.rs
new file mode 100644
index 0000000..3a99901
--- /dev/null
+++ b/crates/yaak-models/src/queries/sync_states.rs
@@ -0,0 +1,48 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{SyncState, SyncStateIden, UpsertModelInfo};
+use crate::util::UpdateSource;
+use sea_query::ExprTrait;
+use sea_query::{Asterisk, Cond, Expr, Query, SqliteQueryBuilder};
+use sea_query_rusqlite::RusqliteBinder;
+use std::path::Path;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_sync_state(&self, id: &str) -> Result<SyncState> {
+        self.find_one(SyncStateIden::Id, id)
+    }
+
+    pub fn list_sync_states_for_workspace(
+        &self,
+        workspace_id: &str,
+        sync_dir: &Path,
+    ) -> Result<Vec<SyncState>> {
+        let (sql, params) = Query::select()
+            .from(SyncStateIden::Table)
+            .column(Asterisk)
+            .cond_where(
+                Cond::all()
+                    .add(Expr::col(SyncStateIden::WorkspaceId).eq(workspace_id))
+                    .add(Expr::col(SyncStateIden::SyncDir).eq(sync_dir.to_string_lossy())),
+            )
+            .build_rusqlite(SqliteQueryBuilder);
+        let mut stmt = self.conn().prepare(sql.as_str())?;
+        let items = stmt.query_map(&*params.as_params(), SyncState::from_row)?;
+        Ok(items.map(|v| v.unwrap()).collect())
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn upsert_sync_state(&self, sync_state: &SyncState) -> Result<SyncState> {
+        self.upsert(sync_state, &UpdateSource::Sync)
+    }
+
+    pub fn delete_sync_state(&self, sync_state: &SyncState) -> Result<SyncState> {
+        self.delete(sync_state, &UpdateSource::Sync)
+    }
+
+    pub fn delete_sync_state_by_id(&self, id: &str) -> Result<SyncState> {
+        let sync_state = self.get_sync_state(id)?;
+        self.delete_sync_state(&sync_state)
+    }
+}
diff --git a/crates/yaak-models/src/queries/websocket_connections.rs b/crates/yaak-models/src/queries/websocket_connections.rs
new file mode 100644
index 0000000..87bda32
--- /dev/null
+++ b/crates/yaak-models/src/queries/websocket_connections.rs
@@ -0,0 +1,100 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{WebsocketConnection, WebsocketConnectionIden, WebsocketConnectionState};
+use crate::queries::MAX_HISTORY_ITEMS;
+use crate::util::UpdateSource;
+use log::debug;
+use sea_query::ExprTrait;
+use sea_query::{Expr, Query, SqliteQueryBuilder};
+use sea_query_rusqlite::RusqliteBinder;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_websocket_connection(&self, id: &str) -> Result<WebsocketConnection> {
+        self.find_one(WebsocketConnectionIden::Id, id)
+    }
+
+    pub fn list_websocket_connections(
+        &self,
+        workspace_id: &str,
+    ) -> Result<Vec<WebsocketConnection>> {
+        self.find_many(WebsocketConnectionIden::WorkspaceId, workspace_id, None)
+    }
+
+    pub fn list_websocket_connections_for_request(
+        &self,
+        request_id: &str,
+    ) -> Result<Vec<WebsocketConnection>> {
+        self.find_many(WebsocketConnectionIden::RequestId, request_id, None)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn delete_all_websocket_connections_for_request(
+        &self,
+        request_id: &str,
+        source: &UpdateSource,
+    ) -> Result<()> {
+        let responses = self.list_websocket_connections_for_request(request_id)?;
+        for m in responses {
+            self.delete(&m, source)?;
+        }
+        Ok(())
+    }
+
+    pub fn delete_all_websocket_connections_for_workspace(
+        &self,
+        workspace_id: &str,
+        source: &UpdateSource,
+    ) -> Result<()> {
+        let responses = self.list_websocket_connections(workspace_id)?;
+        for m in responses {
+            self.delete(&m, source)?;
+        }
+        Ok(())
+    }
+
+    pub fn delete_websocket_connection(
+        &self,
+        websocket_connection: &WebsocketConnection,
+        source: &UpdateSource,
+    ) -> Result<WebsocketConnection> {
+        self.delete(websocket_connection, source)
+    }
+
+    pub fn delete_websocket_connection_by_id(
+        &self,
+        id: &str,
+        source: &UpdateSource,
+    ) -> Result<WebsocketConnection> {
+        let websocket_connection = self.get_websocket_connection(id)?;
+        self.delete_websocket_connection(&websocket_connection, source)
+    }
+
+    pub fn upsert_websocket_connection(
+        &self,
+        websocket_connection: &WebsocketConnection,
+        source: &UpdateSource,
+    ) -> Result<WebsocketConnection> {
+        let connections =
+            self.list_websocket_connections_for_request(&websocket_connection.request_id)?;
+
+        for m in connections.iter().skip(MAX_HISTORY_ITEMS - 1) {
+            debug!("Deleting old websocket connection {}", websocket_connection.id);
+            self.delete_websocket_connection(&m, source)?;
+        }
+
+        self.upsert(websocket_connection, source)
+    }
+
+    pub fn cancel_pending_websocket_connections(&self) -> Result<()> {
+        let closed = serde_json::to_value(&WebsocketConnectionState::Closed)?;
+        let (sql, params) = Query::update()
+            .table(WebsocketConnectionIden::Table)
+            .values([(WebsocketConnectionIden::State, closed.as_str().into())])
+            .cond_where(Expr::col(WebsocketConnectionIden::State).ne(closed.as_str()))
+            .build_rusqlite(SqliteQueryBuilder);
+        let mut stmt = self.conn().prepare(sql.as_str())?;
+        stmt.execute(&*params.as_params())?;
+        Ok(())
+    }
+}
diff --git a/crates/yaak-models/src/queries/websocket_events.rs b/crates/yaak-models/src/queries/websocket_events.rs
new file mode 100644
index 0000000..d177999
--- /dev/null
+++ b/crates/yaak-models/src/queries/websocket_events.rs
@@ -0,0 +1,24 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{WebsocketEvent, WebsocketEventIden};
+use crate::util::UpdateSource;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_websocket_event(&self, id: &str) -> Result<WebsocketEvent> {
+        self.find_one(WebsocketEventIden::Id, id)
+    }
+
+    pub fn list_websocket_events(&self, connection_id: &str) -> Result<Vec<WebsocketEvent>> {
+        self.find_many(WebsocketEventIden::ConnectionId, connection_id, None)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn upsert_websocket_event(
+        &self,
+        websocket_event: &WebsocketEvent,
+        source: &UpdateSource,
+    ) -> Result<WebsocketEvent> {
+        self.upsert(websocket_event, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/websocket_requests.rs b/crates/yaak-models/src/queries/websocket_requests.rs
new file mode 100644
index 0000000..7b3a66a
--- /dev/null
+++ b/crates/yaak-models/src/queries/websocket_requests.rs
@@ -0,0 +1,172 @@
+use super::{conflict_free_name, merge_headers};
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{
+    AnyModel, Folder, FolderIden, HttpRequestHeader, ResolvedHttpRequestSettings, ResolvedSetting,
+    WebsocketRequest, WebsocketRequestIden,
+};
+use crate::util::UpdateSource;
+use serde_json::Value;
+use std::collections::BTreeMap;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_websocket_request(&self, id: &str) -> Result<WebsocketRequest> {
+        self.find_one(WebsocketRequestIden::Id, id)
+    }
+
+    pub fn list_websocket_requests(&self, workspace_id: &str) -> Result<Vec<WebsocketRequest>> {
+        self.find_many(WebsocketRequestIden::WorkspaceId, workspace_id, None)
+    }
+
+    pub fn list_websocket_requests_for_folder_recursive(
+        &self,
+        folder_id: &str,
+    ) -> Result<Vec<WebsocketRequest>> {
+        let mut children = Vec::new();
+        for folder in self.find_many::<Folder>(FolderIden::FolderId, folder_id, None)? {
+            children.extend(self.list_websocket_requests_for_folder_recursive(&folder.id)?);
+        }
+        for request in
+            self.find_many::<WebsocketRequest>(WebsocketRequestIden::FolderId, folder_id, None)?
+        {
+            children.push(request);
+        }
+        Ok(children)
+    }
+
+    pub fn resolve_auth_for_websocket_request(
+        &self,
+        websocket_request: &WebsocketRequest,
+    ) -> Result<(Option<String>, BTreeMap<String, Value>, String)> {
+        if let Some(at) = websocket_request.authentication_type.clone() {
+            return Ok((
+                Some(at),
+                websocket_request.authentication.clone(),
+                websocket_request.id.clone(),
+            ));
+        }
+
+        if let Some(folder_id) = websocket_request.folder_id.clone() {
+            let folder = self.get_folder(&folder_id)?;
+            return self.resolve_auth_for_folder(&folder);
+        }
+
+        let workspace = self.get_workspace(&websocket_request.workspace_id)?;
+        Ok(self.resolve_auth_for_workspace(&workspace))
+    }
+
+    pub fn resolve_headers_for_websocket_request(
+        &self,
+        websocket_request: &WebsocketRequest,
+    ) -> Result<Vec<HttpRequestHeader>> {
+        // Resolved headers should be from furthest to closest ancestor, to override logically.
+        let mut headers = Vec::new();
+
+        if let Some(folder_id) = websocket_request.folder_id.clone() {
+            let parent_folder = self.get_folder(&folder_id)?;
+            let mut folder_headers = self.resolve_headers_for_folder(&parent_folder)?;
+            headers.append(&mut folder_headers);
+        } else {
+            let workspace = self.get_workspace(&websocket_request.workspace_id)?;
+            let mut workspace_headers = self.resolve_headers_for_workspace(&workspace);
+            headers.append(&mut workspace_headers);
+        }
+
+        Ok(merge_headers(headers, websocket_request.headers.clone()))
+    }
+
+    pub fn resolve_settings_for_websocket_request(
+        &self,
+        websocket_request: &WebsocketRequest,
+    ) -> Result<ResolvedHttpRequestSettings> {
+        let parent = if let Some(folder_id) = websocket_request.folder_id.clone() {
+            let folder = self.get_folder(&folder_id)?;
+            self.resolve_settings_for_folder(&folder)?
+        } else {
+            let workspace = self.get_workspace(&websocket_request.workspace_id)?;
+            self.resolve_settings_for_workspace(&workspace)
+        };
+
+        Ok(ResolvedHttpRequestSettings {
+            validate_certificates: if websocket_request.setting_validate_certificates.enabled {
+                ResolvedSetting::from_model(
+                    websocket_request.setting_validate_certificates.value,
+                    AnyModel::WebsocketRequest(websocket_request.clone()),
+                )
+            } else {
+                parent.validate_certificates
+            },
+            request_message_size: if websocket_request.setting_request_message_size.enabled {
+                ResolvedSetting::from_model(
+                    websocket_request.setting_request_message_size.value,
+                    AnyModel::WebsocketRequest(websocket_request.clone()),
+                )
+            } else {
+                parent.request_message_size
+            },
+            send_cookies: if websocket_request.setting_send_cookies.enabled {
+                ResolvedSetting::from_model(
+                    websocket_request.setting_send_cookies.value,
+                    AnyModel::WebsocketRequest(websocket_request.clone()),
+                )
+            } else {
+                parent.send_cookies
+            },
+            store_cookies: if websocket_request.setting_store_cookies.enabled {
+                ResolvedSetting::from_model(
+                    websocket_request.setting_store_cookies.value,
+                    AnyModel::WebsocketRequest(websocket_request.clone()),
+                )
+            } else {
+                parent.store_cookies
+            },
+            ..parent
+        })
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn delete_websocket_request(
+        &self,
+        websocket_request: &WebsocketRequest,
+        source: &UpdateSource,
+    ) -> Result<WebsocketRequest> {
+        self.delete_all_websocket_connections_for_request(websocket_request.id.as_str(), source)?;
+        self.delete(websocket_request, source)
+    }
+
+    pub fn delete_websocket_request_by_id(
+        &self,
+        id: &str,
+        source: &UpdateSource,
+    ) -> Result<WebsocketRequest> {
+        let request = self.get_websocket_request(id)?;
+        self.delete_websocket_request(&request, source)
+    }
+
+    pub fn duplicate_websocket_request(
+        &self,
+        websocket_request: &WebsocketRequest,
+        source: &UpdateSource,
+    ) -> Result<WebsocketRequest> {
+        let mut websocket_request = websocket_request.clone();
+        websocket_request.id = "".to_string();
+        websocket_request.sort_priority = websocket_request.sort_priority + 0.001;
+        let sibling_names = self
+            .list_websocket_requests(&websocket_request.workspace_id)?
+            .into_iter()
+            .filter(|m| m.folder_id == websocket_request.folder_id)
+            .map(|m| m.name)
+            .collect::<Vec<_>>();
+        websocket_request.name = conflict_free_name(&websocket_request.name, &sibling_names);
+        self.upsert(&websocket_request, source)
+    }
+
+    pub fn upsert_websocket_request(
+        &self,
+        websocket_request: &WebsocketRequest,
+        source: &UpdateSource,
+    ) -> Result<WebsocketRequest> {
+        self.upsert(websocket_request, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/workspace_metas.rs b/crates/yaak-models/src/queries/workspace_metas.rs
new file mode 100644
index 0000000..01018b8
--- /dev/null
+++ b/crates/yaak-models/src/queries/workspace_metas.rs
@@ -0,0 +1,39 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{WorkspaceMeta, WorkspaceMetaIden};
+use crate::util::UpdateSource;
+use log::info;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_workspace_meta(&self, workspace_id: &str) -> Option<WorkspaceMeta> {
+        self.find_optional(WorkspaceMetaIden::WorkspaceId, workspace_id)
+    }
+
+    pub fn list_workspace_metas(&self, workspace_id: &str) -> Result<Vec<WorkspaceMeta>> {
+        self.find_many(WorkspaceMetaIden::WorkspaceId, workspace_id, None)
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    pub fn ensure_workspace_meta(&self, workspace_id: &str) -> Result<WorkspaceMeta> {
+        let workspace_meta = self.get_workspace_meta(workspace_id);
+        if let Some(workspace_meta) = workspace_meta {
+            return Ok(workspace_meta);
+        }
+
+        let workspace_meta =
+            WorkspaceMeta { workspace_id: workspace_id.to_string(), ..Default::default() };
+
+        info!("Creating WorkspaceMeta for {workspace_id}");
+
+        self.upsert_workspace_meta(&workspace_meta, &UpdateSource::Background)
+    }
+
+    pub fn upsert_workspace_meta(
+        &self,
+        workspace_meta: &WorkspaceMeta,
+        source: &UpdateSource,
+    ) -> Result<WorkspaceMeta> {
+        self.upsert(workspace_meta, source)
+    }
+}
diff --git a/crates/yaak-models/src/queries/workspaces.rs b/crates/yaak-models/src/queries/workspaces.rs
new file mode 100644
index 0000000..0643379
--- /dev/null
+++ b/crates/yaak-models/src/queries/workspaces.rs
@@ -0,0 +1,218 @@
+use super::merge_headers;
+use crate::blob_manager::BlobManager;
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Result;
+use crate::models::{
+    AnyModel, CookieJar, CookieJarIden, Environment, EnvironmentIden, Folder, FolderIden,
+    GraphQlIntrospection, GraphQlIntrospectionIden, GrpcConnection, GrpcConnectionIden, GrpcEvent,
+    GrpcEventIden, GrpcRequest, GrpcRequestIden, HttpRequest, HttpRequestHeader, HttpRequestIden,
+    HttpResponse, HttpResponseEvent, HttpResponseEventIden, HttpResponseIden, ImportSource,
+    ImportSourceIden, ResolvedHttpRequestSettings, ResolvedSetting, SyncState, SyncStateIden,
+    WebsocketConnection, WebsocketConnectionIden, WebsocketEvent, WebsocketEventIden,
+    WebsocketRequest, WebsocketRequestIden, Workspace, WorkspaceIden, WorkspaceMeta,
+    WorkspaceMetaIden,
+};
+use crate::util::UpdateSource;
+use log::warn;
+use serde_json::Value;
+use std::collections::BTreeMap;
+
+impl<'a> ClientDb<'a> {
+    pub fn get_workspace(&self, id: &str) -> Result<Workspace> {
+        self.find_one(WorkspaceIden::Id, id)
+    }
+
+    pub fn list_workspaces(&self) -> Result<Vec<Workspace>> {
+        self.find_all()
+    }
+
+    pub fn resolve_auth_for_workspace(
+        &self,
+        workspace: &Workspace,
+    ) -> (Option<String>, BTreeMap<String, Value>, String) {
+        (
+            workspace.authentication_type.clone(),
+            workspace.authentication.clone(),
+            workspace.id.clone(),
+        )
+    }
+
+    pub fn resolve_headers_for_workspace(&self, workspace: &Workspace) -> Vec<HttpRequestHeader> {
+        merge_headers(default_headers(), workspace.headers.clone())
+    }
+
+    pub fn resolve_settings_for_workspace(
+        &self,
+        workspace: &Workspace,
+    ) -> ResolvedHttpRequestSettings {
+        ResolvedHttpRequestSettings {
+            validate_certificates: ResolvedSetting::from_model(
+                workspace.setting_validate_certificates,
+                AnyModel::Workspace(workspace.clone()),
+            ),
+            follow_redirects: ResolvedSetting::from_model(
+                workspace.setting_follow_redirects,
+                AnyModel::Workspace(workspace.clone()),
+            ),
+            request_timeout: ResolvedSetting::from_model(
+                workspace.setting_request_timeout,
+                AnyModel::Workspace(workspace.clone()),
+            ),
+            request_message_size: ResolvedSetting::from_model(
+                workspace.setting_request_message_size,
+                AnyModel::Workspace(workspace.clone()),
+            ),
+            send_cookies: ResolvedSetting::from_model(
+                workspace.setting_send_cookies,
+                AnyModel::Workspace(workspace.clone()),
+            ),
+            store_cookies: ResolvedSetting::from_model(
+                workspace.setting_store_cookies,
+                AnyModel::Workspace(workspace.clone()),
+            ),
+            http_version: ResolvedSetting::from_model(
+                workspace.setting_http_version,
+                AnyModel::Workspace(workspace.clone()),
+            ),
+        }
+    }
+}
+
+impl<'a> WriteDb<'a> {
+    /// Delete a workspace and everything in it.
+    ///
+    /// Children are bulk-deleted with one statement per table and are NOT
+    /// individually recorded in model_changes or emitted as events — the single
+    /// workspace delete event implies the subtree (see [`ModelChangeEvent::Delete`]).
+    /// This keeps huge workspaces (thousands of requests) fast and avoids
+    /// flooding event consumers.
+    pub fn delete_workspace(
+        &self,
+        workspace: &Workspace,
+        source: &UpdateSource,
+        blobs: &BlobManager,
+    ) -> Result<Workspace> {
+        let wid = workspace.id.as_str();
+
+        // Collect response cleanup targets before their rows disappear. The actual
+        // cleanup runs at the end: response bodies live on disk and in the blob DB,
+        // which don't participate in this transaction, so removing them must wait
+        // until every statement that could fail (and roll back the rows) is done.
+        let responses = self.find_many::<HttpResponse>(HttpResponseIden::WorkspaceId, wid, None)?;
+
+        self.delete_many_untracked::<HttpResponseEvent>(HttpResponseEventIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<HttpResponse>(HttpResponseIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<HttpRequest>(HttpRequestIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<GrpcEvent>(GrpcEventIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<GrpcConnection>(GrpcConnectionIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<GrpcRequest>(GrpcRequestIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<WebsocketEvent>(WebsocketEventIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<WebsocketConnection>(
+            WebsocketConnectionIden::WorkspaceId,
+            wid,
+        )?;
+        self.delete_many_untracked::<WebsocketRequest>(WebsocketRequestIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<GraphQlIntrospection>(
+            GraphQlIntrospectionIden::WorkspaceId,
+            wid,
+        )?;
+        self.delete_many_untracked::<Folder>(FolderIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<Environment>(EnvironmentIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<CookieJar>(CookieJarIden::WorkspaceId, wid)?;
+        for import_source in self.list_import_sources(wid)? {
+            self.delete_import_source_resources(&import_source.id)?;
+        }
+        self.delete_many_untracked::<ImportSource>(ImportSourceIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<SyncState>(SyncStateIden::WorkspaceId, wid)?;
+        self.delete_many_untracked::<WorkspaceMeta>(WorkspaceMetaIden::WorkspaceId, wid)?;
+        let deleted = self.delete(workspace, source)?;
+
+        // Best-effort cleanup of response bodies (disk files and blob chunks).
+        // Failures only orphan unreferenced data, and are logged.
+        for m in responses {
+            if let Some(p) = m.body_path {
+                if let Err(e) = std::fs::remove_file(&p) {
+                    warn!("Failed to delete response body file {p:?}: {e}");
+                }
+            }
+            let pattern = format!("{}.%", m.id);
+            if let Err(e) = blobs.with_tx(|b| b.delete_chunks_like(&pattern)) {
+                warn!("Failed to delete blobs for response {}: {e}", m.id);
+            }
+        }
+
+        Ok(deleted)
+    }
+
+    pub fn delete_workspace_by_id(
+        &self,
+        id: &str,
+        source: &UpdateSource,
+        blobs: &BlobManager,
+    ) -> Result<Workspace> {
+        let workspace = self.get_workspace(id)?;
+        self.delete_workspace(&workspace, source, blobs)
+    }
+
+    pub fn upsert_workspace(&self, w: &Workspace, source: &UpdateSource) -> Result<Workspace> {
+        self.upsert(w, source)
+    }
+}
+
+/// Global default headers that are always sent with requests unless overridden.
+/// These are prepended to the inheritance chain so workspace/folder/request headers
+/// can override or disable them.
+pub fn default_headers() -> Vec<HttpRequestHeader> {
+    vec![
+        HttpRequestHeader {
+            name: "User-Agent".to_string(),
+            value: "yaak".to_string(),
+            ..Default::default()
+        },
+        HttpRequestHeader {
+            name: "Accept".to_string(),
+            value: "*/*".to_string(),
+            ..Default::default()
+        },
+    ]
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::init_in_memory;
+    use crate::models::Workspace;
+    use crate::util::UpdateSource;
+
+    #[test]
+    fn fresh_install_has_no_workspaces() {
+        let (query_manager, _blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        let workspaces = query_manager.connect().list_workspaces().expect("Failed to list");
+        assert!(workspaces.is_empty());
+    }
+
+    #[test]
+    fn default_workspace_carries_real_defaults() {
+        let (query_manager, _blob_manager, _rx) = init_in_memory().expect("Failed to init DB");
+        let created = query_manager
+            .with_tx(|tx| {
+                tx.upsert_workspace(
+                    &Workspace { name: "Yaak".to_string(), ..Default::default() },
+                    &UpdateSource::Background,
+                )
+            })
+            .expect("Failed to create workspace");
+        let workspace = query_manager.connect().get_workspace(&created.id).expect("get");
+
+        // A workspace built in Rust and never deserialized only gets these values
+        // if `Workspace::default()` carries them. Asserted through the DB round
+        // trip, since the column values are what the user lives with.
+        assert!(workspace.setting_send_cookies, "setting_send_cookies");
+        assert!(workspace.setting_store_cookies, "setting_store_cookies");
+        assert!(workspace.setting_follow_redirects, "setting_follow_redirects");
+        assert!(workspace.setting_validate_certificates, "setting_validate_certificates");
+        assert_eq!(
+            workspace.setting_request_message_size,
+            crate::models::DEFAULT_REQUEST_MESSAGE_SIZE
+        );
+    }
+}
diff --git a/crates/yaak-models/src/query_manager.rs b/crates/yaak-models/src/query_manager.rs
new file mode 100644
index 0000000..9a4b33a
--- /dev/null
+++ b/crates/yaak-models/src/query_manager.rs
@@ -0,0 +1,85 @@
+use crate::client_db::{ClientDb, WriteDb};
+use crate::error::Error::GenericError;
+use crate::util::ModelPayload;
+use rusqlite::{Transaction, TransactionBehavior};
+use std::sync::mpsc;
+use yaak_database::{ConnectionOrTx, DbContext, SqlitePool};
+
+/// Reads come from a pool; writes go through one connection.
+///
+/// SQLite in WAL mode lets many readers run alongside a single writer, and
+/// never more than one writer. A second in-process writer can only wait, and
+/// while it waits in the busy handler it sleeps, retries, and keeps its pool
+/// slot. Enough of those and the pool is full of writers that are all asleep,
+/// and every read in the app queues behind them. Giving writes exactly one
+/// connection turns that into a plain queue: the next write starts the moment
+/// the previous one commits, and it never takes a slot a read could use.
+///
+/// The pools are internally synchronized — don't wrap them in a Mutex. A Mutex
+/// held across the blocking `get()` serializes every DB access behind the
+/// slowest waiter.
+#[derive(Debug, Clone)]
+pub struct QueryManager {
+    readers: SqlitePool,
+    writer: SqlitePool,
+    events_tx: mpsc::Sender<ModelPayload>,
+}
+
+impl QueryManager {
+    /// `writer` must be a pool with a single connection; see [`crate::init_standalone`].
+    pub fn new(
+        readers: SqlitePool,
+        writer: SqlitePool,
+        events_tx: mpsc::Sender<ModelPayload>,
+    ) -> Self {
+        QueryManager { readers, writer, events_tx }
+    }
+
+    /// A read handle from the reader pool.
+    pub fn connect(&self) -> ClientDb<'_> {
+        let conn = self.readers.get().expect("Failed to get a new DB connection from the pool");
+        ClientDb::new(DbContext::new(ConnectionOrTx::Connection(conn)))
+    }
+
+    /// Run `func` in a transaction on the writer connection.
+    ///
+    /// Waits for any write in progress to commit first, and fails with a pool
+    /// error if that takes longer than the pool's timeout. Do not call this
+    /// from inside another `with_tx` closure: the inner call would wait for
+    /// the outer transaction, which is waiting on it.
+    ///
+    /// Model events for the writes are sent once the transaction commits.
+    pub fn with_tx<T, E>(
+        &self,
+        func: impl FnOnce(&WriteDb) -> std::result::Result<T, E>,
+    ) -> std::result::Result<T, E>
+    where
+        E: From<crate::error::Error>,
+    {
+        let conn = self.writer.get().map_err(crate::error::Error::SqlPoolError)?;
+        // `new_unchecked` takes `&Connection`; see yaak_database::pool for why
+        // the pool never hands out `&mut`.
+        let tx = Transaction::new_unchecked(&conn, TransactionBehavior::Immediate)
+            .map_err(crate::error::Error::SqlError)?;
+
+        let db = WriteDb::new(DbContext::new(ConnectionOrTx::Transaction(&tx)));
+
+        match func(&db) {
+            Ok(val) => {
+                let events = db.into_events();
+                tx.commit()
+                    .map_err(|e| GenericError(format!("Failed to commit transaction {e:?}")))?;
+                for payload in events {
+                    let _ = self.events_tx.send(payload);
+                }
+                Ok(val)
+            }
+            Err(e) => {
+                drop(db);
+                tx.rollback()
+                    .map_err(|e| GenericError(format!("Failed to rollback transaction {e:?}")))?;
+                Err(e)
+            }
+        }
+    }
+}
diff --git a/crates/yaak-models/src/render.rs b/crates/yaak-models/src/render.rs
new file mode 100644
index 0000000..e48d328
--- /dev/null
+++ b/crates/yaak-models/src/render.rs
@@ -0,0 +1,250 @@
+//! Rendering requests against an environment chain.
+//!
+//! Lives here rather than beside the send engine so that the browser's wasm
+//! host, which has the model layer but no sockets, renders exactly what the
+//! desktop renders.
+
+use crate::models::{
+    Environment, EnvironmentVariable, GrpcRequest, HttpRequest, HttpRequestHeader, HttpUrlParameter,
+};
+use crate::path_placeholders::apply_path_placeholders;
+use log::info;
+use serde_json::Value;
+use std::collections::{BTreeMap, HashMap};
+use yaak_templates::{RenderOptions, TemplateCallback, parse_and_render, render_json_value_raw};
+
+/// Render every template in an HTTP request against an environment chain.
+pub async fn render_http_request<T: TemplateCallback>(
+    request: &HttpRequest,
+    environment_chain: Vec<Environment>,
+    callback: &T,
+    options: &RenderOptions,
+) -> yaak_templates::error::Result<HttpRequest> {
+    let vars = &make_vars_hashmap(environment_chain);
+
+    let mut url_parameters = Vec::new();
+    for parameter in request.url_parameters.clone() {
+        if !parameter.enabled {
+            continue;
+        }
+
+        url_parameters.push(HttpUrlParameter {
+            enabled: parameter.enabled,
+            name: parse_and_render(parameter.name.as_str(), vars, callback, options).await?,
+            value: parse_and_render(parameter.value.as_str(), vars, callback, options).await?,
+            id: parameter.id,
+        })
+    }
+
+    let mut headers = Vec::new();
+    for header in request.headers.clone() {
+        if !header.enabled {
+            continue;
+        }
+
+        headers.push(HttpRequestHeader {
+            enabled: header.enabled,
+            name: parse_and_render(header.name.as_str(), vars, callback, options).await?,
+            value: parse_and_render(header.value.as_str(), vars, callback, options).await?,
+            id: header.id,
+        })
+    }
+
+    let mut body = BTreeMap::new();
+    for (key, value) in request.body.clone() {
+        let value = if key == "form" { strip_disabled_form_entries(value) } else { value };
+        body.insert(key, render_json_value_raw(value, vars, callback, options).await?);
+    }
+
+    let authentication = {
+        let mut disabled = false;
+        let mut auth = BTreeMap::new();
+
+        match request.authentication.get("disabled") {
+            Some(Value::Bool(true)) => {
+                disabled = true;
+            }
+            Some(Value::String(template)) => {
+                disabled = parse_and_render(template.as_str(), vars, callback, options)
+                    .await
+                    .unwrap_or_default()
+                    .is_empty();
+                info!(
+                    "Rendering authentication.disabled as a template: {disabled} from \"{template}\""
+                );
+            }
+            _ => {}
+        }
+
+        if disabled {
+            auth.insert("disabled".to_string(), Value::Bool(true));
+        } else {
+            for (key, value) in request.authentication.clone() {
+                if key == "disabled" {
+                    auth.insert(key, Value::Bool(false));
+                } else {
+                    auth.insert(key, render_json_value_raw(value, vars, callback, options).await?);
+                }
+            }
+        }
+
+        auth
+    };
+
+    let url = parse_and_render(request.url.clone().as_str(), vars, callback, options).await?;
+    let (url, url_parameters) = apply_path_placeholders(&url, &url_parameters);
+
+    Ok(HttpRequest { url, url_parameters, headers, body, authentication, ..request.to_owned() })
+}
+
+pub async fn render_grpc_request<T: TemplateCallback>(
+    r: &GrpcRequest,
+    environment_chain: Vec<Environment>,
+    cb: &T,
+    opt: &RenderOptions,
+) -> yaak_templates::error::Result<GrpcRequest> {
+    let vars = &make_vars_hashmap(environment_chain);
+
+    let mut metadata = Vec::new();
+    for p in r.metadata.clone() {
+        if !p.enabled {
+            continue;
+        }
+        metadata.push(HttpRequestHeader {
+            enabled: p.enabled,
+            name: parse_and_render(p.name.as_str(), vars, cb, opt).await?,
+            value: parse_and_render(p.value.as_str(), vars, cb, opt).await?,
+            id: p.id,
+        })
+    }
+
+    let authentication = {
+        let mut disabled = false;
+        let mut auth = BTreeMap::new();
+        match r.authentication.get("disabled") {
+            Some(Value::Bool(true)) => {
+                disabled = true;
+            }
+            Some(Value::String(tmpl)) => {
+                disabled = parse_and_render(tmpl.as_str(), vars, cb, opt)
+                    .await
+                    .unwrap_or_default()
+                    .is_empty();
+                info!(
+                    "Rendering authentication.disabled as a template: {disabled} from \"{tmpl}\""
+                );
+            }
+            _ => {}
+        }
+        if disabled {
+            auth.insert("disabled".to_string(), Value::Bool(true));
+        } else {
+            for (k, v) in r.authentication.clone() {
+                if k == "disabled" {
+                    auth.insert(k, Value::Bool(false));
+                } else {
+                    auth.insert(k, render_json_value_raw(v, vars, cb, opt).await?);
+                }
+            }
+        }
+        auth
+    };
+
+    let url = parse_and_render(r.url.as_str(), vars, cb, opt).await?;
+
+    Ok(GrpcRequest { url, metadata, authentication, ..r.to_owned() })
+}
+
+pub fn make_vars_hashmap(environment_chain: Vec<Environment>) -> HashMap<String, String> {
+    let mut variables = HashMap::new();
+
+    for e in environment_chain.iter().rev() {
+        variables = add_variable_to_map(variables, &e.variables);
+    }
+
+    variables
+}
+
+fn add_variable_to_map(
+    m: HashMap<String, String>,
+    variables: &Vec<EnvironmentVariable>,
+) -> HashMap<String, String> {
+    let mut map = m.clone();
+    for variable in variables {
+        if !variable.enabled {
+            continue;
+        }
+        let name = variable.name.as_str();
+        let value = variable.value.as_str();
+        map.insert(name.into(), value.into());
+    }
+
+    map
+}
+
+fn strip_disabled_form_entries(v: Value) -> Value {
+    match v {
+        Value::Array(items) => Value::Array(
+            items
+                .into_iter()
+                .filter(|item| item.get("enabled").and_then(|e| e.as_bool()).unwrap_or(true))
+                .collect(),
+        ),
+        v => v,
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use serde_json::json;
+
+    #[test]
+    fn test_strip_disabled_form_entries() {
+        let input = json!([
+            {"enabled": true, "name": "foo", "value": "bar"},
+            {"enabled": false, "name": "disabled", "value": "gone"},
+            {"enabled": true, "name": "baz", "value": "qux"},
+        ]);
+        let result = strip_disabled_form_entries(input);
+        assert_eq!(
+            result,
+            json!([
+                {"enabled": true, "name": "foo", "value": "bar"},
+                {"enabled": true, "name": "baz", "value": "qux"},
+            ])
+        );
+    }
+
+    #[test]
+    fn test_strip_disabled_form_entries_all_disabled() {
+        let input = json!([
+            {"enabled": false, "name": "a", "value": "b"},
+            {"enabled": false, "name": "c", "value": "d"},
+        ]);
+        let result = strip_disabled_form_entries(input);
+        assert_eq!(result, json!([]));
+    }
+
+    #[test]
+    fn test_strip_disabled_form_entries_missing_enabled_defaults_to_kept() {
+        let input = json!([
+            {"name": "no_enabled_field", "value": "kept"},
+            {"enabled": false, "name": "disabled", "value": "gone"},
+        ]);
+        let result = strip_disabled_form_entries(input);
+        assert_eq!(
+            result,
+            json!([
+                {"name": "no_enabled_field", "value": "kept"},
+            ])
+        );
+    }
+
+    #[test]
+    fn test_strip_disabled_form_entries_non_array_passthrough() {
+        let input = json!("just a string");
+        let result = strip_disabled_form_entries(input.clone());
+        assert_eq!(result, input);
+    }
+}
diff --git a/crates/yaak-models/src/util.rs b/crates/yaak-models/src/util.rs
new file mode 100644
index 0000000..e90dcc5
--- /dev/null
+++ b/crates/yaak-models/src/util.rs
@@ -0,0 +1,328 @@
+use crate::client_db::ClientDb;
+use crate::error::Result;
+use crate::models::{
+    AnyModel, Environment, Folder, GrpcRequest, HttpRequest, UpsertModelInfo, WebsocketRequest,
+    Workspace, WorkspaceIden,
+};
+use chrono::{NaiveDateTime, Utc};
+use serde::{Deserialize, Serialize};
+use std::collections::BTreeMap;
+use ts_rs::TS;
+use yaak_core::WorkspaceContext;
+
+pub use yaak_database::{
+    ModelChangeEvent, generate_id, generate_id_of_length, generate_prefixed_id,
+};
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct ModelPayload {
+    pub model: AnyModel,
+    pub update_source: UpdateSource,
+    pub change: ModelChangeEvent,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum UpdateSource {
+    Background,
+    Import,
+    Plugin,
+    Sync,
+    Window { label: String },
+}
+
+impl UpdateSource {
+    pub fn from_window_label(label: impl Into<String>) -> Self {
+        Self::Window { label: label.into() }
+    }
+
+    pub fn to_db(&self) -> yaak_database::UpdateSource {
+        match self {
+            UpdateSource::Background => yaak_database::UpdateSource::Background,
+            UpdateSource::Import => yaak_database::UpdateSource::Import,
+            UpdateSource::Plugin => yaak_database::UpdateSource::Plugin,
+            UpdateSource::Sync => yaak_database::UpdateSource::Sync,
+            UpdateSource::Window { label } => {
+                yaak_database::UpdateSource::Window { label: label.clone() }
+            }
+        }
+    }
+}
+
+impl From<yaak_database::UpdateSource> for UpdateSource {
+    fn from(source: yaak_database::UpdateSource) -> Self {
+        match source {
+            yaak_database::UpdateSource::Background => UpdateSource::Background,
+            yaak_database::UpdateSource::Import => UpdateSource::Import,
+            yaak_database::UpdateSource::Plugin => UpdateSource::Plugin,
+            yaak_database::UpdateSource::Sync => UpdateSource::Sync,
+            yaak_database::UpdateSource::Window { label } => UpdateSource::Window { label },
+        }
+    }
+}
+
+#[derive(Default, Debug, Deserialize, Serialize)]
+#[serde(default, rename_all = "camelCase")]
+pub struct WorkspaceExport {
+    pub yaak_version: String,
+    pub yaak_schema: i64,
+    pub timestamp: NaiveDateTime,
+    pub resources: BatchUpsertResult,
+}
+
+#[derive(Default, Debug, Deserialize, Serialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_util.ts")]
+pub struct BatchUpsertResult {
+    pub workspaces: Vec<Workspace>,
+    pub environments: Vec<Environment>,
+    pub folders: Vec<Folder>,
+    pub http_requests: Vec<HttpRequest>,
+    pub grpc_requests: Vec<GrpcRequest>,
+    pub websocket_requests: Vec<WebsocketRequest>,
+}
+
+/// Where a staged import will be committed.
+///
+/// The destination workspace and optional folder IDs are captured in the plan so the preview describes
+/// the exact destination that confirmation will use.
+#[derive(Debug, Clone, Deserialize, Serialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_util.ts")]
+pub enum ImportDestination {
+    NewWorkspace,
+    ExistingWorkspace {
+        #[serde(rename = "workspaceId")]
+        workspace_id: String,
+        #[serde(rename = "folderId")]
+        #[ts(optional)]
+        folder_id: Option<String>,
+    },
+}
+
+#[derive(Debug, Clone, Deserialize, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_util.ts")]
+pub struct ImportPlanWarning {
+    pub title: String,
+    pub detail: String,
+    #[serde(default)]
+    pub level: ImportPlanWarningLevel,
+}
+
+/// Whether a plan's note is something to know or something to think twice about.
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Deserialize, Serialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_util.ts")]
+pub enum ImportPlanWarningLevel {
+    #[default]
+    Info,
+    Warning,
+}
+
+impl ImportPlanWarning {
+    pub fn info(title: impl Into<String>, detail: impl Into<String>) -> Self {
+        Self { title: title.into(), detail: detail.into(), level: ImportPlanWarningLevel::Info }
+    }
+
+    pub fn warning(title: impl Into<String>, detail: impl Into<String>) -> Self {
+        Self { title: title.into(), detail: detail.into(), level: ImportPlanWarningLevel::Warning }
+    }
+}
+
+/// Where an import's contents came from, used to link the committed workspace back to it.
+#[derive(Debug, Clone, Deserialize, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_util.ts")]
+pub struct ImportOrigin {
+    /// The absolute file path or URL the contents were read from.
+    pub origin: String,
+    pub label: String,
+}
+
+/// The model types an import plan can contain.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Deserialize, Serialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_util.ts")]
+pub enum ImportResourceType {
+    Environment,
+    Folder,
+    GrpcRequest,
+    HttpRequest,
+    WebsocketRequest,
+    Workspace,
+}
+
+impl ImportResourceType {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            ImportResourceType::Environment => "environment",
+            ImportResourceType::Folder => "folder",
+            ImportResourceType::GrpcRequest => "grpc_request",
+            ImportResourceType::HttpRequest => "http_request",
+            ImportResourceType::WebsocketRequest => "websocket_request",
+            ImportResourceType::Workspace => "workspace",
+        }
+    }
+
+    pub fn from_str(value: &str) -> Option<Self> {
+        match value {
+            "environment" => Some(ImportResourceType::Environment),
+            "folder" => Some(ImportResourceType::Folder),
+            "grpc_request" => Some(ImportResourceType::GrpcRequest),
+            "http_request" => Some(ImportResourceType::HttpRequest),
+            "websocket_request" => Some(ImportResourceType::WebsocketRequest),
+            "workspace" => Some(ImportResourceType::Workspace),
+            _ => None,
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Deserialize, Serialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_util.ts")]
+pub enum ImportPlanAction {
+    Create,
+    Update,
+    Delete,
+    Unchanged,
+    KeepLocal,
+    Conflict,
+    /// Present in the source but previously turned down; selecting it imports it again
+    Ignored,
+}
+
+/// Extra context for an action that would otherwise be indistinguishable from its plain form.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Deserialize, Serialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_util.ts")]
+pub enum ImportPlanReason {
+    MovedIntoIgnoredFolder,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Deserialize, Serialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_util.ts")]
+pub enum ImportConflictResolution {
+    KeepMine,
+    TakeSource,
+}
+
+#[derive(Debug, Clone, Deserialize, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_util.ts")]
+pub struct ImportPlanItem {
+    pub action: ImportPlanAction,
+    pub model: ImportResourceType,
+    pub model_id: String,
+    pub name: String,
+    /// Planned parent folder ID for incoming resources; current parent for deletions.
+    #[ts(optional)]
+    pub parent_id: Option<String>,
+    pub selected: bool,
+    #[ts(optional)]
+    pub resolution: Option<ImportConflictResolution>,
+    #[ts(optional)]
+    pub reason: Option<ImportPlanReason>,
+    /// Fields where the source and the local copy disagree, so the preview can say why
+    #[serde(default)]
+    pub changed_fields: Vec<String>,
+}
+
+#[derive(Debug, Deserialize, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_util.ts")]
+pub struct ImportPlan {
+    pub importer: String,
+    pub destination: ImportDestination,
+    pub resources: BatchUpsertResult,
+    pub warnings: Vec<ImportPlanWarning>,
+
+    /// Stable source key for every model in `resources`, keyed by its planned ID.
+    pub source_keys: BTreeMap<String, String>,
+
+    /// One entry per plannable resource; commit applies only the selected ones.
+    #[serde(default)]
+    pub items: Vec<ImportPlanItem>,
+
+    #[serde(default)]
+    #[ts(optional)]
+    pub origin: Option<ImportOrigin>,
+}
+
+pub fn get_workspace_export_resources(
+    db: &ClientDb,
+    yaak_version: &str,
+    workspace_ids: Vec<&str>,
+    include_private_environments: bool,
+) -> Result<WorkspaceExport> {
+    let mut data = WorkspaceExport {
+        yaak_version: yaak_version.to_string(),
+        yaak_schema: 4,
+        timestamp: Utc::now().naive_utc(),
+        resources: BatchUpsertResult {
+            workspaces: Vec::new(),
+            environments: Vec::new(),
+            folders: Vec::new(),
+            http_requests: Vec::new(),
+            grpc_requests: Vec::new(),
+            websocket_requests: Vec::new(),
+        },
+    };
+
+    for workspace_id in workspace_ids {
+        data.resources.workspaces.push(db.find_one(WorkspaceIden::Id, workspace_id)?);
+        data.resources.environments.append(
+            &mut db
+                .list_environments(workspace_id)?
+                .into_iter()
+                .filter(|e| include_private_environments || e.public)
+                .collect(),
+        );
+        data.resources.folders.append(&mut db.list_folders(workspace_id)?);
+        data.resources.http_requests.append(&mut db.list_http_requests(workspace_id)?);
+        data.resources.grpc_requests.append(&mut db.list_grpc_requests(workspace_id)?);
+        data.resources.websocket_requests.append(&mut db.list_websocket_requests(workspace_id)?);
+    }
+
+    Ok(data)
+}
+
+pub fn maybe_gen_id<M: UpsertModelInfo>(
+    ctx: &WorkspaceContext,
+    id: &str,
+    ids: &mut BTreeMap<String, String>,
+) -> String {
+    if id == "CURRENT_WORKSPACE" {
+        if let Some(wid) = &ctx.workspace_id {
+            return wid.to_string();
+        }
+    }
+
+    if !id.starts_with("GENERATE_ID::") {
+        return id.to_string();
+    }
+
+    let unique_key = id.replace("GENERATE_ID", "");
+    if let Some(existing) = ids.get(unique_key.as_str()) {
+        existing.to_string()
+    } else {
+        let new_id = M::generate_id();
+        ids.insert(unique_key, new_id.clone());
+        new_id
+    }
+}
+
+pub fn maybe_gen_id_opt<M: UpsertModelInfo>(
+    ctx: &WorkspaceContext,
+    id: Option<String>,
+    ids: &mut BTreeMap<String, String>,
+) -> Option<String> {
+    match id {
+        Some(id) => Some(maybe_gen_id::<M>(ctx, id.as_str(), ids)),
+        None => None,
+    }
+}
diff --git a/crates/yaak-plugins/Cargo.toml b/crates/yaak-plugins/Cargo.toml
new file mode 100644
index 0000000..8f393cf
--- /dev/null
+++ b/crates/yaak-plugins/Cargo.toml
@@ -0,0 +1,30 @@
+[package]
+name = "yaak-plugins"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+base64 = "0.22.1"
+chrono = { workspace = true }
+dunce = "1.0.4"
+futures-util = "0.3.30"
+hex = { workspace = true }
+keyring = { workspace = true, features = ["apple-native", "windows-native", "sync-secret-service"] }
+log = { workspace = true }
+md5 = "0.7.0"
+path-slash = "0.2.1"
+rand = "0.9.0"
+reqwest = { workspace = true, features = ["json"] }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+sha2 = { workspace = true }
+thiserror = { workspace = true }
+tokio = { workspace = true, features = ["macros", "rt-multi-thread", "process", "fs"] }
+tokio-tungstenite = "0.26.1"
+ts-rs = { workspace = true }
+yaak-common = { workspace = true }
+yaak-crypto = { workspace = true }
+yaak-models = { workspace = true }
+yaak-templates = { workspace = true }
+zip = "7"
diff --git a/crates/yaak-plugins/bindings/gen_api.ts b/crates/yaak-plugins/bindings/gen_api.ts
new file mode 100644
index 0000000..9dcbb82
--- /dev/null
+++ b/crates/yaak-plugins/bindings/gen_api.ts
@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { PluginVersion } from "./gen_search";
+
+export type PluginNameVersion = { name: string, version: string, };
+
+export type PluginSearchResponse = { plugins: Array<PluginVersion>, };
+
+export type PluginUpdatesResponse = { plugins: Array<PluginNameVersion>, };
diff --git a/crates/yaak-plugins/bindings/gen_events.ts b/crates/yaak-plugins/bindings/gen_events.ts
new file mode 100644
index 0000000..ae56422
--- /dev/null
+++ b/crates/yaak-plugins/bindings/gen_events.ts
@@ -0,0 +1,663 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { AnyModel, Environment, Folder, GrpcRequest, HttpRequest, HttpResponse, WebsocketRequest, Workspace } from "./gen_models";
+import type { JsonValue } from "./serde_json/JsonValue";
+
+export type BootRequest = { dir: string, watch: boolean, };
+
+export type CallFolderActionArgs = { folder: Folder, };
+
+export type CallFolderActionRequest = { index: number, pluginRefId: string, args: CallFolderActionArgs, };
+
+export type CallGrpcRequestActionArgs = { grpcRequest: GrpcRequest, protoFiles: Array<string>, };
+
+export type CallGrpcRequestActionRequest = { index: number, pluginRefId: string, args: CallGrpcRequestActionArgs, };
+
+export type CallHttpAuthenticationActionArgs = { contextId: string, values: { [key in string]?: JsonPrimitive }, };
+
+export type CallHttpAuthenticationActionRequest = { index: number, pluginRefId: string, args: CallHttpAuthenticationActionArgs, };
+
+export type CallHttpAuthenticationRequest = { contextId: string, values: { [key in string]?: JsonPrimitive }, method: string, url: string, headers: Array<HttpHeader>, body: string | null, };
+
+export type CallHttpAuthenticationResponse = { 
+/**
+ * HTTP headers to add to the request. Existing headers will be replaced, while
+ * new headers will be added.
+ */
+setHeaders?: Array<HttpHeader>, 
+/**
+ * Query parameters to add to the request. Existing params will be replaced, while
+ * new params will be added.
+ */
+setQueryParameters?: Array<HttpHeader>, };
+
+export type CallHttpRequestActionArgs = { httpRequest: HttpRequest, };
+
+export type CallHttpRequestActionRequest = { index: number, pluginRefId: string, args: CallHttpRequestActionArgs, };
+
+export type CallTemplateFunctionArgs = { purpose: RenderPurpose, values: { [key in string]?: JsonPrimitive }, };
+
+export type CallTemplateFunctionRequest = { name: string, args: CallTemplateFunctionArgs, };
+
+export type CallTemplateFunctionResponse = { value: string | null, error?: string, };
+
+export type CallWebsocketRequestActionArgs = { websocketRequest: WebsocketRequest, };
+
+export type CallWebsocketRequestActionRequest = { index: number, pluginRefId: string, args: CallWebsocketRequestActionArgs, };
+
+export type CallWorkspaceActionArgs = { workspace: Workspace, };
+
+export type CallWorkspaceActionRequest = { index: number, pluginRefId: string, args: CallWorkspaceActionArgs, };
+
+export type CloseWindowRequest = { label: string, };
+
+export type Color = "primary" | "secondary" | "info" | "success" | "notice" | "warning" | "danger";
+
+export type CompletionOptionType = "constant" | "variable";
+
+export type Content = { "type": "text", content: string, } | { "type": "markdown", content: string, };
+
+export type CopyTextRequest = { text: string, };
+
+export type DeleteKeyValueRequest = { key: string, };
+
+export type DeleteKeyValueResponse = { deleted: boolean, };
+
+export type DeleteModelRequest = { model: string, id: string, };
+
+export type DeleteModelResponse = { model: AnyModel, };
+
+export type DialogSize = "sm" | "md" | "lg" | "full" | "dynamic";
+
+export type EditorLanguage = "text" | "javascript" | "json" | "html" | "xml" | "graphql" | "markdown" | "c" | "clojure" | "csharp" | "go" | "http" | "java" | "kotlin" | "objective_c" | "ocaml" | "php" | "powershell" | "python" | "r" | "ruby" | "shell" | "swift";
+
+export type EmptyPayload = {};
+
+export type ErrorResponse = { error: string, };
+
+export type ExportHttpRequestRequest = { httpRequest: HttpRequest, };
+
+export type ExportHttpRequestResponse = { content: string, };
+
+export type FileFilter = { name: string, 
+/**
+ * File extensions to require
+ */
+extensions: Array<string>, };
+
+export type FilterRequest = { content: string, filter: string, };
+
+export type FilterResponse = { content: string, error?: string, };
+
+export type FindHttpResponsesRequest = { requestId: string, limit?: number, };
+
+export type FindHttpResponsesResponse = { httpResponses: Array<HttpResponse>, };
+
+export type FolderAction = { label: string, icon?: Icon, };
+
+export type FormInput = { "type": "text" } & FormInputText | { "type": "editor" } & FormInputEditor | { "type": "select" } & FormInputSelect | { "type": "checkbox" } & FormInputCheckbox | { "type": "file" } & FormInputFile | { "type": "http_request" } & FormInputHttpRequest | { "type": "accordion" } & FormInputAccordion | { "type": "h_stack" } & FormInputHStack | { "type": "banner" } & FormInputBanner | { "type": "markdown" } & FormInputMarkdown | { "type": "key_value" } & FormInputKeyValue;
+
+export type FormInputAccordion = { label: string, inputs?: Array<FormInput>, hidden?: boolean, };
+
+export type FormInputBanner = { inputs?: Array<FormInput>, hidden?: boolean, color?: Color, };
+
+export type FormInputBase = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputCheckbox = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputEditor = { 
+/**
+ * Placeholder for the text input
+ */
+placeholder?: string | null, 
+/**
+ * Don't show the editor gutter (line numbers, folds, etc.)
+ */
+hideGutter?: boolean, 
+/**
+ * Language for syntax highlighting
+ */
+language?: EditorLanguage, readOnly?: boolean, 
+/**
+ * Fixed number of visible rows
+ */
+rows?: number, completionOptions?: Array<GenericCompletionOption>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputFile = { 
+/**
+ * The title of the file selection window
+ */
+title: string, 
+/**
+ * Allow selecting multiple files
+ */
+multiple?: boolean, directory?: boolean, defaultPath?: string, filters?: Array<FileFilter>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputHStack = { inputs?: Array<FormInput>, hidden?: boolean, };
+
+export type FormInputHttpRequest = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputKeyValue = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputMarkdown = { content: string, hidden?: boolean, };
+
+export type FormInputSelect = { 
+/**
+ * The options that will be available in the select input
+ */
+options: Array<FormInputSelectOption>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputSelectOption = { label: string, value: string, };
+
+export type FormInputText = { 
+/**
+ * Placeholder for the text input
+ */
+placeholder?: string | null, 
+/**
+ * Placeholder for the text input
+ */
+password?: boolean, 
+/**
+ * Whether to allow newlines in the input, like a <textarea/>
+ */
+multiLine?: boolean, completionOptions?: Array<GenericCompletionOption>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type GenericCompletionOption = { label: string, detail?: string, info?: string, type?: CompletionOptionType, boost?: number, };
+
+export type GetCookieValueRequest = { name: string, domain?: string | null, };
+
+export type GetCookieValueResponse = { value: string | null, };
+
+export type GetFolderActionsResponse = { actions: Array<FolderAction>, pluginRefId: string, };
+
+export type GetGrpcRequestActionsResponse = { actions: Array<GrpcRequestAction>, pluginRefId: string, };
+
+export type GetHttpAuthenticationConfigRequest = { contextId: string, values: { [key in string]?: JsonPrimitive }, };
+
+export type GetHttpAuthenticationConfigResponse = { args: Array<FormInput>, pluginRefId: string, actions?: Array<HttpAuthenticationAction>, };
+
+export type GetHttpAuthenticationSummaryResponse = { name: string, label: string, shortLabel: string, };
+
+export type GetHttpRequestActionsResponse = { actions: Array<HttpRequestAction>, pluginRefId: string, };
+
+export type GetHttpRequestByIdRequest = { id: string, };
+
+export type GetHttpRequestByIdResponse = { httpRequest: HttpRequest | null, };
+
+/**
+ * Ask what a response's body is, before deciding whether to pull it.
+ *
+ * Bodies are addressed by response id and never by path, so where the host
+ * keeps the bytes is its own business.
+ */
+export type GetHttpResponseBodyInfoRequest = { responseId: string, };
+
+export type GetHttpResponseBodyInfoResponse = { 
+/**
+ * How many bytes are stored right now, which is not necessarily what the
+ * `Content-Length` header claimed. Zero when the response has no body.
+ */
+contentLength: number, 
+/**
+ * Whether the response has finished arriving. While it has not, the body
+ * keeps growing past `content_length`, and a reader that wants all of it
+ * asks again.
+ */
+complete: boolean, 
+/**
+ * The response's `Content-Type` header, verbatim, so the reader can pick a
+ * charset.
+ */
+contentType?: string | null, };
+
+export type GetKeyValueRequest = { key: string, };
+
+export type GetKeyValueResponse = { value?: string, };
+
+export type GetTemplateFunctionConfigRequest = { contextId: string, name: string, values: { [key in string]?: JsonPrimitive }, };
+
+export type GetTemplateFunctionConfigResponse = { function: TemplateFunction, pluginRefId: string, };
+
+export type GetTemplateFunctionSummaryResponse = { functions: Array<TemplateFunction>, pluginRefId: string, };
+
+export type GetThemesRequest = Record<string, never>;
+
+export type GetThemesResponse = { themes: Array<Theme>, };
+
+export type GetWebsocketRequestActionsResponse = { actions: Array<WebsocketRequestAction>, pluginRefId: string, };
+
+export type GetWorkspaceActionsResponse = { actions: Array<WorkspaceAction>, pluginRefId: string, };
+
+export type GrpcRequestAction = { label: string, icon?: Icon, };
+
+export type HttpAuthenticationAction = { label: string, icon?: Icon, };
+
+export type HttpHeader = { name: string, value: string, };
+
+export type HttpRequestAction = { label: string, icon?: Icon, };
+
+export type Icon = "alert_triangle" | "check" | "check_circle" | "chevron_down" | "copy" | "info" | "pin" | "search" | "trash" | "_unknown";
+
+export type ImportRequest = { content: string, };
+
+export type ImportResources = { workspaces: Array<Workspace>, environments: Array<Environment>, folders: Array<Folder>, httpRequests: Array<HttpRequest>, grpcRequests: Array<GrpcRequest>, websocketRequests: Array<WebsocketRequest>, };
+
+export type ImportResponse = { 
+/**
+ * Display name of the importer that recognized the input.
+ */
+importer: string, resources: ImportResources, 
+/**
+ * Identifies the same source element across re-parses, keyed by the IDs in `resources`.
+ *
+ * Must come from the document, never from anything the user can rename in Yaak. Only set
+ * for formats that carry their own identifiers; the host derives the rest.
+ */
+sourceKeys?: { [key in string]?: string }, };
+
+export type InternalEvent = { id: string, pluginRefId: string, pluginName: string, replyId: string | null, context: PluginContext, payload: InternalEventPayload, };
+
+export type InternalEventPayload = { "type": "boot_request" } & BootRequest | { "type": "boot_response" } | { "type": "reload_response" } & ReloadResponse | { "type": "terminate_request" } | { "type": "terminate_response" } | { "type": "import_request" } & ImportRequest | { "type": "import_response" } & ImportResponse | { "type": "filter_request" } & FilterRequest | { "type": "filter_response" } & FilterResponse | { "type": "export_http_request_request" } & ExportHttpRequestRequest | { "type": "export_http_request_response" } & ExportHttpRequestResponse | { "type": "send_http_request_request" } & SendHttpRequestRequest | { "type": "send_http_request_response" } & SendHttpRequestResponse | { "type": "list_cookie_names_request" } & ListCookieNamesRequest | { "type": "list_cookie_names_response" } & ListCookieNamesResponse | { "type": "get_cookie_value_request" } & GetCookieValueRequest | { "type": "get_cookie_value_response" } & GetCookieValueResponse | { "type": "get_http_request_actions_request" } & EmptyPayload | { "type": "get_http_request_actions_response" } & GetHttpRequestActionsResponse | { "type": "call_http_request_action_request" } & CallHttpRequestActionRequest | { "type": "get_websocket_request_actions_request" } & EmptyPayload | { "type": "get_websocket_request_actions_response" } & GetWebsocketRequestActionsResponse | { "type": "call_websocket_request_action_request" } & CallWebsocketRequestActionRequest | { "type": "get_workspace_actions_request" } & EmptyPayload | { "type": "get_workspace_actions_response" } & GetWorkspaceActionsResponse | { "type": "call_workspace_action_request" } & CallWorkspaceActionRequest | { "type": "get_folder_actions_request" } & EmptyPayload | { "type": "get_folder_actions_response" } & GetFolderActionsResponse | { "type": "call_folder_action_request" } & CallFolderActionRequest | { "type": "get_grpc_request_actions_request" } & EmptyPayload | { "type": "get_grpc_request_actions_response" } & GetGrpcRequestActionsResponse | { "type": "call_grpc_request_action_request" } & CallGrpcRequestActionRequest | { "type": "get_template_function_summary_request" } & EmptyPayload | { "type": "get_template_function_summary_response" } & GetTemplateFunctionSummaryResponse | { "type": "get_template_function_config_request" } & GetTemplateFunctionConfigRequest | { "type": "get_template_function_config_response" } & GetTemplateFunctionConfigResponse | { "type": "call_template_function_request" } & CallTemplateFunctionRequest | { "type": "call_template_function_response" } & CallTemplateFunctionResponse | { "type": "get_http_authentication_summary_request" } & EmptyPayload | { "type": "get_http_authentication_summary_response" } & GetHttpAuthenticationSummaryResponse | { "type": "get_http_authentication_config_request" } & GetHttpAuthenticationConfigRequest | { "type": "get_http_authentication_config_response" } & GetHttpAuthenticationConfigResponse | { "type": "call_http_authentication_request" } & CallHttpAuthenticationRequest | { "type": "call_http_authentication_response" } & CallHttpAuthenticationResponse | { "type": "call_http_authentication_action_request" } & CallHttpAuthenticationActionRequest | { "type": "call_http_authentication_action_response" } & EmptyPayload | { "type": "copy_text_request" } & CopyTextRequest | { "type": "copy_text_response" } & EmptyPayload | { "type": "render_http_request_request" } & RenderHttpRequestRequest | { "type": "render_http_request_response" } & RenderHttpRequestResponse | { "type": "render_grpc_request_request" } & RenderGrpcRequestRequest | { "type": "render_grpc_request_response" } & RenderGrpcRequestResponse | { "type": "template_render_request" } & TemplateRenderRequest | { "type": "template_render_response" } & TemplateRenderResponse | { "type": "get_key_value_request" } & GetKeyValueRequest | { "type": "get_key_value_response" } & GetKeyValueResponse | { "type": "set_key_value_request" } & SetKeyValueRequest | { "type": "set_key_value_response" } & SetKeyValueResponse | { "type": "delete_key_value_request" } & DeleteKeyValueRequest | { "type": "delete_key_value_response" } & DeleteKeyValueResponse | { "type": "open_window_request" } & OpenWindowRequest | { "type": "window_navigate_event" } & WindowNavigateEvent | { "type": "window_close_event" } | { "type": "close_window_request" } & CloseWindowRequest | { "type": "open_external_url_request" } & OpenExternalUrlRequest | { "type": "open_external_url_response" } & EmptyPayload | { "type": "show_toast_request" } & ShowToastRequest | { "type": "show_toast_response" } & EmptyPayload | { "type": "prompt_text_request" } & PromptTextRequest | { "type": "prompt_text_response" } & PromptTextResponse | { "type": "prompt_form_request" } & PromptFormRequest | { "type": "prompt_form_response" } & PromptFormResponse | { "type": "window_info_request" } & WindowInfoRequest | { "type": "window_info_response" } & WindowInfoResponse | { "type": "list_open_workspaces_request" } & ListOpenWorkspacesRequest | { "type": "list_open_workspaces_response" } & ListOpenWorkspacesResponse | { "type": "get_http_request_by_id_request" } & GetHttpRequestByIdRequest | { "type": "get_http_request_by_id_response" } & GetHttpRequestByIdResponse | { "type": "find_http_responses_request" } & FindHttpResponsesRequest | { "type": "find_http_responses_response" } & FindHttpResponsesResponse | { "type": "get_http_response_body_info_request" } & GetHttpResponseBodyInfoRequest | { "type": "get_http_response_body_info_response" } & GetHttpResponseBodyInfoResponse | { "type": "read_http_response_body_chunk_request" } & ReadHttpResponseBodyChunkRequest | { "type": "read_http_response_body_chunk_response" } & ReadHttpResponseBodyChunkResponse | { "type": "list_http_requests_request" } & ListHttpRequestsRequest | { "type": "list_http_requests_response" } & ListHttpRequestsResponse | { "type": "list_folders_request" } & ListFoldersRequest | { "type": "list_folders_response" } & ListFoldersResponse | { "type": "upsert_model_request" } & UpsertModelRequest | { "type": "upsert_model_response" } & UpsertModelResponse | { "type": "delete_model_request" } & DeleteModelRequest | { "type": "delete_model_response" } & DeleteModelResponse | { "type": "get_themes_request" } & GetThemesRequest | { "type": "get_themes_response" } & GetThemesResponse | { "type": "empty_response" } & EmptyPayload | { "type": "error_response" } & ErrorResponse;
+
+export type JsonPrimitive = string | number | boolean | null;
+
+export type ListCookieNamesRequest = {};
+
+export type ListCookieNamesResponse = { names: Array<string>, };
+
+export type ListFoldersRequest = {};
+
+export type ListFoldersResponse = { folders: Array<Folder>, };
+
+export type ListHttpRequestsRequest = { folderId?: string, };
+
+export type ListHttpRequestsResponse = { httpRequests: Array<HttpRequest>, };
+
+export type ListOpenWorkspacesRequest = Record<string, never>;
+
+export type ListOpenWorkspacesResponse = { workspaces: Array<WorkspaceInfo>, };
+
+export type OpenExternalUrlRequest = { url: string, };
+
+export type OpenWindowRequest = { url: string, 
+/**
+ * Label for the window. If not provided, a random one will be generated.
+ */
+label: string, title?: string, size?: WindowSize, dataDirKey?: string, };
+
+export type PluginContext = { id: string, label: string | null, workspaceId: string | null, };
+
+export type PromptFormRequest = { id: string, title: string, description?: string, inputs: Array<FormInput>, confirmText?: string, cancelText?: string, size?: DialogSize, };
+
+export type PromptFormResponse = { values: { [key in string]?: JsonPrimitive } | null, done?: boolean, };
+
+export type PromptTextRequest = { id: string, title: string, label: string, description?: string, defaultValue?: string, placeholder?: string, 
+/**
+ * Text to add to the confirmation button
+ */
+confirmText?: string, password?: boolean, 
+/**
+ * Text to add to the cancel button
+ */
+cancelText?: string, 
+/**
+ * Require the user to enter a non-empty value
+ */
+required?: boolean, };
+
+export type PromptTextResponse = { value: string | null, };
+
+/**
+ * Pull one window of a response body.
+ *
+ * Reads are idempotent: the bytes live in durable storage, so the same window
+ * can be asked for as many times as the plugin likes.
+ */
+export type ReadHttpResponseBodyChunkRequest = { responseId: string, offset: number, length: number, };
+
+export type ReadHttpResponseBodyChunkResponse = { 
+/**
+ * Base64, because the desktop transport is a WebSocket that only sends
+ * text frames today. A host that can carry binary sends the bytes as they
+ * are and fills this in from them.
+ */
+data: string, 
+/**
+ * Bytes decoded from `data`. Short of the requested length means the body
+ * ended here.
+ */
+length: number, };
+
+export type ReloadResponse = { silent: boolean, };
+
+export type RenderGrpcRequestRequest = { grpcRequest: GrpcRequest, purpose: RenderPurpose, };
+
+export type RenderGrpcRequestResponse = { grpcRequest: GrpcRequest, };
+
+export type RenderHttpRequestRequest = { httpRequest: HttpRequest, purpose: RenderPurpose, };
+
+export type RenderHttpRequestResponse = { httpRequest: HttpRequest, };
+
+export type RenderPurpose = "send" | "preview";
+
+export type SendHttpRequestRequest = { httpRequest: Partial<HttpRequest>,
+/**
+ * Override the environment for this send without changing the active selection.
+ * When omitted, use the host's active environment.
+ */
+environmentId?: string, };
+
+export type SendHttpRequestResponse = { httpResponse: HttpResponse, 
+/**
+ * The body, base64, when the send saved nothing.
+ *
+ * A request with no id behind it produces a response the model store never
+ * sees, so it cannot be read back by id later the way a saved one can.
+ * This is the only copy of it. `None` means the body was stored and should
+ * be read with `read_http_response_body_chunk_request`.
+ */
+body?: string | null, };
+
+export type SetKeyValueRequest = { key: string, value: string, };
+
+export type SetKeyValueResponse = {};
+
+export type ShowToastRequest = { message: string, color?: Color, icon?: Icon, timeout?: number, };
+
+export type TemplateFunction = { name: string, previewType?: TemplateFunctionPreviewType, description?: string, 
+/**
+ * Also support alternative names. This is useful for not breaking existing
+ * tags when changing the `name` property
+ */
+aliases?: Array<string>, args: Array<TemplateFunctionArg>, 
+/**
+ * A list of arg names to show in the inline preview. If not provided, none will be shown (for privacy reasons).
+ */
+previewArgs?: Array<string>, };
+
+/**
+ * Similar to FormInput, but contains
+ */
+export type TemplateFunctionArg = FormInput;
+
+export type TemplateFunctionPreviewType = "live" | "click" | "none";
+
+export type TemplateRenderRequest = { data: JsonValue, purpose: RenderPurpose, };
+
+export type TemplateRenderResponse = { data: JsonValue, };
+
+export type Theme = { 
+/**
+ * How the theme is identified. This should never be changed
+ */
+id: string, 
+/**
+ * The friendly name of the theme to be displayed to the user
+ */
+label: string, 
+/**
+ * Whether the theme will be used for dark or light appearance
+ */
+dark: boolean, 
+/**
+ * The default top-level colors for the theme
+ */
+base: ThemeComponentColors, 
+/**
+ * Optionally override theme for individual UI components for more control
+ */
+components?: ThemeComponents, };
+
+export type ThemeComponentColors = { surface?: string, surfaceHighlight?: string, surfaceActive?: string, text?: string, textSubtle?: string, textSubtlest?: string, border?: string, borderSubtle?: string, borderFocus?: string, shadow?: string, backdrop?: string, selection?: string, primary?: string, secondary?: string, info?: string, success?: string, notice?: string, warning?: string, danger?: string, };
+
+export type ThemeComponents = { dialog?: ThemeComponentColors, menu?: ThemeComponentColors, toast?: ThemeComponentColors, sidebar?: ThemeComponentColors, responsePane?: ThemeComponentColors, appHeader?: ThemeComponentColors, button?: ThemeComponentColors, banner?: ThemeComponentColors, templateTag?: ThemeComponentColors, urlBar?: ThemeComponentColors, editor?: ThemeComponentColors, input?: ThemeComponentColors, };
+
+export type UpsertModelRequest = { model: AnyModel, };
+
+export type UpsertModelResponse = { model: AnyModel, };
+
+export type WebsocketRequestAction = { label: string, icon?: Icon, };
+
+export type WindowInfoRequest = { label: string, };
+
+export type WindowInfoResponse = { requestId: string | null, environmentId: string | null, workspaceId: string | null, label: string, };
+
+export type WindowNavigateEvent = { url: string, };
+
+export type WindowSize = { width: number, height: number, };
+
+export type WorkspaceAction = { label: string, icon?: Icon, };
+
+export type WorkspaceInfo = { id: string, name: string, };
diff --git a/crates/yaak-plugins/bindings/gen_models.ts b/crates/yaak-plugins/bindings/gen_models.ts
new file mode 100644
index 0000000..c03e259
--- /dev/null
+++ b/crates/yaak-plugins/bindings/gen_models.ts
@@ -0,0 +1,514 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type AnyModel =
+  | CookieJar
+  | Environment
+  | Folder
+  | GraphQlIntrospection
+  | GrpcConnection
+  | GrpcEvent
+  | GrpcRequest
+  | HttpRequest
+  | HttpResponse
+  | HttpResponseEvent
+  | ImportSource
+  | KeyValue
+  | Plugin
+  | Settings
+  | SyncState
+  | WebsocketConnection
+  | WebsocketEvent
+  | WebsocketRequest
+  | Workspace
+  | WorkspaceMeta;
+
+export type ClientCertificate = {
+  host: string;
+  port: number | null;
+  crtFile: string | null;
+  keyFile: string | null;
+  pfxFile: string | null;
+  passphrase: string | null;
+  enabled?: boolean;
+};
+
+export type Cookie = {
+  name: string;
+  value: string;
+  domain: CookieDomain;
+  expires: CookieExpires;
+  path: string;
+  secure: boolean;
+  httpOnly: boolean;
+  sameSite: CookieSameSite | null;
+};
+
+export type CookieDomain = { HostOnly: string } | { Suffix: string } | "NotPresent" | "Empty";
+
+export type CookieExpires = { AtUtc: string } | "SessionEnd";
+
+export type CookieJar = {
+  model: "cookie_jar";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  cookies: Array<Cookie>;
+  name: string;
+};
+
+export type CookieSameSite = "Strict" | "Lax" | "None";
+
+export type DnsOverride = {
+  hostname: string;
+  ipv4: Array<string>;
+  ipv6: Array<string>;
+  enabled?: boolean;
+};
+
+export type EditorKeymap = "default" | "vim" | "vscode" | "emacs";
+
+export type EncryptedKey = { encryptedKey: string };
+
+export type Environment = {
+  model: "environment";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  name: string;
+  public: boolean;
+  parentModel: string;
+  parentId: string | null;
+  /**
+   * Variables defined in this environment scope.
+   * Child environments override parent variables by name.
+   */
+  variables: Array<EnvironmentVariable>;
+  color: string | null;
+  sortPriority: number;
+};
+
+export type EnvironmentVariable = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type Folder = {
+  model: "folder";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  sortPriority: number;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type GraphQlIntrospection = {
+  model: "graphql_introspection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  content: string | null;
+};
+
+export type GrpcConnection = {
+  model: "grpc_connection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  elapsed: number;
+  error: string | null;
+  method: string;
+  service: string;
+  status: number;
+  state: GrpcConnectionState;
+  trailers: { [key in string]?: string };
+  url: string;
+};
+
+export type GrpcConnectionState = "initialized" | "connected" | "closed";
+
+export type GrpcEvent = {
+  model: "grpc_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  connectionId: string;
+  content: string;
+  error: string | null;
+  eventType: GrpcEventType;
+  metadata: { [key in string]?: string };
+  status: number | null;
+};
+
+export type GrpcEventType =
+  | "info"
+  | "error"
+  | "client_message"
+  | "server_message"
+  | "connection_start"
+  | "connection_end";
+
+export type GrpcRequest = {
+  model: "grpc_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authenticationType: string | null;
+  authentication: Record<string, any>;
+  description: string;
+  message: string;
+  metadata: Array<HttpRequestHeader>;
+  method: string | null;
+  name: string;
+  service: string | null;
+  sortPriority: number;
+  /**
+   * Server URL (http for plaintext or https for secure)
+   */
+  url: string;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type HttpRequest = {
+  model: "http_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  body: Record<string, any>;
+  bodyType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  method: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type HttpRequestHeader = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type HttpResponse = {
+  model: "http_response";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  contentLength: number | null;
+  contentLengthCompressed: number | null;
+  elapsed: number;
+  elapsedHeaders: number;
+  elapsedDns: number;
+  error: string | null;
+  headers: Array<HttpResponseHeader>;
+  remoteAddr: string | null;
+  requestContentLength: number | null;
+  requestHeaders: Array<HttpResponseHeader>;
+  status: number;
+  statusReason: string | null;
+  state: HttpResponseState;
+  url: string;
+  version: string | null;
+};
+
+export type HttpResponseEvent = {
+  model: "http_response_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  responseId: string;
+  event: HttpResponseEventData;
+};
+
+/**
+ * Serializable representation of HTTP response events for DB storage.
+ * This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
+ * The `From` impl is in yaak-http to avoid circular dependencies.
+ */
+export type HttpResponseEventData =
+  | {
+      type: "setting";
+      name: string;
+      value: string;
+      source_model?: string;
+      source_id?: string;
+      source_name?: string;
+    }
+  | { type: "info"; message: string }
+  | {
+      type: "redirect";
+      url: string;
+      status: number;
+      behavior: string;
+      dropped_body: boolean;
+      dropped_headers: Array<string>;
+    }
+  | {
+      type: "send_url";
+      method: string;
+      scheme: string;
+      username: string;
+      password: string;
+      host: string;
+      port: number;
+      path: string;
+      query: string;
+      fragment: string;
+    }
+  | { type: "receive_url"; version: string; status: string }
+  | { type: "header_up"; name: string; value: string }
+  | { type: "header_down"; name: string; value: string }
+  | { type: "chunk_sent"; bytes: number }
+  | { type: "chunk_received"; bytes: number }
+  | {
+      type: "dns_resolved";
+      hostname: string;
+      addresses: Array<string>;
+      duration: bigint;
+      overridden: boolean;
+    };
+
+export type HttpResponseHeader = { name: string; value: string };
+
+export type HttpResponseState = "initialized" | "connected" | "closed";
+
+export type HttpUrlParameter = {
+  enabled?: boolean;
+  /**
+   * Colon-prefixed parameters are treated as path parameters if they match, like `/users/:id`
+   * Other entries are appended as query parameters
+   */
+  name: string;
+  value: string;
+  id?: string;
+};
+
+export type HttpVersion = "auto" | "http1" | "http2";
+
+export type ImportSource = {
+  model: "import_source";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  importer: string;
+  origin: string;
+  originLabel: string;
+  lastImportedAt: string;
+};
+
+export type InheritedBoolSetting = { enabled?: boolean; value: boolean };
+
+export type InheritedHttpVersionSetting = { enabled?: boolean; value: HttpVersion };
+
+export type InheritedIntSetting = { enabled?: boolean; value: number };
+
+export type KeyValue = {
+  model: "key_value";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  key: string;
+  namespace: string;
+  value: string;
+};
+
+export type Plugin = {
+  model: "plugin";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  checkedAt: string | null;
+  directory: string;
+  enabled: boolean;
+  url: string | null;
+  source: PluginSource;
+};
+
+export type PluginSource = "bundled" | "filesystem" | "registry";
+
+export type ProxySetting =
+  | {
+      type: "enabled";
+      http: string;
+      https: string;
+      auth: ProxySettingAuth | null;
+      bypass: string;
+      disabled: boolean;
+    }
+  | { type: "disabled" };
+
+export type ProxySettingAuth = { user: string; password: string };
+
+export type Settings = {
+  model: "settings";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  appearance: string;
+  clientCertificates: Array<ClientCertificate>;
+  coloredMethods: boolean;
+  editorFont: string | null;
+  editorFontSize: number;
+  editorKeymap: EditorKeymap;
+  editorSoftWrap: boolean;
+  hideWindowControls: boolean;
+  useNativeTitlebar: boolean;
+  interfaceFont: string | null;
+  interfaceFontSize: number;
+  interfaceScale: number;
+  openWorkspaceNewWindow: boolean | null;
+  proxy: ProxySetting | null;
+  themeDark: string;
+  themeLight: string;
+  updateChannel: string;
+  hideLicenseBadge: boolean;
+  promptFeedback: boolean;
+  autoupdate: boolean;
+  autoDownloadUpdates: boolean;
+  checkNotifications: boolean;
+  hotkeys: { [key in string]?: Array<string> };
+};
+
+export type SyncState = {
+  model: "sync_state";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  flushedAt: string;
+  modelId: string;
+  checksum: string;
+  relPath: string;
+  syncDir: string;
+};
+
+export type WebsocketConnection = {
+  model: "websocket_connection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  elapsed: number;
+  error: string | null;
+  headers: Array<HttpResponseHeader>;
+  state: WebsocketConnectionState;
+  status: number;
+  url: string;
+};
+
+export type WebsocketConnectionState = "initialized" | "connected" | "closing" | "closed";
+
+export type WebsocketEvent = {
+  model: "websocket_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  connectionId: string;
+  isServer: boolean;
+  message: Array<number>;
+  messageType: WebsocketEventType;
+};
+
+export type WebsocketEventType =
+  | "binary"
+  | "close"
+  | "error"
+  | "frame"
+  | "open"
+  | "ping"
+  | "pong"
+  | "text";
+
+export type WebsocketRequest = {
+  model: "websocket_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  message: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type Workspace = {
+  model: "workspace";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  encryptionKeyChallenge: string | null;
+  settingValidateCertificates: boolean;
+  settingFollowRedirects: boolean;
+  settingRequestTimeout: number;
+  settingRequestMessageSize: number;
+  settingDnsOverrides: Array<DnsOverride>;
+  settingSendCookies: boolean;
+  settingStoreCookies: boolean;
+  settingHttpVersion: HttpVersion;
+};
+
+export type WorkspaceMeta = {
+  model: "workspace_meta";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  encryptionKey: EncryptedKey | null;
+  settingSyncDir: string | null;
+};
diff --git a/crates/yaak-plugins/bindings/gen_search.ts b/crates/yaak-plugins/bindings/gen_search.ts
new file mode 100644
index 0000000..dd3c1ad
--- /dev/null
+++ b/crates/yaak-plugins/bindings/gen_search.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type PluginMetadata = { version: string, name: string, displayName: string, description: string | null, homepageUrl: string | null, repositoryUrl: string | null, };
+
+export type PluginVersion = { id: string, version: string, url: string, description: string | null, name: string, displayName: string, homepageUrl: string | null, repositoryUrl: string | null, checksum: string, readme: string | null, yanked: boolean, };
diff --git a/crates/yaak-plugins/bindings/serde_json/JsonValue.ts b/crates/yaak-plugins/bindings/serde_json/JsonValue.ts
new file mode 100644
index 0000000..3ad5da8
--- /dev/null
+++ b/crates/yaak-plugins/bindings/serde_json/JsonValue.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type JsonValue = number | string | boolean | Array<JsonValue> | { [key in string]?: JsonValue } | null;
diff --git a/crates/yaak-plugins/index.ts b/crates/yaak-plugins/index.ts
new file mode 100644
index 0000000..7358f17
--- /dev/null
+++ b/crates/yaak-plugins/index.ts
@@ -0,0 +1,30 @@
+import { platform } from "@yaakapp-internal/platform";
+import { PluginNameVersion, PluginSearchResponse, PluginUpdatesResponse } from "./bindings/gen_api";
+
+export * from "./bindings/gen_models";
+export * from "./bindings/gen_events";
+export * from "./bindings/gen_search";
+
+export async function searchPlugins(query: string) {
+  return platform.rpc<PluginSearchResponse>("cmd_plugins_search", { query });
+}
+
+export async function installPlugin(name: string, version: string | null) {
+  return platform.rpc<void>("cmd_plugins_install", { name, version });
+}
+
+export async function uninstallPlugin(pluginId: string) {
+  return platform.rpc<void>("cmd_plugins_uninstall", { pluginId });
+}
+
+export async function checkPluginUpdates() {
+  return platform.rpc<PluginUpdatesResponse>("cmd_plugins_updates", {});
+}
+
+export async function updateAllPlugins() {
+  return platform.rpc<PluginNameVersion[]>("cmd_plugins_update_all", {});
+}
+
+export async function installPluginFromDirectory(directory: string) {
+  return platform.rpc<void>("cmd_plugins_install_from_directory", { directory });
+}
diff --git a/crates/yaak-plugins/package.json b/crates/yaak-plugins/package.json
new file mode 100644
index 0000000..25496a1
--- /dev/null
+++ b/crates/yaak-plugins/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/plugins",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates/yaak-plugins/src/api.rs b/crates/yaak-plugins/src/api.rs
new file mode 100644
index 0000000..f09f92c
--- /dev/null
+++ b/crates/yaak-plugins/src/api.rs
@@ -0,0 +1,135 @@
+use crate::error::Error::ApiErr;
+use crate::error::Result;
+use crate::plugin_meta::get_plugin_meta;
+use log::{info, warn};
+use reqwest::{Client, Response, Url};
+use serde::{Deserialize, Serialize};
+use std::path::Path;
+use std::str::FromStr;
+use ts_rs::TS;
+use yaak_models::models::{Plugin, PluginSource};
+
+/// Get plugin info from the registry.
+pub async fn get_plugin(
+    http_client: &Client,
+    name: &str,
+    version: Option<String>,
+) -> Result<PluginVersion> {
+    info!("Getting plugin: {name} {version:?}");
+    let mut url = build_url(&format!("/{name}"));
+    if let Some(version) = version {
+        let mut query_pairs = url.query_pairs_mut();
+        query_pairs.append_pair("version", &version);
+    };
+    let resp = http_client.get(url.clone()).send().await?;
+    if !resp.status().is_success() {
+        return Err(ApiErr(format!("{} response to {}", resp.status(), url.to_string())));
+    }
+    Ok(resp.json().await?)
+}
+
+/// Download the plugin archive from the registry.
+pub async fn download_plugin_archive(
+    http_client: &Client,
+    plugin_version: &PluginVersion,
+) -> Result<Response> {
+    let name = plugin_version.name.clone();
+    let version = plugin_version.version.clone();
+    info!("Downloading plugin: {name} {version}");
+    let mut url = build_url(&format!("/{}/download", name));
+    {
+        let mut query_pairs = url.query_pairs_mut();
+        query_pairs.append_pair("version", &version);
+    };
+    let resp = http_client.get(url.clone()).send().await?;
+    if !resp.status().is_success() {
+        warn!("Failed to download plugin: {name} {version}");
+        return Err(ApiErr(format!("{} response to {}", resp.status(), url.to_string())));
+    }
+    info!("Downloaded plugin: {url}");
+    Ok(resp)
+}
+
+/// Check for plugin updates.
+/// Takes a list of plugins to check against the registry.
+pub async fn check_plugin_updates(
+    http_client: &Client,
+    plugins: Vec<Plugin>,
+) -> Result<PluginUpdatesResponse> {
+    let name_versions: Vec<PluginNameVersion> = plugins
+        .into_iter()
+        .filter(|p| matches!(p.source, PluginSource::Registry)) // Only check registry-installed plugins
+        .filter_map(|p| match get_plugin_meta(&Path::new(&p.directory)) {
+            Ok(m) => Some(PluginNameVersion { name: m.name, version: m.version }),
+            Err(e) => {
+                warn!("Failed to get plugin metadata: {}", e);
+                None
+            }
+        })
+        .collect();
+
+    let url = build_url("/updates");
+    let body = serde_json::to_vec(&PluginUpdatesResponse { plugins: name_versions })?;
+    let resp = http_client.post(url.clone()).body(body).send().await?;
+    if !resp.status().is_success() {
+        return Err(ApiErr(format!("{} response to {}", resp.status(), url.to_string())));
+    }
+
+    let results: PluginUpdatesResponse = resp.json().await?;
+    Ok(results)
+}
+
+/// Search for plugins in the registry.
+pub async fn search_plugins(http_client: &Client, query: &str) -> Result<PluginSearchResponse> {
+    let mut url = build_url("/search");
+    {
+        let mut query_pairs = url.query_pairs_mut();
+        query_pairs.append_pair("query", query);
+    };
+    let resp = http_client.get(url).send().await?;
+    Ok(resp.json().await?)
+}
+
+fn build_url(path: &str) -> Url {
+    let base_url = "https://api.yaak.app/api/v1/plugins";
+    Url::from_str(&format!("{base_url}{path}")).unwrap()
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_search.ts")]
+pub struct PluginVersion {
+    pub id: String,
+    pub version: String,
+    pub url: String,
+    pub description: Option<String>,
+    pub name: String,
+    pub display_name: String,
+    pub homepage_url: Option<String>,
+    pub repository_url: Option<String>,
+    pub checksum: String,
+    pub readme: Option<String>,
+    pub yanked: bool,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_api.ts")]
+pub struct PluginSearchResponse {
+    pub plugins: Vec<PluginVersion>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_api.ts")]
+pub struct PluginNameVersion {
+    pub name: String,
+    pub version: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_api.ts")]
+pub struct PluginUpdatesResponse {
+    pub plugins: Vec<PluginNameVersion>,
+}
diff --git a/crates/yaak-plugins/src/checksum.rs b/crates/yaak-plugins/src/checksum.rs
new file mode 100644
index 0000000..6b525c7
--- /dev/null
+++ b/crates/yaak-plugins/src/checksum.rs
@@ -0,0 +1,8 @@
+use sha2::{Digest, Sha256};
+
+pub(crate) fn compute_checksum(bytes: impl AsRef<[u8]>) -> String {
+    let mut hasher = Sha256::new();
+    hasher.update(&bytes);
+    let hash = hasher.finalize();
+    hex::encode(hash)
+}
diff --git a/crates/yaak-plugins/src/error.rs b/crates/yaak-plugins/src/error.rs
new file mode 100644
index 0000000..944874e
--- /dev/null
+++ b/crates/yaak-plugins/src/error.rs
@@ -0,0 +1,64 @@
+use crate::events::InternalEvent;
+use serde::{Serialize, Serializer};
+use thiserror::Error;
+use tokio::io;
+use tokio::sync::mpsc::error::SendError;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error(transparent)]
+    CryptoErr(#[from] yaak_crypto::error::Error),
+
+    #[error(transparent)]
+    DbErr(#[from] yaak_models::error::Error),
+
+    #[error(transparent)]
+    TemplateErr(#[from] yaak_templates::error::Error),
+
+    #[error("IO error: {0}")]
+    IoErr(#[from] io::Error),
+
+    #[error("Grpc send error: {0}")]
+    GrpcSendErr(#[from] SendError<InternalEvent>),
+
+    #[error("Failed to send request: {0}")]
+    RequestError(#[from] reqwest::Error),
+
+    #[error("JSON error: {0}")]
+    JsonErr(#[from] serde_json::Error),
+
+    #[error("API Error: {0}")]
+    ApiErr(String),
+
+    #[error("Timeout elapsed: {0}")]
+    TimeoutElapsed(#[from] tokio::time::error::Elapsed),
+
+    #[error("Plugin not found: {0}")]
+    PluginNotFoundErr(String),
+
+    #[error("Auth plugin not found: {0}")]
+    AuthPluginNotFound(String),
+
+    #[error("Plugin error: {0}")]
+    PluginErr(String),
+
+    #[error("zip error: {0}")]
+    ZipError(#[from] zip::result::ZipError),
+
+    #[error("Client not initialized error")]
+    ClientNotInitializedErr,
+
+    #[error("Unknown event received")]
+    UnknownEventErr,
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-plugins/src/events.rs b/crates/yaak-plugins/src/events.rs
new file mode 100644
index 0000000..345620f
--- /dev/null
+++ b/crates/yaak-plugins/src/events.rs
@@ -0,0 +1,1639 @@
+use serde::{Deserialize, Serialize};
+use std::collections::{BTreeMap, HashMap};
+use ts_rs::TS;
+use yaak_models::models::{
+    AnyModel, Environment, Folder, GrpcRequest, HttpRequest, HttpResponse, WebsocketRequest,
+    Workspace,
+};
+use yaak_models::util::generate_prefixed_id;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct InternalEvent {
+    pub id: String,
+    pub plugin_ref_id: String,
+    pub plugin_name: String,
+    pub reply_id: Option<String>,
+    pub context: PluginContext,
+    pub payload: InternalEventPayload,
+}
+
+/// Special type used to deserialize everything but the payload. This is so we can
+/// catch any plugin-related type errors, since payload is sent by the plugin author
+/// and all other fields are sent by Yaak first-party code.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub(crate) struct InternalEventRawPayload {
+    pub id: String,
+    pub plugin_ref_id: String,
+    pub plugin_name: String,
+    pub reply_id: Option<String>,
+    pub context: PluginContext,
+    pub payload: serde_json::Value,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct PluginContext {
+    pub id: String,
+    pub label: Option<String>,
+    pub workspace_id: Option<String>,
+}
+
+impl PluginContext {
+    pub fn new_empty() -> Self {
+        Self { id: "default".to_string(), label: None, workspace_id: None }
+    }
+
+    pub fn new(label: Option<String>, workspace_id: Option<String>) -> Self {
+        Self { label, workspace_id, id: generate_prefixed_id("pctx") }
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum InternalEventPayload {
+    BootRequest(BootRequest),
+    BootResponse,
+
+    ReloadResponse(ReloadResponse),
+
+    TerminateRequest,
+    TerminateResponse,
+
+    ImportRequest(ImportRequest),
+    ImportResponse(ImportResponse),
+
+    FilterRequest(FilterRequest),
+    FilterResponse(FilterResponse),
+
+    ExportHttpRequestRequest(ExportHttpRequestRequest),
+    ExportHttpRequestResponse(ExportHttpRequestResponse),
+
+    SendHttpRequestRequest(SendHttpRequestRequest),
+    SendHttpRequestResponse(SendHttpRequestResponse),
+
+    ListCookieNamesRequest(ListCookieNamesRequest),
+    ListCookieNamesResponse(ListCookieNamesResponse),
+    GetCookieValueRequest(GetCookieValueRequest),
+    GetCookieValueResponse(GetCookieValueResponse),
+
+    // HTTP Request Actions
+    GetHttpRequestActionsRequest(EmptyPayload),
+    GetHttpRequestActionsResponse(GetHttpRequestActionsResponse),
+    CallHttpRequestActionRequest(CallHttpRequestActionRequest),
+
+    // WebSocket Request Actions
+    GetWebsocketRequestActionsRequest(EmptyPayload),
+    GetWebsocketRequestActionsResponse(GetWebsocketRequestActionsResponse),
+    CallWebsocketRequestActionRequest(CallWebsocketRequestActionRequest),
+
+    // Workspace Actions
+    GetWorkspaceActionsRequest(EmptyPayload),
+    GetWorkspaceActionsResponse(GetWorkspaceActionsResponse),
+    CallWorkspaceActionRequest(CallWorkspaceActionRequest),
+
+    // Folder Actions
+    GetFolderActionsRequest(EmptyPayload),
+    GetFolderActionsResponse(GetFolderActionsResponse),
+    CallFolderActionRequest(CallFolderActionRequest),
+
+    // Grpc Request Actions
+    GetGrpcRequestActionsRequest(EmptyPayload),
+    GetGrpcRequestActionsResponse(GetGrpcRequestActionsResponse),
+    CallGrpcRequestActionRequest(CallGrpcRequestActionRequest),
+
+    // Template Functions
+    GetTemplateFunctionSummaryRequest(EmptyPayload),
+    GetTemplateFunctionSummaryResponse(GetTemplateFunctionSummaryResponse),
+    GetTemplateFunctionConfigRequest(GetTemplateFunctionConfigRequest),
+    GetTemplateFunctionConfigResponse(GetTemplateFunctionConfigResponse),
+    CallTemplateFunctionRequest(CallTemplateFunctionRequest),
+    CallTemplateFunctionResponse(CallTemplateFunctionResponse),
+
+    // Http Authentication
+    GetHttpAuthenticationSummaryRequest(EmptyPayload),
+    GetHttpAuthenticationSummaryResponse(GetHttpAuthenticationSummaryResponse),
+    GetHttpAuthenticationConfigRequest(GetHttpAuthenticationConfigRequest),
+    GetHttpAuthenticationConfigResponse(GetHttpAuthenticationConfigResponse),
+    CallHttpAuthenticationRequest(CallHttpAuthenticationRequest),
+    CallHttpAuthenticationResponse(CallHttpAuthenticationResponse),
+    CallHttpAuthenticationActionRequest(CallHttpAuthenticationActionRequest),
+    CallHttpAuthenticationActionResponse(EmptyPayload),
+
+    CopyTextRequest(CopyTextRequest),
+    CopyTextResponse(EmptyPayload),
+
+    RenderHttpRequestRequest(RenderHttpRequestRequest),
+    RenderHttpRequestResponse(RenderHttpRequestResponse),
+
+    RenderGrpcRequestRequest(RenderGrpcRequestRequest),
+    RenderGrpcRequestResponse(RenderGrpcRequestResponse),
+
+    TemplateRenderRequest(TemplateRenderRequest),
+    TemplateRenderResponse(TemplateRenderResponse),
+
+    GetKeyValueRequest(GetKeyValueRequest),
+    GetKeyValueResponse(GetKeyValueResponse),
+    SetKeyValueRequest(SetKeyValueRequest),
+    SetKeyValueResponse(SetKeyValueResponse),
+    DeleteKeyValueRequest(DeleteKeyValueRequest),
+    DeleteKeyValueResponse(DeleteKeyValueResponse),
+
+    OpenWindowRequest(OpenWindowRequest),
+    WindowNavigateEvent(WindowNavigateEvent),
+    WindowCloseEvent,
+    CloseWindowRequest(CloseWindowRequest),
+
+    OpenExternalUrlRequest(OpenExternalUrlRequest),
+    OpenExternalUrlResponse(EmptyPayload),
+
+    ShowToastRequest(ShowToastRequest),
+    ShowToastResponse(EmptyPayload),
+
+    PromptTextRequest(PromptTextRequest),
+    PromptTextResponse(PromptTextResponse),
+
+    PromptFormRequest(PromptFormRequest),
+    PromptFormResponse(PromptFormResponse),
+
+    WindowInfoRequest(WindowInfoRequest),
+    WindowInfoResponse(WindowInfoResponse),
+
+    ListOpenWorkspacesRequest(ListOpenWorkspacesRequest),
+    ListOpenWorkspacesResponse(ListOpenWorkspacesResponse),
+
+    GetHttpRequestByIdRequest(GetHttpRequestByIdRequest),
+    GetHttpRequestByIdResponse(GetHttpRequestByIdResponse),
+
+    FindHttpResponsesRequest(FindHttpResponsesRequest),
+    FindHttpResponsesResponse(FindHttpResponsesResponse),
+
+    GetHttpResponseBodyInfoRequest(GetHttpResponseBodyInfoRequest),
+    GetHttpResponseBodyInfoResponse(GetHttpResponseBodyInfoResponse),
+    ReadHttpResponseBodyChunkRequest(ReadHttpResponseBodyChunkRequest),
+    ReadHttpResponseBodyChunkResponse(ReadHttpResponseBodyChunkResponse),
+
+    ListHttpRequestsRequest(ListHttpRequestsRequest),
+    ListHttpRequestsResponse(ListHttpRequestsResponse),
+    ListFoldersRequest(ListFoldersRequest),
+    ListFoldersResponse(ListFoldersResponse),
+
+    UpsertModelRequest(UpsertModelRequest),
+    UpsertModelResponse(UpsertModelResponse),
+
+    DeleteModelRequest(DeleteModelRequest),
+    DeleteModelResponse(DeleteModelResponse),
+
+    GetThemesRequest(GetThemesRequest),
+    GetThemesResponse(GetThemesResponse),
+
+    /// Returned when a plugin doesn't get run, just so the server
+    /// has something to listen for
+    EmptyResponse(EmptyPayload),
+
+    ErrorResponse(ErrorResponse),
+}
+
+impl InternalEventPayload {
+    pub fn type_name(&self) -> String {
+        if let Ok(serde_json::Value::Object(map)) = serde_json::to_value(self) {
+            map.get("type").map(|s| s.as_str().unwrap_or("unknown").to_string())
+        } else {
+            None
+        }
+        .unwrap_or("invalid_event".to_string())
+    }
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default)]
+#[ts(export, type = "{}", export_to = "gen_events.ts")]
+pub struct EmptyPayload {}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default)]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ErrorResponse {
+    pub error: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct BootRequest {
+    pub dir: String,
+    pub watch: bool,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ReloadResponse {
+    pub silent: bool,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ImportRequest {
+    pub content: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ImportResponse {
+    /// Display name of the importer that recognized the input.
+    pub importer: String,
+    pub resources: ImportResources,
+
+    /// Identifies the same source element across re-parses, keyed by the IDs in `resources`.
+    ///
+    /// Must come from the document, never from anything the user can rename in Yaak. Only set
+    /// for formats that carry their own identifiers; the host derives the rest.
+    #[ts(optional)]
+    pub source_keys: Option<BTreeMap<String, String>>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FilterRequest {
+    pub content: String,
+    pub filter: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FilterResponse {
+    pub content: String,
+    #[ts(optional)]
+    pub error: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ExportHttpRequestRequest {
+    pub http_request: HttpRequest,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ExportHttpRequestResponse {
+    pub content: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct SendHttpRequestRequest {
+    #[ts(type = "Partial<HttpRequest>")]
+    pub http_request: HttpRequest,
+    /// Override the environment for this send without changing the active selection.
+    /// When omitted, use the host's active environment.
+    #[ts(optional)]
+    pub environment_id: Option<String>,
+}
+
+#[cfg(test)]
+mod send_http_request_tests {
+    use super::SendHttpRequestRequest;
+    use serde_json::json;
+
+    #[test]
+    fn environment_override_survives_the_plugin_wire_format() {
+        let request: SendHttpRequestRequest = serde_json::from_value(json!({
+            "httpRequest": { "id": "rq_test" }, "environmentId": "ev_staging"
+        }))
+        .unwrap();
+        assert_eq!(request.environment_id.as_deref(), Some("ev_staging"));
+        assert_eq!(serde_json::to_value(request).unwrap()["environmentId"], "ev_staging");
+    }
+
+    #[test]
+    fn older_plugins_can_omit_the_environment_override() {
+        let request: SendHttpRequestRequest = serde_json::from_value(json!({
+            "httpRequest": { "id": "rq_test" }
+        }))
+        .unwrap();
+        assert_eq!(request.environment_id, None);
+        assert_eq!(request.http_request.id, "rq_test");
+    }
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct SendHttpRequestResponse {
+    pub http_response: HttpResponse,
+
+    /// The body, base64, when the send saved nothing.
+    ///
+    /// A request with no id behind it produces a response the model store never
+    /// sees, so it cannot be read back by id later the way a saved one can.
+    /// This is the only copy of it. `None` means the body was stored and should
+    /// be read with `read_http_response_body_chunk_request`.
+    #[ts(optional = nullable)]
+    pub body: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default)]
+#[ts(export, type = "{}", export_to = "gen_events.ts")]
+pub struct ListCookieNamesRequest {}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ListCookieNamesResponse {
+    pub names: Vec<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetCookieValueRequest {
+    pub name: String,
+
+    #[ts(optional = nullable)]
+    pub domain: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetCookieValueResponse {
+    pub value: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CopyTextRequest {
+    pub text: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct RenderHttpRequestRequest {
+    pub http_request: HttpRequest,
+    pub purpose: RenderPurpose,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct RenderHttpRequestResponse {
+    pub http_request: HttpRequest,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct RenderGrpcRequestRequest {
+    pub grpc_request: GrpcRequest,
+    pub purpose: RenderPurpose,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct RenderGrpcRequestResponse {
+    pub grpc_request: GrpcRequest,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetThemesRequest {}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ThemeComponents {
+    #[ts(optional)]
+    pub dialog: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub menu: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub toast: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub sidebar: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub response_pane: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub app_header: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub button: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub banner: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub template_tag: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub url_bar: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub editor: Option<ThemeComponentColors>,
+    #[ts(optional)]
+    pub input: Option<ThemeComponentColors>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ThemeComponentColors {
+    #[ts(optional)]
+    pub surface: Option<String>,
+    #[ts(optional)]
+    pub surface_highlight: Option<String>,
+    #[ts(optional)]
+    pub surface_active: Option<String>,
+
+    #[ts(optional)]
+    pub text: Option<String>,
+    #[ts(optional)]
+    pub text_subtle: Option<String>,
+    #[ts(optional)]
+    pub text_subtlest: Option<String>,
+
+    #[ts(optional)]
+    pub border: Option<String>,
+    #[ts(optional)]
+    pub border_subtle: Option<String>,
+    #[ts(optional)]
+    pub border_focus: Option<String>,
+
+    #[ts(optional)]
+    pub shadow: Option<String>,
+    #[ts(optional)]
+    pub backdrop: Option<String>,
+    #[ts(optional)]
+    pub selection: Option<String>,
+
+    #[ts(optional)]
+    pub primary: Option<String>,
+    #[ts(optional)]
+    pub secondary: Option<String>,
+    #[ts(optional)]
+    pub info: Option<String>,
+    #[ts(optional)]
+    pub success: Option<String>,
+    #[ts(optional)]
+    pub notice: Option<String>,
+    #[ts(optional)]
+    pub warning: Option<String>,
+    #[ts(optional)]
+    pub danger: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct Theme {
+    /// How the theme is identified. This should never be changed
+    pub id: String,
+    /// The friendly name of the theme to be displayed to the user
+    pub label: String,
+    /// Whether the theme will be used for dark or light appearance
+    pub dark: bool,
+    /// The default top-level colors for the theme
+    pub base: ThemeComponentColors,
+    /// Optionally override theme for individual UI components for more control
+    #[ts(optional)]
+    pub components: Option<ThemeComponents>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetThemesResponse {
+    pub themes: Vec<Theme>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct TemplateRenderRequest {
+    pub data: serde_json::Value,
+    pub purpose: RenderPurpose,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct TemplateRenderResponse {
+    pub data: serde_json::Value,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct OpenWindowRequest {
+    pub url: String,
+    /// Label for the window. If not provided, a random one will be generated.
+    pub label: String,
+
+    #[ts(optional)]
+    pub title: Option<String>,
+
+    #[ts(optional)]
+    pub size: Option<WindowSize>,
+
+    #[ts(optional)]
+    pub data_dir_key: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct OpenExternalUrlRequest {
+    pub url: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct WindowSize {
+    pub width: f64,
+    pub height: f64,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CloseWindowRequest {
+    pub label: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct WindowNavigateEvent {
+    pub url: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ShowToastRequest {
+    pub message: String,
+
+    #[ts(optional)]
+    pub color: Option<Color>,
+
+    #[ts(optional)]
+    pub icon: Option<Icon>,
+
+    #[ts(optional)]
+    pub timeout: Option<i32>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct PromptTextRequest {
+    // A unique ID to identify the prompt (eg. "enter-password")
+    pub id: String,
+    // Title to show on the prompt dialog
+    pub title: String,
+    // Text to show on the label above the input
+    pub label: String,
+    #[ts(optional)]
+    pub description: Option<String>,
+    #[ts(optional)]
+    pub default_value: Option<String>,
+    #[ts(optional)]
+    pub placeholder: Option<String>,
+    /// Text to add to the confirmation button
+    #[ts(optional)]
+    pub confirm_text: Option<String>,
+    #[ts(optional)]
+    pub password: Option<bool>,
+    /// Text to add to the cancel button
+    #[ts(optional)]
+    pub cancel_text: Option<String>,
+    /// Require the user to enter a non-empty value
+    #[ts(optional)]
+    pub required: Option<bool>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct PromptTextResponse {
+    pub value: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct PromptFormRequest {
+    pub id: String,
+    pub title: String,
+    #[ts(optional)]
+    pub description: Option<String>,
+    pub inputs: Vec<FormInput>,
+    #[ts(optional)]
+    pub confirm_text: Option<String>,
+    #[ts(optional)]
+    pub cancel_text: Option<String>,
+    #[ts(optional)]
+    pub size: Option<DialogSize>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum DialogSize {
+    Sm,
+    Md,
+    Lg,
+    Full,
+    Dynamic,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct PromptFormResponse {
+    pub values: Option<HashMap<String, JsonPrimitive>>,
+    #[ts(optional)]
+    pub done: Option<bool>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct WindowInfoRequest {
+    pub label: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct WindowInfoResponse {
+    pub request_id: Option<String>,
+    pub environment_id: Option<String>,
+    pub workspace_id: Option<String>,
+    pub label: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ListOpenWorkspacesRequest {}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ListOpenWorkspacesResponse {
+    pub workspaces: Vec<WorkspaceInfo>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct WorkspaceInfo {
+    pub id: String,
+    pub name: String,
+    #[ts(skip)]
+    pub label: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum Color {
+    Primary,
+    Secondary,
+    Info,
+    Success,
+    Notice,
+    Warning,
+    Danger,
+}
+
+impl Default for Color {
+    fn default() -> Self {
+        Color::Secondary
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum Icon {
+    AlertTriangle,
+    Check,
+    CheckCircle,
+    ChevronDown,
+    Copy,
+    Info,
+    Pin,
+    Search,
+    Trash,
+
+    #[serde(untagged)]
+    #[ts(type = "\"_unknown\"")]
+    _Unknown(String),
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetHttpAuthenticationSummaryResponse {
+    pub name: String,
+    pub label: String,
+    pub short_label: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct HttpAuthenticationAction {
+    pub label: String,
+
+    #[ts(optional)]
+    pub icon: Option<Icon>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetHttpAuthenticationConfigRequest {
+    pub context_id: String,
+    pub values: HashMap<String, JsonPrimitive>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetHttpAuthenticationConfigResponse {
+    pub args: Vec<FormInput>,
+    pub plugin_ref_id: String,
+
+    #[ts(optional)]
+    pub actions: Option<Vec<HttpAuthenticationAction>>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct HttpHeader {
+    pub name: String,
+    pub value: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallHttpAuthenticationRequest {
+    pub context_id: String,
+    pub values: HashMap<String, JsonPrimitive>,
+    pub method: String,
+    pub url: String,
+    pub headers: Vec<HttpHeader>,
+    pub body: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallHttpAuthenticationActionRequest {
+    pub index: i32,
+    pub plugin_ref_id: String,
+    pub args: CallHttpAuthenticationActionArgs,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallHttpAuthenticationActionArgs {
+    pub context_id: String,
+    pub values: HashMap<String, JsonPrimitive>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(untagged)]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum JsonPrimitive {
+    String(String),
+    Number(f64),
+    Boolean(bool),
+    Null,
+}
+
+impl From<serde_json::Value> for JsonPrimitive {
+    fn from(value: serde_json::Value) -> Self {
+        match value {
+            serde_json::Value::Null => JsonPrimitive::Null,
+            serde_json::Value::Bool(b) => JsonPrimitive::Boolean(b),
+            serde_json::Value::Number(n) => JsonPrimitive::Number(n.as_f64().unwrap()),
+            serde_json::Value::String(s) => JsonPrimitive::String(s),
+            v => panic!("Unsupported JSON primitive type {:?}", v),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallHttpAuthenticationResponse {
+    /// HTTP headers to add to the request. Existing headers will be replaced, while
+    /// new headers will be added.
+    #[ts(optional)]
+    pub set_headers: Option<Vec<HttpHeader>>,
+
+    /// Query parameters to add to the request. Existing params will be replaced, while
+    /// new params will be added.
+    #[ts(optional)]
+    pub set_query_parameters: Option<Vec<HttpHeader>>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetTemplateFunctionSummaryResponse {
+    pub functions: Vec<TemplateFunction>,
+    pub plugin_ref_id: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetTemplateFunctionConfigRequest {
+    pub context_id: String,
+    pub name: String,
+    pub values: HashMap<String, JsonPrimitive>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetTemplateFunctionConfigResponse {
+    pub function: TemplateFunction,
+    pub plugin_ref_id: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum TemplateFunctionPreviewType {
+    Live,
+    Click,
+    None,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct TemplateFunction {
+    pub name: String,
+
+    #[ts(optional)]
+    pub preview_type: Option<TemplateFunctionPreviewType>,
+
+    #[ts(optional)]
+    pub description: Option<String>,
+
+    /// Also support alternative names. This is useful for not breaking existing
+    /// tags when changing the `name` property
+    #[ts(optional)]
+    pub aliases: Option<Vec<String>>,
+    pub args: Vec<TemplateFunctionArg>,
+
+    /// A list of arg names to show in the inline preview. If not provided, none will be shown (for privacy reasons).
+    #[ts(optional)]
+    pub preview_args: Option<Vec<String>>,
+}
+
+/// Similar to FormInput, but contains
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", untagged)]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum TemplateFunctionArg {
+    FormInput(FormInput),
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum FormInput {
+    Text(FormInputText),
+    Editor(FormInputEditor),
+    Select(FormInputSelect),
+    Checkbox(FormInputCheckbox),
+    File(FormInputFile),
+    HttpRequest(FormInputHttpRequest),
+    Accordion(FormInputAccordion),
+    HStack(FormInputHStack),
+    Banner(FormInputBanner),
+    Markdown(FormInputMarkdown),
+    KeyValue(FormInputKeyValue),
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputBase {
+    /// The name of the input. The value will be stored at this object attribute in the resulting data
+    pub name: String,
+
+    /// Whether this input is visible for the given configuration. Use this to
+    /// make branching forms.
+    #[ts(optional)]
+    pub hidden: Option<bool>,
+
+    /// Whether the user must fill in the argument
+    #[ts(optional)]
+    pub optional: Option<bool>,
+
+    /// The label of the input
+    #[ts(optional)]
+    pub label: Option<String>,
+
+    /// Visually hide the label of the input
+    #[ts(optional)]
+    pub hide_label: Option<bool>,
+
+    /// The default value
+    #[ts(optional)]
+    pub default_value: Option<String>,
+
+    #[ts(optional)]
+    pub disabled: Option<bool>,
+
+    /// Longer description of the input, likely shown in a tooltip
+    #[ts(optional)]
+    pub description: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputText {
+    #[serde(flatten)]
+    pub base: FormInputBase,
+
+    /// Placeholder for the text input
+    #[ts(optional = nullable)]
+    pub placeholder: Option<String>,
+
+    /// Placeholder for the text input
+    #[ts(optional)]
+    pub password: Option<bool>,
+
+    /// Whether to allow newlines in the input, like a <textarea/>
+    #[ts(optional)]
+    pub multi_line: Option<bool>,
+
+    #[ts(optional)]
+    pub completion_options: Option<Vec<GenericCompletionOption>>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum EditorLanguage {
+    Text,
+    Javascript,
+    Json,
+    Html,
+    Xml,
+    Graphql,
+    Markdown,
+    C,
+    Clojure,
+    Csharp,
+    Go,
+    Http,
+    Java,
+    Kotlin,
+    ObjectiveC,
+    Ocaml,
+    Php,
+    Powershell,
+    Python,
+    R,
+    Ruby,
+    Shell,
+    Swift,
+}
+
+impl Default for EditorLanguage {
+    fn default() -> Self {
+        Self::Text
+    }
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputEditor {
+    #[serde(flatten)]
+    pub base: FormInputBase,
+
+    /// Placeholder for the text input
+    #[ts(optional = nullable)]
+    pub placeholder: Option<String>,
+
+    /// Don't show the editor gutter (line numbers, folds, etc.)
+    #[ts(optional)]
+    pub hide_gutter: Option<bool>,
+
+    /// Language for syntax highlighting
+    #[ts(optional)]
+    pub language: Option<EditorLanguage>,
+
+    #[ts(optional)]
+    pub read_only: Option<bool>,
+
+    /// Fixed number of visible rows
+    #[ts(optional)]
+    pub rows: Option<i32>,
+
+    #[ts(optional)]
+    pub completion_options: Option<Vec<GenericCompletionOption>>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GenericCompletionOption {
+    label: String,
+
+    #[ts(optional)]
+    detail: Option<String>,
+
+    #[ts(optional)]
+    info: Option<String>,
+
+    #[ts(optional)]
+    #[serde(rename = "type")]
+    pub type_: Option<CompletionOptionType>,
+
+    #[ts(optional)]
+    pub boost: Option<i32>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum CompletionOptionType {
+    Constant,
+    Variable,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputHttpRequest {
+    #[serde(flatten)]
+    pub base: FormInputBase,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputFile {
+    #[serde(flatten)]
+    pub base: FormInputBase,
+
+    /// The title of the file selection window
+    pub title: String,
+
+    /// Allow selecting multiple files
+    #[ts(optional)]
+    pub multiple: Option<bool>,
+
+    // Select a directory, not a file
+    #[ts(optional)]
+    pub directory: Option<bool>,
+
+    // Default file path for the selection dialog
+    #[ts(optional)]
+    pub default_path: Option<String>,
+
+    // Specify to only allow selection of certain file extensions
+    #[ts(optional)]
+    pub filters: Option<Vec<FileFilter>>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FileFilter {
+    pub name: String,
+    /// File extensions to require
+    pub extensions: Vec<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputSelect {
+    #[serde(flatten)]
+    pub base: FormInputBase,
+
+    /// The options that will be available in the select input
+    pub options: Vec<FormInputSelectOption>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputCheckbox {
+    #[serde(flatten)]
+    pub base: FormInputBase,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputSelectOption {
+    pub label: String,
+    pub value: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputAccordion {
+    pub label: String,
+
+    #[ts(optional)]
+    pub inputs: Option<Vec<FormInput>>,
+
+    #[ts(optional)]
+    pub hidden: Option<bool>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputHStack {
+    #[ts(optional)]
+    pub inputs: Option<Vec<FormInput>>,
+
+    #[ts(optional)]
+    pub hidden: Option<bool>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputBanner {
+    #[ts(optional)]
+    pub inputs: Option<Vec<FormInput>>,
+
+    #[ts(optional)]
+    pub hidden: Option<bool>,
+
+    #[ts(optional)]
+    pub color: Option<Color>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputMarkdown {
+    pub content: String,
+
+    #[ts(optional)]
+    pub hidden: Option<bool>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FormInputKeyValue {
+    #[serde(flatten)]
+    pub base: FormInputBase,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum Content {
+    Text { content: String },
+    Markdown { content: String },
+}
+
+impl Default for Content {
+    fn default() -> Self {
+        Self::Text { content: String::default() }
+    }
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallTemplateFunctionRequest {
+    pub name: String,
+    pub args: CallTemplateFunctionArgs,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallTemplateFunctionResponse {
+    pub value: Option<String>,
+    #[ts(optional)]
+    pub error: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallTemplateFunctionArgs {
+    pub purpose: RenderPurpose,
+    pub values: HashMap<String, JsonPrimitive>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case")]
+#[ts(export, export_to = "gen_events.ts")]
+pub enum RenderPurpose {
+    Send,
+    Preview,
+}
+
+impl Default for RenderPurpose {
+    fn default() -> Self {
+        RenderPurpose::Preview
+    }
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetHttpRequestActionsResponse {
+    pub actions: Vec<HttpRequestAction>,
+    pub plugin_ref_id: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct HttpRequestAction {
+    pub label: String,
+    #[ts(optional)]
+    pub icon: Option<Icon>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallHttpRequestActionRequest {
+    pub index: i32,
+    pub plugin_ref_id: String,
+    pub args: CallHttpRequestActionArgs,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallHttpRequestActionArgs {
+    pub http_request: HttpRequest,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetWebsocketRequestActionsResponse {
+    pub actions: Vec<WebsocketRequestAction>,
+    pub plugin_ref_id: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct WebsocketRequestAction {
+    pub label: String,
+    #[ts(optional)]
+    pub icon: Option<Icon>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallWebsocketRequestActionRequest {
+    pub index: i32,
+    pub plugin_ref_id: String,
+    pub args: CallWebsocketRequestActionArgs,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallWebsocketRequestActionArgs {
+    pub websocket_request: WebsocketRequest,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetWorkspaceActionsResponse {
+    pub actions: Vec<WorkspaceAction>,
+    pub plugin_ref_id: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct WorkspaceAction {
+    pub label: String,
+    #[ts(optional)]
+    pub icon: Option<Icon>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallWorkspaceActionRequest {
+    pub index: i32,
+    pub plugin_ref_id: String,
+    pub args: CallWorkspaceActionArgs,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallWorkspaceActionArgs {
+    pub workspace: Workspace,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetFolderActionsResponse {
+    pub actions: Vec<FolderAction>,
+    pub plugin_ref_id: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FolderAction {
+    pub label: String,
+    #[ts(optional)]
+    pub icon: Option<Icon>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallFolderActionRequest {
+    pub index: i32,
+    pub plugin_ref_id: String,
+    pub args: CallFolderActionArgs,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallFolderActionArgs {
+    pub folder: Folder,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetGrpcRequestActionsResponse {
+    pub actions: Vec<GrpcRequestAction>,
+    pub plugin_ref_id: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GrpcRequestAction {
+    pub label: String,
+    #[ts(optional)]
+    pub icon: Option<Icon>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallGrpcRequestActionRequest {
+    pub index: i32,
+    pub plugin_ref_id: String,
+    pub args: CallGrpcRequestActionArgs,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct CallGrpcRequestActionArgs {
+    pub grpc_request: GrpcRequest,
+    pub proto_files: Vec<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetHttpRequestByIdRequest {
+    pub id: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetHttpRequestByIdResponse {
+    pub http_request: Option<HttpRequest>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FindHttpResponsesRequest {
+    pub request_id: String,
+    #[ts(optional)]
+    pub limit: Option<i32>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct FindHttpResponsesResponse {
+    pub http_responses: Vec<HttpResponse>,
+}
+
+/// Ask what a response's body is, before deciding whether to pull it.
+///
+/// Bodies are addressed by response id and never by path, so where the host
+/// keeps the bytes is its own business.
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetHttpResponseBodyInfoRequest {
+    pub response_id: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetHttpResponseBodyInfoResponse {
+    /// How many bytes are stored right now, which is not necessarily what the
+    /// `Content-Length` header claimed. Zero when the response has no body.
+    #[ts(type = "number")]
+    pub content_length: u64,
+
+    /// Whether the response has finished arriving. While it has not, the body
+    /// keeps growing past `content_length`, and a reader that wants all of it
+    /// asks again.
+    pub complete: bool,
+
+    /// The response's `Content-Type` header, verbatim, so the reader can pick a
+    /// charset.
+    #[ts(optional = nullable)]
+    pub content_type: Option<String>,
+}
+
+/// Pull one window of a response body.
+///
+/// Reads are idempotent: the bytes live in durable storage, so the same window
+/// can be asked for as many times as the plugin likes.
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ReadHttpResponseBodyChunkRequest {
+    pub response_id: String,
+    #[ts(type = "number")]
+    pub offset: u64,
+    #[ts(type = "number")]
+    pub length: u64,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ReadHttpResponseBodyChunkResponse {
+    /// Base64, because the desktop transport is a WebSocket that only sends
+    /// text frames today. A host that can carry binary sends the bytes as they
+    /// are and fills this in from them.
+    pub data: String,
+
+    /// Bytes decoded from `data`. Short of the requested length means the body
+    /// ended here.
+    #[ts(type = "number")]
+    pub length: u64,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ListHttpRequestsRequest {
+    #[ts(optional)]
+    pub folder_id: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ListHttpRequestsResponse {
+    pub http_requests: Vec<HttpRequest>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default)]
+#[ts(export, type = "{}", export_to = "gen_events.ts")]
+pub struct ListFoldersRequest {}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ListFoldersResponse {
+    pub folders: Vec<Folder>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct UpsertModelRequest {
+    pub model: AnyModel,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct UpsertModelResponse {
+    pub model: AnyModel,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct DeleteModelRequest {
+    pub model: String,
+    pub id: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct DeleteModelResponse {
+    pub model: AnyModel,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct ImportResources {
+    pub workspaces: Vec<Workspace>,
+    pub environments: Vec<Environment>,
+    pub folders: Vec<Folder>,
+    pub http_requests: Vec<HttpRequest>,
+    pub grpc_requests: Vec<GrpcRequest>,
+    pub websocket_requests: Vec<WebsocketRequest>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetKeyValueRequest {
+    pub key: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct GetKeyValueResponse {
+    #[ts(optional)]
+    pub value: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct SetKeyValueRequest {
+    pub key: String,
+    pub value: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default)]
+#[ts(export, type = "{}", export_to = "gen_events.ts")]
+pub struct SetKeyValueResponse {}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct DeleteKeyValueRequest {
+    pub key: String,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default)]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct DeleteKeyValueResponse {
+    pub deleted: bool,
+}
diff --git a/crates/yaak-plugins/src/install.rs b/crates/yaak-plugins/src/install.rs
new file mode 100644
index 0000000..0e6aeb9
--- /dev/null
+++ b/crates/yaak-plugins/src/install.rs
@@ -0,0 +1,92 @@
+use crate::api::{PluginVersion, download_plugin_archive, get_plugin};
+use crate::checksum::compute_checksum;
+use crate::error::Error::{PluginErr, PluginNotFoundErr};
+use crate::error::Result;
+use crate::events::PluginContext;
+use crate::manager::PluginManager;
+use chrono::Utc;
+use log::info;
+use std::fs::{create_dir_all, remove_dir_all};
+use std::io::Cursor;
+use std::sync::Arc;
+use yaak_models::models::{Plugin, PluginSource};
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::UpdateSource;
+
+/// Delete a plugin from the database and uninstall it.
+pub async fn delete_and_uninstall(
+    plugin_manager: Arc<PluginManager>,
+    query_manager: &QueryManager,
+    plugin_context: &PluginContext,
+    plugin_id: &str,
+) -> Result<Plugin> {
+    let update_source = match plugin_context.label.clone() {
+        Some(label) => UpdateSource::from_window_label(label),
+        None => UpdateSource::Background,
+    };
+    let plugin = query_manager.with_tx(|db| db.delete_plugin_by_id(plugin_id, &update_source))?;
+    if let Err(err) = plugin_manager.uninstall(plugin_context, plugin.directory.as_str()).await {
+        if !matches!(err, PluginNotFoundErr(_)) {
+            return Err(err);
+        }
+    }
+    Ok(plugin)
+}
+
+/// Download and install a plugin.
+pub async fn download_and_install(
+    plugin_manager: Arc<PluginManager>,
+    query_manager: &QueryManager,
+    http_client: &reqwest::Client,
+    plugin_context: &PluginContext,
+    name: &str,
+    version: Option<String>,
+) -> Result<PluginVersion> {
+    info!("Installing plugin {} {}", name, version.clone().unwrap_or_default());
+    let plugin_version = get_plugin(http_client, name, version).await?;
+    let resp = download_plugin_archive(http_client, &plugin_version).await?;
+    let bytes = resp.bytes().await?;
+
+    let checksum = compute_checksum(&bytes);
+    if checksum != plugin_version.checksum {
+        return Err(PluginErr(format!(
+            "Checksum mismatch {}b {checksum} != {}",
+            bytes.len(),
+            plugin_version.checksum
+        )));
+    }
+
+    info!("Checksum matched {}", checksum);
+
+    let plugin_dir = plugin_manager.installed_plugin_dir.join(name);
+    let plugin_dir_str = plugin_dir.to_str().unwrap().to_string();
+
+    // Re-create the plugin directory
+    let _ = remove_dir_all(&plugin_dir);
+    create_dir_all(&plugin_dir)?;
+
+    zip::ZipArchive::new(Cursor::new(&bytes))?
+        .extract_unwrapped_root_dir(&plugin_dir, zip::read::root_dir_common_filter)?;
+    info!("Extracted plugin {} to {}", plugin_version.id, plugin_dir_str);
+
+    let plugin = query_manager.with_tx(|db| {
+        db.upsert_plugin(
+            &Plugin {
+                id: plugin_version.id.clone(),
+                checked_at: Some(Utc::now().naive_utc()),
+                directory: plugin_dir_str.clone(),
+                enabled: true,
+                url: Some(plugin_version.url.clone()),
+                source: PluginSource::Registry,
+                ..Default::default()
+            },
+            &UpdateSource::Background,
+        )
+    })?;
+
+    plugin_manager.add_plugin(plugin_context, &plugin).await?;
+
+    info!("Installed plugin {} to {}", plugin_version.id, plugin_dir_str);
+
+    Ok(plugin_version)
+}
diff --git a/crates/yaak-plugins/src/lib.rs b/crates/yaak-plugins/src/lib.rs
new file mode 100644
index 0000000..510756d
--- /dev/null
+++ b/crates/yaak-plugins/src/lib.rs
@@ -0,0 +1,21 @@
+//! Core plugin system for Yaak.
+//!
+//! This crate provides the plugin manager and supporting functionality
+//! for running JavaScript plugins via a Node.js runtime.
+//!
+//! Note: This crate is Tauri-independent. Tauri integration is provided
+//! by yaak-app's plugins_ext module.
+
+pub mod api;
+mod checksum;
+pub mod error;
+pub mod events;
+pub mod install;
+pub mod manager;
+pub mod native_template_functions;
+mod nodejs;
+pub mod plugin_handle;
+pub mod plugin_meta;
+mod server_ws;
+pub mod template_callback;
+mod util;
diff --git a/crates/yaak-plugins/src/manager.rs b/crates/yaak-plugins/src/manager.rs
new file mode 100644
index 0000000..310a1a5
--- /dev/null
+++ b/crates/yaak-plugins/src/manager.rs
@@ -0,0 +1,1255 @@
+use crate::error::Error::{
+    self, AuthPluginNotFound, ClientNotInitializedErr, PluginErr, PluginNotFoundErr,
+    UnknownEventErr,
+};
+use crate::error::Result;
+use crate::events::{
+    BootRequest, CallFolderActionRequest, CallGrpcRequestActionRequest,
+    CallHttpAuthenticationActionArgs, CallHttpAuthenticationActionRequest,
+    CallHttpAuthenticationRequest, CallHttpAuthenticationResponse, CallHttpRequestActionRequest,
+    CallTemplateFunctionArgs, CallTemplateFunctionRequest, CallTemplateFunctionResponse,
+    CallWebsocketRequestActionRequest, CallWorkspaceActionRequest, EmptyPayload, ErrorResponse,
+    FilterRequest, FilterResponse, GetFolderActionsResponse, GetGrpcRequestActionsResponse,
+    GetHttpAuthenticationConfigRequest, GetHttpAuthenticationConfigResponse,
+    GetHttpAuthenticationSummaryResponse, GetHttpRequestActionsResponse,
+    GetTemplateFunctionConfigRequest, GetTemplateFunctionConfigResponse,
+    GetTemplateFunctionSummaryResponse, GetThemesRequest, GetThemesResponse,
+    GetWebsocketRequestActionsResponse, GetWorkspaceActionsResponse, ImportRequest, ImportResponse,
+    InternalEvent, InternalEventPayload, JsonPrimitive, PluginContext, RenderPurpose,
+    ShowToastRequest,
+};
+use crate::native_template_functions::{template_function_keyring, template_function_secure};
+use crate::nodejs::start_nodejs_plugin_runtime;
+use crate::plugin_handle::PluginHandle;
+use crate::plugin_meta::get_plugin_meta;
+use crate::server_ws::PluginRuntimeServerWebsocket;
+use log::{error, info, warn};
+use std::collections::{HashMap, HashSet};
+use std::env;
+use std::path::{Path, PathBuf};
+use std::sync::Arc;
+use std::time::Duration;
+use tokio::fs::read_dir;
+use tokio::net::TcpListener;
+use tokio::sync::mpsc::error::TrySendError;
+use tokio::sync::{Mutex, mpsc, oneshot};
+use tokio::time::{Instant, timeout};
+use yaak_models::models::{Plugin, PluginSource};
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::{UpdateSource, generate_id};
+use yaak_templates::error::Error::RenderError;
+use yaak_templates::error::Result as TemplateResult;
+
+#[derive(Clone)]
+pub struct PluginManager {
+    subscribers: Arc<Mutex<HashMap<String, mpsc::Sender<InternalEvent>>>>,
+    plugin_handles: Arc<Mutex<Vec<PluginHandle>>>,
+    kill_tx: tokio::sync::watch::Sender<bool>,
+    killed_rx: Arc<Mutex<Option<oneshot::Receiver<()>>>>,
+    ws_service: Arc<PluginRuntimeServerWebsocket>,
+    vendored_plugin_dir: PathBuf,
+    pub(crate) installed_plugin_dir: PathBuf,
+    dev_mode: bool,
+    /// Errors from plugin initialization, retrievable once via `take_init_errors`.
+    init_errors: Arc<Mutex<Vec<(String, String)>>>,
+    /// Set to the exit status if the runtime dies unexpectedly, observable
+    /// via `runtime_crash_rx`.
+    runtime_crash_rx: tokio::sync::watch::Receiver<Option<String>>,
+}
+
+/// Callback for plugin initialization events (e.g., toast notifications)
+pub type PluginInitCallback = Box<dyn Fn(ShowToastRequest) + Send + Sync>;
+
+impl PluginManager {
+    /// Create a new PluginManager with the given paths.
+    ///
+    /// # Arguments
+    /// * `vendored_plugin_dir` - Path to vendored plugins directory
+    /// * `installed_plugin_dir` - Path to installed plugins directory
+    /// * `node_bin_path` - Path to the yaaknode binary
+    /// * `plugin_runtime_main` - Path to the plugin runtime index.cjs
+    /// * `query_manager` - Query manager for bundled plugin registration and loading
+    /// * `plugin_context` - Context to use while initializing plugins
+    /// * `dev_mode` - Whether the app is in dev mode (affects plugin loading)
+    pub async fn new(
+        vendored_plugin_dir: PathBuf,
+        installed_plugin_dir: PathBuf,
+        node_bin_path: PathBuf,
+        plugin_runtime_main: PathBuf,
+        query_manager: &QueryManager,
+        plugin_context: &PluginContext,
+        dev_mode: bool,
+    ) -> Result<PluginManager> {
+        let (events_tx, mut events_rx) = mpsc::channel(2048);
+        let (kill_server_tx, kill_server_rx) = tokio::sync::watch::channel(false);
+        let (killed_tx, killed_rx) = oneshot::channel();
+
+        let (client_disconnect_tx, mut client_disconnect_rx) = mpsc::channel(128);
+        let (client_connect_tx, mut client_connect_rx) = tokio::sync::watch::channel(false);
+        // Set to the exit status if the runtime dies unexpectedly. The app is
+        // still usable without the plugin runtime (just missing features), so
+        // this unblocks startup and is surfaced to the user rather than
+        // taking the app down.
+        let (unexpected_exit_tx, unexpected_exit_rx) =
+            tokio::sync::watch::channel::<Option<String>>(None);
+        let ws_service =
+            PluginRuntimeServerWebsocket::new(events_tx, client_disconnect_tx, client_connect_tx);
+
+        let plugin_manager = PluginManager {
+            plugin_handles: Default::default(),
+            subscribers: Default::default(),
+            ws_service: Arc::new(ws_service.clone()),
+            kill_tx: kill_server_tx,
+            killed_rx: Arc::new(Mutex::new(Some(killed_rx))),
+            vendored_plugin_dir,
+            installed_plugin_dir,
+            dev_mode,
+            init_errors: Default::default(),
+            runtime_crash_rx: unexpected_exit_rx.clone(),
+        };
+
+        // Forward events to subscribers
+        let subscribers = plugin_manager.subscribers.clone();
+        tokio::spawn(async move {
+            while let Some(event) = events_rx.recv().await {
+                for (tx_id, tx) in subscribers.lock().await.iter_mut() {
+                    if let Err(e) = tx.try_send(event.clone()) {
+                        match e {
+                            TrySendError::Full(e) => {
+                                error!("Failed to send event to full subscriber {tx_id} {e:?}");
+                            }
+                            TrySendError::Closed(_) => {
+                                // Subscriber already unsubscribed
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        // Handle when client plugin runtime disconnects
+        tokio::spawn(async move {
+            while (client_disconnect_rx.recv().await).is_some() {
+                // Happens when the app is closed
+                info!("Plugin runtime client disconnected");
+            }
+        });
+
+        let listen_addr = match option_env!("YAAK_PLUGIN_SERVER_PORT") {
+            Some(port) => format!("127.0.0.1:{port}"),
+            None => "127.0.0.1:0".to_string(),
+        };
+        let listener = TcpListener::bind(listen_addr).await.expect("Failed to bind TCP listener");
+        let addr = listener.local_addr().expect("Failed to get local address");
+
+        // 1. Wait for the Node.js runtime to connect, or for it to die trying
+        let mut init_dead_rx = unexpected_exit_rx.clone();
+        let init_plugins_task = tokio::spawn(async move {
+            tokio::select! {
+                result = client_connect_rx.changed() => match result {
+                    Ok(_) => {
+                        info!("Plugin runtime client connected!");
+                        // Note: initialize_all_plugins is now called separately by the app
+                        // after setting up the plugin list
+                    }
+                    Err(e) => {
+                        warn!("Failed to receive from client connection rx {e:?}");
+                    }
+                },
+                _ = init_dead_rx.wait_for(|status| status.is_some()) => {
+                    warn!("Plugin runtime exited before connecting; continuing without plugins");
+                }
+            }
+        });
+
+        // 1. Spawn server in the background
+        info!("Starting plugin server on {addr}");
+        tokio::spawn(async move {
+            ws_service.listen(listener).await;
+        });
+
+        // 2. Start Node.js runtime
+        start_nodejs_plugin_runtime(
+            &node_bin_path,
+            &plugin_runtime_main,
+            addr,
+            &kill_server_rx,
+            killed_tx,
+            unexpected_exit_tx,
+        )
+        .await?;
+        info!("Waiting for plugins to initialize");
+        init_plugins_task.await.map_err(|e| PluginErr(e.to_string()))?;
+
+        if unexpected_exit_rx.borrow().is_some() {
+            warn!("Skipping plugin initialization because the runtime is not running");
+            return Ok(plugin_manager);
+        }
+
+        let bundled_dirs = plugin_manager.list_bundled_plugin_dirs().await?;
+        let plugins = query_manager.with_tx(|db| {
+            for dir in &bundled_dirs {
+                if db.get_plugin_by_directory(dir).is_none() {
+                    db.upsert_plugin(
+                        &Plugin {
+                            directory: dir.clone(),
+                            enabled: true,
+                            url: None,
+                            source: PluginSource::Bundled,
+                            ..Default::default()
+                        },
+                        &UpdateSource::Background,
+                    )?;
+                }
+            }
+            db.list_plugins()
+        })?;
+
+        let init_errors = plugin_manager.initialize_all_plugins(plugins, plugin_context).await;
+        if !init_errors.is_empty() {
+            for (dir, err) in &init_errors {
+                warn!("Plugin failed to initialize: {dir}: {err}");
+            }
+            *plugin_manager.init_errors.lock().await = init_errors;
+        }
+
+        Ok(plugin_manager)
+    }
+
+    /// Take any initialization errors, clearing them from the manager.
+    /// Returns a list of `(plugin_directory, error_message)` pairs.
+    pub async fn take_init_errors(&self) -> Vec<(String, String)> {
+        std::mem::take(&mut *self.init_errors.lock().await)
+    }
+
+    /// A receiver that is set to the exit status if the plugin runtime dies
+    /// unexpectedly.
+    pub fn runtime_crash_rx(&self) -> tokio::sync::watch::Receiver<Option<String>> {
+        self.runtime_crash_rx.clone()
+    }
+
+    /// Get the vendored plugin directory path (resolves dev mode path if applicable)
+    pub fn get_plugins_dir(&self) -> PathBuf {
+        if self.dev_mode {
+            // Use plugins directly for easy development
+            // Tauri runs from crates-tauri/yaak-app-client/, so go up two levels to reach project root
+            env::current_dir()
+                .map(|cwd| cwd.join("../../plugins").canonicalize().unwrap())
+                .unwrap_or_else(|_| self.vendored_plugin_dir.clone())
+        } else {
+            self.vendored_plugin_dir.clone()
+        }
+    }
+
+    /// Read plugin directories from disk and return their paths.
+    /// This is useful for discovering bundled plugins.
+    pub async fn list_bundled_plugin_dirs(&self) -> Result<Vec<String>> {
+        let plugins_dir = self.get_plugins_dir();
+        info!("Loading bundled plugins from {plugins_dir:?}");
+        let dirs = read_plugins_dir(&plugins_dir).await?;
+        Ok(dirs.into_iter().filter(|dir| !is_removed_bundled_plugin_dir(dir)).collect())
+    }
+
+    pub async fn resolve_plugins_for_runtime_from_db(&self, plugins: Vec<Plugin>) -> Vec<Plugin> {
+        let bundled_dirs = match self.list_bundled_plugin_dirs().await {
+            Ok(dirs) => dirs,
+            Err(err) => {
+                warn!("Failed to read bundled plugin dirs for resolution: {err:?}");
+                Vec::new()
+            }
+        };
+        self.resolve_plugins_for_runtime(plugins, bundled_dirs)
+    }
+
+    /// Resolve the plugin set for the current runtime instance.
+    ///
+    /// Rules:
+    /// - Drop bundled rows that are not present in this instance's bundled directory list.
+    /// - Deduplicate by plugin metadata name (fallback to directory key when metadata is unreadable).
+    /// - Prefer sources in this order: filesystem > registry > bundled.
+    /// - For same-source conflicts, prefer the most recently installed row (`created_at`).
+    fn resolve_plugins_for_runtime(
+        &self,
+        plugins: Vec<Plugin>,
+        bundled_dirs: Vec<String>,
+    ) -> Vec<Plugin> {
+        let bundled_dir_set: HashSet<String> = bundled_dirs.into_iter().collect();
+        let mut selected: HashMap<String, Plugin> = HashMap::new();
+
+        for plugin in plugins {
+            if matches!(plugin.source, PluginSource::Bundled)
+                && !bundled_dir_set.contains(&plugin.directory)
+            {
+                continue;
+            }
+
+            let key = match get_plugin_meta(Path::new(&plugin.directory)) {
+                Ok(meta) => meta.name,
+                Err(_) => format!("__dir__{}", plugin.directory),
+            };
+
+            match selected.get(&key) {
+                Some(existing) if !prefer_plugin(&plugin, existing) => {}
+                _ => {
+                    selected.insert(key, plugin);
+                }
+            }
+        }
+
+        let mut resolved = selected.into_values().collect::<Vec<_>>();
+        resolved.sort_by(|a, b| b.created_at.cmp(&a.created_at));
+        resolved
+    }
+
+    pub async fn uninstall(&self, plugin_context: &PluginContext, dir: &str) -> Result<()> {
+        let plugin = self.get_plugin_by_dir(dir).await.ok_or(PluginNotFoundErr(dir.to_string()))?;
+        self.remove_plugin(plugin_context, &plugin).await
+    }
+
+    async fn remove_plugin(
+        &self,
+        plugin_context: &PluginContext,
+        plugin: &PluginHandle,
+    ) -> Result<()> {
+        // Terminate the plugin if it's enabled
+        if plugin.enabled {
+            self.send_to_plugin_and_wait(
+                plugin_context,
+                plugin,
+                &InternalEventPayload::TerminateRequest,
+                Duration::from_secs(5),
+            )
+            .await?;
+        }
+
+        // Remove the plugin from the list
+        let mut plugins = self.plugin_handles.lock().await;
+        let pos = plugins.iter().position(|p| p.ref_id == plugin.ref_id);
+        if let Some(pos) = pos {
+            plugins.remove(pos);
+        }
+
+        Ok(())
+    }
+
+    pub async fn add_plugin(&self, plugin_context: &PluginContext, plugin: &Plugin) -> Result<()> {
+        info!("Adding plugin by dir {}", plugin.directory);
+
+        let maybe_tx = self.ws_service.app_to_plugin_events_tx.lock().await;
+        let tx = match &*maybe_tx {
+            None => return Err(ClientNotInitializedErr),
+            Some(tx) => tx,
+        };
+        let plugin_handle = PluginHandle::new(&plugin.directory, plugin.enabled, tx.clone())?;
+        let dir_path = Path::new(&plugin.directory);
+        let is_vendored = dir_path.starts_with(self.vendored_plugin_dir.as_path());
+        let is_installed = dir_path.starts_with(self.installed_plugin_dir.as_path());
+
+        // Boot the plugin if it's enabled
+        if plugin.enabled {
+            let event = self
+                .send_to_plugin_and_wait(
+                    plugin_context,
+                    &plugin_handle,
+                    &InternalEventPayload::BootRequest(BootRequest {
+                        dir: plugin.directory.clone(),
+                        watch: !is_vendored && !is_installed,
+                    }),
+                    Duration::from_secs(5),
+                )
+                .await?;
+
+            if !matches!(event.payload, InternalEventPayload::BootResponse) {
+                // Add it to the plugin handles anyway...
+                let mut plugin_handles = self.plugin_handles.lock().await;
+                plugin_handles.retain(|p| p.dir != plugin.directory);
+                plugin_handles.push(plugin_handle.clone());
+                return Err(UnknownEventErr);
+            }
+        }
+
+        let mut plugin_handles = self.plugin_handles.lock().await;
+        plugin_handles.retain(|p| p.dir != plugin.directory);
+        plugin_handles.push(plugin_handle.clone());
+
+        Ok(())
+    }
+
+    /// Initialize all plugins from the provided DB list.
+    /// Plugin candidates are resolved for this runtime instance before initialization.
+    /// Returns a list of (plugin_directory, error_message) for any plugins that failed to initialize.
+    pub async fn initialize_all_plugins(
+        &self,
+        plugins: Vec<Plugin>,
+        plugin_context: &PluginContext,
+    ) -> Vec<(String, String)> {
+        info!("Initializing all plugins");
+        let start = Instant::now();
+        let mut errors = Vec::new();
+        let plugins = self.resolve_plugins_for_runtime_from_db(plugins).await;
+
+        // Rebuild runtime handles from scratch to avoid stale/duplicate handles.
+        let existing_handles = { self.plugin_handles.lock().await.clone() };
+        for plugin_handle in existing_handles {
+            if let Err(e) = self.remove_plugin(plugin_context, &plugin_handle).await {
+                error!("Failed to remove plugin {} {e:?}", plugin_handle.dir);
+                errors.push((plugin_handle.dir.clone(), e.to_string()));
+            }
+        }
+
+        for plugin in plugins {
+            if let Err(e) = self.add_plugin(plugin_context, &plugin).await {
+                warn!("Failed to add plugin {} {e:?}", plugin.directory);
+                errors.push((plugin.directory.clone(), e.to_string()));
+            }
+        }
+
+        let plugin_handles = self.plugin_handles.lock().await;
+        let names = plugin_handles.iter().map(|p| p.dir.to_string()).collect::<Vec<String>>();
+        info!(
+            "Initialized {} plugins in {:?}:\n  - {}",
+            plugin_handles.len(),
+            start.elapsed(),
+            names.join("\n  - "),
+        );
+
+        errors
+    }
+
+    pub async fn subscribe(&self, label: &str) -> (String, mpsc::Receiver<InternalEvent>) {
+        let (tx, rx) = mpsc::channel(2048);
+        let rx_id = format!("{label}_{}", generate_id());
+        self.subscribers.lock().await.insert(rx_id.clone(), tx);
+        (rx_id, rx)
+    }
+
+    pub async fn unsubscribe(&self, rx_id: &str) {
+        self.subscribers.lock().await.remove(rx_id);
+    }
+
+    pub async fn terminate(&self) {
+        self.kill_tx.send_replace(true);
+
+        // Wait for the plugin runtime process to actually exit
+        let killed_rx = self.killed_rx.lock().await.take();
+        if let Some(rx) = killed_rx {
+            if timeout(Duration::from_secs(5), rx).await.is_err() {
+                warn!("Timed out waiting for plugin runtime to exit");
+            } else {
+                info!("Plugin runtime exited")
+            }
+        }
+    }
+
+    pub async fn reply(
+        &self,
+        source_event: &InternalEvent,
+        payload: &InternalEventPayload,
+    ) -> Result<()> {
+        let plugin_context = source_event.to_owned().context;
+        let reply_id = Some(source_event.to_owned().id);
+        let plugin = self
+            .get_plugin_by_ref_id(source_event.plugin_ref_id.as_str())
+            .await
+            .ok_or(PluginNotFoundErr(source_event.plugin_ref_id.to_string()))?;
+        let event = plugin.build_event_to_send_raw(&plugin_context, &payload, reply_id);
+        plugin.send(&event).await
+    }
+
+    pub async fn get_plugin_by_ref_id(&self, ref_id: &str) -> Option<PluginHandle> {
+        self.plugin_handles.lock().await.iter().find(|p| p.ref_id == ref_id).cloned()
+    }
+
+    pub async fn get_plugin_by_dir(&self, dir: &str) -> Option<PluginHandle> {
+        self.plugin_handles.lock().await.iter().find(|p| p.dir == dir).cloned()
+    }
+
+    pub async fn get_plugin_by_name(&self, name: &str) -> Option<PluginHandle> {
+        for plugin in self.plugin_handles.lock().await.iter().cloned() {
+            let info = plugin.info();
+            if info.name == name {
+                return Some(plugin);
+            }
+        }
+        None
+    }
+
+    async fn send_to_plugin_and_wait(
+        &self,
+        plugin_context: &PluginContext,
+        plugin: &PluginHandle,
+        payload: &InternalEventPayload,
+        timeout_duration: Duration,
+    ) -> Result<InternalEvent> {
+        if !plugin.enabled {
+            return Err(Error::PluginErr(format!("Plugin {} is disabled", plugin.metadata.name)));
+        }
+
+        let events = self
+            .send_to_plugins_and_wait(
+                plugin_context,
+                payload,
+                vec![plugin.to_owned()],
+                timeout_duration,
+            )
+            .await?;
+        Ok(events
+            .first()
+            .ok_or(Error::PluginErr(format!(
+                "No plugin events returned for: {}",
+                plugin.metadata.name
+            )))?
+            .to_owned())
+    }
+
+    async fn send_and_wait(
+        &self,
+        plugin_context: &PluginContext,
+        payload: &InternalEventPayload,
+        timeout_duration: Duration,
+    ) -> Result<Vec<InternalEvent>> {
+        let plugins = { self.plugin_handles.lock().await.clone() };
+        self.send_to_plugins_and_wait(plugin_context, payload, plugins, timeout_duration).await
+    }
+
+    async fn send_to_plugins_and_wait(
+        &self,
+        plugin_context: &PluginContext,
+        payload: &InternalEventPayload,
+        plugins: Vec<PluginHandle>,
+        timeout_duration: Duration,
+    ) -> Result<Vec<InternalEvent>> {
+        let event_type = payload.type_name();
+        let label = format!("wait[{}.{}]", plugins.len(), event_type);
+        let (rx_id, mut rx) = self.subscribe(label.as_str()).await;
+
+        // 1. Build the events with IDs and everything
+        let events_to_send = plugins
+            .iter()
+            .filter(|p| p.enabled)
+            .map(|p| p.build_event_to_send(plugin_context, payload, None))
+            .collect::<Vec<InternalEvent>>();
+
+        // 2. Spawn thread to subscribe to incoming events and check reply ids
+        let sub_events_fut = {
+            let events_to_send = events_to_send.clone();
+
+            tokio::spawn(async move {
+                let mut found_events = Vec::new();
+
+                let collect_events = async {
+                    while let Some(event) = rx.recv().await {
+                        let matched_sent_event =
+                            events_to_send.iter().any(|e| Some(e.id.to_owned()) == event.reply_id);
+                        if matched_sent_event {
+                            found_events.push(event.clone());
+                        };
+
+                        let found_them_all = found_events.len() == events_to_send.len();
+                        if found_them_all {
+                            break;
+                        }
+                    }
+                };
+
+                // Timeout to prevent hanging forever if plugin doesn't respond
+                if timeout(timeout_duration, collect_events).await.is_err() {
+                    let responded_ids: Vec<&String> =
+                        found_events.iter().filter_map(|e| e.reply_id.as_ref()).collect();
+                    let non_responding: Vec<&str> = events_to_send
+                        .iter()
+                        .filter(|e| !responded_ids.contains(&&e.id))
+                        .map(|e| e.plugin_name.as_str())
+                        .collect();
+                    warn!(
+                        "Timeout ({:?}) waiting for {} responses. Got {}/{} responses. \
+                        Non-responding plugins: [{}]",
+                        timeout_duration,
+                        event_type,
+                        found_events.len(),
+                        events_to_send.len(),
+                        non_responding.join(", ")
+                    );
+                }
+
+                found_events
+            })
+        };
+
+        // 3. Send the events
+        for event in events_to_send {
+            let plugin = plugins
+                .iter()
+                .find(|p| p.ref_id == event.plugin_ref_id)
+                .expect("Didn't find plugin in list");
+            plugin.send(&event).await?
+        }
+
+        // 4. Join on the spawned thread
+        let events = sub_events_fut.await.expect("Thread didn't succeed");
+
+        // 5. Unsubscribe
+        self.unsubscribe(&rx_id).await;
+
+        Ok(events)
+    }
+
+    pub async fn get_themes(
+        &self,
+        plugin_context: &PluginContext,
+    ) -> Result<Vec<GetThemesResponse>> {
+        let reply_events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::GetThemesRequest(GetThemesRequest {}),
+                Duration::from_secs(5),
+            )
+            .await?;
+
+        let mut themes = Vec::new();
+        for event in reply_events {
+            if let InternalEventPayload::GetThemesResponse(resp) = event.payload {
+                themes.push(resp.clone());
+            }
+        }
+
+        Ok(themes)
+    }
+
+    pub async fn get_grpc_request_actions(
+        &self,
+        plugin_context: &PluginContext,
+    ) -> Result<Vec<GetGrpcRequestActionsResponse>> {
+        let reply_events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::GetGrpcRequestActionsRequest(EmptyPayload {}),
+                Duration::from_secs(5),
+            )
+            .await?;
+
+        let mut all_actions = Vec::new();
+        for event in reply_events {
+            if let InternalEventPayload::GetGrpcRequestActionsResponse(resp) = event.payload {
+                all_actions.push(resp.clone());
+            }
+        }
+
+        Ok(all_actions)
+    }
+
+    pub async fn get_http_request_actions(
+        &self,
+        plugin_context: &PluginContext,
+    ) -> Result<Vec<GetHttpRequestActionsResponse>> {
+        let reply_events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::GetHttpRequestActionsRequest(EmptyPayload {}),
+                Duration::from_secs(5),
+            )
+            .await?;
+
+        let mut all_actions = Vec::new();
+        for event in reply_events {
+            if let InternalEventPayload::GetHttpRequestActionsResponse(resp) = event.payload {
+                all_actions.push(resp.clone());
+            }
+        }
+
+        Ok(all_actions)
+    }
+
+    pub async fn get_websocket_request_actions(
+        &self,
+        plugin_context: &PluginContext,
+    ) -> Result<Vec<GetWebsocketRequestActionsResponse>> {
+        let reply_events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::GetWebsocketRequestActionsRequest(EmptyPayload {}),
+                Duration::from_secs(5),
+            )
+            .await?;
+
+        let mut all_actions = Vec::new();
+        for event in reply_events {
+            if let InternalEventPayload::GetWebsocketRequestActionsResponse(resp) = event.payload {
+                all_actions.push(resp.clone());
+            }
+        }
+
+        Ok(all_actions)
+    }
+
+    pub async fn get_workspace_actions(
+        &self,
+        plugin_context: &PluginContext,
+    ) -> Result<Vec<GetWorkspaceActionsResponse>> {
+        let reply_events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::GetWorkspaceActionsRequest(EmptyPayload {}),
+                Duration::from_secs(5),
+            )
+            .await?;
+
+        let mut all_actions = Vec::new();
+        for event in reply_events {
+            if let InternalEventPayload::GetWorkspaceActionsResponse(resp) = event.payload {
+                all_actions.push(resp.clone());
+            }
+        }
+
+        Ok(all_actions)
+    }
+
+    pub async fn get_folder_actions(
+        &self,
+        plugin_context: &PluginContext,
+    ) -> Result<Vec<GetFolderActionsResponse>> {
+        let reply_events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::GetFolderActionsRequest(EmptyPayload {}),
+                Duration::from_secs(5),
+            )
+            .await?;
+
+        let mut all_actions = Vec::new();
+        for event in reply_events {
+            if let InternalEventPayload::GetFolderActionsResponse(resp) = event.payload {
+                all_actions.push(resp.clone());
+            }
+        }
+
+        Ok(all_actions)
+    }
+
+    /// Get template function config.
+    /// Note: Values should be pre-rendered by the caller if needed.
+    pub async fn get_template_function_config(
+        &self,
+        plugin_context: &PluginContext,
+        fn_name: &str,
+        rendered_values: HashMap<String, JsonPrimitive>,
+        model_id: &str,
+    ) -> Result<GetTemplateFunctionConfigResponse> {
+        let results = self.get_template_function_summaries(plugin_context).await?;
+        let r = results
+            .iter()
+            .find(|r| r.functions.iter().any(|f| f.name == fn_name))
+            .ok_or_else(|| PluginNotFoundErr(fn_name.into()))?;
+
+        let plugin = match self.get_plugin_by_ref_id(&r.plugin_ref_id).await {
+            None => {
+                // It's probably a native function, so just fallback to the summary
+                let function = r
+                    .functions
+                    .iter()
+                    .find(|f| f.name == fn_name)
+                    .ok_or_else(|| PluginNotFoundErr(fn_name.into()))?;
+                return Ok(GetTemplateFunctionConfigResponse {
+                    function: function.clone(),
+                    plugin_ref_id: r.plugin_ref_id.clone(),
+                });
+            }
+            Some(v) => v,
+        };
+
+        let context_id = format!("{:x}", md5::compute(model_id));
+
+        let event = self
+            .send_to_plugin_and_wait(
+                plugin_context,
+                &plugin,
+                &InternalEventPayload::GetTemplateFunctionConfigRequest(
+                    GetTemplateFunctionConfigRequest {
+                        values: rendered_values,
+                        name: fn_name.to_string(),
+                        context_id,
+                    },
+                ),
+                Duration::from_secs(5),
+            )
+            .await?;
+        match event.payload {
+            InternalEventPayload::GetTemplateFunctionConfigResponse(resp) => Ok(resp),
+            InternalEventPayload::EmptyResponse(_) => {
+                Err(PluginErr("Template function plugin returned empty".to_string()))
+            }
+            InternalEventPayload::ErrorResponse(e) => Err(PluginErr(e.error)),
+            e => Err(PluginErr(format!("Template function plugin returned invalid event {:?}", e))),
+        }
+    }
+
+    pub async fn call_http_request_action(
+        &self,
+        plugin_context: &PluginContext,
+        req: CallHttpRequestActionRequest,
+    ) -> Result<()> {
+        let ref_id = req.plugin_ref_id.clone();
+        let plugin =
+            self.get_plugin_by_ref_id(ref_id.as_str()).await.ok_or(PluginNotFoundErr(ref_id))?;
+        let event = plugin.build_event_to_send(
+            plugin_context,
+            &InternalEventPayload::CallHttpRequestActionRequest(req),
+            None,
+        );
+        plugin.send(&event).await?;
+        Ok(())
+    }
+
+    pub async fn call_websocket_request_action(
+        &self,
+        plugin_context: &PluginContext,
+        req: CallWebsocketRequestActionRequest,
+    ) -> Result<()> {
+        let ref_id = req.plugin_ref_id.clone();
+        let plugin =
+            self.get_plugin_by_ref_id(ref_id.as_str()).await.ok_or(PluginNotFoundErr(ref_id))?;
+        let event = plugin.build_event_to_send(
+            plugin_context,
+            &InternalEventPayload::CallWebsocketRequestActionRequest(req),
+            None,
+        );
+        plugin.send(&event).await?;
+        Ok(())
+    }
+
+    pub async fn call_workspace_action(
+        &self,
+        plugin_context: &PluginContext,
+        req: CallWorkspaceActionRequest,
+    ) -> Result<()> {
+        let ref_id = req.plugin_ref_id.clone();
+        let plugin =
+            self.get_plugin_by_ref_id(ref_id.as_str()).await.ok_or(PluginNotFoundErr(ref_id))?;
+        let event = plugin.build_event_to_send(
+            plugin_context,
+            &InternalEventPayload::CallWorkspaceActionRequest(req),
+            None,
+        );
+        plugin.send(&event).await?;
+        Ok(())
+    }
+
+    pub async fn call_folder_action(
+        &self,
+        plugin_context: &PluginContext,
+        req: CallFolderActionRequest,
+    ) -> Result<()> {
+        let ref_id = req.plugin_ref_id.clone();
+        let plugin =
+            self.get_plugin_by_ref_id(ref_id.as_str()).await.ok_or(PluginNotFoundErr(ref_id))?;
+        let event = plugin.build_event_to_send(
+            plugin_context,
+            &InternalEventPayload::CallFolderActionRequest(req),
+            None,
+        );
+        plugin.send(&event).await?;
+        Ok(())
+    }
+
+    pub async fn call_grpc_request_action(
+        &self,
+        plugin_context: &PluginContext,
+        req: CallGrpcRequestActionRequest,
+    ) -> Result<()> {
+        let ref_id = req.plugin_ref_id.clone();
+        let plugin =
+            self.get_plugin_by_ref_id(ref_id.as_str()).await.ok_or(PluginNotFoundErr(ref_id))?;
+        let event = plugin.build_event_to_send(
+            plugin_context,
+            &InternalEventPayload::CallGrpcRequestActionRequest(req),
+            None,
+        );
+        plugin.send(&event).await?;
+        Ok(())
+    }
+
+    pub async fn get_http_authentication_summaries(
+        &self,
+        plugin_context: &PluginContext,
+    ) -> Result<Vec<(PluginHandle, GetHttpAuthenticationSummaryResponse)>> {
+        let reply_events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::GetHttpAuthenticationSummaryRequest(EmptyPayload {}),
+                Duration::from_secs(5),
+            )
+            .await?;
+
+        let mut results = Vec::new();
+        for event in reply_events {
+            if let InternalEventPayload::GetHttpAuthenticationSummaryResponse(resp) = event.payload
+            {
+                let plugin = self
+                    .get_plugin_by_ref_id(&event.plugin_ref_id)
+                    .await
+                    .ok_or(PluginNotFoundErr(event.plugin_ref_id))?;
+                results.push((plugin, resp.clone()));
+            }
+        }
+
+        Ok(results)
+    }
+
+    /// Get HTTP authentication config.
+    /// Note: Values should be pre-rendered by the caller if needed.
+    pub async fn get_http_authentication_config(
+        &self,
+        plugin_context: &PluginContext,
+        auth_name: &str,
+        rendered_values: HashMap<String, JsonPrimitive>,
+        model_id: &str,
+    ) -> Result<GetHttpAuthenticationConfigResponse> {
+        if auth_name == "none" {
+            return Ok(GetHttpAuthenticationConfigResponse {
+                args: Vec::new(),
+                plugin_ref_id: "auth-none".to_string(),
+                actions: None,
+            });
+        }
+
+        let results = self.get_http_authentication_summaries(plugin_context).await?;
+        let plugin = results
+            .iter()
+            .find_map(|(p, r)| if r.name == auth_name { Some(p) } else { None })
+            .ok_or(PluginNotFoundErr(auth_name.into()))?;
+
+        let context_id = format!("{:x}", md5::compute(model_id));
+        let event = self
+            .send_to_plugin_and_wait(
+                plugin_context,
+                &plugin,
+                &InternalEventPayload::GetHttpAuthenticationConfigRequest(
+                    GetHttpAuthenticationConfigRequest { values: rendered_values, context_id },
+                ),
+                Duration::from_secs(5),
+            )
+            .await?;
+        match event.payload {
+            InternalEventPayload::GetHttpAuthenticationConfigResponse(resp) => Ok(resp),
+            InternalEventPayload::EmptyResponse(_) => {
+                Err(PluginErr("Auth plugin returned empty".to_string()))
+            }
+            InternalEventPayload::ErrorResponse(e) => Err(PluginErr(e.error)),
+            e => Err(PluginErr(format!("Auth plugin returned invalid event {:?}", e))),
+        }
+    }
+
+    /// Call HTTP authentication action.
+    /// Note: Values should be pre-rendered by the caller if needed.
+    pub async fn call_http_authentication_action(
+        &self,
+        plugin_context: &PluginContext,
+        auth_name: &str,
+        action_index: i32,
+        rendered_values: HashMap<String, JsonPrimitive>,
+        model_id: &str,
+    ) -> Result<()> {
+        let results = self.get_http_authentication_summaries(plugin_context).await?;
+        let plugin = results
+            .iter()
+            .find_map(|(p, r)| if r.name == auth_name { Some(p) } else { None })
+            .ok_or(PluginNotFoundErr(auth_name.into()))?;
+
+        let context_id = format!("{:x}", md5::compute(model_id));
+        self.send_to_plugin_and_wait(
+            plugin_context,
+            &plugin,
+            &InternalEventPayload::CallHttpAuthenticationActionRequest(
+                CallHttpAuthenticationActionRequest {
+                    index: action_index,
+                    plugin_ref_id: plugin.clone().ref_id,
+                    args: CallHttpAuthenticationActionArgs { context_id, values: rendered_values },
+                },
+            ),
+            Duration::from_secs(300), // 5 minutes for OAuth flows
+        )
+        .await?;
+        Ok(())
+    }
+
+    pub async fn call_http_authentication(
+        &self,
+        plugin_context: &PluginContext,
+        auth_name: &str,
+        req: CallHttpAuthenticationRequest,
+    ) -> Result<CallHttpAuthenticationResponse> {
+        let disabled = match req.values.get("disabled") {
+            Some(JsonPrimitive::Boolean(v)) => *v,
+            _ => false,
+        };
+
+        // Auth is disabled, so don't do anything
+        if disabled {
+            info!("Not applying disabled auth {:?}", auth_name);
+            return Ok(CallHttpAuthenticationResponse {
+                set_headers: None,
+                set_query_parameters: None,
+            });
+        }
+
+        let handlers = self.get_http_authentication_summaries(plugin_context).await?;
+        let (plugin, _) = handlers
+            .iter()
+            .find(|(_, a)| a.name == auth_name)
+            .ok_or(AuthPluginNotFound(auth_name.to_string()))?;
+
+        let event = self
+            .send_to_plugin_and_wait(
+                plugin_context,
+                &plugin,
+                &InternalEventPayload::CallHttpAuthenticationRequest(req),
+                Duration::from_secs(300), // 5 minutes for OAuth flows
+            )
+            .await?;
+        match event.payload {
+            InternalEventPayload::CallHttpAuthenticationResponse(resp) => Ok(resp),
+            InternalEventPayload::EmptyResponse(_) => {
+                Err(PluginErr("Auth plugin returned empty".to_string()))
+            }
+            InternalEventPayload::ErrorResponse(e) => Err(PluginErr(e.error)),
+            e => Err(PluginErr(format!("Auth plugin returned invalid event {:?}", e))),
+        }
+    }
+
+    pub async fn get_template_function_summaries(
+        &self,
+        plugin_context: &PluginContext,
+    ) -> Result<Vec<GetTemplateFunctionSummaryResponse>> {
+        let reply_events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::GetTemplateFunctionSummaryRequest(EmptyPayload {}),
+                Duration::from_secs(5),
+            )
+            .await?;
+
+        let mut results = Vec::new();
+        for event in reply_events {
+            if let InternalEventPayload::GetTemplateFunctionSummaryResponse(resp) = event.payload {
+                results.push(resp.clone());
+            }
+        }
+
+        // Add Rust-based functions
+        results.push(GetTemplateFunctionSummaryResponse {
+            plugin_ref_id: "__NATIVE__".to_string(), // Meh
+            functions: vec![template_function_secure(), template_function_keyring()],
+        });
+
+        Ok(results)
+    }
+
+    pub async fn call_template_function(
+        &self,
+        plugin_context: &PluginContext,
+        fn_name: &str,
+        values: HashMap<String, JsonPrimitive>,
+        purpose: RenderPurpose,
+    ) -> TemplateResult<String> {
+        let req = CallTemplateFunctionRequest {
+            name: fn_name.to_string(),
+            args: CallTemplateFunctionArgs { purpose, values },
+        };
+
+        let events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::CallTemplateFunctionRequest(req),
+                Duration::from_secs(300), // 5 minutes for user interactions (OAuth, prompts, etc.)
+            )
+            .await
+            .map_err(|e| RenderError(format!("Failed to call template function {e:}")))?;
+
+        let value =
+            events.into_iter().find_map(|e| match e.payload {
+                // Error returned
+                InternalEventPayload::CallTemplateFunctionResponse(
+                    CallTemplateFunctionResponse { error: Some(error), .. },
+                ) => Some(Err(error)),
+                // Value or null returned
+                InternalEventPayload::CallTemplateFunctionResponse(
+                    CallTemplateFunctionResponse { value, .. },
+                ) => Some(Ok(value.unwrap_or_default())),
+                // Generic error returned
+                InternalEventPayload::ErrorResponse(ErrorResponse { error }) => Some(Err(error)),
+                _ => None,
+            });
+
+        match value {
+            None => Err(RenderError(format!("Template function {fn_name}(…) not found "))),
+            Some(Ok(v)) => Ok(v),
+            Some(Err(e)) => Err(RenderError(e)),
+        }
+    }
+
+    pub async fn import_data(
+        &self,
+        plugin_context: &PluginContext,
+        content: &str,
+    ) -> Result<ImportResponse> {
+        let reply_events = self
+            .send_and_wait(
+                plugin_context,
+                &InternalEventPayload::ImportRequest(ImportRequest {
+                    content: content.to_string(),
+                }),
+                Duration::from_secs(60),
+            )
+            .await?;
+
+        // TODO: Don't just return the first valid response
+        let result = reply_events.into_iter().find_map(|e| match e {
+            InternalEvent {
+                plugin_name,
+                payload: InternalEventPayload::ImportResponse(mut resp),
+                ..
+            } => {
+                // Older plugin runtimes do not include the importer's display name. The plugin
+                // package name is still enough to identify the detected format in that case.
+                if resp.importer.is_empty() {
+                    resp.importer = plugin_name;
+                }
+                Some(resp)
+            }
+            _ => None,
+        });
+
+        match result {
+            None => Err(PluginErr("No importers found for file contents".to_string())),
+            Some(resp) => Ok(resp),
+        }
+    }
+
+    pub async fn filter_data(
+        &self,
+        plugin_context: &PluginContext,
+        filter: &str,
+        content: &str,
+        content_type: &str,
+    ) -> Result<FilterResponse> {
+        let ct = content_type.to_lowercase();
+        let plugin_name = if ct.contains("xml") || ct.contains("html") {
+            "@yaak/filter-xpath"
+        } else {
+            "@yaak/filter-jsonpath"
+        };
+
+        let plugin = self
+            .get_plugin_by_name(plugin_name)
+            .await
+            .ok_or(PluginNotFoundErr(plugin_name.to_string()))?;
+
+        let event = self
+            .send_to_plugin_and_wait(
+                plugin_context,
+                &plugin,
+                &InternalEventPayload::FilterRequest(FilterRequest {
+                    filter: filter.to_string(),
+                    content: content.to_string(),
+                }),
+                Duration::from_secs(5),
+            )
+            .await?;
+
+        match event.payload {
+            InternalEventPayload::FilterResponse(resp) => Ok(resp),
+            InternalEventPayload::EmptyResponse(_) => {
+                Err(PluginErr("Filter returned empty".to_string()))
+            }
+            e => Err(PluginErr(format!("Export returned invalid event {:?}", e))),
+        }
+    }
+}
+
+fn source_priority(source: &PluginSource) -> i32 {
+    match source {
+        PluginSource::Filesystem => 3,
+        PluginSource::Registry => 2,
+        PluginSource::Bundled => 1,
+    }
+}
+
+fn prefer_plugin(candidate: &Plugin, existing: &Plugin) -> bool {
+    let candidate_priority = source_priority(&candidate.source);
+    let existing_priority = source_priority(&existing.source);
+    if candidate_priority != existing_priority {
+        return candidate_priority > existing_priority;
+    }
+
+    candidate.created_at > existing.created_at
+}
+
+/// Bundled plugin directories that shipped in past versions and no longer exist. Updates
+/// can leave these behind on disk, where they'd be discovered as bundled plugins and load
+/// alongside the plugin that replaced them, producing duplicate actions in menus.
+///
+/// Ignoring them here also drops any plugin rows users already have, because bundled rows
+/// whose directory isn't in this list are filtered out by `resolve_plugins_for_runtime`.
+///
+/// `exporter-curl` was renamed to `action-copy-curl` in 19ffcd18, which is why affected
+/// installs show "Copy as cURL" twice.
+const REMOVED_BUNDLED_PLUGIN_DIRS: &[&str] = &["exporter-curl"];
+
+/// Whether a plugin directory path is one of the known-removed bundled plugins.
+fn is_removed_bundled_plugin_dir(dir: &str) -> bool {
+    let name = dir.trim_end_matches(['/', '\\']).rsplit(['/', '\\']).next().unwrap_or_default();
+    REMOVED_BUNDLED_PLUGIN_DIRS.contains(&name)
+}
+
+async fn read_plugins_dir(dir: &PathBuf) -> Result<Vec<String>> {
+    let mut result = read_dir(dir).await?;
+    let mut dirs: Vec<String> = vec![];
+    while let Ok(Some(entry)) = result.next_entry().await {
+        if entry.path().is_dir() {
+            #[cfg(target_os = "windows")]
+            dirs.push(fix_windows_paths(&entry.path()));
+            #[cfg(not(target_os = "windows"))]
+            dirs.push(entry.path().to_string_lossy().to_string());
+        }
+    }
+    Ok(dirs)
+}
+
+#[cfg(target_os = "windows")]
+fn fix_windows_paths(p: &PathBuf) -> String {
+    use dunce;
+    use path_slash::PathBufExt;
+
+    // 1. Remove UNC prefix for Windows paths
+    let safe_path = dunce::simplified(p.as_path());
+
+    // 2. Convert backslashes to forward slashes for Node.js compatibility
+    PathBuf::from(safe_path).to_slash_lossy().to_string()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::is_removed_bundled_plugin_dir;
+
+    #[test]
+    fn ignores_removed_bundled_plugins() {
+        assert!(is_removed_bundled_plugin_dir(
+            "/Applications/Yaak.app/vendored/plugins/exporter-curl"
+        ));
+        // Windows paths are slash-normalized before reaching here, but handle both
+        assert!(is_removed_bundled_plugin_dir(
+            r"C:\Users\me\AppData\Local\Yaak\vendored\plugins\exporter-curl"
+        ));
+        assert!(is_removed_bundled_plugin_dir("vendored/plugins/exporter-curl/"));
+    }
+
+    #[test]
+    fn keeps_current_bundled_plugins() {
+        assert!(!is_removed_bundled_plugin_dir(
+            "/Applications/Yaak.app/vendored/plugins/action-copy-curl"
+        ));
+        assert!(!is_removed_bundled_plugin_dir("vendored/plugins/importer-curl"));
+        // Must match the whole directory name, not a substring
+        assert!(!is_removed_bundled_plugin_dir("vendored/plugins/my-exporter-curl"));
+    }
+}
diff --git a/crates/yaak-plugins/src/native_template_functions.rs b/crates/yaak-plugins/src/native_template_functions.rs
new file mode 100644
index 0000000..f6b9db1
--- /dev/null
+++ b/crates/yaak-plugins/src/native_template_functions.rs
@@ -0,0 +1,269 @@
+//! Native template functions implemented in Rust.
+//!
+//! These are built-in template functions that don't require plugins:
+//! - `secure()` - encrypts/decrypts values using the EncryptionManager
+//! - `keychain()` / `keyring()` - accesses system keychain
+
+use crate::events::{
+    Color, FormInput, FormInputBanner, FormInputBase, FormInputMarkdown, FormInputText,
+    PluginContext, RenderPurpose, TemplateFunction, TemplateFunctionArg,
+    TemplateFunctionPreviewType,
+};
+use crate::manager::PluginManager;
+use crate::template_callback::PluginTemplateCallback;
+use base64::Engine;
+use base64::prelude::BASE64_STANDARD;
+use keyring::Error::NoEntry;
+use log::{debug, info};
+use std::collections::HashMap;
+use std::sync::Arc;
+use yaak_common::platform::{OperatingSystem, get_os};
+use yaak_crypto::manager::EncryptionManager;
+use yaak_templates::error::Error::RenderError;
+use yaak_templates::error::Result;
+use yaak_templates::{FnArg, Parser, Token, Tokens, Val, transform_args};
+
+pub(crate) fn template_function_secure() -> TemplateFunction {
+    TemplateFunction {
+        name: "secure".to_string(),
+        preview_type: Some(TemplateFunctionPreviewType::None),
+        description: Some("Securely store encrypted text".to_string()),
+        aliases: None,
+        preview_args: None,
+        args: vec![TemplateFunctionArg::FormInput(FormInput::Text(
+            FormInputText {
+                multi_line: Some(true),
+                password: Some(true),
+                base: FormInputBase {
+                    name: "value".to_string(),
+                    label: Some("Value".to_string()),
+                    ..Default::default()
+                },
+                ..Default::default()
+            },
+        ))],
+    }
+}
+
+pub(crate) fn template_function_keyring() -> TemplateFunction {
+    struct Meta {
+        description: String,
+        service_label: String,
+        account_label: String,
+    }
+
+    let meta = match get_os() {
+        OperatingSystem::MacOS => Meta {
+            description:
+            "Access application passwords from the macOS Login keychain".to_string(),
+            service_label: "Where".to_string(),
+            account_label: "Account".to_string(),
+        },
+        OperatingSystem::Windows => Meta {
+            description: "Access a secret via Windows Credential Manager".to_string(),
+            service_label: "Target".to_string(),
+            account_label: "Username".to_string(),
+        },
+        _ => Meta {
+            description: "Access a secret via [Secret Service](https://specifications.freedesktop.org/secret-service/latest/) (eg. Gnome keyring or KWallet)".to_string(),
+            service_label: "Collection".to_string(),
+            account_label: "Account".to_string(),
+        },
+    };
+
+    TemplateFunction {
+        name: "keychain".to_string(),
+        preview_type: Some(TemplateFunctionPreviewType::Live),
+        description: Some(meta.description),
+        aliases: Some(vec!["keyring".to_string()]),
+        preview_args: Some(vec!["service".to_string(), "account".to_string()]),
+        args: vec![
+            TemplateFunctionArg::FormInput(FormInput::Banner(FormInputBanner {
+                inputs: Some(vec![FormInput::Markdown(FormInputMarkdown {
+                    content: "For most cases, prefer the [`secure(…)`](https://yaak.app/help/encryption) template function, which encrypts values using a key stored in keychain".to_string(),
+                    hidden: None,
+                })]),
+                color: Some(Color::Info),
+                hidden: None,
+            })),
+            TemplateFunctionArg::FormInput(FormInput::Text(FormInputText {
+                base: FormInputBase {
+                    name: "service".to_string(),
+                    label: Some(meta.service_label),
+                    description: Some("App or URL for the password".to_string()),
+                    ..Default::default()
+                },
+                ..Default::default()
+            })),
+            TemplateFunctionArg::FormInput(FormInput::Text(FormInputText {
+                base: FormInputBase {
+                    name: "account".to_string(),
+                    label: Some(meta.account_label),
+                    description: Some("Username or email address".to_string()),
+                    ..Default::default()
+                },
+                ..Default::default()
+            })),
+        ],
+    }
+}
+
+pub fn template_function_secure_run(
+    encryption_manager: &EncryptionManager,
+    args: HashMap<String, serde_json::Value>,
+    plugin_context: &PluginContext,
+) -> Result<String> {
+    match plugin_context.workspace_id.clone() {
+        Some(wid) => {
+            let value = args.get("value").map(|v| v.to_owned()).unwrap_or_default();
+            let value = match value {
+                serde_json::Value::String(s) => s,
+                _ => return Ok("".to_string()),
+            };
+
+            if value.is_empty() {
+                return Ok("".to_string());
+            }
+
+            let value = match value.strip_prefix("YENC_") {
+                None => {
+                    return Err(RenderError("Could not decrypt non-encrypted value".to_string()));
+                }
+                Some(v) => v,
+            };
+
+            let value = BASE64_STANDARD.decode(&value).unwrap();
+            let r = match encryption_manager.decrypt(&wid, value.as_slice()) {
+                Ok(r) => Ok(r),
+                Err(e) => Err(RenderError(e.to_string())),
+            }?;
+            let r = String::from_utf8(r).map_err(|e| RenderError(e.to_string()))?;
+            Ok(r)
+        }
+        _ => Err(RenderError("workspace_id missing from plugin context".to_string())),
+    }
+}
+
+pub fn template_function_secure_transform_arg(
+    encryption_manager: &EncryptionManager,
+    plugin_context: &PluginContext,
+    arg_name: &str,
+    arg_value: &str,
+) -> Result<String> {
+    if arg_name != "value" {
+        return Ok(arg_value.to_string());
+    }
+
+    match plugin_context.workspace_id.clone() {
+        Some(wid) => {
+            if arg_value.is_empty() {
+                return Ok("".to_string());
+            }
+
+            if arg_value.starts_with("YENC_") {
+                // Already encrypted, so do nothing
+                return Ok(arg_value.to_string());
+            }
+
+            let r = encryption_manager
+                .encrypt(&wid, arg_value.as_bytes())
+                .map_err(|e| RenderError(e.to_string()))?;
+            let r = BASE64_STANDARD.encode(r);
+            Ok(format!("YENC_{}", r))
+        }
+        _ => Err(RenderError("workspace_id missing from plugin context".to_string())),
+    }
+}
+
+pub fn decrypt_secure_template_function(
+    encryption_manager: &EncryptionManager,
+    plugin_context: &PluginContext,
+    template: &str,
+) -> Result<String> {
+    let mut parsed = Parser::new(template).parse()?;
+    let mut new_tokens: Vec<Token> = Vec::new();
+
+    for token in parsed.tokens.iter() {
+        match token {
+            Token::Tag { val: Val::Fn { name, args } } if name == "secure" => {
+                let mut args_map = HashMap::new();
+                for a in args {
+                    match a.clone().value {
+                        Val::Str { text } => {
+                            args_map.insert(a.name.to_string(), serde_json::Value::String(text));
+                        }
+                        _ => continue,
+                    }
+                }
+                new_tokens.push(Token::Raw {
+                    text: template_function_secure_run(
+                        encryption_manager,
+                        args_map,
+                        plugin_context,
+                    )?,
+                });
+            }
+            t => {
+                new_tokens.push(t.clone());
+                continue;
+            }
+        };
+    }
+
+    parsed.tokens = new_tokens;
+    Ok(parsed.to_string())
+}
+
+pub fn encrypt_secure_template_function(
+    plugin_manager: Arc<PluginManager>,
+    encryption_manager: Arc<EncryptionManager>,
+    plugin_context: &PluginContext,
+    template: &str,
+) -> Result<String> {
+    let decrypted =
+        decrypt_secure_template_function(&encryption_manager, plugin_context, template)?;
+    let tokens = Tokens {
+        tokens: vec![Token::Tag {
+            val: Val::Fn {
+                name: "secure".to_string(),
+                args: vec![FnArg {
+                    name: "value".to_string(),
+                    value: Val::Str { text: decrypted },
+                }],
+            },
+        }],
+    };
+
+    Ok(transform_args(
+        tokens,
+        &PluginTemplateCallback::new(
+            plugin_manager,
+            encryption_manager,
+            plugin_context,
+            RenderPurpose::Preview,
+        ),
+    )?
+    .to_string())
+}
+
+pub fn template_function_keychain_run(args: HashMap<String, serde_json::Value>) -> Result<String> {
+    let service = args.get("service").and_then(|v| v.as_str()).unwrap_or_default().to_owned();
+    let user = args.get("account").and_then(|v| v.as_str()).unwrap_or_default().to_owned();
+    debug!("Getting password for service {} and user {}", service, user);
+    let entry = match keyring::Entry::new(&service, &user) {
+        Ok(e) => e,
+        Err(e) => {
+            debug!("Failed to initialize keyring entry for '{}' and '{}' {:?}", service, user, e);
+            return Ok("".to_string()); // Don't fail for invalid args
+        }
+    };
+
+    match entry.get_password() {
+        Ok(p) => Ok(p),
+        Err(NoEntry) => {
+            info!("No password found for '{}' and '{}'", service, user);
+            Ok("".to_string()) // Don't fail for missing passwords
+        }
+        Err(e) => Err(RenderError(e.to_string())),
+    }
+}
diff --git a/crates/yaak-plugins/src/nodejs.rs b/crates/yaak-plugins/src/nodejs.rs
new file mode 100644
index 0000000..882199b
--- /dev/null
+++ b/crates/yaak-plugins/src/nodejs.rs
@@ -0,0 +1,98 @@
+use crate::error::Result;
+use log::{error, info, warn};
+use std::net::SocketAddr;
+use std::path::Path;
+use std::process::Stdio;
+use tokio::io::{AsyncBufReadExt, BufReader};
+use tokio::sync::oneshot;
+use tokio::sync::watch::Receiver;
+use yaak_common::command::new_xplatform_command;
+
+/// Start the Node.js plugin runtime process.
+///
+/// # Arguments
+/// * `node_bin_path` - Path to the yaaknode binary
+/// * `plugin_runtime_main` - Path to the plugin runtime index.cjs
+/// * `addr` - Socket address for the plugin runtime to connect to
+/// * `kill_rx` - Channel to signal shutdown
+/// * `killed_tx` - Notified once the runtime is killed after a shutdown signal
+/// * `unexpected_exit_tx` - Set to the exit status if the runtime exits
+///   without being asked to
+pub async fn start_nodejs_plugin_runtime(
+    node_bin_path: &Path,
+    plugin_runtime_main: &Path,
+    addr: SocketAddr,
+    kill_rx: &Receiver<bool>,
+    killed_tx: oneshot::Sender<()>,
+    unexpected_exit_tx: tokio::sync::watch::Sender<Option<String>>,
+) -> Result<()> {
+    // HACK: Remove UNC prefix for Windows paths to pass to sidecar
+    let plugin_runtime_main_str =
+        dunce::simplified(plugin_runtime_main).to_string_lossy().to_string();
+
+    info!(
+        "Starting plugin runtime node={} main={}",
+        node_bin_path.display(),
+        plugin_runtime_main_str
+    );
+
+    let mut cmd = new_xplatform_command(node_bin_path);
+    cmd.env("HOST", addr.ip().to_string())
+        .env("PORT", addr.port().to_string())
+        .arg(&plugin_runtime_main_str)
+        .stdout(Stdio::piped())
+        .stderr(Stdio::piped());
+
+    let mut child = cmd.spawn()?;
+
+    info!("Spawned plugin runtime");
+
+    // Stream stdout
+    if let Some(stdout) = child.stdout.take() {
+        tokio::spawn(async move {
+            let reader = BufReader::new(stdout);
+            let mut lines = reader.lines();
+            while let Ok(Some(line)) = lines.next_line().await {
+                info!("{}", line);
+            }
+        });
+    }
+
+    // Stream stderr
+    if let Some(stderr) = child.stderr.take() {
+        tokio::spawn(async move {
+            let reader = BufReader::new(stderr);
+            let mut lines = reader.lines();
+            while let Ok(Some(line)) = lines.next_line().await {
+                warn!("{}", line);
+            }
+        });
+    }
+
+    // Wait for either an explicit kill signal or the child exiting on its own.
+    // An unexpected exit is reported to the caller, which decides whether to
+    // abort startup or surface a user-facing error.
+    let mut kill_rx = kill_rx.clone();
+    tokio::spawn(async move {
+        tokio::select! {
+            status = child.wait() => {
+                let status = status.map(|s| s.to_string()).unwrap_or_else(|e| e.to_string());
+                error!("Plugin runtime exited unexpectedly ({status})");
+                let _ = unexpected_exit_tx.send(Some(status));
+            }
+            closed = async { kill_rx.wait_for(|b| *b == true).await.is_err() } => {
+                if closed {
+                    warn!("Kill channel closed before explicit shutdown; terminating plugin runtime");
+                }
+                info!("Killing plugin runtime");
+                if let Err(e) = child.kill().await {
+                    warn!("Failed to kill plugin runtime: {e}");
+                }
+                info!("Killed plugin runtime");
+                let _ = killed_tx.send(());
+            }
+        }
+    });
+
+    Ok(())
+}
diff --git a/crates/yaak-plugins/src/plugin_handle.rs b/crates/yaak-plugins/src/plugin_handle.rs
new file mode 100644
index 0000000..d361626
--- /dev/null
+++ b/crates/yaak-plugins/src/plugin_handle.rs
@@ -0,0 +1,66 @@
+use crate::error::Result;
+use crate::events::{InternalEvent, InternalEventPayload, PluginContext};
+use crate::plugin_meta::{PluginMetadata, get_plugin_meta};
+use crate::util::gen_id;
+use std::path::Path;
+use std::sync::Arc;
+use tokio::sync::{Mutex, mpsc};
+
+#[derive(Clone)]
+pub struct PluginHandle {
+    pub ref_id: String,
+    pub dir: String,
+    pub enabled: bool,
+    pub(crate) to_plugin_tx: Arc<Mutex<mpsc::Sender<InternalEvent>>>,
+    pub(crate) metadata: PluginMetadata,
+}
+
+impl PluginHandle {
+    pub fn new(dir: &str, enabled: bool, tx: mpsc::Sender<InternalEvent>) -> Result<Self> {
+        let ref_id = gen_id();
+        let metadata = get_plugin_meta(&Path::new(dir))?;
+
+        Ok(PluginHandle {
+            ref_id: ref_id.clone(),
+            dir: dir.to_string(),
+            to_plugin_tx: Arc::new(Mutex::new(tx)),
+            enabled,
+            metadata,
+        })
+    }
+
+    pub fn info(&self) -> PluginMetadata {
+        self.metadata.clone()
+    }
+
+    pub fn build_event_to_send(
+        &self,
+        plugin_context: &PluginContext,
+        payload: &InternalEventPayload,
+        reply_id: Option<String>,
+    ) -> InternalEvent {
+        self.build_event_to_send_raw(plugin_context, payload, reply_id)
+    }
+
+    pub(crate) fn build_event_to_send_raw(
+        &self,
+        plugin_context: &PluginContext,
+        payload: &InternalEventPayload,
+        reply_id: Option<String>,
+    ) -> InternalEvent {
+        let dir = Path::new(&self.dir);
+        InternalEvent {
+            id: gen_id(),
+            plugin_ref_id: self.ref_id.clone(),
+            plugin_name: dir.file_name().unwrap().to_str().unwrap().to_string(),
+            reply_id,
+            payload: payload.clone(),
+            context: plugin_context.clone(),
+        }
+    }
+
+    pub async fn send(&self, event: &InternalEvent) -> Result<()> {
+        self.to_plugin_tx.lock().await.send(event.to_owned()).await?;
+        Ok(())
+    }
+}
diff --git a/crates/yaak-plugins/src/plugin_meta.rs b/crates/yaak-plugins/src/plugin_meta.rs
new file mode 100644
index 0000000..13cd3b2
--- /dev/null
+++ b/crates/yaak-plugins/src/plugin_meta.rs
@@ -0,0 +1,64 @@
+use crate::error::Result;
+use serde::{Deserialize, Serialize};
+use std::fs;
+use std::path::Path;
+use ts_rs::TS;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS, PartialEq)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_search.ts")]
+pub struct PluginMetadata {
+    pub version: String,
+    pub name: String,
+    pub display_name: String,
+    pub description: Option<String>,
+    pub homepage_url: Option<String>,
+    pub repository_url: Option<String>,
+}
+
+pub fn get_plugin_meta(plugin_dir: &Path) -> Result<PluginMetadata> {
+    let package_json = fs::File::open(plugin_dir.join("package.json"))?;
+    let package_json: PackageJson = serde_json::from_reader(package_json)?;
+
+    let display_name = match package_json.display_name {
+        None => {
+            let display_name = package_json.name.to_string();
+            let display_name = display_name.split('/').last().unwrap_or(&package_json.name);
+            let display_name = display_name.strip_prefix("yaak-plugin-").unwrap_or(&display_name);
+            let display_name = display_name.strip_prefix("yaak-").unwrap_or(&display_name);
+            display_name.to_string()
+        }
+        Some(n) => n,
+    };
+
+    Ok(PluginMetadata {
+        version: package_json.version,
+        description: package_json.description,
+        name: package_json.name,
+        display_name,
+        homepage_url: package_json.homepage,
+        repository_url: match package_json.repository {
+            None => None,
+            Some(RepositoryField::Object { url }) => Some(url),
+            Some(RepositoryField::String(url)) => Some(url),
+        },
+    })
+}
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct PackageJson {
+    pub name: String,
+    pub display_name: Option<String>,
+    pub version: String,
+    pub repository: Option<RepositoryField>,
+    pub homepage: Option<String>,
+    pub description: Option<String>,
+}
+
+#[derive(Debug, Deserialize)]
+#[serde(untagged)]
+enum RepositoryField {
+    String(String),
+    Object { url: String },
+}
diff --git a/crates/yaak-plugins/src/server_ws.rs b/crates/yaak-plugins/src/server_ws.rs
new file mode 100644
index 0000000..141053a
--- /dev/null
+++ b/crates/yaak-plugins/src/server_ws.rs
@@ -0,0 +1,150 @@
+use crate::events::{ErrorResponse, InternalEvent, InternalEventPayload, InternalEventRawPayload};
+use futures_util::{SinkExt, StreamExt};
+use log::{error, info, warn};
+use std::sync::Arc;
+use tokio::net::{TcpListener, TcpStream};
+use tokio::sync::{Mutex, mpsc};
+use tokio_tungstenite::accept_async_with_config;
+use tokio_tungstenite::tungstenite::Message;
+use tokio_tungstenite::tungstenite::protocol::WebSocketConfig;
+
+#[derive(Clone)]
+pub(crate) struct PluginRuntimeServerWebsocket {
+    pub(crate) app_to_plugin_events_tx: Arc<Mutex<Option<mpsc::Sender<InternalEvent>>>>,
+    client_disconnect_tx: mpsc::Sender<bool>,
+    client_connect_tx: tokio::sync::watch::Sender<bool>,
+    plugin_to_app_events_tx: mpsc::Sender<InternalEvent>,
+}
+
+impl PluginRuntimeServerWebsocket {
+    pub fn new(
+        events_tx: mpsc::Sender<InternalEvent>,
+        disconnect_tx: mpsc::Sender<bool>,
+        connect_tx: tokio::sync::watch::Sender<bool>,
+    ) -> Self {
+        PluginRuntimeServerWebsocket {
+            app_to_plugin_events_tx: Arc::new(Mutex::new(None)),
+            client_disconnect_tx: disconnect_tx,
+            client_connect_tx: connect_tx,
+            plugin_to_app_events_tx: events_tx,
+        }
+    }
+
+    pub async fn listen(&self, listener: TcpListener) {
+        while let Ok((stream, _)) = listener.accept().await {
+            self.accept_connection(stream).await;
+        }
+    }
+
+    async fn accept_connection(&self, stream: TcpStream) {
+        let (to_plugin_tx, mut to_plugin_rx) = mpsc::channel::<InternalEvent>(2048);
+        let mut app_to_plugin_events_tx = self.app_to_plugin_events_tx.lock().await;
+        *app_to_plugin_events_tx = Some(to_plugin_tx);
+
+        let plugin_to_app_events_tx = self.plugin_to_app_events_tx.clone();
+        let client_disconnect_tx = self.client_disconnect_tx.clone();
+        let client_connect_tx = self.client_connect_tx.clone();
+
+        let addr = stream.peer_addr().expect("connected streams should have a peer address");
+
+        let conf = WebSocketConfig::default();
+        let ws_stream = accept_async_with_config(stream, Some(conf))
+            .await
+            .expect("Error during the websocket handshake occurred");
+
+        let (mut ws_sender, mut ws_receiver) = ws_stream.split();
+
+        tokio::spawn(async move {
+            client_connect_tx.send(true).expect("Failed to send client ready event");
+
+            info!("New plugin runtime websocket connection: {}", addr);
+
+            loop {
+                tokio::select! {
+                    msg = ws_receiver.next() => {
+                        let msg = match msg {
+                            Some(Ok(msg)) => msg,
+                            Some(Err(e)) => {
+                                warn!("Websocket error {e:?}");
+                                continue;
+                            }
+                            None => break,
+                        };
+
+                        // Skip non-text messages
+                        if !msg.is_text() {
+                            warn!("Received non-text message from plugin runtime");
+                            continue;
+                        }
+
+                        let msg_text = match msg.into_text() {
+                            Ok(text) => text,
+                            Err(e) => {
+                                error!("Failed to convert message to text: {e:?}");
+                                continue;
+                            }
+                        };
+                        let event = match serde_json::from_str::<InternalEventRawPayload>(&msg_text) {
+                            Ok(e) => e,
+                            Err(e) => {
+                                error!("Failed to decode plugin event {e:?} -> {msg_text}");
+                                continue;
+                            }
+                        };
+
+                        // Parse everything but the payload so we can catch errors on that, specifically
+                        let payload = serde_json::from_value::<InternalEventPayload>(event.payload.clone())
+                            .unwrap_or_else(|e| {
+                                warn!("Plugin event parse error from {}: {:?} {}", event.plugin_name, e, event.payload);
+                                InternalEventPayload::ErrorResponse(ErrorResponse {
+                                    error: format!("Plugin event parse error from {}: {e:?}", event.plugin_name),
+                                })
+                            });
+
+                        let event = InternalEvent{
+                            id: event.id,
+                            payload,
+                            plugin_ref_id: event.plugin_ref_id,
+                            plugin_name: event.plugin_name,
+                            context: event.context,
+                            reply_id: event.reply_id,
+                        };
+
+                        // Send event to subscribers
+                        // Emit event to the channel for server to handle
+                        if let Err(e) = plugin_to_app_events_tx.try_send(event) {
+                            warn!("Failed to send to channel. Receiver probably isn't listening: {:?}", e);
+                        }
+                    }
+
+                    event_for_plugin = to_plugin_rx.recv() => {
+                        match event_for_plugin {
+                            None => {
+                                error!("Plugin runtime client WS channel closed");
+                                return;
+                            },
+                            Some(event) => {
+                                let event_bytes = match serde_json::to_string(&event) {
+                                    Ok(bytes) => bytes,
+                                    Err(e) => {
+                                        error!("Failed to serialize event: {:?}", e);
+                                        continue;
+                                    }
+                                };
+                                let msg = Message::text(event_bytes);
+                                if let Err(e) = ws_sender.send(msg).await {
+                                    error!("Failed to send message to plugin runtime: {:?}", e);
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            if let Err(e) = client_disconnect_tx.send(true).await {
+                warn!("Failed to send killed event {:?}", e);
+            }
+        });
+    }
+}
diff --git a/crates/yaak-plugins/src/template_callback.rs b/crates/yaak-plugins/src/template_callback.rs
new file mode 100644
index 0000000..3bd60ad
--- /dev/null
+++ b/crates/yaak-plugins/src/template_callback.rs
@@ -0,0 +1,87 @@
+//! Plugin template callback implementation.
+//!
+//! This provides a TemplateCallback implementation that delegates to plugins
+//! for template function execution.
+
+use crate::events::{JsonPrimitive, PluginContext, RenderPurpose};
+use crate::manager::PluginManager;
+use crate::native_template_functions::{
+    template_function_keychain_run, template_function_secure_run,
+    template_function_secure_transform_arg,
+};
+use std::collections::HashMap;
+use std::sync::Arc;
+use yaak_crypto::manager::EncryptionManager;
+use yaak_templates::TemplateCallback;
+use yaak_templates::error::Result;
+
+#[derive(Clone)]
+pub struct PluginTemplateCallback {
+    plugin_manager: Arc<PluginManager>,
+    encryption_manager: Arc<EncryptionManager>,
+    render_purpose: RenderPurpose,
+    plugin_context: PluginContext,
+}
+
+impl PluginTemplateCallback {
+    pub fn new(
+        plugin_manager: Arc<PluginManager>,
+        encryption_manager: Arc<EncryptionManager>,
+        plugin_context: &PluginContext,
+        render_purpose: RenderPurpose,
+    ) -> PluginTemplateCallback {
+        PluginTemplateCallback {
+            plugin_manager,
+            encryption_manager,
+            render_purpose,
+            plugin_context: plugin_context.to_owned(),
+        }
+    }
+}
+
+impl TemplateCallback for PluginTemplateCallback {
+    async fn run(&self, fn_name: &str, args: HashMap<String, serde_json::Value>) -> Result<String> {
+        // The beta named the function `Response` but was changed in stable.
+        // Keep this here for a while because there's no easy way to migrate
+        let fn_name = if fn_name == "Response" { "response" } else { fn_name };
+
+        if fn_name == "secure" {
+            return template_function_secure_run(
+                &self.encryption_manager,
+                args,
+                &self.plugin_context,
+            );
+        } else if fn_name == "keychain" || fn_name == "keyring" {
+            return template_function_keychain_run(args);
+        }
+
+        let mut primitive_args = HashMap::new();
+        for (key, value) in args {
+            primitive_args.insert(key, JsonPrimitive::from(value));
+        }
+
+        let resp = self
+            .plugin_manager
+            .call_template_function(
+                &self.plugin_context,
+                fn_name,
+                primitive_args,
+                self.render_purpose.to_owned(),
+            )
+            .await?;
+        Ok(resp)
+    }
+
+    fn transform_arg(&self, fn_name: &str, arg_name: &str, arg_value: &str) -> Result<String> {
+        if fn_name == "secure" {
+            return template_function_secure_transform_arg(
+                &self.encryption_manager,
+                &self.plugin_context,
+                arg_name,
+                arg_value,
+            );
+        }
+
+        Ok(arg_value.to_string())
+    }
+}
diff --git a/crates/yaak-plugins/src/util.rs b/crates/yaak-plugins/src/util.rs
new file mode 100644
index 0000000..055f73f
--- /dev/null
+++ b/crates/yaak-plugins/src/util.rs
@@ -0,0 +1,6 @@
+use rand::Rng;
+use rand::distr::Alphanumeric;
+
+pub fn gen_id() -> String {
+    rand::rng().sample_iter(&Alphanumeric).take(5).map(char::from).collect()
+}
diff --git a/crates/yaak-proxy/Cargo.toml b/crates/yaak-proxy/Cargo.toml
new file mode 100644
index 0000000..3cc4e72
--- /dev/null
+++ b/crates/yaak-proxy/Cargo.toml
@@ -0,0 +1,25 @@
+[package]
+name = "yaak-proxy"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+hyper = { version = "1", features = ["http1", "http2", "server", "client"] }
+hyper-util = { version = "0.1", features = ["tokio", "server-auto", "client-legacy"] }
+http-body-util = "0.1"
+http = "1"
+bytes = "1"
+tokio = { workspace = true, features = [
+  "rt-multi-thread",
+  "net",
+  "sync",
+  "macros",
+  "time",
+  "io-util",
+] }
+rcgen = "0.13"
+rustls = { workspace = true, features = ["ring"] }
+rustls-native-certs = "0.8"
+tokio-rustls = "0.26"
+pem = "3"
diff --git a/crates/yaak-proxy/src/body.rs b/crates/yaak-proxy/src/body.rs
new file mode 100644
index 0000000..5eef207
--- /dev/null
+++ b/crates/yaak-proxy/src/body.rs
@@ -0,0 +1,113 @@
+use std::pin::Pin;
+use std::sync::mpsc as std_mpsc;
+use std::task::{Context, Poll};
+use std::time::Instant;
+
+use bytes::Bytes;
+use hyper::body::{Body, Frame};
+
+use crate::ProxyEvent;
+
+/// A body wrapper that emits `ResponseBodyChunk` per frame and
+/// `ResponseBodyComplete` when the stream finishes.
+pub struct MeasuredBody<B> {
+    inner: B,
+    request_id: u64,
+    bytes_count: u64,
+    chunks: Vec<Bytes>,
+    event_tx: std_mpsc::Sender<ProxyEvent>,
+    start: Instant,
+    finished: bool,
+}
+
+impl<B> MeasuredBody<B> {
+    pub fn new(
+        inner: B,
+        request_id: u64,
+        start: Instant,
+        event_tx: std_mpsc::Sender<ProxyEvent>,
+    ) -> Self {
+        Self {
+            inner,
+            request_id,
+            bytes_count: 0,
+            chunks: Vec::new(),
+            event_tx,
+            start,
+            finished: false,
+        }
+    }
+
+    fn send_complete(&mut self) {
+        if !self.finished {
+            self.finished = true;
+            let body = if self.chunks.is_empty() {
+                None
+            } else {
+                let mut buf = Vec::with_capacity(self.bytes_count as usize);
+                for chunk in self.chunks.drain(..) {
+                    buf.extend_from_slice(&chunk);
+                }
+                Some(buf)
+            };
+            let _ = self.event_tx.send(ProxyEvent::ResponseBodyComplete {
+                id: self.request_id,
+                body,
+                size: self.bytes_count,
+                elapsed_ms: self.start.elapsed().as_millis() as u64,
+            });
+        }
+    }
+}
+
+impl<B> Body for MeasuredBody<B>
+where
+    B: Body<Data = Bytes> + Unpin,
+    B::Error: std::error::Error + Send + Sync + 'static,
+{
+    type Data = Bytes;
+    type Error = B::Error;
+
+    fn poll_frame(
+        mut self: Pin<&mut Self>,
+        cx: &mut Context<'_>,
+    ) -> Poll<Option<Result<Frame<Self::Data>, Self::Error>>> {
+        let inner = Pin::new(&mut self.inner);
+        match inner.poll_frame(cx) {
+            Poll::Ready(Some(Ok(frame))) => {
+                if let Some(data) = frame.data_ref() {
+                    let len = data.len();
+                    self.bytes_count += len as u64;
+                    self.chunks.push(data.clone());
+                    let _ = self
+                        .event_tx
+                        .send(ProxyEvent::ResponseBodyChunk { id: self.request_id, bytes: len });
+                }
+                Poll::Ready(Some(Ok(frame)))
+            }
+            Poll::Ready(Some(Err(e))) => {
+                self.send_complete();
+                Poll::Ready(Some(Err(e)))
+            }
+            Poll::Ready(None) => {
+                self.send_complete();
+                Poll::Ready(None)
+            }
+            Poll::Pending => Poll::Pending,
+        }
+    }
+
+    fn is_end_stream(&self) -> bool {
+        self.inner.is_end_stream()
+    }
+
+    fn size_hint(&self) -> hyper::body::SizeHint {
+        self.inner.size_hint()
+    }
+}
+
+impl<B> Drop for MeasuredBody<B> {
+    fn drop(&mut self) {
+        self.send_complete();
+    }
+}
diff --git a/crates/yaak-proxy/src/cert.rs b/crates/yaak-proxy/src/cert.rs
new file mode 100644
index 0000000..e9105e0
--- /dev/null
+++ b/crates/yaak-proxy/src/cert.rs
@@ -0,0 +1,69 @@
+use std::collections::HashMap;
+use std::sync::{Arc, Mutex};
+
+use rcgen::{BasicConstraints, Certificate, CertificateParams, IsCa, KeyPair, KeyUsagePurpose};
+use rustls::ServerConfig;
+use rustls::pki_types::{CertificateDer, PrivateKeyDer, PrivatePkcs8KeyDer};
+
+pub struct CertificateAuthority {
+    ca_cert: Certificate,
+    ca_cert_der: CertificateDer<'static>,
+    ca_key: KeyPair,
+    cache: Mutex<HashMap<String, Arc<ServerConfig>>>,
+}
+
+impl CertificateAuthority {
+    pub fn new() -> Result<Self, Box<dyn std::error::Error + Send + Sync>> {
+        let mut params = CertificateParams::default();
+        params.is_ca = IsCa::Ca(BasicConstraints::Unconstrained);
+        params.key_usages.push(KeyUsagePurpose::KeyCertSign);
+        params.key_usages.push(KeyUsagePurpose::CrlSign);
+        params.distinguished_name.push(rcgen::DnType::CommonName, "Debug Proxy CA");
+        params.distinguished_name.push(rcgen::DnType::OrganizationName, "Debug Proxy");
+
+        let key = KeyPair::generate()?;
+        let ca_cert = params.self_signed(&key)?;
+        let ca_cert_der = ca_cert.der().clone();
+
+        Ok(Self { ca_cert, ca_cert_der, ca_key: key, cache: Mutex::new(HashMap::new()) })
+    }
+
+    pub fn ca_pem(&self) -> String {
+        pem::encode(&pem::Pem::new("CERTIFICATE", self.ca_cert_der.to_vec()))
+    }
+
+    pub fn server_config(
+        &self,
+        domain: &str,
+    ) -> Result<Arc<ServerConfig>, Box<dyn std::error::Error + Send + Sync>> {
+        {
+            let cache = self.cache.lock().unwrap();
+            if let Some(config) = cache.get(domain) {
+                return Ok(config.clone());
+            }
+        }
+
+        let mut params = CertificateParams::new(vec![domain.to_string()])?;
+        params.distinguished_name.push(rcgen::DnType::CommonName, domain);
+
+        let leaf_key = KeyPair::generate()?;
+        let leaf_cert = params.signed_by(&leaf_key, &self.ca_cert, &self.ca_key)?;
+
+        let cert_der = leaf_cert.der().clone();
+        let key_der = leaf_key.serialize_der();
+
+        let mut config =
+            ServerConfig::builder_with_provider(Arc::new(rustls::crypto::ring::default_provider()))
+                .with_safe_default_protocol_versions()?
+                .with_no_client_auth()
+                .with_single_cert(
+                    vec![cert_der, self.ca_cert_der.clone()],
+                    PrivateKeyDer::Pkcs8(PrivatePkcs8KeyDer::from(key_der)),
+                )?;
+        config.alpn_protocols = vec![b"h2".to_vec(), b"http/1.1".to_vec()];
+
+        let config = Arc::new(config);
+        self.cache.lock().unwrap().insert(domain.to_string(), config.clone());
+        Ok(config)
+    }
+}
diff --git a/crates/yaak-proxy/src/connection.rs b/crates/yaak-proxy/src/connection.rs
new file mode 100644
index 0000000..9719876
--- /dev/null
+++ b/crates/yaak-proxy/src/connection.rs
@@ -0,0 +1,32 @@
+use std::sync::Arc;
+use std::sync::mpsc as std_mpsc;
+
+use hyper::server::conn::http1;
+use hyper::service::service_fn;
+use tokio::net::TcpStream;
+
+use crate::ProxyEvent;
+use crate::cert::CertificateAuthority;
+use crate::request::handle_request;
+
+pub(crate) async fn handle_connection(
+    stream: TcpStream,
+    event_tx: std_mpsc::Sender<ProxyEvent>,
+    ca: Arc<CertificateAuthority>,
+) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+    let tx = event_tx.clone();
+    http1::Builder::new()
+        .preserve_header_case(true)
+        .title_case_headers(true)
+        .serve_connection(
+            hyper_util::rt::TokioIo::new(stream),
+            service_fn(move |req| {
+                let tx = tx.clone();
+                let ca = ca.clone();
+                async move { handle_request(req, tx, ca).await }
+            }),
+        )
+        .with_upgrades()
+        .await
+        .map_err(|e| Box::new(e) as Box<dyn std::error::Error + Send + Sync>)
+}
diff --git a/crates/yaak-proxy/src/lib.rs b/crates/yaak-proxy/src/lib.rs
new file mode 100644
index 0000000..a83a2d7
--- /dev/null
+++ b/crates/yaak-proxy/src/lib.rs
@@ -0,0 +1,183 @@
+pub mod body;
+pub mod cert;
+mod connection;
+mod request;
+
+use std::net::SocketAddr;
+use std::sync::Arc;
+use std::sync::atomic::AtomicU64;
+use std::sync::mpsc as std_mpsc;
+
+use cert::CertificateAuthority;
+use tokio::net::TcpListener;
+
+use connection::handle_connection;
+
+static REQUEST_ID: AtomicU64 = AtomicU64::new(1);
+
+/// Granular events emitted during request/response lifecycle.
+/// Each event carries a request `id` so consumers can correlate events.
+#[derive(Debug, Clone)]
+pub enum ProxyEvent {
+    /// A new request has been received from the client.
+    RequestStart {
+        id: u64,
+        method: String,
+        url: String,
+        http_version: String,
+    },
+    /// A request header sent to the upstream server.
+    RequestHeader {
+        id: u64,
+        name: String,
+        value: String,
+    },
+    /// The full request body (buffered before forwarding).
+    RequestBody { id: u64, body: Vec<u8> },
+    /// Response headers received from upstream.
+    ResponseStart {
+        id: u64,
+        status: u16,
+        http_version: String,
+        elapsed_ms: u64,
+    },
+    /// A response header received from the upstream server.
+    ResponseHeader {
+        id: u64,
+        name: String,
+        value: String,
+    },
+    /// A chunk of the response body was received (emitted per-frame).
+    ResponseBodyChunk { id: u64, bytes: usize },
+    /// The response body stream has completed.
+    ResponseBodyComplete {
+        id: u64,
+        body: Option<Vec<u8>>,
+        size: u64,
+        elapsed_ms: u64,
+    },
+    /// The upstream request failed.
+    Error { id: u64, error: String },
+}
+
+/// Accumulated view of a proxied request, built from `ProxyEvent`s.
+#[derive(Debug, Clone)]
+pub struct CapturedRequest {
+    pub id: u64,
+    pub method: String,
+    pub url: String,
+    pub status: Option<u16>,
+    pub elapsed_ms: Option<u64>,
+    pub http_version: String,
+    pub remote_http_version: Option<String>,
+    pub request_headers: Vec<(String, String)>,
+    pub request_body: Option<Vec<u8>>,
+    pub response_headers: Vec<(String, String)>,
+    pub response_body: Option<Vec<u8>>,
+    pub response_body_size: u64,
+    pub state: RequestState,
+    pub error: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum RequestState {
+    Sending,
+    Receiving,
+    Complete,
+    Error,
+}
+
+pub struct ProxyHandle {
+    shutdown_tx: Option<tokio::sync::oneshot::Sender<()>>,
+    thread_handle: Option<std::thread::JoinHandle<()>>,
+    event_rx: Option<std_mpsc::Receiver<ProxyEvent>>,
+    pub port: u16,
+    pub ca_pem: String,
+}
+
+impl ProxyHandle {
+    /// Take the event receiver. Can only be called once — returns `None` after the first call.
+    pub fn take_event_rx(&mut self) -> Option<std_mpsc::Receiver<ProxyEvent>> {
+        self.event_rx.take()
+    }
+}
+
+impl Drop for ProxyHandle {
+    fn drop(&mut self) {
+        if let Some(tx) = self.shutdown_tx.take() {
+            let _ = tx.send(());
+        }
+        if let Some(handle) = self.thread_handle.take() {
+            let _ = handle.join();
+        }
+    }
+}
+
+pub fn start_proxy(port: u16) -> Result<ProxyHandle, String> {
+    let ca = CertificateAuthority::new().map_err(|e| format!("Failed to create CA: {e}"))?;
+    let ca_pem = ca.ca_pem();
+    let ca = Arc::new(ca);
+
+    let (event_tx, event_rx) = std_mpsc::channel();
+    let (shutdown_tx, shutdown_rx) = tokio::sync::oneshot::channel();
+    let (ready_tx, ready_rx) = std_mpsc::channel();
+
+    let thread_handle = std::thread::spawn(move || {
+        let rt = match tokio::runtime::Runtime::new() {
+            Ok(rt) => rt,
+            Err(e) => {
+                let _ = ready_tx.send(Err(format!("Failed to create runtime: {e}")));
+                return;
+            }
+        };
+
+        rt.block_on(async move {
+            let addr = SocketAddr::from(([127, 0, 0, 1], port));
+            let listener = match TcpListener::bind(addr).await {
+                Ok(l) => l,
+                Err(e) => {
+                    let _ = ready_tx.send(Err(format!("Failed to bind: {e}")));
+                    return;
+                }
+            };
+
+            let bound_port = listener.local_addr().unwrap().port();
+            let _ = ready_tx.send(Ok(bound_port));
+
+            let mut shutdown_rx = shutdown_rx;
+            loop {
+                tokio::select! {
+                    result = listener.accept() => {
+                        match result {
+                            Ok((stream, _addr)) => {
+                                let tx = event_tx.clone();
+                                let ca = ca.clone();
+                                tokio::spawn(async move {
+                                    if let Err(e) = handle_connection(stream, tx, ca).await {
+                                        eprintln!("Connection error: {e}");
+                                    }
+                                });
+                            }
+                            Err(e) => eprintln!("Accept error: {e}"),
+                        }
+                    }
+                    _ = &mut shutdown_rx => {
+                        break;
+                    }
+                }
+            }
+        });
+    });
+
+    match ready_rx.recv() {
+        Ok(Ok(bound_port)) => Ok(ProxyHandle {
+            shutdown_tx: Some(shutdown_tx),
+            thread_handle: Some(thread_handle),
+            event_rx: Some(event_rx),
+            port: bound_port,
+            ca_pem,
+        }),
+        Ok(Err(e)) => Err(e),
+        Err(_) => Err("Proxy thread died before binding".into()),
+    }
+}
diff --git a/crates/yaak-proxy/src/request.rs b/crates/yaak-proxy/src/request.rs
new file mode 100644
index 0000000..1de6bb6
--- /dev/null
+++ b/crates/yaak-proxy/src/request.rs
@@ -0,0 +1,339 @@
+use std::convert::Infallible;
+use std::sync::Arc;
+use std::sync::atomic::Ordering;
+use std::sync::mpsc as std_mpsc;
+use std::time::Instant;
+
+use bytes::Bytes;
+use http_body_util::{BodyExt, Full};
+use hyper::body::Incoming;
+use hyper::header::HeaderMap;
+use hyper::service::service_fn;
+use hyper::{Method, Request, Response, StatusCode, Uri};
+use hyper_util::client::legacy::Client;
+use hyper_util::rt::TokioExecutor;
+use hyper_util::server::conn::auto;
+use rustls::ClientConfig;
+use rustls::pki_types::ServerName;
+use tokio::net::TcpStream;
+use tokio_rustls::TlsAcceptor;
+
+use crate::body::MeasuredBody;
+use crate::cert::CertificateAuthority;
+use crate::{ProxyEvent, REQUEST_ID};
+
+type BoxBody = http_body_util::combinators::BoxBody<Bytes, hyper::Error>;
+
+fn full_body(bytes: Bytes) -> BoxBody {
+    Full::new(bytes).map_err(|never| match never {}).boxed()
+}
+
+fn measured_incoming(
+    incoming: Incoming,
+    id: u64,
+    start: Instant,
+    tx: std_mpsc::Sender<ProxyEvent>,
+) -> BoxBody {
+    MeasuredBody::new(incoming, id, start, tx).boxed()
+}
+
+fn version_str(v: hyper::Version) -> String {
+    match v {
+        hyper::Version::HTTP_09 => "HTTP/0.9",
+        hyper::Version::HTTP_10 => "HTTP/1.0",
+        hyper::Version::HTTP_11 => "HTTP/1.1",
+        hyper::Version::HTTP_2 => "HTTP/2",
+        hyper::Version::HTTP_3 => "HTTP/3",
+        _ => "unknown",
+    }
+    .to_string()
+}
+
+fn emit_request_events(
+    tx: &std_mpsc::Sender<ProxyEvent>,
+    id: u64,
+    headers: &HeaderMap,
+    body: &Option<Vec<u8>>,
+) {
+    for (name, value) in headers.iter() {
+        let _ = tx.send(ProxyEvent::RequestHeader {
+            id,
+            name: name.to_string(),
+            value: value.to_str().unwrap_or("<binary>").to_string(),
+        });
+    }
+    if let Some(body) = body {
+        let _ = tx.send(ProxyEvent::RequestBody { id, body: body.clone() });
+    }
+}
+
+fn emit_response_events(
+    tx: &std_mpsc::Sender<ProxyEvent>,
+    id: u64,
+    resp: &Response<Incoming>,
+    start: &Instant,
+) {
+    let _ = tx.send(ProxyEvent::ResponseStart {
+        id,
+        status: resp.status().as_u16(),
+        http_version: version_str(resp.version()),
+        elapsed_ms: start.elapsed().as_millis() as u64,
+    });
+    for (name, value) in resp.headers().iter() {
+        let _ = tx.send(ProxyEvent::ResponseHeader {
+            id,
+            name: name.to_string(),
+            value: value.to_str().unwrap_or("<binary>").to_string(),
+        });
+    }
+}
+
+pub(crate) async fn handle_request(
+    req: Request<Incoming>,
+    event_tx: std_mpsc::Sender<ProxyEvent>,
+    ca: Arc<CertificateAuthority>,
+) -> Result<Response<BoxBody>, Infallible> {
+    let result = if req.method() == Method::CONNECT {
+        handle_connect(req, event_tx, ca).await
+    } else {
+        handle_http(req, event_tx).await
+    };
+    match result {
+        Ok(resp) => Ok(resp),
+        Err(e) => {
+            eprintln!("Proxy error: {e}");
+            Ok(Response::builder()
+                .status(StatusCode::BAD_GATEWAY)
+                .body(full_body(Bytes::from(format!("Proxy error: {e}"))))
+                .unwrap())
+        }
+    }
+}
+
+async fn handle_http(
+    req: Request<Incoming>,
+    event_tx: std_mpsc::Sender<ProxyEvent>,
+) -> Result<Response<BoxBody>, Box<dyn std::error::Error + Send + Sync>> {
+    let id = REQUEST_ID.fetch_add(1, Ordering::Relaxed);
+    let method = req.method().to_string();
+    let uri = req.uri().to_string();
+    let http_version = version_str(req.version());
+    let start = Instant::now();
+
+    let _ = event_tx.send(ProxyEvent::RequestStart { id, method, url: uri.clone(), http_version });
+
+    let client: Client<_, Full<Bytes>> = Client::builder(TokioExecutor::new()).build_http();
+
+    let (parts, body) = req.into_parts();
+    let body_bytes = body.collect().await?.to_bytes();
+    let request_body = if body_bytes.is_empty() { None } else { Some(body_bytes.to_vec()) };
+    emit_request_events(&event_tx, id, &parts.headers, &request_body);
+
+    let outgoing_req = Request::from_parts(parts, Full::new(body_bytes));
+
+    match client.request(outgoing_req).await {
+        Ok(resp) => {
+            emit_response_events(&event_tx, id, &resp, &start);
+
+            let (parts, body) = resp.into_parts();
+            Ok(Response::from_parts(parts, measured_incoming(body, id, start, event_tx)))
+        }
+        Err(e) => {
+            let _ = event_tx.send(ProxyEvent::Error { id, error: e.to_string() });
+            Err(Box::new(e) as Box<dyn std::error::Error + Send + Sync>)
+        }
+    }
+}
+
+async fn handle_connect(
+    req: Request<Incoming>,
+    event_tx: std_mpsc::Sender<ProxyEvent>,
+    ca: Arc<CertificateAuthority>,
+) -> Result<Response<BoxBody>, Box<dyn std::error::Error + Send + Sync>> {
+    let authority = req.uri().authority().map(|a| a.to_string()).unwrap_or_default();
+    let (host, port) = parse_host_port(&authority);
+
+    let server_config = ca.server_config(&host)?;
+    let acceptor = TlsAcceptor::from(server_config);
+
+    let target_addr = format!("{host}:{port}");
+
+    tokio::spawn(async move {
+        let upgraded = match hyper::upgrade::on(req).await {
+            Ok(u) => u,
+            Err(e) => {
+                eprintln!("CONNECT upgrade failed: {e}");
+                return;
+            }
+        };
+
+        let tls_stream = match acceptor.accept(hyper_util::rt::TokioIo::new(upgraded)).await {
+            Ok(s) => s,
+            Err(e) => {
+                eprintln!("TLS accept failed for {host}: {e}");
+                return;
+            }
+        };
+
+        let tx = event_tx.clone();
+        let host_for_requests = host.clone();
+        let mut builder = auto::Builder::new(TokioExecutor::new());
+        builder.http1().preserve_header_case(true).title_case_headers(true);
+        if let Err(e) = builder
+            .serve_connection_with_upgrades(
+                hyper_util::rt::TokioIo::new(tls_stream),
+                service_fn(move |req| {
+                    let tx = tx.clone();
+                    let host = host_for_requests.clone();
+                    let target_addr = target_addr.clone();
+                    async move { handle_tunneled_request(req, tx, &host, &target_addr).await }
+                }),
+            )
+            .await
+        {
+            eprintln!("MITM connection error for {host}: {e}");
+        }
+    });
+
+    Ok(Response::new(full_body(Bytes::new())))
+}
+
+async fn handle_tunneled_request(
+    req: Request<Incoming>,
+    event_tx: std_mpsc::Sender<ProxyEvent>,
+    host: &str,
+    target_addr: &str,
+) -> Result<Response<BoxBody>, Infallible> {
+    let result = forward_https(req, event_tx, host, target_addr).await;
+    match result {
+        Ok(resp) => Ok(resp),
+        Err(e) => {
+            eprintln!("HTTPS forward error: {e:?}");
+            Ok(Response::builder()
+                .status(StatusCode::BAD_GATEWAY)
+                .body(full_body(Bytes::from(format!("Proxy error: {e}"))))
+                .unwrap())
+        }
+    }
+}
+
+enum HttpSender {
+    H1(hyper::client::conn::http1::SendRequest<Full<Bytes>>),
+    H2(hyper::client::conn::http2::SendRequest<Full<Bytes>>),
+}
+
+impl HttpSender {
+    async fn send_request(
+        &mut self,
+        req: Request<Full<Bytes>>,
+    ) -> Result<Response<Incoming>, hyper::Error> {
+        match self {
+            HttpSender::H1(s) => s.send_request(req).await,
+            HttpSender::H2(s) => s.send_request(req).await,
+        }
+    }
+}
+
+async fn forward_https(
+    req: Request<Incoming>,
+    event_tx: std_mpsc::Sender<ProxyEvent>,
+    host: &str,
+    target_addr: &str,
+) -> Result<Response<BoxBody>, Box<dyn std::error::Error + Send + Sync>> {
+    let id = REQUEST_ID.fetch_add(1, Ordering::Relaxed);
+    let method = req.method().to_string();
+    let http_version = version_str(req.version());
+    let path = req.uri().path_and_query().map(|pq| pq.to_string()).unwrap_or_else(|| "/".into());
+    let uri_str = format!("https://{host}{path}");
+    let start = Instant::now();
+
+    let _ =
+        event_tx.send(ProxyEvent::RequestStart { id, method, url: uri_str.clone(), http_version });
+
+    // Connect to upstream with TLS
+    let tcp_stream = TcpStream::connect(target_addr).await?;
+
+    let mut root_store = rustls::RootCertStore::empty();
+    for cert in rustls_native_certs::load_native_certs().certs {
+        let _ = root_store.add(cert);
+    }
+
+    let mut tls_config =
+        ClientConfig::builder_with_provider(Arc::new(rustls::crypto::ring::default_provider()))
+            .with_safe_default_protocol_versions()?
+            .with_root_certificates(root_store)
+            .with_no_client_auth();
+    tls_config.alpn_protocols = vec![b"h2".to_vec(), b"http/1.1".to_vec()];
+
+    let connector = tokio_rustls::TlsConnector::from(Arc::new(tls_config));
+    let server_name = ServerName::try_from(host.to_string())?;
+    let tls_stream = connector.connect(server_name, tcp_stream).await?;
+
+    let negotiated_h2 = tls_stream.get_ref().1.alpn_protocol().map_or(false, |p| p == b"h2");
+
+    let io = hyper_util::rt::TokioIo::new(tls_stream);
+
+    let mut sender = if negotiated_h2 {
+        let (sender, conn) =
+            hyper::client::conn::http2::Builder::new(TokioExecutor::new()).handshake(io).await?;
+        tokio::spawn(async move {
+            if let Err(e) = conn.await {
+                eprintln!("Upstream h2 connection error: {e}");
+            }
+        });
+        HttpSender::H2(sender)
+    } else {
+        let (sender, conn) = hyper::client::conn::http1::Builder::new()
+            .preserve_header_case(true)
+            .title_case_headers(true)
+            .handshake(io)
+            .await?;
+        tokio::spawn(async move {
+            if let Err(e) = conn.await {
+                eprintln!("Upstream h1 connection error: {e}");
+            }
+        });
+        HttpSender::H1(sender)
+    };
+
+    // Capture request metadata
+    let (mut parts, body) = req.into_parts();
+    let body_bytes = body.collect().await?.to_bytes();
+    let request_body = if body_bytes.is_empty() { None } else { Some(body_bytes.to_vec()) };
+    emit_request_events(&event_tx, id, &parts.headers, &request_body);
+
+    if negotiated_h2 {
+        // HTTP/2 requires absolute-form URI with scheme + authority
+        parts.uri = uri_str.parse::<Uri>()?;
+    } else {
+        parts.uri = path.parse::<Uri>()?;
+    }
+
+    if !parts.headers.contains_key(hyper::header::HOST) {
+        parts.headers.insert(hyper::header::HOST, host.parse()?);
+    }
+
+    let outgoing = Request::from_parts(parts, Full::new(body_bytes));
+
+    match sender.send_request(outgoing).await {
+        Ok(resp) => {
+            emit_response_events(&event_tx, id, &resp, &start);
+
+            let (parts, body) = resp.into_parts();
+            Ok(Response::from_parts(parts, measured_incoming(body, id, start, event_tx)))
+        }
+        Err(e) => {
+            let _ = event_tx.send(ProxyEvent::Error { id, error: e.to_string() });
+            Err(Box::new(e) as Box<dyn std::error::Error + Send + Sync>)
+        }
+    }
+}
+
+fn parse_host_port(authority: &str) -> (String, u16) {
+    if let Some((host, port_str)) = authority.rsplit_once(':') {
+        if let Ok(port) = port_str.parse::<u16>() {
+            return (host.to_string(), port);
+        }
+    }
+    (authority.to_string(), 443)
+}
diff --git a/crates/yaak-sse/Cargo.toml b/crates/yaak-sse/Cargo.toml
new file mode 100644
index 0000000..4b98fbb
--- /dev/null
+++ b/crates/yaak-sse/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "yaak-sse"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+serde = { workspace = true, features = ["derive"] }
+ts-rs = { workspace = true, features = ["serde-json-impl"] }
diff --git a/crates/yaak-sse/bindings/sse.ts b/crates/yaak-sse/bindings/sse.ts
new file mode 100644
index 0000000..e70fa19
--- /dev/null
+++ b/crates/yaak-sse/bindings/sse.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type ServerSentEvent = { eventType: string, data: string, id: string | null, retry: bigint | null, };
diff --git a/crates/yaak-sse/index.ts b/crates/yaak-sse/index.ts
new file mode 100644
index 0000000..54cf54d
--- /dev/null
+++ b/crates/yaak-sse/index.ts
@@ -0,0 +1,2 @@
+export * from "./bindings/sse";
+export * from "./summary";
diff --git a/crates/yaak-sse/package.json b/crates/yaak-sse/package.json
new file mode 100644
index 0000000..598f16a
--- /dev/null
+++ b/crates/yaak-sse/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@yaakapp-internal/sse",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "jsonpath-plus": "^10.3.0"
+  },
+  "main": "index.ts",
+  "scripts": {
+    "test": "vitest run"
+  }
+}
diff --git a/crates/yaak-sse/src/lib.rs b/crates/yaak-sse/src/lib.rs
new file mode 100644
index 0000000..b980979
--- /dev/null
+++ b/crates/yaak-sse/src/lib.rs
@@ -0,0 +1 @@
+pub mod sse;
diff --git a/crates/yaak-sse/src/sse.rs b/crates/yaak-sse/src/sse.rs
new file mode 100644
index 0000000..e8860a4
--- /dev/null
+++ b/crates/yaak-sse/src/sse.rs
@@ -0,0 +1,12 @@
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "sse.ts")]
+pub struct ServerSentEvent {
+    pub event_type: String,
+    pub data: String,
+    pub id: Option<String>,
+    pub retry: Option<u64>,
+}
diff --git a/crates/yaak-sse/summary.test.ts b/crates/yaak-sse/summary.test.ts
new file mode 100644
index 0000000..4d20603
--- /dev/null
+++ b/crates/yaak-sse/summary.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { computeSseSummary, extractSseValueAtPath } from "./summary";
+
+describe("extractSseValueAtPath", () => {
+  it("supports simple paths", () => {
+    expect(
+      extractSseValueAtPath(
+        JSON.stringify({ choices: [{ delta: { content: "hello" } }] }),
+        "$.choices[0].delta.content",
+      ),
+    ).toBe("hello");
+  });
+
+  it("supports full JSONPath expressions", () => {
+    expect(
+      extractSseValueAtPath(
+        JSON.stringify({
+          choices: [
+            { delta: { role: "assistant" } },
+            { delta: { content: "hello" } },
+            { delta: { content: " world" } },
+          ],
+        }),
+        "$.choices[*].delta.content",
+      ),
+    ).toBe("hello world");
+  });
+
+  it("returns null when a JSONPath expression has no matches", () => {
+    expect(extractSseValueAtPath(JSON.stringify({ delta: {} }), "$.delta.text")).toBeNull();
+  });
+});
+
+describe("computeSseSummary", () => {
+  it("concatenates JSONPath matches across SSE messages", () => {
+    expect(
+      computeSseSummary(
+        [
+          `data: ${JSON.stringify({ choices: [{ delta: { content: "hello" } }] })}`,
+          "",
+          `data: ${JSON.stringify({ choices: [{ delta: { content: " world" } }] })}`,
+          "",
+        ].join("\n"),
+        "$.choices[*].delta.content",
+      ),
+    ).toEqual({
+      fragmentCount: 2,
+      summary: "hello world",
+    });
+  });
+});
diff --git a/crates/yaak-sse/summary.ts b/crates/yaak-sse/summary.ts
new file mode 100644
index 0000000..1649c9b
--- /dev/null
+++ b/crates/yaak-sse/summary.ts
@@ -0,0 +1,131 @@
+import { JSONPath } from "jsonpath-plus";
+
+export interface SseSummary {
+  fragmentCount: number;
+  summary: string;
+}
+
+type JSONPathJson = null | boolean | number | string | object | unknown[];
+
+const STANDARD_SSE_FIELD = /^(event|id|retry):/i;
+
+export function candidateJsonPayloadsFromSseText(text: string): string[] {
+  const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  const blocks = normalized.split(/\n{2,}/);
+  const candidates: string[] = [];
+
+  for (const block of blocks) {
+    const lines = block.split("\n");
+    const dataLines = lines
+      .map((line) => {
+        const match = /^data:(?: ?)(.*)$/.exec(line);
+        return match?.[1];
+      })
+      .filter((line): line is string => line != null);
+
+    if (dataLines.length > 0) {
+      const payload = dataLines.join("\n").trim();
+      if (payload) {
+        candidates.push(payload);
+      }
+      continue;
+    }
+
+    const trimmedBlock = block.trim();
+    if (!trimmedBlock) {
+      continue;
+    }
+
+    if (isParsableJson(trimmedBlock)) {
+      candidates.push(trimmedBlock);
+      continue;
+    }
+
+    for (const line of lines) {
+      const trimmedLine = line.trim();
+      if (
+        !trimmedLine ||
+        trimmedLine.startsWith(":") ||
+        STANDARD_SSE_FIELD.test(trimmedLine) ||
+        !isParsableJson(trimmedLine)
+      ) {
+        continue;
+      }
+      candidates.push(trimmedLine);
+    }
+  }
+
+  return candidates;
+}
+
+export function computeSseSummary(text: string, keyPath: string): SseSummary {
+  const fragments: string[] = [];
+
+  for (const payload of candidateJsonPayloadsFromSseText(text)) {
+    const fragment = extractSseValueAtPath(payload, keyPath);
+    if (fragment != null) {
+      fragments.push(fragment);
+    }
+  }
+
+  return {
+    fragmentCount: fragments.length,
+    summary: fragments.join(""),
+  };
+}
+
+export function extractSseValueAtPath(payload: string, keyPath: string): string | null {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(payload);
+  } catch {
+    return null;
+  }
+
+  const path = keyPath.trim();
+  if (!path) {
+    return null;
+  }
+
+  let result: unknown;
+  try {
+    result = JSONPath({ path, json: parsed as JSONPathJson });
+  } catch {
+    return null;
+  }
+
+  if (Array.isArray(result)) {
+    const fragments = result
+      .map((item) => stringifySummaryValue(item))
+      .filter((item): item is string => item != null);
+    return fragments.length > 0 ? fragments.join("") : null;
+  }
+
+  return stringifySummaryValue(result);
+}
+
+function stringifySummaryValue(value: unknown): string | null {
+  if (value == null) {
+    return null;
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return null;
+  }
+}
+
+function isParsableJson(value: string): boolean {
+  try {
+    JSON.parse(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/crates/yaak-sync/Cargo.toml b/crates/yaak-sync/Cargo.toml
new file mode 100644
index 0000000..c2c7218
--- /dev/null
+++ b/crates/yaak-sync/Cargo.toml
@@ -0,0 +1,20 @@
+[package]
+name = "yaak-sync"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+chrono = { workspace = true, features = ["serde"] }
+hex = { workspace = true }
+log = { workspace = true }
+notify = "8.0.0"
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+serde_yaml = "0.9.34"
+sha1 = "0.11.0"
+thiserror = { workspace = true }
+tokio = { workspace = true, features = ["fs", "sync", "macros", "rt"] }
+ts-rs = { workspace = true, features = ["chrono-impl", "serde-json-impl"] }
+yaak-models = { workspace = true }
+serde_path_to_error = "0.1.20"
diff --git a/crates/yaak-sync/bindings/gen_models.ts b/crates/yaak-sync/bindings/gen_models.ts
new file mode 100644
index 0000000..0936516
--- /dev/null
+++ b/crates/yaak-sync/bindings/gen_models.ts
@@ -0,0 +1,192 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type DnsOverride = {
+  hostname: string;
+  ipv4: Array<string>;
+  ipv6: Array<string>;
+  enabled?: boolean;
+};
+
+export type Environment = {
+  model: "environment";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  name: string;
+  public: boolean;
+  parentModel: string;
+  parentId: string | null;
+  /**
+   * Variables defined in this environment scope.
+   * Child environments override parent variables by name.
+   */
+  variables: Array<EnvironmentVariable>;
+  color: string | null;
+  sortPriority: number;
+};
+
+export type EnvironmentVariable = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type Folder = {
+  model: "folder";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  sortPriority: number;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type GrpcRequest = {
+  model: "grpc_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authenticationType: string | null;
+  authentication: Record<string, any>;
+  description: string;
+  message: string;
+  metadata: Array<HttpRequestHeader>;
+  method: string | null;
+  name: string;
+  service: string | null;
+  sortPriority: number;
+  /**
+   * Server URL (http for plaintext or https for secure)
+   */
+  url: string;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type HttpRequest = {
+  model: "http_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  body: Record<string, any>;
+  bodyType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  method: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type HttpRequestHeader = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type HttpUrlParameter = {
+  enabled?: boolean;
+  /**
+   * Colon-prefixed parameters are treated as path parameters if they match, like `/users/:id`
+   * Other entries are appended as query parameters
+   */
+  name: string;
+  value: string;
+  id?: string;
+};
+
+export type HttpVersion = "auto" | "http1" | "http2";
+
+export type InheritedBoolSetting = { enabled?: boolean; value: boolean };
+
+export type InheritedHttpVersionSetting = { enabled?: boolean; value: HttpVersion };
+
+export type InheritedIntSetting = { enabled?: boolean; value: number };
+
+export type SyncModel =
+  | ({ type: "workspace" } & Workspace)
+  | ({ type: "environment" } & Environment)
+  | ({ type: "folder" } & Folder)
+  | ({ type: "http_request" } & HttpRequest)
+  | ({ type: "grpc_request" } & GrpcRequest)
+  | ({ type: "websocket_request" } & WebsocketRequest);
+
+export type SyncState = {
+  model: "sync_state";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  flushedAt: string;
+  modelId: string;
+  checksum: string;
+  relPath: string;
+  syncDir: string;
+};
+
+export type WebsocketRequest = {
+  model: "websocket_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  message: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type Workspace = {
+  model: "workspace";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  encryptionKeyChallenge: string | null;
+  settingValidateCertificates: boolean;
+  settingFollowRedirects: boolean;
+  settingRequestTimeout: number;
+  settingRequestMessageSize: number;
+  settingDnsOverrides: Array<DnsOverride>;
+  settingSendCookies: boolean;
+  settingStoreCookies: boolean;
+  settingHttpVersion: HttpVersion;
+};
diff --git a/crates/yaak-sync/bindings/gen_sync.ts b/crates/yaak-sync/bindings/gen_sync.ts
new file mode 100644
index 0000000..49b168b
--- /dev/null
+++ b/crates/yaak-sync/bindings/gen_sync.ts
@@ -0,0 +1,6 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { SyncModel, SyncState } from "./gen_models";
+
+export type FsCandidate = { "type": "FsCandidate", model: SyncModel, relPath: string, checksum: string, };
+
+export type SyncOp = { "type": "fsCreate", model: SyncModel, } | { "type": "fsUpdate", model: SyncModel, state: SyncState, } | { "type": "fsDelete", state: SyncState, fs: FsCandidate | null, } | { "type": "dbCreate", fs: FsCandidate, } | { "type": "dbUpdate", state: SyncState, fs: FsCandidate, } | { "type": "dbDelete", model: SyncModel, state: SyncState, } | { "type": "ignorePrivate", model: SyncModel, };
diff --git a/crates/yaak-sync/bindings/gen_watch.ts b/crates/yaak-sync/bindings/gen_watch.ts
new file mode 100644
index 0000000..be7ddec
--- /dev/null
+++ b/crates/yaak-sync/bindings/gen_watch.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type WatchEvent = { paths: Array<string>, kind: string, };
diff --git a/crates/yaak-sync/bindings/git.ts b/crates/yaak-sync/bindings/git.ts
new file mode 100644
index 0000000..50b2396
--- /dev/null
+++ b/crates/yaak-sync/bindings/git.ts
@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type GitCommit = { author: string, when: string, message: string | null, };
+
+export type GitStatus = "added" | "conflict" | "current" | "modified" | "removed" | "renamed" | "type_change";
+
+export type GitStatusEntry = { relaPath: string, status: GitStatus, staged: boolean, prev: string | null, next: string | null, };
diff --git a/crates/yaak-sync/index.ts b/crates/yaak-sync/index.ts
new file mode 100644
index 0000000..cb8bf08
--- /dev/null
+++ b/crates/yaak-sync/index.ts
@@ -0,0 +1,82 @@
+import { platform } from "@yaakapp-internal/platform";
+import type { WatchResult } from "@yaakapp-internal/rpc-schema";
+import { SyncOp } from "./bindings/gen_sync";
+import { WatchEvent } from "./bindings/gen_watch";
+
+export * from "./bindings/gen_models";
+
+export async function calculateSync(workspaceId: string, syncDir: string) {
+  return platform.rpc<SyncOp[]>("cmd_sync_calculate", {
+    workspaceId,
+    syncDir,
+  });
+}
+
+export async function calculateSyncFsOnly(dir: string) {
+  return platform.rpc<SyncOp[]>("cmd_sync_calculate_fs", { dir });
+}
+
+export async function applySync(workspaceId: string, syncDir: string, syncOps: SyncOp[]) {
+  return platform.rpc<void>("cmd_sync_apply", {
+    workspaceId,
+    syncDir,
+    syncOps: syncOps,
+  });
+}
+
+export function watchWorkspaceFiles(
+  workspaceId: string,
+  syncDir: string,
+  callback: (e: WatchEvent) => void,
+) {
+  console.log("Watching workspace files", workspaceId, syncDir);
+  const handle = platform.rpcStream<WatchResult, WatchEvent>(
+    "cmd_sync_watch",
+    { workspaceId, syncDir },
+    callback,
+  );
+
+  void handle.then(({ result }) => {
+    addWatchKey(result.unlistenEvent);
+  });
+
+  return () =>
+    handle
+      .then(async ({ result, unlisten }) => {
+        console.log("Unwatching workspace files", workspaceId, syncDir);
+        unlistenToWatcher(result.unlistenEvent);
+        unlisten();
+      })
+      .catch(console.error);
+}
+
+function unlistenToWatcher(unlistenEvent: string) {
+  void platform.emit(unlistenEvent).then(() => {
+    removeWatchKey(unlistenEvent);
+  });
+}
+
+function getWatchKeys() {
+  return sessionStorage.getItem("workspace-file-watchers")?.split(",").filter(Boolean) ?? [];
+}
+
+function setWatchKeys(keys: string[]) {
+  sessionStorage.setItem("workspace-file-watchers", keys.join(","));
+}
+
+function addWatchKey(key: string) {
+  const keys = getWatchKeys();
+  setWatchKeys([...keys, key]);
+}
+
+function removeWatchKey(key: string) {
+  const keys = getWatchKeys();
+  setWatchKeys(keys.filter((k) => k !== key));
+}
+
+// On page load, unlisten to all zombie watchers
+const keys = getWatchKeys();
+if (keys.length > 0) {
+  console.log("Unsubscribing to zombie file watchers", keys);
+  keys.forEach(unlistenToWatcher);
+}
diff --git a/crates/yaak-sync/package.json b/crates/yaak-sync/package.json
new file mode 100644
index 0000000..dbd1b0a
--- /dev/null
+++ b/crates/yaak-sync/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/sync",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates/yaak-sync/src/error.rs b/crates/yaak-sync/src/error.rs
new file mode 100644
index 0000000..868e29c
--- /dev/null
+++ b/crates/yaak-sync/src/error.rs
@@ -0,0 +1,44 @@
+use serde::{Serialize, Serializer};
+use std::io;
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error("Yaml error: {0}")]
+    YamlParseError(#[from] serde_yaml::Error),
+
+    #[error("Sync parse error: {0}")]
+    ParseError(String),
+
+    #[error(transparent)]
+    ModelError(#[from] yaak_models::error::Error),
+
+    #[error("Unknown model: {0}")]
+    UnknownModel(String),
+
+    #[error("I/o error: {0}")]
+    IoError(#[from] io::Error),
+
+    #[error("JSON error: {0}")]
+    JsonParseError(#[from] serde_json::Error),
+
+    #[error("Invalid sync file: {0}")]
+    InvalidSyncFile(String),
+
+    #[error("Invalid sync directory: {0}")]
+    InvalidSyncDirectory(String),
+
+    #[error("Watch error: {0}")]
+    NotifyError(#[from] notify::Error),
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-sync/src/lib.rs b/crates/yaak-sync/src/lib.rs
new file mode 100644
index 0000000..3c91736
--- /dev/null
+++ b/crates/yaak-sync/src/lib.rs
@@ -0,0 +1,4 @@
+pub mod error;
+pub mod models;
+pub mod sync;
+pub mod watch;
diff --git a/crates/yaak-sync/src/models.rs b/crates/yaak-sync/src/models.rs
new file mode 100644
index 0000000..c90e303
--- /dev/null
+++ b/crates/yaak-sync/src/models.rs
@@ -0,0 +1,311 @@
+use crate::error::Error::UnknownModel;
+use crate::error::Result;
+use chrono::NaiveDateTime;
+use log::{debug, warn};
+use serde::{Deserialize, Deserializer, Serialize};
+use serde_yaml::{Mapping, Value};
+use sha1::{Digest, Sha1};
+use std::fs;
+use std::path::Path;
+use ts_rs::TS;
+use yaak_models::models::{
+    AnyModel, Environment, Folder, GrpcRequest, HttpRequest, WebsocketRequest, Workspace,
+};
+
+#[derive(Debug, Clone, PartialEq, Serialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "gen_models.ts")]
+pub enum SyncModel {
+    Workspace(Workspace),
+    Environment(Environment),
+    Folder(Folder),
+    HttpRequest(HttpRequest),
+    GrpcRequest(GrpcRequest),
+    WebsocketRequest(WebsocketRequest),
+}
+
+impl<'de> Deserialize<'de> for SyncModel {
+    fn deserialize<D>(deserializer: D) -> std::result::Result<Self, D::Error>
+    where
+        D: Deserializer<'de>,
+    {
+        use serde_path_to_error as spte;
+        let mut v = Value::deserialize(deserializer)?;
+        let model = match v.get("model") {
+            Some(Value::String(model)) => model.clone(),
+            _ => "".to_string(),
+        };
+        let model = model.as_str();
+
+        let obj = v
+            .as_mapping_mut()
+            .ok_or_else(|| serde::de::Error::custom("expected object for SyncModel"))?;
+
+        // Dispatch to CHILD types (no recursion)
+        match model {
+            "workspace" => {
+                let x: Workspace = spte::deserialize(v).map_err(serde::de::Error::custom)?;
+                Ok(SyncModel::Workspace(x))
+            }
+            "environment" => {
+                migrate_environment(obj);
+                let x: Environment = spte::deserialize(v).map_err(serde::de::Error::custom)?;
+                Ok(SyncModel::Environment(x))
+            }
+            "folder" => {
+                let x: Folder = spte::deserialize(v).map_err(serde::de::Error::custom)?;
+                Ok(SyncModel::Folder(x))
+            }
+            "http_request" => {
+                let x: HttpRequest = spte::deserialize(v).map_err(serde::de::Error::custom)?;
+                Ok(SyncModel::HttpRequest(x))
+            }
+            "grpc_request" => {
+                let x: GrpcRequest = spte::deserialize(v).map_err(serde::de::Error::custom)?;
+                Ok(SyncModel::GrpcRequest(x))
+            }
+            "websocket_request" => {
+                let x: WebsocketRequest = spte::deserialize(v).map_err(serde::de::Error::custom)?;
+                Ok(SyncModel::WebsocketRequest(x))
+            }
+            other => Err(serde::de::Error::unknown_variant(
+                other,
+                &[
+                    "workspace",
+                    "environment",
+                    "folder",
+                    "http_request",
+                    "grpc_request",
+                    "websocket_request",
+                ],
+            )),
+        }
+    }
+}
+
+fn migrate_environment(obj: &mut Mapping) {
+    match (obj.get("base"), obj.get("parentModel")) {
+        (Some(Value::Bool(base)), None) => {
+            debug!("Migrating legacy environment {:?}", obj.get("id"));
+            if *base {
+                obj.insert("parentModel".into(), "workspace".into());
+            } else {
+                obj.insert("parentModel".into(), "environment".into());
+            }
+        }
+        _ => {}
+    }
+}
+
+impl SyncModel {
+    pub fn from_bytes(content: Vec<u8>, file_path: &Path) -> Result<Option<(SyncModel, String)>> {
+        let mut hasher = Sha1::new();
+        hasher.update(&content);
+        let checksum = hex::encode(hasher.finalize());
+        let content_str = String::from_utf8(content.clone()).unwrap_or_default();
+
+        // Check for some strings that will be in a model file for sure. If these strings
+        // don't exist, then it's probably not a Yaak file.
+        if !content_str.contains("model") || !content_str.contains("id") {
+            return Ok(None);
+        }
+
+        let ext = file_path.extension().unwrap_or_default();
+        if ext == "yml" || ext == "yaml" {
+            Ok(match serde_yaml::from_str::<SyncModel>(&content_str) {
+                Ok(m) => Some((m, checksum)),
+                Err(e) => {
+                    warn!("Error parsing {:?} {:?}", file_path.file_name(), e);
+                    None
+                }
+            })
+        } else if ext == "json" {
+            Ok(match serde_json::from_str::<SyncModel>(&content_str) {
+                Ok(m) => Some((m, checksum)),
+                Err(e) => {
+                    warn!("Error parsing {:?} {:?}", file_path.file_name(), e);
+                    None
+                }
+            })
+        } else {
+            Ok(None)
+        }
+    }
+
+    pub fn from_file(file_path: &Path) -> Result<Option<(SyncModel, String)>> {
+        let content = match fs::read(file_path) {
+            Ok(c) => c,
+            Err(_) => return Ok(None),
+        };
+
+        Self::from_bytes(content, file_path)
+    }
+
+    pub fn to_file_contents(&self, rel_path: &Path) -> Result<(Vec<u8>, String)> {
+        let ext = rel_path.extension().unwrap_or_default();
+        let content = if ext == "yaml" || ext == "yml" {
+            serde_yaml::to_string(self)?
+        } else {
+            serde_json::to_string(self)?
+        };
+
+        let mut hasher = Sha1::new();
+        hasher.update(&content);
+        let checksum = hex::encode(hasher.finalize());
+
+        Ok((content.into_bytes(), checksum))
+    }
+
+    pub fn id(&self) -> String {
+        match self.clone() {
+            SyncModel::Workspace(m) => m.id,
+            SyncModel::Environment(m) => m.id,
+            SyncModel::Folder(m) => m.id,
+            SyncModel::HttpRequest(m) => m.id,
+            SyncModel::GrpcRequest(m) => m.id,
+            SyncModel::WebsocketRequest(m) => m.id,
+        }
+    }
+
+    pub fn workspace_id(&self) -> String {
+        match self.clone() {
+            SyncModel::Workspace(m) => m.id,
+            SyncModel::Environment(m) => m.workspace_id,
+            SyncModel::Folder(m) => m.workspace_id,
+            SyncModel::HttpRequest(m) => m.workspace_id,
+            SyncModel::GrpcRequest(m) => m.workspace_id,
+            SyncModel::WebsocketRequest(m) => m.workspace_id,
+        }
+    }
+
+    pub fn updated_at(&self) -> NaiveDateTime {
+        match self.clone() {
+            SyncModel::Workspace(m) => m.updated_at,
+            SyncModel::Environment(m) => m.updated_at,
+            SyncModel::Folder(m) => m.updated_at,
+            SyncModel::HttpRequest(m) => m.updated_at,
+            SyncModel::GrpcRequest(m) => m.updated_at,
+            SyncModel::WebsocketRequest(m) => m.updated_at,
+        }
+    }
+}
+
+impl TryFrom<AnyModel> for SyncModel {
+    type Error = crate::error::Error;
+
+    fn try_from(value: AnyModel) -> Result<Self> {
+        let m = match value {
+            AnyModel::Environment(m) => SyncModel::Environment(m),
+            AnyModel::Folder(m) => SyncModel::Folder(m),
+            AnyModel::GrpcRequest(m) => SyncModel::GrpcRequest(m),
+            AnyModel::HttpRequest(m) => SyncModel::HttpRequest(m),
+            AnyModel::WebsocketRequest(m) => SyncModel::WebsocketRequest(m),
+            AnyModel::Workspace(m) => SyncModel::Workspace(m),
+
+            // Non-sync models
+            AnyModel::CookieJar(m) => return Err(UnknownModel(m.model)),
+            AnyModel::GraphQlIntrospection(m) => return Err(UnknownModel(m.model)),
+            AnyModel::GrpcConnection(m) => return Err(UnknownModel(m.model)),
+            AnyModel::GrpcEvent(m) => return Err(UnknownModel(m.model)),
+            AnyModel::HttpResponse(m) => return Err(UnknownModel(m.model)),
+            AnyModel::HttpResponseEvent(m) => return Err(UnknownModel(m.model)),
+            AnyModel::ImportSource(m) => return Err(UnknownModel(m.model)),
+            AnyModel::KeyValue(m) => return Err(UnknownModel(m.model)),
+            AnyModel::Plugin(m) => return Err(UnknownModel(m.model)),
+            AnyModel::Settings(m) => return Err(UnknownModel(m.model)),
+            AnyModel::WebsocketConnection(m) => return Err(UnknownModel(m.model)),
+            AnyModel::WebsocketEvent(m) => return Err(UnknownModel(m.model)),
+            AnyModel::WorkspaceMeta(m) => return Err(UnknownModel(m.model)),
+            AnyModel::SyncState(m) => return Err(UnknownModel(m.model)),
+        };
+        Ok(m)
+    }
+}
+
+#[cfg(test)]
+mod migration_tests {
+    use crate::error::Result;
+    use crate::models::SyncModel;
+
+    #[test]
+    fn import_sources_are_excluded_from_sync() {
+        let model = yaak_models::models::AnyModel::ImportSource(
+            yaak_models::models::ImportSource::default(),
+        );
+        assert!(SyncModel::try_from(model).is_err());
+    }
+
+    #[test]
+    fn deserializes_environment_via_syncmodel_with_fixups() -> Result<()> {
+        let raw = r#"
+type: environment
+model: environment
+id: ev_fAUS49FUN2
+workspaceId: wk_kfSI3JDHd7
+createdAt: 2025-01-11T17:02:58.012792
+updatedAt: 2025-07-23T20:00:46.049649
+name: Global Variables
+public: true
+base: true
+variables: []
+color: null
+"#;
+
+        let m: SyncModel = serde_yaml::from_str(raw)?;
+        match m {
+            SyncModel::Environment(env) => {
+                assert_eq!(env.parent_model, "workspace".to_string());
+                assert_eq!(env.parent_id, None);
+            }
+            _ => panic!("expected base environment"),
+        }
+
+        let raw = r#"
+type: environment
+model: environment
+id: ev_fAUS49FUN2
+workspaceId: wk_kfSI3JDHd7
+createdAt: 2025-01-11T17:02:58.012792
+updatedAt: 2025-07-23T20:00:46.049649
+name: Global Variables
+public: true
+base: false
+variables: []
+color: null
+"#;
+        let m: SyncModel = serde_yaml::from_str(raw)?;
+        match m {
+            SyncModel::Environment(env) => {
+                assert_eq!(env.parent_model, "environment".to_string());
+                assert_eq!(env.parent_id, None);
+            }
+            _ => panic!("expected sub environment"),
+        }
+
+        let raw = r#"
+type: environment
+model: environment
+id: ev_fAUS49FUN2
+parentId: fld_123
+parentModel: folder
+workspaceId: wk_kfSI3JDHd7
+createdAt: 2025-01-11T17:02:58.012792
+updatedAt: 2025-07-23T20:00:46.049649
+name: Folder Environment
+public: true
+base: false
+variables: []
+color: null
+"#;
+        let m: SyncModel = serde_yaml::from_str(raw)?;
+        match m {
+            SyncModel::Environment(env) => {
+                assert_eq!(env.parent_model, "folder".to_string());
+                assert_eq!(env.parent_id, Some("fld_123".to_string()));
+            }
+            _ => panic!("expected folder environment"),
+        }
+
+        Ok(())
+    }
+}
diff --git a/crates/yaak-sync/src/sync.rs b/crates/yaak-sync/src/sync.rs
new file mode 100644
index 0000000..cc9faa1
--- /dev/null
+++ b/crates/yaak-sync/src/sync.rs
@@ -0,0 +1,605 @@
+use crate::error::Result;
+use crate::models::SyncModel;
+use chrono::Utc;
+use log::{info, warn};
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::fmt::{Display, Formatter};
+use std::fs;
+use std::fs::File;
+use std::io::Write;
+use std::path::{Path, PathBuf};
+use ts_rs::TS;
+use yaak_models::blob_manager::BlobManager;
+use yaak_models::client_db::{ClientDb, WriteDb};
+use yaak_models::models::{
+    Environment, Folder, GrpcRequest, HttpRequest, SyncState, WebsocketRequest, Workspace,
+    WorkspaceMeta,
+};
+use yaak_models::util::{UpdateSource, get_workspace_export_resources};
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase", tag = "type")]
+#[ts(export, export_to = "gen_sync.ts")]
+pub enum SyncOp {
+    FsCreate {
+        model: SyncModel,
+    },
+    FsUpdate {
+        model: SyncModel,
+        state: SyncState,
+    },
+    FsDelete {
+        state: SyncState,
+        fs: Option<FsCandidate>,
+    },
+    DbCreate {
+        fs: FsCandidate,
+    },
+    DbUpdate {
+        state: SyncState,
+        fs: FsCandidate,
+    },
+    DbDelete {
+        model: SyncModel,
+        state: SyncState,
+    },
+    IgnorePrivate {
+        model: SyncModel,
+    },
+}
+
+impl SyncOp {
+    fn workspace_id(&self) -> String {
+        match self {
+            SyncOp::DbCreate { fs } => fs.model.workspace_id(),
+            SyncOp::DbDelete { model, .. } => model.workspace_id(),
+            SyncOp::DbUpdate { state, .. } => state.workspace_id.clone(),
+            SyncOp::FsCreate { model } => model.workspace_id(),
+            SyncOp::FsDelete { state, .. } => state.workspace_id.clone(),
+            SyncOp::FsUpdate { state, .. } => state.workspace_id.clone(),
+            SyncOp::IgnorePrivate { model } => model.workspace_id(),
+        }
+    }
+}
+
+impl Display for SyncOp {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        f.write_str(
+            match self {
+                SyncOp::FsCreate { model } => format!("fs_create({})", model.id()),
+                SyncOp::FsUpdate { model, .. } => format!("fs_update({})", model.id()),
+                SyncOp::FsDelete { state, .. } => format!("fs_delete({})", state.model_id),
+                SyncOp::DbCreate { fs } => format!("db_create({})", fs.model.id()),
+                SyncOp::DbUpdate { fs, .. } => format!("db_update({})", fs.model.id()),
+                SyncOp::DbDelete { model, .. } => format!("db_delete({})", model.id()),
+                SyncOp::IgnorePrivate { model } => format!("ignore_private({})", model.id()),
+            }
+            .as_str(),
+        )
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "snake_case")]
+pub enum DbCandidate {
+    Added(SyncModel),
+    Deleted(SyncState),
+    Modified(SyncModel, SyncState),
+    Unmodified(SyncModel, SyncState),
+}
+
+impl DbCandidate {
+    fn model_id(&self) -> String {
+        match &self {
+            DbCandidate::Added(m) => m.id(),
+            DbCandidate::Deleted(s) => s.model_id.clone(),
+            DbCandidate::Modified(m, _) => m.id(),
+            DbCandidate::Unmodified(m, _) => m.id(),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase", tag = "type")]
+#[ts(export, export_to = "gen_sync.ts")]
+pub struct FsCandidate {
+    pub model: SyncModel,
+    pub rel_path: PathBuf,
+    pub checksum: String,
+}
+
+pub fn get_db_candidates(
+    db: &ClientDb,
+    version: &str,
+    workspace_id: &str,
+    sync_dir: &Path,
+) -> Result<Vec<DbCandidate>> {
+    let models: HashMap<_, _> =
+        workspace_models(db, version, workspace_id)?.into_iter().map(|m| (m.id(), m)).collect();
+    let sync_states: HashMap<_, _> = db
+        .list_sync_states_for_workspace(workspace_id, sync_dir)?
+        .into_iter()
+        .map(|s| (s.model_id.clone(), s))
+        .collect();
+
+    // 1. Add candidates for models (created/modified/unmodified)
+    let mut candidates: Vec<DbCandidate> = models
+        .values()
+        .filter_map(|model| {
+            match sync_states.get(&model.id()) {
+                Some(existing_sync_state) => {
+                    // If a sync state exists but the model is now private, treat it as a deletion
+                    match model {
+                        SyncModel::Environment(e) if !e.public => {
+                            return Some(DbCandidate::Deleted(existing_sync_state.to_owned()));
+                        }
+                        _ => {}
+                    };
+
+                    let updated_since_flush = model.updated_at() > existing_sync_state.flushed_at;
+                    if updated_since_flush {
+                        Some(DbCandidate::Modified(
+                            model.to_owned(),
+                            existing_sync_state.to_owned(),
+                        ))
+                    } else {
+                        Some(DbCandidate::Unmodified(
+                            model.to_owned(),
+                            existing_sync_state.to_owned(),
+                        ))
+                    }
+                }
+                None => {
+                    return match model {
+                        SyncModel::Environment(e) if !e.public => {
+                            // No sync state yet, so ignore the model
+                            None
+                        }
+                        _ => {
+                            // No sync state yet, so the model was just added
+                            Some(DbCandidate::Added(model.to_owned()))
+                        }
+                    };
+                }
+            }
+        })
+        .collect();
+
+    // 2. Add SyncState-only candidates (deleted)
+    candidates.extend(sync_states.values().filter_map(|sync_state| {
+        if models.contains_key(&sync_state.model_id) {
+            None
+        } else {
+            Some(DbCandidate::Deleted(sync_state.to_owned()))
+        }
+    }));
+
+    Ok(candidates)
+}
+
+pub fn get_fs_candidates(dir: &Path) -> Result<Vec<FsCandidate>> {
+    // Ensure the root directory exists
+    fs::create_dir_all(dir)?;
+
+    let mut candidates = Vec::new();
+    let entries = fs::read_dir(dir)?;
+    for dir_entry in entries {
+        let dir_entry = match dir_entry {
+            Ok(v) => v,
+            Err(_) => continue,
+        };
+
+        if !dir_entry.file_type()?.is_file() {
+            continue;
+        };
+
+        let path = dir_entry.path();
+        let (model, checksum) = match SyncModel::from_file(&path) {
+            Ok(Some(m)) => m,
+            Ok(None) => continue,
+            Err(e) => {
+                warn!("Failed to parse sync file {e}");
+                return Err(e);
+            }
+        };
+
+        let rel_path = Path::new(&dir_entry.file_name()).to_path_buf();
+        candidates.push(FsCandidate { rel_path, model, checksum })
+    }
+
+    Ok(candidates)
+}
+
+pub fn compute_sync_ops(
+    db_candidates: Vec<DbCandidate>,
+    fs_candidates: Vec<FsCandidate>,
+) -> Vec<SyncOp> {
+    let mut db_map: HashMap<String, DbCandidate> = HashMap::new();
+    for c in db_candidates {
+        db_map.insert(c.model_id(), c);
+    }
+
+    let mut fs_map: HashMap<String, FsCandidate> = HashMap::new();
+    for c in fs_candidates {
+        fs_map.insert(c.model.id(), c);
+    }
+
+    // Collect all keys from both maps for the OUTER JOIN
+    let keys: std::collections::HashSet<_> = db_map.keys().chain(fs_map.keys()).collect();
+
+    keys.into_iter()
+        .filter_map(|k| {
+            let op = match (db_map.get(k), fs_map.get(k)) {
+                (None, None) => return None, // Can never happen
+                (None, Some(fs)) => SyncOp::DbCreate { fs: fs.to_owned() },
+
+                // DB unchanged <-> FS missing
+                (Some(DbCandidate::Unmodified(model, sync_state)), None) => {
+                    SyncOp::DbDelete { model: model.to_owned(), state: sync_state.to_owned() }
+                }
+
+                // DB modified <-> FS missing
+                (Some(DbCandidate::Modified(model, sync_state)), None) => {
+                    SyncOp::FsUpdate { model: model.to_owned(), state: sync_state.to_owned() }
+                }
+
+                // DB added <-> FS missing
+                (Some(DbCandidate::Added(model)), None) => {
+                    SyncOp::FsCreate { model: model.to_owned() }
+                }
+
+                // DB deleted <-> FS missing
+                //   Already deleted on FS, but sending it so the SyncState gets dealt with
+                (Some(DbCandidate::Deleted(sync_state)), None) => {
+                    SyncOp::FsDelete { state: sync_state.to_owned(), fs: None }
+                }
+
+                // DB unchanged <-> FS exists
+                (Some(DbCandidate::Unmodified(_, sync_state)), Some(fs_candidate)) => {
+                    if sync_state.checksum == fs_candidate.checksum {
+                        return None;
+                    } else {
+                        SyncOp::DbUpdate {
+                            state: sync_state.to_owned(),
+                            fs: fs_candidate.to_owned(),
+                        }
+                    }
+                }
+
+                // DB modified <-> FS exists
+                (Some(DbCandidate::Modified(model, sync_state)), Some(fs_candidate)) => {
+                    if sync_state.checksum == fs_candidate.checksum {
+                        SyncOp::FsUpdate { model: model.to_owned(), state: sync_state.to_owned() }
+                    } else if model.updated_at() < fs_candidate.model.updated_at() {
+                        // CONFLICT! Write to DB if the fs model is newer
+                        SyncOp::DbUpdate {
+                            state: sync_state.to_owned(),
+                            fs: fs_candidate.to_owned(),
+                        }
+                    } else {
+                        // CONFLICT! Write to FS if the db model is newer
+                        SyncOp::FsUpdate { model: model.to_owned(), state: sync_state.to_owned() }
+                    }
+                }
+
+                // DB added <-> FS anything
+                (Some(DbCandidate::Added(model)), Some(_)) => {
+                    // This would be super rare (impossible?), so let's follow the user's intention
+                    SyncOp::FsCreate { model: model.to_owned() }
+                }
+
+                // DB deleted <-> FS exists
+                (Some(DbCandidate::Deleted(sync_state)), Some(fs_candidate)) => SyncOp::FsDelete {
+                    state: sync_state.to_owned(),
+                    fs: Some(fs_candidate.to_owned()),
+                },
+            };
+            Some(op)
+        })
+        .collect()
+}
+
+fn workspace_models(db: &ClientDb, version: &str, workspace_id: &str) -> Result<Vec<SyncModel>> {
+    // We want to include private environments here so that we can take them into account during
+    // the sync process. Otherwise, they would be treated as deleted.
+    let include_private_environments = true;
+    let resources = get_workspace_export_resources(
+        db,
+        version,
+        vec![workspace_id],
+        include_private_environments,
+    )?
+    .resources;
+    let workspace = resources.workspaces.iter().find(|w| w.id == workspace_id);
+
+    let workspace = match workspace {
+        None => return Ok(Vec::new()),
+        Some(w) => w,
+    };
+
+    let mut sync_models = vec![SyncModel::Workspace(workspace.to_owned())];
+
+    for m in resources.environments {
+        sync_models.push(SyncModel::Environment(m));
+    }
+    for m in resources.folders {
+        sync_models.push(SyncModel::Folder(m));
+    }
+    for m in resources.http_requests {
+        sync_models.push(SyncModel::HttpRequest(m));
+    }
+    for m in resources.grpc_requests {
+        sync_models.push(SyncModel::GrpcRequest(m));
+    }
+    for m in resources.websocket_requests {
+        sync_models.push(SyncModel::WebsocketRequest(m));
+    }
+
+    Ok(sync_models)
+}
+
+/// The database half of a sync apply, ready to run once the files are on disk.
+pub struct PendingDbSyncOps {
+    sync_state_ops: Vec<SyncStateOp>,
+    deletes: Vec<SyncModel>,
+    workspaces: Vec<Workspace>,
+    environments: Vec<Environment>,
+    folders: Vec<Folder>,
+    http_requests: Vec<HttpRequest>,
+    grpc_requests: Vec<GrpcRequest>,
+    websocket_requests: Vec<WebsocketRequest>,
+}
+
+/// Apply the filesystem half of the sync operations: create, rewrite and
+/// delete files. Returns the database half, for [`apply_db_sync_ops`].
+///
+/// Split this way so the file work, which can be slow, happens before the
+/// write transaction is opened rather than inside it.
+pub fn apply_fs_sync_ops(
+    workspace_id: &str,
+    sync_dir: &Path,
+    sync_ops: Vec<SyncOp>,
+) -> Result<PendingDbSyncOps> {
+    let mut pending = PendingDbSyncOps {
+        sync_state_ops: Vec::new(),
+        deletes: Vec::new(),
+        workspaces: Vec::new(),
+        environments: Vec::new(),
+        folders: Vec::new(),
+        http_requests: Vec::new(),
+        grpc_requests: Vec::new(),
+        websocket_requests: Vec::new(),
+    };
+    if sync_ops.is_empty() {
+        return Ok(pending);
+    }
+
+    info!(
+        "Applying sync ops {}",
+        sync_ops.iter().map(|op| op.to_string()).collect::<Vec<String>>().join(", ")
+    );
+
+    for op in sync_ops {
+        // Only apply things if workspace ID matches
+        if op.workspace_id() != workspace_id {
+            continue;
+        }
+
+        let state_op = match op {
+            SyncOp::FsCreate { model } => {
+                let rel_path = derive_model_filename(&model);
+                let abs_path = sync_dir.join(rel_path.clone());
+                let (content, checksum) = model.to_file_contents(&rel_path)?;
+                let mut f = File::create(&abs_path)?;
+                f.write_all(&content)?;
+                SyncStateOp::Create { model_id: model.id(), checksum, rel_path }
+            }
+            SyncOp::FsUpdate { model, state } => {
+                // Always write the existing path
+                let rel_path = Path::new(&state.rel_path);
+                let abs_path = Path::new(&state.sync_dir).join(&rel_path);
+                let (content, checksum) = model.to_file_contents(&rel_path)?;
+                let mut f = File::create(&abs_path)?;
+                f.write_all(&content)?;
+                SyncStateOp::Update {
+                    state: state.to_owned(),
+                    checksum,
+                    rel_path: rel_path.to_owned(),
+                }
+            }
+            SyncOp::FsDelete { state, fs: fs_candidate } => match fs_candidate {
+                None => SyncStateOp::Delete { state: state.to_owned() },
+                Some(_) => {
+                    // Always delete the existing path
+                    let rel_path = Path::new(&state.rel_path);
+                    let abs_path = Path::new(&state.sync_dir).join(&rel_path);
+                    fs::remove_file(&abs_path)?;
+                    SyncStateOp::Delete { state: state.to_owned() }
+                }
+            },
+            SyncOp::DbCreate { fs } => {
+                let model_id = fs.model.id();
+                pending.push_upsert(fs.model);
+                SyncStateOp::Create {
+                    model_id,
+                    checksum: fs.checksum.to_owned(),
+                    rel_path: fs.rel_path.to_owned(),
+                }
+            }
+            SyncOp::DbUpdate { state, fs } => {
+                pending.push_upsert(fs.model);
+                SyncStateOp::Update {
+                    state: state.to_owned(),
+                    checksum: fs.checksum.to_owned(),
+                    rel_path: fs.rel_path.to_owned(),
+                }
+            }
+            SyncOp::DbDelete { model, state } => {
+                pending.deletes.push(model);
+                SyncStateOp::Delete { state: state.to_owned() }
+            }
+            SyncOp::IgnorePrivate { .. } => SyncStateOp::NoOp,
+        };
+        pending.sync_state_ops.push(state_op);
+    }
+
+    Ok(pending)
+}
+
+impl PendingDbSyncOps {
+    /// Upserts are collected per model type and written in one batch so
+    /// foreign keys are satisfied.
+    fn push_upsert(&mut self, model: SyncModel) {
+        match model {
+            SyncModel::Environment(m) => self.environments.push(m),
+            SyncModel::Folder(m) => self.folders.push(m),
+            SyncModel::GrpcRequest(m) => self.grpc_requests.push(m),
+            SyncModel::HttpRequest(m) => self.http_requests.push(m),
+            SyncModel::WebsocketRequest(m) => self.websocket_requests.push(m),
+            SyncModel::Workspace(m) => self.workspaces.push(m),
+        }
+    }
+}
+
+/// Apply the database half of the sync operations.
+/// Returns a list of SyncStateOps that should be applied afterward.
+pub fn apply_db_sync_ops(
+    db: &WriteDb,
+    blobs: &BlobManager,
+    workspace_id: &str,
+    sync_dir: &Path,
+    pending: PendingDbSyncOps,
+) -> Result<Vec<SyncStateOp>> {
+    for model in &pending.deletes {
+        delete_model(db, blobs, model)?;
+    }
+
+    let upserted_models = db.batch_upsert(
+        pending.workspaces,
+        pending.environments,
+        pending.folders,
+        pending.http_requests,
+        pending.grpc_requests,
+        pending.websocket_requests,
+        &UpdateSource::Sync,
+    )?;
+
+    // Ensure we create WorkspaceMeta models for each new workspace, with the appropriate sync dir
+    let sync_dir_string = sync_dir.to_string_lossy().to_string();
+    for workspace in upserted_models.workspaces {
+        match db.get_workspace_meta(&workspace.id) {
+            Some(m) => {
+                if m.setting_sync_dir == Some(sync_dir_string.clone()) {
+                    // We don't need to update if unchanged
+                    continue;
+                }
+                db.upsert_workspace_meta(
+                    &WorkspaceMeta {
+                        setting_sync_dir: Some(sync_dir.to_string_lossy().to_string()),
+                        ..m
+                    },
+                    &UpdateSource::Sync,
+                )
+            }
+            None => db.upsert_workspace_meta(
+                &WorkspaceMeta {
+                    workspace_id: workspace_id.to_string(),
+                    setting_sync_dir: Some(sync_dir.to_string_lossy().to_string()),
+                    ..Default::default()
+                },
+                &UpdateSource::Sync,
+            ),
+        }?;
+    }
+
+    Ok(pending.sync_state_ops)
+}
+
+#[derive(Debug)]
+pub enum SyncStateOp {
+    Create {
+        model_id: String,
+        checksum: String,
+        rel_path: PathBuf,
+    },
+    Update {
+        state: SyncState,
+        checksum: String,
+        rel_path: PathBuf,
+    },
+    Delete {
+        state: SyncState,
+    },
+    NoOp,
+}
+
+pub fn apply_sync_state_ops(
+    db: &WriteDb,
+    workspace_id: &str,
+    sync_dir: &Path,
+    ops: Vec<SyncStateOp>,
+) -> Result<()> {
+    for op in ops {
+        match op {
+            SyncStateOp::Create { checksum, rel_path, model_id } => {
+                let sync_state = SyncState {
+                    workspace_id: workspace_id.to_string(),
+                    model_id,
+                    checksum,
+                    sync_dir: sync_dir.to_str().unwrap().to_string(),
+                    rel_path: rel_path.to_str().unwrap().to_string(),
+                    flushed_at: Utc::now().naive_utc(),
+                    ..Default::default()
+                };
+                db.upsert_sync_state(&sync_state)?;
+            }
+            SyncStateOp::Update { state: sync_state, checksum, rel_path } => {
+                let sync_state = SyncState {
+                    checksum,
+                    sync_dir: sync_dir.to_str().unwrap().to_string(),
+                    rel_path: rel_path.to_str().unwrap().to_string(),
+                    flushed_at: Utc::now().naive_utc(),
+                    ..sync_state
+                };
+                db.upsert_sync_state(&sync_state)?;
+            }
+            SyncStateOp::Delete { state } => {
+                db.delete_sync_state(&state)?;
+            }
+            SyncStateOp::NoOp => {
+                // Nothing
+            }
+        }
+    }
+    Ok(())
+}
+
+fn derive_model_filename(m: &SyncModel) -> PathBuf {
+    let rel = format!("yaak.{}.yaml", m.id());
+    Path::new(&rel).to_path_buf()
+}
+
+fn delete_model(db: &WriteDb, blobs: &BlobManager, model: &SyncModel) -> Result<()> {
+    match model {
+        SyncModel::Workspace(m) => {
+            db.delete_workspace(&m, &UpdateSource::Sync, blobs)?;
+        }
+        SyncModel::Environment(m) => {
+            db.delete_environment(&m, &UpdateSource::Sync)?;
+        }
+        SyncModel::Folder(m) => {
+            db.delete_folder(&m, &UpdateSource::Sync)?;
+        }
+        SyncModel::HttpRequest(m) => {
+            db.delete_http_request(&m, &UpdateSource::Sync)?;
+        }
+        SyncModel::GrpcRequest(m) => {
+            db.delete_grpc_request(&m, &UpdateSource::Sync)?;
+        }
+        SyncModel::WebsocketRequest(m) => {
+            db.delete_websocket_request(&m, &UpdateSource::Sync)?;
+        }
+    };
+    Ok(())
+}
diff --git a/crates/yaak-sync/src/watch.rs b/crates/yaak-sync/src/watch.rs
new file mode 100644
index 0000000..eb5c409
--- /dev/null
+++ b/crates/yaak-sync/src/watch.rs
@@ -0,0 +1,90 @@
+use crate::error::Result;
+use log::{error, info};
+use notify::Watcher;
+use serde::{Deserialize, Serialize};
+use std::path::{Path, PathBuf};
+use std::sync::mpsc;
+use tokio::select;
+use ts_rs::TS;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_watch.ts")]
+pub struct WatchEvent {
+    pub paths: Vec<PathBuf>,
+    pub kind: String,
+}
+
+/// Watch a directory for changes and send events through a callback.
+///
+/// The callback is invoked for each watch event. The function returns when
+/// the cancel receiver receives a signal.
+pub async fn watch_directory<F>(
+    dir: &Path,
+    callback: F,
+    mut cancel_rx: tokio::sync::watch::Receiver<()>,
+) -> Result<()>
+where
+    F: Fn(WatchEvent) + Send + 'static,
+{
+    // Canonicalize so reported event paths match the watched root. Notify reports
+    // resolved paths, so watching through a symlink (e.g. /tmp -> /private/tmp on
+    // macOS) would otherwise make every strip_prefix below fail.
+    let dir = dir.canonicalize().unwrap_or_else(|_| dir.to_owned());
+    let (tx, rx) = mpsc::channel::<notify::Result<notify::Event>>();
+    let mut watcher = notify::recommended_watcher(tx)?;
+
+    // Spawn a blocking thread to handle the blocking `std::sync::mpsc::Receiver`
+    let (async_tx, mut async_rx) = tokio::sync::mpsc::channel::<notify::Result<notify::Event>>(100);
+    std::thread::spawn(move || {
+        for res in rx {
+            if async_tx.blocking_send(res).is_err() {
+                break; // Exit the thread if the async receiver is closed
+            }
+        }
+    });
+
+    watcher.watch(&dir, notify::RecursiveMode::Recursive)?;
+    info!("Watching directory {:?}", dir);
+
+    tokio::spawn(async move {
+        // Keep the watcher alive for the lifetime of the task
+        let _watcher = watcher;
+
+        loop {
+            select! {
+                // Listen for new watch events
+                Some(event_res) = async_rx.recv() => {
+                    match event_res {
+                        Ok(event) => {
+                            // Filter out any ignored directories and see if we still get a result
+                            let paths = event.paths.into_iter()
+                                .map(|p| p.strip_prefix(&dir).unwrap_or(&p).to_path_buf())
+                                .filter(|p| !p.starts_with(".git") && !p.starts_with("node_modules"))
+                                .collect::<Vec<PathBuf>>();
+
+                            if paths.is_empty() {
+                                continue;
+                            }
+
+                            callback(WatchEvent {
+                                paths,
+                                kind: format!("{:?}", event.kind),
+                            });
+                        }
+                        Err(e) => error!("Directory watch error: {:?}", e),
+                    }
+                }
+                // Listen for cancellation
+                _ = cancel_rx.changed() => {
+                    // To cancel, we break from the loop, which will exit the task and make the
+                    // watcher go out of scope (cancelling it)
+                    info!("Cancelling watch for {:?}", dir);
+                    break;
+                }
+            }
+        }
+    });
+
+    Ok(())
+}
diff --git a/crates/yaak-templates/Cargo.toml b/crates/yaak-templates/Cargo.toml
new file mode 100644
index 0000000..7cc2e1a
--- /dev/null
+++ b/crates/yaak-templates/Cargo.toml
@@ -0,0 +1,29 @@
+[package]
+name = "yaak-templates"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[package.metadata.wasm-pack.profile.release]
+wasm-opt = false # Causes errors in CI (haven't figured out why yet)
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["wasm"]
+# The `#[wasm_bindgen]` exports (parse_template etc.) that make up the
+# @yaakapp-internal/templates package. Off for crates that link this one into
+# their own wasm module and do not want these re-exported from theirs.
+wasm = []
+
+[dependencies]
+base64 = "0.22.1"
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+thiserror = { workspace = true }
+tokio = { workspace = true, features = ["macros", "rt"] }
+ts-rs = { workspace = true }
+wasm-bindgen = { version = "0.2.100", features = ["serde-serialize"] }
+serde-wasm-bindgen = "0.6.5"
+log = { workspace = true }
diff --git a/crates/yaak-templates/bindings/parser.ts b/crates/yaak-templates/bindings/parser.ts
new file mode 100644
index 0000000..956b93a
--- /dev/null
+++ b/crates/yaak-templates/bindings/parser.ts
@@ -0,0 +1,9 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type FnArg = { name: string, value: Val, };
+
+export type Token = { "type": "raw", text: string, } | { "type": "tag", val: Val, } | { "type": "eof" };
+
+export type Tokens = { tokens: Array<Token>, };
+
+export type Val = { "type": "str", text: string, } | { "type": "var", name: string, } | { "type": "bool", value: boolean, } | { "type": "fn", name: string, args: Array<FnArg>, } | { "type": "null" };
diff --git a/crates/yaak-templates/build-wasm.cjs b/crates/yaak-templates/build-wasm.cjs
new file mode 100644
index 0000000..6a956ea
--- /dev/null
+++ b/crates/yaak-templates/build-wasm.cjs
@@ -0,0 +1,39 @@
+const { execSync } = require("node:child_process");
+const fs = require("node:fs");
+const os = require("node:os");
+const path = require("node:path");
+
+if (process.env.SKIP_WASM_BUILD === "1") {
+  console.log("Skipping wasm-pack build (SKIP_WASM_BUILD=1)");
+  return;
+}
+
+// Remap machine-specific paths that rustc embeds into the binary (panic
+// location strings), so builds are reproducible across machines
+const sysroot = execSync("rustc --print sysroot").toString().trim();
+const cargoHome = process.env.CARGO_HOME ?? path.join(os.homedir(), ".cargo");
+
+execSync("wasm-pack build --target bundler", {
+  stdio: "inherit",
+  env: {
+    ...process.env,
+    RUSTFLAGS: `--remap-path-prefix=${cargoHome}=/cargo --remap-path-prefix=${sysroot}=/rustc`,
+  },
+});
+
+// Rewrite the generated entry to use Vite's ?init import style instead of
+// the ES Module Integration style that wasm-pack generates, which Vite/rolldown
+// does not support in production builds.
+const entry = path.join(__dirname, "pkg", "yaak_templates.js");
+fs.writeFileSync(
+  entry,
+  [
+    'import init from "./yaak_templates_bg.wasm?init";',
+    'export * from "./yaak_templates_bg.js";',
+    'import * as bg from "./yaak_templates_bg.js";',
+    'const instance = await init({ "./yaak_templates_bg.js": bg });',
+    "bg.__wbg_set_wasm(instance.exports);",
+    "instance.exports.__wbindgen_start();",
+    "",
+  ].join("\n"),
+);
diff --git a/crates/yaak-templates/index.ts b/crates/yaak-templates/index.ts
new file mode 100644
index 0000000..0b8ae3a
--- /dev/null
+++ b/crates/yaak-templates/index.ts
@@ -0,0 +1,15 @@
+export * from "./bindings/parser";
+import { Tokens } from "./bindings/parser";
+import { escape_template, parse_template, unescape_template } from "./pkg";
+
+export function parseTemplate(template: string) {
+  return parse_template(template) as Tokens;
+}
+
+export function escapeTemplate(template: string) {
+  return escape_template(template) as string;
+}
+
+export function unescapeTemplate(template: string) {
+  return unescape_template(template) as string;
+}
diff --git a/crates/yaak-templates/package.json b/crates/yaak-templates/package.json
new file mode 100644
index 0000000..5e89a67
--- /dev/null
+++ b/crates/yaak-templates/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaakapp-internal/templates",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts",
+  "scripts": {
+    "bootstrap": "npm run build",
+    "build": "run-s build:*",
+    "build:pack": "node build-wasm.cjs",
+    "build:clean": "rimraf ./pkg/.gitignore"
+  },
+  "devDependencies": {
+    "rimraf": "^6.1.2"
+  }
+}
diff --git a/crates/yaak-templates/pkg/package.json b/crates/yaak-templates/pkg/package.json
new file mode 100644
index 0000000..0d1cde8
--- /dev/null
+++ b/crates/yaak-templates/pkg/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "yaak-templates",
+  "type": "module",
+  "version": "0.1.0",
+  "files": [
+    "yaak_templates_bg.wasm",
+    "yaak_templates.js",
+    "yaak_templates_bg.js",
+    "yaak_templates.d.ts"
+  ],
+  "main": "yaak_templates.js",
+  "types": "yaak_templates.d.ts",
+  "sideEffects": [
+    "./yaak_templates.js",
+    "./snippets/*"
+  ]
+}
\ No newline at end of file
diff --git a/crates/yaak-templates/pkg/yaak_templates.d.ts b/crates/yaak-templates/pkg/yaak_templates.d.ts
new file mode 100644
index 0000000..97f4ce2
--- /dev/null
+++ b/crates/yaak-templates/pkg/yaak_templates.d.ts
@@ -0,0 +1,8 @@
+/* tslint:disable */
+/* eslint-disable */
+
+export function escape_template(template: string): any;
+
+export function parse_template(template: string): any;
+
+export function unescape_template(template: string): any;
diff --git a/crates/yaak-templates/pkg/yaak_templates.js b/crates/yaak-templates/pkg/yaak_templates.js
new file mode 100644
index 0000000..aa78c84
--- /dev/null
+++ b/crates/yaak-templates/pkg/yaak_templates.js
@@ -0,0 +1,6 @@
+import init from "./yaak_templates_bg.wasm?init";
+export * from "./yaak_templates_bg.js";
+import * as bg from "./yaak_templates_bg.js";
+const instance = await init({ "./yaak_templates_bg.js": bg });
+bg.__wbg_set_wasm(instance.exports);
+instance.exports.__wbindgen_start();
diff --git a/crates/yaak-templates/pkg/yaak_templates_bg.js b/crates/yaak-templates/pkg/yaak_templates_bg.js
new file mode 100644
index 0000000..898cc0e
--- /dev/null
+++ b/crates/yaak-templates/pkg/yaak_templates_bg.js
@@ -0,0 +1,241 @@
+/**
+ * @param {string} template
+ * @returns {any}
+ */
+export function escape_template(template) {
+    const ptr0 = passStringToWasm0(template, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.escape_template(ptr0, len0);
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+
+/**
+ * @param {string} template
+ * @returns {any}
+ */
+export function parse_template(template) {
+    const ptr0 = passStringToWasm0(template, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.parse_template(ptr0, len0);
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+
+/**
+ * @param {string} template
+ * @returns {any}
+ */
+export function unescape_template(template) {
+    const ptr0 = passStringToWasm0(template, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.unescape_template(ptr0, len0);
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+export function __wbg___wbindgen_debug_string_edece8177ad01481(arg0, arg1) {
+    const ret = debugString(arg1);
+    const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+}
+export function __wbg___wbindgen_throw_9c31b086c2b26051(arg0, arg1) {
+    throw new Error(getStringFromWasm0(arg0, arg1));
+}
+export function __wbg_new_02d162bc6cf02f60() {
+    const ret = new Object();
+    return ret;
+}
+export function __wbg_new_310879b66b6e95e1() {
+    const ret = new Array();
+    return ret;
+}
+export function __wbg_set_6be42768c690e380(arg0, arg1, arg2) {
+    arg0[arg1] = arg2;
+}
+export function __wbg_set_78ea6a19f4818587(arg0, arg1, arg2) {
+    arg0[arg1 >>> 0] = arg2;
+}
+export function __wbindgen_cast_0000000000000001(arg0, arg1) {
+    // Cast intrinsic for `Ref(String) -> Externref`.
+    const ret = getStringFromWasm0(arg0, arg1);
+    return ret;
+}
+export function __wbindgen_init_externref_table() {
+    const table = wasm.__wbindgen_externrefs;
+    const offset = table.grow(4);
+    table.set(0, undefined);
+    table.set(offset + 0, undefined);
+    table.set(offset + 1, null);
+    table.set(offset + 2, true);
+    table.set(offset + 3, false);
+}
+function debugString(val) {
+    // primitive types
+    const type = typeof val;
+    if (type == 'number' || type == 'boolean' || val == null) {
+        return  `${val}`;
+    }
+    if (type == 'string') {
+        return `"${val}"`;
+    }
+    if (type == 'symbol') {
+        const description = val.description;
+        if (description == null) {
+            return 'Symbol';
+        } else {
+            return `Symbol(${description})`;
+        }
+    }
+    if (type == 'function') {
+        const name = val.name;
+        if (typeof name == 'string' && name.length > 0) {
+            return `Function(${name})`;
+        } else {
+            return 'Function';
+        }
+    }
+    // objects
+    if (Array.isArray(val)) {
+        const length = val.length;
+        let debug = '[';
+        if (length > 0) {
+            debug += debugString(val[0]);
+        }
+        for(let i = 1; i < length; i++) {
+            debug += ', ' + debugString(val[i]);
+        }
+        debug += ']';
+        return debug;
+    }
+    // Test for built-in
+    const builtInMatches = /\[object ([^\]]+)\]/.exec(toString.call(val));
+    let className;
+    if (builtInMatches && builtInMatches.length > 1) {
+        className = builtInMatches[1];
+    } else {
+        // Failed to match the standard '[object ClassName]'
+        return toString.call(val);
+    }
+    if (className == 'Object') {
+        // we're a user defined class or Object
+        // JSON.stringify avoids problems with cycles, and is generally much
+        // easier than looping through ownProperties of `val`.
+        try {
+            return 'Object(' + JSON.stringify(val) + ')';
+        } catch (_) {
+            return 'Object';
+        }
+    }
+    // errors
+    if (val instanceof Error) {
+        return `${val.name}: ${val.message}\n${val.stack}`;
+    }
+    // TODO we could test for more things here, like `Set`s and `Map`s.
+    return className;
+}
+
+let cachedDataViewMemory0 = null;
+function getDataViewMemory0() {
+    if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) {
+        cachedDataViewMemory0 = new DataView(wasm.memory.buffer);
+    }
+    return cachedDataViewMemory0;
+}
+
+function getStringFromWasm0(ptr, len) {
+    return decodeText(ptr >>> 0, len);
+}
+
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function passStringToWasm0(arg, malloc, realloc) {
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = cachedTextEncoder.encodeInto(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+function takeFromExternrefTable0(idx) {
+    const value = wasm.__wbindgen_externrefs.get(idx);
+    wasm.__externref_table_dealloc(idx);
+    return value;
+}
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+const cachedTextEncoder = new TextEncoder();
+
+if (!('encodeInto' in cachedTextEncoder)) {
+    cachedTextEncoder.encodeInto = function (arg, view) {
+        const buf = cachedTextEncoder.encode(arg);
+        view.set(buf);
+        return {
+            read: arg.length,
+            written: buf.length
+        };
+    };
+}
+
+let WASM_VECTOR_LEN = 0;
+
+
+let wasm;
+export function __wbg_set_wasm(val) {
+    wasm = val;
+}
diff --git a/crates/yaak-templates/pkg/yaak_templates_bg.wasm b/crates/yaak-templates/pkg/yaak_templates_bg.wasm
new file mode 100644
index 0000000..ef7c337
Binary files /dev/null and b/crates/yaak-templates/pkg/yaak_templates_bg.wasm differ
diff --git a/crates/yaak-templates/pkg/yaak_templates_bg.wasm.d.ts b/crates/yaak-templates/pkg/yaak_templates_bg.wasm.d.ts
new file mode 100644
index 0000000..3fdf614
--- /dev/null
+++ b/crates/yaak-templates/pkg/yaak_templates_bg.wasm.d.ts
@@ -0,0 +1,11 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export const escape_template: (a: number, b: number) => [number, number, number];
+export const parse_template: (a: number, b: number) => [number, number, number];
+export const unescape_template: (a: number, b: number) => [number, number, number];
+export const __wbindgen_malloc: (a: number, b: number) => number;
+export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+export const __wbindgen_externrefs: WebAssembly.Table;
+export const __externref_table_dealloc: (a: number) => void;
+export const __wbindgen_start: () => void;
diff --git a/crates/yaak-templates/src/error.rs b/crates/yaak-templates/src/error.rs
new file mode 100644
index 0000000..4a4bf8b
--- /dev/null
+++ b/crates/yaak-templates/src/error.rs
@@ -0,0 +1,32 @@
+use serde::{Serialize, Serializer};
+use thiserror::Error;
+use wasm_bindgen::JsValue;
+
+#[derive(Error, Debug, PartialEq)]
+pub enum Error {
+    #[error("Render Error: {0}")]
+    RenderError(String),
+
+    #[error("Render Error: Variable \"{0}\" is not defined in active environment")]
+    VariableNotFound(String),
+
+    #[error("Render Error: Max recursion depth exceeded")]
+    RenderStackExceededError,
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+impl Into<JsValue> for Error {
+    fn into(self) -> JsValue {
+        serde_wasm_bindgen::to_value(&self).unwrap()
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-templates/src/escape.rs b/crates/yaak-templates/src/escape.rs
new file mode 100644
index 0000000..f7e4275
--- /dev/null
+++ b/crates/yaak-templates/src/escape.rs
@@ -0,0 +1,166 @@
+pub fn escape_template(text: &str) -> String {
+    let mut result = String::with_capacity(text.len());
+    let chars: Vec<char> = text.chars().collect();
+    let mut i = 0;
+
+    while i < chars.len() {
+        // Check if we're at "${["
+        if i + 2 < chars.len() && chars[i] == '$' && chars[i + 1] == '{' && chars[i + 2] == '[' {
+            // Count preceding backslashes
+            let mut backslash_count = 0;
+            let mut j = i;
+            while j > 0 && chars[j - 1] == '\\' {
+                backslash_count += 1;
+                j -= 1;
+            }
+
+            // If odd number of backslashes, the $ is escaped
+            // If even number (including 0), the $ is not escaped
+            let already_escaped = backslash_count % 2 == 1;
+
+            if already_escaped {
+                // Already escaped, just add the current character
+                result.push(chars[i]);
+            } else {
+                // Not escaped, add backslash before $
+                result.push('\\');
+                result.push(chars[i]);
+            }
+        } else {
+            result.push(chars[i]);
+        }
+        i += 1;
+    }
+    result
+}
+
+pub fn unescape_template(text: &str) -> String {
+    let mut result = String::with_capacity(text.len());
+    let chars: Vec<char> = text.chars().collect();
+    let mut i = 0;
+
+    while i < chars.len() {
+        // Check if we're at "\${["
+        if i + 3 < chars.len()
+            && chars[i] == '\\'
+            && chars[i + 1] == '$'
+            && chars[i + 2] == '{'
+            && chars[i + 3] == '['
+        {
+            // Count preceding backslashes (before the current backslash)
+            let mut backslash_count = 0;
+            let mut j = i;
+            while j > 0 && chars[j - 1] == '\\' {
+                backslash_count += 1;
+                j -= 1;
+            }
+
+            // If even number of preceding backslashes, this backslash escapes the $
+            // If odd number, this backslash is itself escaped
+            let escapes_dollar = backslash_count % 2 == 0;
+
+            if escapes_dollar {
+                // Skip the backslash, just add the $
+                result.push(chars[i + 1]);
+                i += 1; // Skip the backslash
+            } else {
+                // This backslash is escaped itself, keep it
+                result.push(chars[i]);
+            }
+        } else {
+            result.push(chars[i]);
+        }
+        i += 1;
+    }
+
+    result
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::escape::{escape_template, unescape_template};
+
+    #[test]
+    fn test_escape_simple() {
+        let input = r#"${[foo]}"#;
+        let expected = r#"\${[foo]}"#;
+        assert_eq!(escape_template(input), expected);
+    }
+
+    #[test]
+    fn test_already_escaped() {
+        let input = r#"\${[bar]}"#;
+        let expected = r#"\${[bar]}"#;
+        assert_eq!(escape_template(input), expected);
+    }
+
+    #[test]
+    fn test_double_backslash() {
+        let input = r#"\\${[bar]}"#;
+        let expected = r#"\\\${[bar]}"#;
+        assert_eq!(escape_template(input), expected);
+    }
+
+    #[test]
+    fn test_escape_with_surrounding_text() {
+        let input = r#"text ${[var]} more"#;
+        let expected = r#"text \${[var]} more"#;
+        assert_eq!(escape_template(input), expected);
+    }
+
+    #[test]
+    fn test_preserve_already_escaped() {
+        let input = r#"already \${[escaped]}"#;
+        let expected = r#"already \${[escaped]}"#;
+        assert_eq!(escape_template(input), expected);
+    }
+
+    #[test]
+    fn test_multiple_occurrences() {
+        let input = r#"${[one]} and ${[two]}"#;
+        let expected = r#"\${[one]} and \${[two]}"#;
+        assert_eq!(escape_template(input), expected);
+    }
+
+    #[test]
+    fn test_mixed_escaped_and_unescaped() {
+        let input = r#"mixed \${[esc]} and ${[unesc]}"#;
+        let expected = r#"mixed \${[esc]} and \${[unesc]}"#;
+        assert_eq!(escape_template(input), expected);
+    }
+
+    #[test]
+    fn test_unescape_simple() {
+        let input = r#"\${[foo]}"#;
+        let expected = r#"${[foo]}"#;
+        assert_eq!(unescape_template(input), expected);
+    }
+
+    #[test]
+    fn test_unescape_with_text() {
+        let input = r#"text \${[var]} more"#;
+        let expected = r#"text ${[var]} more"#;
+        assert_eq!(unescape_template(input), expected);
+    }
+
+    #[test]
+    fn test_unescape_multiple() {
+        let input = r#"\${[one]} and \${[two]}"#;
+        let expected = r#"${[one]} and ${[two]}"#;
+        assert_eq!(unescape_template(input), expected);
+    }
+
+    #[test]
+    fn test_unescape_double_backslash() {
+        let input = r#"\\\${[bar]}"#;
+        let expected = r#"\\${[bar]}"#;
+        assert_eq!(unescape_template(input), expected);
+    }
+
+    #[test]
+    fn test_unescape_plain_text() {
+        let input = r#"${[foo]}"#;
+        let expected = r#"${[foo]}"#;
+        assert_eq!(unescape_template(input), expected);
+    }
+}
diff --git a/crates/yaak-templates/src/format_json.rs b/crates/yaak-templates/src/format_json.rs
new file mode 100644
index 0000000..98f1a90
--- /dev/null
+++ b/crates/yaak-templates/src/format_json.rs
@@ -0,0 +1,533 @@
+enum FormatState {
+    TemplateTag,
+    String,
+    None,
+}
+
+/// Formats JSON that might contain template tags (skipped entirely)
+pub fn format_json(text: &str, tab: &str) -> String {
+    let mut chars = text.chars().peekable();
+
+    let mut new_json = "".to_string();
+    let mut depth = 0;
+    let mut state = FormatState::None;
+    let mut saw_newline_in_whitespace = false;
+
+    loop {
+        let rest_of_chars = chars.clone();
+        let current_char = match chars.next() {
+            None => break,
+            Some(c) => c,
+        };
+
+        // Handle JSON string states
+        if let FormatState::String = state {
+            match current_char {
+                '"' => {
+                    state = FormatState::None;
+                    new_json.push(current_char);
+                    continue;
+                }
+                '\\' => {
+                    new_json.push(current_char);
+                    if let Some(c) = chars.next() {
+                        new_json.push(c);
+                    }
+                    continue;
+                }
+                _ => {
+                    new_json.push(current_char);
+                    continue;
+                }
+            }
+        }
+        // Close Template tag states
+        if let FormatState::TemplateTag = state {
+            if rest_of_chars.take(2).collect::<String>() == "]}" {
+                state = FormatState::None;
+                new_json.push_str("]}");
+                chars.next(); // Skip the second closing bracket
+                continue;
+            } else {
+                new_json.push(current_char);
+                continue;
+            }
+        }
+
+        if rest_of_chars.take(3).collect::<String>() == "${[" {
+            state = FormatState::TemplateTag;
+            new_json.push_str("${[");
+            chars.next(); // Skip {
+            chars.next(); // Skip [
+            continue;
+        }
+
+        // Handle line comments (//)
+        if current_char == '/' && chars.peek() == Some(&'/') {
+            chars.next(); // Skip second /
+            // Collect the rest of the comment until newline
+            let mut comment = String::from("//");
+            loop {
+                match chars.peek() {
+                    Some(&'\n') | None => break,
+                    Some(_) => comment.push(chars.next().unwrap()),
+                }
+            }
+            // Check if the comma handler already added \n + indent
+            let trimmed = new_json.trim_end_matches(|c: char| c == ' ' || c == '\t');
+            if trimmed.ends_with(",\n") && !saw_newline_in_whitespace {
+                // Trailing comment on the same line as comma (e.g. "foo",// comment)
+                new_json.truncate(trimmed.len() - 1);
+                new_json.push(' ');
+            } else if !trimmed.ends_with('\n') && !new_json.is_empty() {
+                // Trailing comment after a value (no newline before us)
+                new_json.push(' ');
+            }
+            new_json.push_str(&comment);
+            new_json.push('\n');
+            new_json.push_str(tab.to_string().repeat(depth).as_str());
+            saw_newline_in_whitespace = false;
+            continue;
+        }
+
+        // Handle block comments (/* ... */)
+        if current_char == '/' && chars.peek() == Some(&'*') {
+            chars.next(); // Skip *
+            let mut comment = String::from("/*");
+            loop {
+                match chars.next() {
+                    None => break,
+                    Some('*') if chars.peek() == Some(&'/') => {
+                        chars.next(); // Skip /
+                        comment.push_str("*/");
+                        break;
+                    }
+                    Some(c) => comment.push(c),
+                }
+            }
+            // If we're not already on a fresh line, add newline + indent before comment
+            let trimmed = new_json.trim_end_matches(|c: char| c == ' ' || c == '\t');
+            if !trimmed.is_empty() && !trimmed.ends_with('\n') {
+                new_json.push('\n');
+                new_json.push_str(tab.to_string().repeat(depth).as_str());
+            }
+            new_json.push_str(&comment);
+            // After block comment, add newline + indent for the next content
+            new_json.push('\n');
+            new_json.push_str(tab.to_string().repeat(depth).as_str());
+            continue;
+        }
+
+        match current_char {
+            ',' => {
+                new_json.push(current_char);
+                new_json.push('\n');
+                new_json.push_str(tab.to_string().repeat(depth).as_str());
+            }
+            '{' => match chars.peek() {
+                Some('}') => {
+                    new_json.push(current_char);
+                    new_json.push('}');
+                    chars.next(); // Skip }
+                }
+                _ => {
+                    depth += 1;
+                    new_json.push(current_char);
+                    new_json.push('\n');
+                    new_json.push_str(tab.to_string().repeat(depth).as_str());
+                }
+            },
+            '[' => match chars.peek() {
+                Some(']') => {
+                    new_json.push(current_char);
+                    new_json.push(']');
+                    chars.next(); // Skip ]
+                }
+                _ => {
+                    depth += 1;
+                    new_json.push(current_char);
+                    new_json.push('\n');
+                    new_json.push_str(tab.to_string().repeat(depth).as_str());
+                }
+            },
+            '}' => {
+                // Guard just in case invalid JSON has more closes than opens
+                if depth > 0 {
+                    depth -= 1;
+                }
+                new_json.push('\n');
+                new_json.push_str(tab.to_string().repeat(depth).as_str());
+                new_json.push(current_char);
+            }
+            ']' => {
+                // Guard just in case invalid JSON has more closes than opens
+                if depth > 0 {
+                    depth -= 1;
+                }
+                new_json.push('\n');
+                new_json.push_str(tab.to_string().repeat(depth).as_str());
+                new_json.push(current_char);
+            }
+            ':' => {
+                new_json.push(current_char);
+                new_json.push(' '); // Pad with space
+            }
+            '"' => {
+                state = FormatState::String;
+                new_json.push(current_char);
+            }
+            _ => {
+                if current_char == ' '
+                    || current_char == '\n'
+                    || current_char == '\t'
+                    || current_char == '\r'
+                {
+                    if current_char == '\n' {
+                        saw_newline_in_whitespace = true;
+                    }
+                    // Don't add these
+                } else {
+                    saw_newline_in_whitespace = false;
+                    new_json.push(current_char);
+                }
+            }
+        }
+    }
+
+    // Filter out whitespace-only lines, but preserve empty lines inside block comments
+    let mut result_lines: Vec<&str> = Vec::new();
+    let mut in_block_comment = false;
+    for line in new_json.lines() {
+        if in_block_comment {
+            result_lines.push(line);
+            if line.contains("*/") {
+                in_block_comment = false;
+            }
+        } else {
+            if line.contains("/*") && !line.contains("*/") {
+                in_block_comment = true;
+            }
+            if !line.trim().is_empty() {
+                result_lines.push(line);
+            }
+        }
+    }
+    result_lines.iter().map(|line| line.trim_end()).collect::<Vec<&str>>().join("\n")
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::format_json::format_json;
+
+    #[test]
+    fn test_simple_object() {
+        assert_eq!(
+            format_json(r#"{"foo":"bar","baz":"qux"}"#, "  "),
+            r#"
+{
+  "foo": "bar",
+  "baz": "qux"
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_escaped() {
+        assert_eq!(
+            format_json(r#"{"foo":"Hi \"world!\""}"#, "  "),
+            r#"
+{
+  "foo": "Hi \"world!\""
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_simple_array() {
+        assert_eq!(
+            format_json(r#"["foo","bar","baz","qux"]"#, "  "),
+            r#"
+[
+  "foo",
+  "bar",
+  "baz",
+  "qux"
+]
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_extra_whitespace() {
+        assert_eq!(
+            format_json(
+                r#"["foo",   "bar",  "baz","qux"
+
+            ]"#,
+                "  "
+            ),
+            r#"
+[
+  "foo",
+  "bar",
+  "baz",
+  "qux"
+]
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_invalid_json() {
+        assert_eq!(
+            format_json(r#"["foo", {"bar",  }"baz",["qux" ]]"#, "  "),
+            r#"
+[
+  "foo",
+  {
+    "bar",
+  }"baz",
+  [
+    "qux"
+  ]
+]
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_skip_template_tags() {
+        assert_eq!(
+            format_json(r#"{"foo":${[ fn("hello", "world") ]} }"#, "  "),
+            r#"
+{
+  "foo": ${[ fn("hello", "world") ]}
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_graphql_response() {
+        assert_eq!(
+            format_json(
+                r#"{"data":{"capsules":[{"landings":null,"original_launch":null,"reuse_count":0,"status":"retired","type":"Dragon 1.0","missions":null},{"id":"5e9e2c5bf3591882af3b2665","landings":null,"original_launch":null,"reuse_count":0,"status":"retired","type":"Dragon 1.0","missions":null}]}}"#,
+                "  "
+            ),
+            r#"
+{
+  "data": {
+    "capsules": [
+      {
+        "landings": null,
+        "original_launch": null,
+        "reuse_count": 0,
+        "status": "retired",
+        "type": "Dragon 1.0",
+        "missions": null
+      },
+      {
+        "id": "5e9e2c5bf3591882af3b2665",
+        "landings": null,
+        "original_launch": null,
+        "reuse_count": 0,
+        "status": "retired",
+        "type": "Dragon 1.0",
+        "missions": null
+      }
+    ]
+  }
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_immediate_close() {
+        assert_eq!(
+            format_json(r#"{"bar":[]}"#, "  "),
+            r#"
+{
+  "bar": []
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_more_closes() {
+        assert_eq!(
+            format_json(r#"{}}"#, "  "),
+            r#"
+{}
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_line_comment_between_keys() {
+        assert_eq!(
+            format_json(
+                r#"{"foo":"bar",// a comment
+"baz":"qux"}"#,
+                "  "
+            ),
+            r#"
+{
+  "foo": "bar", // a comment
+  "baz": "qux"
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_line_comment_at_end() {
+        assert_eq!(
+            format_json(
+                r#"{"foo":"bar" // trailing
+}"#,
+                "  "
+            ),
+            r#"
+{
+  "foo": "bar" // trailing
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_block_comment() {
+        assert_eq!(
+            format_json(r#"{"foo":"bar",/* comment */"baz":"qux"}"#, "  "),
+            r#"
+{
+  "foo": "bar",
+  /* comment */
+  "baz": "qux"
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_comment_in_array() {
+        assert_eq!(
+            format_json(
+                r#"[1,// item comment
+2,3]"#,
+                "  "
+            ),
+            r#"
+[
+  1, // item comment
+  2,
+  3
+]
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_comment_only_line() {
+        assert_eq!(
+            format_json(
+                r#"{
+  // this is a standalone comment
+  "foo": "bar"
+}"#,
+                "  "
+            ),
+            r#"
+{
+  // this is a standalone comment
+  "foo": "bar"
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_multiline_block_comment() {
+        assert_eq!(
+            format_json(
+                r#"{
+  "foo": "bar"
+  /**
+   Hello World!
+
+   Hi there
+   */
+}"#,
+                "  "
+            ),
+            r#"
+{
+  "foo": "bar"
+  /**
+   Hello World!
+
+   Hi there
+   */
+}
+"#
+            .trim()
+        );
+    }
+
+    // NOTE: trailing whitespace on output lines is trimmed by the formatter.
+    // We can't easily add a test for this because raw string literals get
+    // trailing whitespace stripped by the editor/linter.
+
+    #[test]
+    fn test_comment_inside_string_ignored() {
+        assert_eq!(
+            format_json(r#"{"foo":"// not a comment","bar":"/* also not */"}"#, "  "),
+            r#"
+{
+  "foo": "// not a comment",
+  "bar": "/* also not */"
+}
+"#
+            .trim()
+        );
+    }
+
+    #[test]
+    fn test_comment_on_line_after_comma() {
+        assert_eq!(
+            format_json(
+                r#"{
+  "a": "aaa",
+  // "b": "bbb"
+}"#,
+                "  "
+            ),
+            r#"
+{
+  "a": "aaa",
+  // "b": "bbb"
+}
+"#
+            .trim()
+        );
+    }
+}
diff --git a/crates/yaak-templates/src/lib.rs b/crates/yaak-templates/src/lib.rs
new file mode 100644
index 0000000..d97dfb2
--- /dev/null
+++ b/crates/yaak-templates/src/lib.rs
@@ -0,0 +1,11 @@
+pub mod error;
+pub mod escape;
+pub mod format_json;
+pub mod parser;
+pub mod renderer;
+pub mod strip_json_comments;
+#[cfg(feature = "wasm")]
+pub mod wasm;
+
+pub use parser::*;
+pub use renderer::*;
diff --git a/crates/yaak-templates/src/parser.rs b/crates/yaak-templates/src/parser.rs
new file mode 100644
index 0000000..21ab2e8
--- /dev/null
+++ b/crates/yaak-templates/src/parser.rs
@@ -0,0 +1,904 @@
+use crate::TemplateCallback;
+use crate::error::Error::RenderError;
+use crate::error::Result;
+use base64::Engine;
+use base64::prelude::BASE64_URL_SAFE_NO_PAD;
+use serde::{Deserialize, Serialize};
+use std::fmt::Display;
+use ts_rs::TS;
+
+#[derive(Default, Clone, PartialEq, Debug, Serialize, Deserialize, TS)]
+#[ts(export, export_to = "parser.ts")]
+pub struct Tokens {
+    pub tokens: Vec<Token>,
+}
+
+impl Display for Tokens {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let str = self.tokens.iter().map(|t| t.to_string()).collect::<Vec<String>>().join("");
+        write!(f, "{}", str)
+    }
+}
+
+#[derive(Clone, PartialEq, Debug, Serialize, Deserialize, TS)]
+#[ts(export, export_to = "parser.ts")]
+pub struct FnArg {
+    pub name: String,
+    pub value: Val,
+}
+
+impl Display for FnArg {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let str = format!("{}={}", self.name, self.value);
+        write!(f, "{}", str)
+    }
+}
+
+#[derive(Clone, PartialEq, Debug, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "parser.ts")]
+pub enum Val {
+    Str { text: String },
+    Var { name: String },
+    Bool { value: bool },
+    Fn { name: String, args: Vec<FnArg> },
+    Null,
+}
+
+impl Display for Val {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let str = match self {
+            Val::Str { text } => {
+                if text.chars().all(|c| c.is_alphanumeric() || c == ' ' || c == '_' || c == '_') {
+                    format!("'{}'", text)
+                } else {
+                    format!("b64'{}'", BASE64_URL_SAFE_NO_PAD.encode(text))
+                }
+            }
+            Val::Var { name } => name.to_string(),
+            Val::Bool { value } => value.to_string(),
+            Val::Fn { name, args } => {
+                format!(
+                    "{name}({})",
+                    args.iter()
+                        .filter_map(|a| match a.value.clone() {
+                            Val::Null => None,
+                            _ => Some(a.to_string()),
+                        })
+                        .collect::<Vec<String>>()
+                        .join(", ")
+                )
+            }
+            Val::Null => "null".to_string(),
+        };
+        write!(f, "{}", str)
+    }
+}
+
+#[derive(Clone, PartialEq, Debug, Serialize, Deserialize, TS)]
+#[serde(rename_all = "snake_case", tag = "type")]
+#[ts(export, export_to = "parser.ts")]
+pub enum Token {
+    Raw { text: String },
+    Tag { val: Val },
+    Eof,
+}
+
+impl Display for Token {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let str = match self {
+            Token::Raw { text } => text.to_string(),
+            Token::Tag { val } => format!("${{[ {} ]}}", val.to_string()),
+            Token::Eof => "".to_string(),
+        };
+        write!(f, "{}", str)
+    }
+}
+
+fn transform_val<T: TemplateCallback>(val: &Val, cb: &T) -> Result<Val> {
+    let val = match val {
+        Val::Fn { name: fn_name, args } => {
+            let mut new_args: Vec<FnArg> = Vec::new();
+            for arg in args {
+                let value = match arg.clone().value {
+                    Val::Str { text } => {
+                        let text = cb.transform_arg(&fn_name, &arg.name, &text)?;
+                        Val::Str { text }
+                    }
+                    v => transform_val(&v, cb)?,
+                };
+
+                let arg_name = arg.name.clone();
+                new_args.push(FnArg { name: arg_name, value });
+            }
+            Val::Fn { name: fn_name.clone(), args: new_args }
+        }
+        _ => val.clone(),
+    };
+    Ok(val)
+}
+
+pub fn transform_args<T: TemplateCallback>(tokens: Tokens, cb: &T) -> Result<Tokens> {
+    let mut new_tokens = Tokens::default();
+    for t in tokens.tokens.iter() {
+        new_tokens.tokens.push(match t {
+            Token::Tag { val } => {
+                let val = transform_val(val, cb)?;
+                Token::Tag { val }
+            }
+            _ => t.clone(),
+        });
+    }
+
+    Ok(new_tokens)
+}
+
+// Template Syntax
+//
+//  ${[ my_var ]}
+//  ${[ my_fn() ]}
+//  ${[ my_fn(my_var) ]}
+//  ${[ my_fn(my_var, "A String") ]}
+
+// default
+#[derive(Default)]
+pub struct Parser {
+    tokens: Vec<Token>,
+    chars: Vec<char>,
+    pos: usize,
+    curr_text: String,
+}
+
+impl Parser {
+    pub fn new(text: &str) -> Parser {
+        Parser { chars: text.chars().collect(), ..Parser::default() }
+    }
+
+    pub fn parse(&mut self) -> Result<Tokens> {
+        let start_pos = self.pos;
+
+        while self.pos < self.chars.len() {
+            if self.match_str(r#"\\"#) {
+                // Skip double-escapes so we don't trigger our own escapes in the next case
+                self.curr_text += r#"\\"#;
+            } else if self.match_str(r#"\${["#) {
+                // Unescaped template syntax so we treat it as a string
+                self.curr_text += "${[";
+            } else if self.match_str("${[") {
+                let start_curr = self.pos;
+                if let Some(t) = self.parse_tag()? {
+                    self.push_token(t);
+                } else {
+                    self.pos = start_curr;
+                    self.curr_text += "${[";
+                }
+            } else {
+                let ch = self.next_char();
+                self.curr_text.push(ch);
+            }
+
+            if start_pos == self.pos {
+                panic!("Parser stuck!");
+            }
+        }
+
+        self.push_token(Token::Eof);
+        Ok(Tokens { tokens: self.tokens.clone() })
+    }
+
+    fn parse_tag(&mut self) -> Result<Option<Token>> {
+        // Parse up to first identifier
+        //    ${[ my_var...
+        self.skip_whitespace();
+
+        let val = match self.parse_value()? {
+            Some(v) => v,
+            None => return Ok(None),
+        };
+
+        // Parse to closing tag
+        //    ${[ my_var(a, b, c) ]}
+        self.skip_whitespace();
+        if !self.match_str("]}") {
+            return Ok(None);
+        }
+
+        Ok(Some(Token::Tag { val }))
+    }
+
+    #[allow(dead_code)]
+    fn debug_pos(&self, x: &str) {
+        println!(
+            r#"Position: {x}: text[{}]='{}' → "{}" → {:?}"#,
+            self.pos,
+            self.chars[self.pos],
+            self.chars.iter().collect::<String>(),
+            self.tokens,
+        );
+    }
+
+    fn parse_value(&mut self) -> Result<Option<Val>> {
+        let v = if let Some((name, args)) = self.parse_fn()? {
+            Some(Val::Fn { name, args })
+        } else if let Some(v) = self.parse_string()? {
+            Some(Val::Str { text: v })
+        } else if let Some(v) = self.parse_ident() {
+            if v == "null" {
+                Some(Val::Null)
+            } else if v == "true" {
+                Some(Val::Bool { value: true })
+            } else if v == "false" {
+                Some(Val::Bool { value: false })
+            } else {
+                Some(Val::Var { name: v })
+            }
+        } else {
+            None
+        };
+
+        Ok(v)
+    }
+
+    fn parse_fn(&mut self) -> Result<Option<(String, Vec<FnArg>)>> {
+        let start_pos = self.pos;
+
+        let name = match self.parse_fn_name() {
+            Some(v) => v,
+            None => {
+                self.pos = start_pos;
+                return Ok(None);
+            }
+        };
+
+        let args = match self.parse_fn_args()? {
+            Some(args) => args,
+            None => {
+                self.pos = start_pos;
+                return Ok(None);
+            }
+        };
+
+        Ok(Some((name, args)))
+    }
+
+    fn parse_fn_args(&mut self) -> Result<Option<Vec<FnArg>>> {
+        if !self.match_str("(") {
+            return Ok(None);
+        }
+
+        let start_pos = self.pos;
+
+        let mut args: Vec<FnArg> = Vec::new();
+
+        // Fn closed immediately
+        self.skip_whitespace();
+        if self.match_str(")") {
+            return Ok(Some(args));
+        }
+
+        while self.pos < self.chars.len() {
+            self.skip_whitespace();
+
+            let name = self.parse_ident();
+            self.skip_whitespace();
+            self.match_str("=");
+            self.skip_whitespace();
+            let value = self.parse_value()?;
+            self.skip_whitespace();
+
+            if let (Some(name), Some(value)) = (name.clone(), value.clone()) {
+                args.push(FnArg { name, value });
+            } else {
+                // Didn't find valid thing, so return
+                self.pos = start_pos;
+                return Ok(None);
+            }
+
+            if self.match_str(")") {
+                break;
+            }
+
+            self.skip_whitespace();
+
+            // If we don't find a comma, that's bad
+            if !args.is_empty() && !self.match_str(",") {
+                self.pos = start_pos;
+                return Ok(None);
+            }
+
+            if start_pos == self.pos {
+                panic!("Parser stuck!");
+            }
+        }
+
+        Ok(Some(args))
+    }
+
+    fn parse_ident(&mut self) -> Option<String> {
+        let start_pos = self.pos;
+
+        let mut text = String::new();
+        while self.pos < self.chars.len() {
+            let ch = self.peek_char();
+            let is_valid = if start_pos == self.pos {
+                ch.is_alphanumeric() || ch == '_' // The first char is more restrictive
+            } else {
+                ch.is_alphanumeric() || ch == '_' || ch == '-' || ch == '.'
+            };
+            if is_valid {
+                text.push(ch);
+                self.pos += 1;
+            } else {
+                break;
+            }
+
+            if start_pos == self.pos {
+                panic!("Parser stuck!");
+            }
+        }
+
+        if text.is_empty() {
+            self.pos = start_pos;
+            return None;
+        }
+
+        Some(text)
+    }
+
+    fn parse_fn_name(&mut self) -> Option<String> {
+        let start_pos = self.pos;
+
+        let mut text = String::new();
+        while self.pos < self.chars.len() {
+            let ch = self.peek_char();
+            if ch.is_alphanumeric() || ch == '_' || ch == '.' {
+                text.push(ch);
+                self.pos += 1;
+            } else {
+                break;
+            }
+
+            if start_pos == self.pos {
+                panic!("Parser stuck!");
+            }
+        }
+
+        if text.is_empty() {
+            self.pos = start_pos;
+            return None;
+        }
+
+        Some(text)
+    }
+
+    fn parse_string(&mut self) -> Result<Option<String>> {
+        let start_pos = self.pos;
+
+        let mut text = String::new();
+        let mut is_b64 = false;
+        if self.match_str("b64'") {
+            is_b64 = true;
+        } else if self.match_str("'") {
+            // Nothing
+        } else {
+            return Ok(None);
+        }
+
+        let mut found_closing = false;
+        while self.pos < self.chars.len() {
+            let ch = self.next_char();
+            match ch {
+                '\\' => {
+                    text.push(self.next_char());
+                }
+                '\'' => {
+                    found_closing = true;
+                    break;
+                }
+                _ => {
+                    text.push(ch);
+                }
+            }
+
+            if start_pos == self.pos {
+                panic!("Parser stuck!");
+            }
+        }
+
+        if !found_closing {
+            self.pos = start_pos;
+            return Ok(None);
+        }
+
+        let final_text = if is_b64 {
+            let decoded = BASE64_URL_SAFE_NO_PAD
+                .decode(text.clone())
+                .map_err(|_| RenderError(format!("Failed to decode string {text}")))?;
+            let decoded = String::from_utf8(decoded)
+                .map_err(|_| RenderError(format!("Failed to decode utf8 string {text}")))?;
+            decoded
+        } else {
+            text
+        };
+
+        Ok(Some(final_text))
+    }
+
+    fn skip_whitespace(&mut self) {
+        while self.pos < self.chars.len() {
+            if self.peek_char().is_whitespace() {
+                self.pos += 1;
+            } else {
+                break;
+            }
+        }
+    }
+
+    fn next_char(&mut self) -> char {
+        let ch = self.peek_char();
+
+        self.pos += 1;
+        ch
+    }
+
+    fn peek_char(&self) -> char {
+        let ch = self.chars[self.pos];
+        ch
+    }
+
+    fn push_token(&mut self, token: Token) {
+        // Push any text we've accumulated
+        if !self.curr_text.is_empty() {
+            let text_token = Token::Raw { text: self.curr_text.clone() };
+            self.tokens.push(text_token);
+            self.curr_text.clear();
+        }
+
+        self.tokens.push(token);
+    }
+
+    fn match_str(&mut self, value: &str) -> bool {
+        if self.pos + value.len() > self.chars.len() {
+            return false;
+        }
+
+        let cmp = self.chars[self.pos..self.pos + value.len()].iter().collect::<String>();
+
+        if cmp == value {
+            // We have a match, so advance the current index
+            self.pos += value.len();
+            true
+        } else {
+            false
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::Val::Null;
+    use crate::error::Result;
+    use crate::*;
+
+    #[test]
+    fn escaped() -> Result<()> {
+        let mut p = Parser::new(r#"\${[ foo ]}"#);
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![Token::Raw { text: "${[ foo ]}".to_string() }, Token::Eof]
+        );
+        Ok(())
+    }
+
+    #[test]
+    fn escaped_tricky() -> Result<()> {
+        let mut p = Parser::new(r#"\\${[ foo ]}"#);
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Raw { text: r#"\\"#.to_string() },
+                Token::Tag { val: Val::Var { name: "foo".into() } },
+                Token::Eof
+            ]
+        );
+        Ok(())
+    }
+
+    #[test]
+    fn var_simple() -> Result<()> {
+        let mut p = Parser::new("${[ foo ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Var { name: "foo".into() } },
+                Token::Eof
+            ]
+        );
+        Ok(())
+    }
+
+    #[test]
+    fn var_dashes() -> Result<()> {
+        let mut p = Parser::new("${[ a-b ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Var { name: "a-b".into() } },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn var_underscores() -> Result<()> {
+        let mut p = Parser::new("${[ a_b ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Var { name: "a_b".into() } },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn var_dots() -> Result<()> {
+        let mut p = Parser::new("${[ a.b ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Var { name: "a.b".into() } },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn var_prefixes() -> Result<()> {
+        let mut p = Parser::new("${[ -a ]}${[ $a ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Raw {
+                    // Shouldn't be parsed, because they're invalid
+                    text: "${[ -a ]}${[ $a ]}".into()
+                },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn var_underscore_prefix() -> Result<()> {
+        let mut p = Parser::new("${[ _a ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Var { name: "_a".into() } },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn var_boolean() -> Result<()> {
+        let mut p = Parser::new("${[ true ]}${[ false ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Bool { value: true } },
+                Token::Tag { val: Val::Bool { value: false } },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn var_multiple_names_invalid() -> Result<()> {
+        let mut p = Parser::new("${[ foo bar ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![Token::Raw { text: "${[ foo bar ]}".into() }, Token::Eof]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn tag_string() -> Result<()> {
+        let mut p = Parser::new(r#"${[ 'foo \'bar\' baz' ]}"#);
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Str { text: r#"foo 'bar' baz"#.into() } },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn tag_b64_string() -> Result<()> {
+        let mut p = Parser::new(r#"${[ b64'Zm9vICdiYXInIGJheg' ]}"#);
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Str { text: r#"foo 'bar' baz"#.into() } },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn var_surrounded() -> Result<()> {
+        let mut p = Parser::new("Hello ${[ foo ]}!");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Raw { text: "Hello ".to_string() },
+                Token::Tag { val: Val::Var { name: "foo".into() } },
+                Token::Raw { text: "!".to_string() },
+                Token::Eof,
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn fn_simple() -> Result<()> {
+        let mut p = Parser::new("${[ foo() ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Fn { name: "foo".into(), args: Vec::new() } },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn fn_dot_name() -> Result<()> {
+        let mut p = Parser::new("${[ foo.bar.baz() ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag { val: Val::Fn { name: "foo.bar.baz".into(), args: Vec::new() } },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn fn_ident_arg() -> Result<()> {
+        let mut p = Parser::new("${[ foo(a=bar) ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag {
+                    val: Val::Fn {
+                        name: "foo".into(),
+                        args: vec![FnArg {
+                            name: "a".into(),
+                            value: Val::Var { name: "bar".into() }
+                        }],
+                    }
+                },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn fn_ident_args() -> Result<()> {
+        let mut p = Parser::new("${[ foo(a=bar,b = baz, c =qux ) ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag {
+                    val: Val::Fn {
+                        name: "foo".into(),
+                        args: vec![
+                            FnArg { name: "a".into(), value: Val::Var { name: "bar".into() } },
+                            FnArg { name: "b".into(), value: Val::Var { name: "baz".into() } },
+                            FnArg { name: "c".into(), value: Val::Var { name: "qux".into() } },
+                        ],
+                    }
+                },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn fn_mixed_args() -> Result<()> {
+        let mut p = Parser::new(r#"${[ foo(aaa=bar,bb='baz \'hi\'', c=qux, z=true ) ]}"#);
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag {
+                    val: Val::Fn {
+                        name: "foo".into(),
+                        args: vec![
+                            FnArg { name: "aaa".into(), value: Val::Var { name: "bar".into() } },
+                            FnArg {
+                                name: "bb".into(),
+                                value: Val::Str { text: r#"baz 'hi'"#.into() }
+                            },
+                            FnArg { name: "c".into(), value: Val::Var { name: "qux".into() } },
+                            FnArg { name: "z".into(), value: Val::Bool { value: true } },
+                        ],
+                    }
+                },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn fn_nested() -> Result<()> {
+        let mut p = Parser::new("${[ foo(b=bar()) ]}");
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag {
+                    val: Val::Fn {
+                        name: "foo".into(),
+                        args: vec![FnArg {
+                            name: "b".into(),
+                            value: Val::Fn { name: "bar".into(), args: vec![] }
+                        }],
+                    }
+                },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn fn_nested_args() -> Result<()> {
+        let mut p = Parser::new(r#"${[ outer(a=inner(a=foo, b='i'), c='o') ]}"#);
+        assert_eq!(
+            p.parse()?.tokens,
+            vec![
+                Token::Tag {
+                    val: Val::Fn {
+                        name: "outer".into(),
+                        args: vec![
+                            FnArg {
+                                name: "a".into(),
+                                value: Val::Fn {
+                                    name: "inner".into(),
+                                    args: vec![
+                                        FnArg {
+                                            name: "a".into(),
+                                            value: Val::Var { name: "foo".into() }
+                                        },
+                                        FnArg {
+                                            name: "b".into(),
+                                            value: Val::Str { text: "i".into() },
+                                        },
+                                    ],
+                                }
+                            },
+                            FnArg { name: "c".into(), value: Val::Str { text: "o".into() } },
+                        ],
+                    }
+                },
+                Token::Eof
+            ]
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn token_display_var() -> Result<()> {
+        assert_eq!(Val::Var { name: "foo".to_string() }.to_string(), "foo");
+
+        Ok(())
+    }
+
+    #[test]
+    fn token_display_str() -> Result<()> {
+        assert_eq!(Val::Str { text: "Hello You".to_string() }.to_string(), "'Hello You'");
+
+        Ok(())
+    }
+
+    #[test]
+    fn token_display_complex_str() -> Result<()> {
+        assert_eq!(
+            Val::Str { text: "Hello 'You'".to_string() }.to_string(),
+            "b64'SGVsbG8gJ1lvdSc'"
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn token_null_fn_arg() -> Result<()> {
+        assert_eq!(
+            Val::Fn {
+                name: "fn".to_string(),
+                args: vec![
+                    FnArg { name: "n".to_string(), value: Null },
+                    FnArg { name: "a".to_string(), value: Val::Str { text: "aaa".to_string() } }
+                ]
+            }
+            .to_string(),
+            r#"fn(a='aaa')"#
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn token_display_fn() -> Result<()> {
+        assert_eq!(
+            Token::Tag {
+                val: Val::Fn {
+                    name: "foo".to_string(),
+                    args: vec![
+                        FnArg {
+                            name: "arg".to_string(),
+                            value: Val::Str { text: "v 'x'".to_string() }
+                        },
+                        FnArg {
+                            name: "arg2".to_string(),
+                            value: Val::Var { name: "my_var".to_string() }
+                        }
+                    ]
+                }
+            }
+            .to_string(),
+            r#"${[ foo(arg=b64'diAneCc', arg2=my_var) ]}"#
+        );
+
+        Ok(())
+    }
+
+    #[test]
+    fn tokens_display() -> Result<()> {
+        assert_eq!(
+            Tokens {
+                tokens: vec![
+                    Token::Tag { val: Val::Var { name: "my_var".to_string() } },
+                    Token::Raw { text: " Some cool text ".to_string() },
+                    Token::Tag { val: Val::Str { text: "Hello World".to_string() } }
+                ]
+            }
+            .to_string(),
+            r#"${[ my_var ]} Some cool text ${[ 'Hello World' ]}"#
+        );
+
+        Ok(())
+    }
+}
diff --git a/crates/yaak-templates/src/renderer.rs b/crates/yaak-templates/src/renderer.rs
new file mode 100644
index 0000000..72b73fe
--- /dev/null
+++ b/crates/yaak-templates/src/renderer.rs
@@ -0,0 +1,691 @@
+use crate::error::Error::{RenderStackExceededError, VariableNotFound};
+use crate::error::Result;
+use crate::{Parser, Token, Tokens, Val};
+use log::warn;
+use serde_json::json;
+use std::collections::HashMap;
+use std::future::Future;
+
+const MAX_DEPTH: usize = 50;
+
+pub trait TemplateCallback {
+    fn run(
+        &self,
+        fn_name: &str,
+        args: HashMap<String, serde_json::Value>,
+    ) -> impl Future<Output = Result<String>> + Send;
+
+    fn transform_arg(&self, fn_name: &str, arg_name: &str, arg_value: &str) -> Result<String>;
+}
+
+pub async fn render_json_value_raw<T: TemplateCallback>(
+    v: serde_json::Value,
+    vars: &HashMap<String, String>,
+    cb: &T,
+    opt: &RenderOptions,
+) -> Result<serde_json::Value> {
+    let v = match v {
+        serde_json::Value::String(s) => json!(parse_and_render(&s, vars, cb, opt).await?),
+        serde_json::Value::Array(a) => {
+            let mut new_a = Vec::new();
+            for v in a {
+                new_a.push(Box::pin(render_json_value_raw(v, vars, cb, opt)).await?)
+            }
+            json!(new_a)
+        }
+        serde_json::Value::Object(o) => {
+            let mut new_o = serde_json::Map::new();
+            for (k, v) in o {
+                let key = Box::pin(parse_and_render(&k, vars, cb, opt)).await?;
+                let value = Box::pin(render_json_value_raw(v, vars, cb, opt)).await?;
+                new_o.insert(key, value);
+            }
+            json!(new_o)
+        }
+        v => v,
+    };
+    Ok(v)
+}
+
+async fn parse_and_render_at_depth<T: TemplateCallback>(
+    template: &str,
+    vars: &HashMap<String, String>,
+    cb: &T,
+    opt: &RenderOptions,
+    depth: usize,
+) -> Result<String> {
+    let mut p = Parser::new(template);
+    let tokens = p.parse()?;
+    render(tokens, vars, cb, opt, depth + 1).await
+}
+
+pub async fn parse_and_render<T: TemplateCallback>(
+    template: &str,
+    vars: &HashMap<String, String>,
+    cb: &T,
+    opt: &RenderOptions,
+) -> Result<String> {
+    parse_and_render_at_depth(template, vars, cb, opt, 1).await
+}
+
+pub enum RenderErrorBehavior {
+    Throw,
+    ReturnEmpty,
+}
+
+pub struct RenderOptions {
+    pub error_behavior: RenderErrorBehavior,
+}
+
+impl RenderOptions {
+    pub fn throw() -> Self {
+        Self { error_behavior: RenderErrorBehavior::Throw }
+    }
+
+    pub fn return_empty() -> Self {
+        Self { error_behavior: RenderErrorBehavior::ReturnEmpty }
+    }
+}
+
+impl RenderErrorBehavior {
+    pub fn handle(&self, r: Result<String>) -> Result<String> {
+        match (self, r) {
+            (_, Ok(v)) => Ok(v),
+            (RenderErrorBehavior::Throw, Err(e)) => Err(e),
+            (RenderErrorBehavior::ReturnEmpty, Err(e)) => {
+                warn!("Error rendering string: {}", e);
+                Ok("".to_string())
+            }
+        }
+    }
+}
+
+pub async fn render<T: TemplateCallback>(
+    tokens: Tokens,
+    vars: &HashMap<String, String>,
+    cb: &T,
+    opt: &RenderOptions,
+    mut depth: usize,
+) -> Result<String> {
+    depth += 1;
+    if depth > MAX_DEPTH {
+        return opt.error_behavior.handle(Err(RenderStackExceededError));
+    }
+
+    let mut doc_str: Vec<String> = Vec::new();
+
+    for t in tokens.tokens {
+        match t {
+            Token::Raw { text } => doc_str.push(text),
+            Token::Tag { val } => {
+                let val = render_value(val, &vars, cb, opt, depth).await;
+                doc_str.push(opt.error_behavior.handle(val)?)
+            }
+            Token::Eof => {}
+        }
+    }
+
+    Ok(doc_str.join(""))
+}
+
+async fn render_value<T: TemplateCallback>(
+    val: Val,
+    vars: &HashMap<String, String>,
+    cb: &T,
+    opt: &RenderOptions,
+    depth: usize,
+) -> Result<String> {
+    if depth > MAX_DEPTH {
+        return opt.error_behavior.handle(Err(RenderStackExceededError));
+    }
+
+    let v = match val {
+        Val::Str { text } => {
+            let r = Box::pin(parse_and_render_at_depth(&text, vars, cb, opt, depth)).await?;
+            r.to_string()
+        }
+        Val::Var { name } => match vars.get(name.as_str()) {
+            Some(v) => {
+                let r = Box::pin(parse_and_render_at_depth(v, vars, cb, opt, depth)).await?;
+                r.to_string()
+            }
+            None => return Err(VariableNotFound(name)),
+        },
+        Val::Fn { name, args } => {
+            let mut resolved_args: HashMap<String, serde_json::Value> = HashMap::new();
+            for a in args {
+                let v = match a.value.clone() {
+                    Val::Bool { value } => serde_json::Value::Bool(value),
+                    Val::Null => serde_json::Value::Null,
+                    _ => serde_json::Value::String(
+                        Box::pin(render_value(a.value, vars, cb, opt, depth + 1)).await?,
+                    ),
+                };
+                resolved_args.insert(a.name, v);
+            }
+            let result = cb.run(name.as_str(), resolved_args.clone()).await?;
+            Box::pin(parse_and_render_at_depth(&result, vars, cb, opt, depth)).await?
+        }
+        Val::Bool { value } => value.to_string(),
+        Val::Null => "".into(),
+    };
+
+    Ok(v)
+}
+
+#[cfg(test)]
+mod parse_and_render_tests {
+    use crate::error::Error::{RenderError, RenderStackExceededError, VariableNotFound};
+    use crate::error::Result;
+    use crate::renderer::TemplateCallback;
+    use crate::*;
+    use std::collections::HashMap;
+
+    struct EmptyCB {}
+
+    impl TemplateCallback for EmptyCB {
+        async fn run(
+            &self,
+            _fn_name: &str,
+            _args: HashMap<String, serde_json::Value>,
+        ) -> Result<String> {
+            todo!()
+        }
+
+        fn transform_arg(
+            &self,
+            _fn_name: &str,
+            _arg_name: &str,
+            arg_value: &str,
+        ) -> Result<String> {
+            Ok(arg_value.to_string())
+        }
+    }
+
+    #[tokio::test]
+    async fn render_empty() -> Result<()> {
+        let empty_cb = EmptyCB {};
+        let template = "";
+        let vars = HashMap::new();
+        let result = "";
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        assert_eq!(parse_and_render(template, &vars, &empty_cb, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_text_only() -> Result<()> {
+        let empty_cb = EmptyCB {};
+        let template = "Hello World!";
+        let vars = HashMap::new();
+        let result = "Hello World!";
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        assert_eq!(parse_and_render(template, &vars, &empty_cb, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_simple() -> Result<()> {
+        let empty_cb = EmptyCB {};
+        let template = "${[ foo ]}";
+        let vars = HashMap::from([("foo".to_string(), "bar".to_string())]);
+        let result = "bar";
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        assert_eq!(parse_and_render(template, &vars, &empty_cb, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_recursive_var() -> Result<()> {
+        let empty_cb = EmptyCB {};
+        let template = "${[ foo ]}";
+        let mut vars = HashMap::new();
+        vars.insert("foo".to_string(), "foo: ${[ bar ]}".to_string());
+        vars.insert("bar".to_string(), "bar: ${[ baz ]}".to_string());
+        vars.insert("baz".to_string(), "baz".to_string());
+
+        let result = "foo: bar: baz";
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        assert_eq!(parse_and_render(template, &vars, &empty_cb, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_missing_var() -> Result<()> {
+        let empty_cb = EmptyCB {};
+        let template = "${[ foo ]}";
+        let vars = HashMap::new();
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        assert_eq!(
+            parse_and_render(template, &vars, &empty_cb, &opt).await,
+            Err(VariableNotFound("foo".to_string()))
+        );
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_empty_var() -> Result<()> {
+        let empty_cb = EmptyCB {};
+        let template = "${[ foo ]}";
+        let mut vars = HashMap::new();
+        vars.insert("foo".to_string(), "".to_string());
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        assert_eq!(parse_and_render(template, &vars, &empty_cb, &opt).await, Ok("".to_string()));
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_self_referencing_var() -> Result<()> {
+        let empty_cb = EmptyCB {};
+        let template = "${[ foo ]}";
+        let mut vars = HashMap::new();
+        vars.insert("foo".to_string(), "${[ foo ]}".to_string());
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        assert_eq!(
+            parse_and_render(template, &vars, &empty_cb, &opt).await,
+            Err(RenderStackExceededError)
+        );
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_surrounded() -> Result<()> {
+        let empty_cb = EmptyCB {};
+        let template = "hello ${[ word ]} world!";
+        let vars = HashMap::from([("word".to_string(), "cruel".to_string())]);
+        let result = "hello cruel world!";
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        assert_eq!(parse_and_render(template, &vars, &empty_cb, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_valid_fn() -> Result<()> {
+        let vars = HashMap::new();
+        let template = r#"${[ say_hello(a='John', b='Kate') ]}"#;
+        let result = r#"say_hello: 2, Some(String("John")) Some(String("Kate"))"#;
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+
+        struct CB {}
+        impl TemplateCallback for CB {
+            async fn run(
+                &self,
+                fn_name: &str,
+                args: HashMap<String, serde_json::Value>,
+            ) -> Result<String> {
+                Ok(format!("{fn_name}: {}, {:?} {:?}", args.len(), args.get("a"), args.get("b")))
+            }
+
+            fn transform_arg(
+                &self,
+                _fn_name: &str,
+                _arg_name: &str,
+                arg_value: &str,
+            ) -> Result<String> {
+                Ok(arg_value.to_string())
+            }
+        }
+        assert_eq!(parse_and_render(template, &vars, &CB {}, &opt).await?, result);
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_fn_arg() -> Result<()> {
+        let vars = HashMap::new();
+        let template = r#"${[ upper(foo='bar') ]}"#;
+        let result = r#""BAR""#;
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        struct CB {}
+        impl TemplateCallback for CB {
+            async fn run(
+                &self,
+                fn_name: &str,
+                args: HashMap<String, serde_json::Value>,
+            ) -> Result<String> {
+                Ok(match fn_name {
+                    "secret" => "abc".to_string(),
+                    "upper" => args["foo"].to_string().to_uppercase(),
+                    _ => "".to_string(),
+                })
+            }
+
+            fn transform_arg(
+                &self,
+                _fn_name: &str,
+                _arg_name: &str,
+                _arg_value: &str,
+            ) -> Result<String> {
+                todo!()
+            }
+        }
+
+        assert_eq!(parse_and_render(template, &vars, &CB {}, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_fn_b64_arg_template() -> Result<()> {
+        let mut vars = HashMap::new();
+        vars.insert("foo".to_string(), "bar".to_string());
+        let template = r#"${[ upper(foo=b64'Zm9vICdiYXInIGJheg') ]}"#;
+        let result = r#""FOO 'BAR' BAZ""#;
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        struct CB {}
+        impl TemplateCallback for CB {
+            async fn run(
+                &self,
+                fn_name: &str,
+                args: HashMap<String, serde_json::Value>,
+            ) -> Result<String> {
+                Ok(match fn_name {
+                    "upper" => args["foo"].to_string().to_uppercase(),
+                    _ => "".to_string(),
+                })
+            }
+
+            fn transform_arg(
+                &self,
+                _fn_name: &str,
+                _arg_name: &str,
+                _arg_value: &str,
+            ) -> Result<String> {
+                todo!()
+            }
+        }
+
+        assert_eq!(parse_and_render(template, &vars, &CB {}, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_fn_arg_template() -> Result<()> {
+        let mut vars = HashMap::new();
+        vars.insert("foo".to_string(), "bar".to_string());
+        let template = r#"${[ upper(foo='${[ foo ]}') ]}"#;
+        let result = r#""BAR""#;
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+
+        struct CB {}
+        impl TemplateCallback for CB {
+            async fn run(
+                &self,
+                fn_name: &str,
+                args: HashMap<String, serde_json::Value>,
+            ) -> Result<String> {
+                Ok(match fn_name {
+                    "secret" => "abc".to_string(),
+                    "upper" => args["foo"].to_string().to_uppercase(),
+                    _ => "".to_string(),
+                })
+            }
+
+            fn transform_arg(
+                &self,
+                _fn_name: &str,
+                _arg_name: &str,
+                _arg_value: &str,
+            ) -> Result<String> {
+                todo!()
+            }
+        }
+
+        assert_eq!(parse_and_render(template, &vars, &CB {}, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_fn_return_template() -> Result<()> {
+        let mut vars = HashMap::new();
+        vars.insert("foo".to_string(), "bar".to_string());
+        let template = r#"${[ no_op(inner='${[ foo ]}') ]}"#;
+        let result = r#""bar""#;
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+
+        struct CB {}
+        impl TemplateCallback for CB {
+            async fn run(
+                &self,
+                fn_name: &str,
+                args: HashMap<String, serde_json::Value>,
+            ) -> Result<String> {
+                Ok(match fn_name {
+                    "no_op" => args["inner"].to_string(),
+                    _ => "".to_string(),
+                })
+            }
+
+            fn transform_arg(
+                &self,
+                _fn_name: &str,
+                _arg_name: &str,
+                _arg_value: &str,
+            ) -> Result<String> {
+                todo!()
+            }
+        }
+
+        assert_eq!(parse_and_render(template, &vars, &CB {}, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_nested_fn() -> Result<()> {
+        let vars = HashMap::new();
+        let template = r#"${[ upper(foo=secret()) ]}"#;
+        let result = r#""ABC""#;
+
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+        struct CB {}
+        impl TemplateCallback for CB {
+            async fn run(
+                &self,
+                fn_name: &str,
+                args: HashMap<String, serde_json::Value>,
+            ) -> Result<String> {
+                Ok(match fn_name {
+                    "secret" => "abc".to_string(),
+                    "upper" => args["foo"].to_string().to_uppercase(),
+                    _ => "".to_string(),
+                })
+            }
+
+            fn transform_arg(
+                &self,
+                _fn_name: &str,
+                _arg_name: &str,
+                arg_value: &str,
+            ) -> Result<String> {
+                Ok(arg_value.to_string())
+            }
+        }
+        assert_eq!(parse_and_render(template, &vars, &CB {}, &opt).await?, result.to_string());
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn rejects_nested_function_args_beyond_max_depth() -> Result<()> {
+        struct CB {}
+        impl TemplateCallback for CB {
+            async fn run(
+                &self,
+                _fn_name: &str,
+                args: HashMap<String, serde_json::Value>,
+            ) -> Result<String> {
+                Ok(args["value"].as_str().unwrap_or_default().to_string())
+            }
+
+            fn transform_arg(
+                &self,
+                _fn_name: &str,
+                _arg_name: &str,
+                arg_value: &str,
+            ) -> Result<String> {
+                Ok(arg_value.to_string())
+            }
+        }
+
+        let nested_beyond_limit = (0..=super::MAX_DEPTH)
+            .fold("'ok'".to_string(), |value, _| format!("identity(value={value})"));
+        let template_beyond_limit = format!("${{[ {nested_beyond_limit} ]}}");
+        let vars = HashMap::new();
+
+        assert_eq!(
+            parse_and_render(&template_beyond_limit, &vars, &CB {}, &RenderOptions::throw()).await,
+            Err(RenderStackExceededError)
+        );
+        assert_eq!(
+            parse_and_render(
+                &template_beyond_limit,
+                &vars,
+                &CB {},
+                &RenderOptions::return_empty(),
+            )
+            .await,
+            Ok(String::new())
+        );
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_fn_err() -> Result<()> {
+        let vars = HashMap::new();
+        let template = r#"hello ${[ error() ]}"#;
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+
+        struct CB {}
+        impl TemplateCallback for CB {
+            async fn run(
+                &self,
+                _fn_name: &str,
+                _args: HashMap<String, serde_json::Value>,
+            ) -> Result<String> {
+                Err(RenderError("Failed to do it!".to_string()))
+            }
+
+            fn transform_arg(
+                &self,
+                _fn_name: &str,
+                _arg_name: &str,
+                arg_value: &str,
+            ) -> Result<String> {
+                Ok(arg_value.to_string())
+            }
+        }
+
+        assert_eq!(
+            parse_and_render(template, &vars, &CB {}, &opt).await,
+            Err(RenderError("Failed to do it!".to_string()))
+        );
+        Ok(())
+    }
+}
+
+#[cfg(test)]
+mod render_json_value_raw_tests {
+    use crate::error::Result;
+    use crate::{
+        RenderErrorBehavior, RenderOptions, TemplateCallback, parse_and_render,
+        render_json_value_raw,
+    };
+    use serde_json::json;
+    use std::collections::HashMap;
+
+    struct EmptyCB {}
+
+    impl TemplateCallback for EmptyCB {
+        async fn run(
+            &self,
+            _fn_name: &str,
+            _args: HashMap<String, serde_json::Value>,
+        ) -> Result<String> {
+            todo!()
+        }
+
+        fn transform_arg(
+            &self,
+            _fn_name: &str,
+            _arg_name: &str,
+            arg_value: &str,
+        ) -> Result<String> {
+            Ok(arg_value.to_string())
+        }
+    }
+
+    #[tokio::test]
+    async fn render_json_value_string() -> Result<()> {
+        let v = json!("${[a]}");
+        let mut vars = HashMap::new();
+        vars.insert("a".to_string(), "aaa".to_string());
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+
+        assert_eq!(render_json_value_raw(v, &vars, &EmptyCB {}, &opt).await?, json!("aaa"));
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_json_value_array() -> Result<()> {
+        let v = json!(["${[a]}", "${[a]}"]);
+        let mut vars = HashMap::new();
+        vars.insert("a".to_string(), "aaa".to_string());
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+
+        let result = render_json_value_raw(v, &vars, &EmptyCB {}, &opt).await?;
+        assert_eq!(result, json!(["aaa", "aaa"]));
+
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_json_value_object() -> Result<()> {
+        let v = json!({"${[a]}": "${[a]}"});
+        let mut vars = HashMap::new();
+        vars.insert("a".to_string(), "aaa".to_string());
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+
+        let result = render_json_value_raw(v, &vars, &EmptyCB {}, &opt).await?;
+        assert_eq!(result, json!({"aaa": "aaa"}));
+
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_json_value_nested() -> Result<()> {
+        let v = json!([
+            123,
+            {"${[a]}": "${[a]}"},
+            null,
+            "${[a]}",
+            false,
+            {"x": ["${[a]}"]}
+        ]);
+        let mut vars = HashMap::new();
+        vars.insert("a".to_string(), "aaa".to_string());
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
+
+        let result = render_json_value_raw(v, &vars, &EmptyCB {}, &opt).await?;
+        assert_eq!(
+            result,
+            json!([
+                123,
+                {"aaa": "aaa"},
+                null,
+                "aaa",
+                false,
+                {"x": ["aaa"]}
+            ])
+        );
+
+        Ok(())
+    }
+
+    #[tokio::test]
+    async fn render_opt_return_empty() -> Result<()> {
+        let vars = HashMap::new();
+        let opt = RenderOptions { error_behavior: RenderErrorBehavior::ReturnEmpty };
+
+        let result = parse_and_render("DNE: ${[hello]}", &vars, &EmptyCB {}, &opt).await?;
+        assert_eq!(result, "DNE: ".to_string());
+
+        Ok(())
+    }
+}
diff --git a/crates/yaak-templates/src/strip_json_comments.rs b/crates/yaak-templates/src/strip_json_comments.rs
new file mode 100644
index 0000000..5941f10
--- /dev/null
+++ b/crates/yaak-templates/src/strip_json_comments.rs
@@ -0,0 +1,326 @@
+/// Strips JSON comments only if the result is valid JSON. If stripping comments
+/// produces invalid JSON, the original text is returned unchanged.
+pub fn maybe_strip_json_comments(text: &str) -> String {
+    let stripped = strip_json_comments(text);
+    if serde_json::from_str::<serde_json::Value>(&stripped).is_ok() {
+        stripped
+    } else {
+        text.to_string()
+    }
+}
+
+/// Strips comments from JSONC, preserving the original formatting as much as possible.
+///
+/// - Trailing comments on a line are removed (along with preceding whitespace)
+/// - Whole-line comments are removed, including the line itself
+/// - Block comments are removed, including any lines that become empty
+/// - Comments inside strings and template tags are left alone
+pub fn strip_json_comments(text: &str) -> String {
+    let mut chars = text.chars().peekable();
+    let mut result = String::with_capacity(text.len());
+    let mut in_string = false;
+    let mut in_template_tag = false;
+
+    loop {
+        let current_char = match chars.next() {
+            None => break,
+            Some(c) => c,
+        };
+
+        // Handle JSON strings
+        if in_string {
+            result.push(current_char);
+            match current_char {
+                '"' => in_string = false,
+                '\\' => {
+                    if let Some(c) = chars.next() {
+                        result.push(c);
+                    }
+                }
+                _ => {}
+            }
+            continue;
+        }
+
+        // Handle template tags
+        if in_template_tag {
+            result.push(current_char);
+            if current_char == ']' && chars.peek() == Some(&'}') {
+                result.push(chars.next().unwrap());
+                in_template_tag = false;
+            }
+            continue;
+        }
+
+        // Check for template tag start
+        if current_char == '$' && chars.peek() == Some(&'{') {
+            let mut lookahead = chars.clone();
+            lookahead.next(); // skip {
+            if lookahead.peek() == Some(&'[') {
+                in_template_tag = true;
+                result.push(current_char);
+                result.push(chars.next().unwrap()); // {
+                result.push(chars.next().unwrap()); // [
+                continue;
+            }
+        }
+
+        // Check for line comment
+        if current_char == '/' && chars.peek() == Some(&'/') {
+            chars.next(); // skip second /
+            // Consume until newline
+            loop {
+                match chars.peek() {
+                    Some(&'\n') | None => break,
+                    Some(_) => {
+                        chars.next();
+                    }
+                }
+            }
+            // Trim trailing whitespace that preceded the comment
+            let trimmed_len = result.trim_end_matches(|c: char| c == ' ' || c == '\t').len();
+            result.truncate(trimmed_len);
+            continue;
+        }
+
+        // Check for block comment
+        if current_char == '/' && chars.peek() == Some(&'*') {
+            chars.next(); // skip *
+            // Consume until */
+            loop {
+                match chars.next() {
+                    None => break,
+                    Some('*') if chars.peek() == Some(&'/') => {
+                        chars.next(); // skip /
+                        break;
+                    }
+                    Some(_) => {}
+                }
+            }
+            // Trim trailing whitespace that preceded the comment
+            let trimmed_len = result.trim_end_matches(|c: char| c == ' ' || c == '\t').len();
+            result.truncate(trimmed_len);
+            // Skip whitespace/newline after the block comment if the next line is content
+            // (this handles the case where the block comment is on its own line)
+            continue;
+        }
+
+        if current_char == '"' {
+            in_string = true;
+        }
+
+        result.push(current_char);
+    }
+
+    // Remove lines that are now empty (were comment-only lines)
+    let result =
+        result.lines().filter(|line| !line.trim().is_empty()).collect::<Vec<&str>>().join("\n");
+
+    // Remove trailing commas before } or ]
+    strip_trailing_commas(&result)
+}
+
+/// Removes trailing commas before closing braces/brackets, respecting strings.
+fn strip_trailing_commas(text: &str) -> String {
+    let mut result = String::with_capacity(text.len());
+    let chars: Vec<char> = text.chars().collect();
+    let mut i = 0;
+    let mut in_string = false;
+
+    while i < chars.len() {
+        let ch = chars[i];
+
+        if in_string {
+            result.push(ch);
+            match ch {
+                '"' => in_string = false,
+                '\\' => {
+                    i += 1;
+                    if i < chars.len() {
+                        result.push(chars[i]);
+                    }
+                }
+                _ => {}
+            }
+            i += 1;
+            continue;
+        }
+
+        if ch == '"' {
+            in_string = true;
+            result.push(ch);
+            i += 1;
+            continue;
+        }
+
+        if ch == ',' {
+            // Look ahead past whitespace/newlines for } or ]
+            let mut j = i + 1;
+            while j < chars.len() && chars[j].is_whitespace() {
+                j += 1;
+            }
+            if j < chars.len() && (chars[j] == '}' || chars[j] == ']') {
+                // Skip the comma
+                i += 1;
+                continue;
+            }
+        }
+
+        result.push(ch);
+        i += 1;
+    }
+
+    result
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::strip_json_comments::strip_json_comments;
+
+    #[test]
+    fn test_no_comments() {
+        let input = r#"{
+  "foo": "bar",
+  "baz": 123
+}"#;
+        assert_eq!(strip_json_comments(input), input);
+    }
+
+    #[test]
+    fn test_trailing_line_comment() {
+        assert_eq!(
+            strip_json_comments(
+                r#"{
+  "foo": "bar", // this is a comment
+  "baz": 123
+}"#
+            ),
+            r#"{
+  "foo": "bar",
+  "baz": 123
+}"#
+        );
+    }
+
+    #[test]
+    fn test_whole_line_comment() {
+        assert_eq!(
+            strip_json_comments(
+                r#"{
+  // this is a comment
+  "foo": "bar"
+}"#
+            ),
+            r#"{
+  "foo": "bar"
+}"#
+        );
+    }
+
+    #[test]
+    fn test_inline_block_comment() {
+        assert_eq!(
+            strip_json_comments(
+                r#"{
+  "foo": /* a comment */ "bar"
+}"#
+            ),
+            r#"{
+  "foo": "bar"
+}"#
+        );
+    }
+
+    #[test]
+    fn test_whole_line_block_comment() {
+        assert_eq!(
+            strip_json_comments(
+                r#"{
+  /* a comment */
+  "foo": "bar"
+}"#
+            ),
+            r#"{
+  "foo": "bar"
+}"#
+        );
+    }
+
+    #[test]
+    fn test_multiline_block_comment() {
+        assert_eq!(
+            strip_json_comments(
+                r#"{
+  /**
+   * Hello World!
+   */
+  "foo": "bar"
+}"#
+            ),
+            r#"{
+  "foo": "bar"
+}"#
+        );
+    }
+
+    #[test]
+    fn test_comment_inside_string_preserved() {
+        let input = r#"{
+  "foo": "// not a comment",
+  "bar": "/* also not */"
+}"#;
+        assert_eq!(strip_json_comments(input), input);
+    }
+
+    #[test]
+    fn test_comment_inside_template_tag_preserved() {
+        let input = r#"{
+  "foo": ${[ fn("// hi", "/* hey */") ]}
+}"#;
+        assert_eq!(strip_json_comments(input), input);
+    }
+
+    #[test]
+    fn test_multiple_comments() {
+        assert_eq!(
+            strip_json_comments(
+                r#"{
+  // first comment
+  "foo": "bar", // trailing
+  /* block */
+  "baz": 123
+}"#
+            ),
+            r#"{
+  "foo": "bar",
+  "baz": 123
+}"#
+        );
+    }
+
+    #[test]
+    fn test_trailing_comma_after_comment_removed() {
+        assert_eq!(
+            strip_json_comments(
+                r#"{
+  "a": "aaa",
+  // "b": "bbb"
+}"#
+            ),
+            r#"{
+  "a": "aaa"
+}"#
+        );
+    }
+
+    #[test]
+    fn test_trailing_comma_in_array() {
+        assert_eq!(strip_json_comments(r#"[1, 2, /* 3 */]"#), r#"[1, 2]"#);
+    }
+
+    #[test]
+    fn test_comma_inside_string_preserved() {
+        let input = r#"{"a": "hello,}"#;
+        assert_eq!(strip_json_comments(input), input);
+    }
+}
diff --git a/crates/yaak-templates/src/wasm.rs b/crates/yaak-templates/src/wasm.rs
new file mode 100644
index 0000000..87a17bf
--- /dev/null
+++ b/crates/yaak-templates/src/wasm.rs
@@ -0,0 +1,22 @@
+use crate::error::Result;
+use crate::{Parser, escape};
+use wasm_bindgen::JsValue;
+use wasm_bindgen::prelude::wasm_bindgen;
+
+#[wasm_bindgen]
+pub fn parse_template(template: &str) -> Result<JsValue> {
+    let tokens = Parser::new(template).parse()?;
+    Ok(serde_wasm_bindgen::to_value(&tokens).unwrap())
+}
+
+#[wasm_bindgen]
+pub fn escape_template(template: &str) -> Result<JsValue> {
+    let escaped = escape::escape_template(template);
+    Ok(serde_wasm_bindgen::to_value(&escaped).unwrap())
+}
+
+#[wasm_bindgen]
+pub fn unescape_template(template: &str) -> Result<JsValue> {
+    let escaped = escape::unescape_template(template);
+    Ok(serde_wasm_bindgen::to_value(&escaped).unwrap())
+}
diff --git a/crates/yaak-tls/Cargo.toml b/crates/yaak-tls/Cargo.toml
new file mode 100644
index 0000000..53010d9
--- /dev/null
+++ b/crates/yaak-tls/Cargo.toml
@@ -0,0 +1,18 @@
+[package]
+name = "yaak-tls"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+[dependencies]
+log = { workspace = true }
+p12 = "0.6.3"
+pem = "3"
+rustls = { workspace = true, default-features = false, features = ["ring"] }
+rustls-pemfile = "2"
+rustls-platform-verifier = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+thiserror = "2.0.17"
+url = "2.5"
+yaak-models = { workspace = true }
+yasna = "0.5"
diff --git a/crates/yaak-tls/src/error.rs b/crates/yaak-tls/src/error.rs
new file mode 100644
index 0000000..23b5e29
--- /dev/null
+++ b/crates/yaak-tls/src/error.rs
@@ -0,0 +1,26 @@
+use serde::{Serialize, Serializer};
+use std::io;
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error("Rustls error: {0}")]
+    RustlsError(#[from] rustls::Error),
+
+    #[error("I/O error: {0}")]
+    IOError(#[from] io::Error),
+
+    #[error("TLS error: {0}")]
+    GenericError(String),
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-tls/src/lib.rs b/crates/yaak-tls/src/lib.rs
new file mode 100644
index 0000000..6e9924a
--- /dev/null
+++ b/crates/yaak-tls/src/lib.rs
@@ -0,0 +1,499 @@
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use log::debug;
+use rustls::client::danger::{HandshakeSignatureValid, ServerCertVerified, ServerCertVerifier};
+use rustls::crypto::ring;
+use rustls::pki_types::{CertificateDer, PrivateKeyDer, ServerName, UnixTime};
+use rustls::{ClientConfig, DigitallySignedStruct, SignatureScheme};
+use rustls_platform_verifier::BuilderVerifierExt;
+use std::fs;
+use std::io::BufReader;
+use std::path::Path;
+use std::str::FromStr;
+use std::sync::Arc;
+use yasna::models::ObjectIdentifier;
+
+pub mod error;
+
+const OID_RSA_ENCRYPTION: &[u64] = &[1, 2, 840, 113549, 1, 1, 1];
+const OID_EC_PUBLIC_KEY: &[u64] = &[1, 2, 840, 10045, 2, 1];
+
+/// Password for the PKCS#12 blob [`load_native_client_identity`] builds from PEM
+/// files. The blob never leaves the process, so the value only has to agree with
+/// the caller that immediately re-parses it.
+const IN_MEMORY_PKCS12_PASSWORD: &str = "yaak";
+
+#[derive(Clone, Default)]
+pub struct ClientCertificateConfig {
+    pub crt_file: Option<String>,
+    pub key_file: Option<String>,
+    pub pfx_file: Option<String>,
+    pub passphrase: Option<String>,
+}
+
+pub fn get_tls_config(
+    validate_certificates: bool,
+    with_alpn: bool,
+    client_cert: Option<ClientCertificateConfig>,
+) -> Result<ClientConfig> {
+    let maybe_client_cert = load_client_cert(client_cert)?;
+
+    let mut client = if validate_certificates {
+        build_with_validation(maybe_client_cert)
+    } else {
+        build_without_validation(maybe_client_cert)
+    }?;
+
+    if with_alpn {
+        client.alpn_protocols = vec![b"h2".to_vec(), b"http/1.1".to_vec()];
+    }
+
+    Ok(client)
+}
+
+fn build_with_validation(
+    client_cert: Option<(Vec<CertificateDer<'static>>, PrivateKeyDer<'static>)>,
+) -> Result<ClientConfig> {
+    let arc_crypto_provider = Arc::new(ring::default_provider());
+    let builder = ClientConfig::builder_with_provider(arc_crypto_provider)
+        .with_safe_default_protocol_versions()?
+        .with_platform_verifier()?;
+
+    if let Some((certs, key)) = client_cert {
+        return Ok(builder.with_client_auth_cert(certs, key)?);
+    }
+
+    Ok(builder.with_no_client_auth())
+}
+
+fn build_without_validation(
+    client_cert: Option<(Vec<CertificateDer<'static>>, PrivateKeyDer<'static>)>,
+) -> Result<ClientConfig> {
+    let arc_crypto_provider = Arc::new(ring::default_provider());
+    let builder = ClientConfig::builder_with_provider(arc_crypto_provider)
+        .with_safe_default_protocol_versions()?
+        .dangerous()
+        .with_custom_certificate_verifier(Arc::new(NoVerifier));
+
+    if let Some((certs, key)) = client_cert {
+        return Ok(builder.with_client_auth_cert(certs, key)?);
+    }
+
+    Ok(builder.with_no_client_auth())
+}
+
+fn load_client_cert(
+    client_cert: Option<ClientCertificateConfig>,
+) -> Result<Option<(Vec<CertificateDer<'static>>, PrivateKeyDer<'static>)>> {
+    let config = match client_cert {
+        None => return Ok(None),
+        Some(c) => c,
+    };
+
+    // Try PFX/PKCS12 first
+    if let Some(pfx_path) = &config.pfx_file {
+        if !pfx_path.is_empty() {
+            return Ok(Some(load_pkcs12(pfx_path, config.passphrase.as_deref().unwrap_or(""))?));
+        }
+    }
+
+    // Try CRT + KEY files
+    if let (Some(crt_path), Some(key_path)) = (&config.crt_file, &config.key_file) {
+        if !crt_path.is_empty() && !key_path.is_empty() {
+            return Ok(Some(load_pem_files(crt_path, key_path)?));
+        }
+    }
+
+    Ok(None)
+}
+
+/// A client identity in one of the encodings a native TLS stack accepts.
+pub enum NativeClientIdentity {
+    /// A PKCS#12 archive, with the password needed to open it.
+    Pkcs12 { data: Vec<u8>, password: String },
+    /// A PEM certificate chain, leaf first, with a PKCS#8 PEM private key.
+    Pkcs8 {
+        chain_pem: Vec<u8>,
+        key_pem: Vec<u8>,
+    },
+}
+
+/// Whether the platform's native TLS stack should be handed PEM material as
+/// PKCS#12 rather than PKCS#8.
+///
+/// Both encodings lose something. PKCS#8 is rejected for EC keys by Security
+/// Framework on macOS and by SChannel on Windows, which imports keys through an
+/// RSA-only provider. PKCS#12 as the `p12` crate emits it is encrypted with
+/// SHA1/40-bit-RC2 (certificates) and SHA1/3DES (key), and OpenSSL 3 moved RC2
+/// into the legacy provider, so on Linux it fails to decrypt what we just
+/// wrote. Each platform therefore gets the encoding its own stack can read.
+const NATIVE_TLS_WANTS_PKCS12: bool = cfg!(any(target_vendor = "apple", target_os = "windows"));
+
+/// Load the configured client certificate in whichever encoding this platform's
+/// native TLS stack accepts.
+pub fn load_native_client_identity(
+    client_cert: Option<ClientCertificateConfig>,
+) -> Result<Option<NativeClientIdentity>> {
+    let config = match client_cert {
+        None => return Ok(None),
+        Some(c) => c,
+    };
+
+    // Pass a user-supplied PFX through untouched. The OS parser understands more
+    // encryption algorithms than re-encoding it here would preserve.
+    if let Some(pfx_path) = &config.pfx_file {
+        if !pfx_path.is_empty() {
+            let data = fs::read(Path::new(pfx_path))?;
+            return Ok(Some(NativeClientIdentity::Pkcs12 {
+                data,
+                password: config.passphrase.clone().unwrap_or_default(),
+            }));
+        }
+    }
+
+    let Some((certs, key)) = load_client_cert(Some(config))? else {
+        return Ok(None);
+    };
+
+    let key_der = to_pkcs8_der(&key)?;
+
+    if !NATIVE_TLS_WANTS_PKCS12 {
+        return Ok(Some(to_pkcs8_identity(&certs, &key_der)));
+    }
+
+    let (leaf, cas) = certs.split_first().ok_or(GenericError("No certificates found".into()))?;
+    let cas: Vec<&[u8]> = cas.iter().map(|c| c.as_ref()).collect();
+
+    let pfx = p12::PFX::new_with_cas(leaf, &key_der, &cas, IN_MEMORY_PKCS12_PASSWORD, "yaak")
+        .ok_or(GenericError("Failed to build PKCS#12 from client certificate".into()))?;
+
+    Ok(Some(NativeClientIdentity::Pkcs12 {
+        data: pfx.to_der(),
+        password: IN_MEMORY_PKCS12_PASSWORD.to_string(),
+    }))
+}
+
+/// Re-encode a certificate chain and PKCS#8 key as the PEM pair native-tls
+/// expects. It only recognises a key whose first line is the PKCS#8 header, so
+/// the key has to arrive already converted by [`to_pkcs8_der`].
+fn to_pkcs8_identity(certs: &[CertificateDer<'static>], key_der: &[u8]) -> NativeClientIdentity {
+    let config = pem::EncodeConfig::new().set_line_ending(pem::LineEnding::LF);
+    let chain: Vec<pem::Pem> =
+        certs.iter().map(|c| pem::Pem::new("CERTIFICATE", c.as_ref())).collect();
+
+    NativeClientIdentity::Pkcs8 {
+        chain_pem: pem::encode_many_config(&chain, config).into_bytes(),
+        key_pem: pem::encode_config(&pem::Pem::new("PRIVATE KEY", key_der), config).into_bytes(),
+    }
+}
+
+/// Re-encode a private key as PKCS#8 DER, wrapping PKCS#1 and SEC1 keys.
+fn to_pkcs8_der(key: &PrivateKeyDer<'_>) -> Result<Vec<u8>> {
+    match key {
+        PrivateKeyDer::Pkcs8(k) => Ok(k.secret_pkcs8_der().to_vec()),
+        PrivateKeyDer::Pkcs1(k) => Ok(wrap_pkcs8(OID_RSA_ENCRYPTION, None, k.secret_pkcs1_der())),
+        PrivateKeyDer::Sec1(k) => {
+            let (curve, inner) = split_sec1(k.secret_sec1_der())?;
+            Ok(wrap_pkcs8(OID_EC_PUBLIC_KEY, Some(curve), &inner))
+        }
+        _ => Err(GenericError("Unsupported private key format".into())),
+    }
+}
+
+/// Build a PKCS#8 `PrivateKeyInfo` (RFC 5208) around an already-encoded key.
+fn wrap_pkcs8(algorithm: &[u64], parameters: Option<ObjectIdentifier>, key_der: &[u8]) -> Vec<u8> {
+    yasna::construct_der(|w| {
+        w.write_sequence(|w| {
+            w.next().write_u8(0);
+            w.next().write_sequence(|w| {
+                w.next().write_oid(&ObjectIdentifier::from_slice(algorithm));
+                match ¶meters {
+                    Some(oid) => w.next().write_oid(oid),
+                    None => w.next().write_null(),
+                }
+            });
+            w.next().write_bytes(key_der);
+        })
+    })
+}
+
+/// Split a SEC1 `ECPrivateKey` (RFC 5915) into its named curve and a copy of the
+/// key with that curve removed. PKCS#8 carries the curve in the algorithm
+/// identifier, and RFC 5915 says it should not also be repeated inside the key.
+fn split_sec1(der: &[u8]) -> Result<(ObjectIdentifier, Vec<u8>)> {
+    yasna::parse_der(der, |r| {
+        r.read_sequence(|r| {
+            let version = r.next().read_u8()?;
+            let private_key = r.next().read_bytes()?;
+            let curve = r.next().read_tagged(yasna::Tag::context(0), |r| r.read_oid())?;
+            let public_key = r.read_optional(|r| r.read_tagged_der())?;
+
+            let inner = yasna::construct_der(|w| {
+                w.write_sequence(|w| {
+                    w.next().write_u8(version);
+                    w.next().write_bytes(&private_key);
+                    if let Some(public_key) = &public_key {
+                        w.next().write_tagged_der(public_key);
+                    }
+                })
+            });
+
+            Ok((curve, inner))
+        })
+    })
+    .map_err(|e| GenericError(format!("EC private key is missing a named curve: {e}")))
+}
+
+fn load_pem_files(
+    crt_path: &str,
+    key_path: &str,
+) -> Result<(Vec<CertificateDer<'static>>, PrivateKeyDer<'static>)> {
+    // Load certificates
+    let crt_file = fs::File::open(Path::new(crt_path))?;
+    let mut crt_reader = BufReader::new(crt_file);
+    let certs: Vec<CertificateDer<'static>> =
+        rustls_pemfile::certs(&mut crt_reader).filter_map(|r| r.ok()).collect();
+
+    if certs.is_empty() {
+        return Err(GenericError("No certificates found in CRT file".to_string()));
+    }
+
+    // Load private key
+    let key_data = fs::read(Path::new(key_path))?;
+    let key = load_private_key(&key_data)?;
+
+    Ok((certs, key))
+}
+
+fn load_private_key(data: &[u8]) -> Result<PrivateKeyDer<'static>> {
+    let mut reader = BufReader::new(data);
+
+    // Try PKCS8 first
+    if let Some(key) = rustls_pemfile::pkcs8_private_keys(&mut reader).filter_map(|r| r.ok()).next()
+    {
+        return Ok(PrivateKeyDer::Pkcs8(key));
+    }
+
+    // Reset reader and try RSA
+    let mut reader = BufReader::new(data);
+    if let Some(key) = rustls_pemfile::rsa_private_keys(&mut reader).filter_map(|r| r.ok()).next() {
+        return Ok(PrivateKeyDer::Pkcs1(key));
+    }
+
+    // Reset reader and try EC
+    let mut reader = BufReader::new(data);
+    if let Some(key) = rustls_pemfile::ec_private_keys(&mut reader).filter_map(|r| r.ok()).next() {
+        return Ok(PrivateKeyDer::Sec1(key));
+    }
+
+    Err(GenericError("Could not parse private key".to_string()))
+}
+
+fn load_pkcs12(
+    path: &str,
+    passphrase: &str,
+) -> Result<(Vec<CertificateDer<'static>>, PrivateKeyDer<'static>)> {
+    let data = fs::read(Path::new(path))?;
+
+    let pfx = p12::PFX::parse(&data)
+        .map_err(|e| GenericError(format!("Failed to parse PFX: {:?}", e)))?;
+
+    let keys = pfx
+        .key_bags(passphrase)
+        .map_err(|e| GenericError(format!("Failed to extract keys: {:?}", e)))?;
+
+    let certs = pfx
+        .cert_x509_bags(passphrase)
+        .map_err(|e| GenericError(format!("Failed to extract certs: {:?}", e)))?;
+
+    if keys.is_empty() {
+        return Err(GenericError("No private key found in PFX".to_string()));
+    }
+
+    if certs.is_empty() {
+        return Err(GenericError("No certificates found in PFX".to_string()));
+    }
+
+    // Convert certificates - p12 crate returns Vec<u8> for each cert
+    let cert_ders: Vec<CertificateDer<'static>> =
+        certs.into_iter().map(|c| CertificateDer::from(c)).collect();
+
+    // Convert key - the p12 crate returns raw key bytes
+    let key_bytes = keys.into_iter().next().unwrap();
+    let key = PrivateKeyDer::Pkcs8(key_bytes.into());
+
+    Ok((cert_ders, key))
+}
+
+// Copied from reqwest: https://github.com/seanmonstar/reqwest/blob/595c80b1fbcdab73ac2ae93e4edc3406f453df25/src/tls.rs#L608
+#[derive(Debug)]
+struct NoVerifier;
+
+impl ServerCertVerifier for NoVerifier {
+    fn verify_server_cert(
+        &self,
+        _end_entity: &CertificateDer,
+        _intermediates: &[CertificateDer],
+        _server_name: &ServerName,
+        _ocsp_response: &[u8],
+        _now: UnixTime,
+    ) -> std::result::Result<ServerCertVerified, rustls::Error> {
+        Ok(ServerCertVerified::assertion())
+    }
+
+    fn verify_tls12_signature(
+        &self,
+        _message: &[u8],
+        _cert: &CertificateDer,
+        _dss: &DigitallySignedStruct,
+    ) -> std::result::Result<HandshakeSignatureValid, rustls::Error> {
+        Ok(HandshakeSignatureValid::assertion())
+    }
+
+    fn verify_tls13_signature(
+        &self,
+        _message: &[u8],
+        _cert: &CertificateDer,
+        _dss: &DigitallySignedStruct,
+    ) -> std::result::Result<HandshakeSignatureValid, rustls::Error> {
+        Ok(HandshakeSignatureValid::assertion())
+    }
+
+    fn supported_verify_schemes(&self) -> Vec<SignatureScheme> {
+        vec![
+            SignatureScheme::RSA_PKCS1_SHA1,
+            SignatureScheme::ECDSA_SHA1_Legacy,
+            SignatureScheme::RSA_PKCS1_SHA256,
+            SignatureScheme::ECDSA_NISTP256_SHA256,
+            SignatureScheme::RSA_PKCS1_SHA384,
+            SignatureScheme::ECDSA_NISTP384_SHA384,
+            SignatureScheme::RSA_PKCS1_SHA512,
+            SignatureScheme::ECDSA_NISTP521_SHA512,
+            SignatureScheme::RSA_PSS_SHA256,
+            SignatureScheme::RSA_PSS_SHA384,
+            SignatureScheme::RSA_PSS_SHA512,
+            SignatureScheme::ED25519,
+            SignatureScheme::ED448,
+        ]
+    }
+}
+
+pub fn find_client_certificate(
+    url_string: &str,
+    certificates: &[yaak_models::models::ClientCertificate],
+) -> Option<ClientCertificateConfig> {
+    let url = url::Url::from_str(url_string).ok()?;
+    let host = url.host_str()?;
+    let port = url.port_or_known_default();
+
+    for cert in certificates {
+        if !cert.enabled {
+            debug!("Client certificate is disabled, skipping");
+            continue;
+        }
+
+        // Match host (case-insensitive)
+        if !cert.host.eq_ignore_ascii_case(host) {
+            continue;
+        }
+
+        // Match port if specified in the certificate config
+        let cert_port = cert.port.unwrap_or(443);
+        if let Some(url_port) = port {
+            if cert_port != url_port as i32 {
+                debug!(
+                    "Client certificate port does not match {} != {} (cert)",
+                    url_port, cert_port
+                );
+                continue;
+            }
+        }
+
+        // Found a matching certificate
+        debug!("Found matching client certificate host={} port={}", host, port.unwrap_or(443));
+        return Some(ClientCertificateConfig {
+            crt_file: cert.crt_file.clone(),
+            key_file: cert.key_file.clone(),
+            pfx_file: cert.pfx_file.clone(),
+            passphrase: cert.passphrase.clone(),
+        });
+    }
+
+    None
+}
+
+#[cfg(test)]
+mod pkcs8_identity_tests {
+    use super::*;
+
+    const EC_CRT: &str = r#"-----BEGIN CERTIFICATE-----
+MIIBhTCCASugAwIBAgIUB8703dqXCUOJQbhbyaMUMbVFOjwwCgYIKoZIzj0EAwIw
+FzEVMBMGA1UEAwwMeWFhay10ZXN0LWVjMCAXDTI2MDgxNDIwNDYyNFoYDzIxMjYw
+NzIxMjA0NjI0WjAXMRUwEwYDVQQDDAx5YWFrLXRlc3QtZWMwWTATBgcqhkjOPQIB
+BggqhkjOPQMBBwNCAATCYYKhzgHEaRaGsYVjJSoXvoroL8qe1yeEA0VtfxFzMBg+
++bkPQ0nCtMyFfvQQtXWYIakxzsWJyhI8wPjUj6QSo1MwUTAdBgNVHQ4EFgQUKq40
+Hl+2DziVkBVR/tGsPj9FRo0wHwYDVR0jBBgwFoAUKq40Hl+2DziVkBVR/tGsPj9F
+Ro0wDwYDVR0TAQH/BAUwAwEB/zAKBggqhkjOPQQDAgNIADBFAiEAj1dx5XLl9iCZ
+rD0CW+a3RTluxQ5icXno9WJ9qaS6L08CIFx2t0y9znQr7n5x+SmfXbfZtkDola8e
+8nEZga/HXSeu
+-----END CERTIFICATE-----"#;
+
+    const EC_SEC1_KEY: &str = r#"-----BEGIN EC PRIVATE KEY-----
+MHcCAQEEIIoiiZ/hb4h6eHkZUVBTQFz7KLrVKJqQtWee2ygOjijNoAoGCCqGSM49
+AwEHoUQDQgAEwmGCoc4BxGkWhrGFYyUqF76K6C/KntcnhANFbX8RczAYPvm5D0NJ
+wrTMhX70ELV1mCGpMc7FicoSPMD41I+kEg==
+-----END EC PRIVATE KEY-----"#;
+
+    const EC_PKCS8_KEY: &str = r#"-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgiiKJn+FviHp4eRlR
+UFNAXPsoutUompC1Z57bKA6OKM2hRANCAATCYYKhzgHEaRaGsYVjJSoXvoroL8qe
+1yeEA0VtfxFzMBg++bkPQ0nCtMyFfvQQtXWYIakxzsWJyhI8wPjUj6QS
+-----END PRIVATE KEY-----"#;
+
+    fn pkcs8_identity(crt: &str, key: &str) -> (Vec<u8>, Vec<u8>) {
+        let certs: Vec<CertificateDer<'static>> =
+            rustls_pemfile::certs(&mut BufReader::new(crt.as_bytes()))
+                .map(|c| c.unwrap())
+                .collect();
+        let key_der = to_pkcs8_der(&load_private_key(key.as_bytes()).unwrap()).unwrap();
+
+        match to_pkcs8_identity(&certs, &key_der) {
+            NativeClientIdentity::Pkcs8 { chain_pem, key_pem } => (chain_pem, key_pem),
+            NativeClientIdentity::Pkcs12 { .. } => unreachable!("asked for PKCS#8"),
+        }
+    }
+
+    /// native-tls matches the PKCS#8 header as a literal prefix and rejects the
+    /// key outright when it does not line up, so pin it on every platform even
+    /// though only the OpenSSL backend is handed this encoding.
+    #[test]
+    fn every_key_format_re_encodes_to_a_pkcs8_pem() {
+        for (name, key) in [("SEC1", EC_SEC1_KEY), ("PKCS#8", EC_PKCS8_KEY)] {
+            let (chain_pem, key_pem) = pkcs8_identity(EC_CRT, key);
+
+            assert!(
+                key_pem.starts_with(b"-----BEGIN PRIVATE KEY-----\n"),
+                "{name} key did not re-encode to a PKCS#8 PEM"
+            );
+
+            let round_tripped: Vec<CertificateDer<'static>> =
+                rustls_pemfile::certs(&mut BufReader::new(chain_pem.as_slice()))
+                    .map(|c| c.unwrap())
+                    .collect();
+            let original: Vec<CertificateDer<'static>> =
+                rustls_pemfile::certs(&mut BufReader::new(EC_CRT.as_bytes()))
+                    .map(|c| c.unwrap())
+                    .collect();
+            assert_eq!(round_tripped, original, "{name} chain did not round-trip");
+        }
+    }
+
+    /// The two on-disk spellings of one EC key have to converge, because only
+    /// the PKCS#8 one survives the re-encode.
+    #[test]
+    fn sec1_and_pkcs8_spellings_of_one_key_agree() {
+        let (_, from_sec1) = pkcs8_identity(EC_CRT, EC_SEC1_KEY);
+        let (_, from_pkcs8) = pkcs8_identity(EC_CRT, EC_PKCS8_KEY);
+        assert_eq!(from_sec1, from_pkcs8);
+    }
+}
diff --git a/crates/yaak-wasm/Cargo.toml b/crates/yaak-wasm/Cargo.toml
new file mode 100644
index 0000000..32f5613
--- /dev/null
+++ b/crates/yaak-wasm/Cargo.toml
@@ -0,0 +1,41 @@
+[package]
+name = "yaak-wasm"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+# The desktop's model layer, compiled for a browser tab. See src/lib.rs.
+#
+# Building needs a clang with a WebAssembly backend: sqlite-wasm-rs compiles
+# sqlite3.c to wasm at build time, and Apple's clang cannot target it. See
+# build-wasm.cjs, which points cc at Homebrew LLVM when it is present.
+
+[package.metadata.wasm-pack.profile.release]
+wasm-opt = false # Matches yaak-templates; wasm-opt has caused errors in CI
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+# The whole crate is `#![cfg(target_arch = "wasm32")]`: on a native target it
+# is empty, so a workspace-wide `cargo test` neither builds SQLite's wasm shim
+# for the host (which fails) nor links a browser-only runtime. Everything that
+# only exists for wasm is a target-scoped dependency for the same reason.
+
+[dependencies]
+log = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+yaak-lifecycle = { workspace = true }
+yaak-models = { workspace = true }
+# No default features: the template exports belong to @yaakapp-internal/templates, not this module
+yaak-templates = { path = "../yaak-templates", default-features = false }
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+console_error_panic_hook = "0.1"
+js-sys = "0.3"
+serde-wasm-bindgen = "0.6.5"
+sqlite-wasm-rs = "0.5"
+sqlite-wasm-vfs = "0.2"
+wasm-bindgen = "0.2.100"
+wasm-bindgen-futures = "0.4"
+web-sys = { version = "0.3", features = ["console"] }
diff --git a/crates/yaak-wasm/build-wasm.cjs b/crates/yaak-wasm/build-wasm.cjs
new file mode 100644
index 0000000..220cb02
--- /dev/null
+++ b/crates/yaak-wasm/build-wasm.cjs
@@ -0,0 +1,69 @@
+const { execSync, spawnSync } = require("node:child_process");
+const fs = require("node:fs");
+const os = require("node:os");
+const path = require("node:path");
+
+// Same shape as crates/yaak-templates/build-wasm.cjs, plus one wrinkle: this
+// crate links SQLite, and sqlite-wasm-rs compiles sqlite3.c to wasm at build
+// time. That needs a C compiler with a WebAssembly backend, which Apple's
+// clang is not. So the build looks for one, and when it finds none it keeps
+// the committed pkg/ and says so — desktop developers never need this crate
+// rebuilt, and failing their `npm run bootstrap` over it would be wrong.
+
+if (process.env.SKIP_WASM_BUILD === "1") {
+  console.log("Skipping wasm-pack build (SKIP_WASM_BUILD=1)");
+  return;
+}
+
+/** A clang that can emit wasm32, or null. */
+function findWasmClang() {
+  const candidates = [
+    process.env.CC_wasm32_unknown_unknown,
+    "/opt/homebrew/opt/llvm/bin/clang", // Homebrew LLVM, Apple Silicon
+    "/usr/local/opt/llvm/bin/clang", // Homebrew LLVM, Intel
+    "clang", // Linux distros' clang usually has the backend built in
+  ].filter(Boolean);
+
+  for (const clang of candidates) {
+    const probe = spawnSync(clang, ["--print-targets"], { encoding: "utf8" });
+    if (probe.status === 0 && /\bwasm32\b/.test(probe.stdout)) return clang;
+  }
+  return null;
+}
+
+const clang = findWasmClang();
+if (clang == null) {
+  console.log(
+    [
+      "yaak-web: no C compiler with a WebAssembly backend found; keeping the committed pkg/.",
+      "  To rebuild: install LLVM (macOS: `brew install llvm`) or point CC_wasm32_unknown_unknown at one.",
+    ].join("\n"),
+  );
+  return;
+}
+
+// llvm-ar lives next to clang in every LLVM distribution
+const ar = path.join(path.dirname(clang), "llvm-ar");
+
+// Remap machine-specific paths that rustc embeds into the binary (panic
+// location strings), so builds are reproducible across machines
+const sysroot = execSync("rustc --print sysroot").toString().trim();
+const cargoHome = process.env.CARGO_HOME ?? path.join(os.homedir(), ".cargo");
+
+execSync("wasm-pack build --target bundler", {
+  stdio: "inherit",
+  cwd: __dirname,
+  env: {
+    ...process.env,
+    CC_wasm32_unknown_unknown: clang,
+    AR_wasm32_unknown_unknown: fs.existsSync(ar)
+      ? ar
+      : (process.env.AR_wasm32_unknown_unknown ?? ""),
+    RUSTFLAGS: `--remap-path-prefix=${cargoHome}=/cargo --remap-path-prefix=${sysroot}=/rustc`,
+  },
+});
+
+// No post-processing: wasm-pack's own entry (pkg/yaak_wasm.js) is what the app
+// imports, and `vite-plugin-wasm` handles its ES Module Integration form in both
+// dev and production builds. A rewrite used to live here for a Vite that could
+// not, and it outlived both that Vite and the crate name it hardcoded.
diff --git a/crates/yaak-wasm/index.ts b/crates/yaak-wasm/index.ts
new file mode 100644
index 0000000..78694a9
--- /dev/null
+++ b/crates/yaak-wasm/index.ts
@@ -0,0 +1,6 @@
+// The desktop's model layer, compiled to wasm for the browser. See src/lib.rs.
+//
+// This is loaded by the SharedWorker in packages/platform/src/web/worker.ts and
+// nowhere else: it owns a SQLite database, and there must be exactly one of it
+// per origin.
+export { blob_delete, blob_get, blob_put, boot, prepare_http_send, rpc } from "./pkg";
diff --git a/crates/yaak-wasm/package.json b/crates/yaak-wasm/package.json
new file mode 100644
index 0000000..da4486a
--- /dev/null
+++ b/crates/yaak-wasm/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaakapp-internal/wasm",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts",
+  "scripts": {
+    "bootstrap": "npm run build",
+    "build": "run-s build:*",
+    "build:pack": "node build-wasm.cjs",
+    "build:clean": "rimraf ./pkg/.gitignore"
+  },
+  "devDependencies": {
+    "rimraf": "^6.1.2"
+  }
+}
diff --git a/crates/yaak-wasm/pkg/package.json b/crates/yaak-wasm/pkg/package.json
new file mode 100644
index 0000000..09a5758
--- /dev/null
+++ b/crates/yaak-wasm/pkg/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "yaak-wasm",
+  "type": "module",
+  "version": "0.1.0",
+  "files": [
+    "yaak_wasm_bg.wasm",
+    "yaak_wasm.js",
+    "yaak_wasm_bg.js",
+    "yaak_wasm.d.ts"
+  ],
+  "main": "yaak_wasm.js",
+  "types": "yaak_wasm.d.ts",
+  "sideEffects": [
+    "./yaak_wasm.js",
+    "./snippets/*"
+  ]
+}
diff --git a/crates/yaak-wasm/pkg/yaak_wasm.d.ts b/crates/yaak-wasm/pkg/yaak_wasm.d.ts
new file mode 100644
index 0000000..19348e8
--- /dev/null
+++ b/crates/yaak-wasm/pkg/yaak_wasm.d.ts
@@ -0,0 +1,62 @@
+/* tslint:disable */
+/* eslint-disable */
+
+export function blob_delete(id: string): void;
+
+/**
+ * The bytes stored under an id, or none. Ids are the desktop's: a response's
+ * own id for its body, `{responseId}.request` for the request that produced
+ * it. Bytes cross to JS as a `Uint8Array` rather than through JSON.
+ */
+export function blob_get(id: string): Uint8Array | undefined;
+
+/**
+ * Store bytes under an id, replacing anything already there. Chunked the way
+ * the desktop chunks, so a body written here reads back on a desktop that
+ * imports the database, and vice versa.
+ */
+export function blob_put(id: string, bytes: Uint8Array): void;
+
+/**
+ * Register the IndexedDB-backed VFS and open the database.
+ *
+ * Migrations run inside `init_standalone`, exactly as they do for the CLI.
+ * Safe to call more than once; later calls are no-ops.
+ */
+export function boot(): Promise<void>;
+
+/**
+ * Resolve and render a request for sending, exactly as the desktop does before it puts the
+ * request on the network: the environment chain, inherited headers and auth, request
+ * settings, the cookie jar. Nothing here touches a socket. What comes back is what the tab
+ * posts to the Yaak server.
+ *
+ * Refuses, with a message the user can act on, when the request needs something this host
+ * doesn't have: an authentication plugin, or a template function.
+ */
+export function prepare_http_send(payload: any): Promise<any>;
+
+/**
+ * Run one command as `label` (the calling tab's identity, which stands in for
+ * the desktop's window label on every write it makes).
+ *
+ * The payload shapes match the `Cmd*Req` types in `yaak-rpc-schema`, but are
+ * declared locally and dispatched by name, which is the one place this host
+ * does not share the desktop's guarantees: the desktop builds its router from
+ * the schema, so every command has a handler by construction. Here a renamed
+ * command would surface as a runtime "not a command this host answers".
+ *
+ * The fix is `yaak-commands` (the `Host` trait), not more machinery here —
+ * its `models::*` handlers are already this file, typed. Three things have to
+ * give before a wasm host can register them:
+ *
+ * 1. `Host: Send + Sync`, which a browser cannot satisfy: there is one thread
+ *    and the connection pool is an `Rc`.
+ * 2. `models_delete` reaches for `spawn_blocking`; there is nothing to spawn
+ *    onto here.
+ * 3. `yaak-commands` depends on `yaak` and `yaak-plugins`, which pull the HTTP
+ *    stack and the Node sidecar and do not build for wasm32.
+ *
+ * None of those are hard; they are just not this PR.
+ */
+export function rpc(cmd: string, payload: any, label: string): any;
diff --git a/crates/yaak-wasm/pkg/yaak_wasm.js b/crates/yaak-wasm/pkg/yaak_wasm.js
new file mode 100644
index 0000000..76f0b2b
--- /dev/null
+++ b/crates/yaak-wasm/pkg/yaak_wasm.js
@@ -0,0 +1,9 @@
+/* @ts-self-types="./yaak_wasm.d.ts" */
+import * as wasm from "./yaak_wasm_bg.wasm";
+import { __wbg_set_wasm } from "./yaak_wasm_bg.js";
+
+__wbg_set_wasm(wasm);
+wasm.__wbindgen_start();
+export {
+    blob_delete, blob_get, blob_put, boot, prepare_http_send, rpc
+} from "./yaak_wasm_bg.js";
diff --git a/crates/yaak-wasm/pkg/yaak_wasm_bg.js b/crates/yaak-wasm/pkg/yaak_wasm_bg.js
new file mode 100644
index 0000000..8403e51
--- /dev/null
+++ b/crates/yaak-wasm/pkg/yaak_wasm_bg.js
@@ -0,0 +1,1009 @@
+/**
+ * @param {string} id
+ */
+export function blob_delete(id) {
+    const ptr0 = passStringToWasm0(id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.blob_delete(ptr0, len0);
+    if (ret[1]) {
+        throw takeFromExternrefTable0(ret[0]);
+    }
+}
+
+/**
+ * The bytes stored under an id, or none. Ids are the desktop's: a response's
+ * own id for its body, `{responseId}.request` for the request that produced
+ * it. Bytes cross to JS as a `Uint8Array` rather than through JSON.
+ * @param {string} id
+ * @returns {Uint8Array | undefined}
+ */
+export function blob_get(id) {
+    const ptr0 = passStringToWasm0(id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.blob_get(ptr0, len0);
+    if (ret[3]) {
+        throw takeFromExternrefTable0(ret[2]);
+    }
+    let v2;
+    if (ret[0] !== 0) {
+        v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+        wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    }
+    return v2;
+}
+
+/**
+ * Store bytes under an id, replacing anything already there. Chunked the way
+ * the desktop chunks, so a body written here reads back on a desktop that
+ * imports the database, and vice versa.
+ * @param {string} id
+ * @param {Uint8Array} bytes
+ */
+export function blob_put(id, bytes) {
+    const ptr0 = passStringToWasm0(id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ptr1 = passArray8ToWasm0(bytes, wasm.__wbindgen_malloc);
+    const len1 = WASM_VECTOR_LEN;
+    const ret = wasm.blob_put(ptr0, len0, ptr1, len1);
+    if (ret[1]) {
+        throw takeFromExternrefTable0(ret[0]);
+    }
+}
+
+/**
+ * Register the IndexedDB-backed VFS and open the database.
+ *
+ * Migrations run inside `init_standalone`, exactly as they do for the CLI.
+ * Safe to call more than once; later calls are no-ops.
+ * @returns {Promise<void>}
+ */
+export function boot() {
+    const ret = wasm.boot();
+    return ret;
+}
+
+/**
+ * Resolve and render a request for sending, exactly as the desktop does before it puts the
+ * request on the network: the environment chain, inherited headers and auth, request
+ * settings, the cookie jar. Nothing here touches a socket. What comes back is what the tab
+ * posts to the Yaak server.
+ *
+ * Refuses, with a message the user can act on, when the request needs something this host
+ * doesn't have: an authentication plugin, or a template function.
+ * @param {any} payload
+ * @returns {Promise<any>}
+ */
+export function prepare_http_send(payload) {
+    const ret = wasm.prepare_http_send(payload);
+    return ret;
+}
+
+/**
+ * Run one command as `label` (the calling tab's identity, which stands in for
+ * the desktop's window label on every write it makes).
+ *
+ * The payload shapes match the `Cmd*Req` types in `yaak-rpc-schema`, but are
+ * declared locally and dispatched by name, which is the one place this host
+ * does not share the desktop's guarantees: the desktop builds its router from
+ * the schema, so every command has a handler by construction. Here a renamed
+ * command would surface as a runtime "not a command this host answers".
+ *
+ * The fix is `yaak-commands` (the `Host` trait), not more machinery here —
+ * its `models::*` handlers are already this file, typed. Three things have to
+ * give before a wasm host can register them:
+ *
+ * 1. `Host: Send + Sync`, which a browser cannot satisfy: there is one thread
+ *    and the connection pool is an `Rc`.
+ * 2. `models_delete` reaches for `spawn_blocking`; there is nothing to spawn
+ *    onto here.
+ * 3. `yaak-commands` depends on `yaak` and `yaak-plugins`, which pull the HTTP
+ *    stack and the Node sidecar and do not build for wasm32.
+ *
+ * None of those are hard; they are just not this PR.
+ * @param {string} cmd
+ * @param {any} payload
+ * @param {string} label
+ * @returns {any}
+ */
+export function rpc(cmd, payload, label) {
+    const ptr0 = passStringToWasm0(cmd, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ptr1 = passStringToWasm0(label, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    const ret = wasm.rpc(ptr0, len0, payload, ptr1, len1);
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+export function __wbg_Error_bce6d499ff0a4aff(arg0, arg1) {
+    const ret = Error(getStringFromWasm0(arg0, arg1));
+    return ret;
+}
+export function __wbg_String_8564e559799eccda(arg0, arg1) {
+    const ret = String(arg1);
+    const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+}
+export function __wbg_Window_70131fc0c91e4b3c(arg0) {
+    const ret = arg0.Window;
+    return ret;
+}
+export function __wbg_WorkerGlobalScope_601c48015b8cc78e(arg0) {
+    const ret = arg0.WorkerGlobalScope;
+    return ret;
+}
+export function __wbg___wbindgen_bigint_get_as_i64_410e28c7b761ad83(arg0, arg1) {
+    const v = arg1;
+    const ret = typeof(v) === 'bigint' ? v : undefined;
+    getDataViewMemory0().setBigInt64(arg0 + 8 * 1, isLikeNone(ret) ? BigInt(0) : ret, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, !isLikeNone(ret), true);
+}
+export function __wbg___wbindgen_boolean_get_2304fb8c853028c8(arg0) {
+    const v = arg0;
+    const ret = typeof(v) === 'boolean' ? v : undefined;
+    return isLikeNone(ret) ? 0xFFFFFF : ret ? 1 : 0;
+}
+export function __wbg___wbindgen_debug_string_edece8177ad01481(arg0, arg1) {
+    const ret = debugString(arg1);
+    const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+}
+export function __wbg___wbindgen_in_07056af4f902c445(arg0, arg1) {
+    const ret = arg0 in arg1;
+    return ret;
+}
+export function __wbg___wbindgen_is_bigint_aeae3893f30ed54e(arg0) {
+    const ret = typeof(arg0) === 'bigint';
+    return ret;
+}
+export function __wbg___wbindgen_is_function_5cd60d5cf78b4eef(arg0) {
+    const ret = typeof(arg0) === 'function';
+    return ret;
+}
+export function __wbg___wbindgen_is_null_2042690d351e14f0(arg0) {
+    const ret = arg0 === null;
+    return ret;
+}
+export function __wbg___wbindgen_is_object_b4593df85baada48(arg0) {
+    const val = arg0;
+    const ret = typeof(val) === 'object' && val !== null;
+    return ret;
+}
+export function __wbg___wbindgen_is_string_dde0fd9020db4434(arg0) {
+    const ret = typeof(arg0) === 'string';
+    return ret;
+}
+export function __wbg___wbindgen_is_undefined_35bb9f4c7fd651d5(arg0) {
+    const ret = arg0 === undefined;
+    return ret;
+}
+export function __wbg___wbindgen_jsval_eq_c0ed08b3e0f393b9(arg0, arg1) {
+    const ret = arg0 === arg1;
+    return ret;
+}
+export function __wbg___wbindgen_jsval_loose_eq_0ad77b7717db155c(arg0, arg1) {
+    const ret = arg0 == arg1;
+    return ret;
+}
+export function __wbg___wbindgen_number_get_f73a1244370fcc2c(arg0, arg1) {
+    const obj = arg1;
+    const ret = typeof(obj) === 'number' ? obj : undefined;
+    getDataViewMemory0().setFloat64(arg0 + 8 * 1, isLikeNone(ret) ? 0 : ret, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, !isLikeNone(ret), true);
+}
+export function __wbg___wbindgen_string_get_d109740c0d18f4d7(arg0, arg1) {
+    const obj = arg1;
+    const ret = typeof(obj) === 'string' ? obj : undefined;
+    var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    var len1 = WASM_VECTOR_LEN;
+    getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+}
+export function __wbg___wbindgen_throw_9c31b086c2b26051(arg0, arg1) {
+    throw new Error(getStringFromWasm0(arg0, arg1));
+}
+export function __wbg__wbg_cb_unref_3fa391f3fcdb55f8(arg0) {
+    arg0._wbg_cb_unref();
+}
+export function __wbg_abort_70a701fced9ad53a() { return handleError(function (arg0) {
+    arg0.abort();
+}, arguments); }
+export function __wbg_bound_8d5dfa042d13a74b() { return handleError(function (arg0, arg1, arg2, arg3) {
+    const ret = IDBKeyRange.bound(arg0, arg1, arg2 !== 0, arg3 !== 0);
+    return ret;
+}, arguments); }
+export function __wbg_call_13665d9f14390edc() { return handleError(function (arg0, arg1) {
+    const ret = arg0.call(arg1);
+    return ret;
+}, arguments); }
+export function __wbg_call_dfde26266607c996() { return handleError(function (arg0, arg1, arg2) {
+    const ret = arg0.call(arg1, arg2);
+    return ret;
+}, arguments); }
+export function __wbg_clear_bb1b3ff877b62598() { return handleError(function (arg0) {
+    const ret = arg0.clear();
+    return ret;
+}, arguments); }
+export function __wbg_commit_e9c1332714c53826() { return handleError(function (arg0) {
+    arg0.commit();
+}, arguments); }
+export function __wbg_createObjectStore_7aa4cf3fcb65c75a() { return handleError(function (arg0, arg1, arg2, arg3) {
+    const ret = arg0.createObjectStore(getStringFromWasm0(arg1, arg2), arg3);
+    return ret;
+}, arguments); }
+export function __wbg_crypto_48300657fced39f9(arg0) {
+    const ret = arg0.crypto;
+    return ret;
+}
+export function __wbg_delete_bc03f88e7f14db56() { return handleError(function (arg0, arg1) {
+    const ret = arg0.delete(arg1);
+    return ret;
+}, arguments); }
+export function __wbg_done_54b8da57023b7ed2(arg0) {
+    const ret = arg0.done;
+    return ret;
+}
+export function __wbg_entries_564a7e8b1e54ede5(arg0) {
+    const ret = Object.entries(arg0);
+    return ret;
+}
+export function __wbg_error_a6fa202b58aa1cd3(arg0, arg1) {
+    let deferred0_0;
+    let deferred0_1;
+    try {
+        deferred0_0 = arg0;
+        deferred0_1 = arg1;
+        console.error(getStringFromWasm0(arg0, arg1));
+    } finally {
+        wasm.__wbindgen_free(deferred0_0, deferred0_1, 1);
+    }
+}
+export function __wbg_error_ef9cbaece146d1d5() { return handleError(function (arg0) {
+    const ret = arg0.error;
+    return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+}, arguments); }
+export function __wbg_getAll_a0a54eef6ac20915() { return handleError(function (arg0, arg1) {
+    const ret = arg0.getAll(arg1);
+    return ret;
+}, arguments); }
+export function __wbg_getAll_bc4f4ec6a1504163() { return handleError(function (arg0) {
+    const ret = arg0.getAll();
+    return ret;
+}, arguments); }
+export function __wbg_getDate_a52123c8affc9072(arg0) {
+    const ret = arg0.getDate();
+    return ret;
+}
+export function __wbg_getDay_50a9ee1e4d17dc24(arg0) {
+    const ret = arg0.getDay();
+    return ret;
+}
+export function __wbg_getFullYear_d5d1f7de344fdc5b(arg0) {
+    const ret = arg0.getFullYear();
+    return ret;
+}
+export function __wbg_getHours_c974d920209733e8(arg0) {
+    const ret = arg0.getHours();
+    return ret;
+}
+export function __wbg_getMinutes_e2e8ae846b37b328(arg0) {
+    const ret = arg0.getMinutes();
+    return ret;
+}
+export function __wbg_getMonth_de70091920053153(arg0) {
+    const ret = arg0.getMonth();
+    return ret;
+}
+export function __wbg_getRandomValues_15134f5c0ae6b0d0() { return handleError(function (arg0, arg1) {
+    globalThis.crypto.getRandomValues(getArrayU8FromWasm0(arg0, arg1));
+}, arguments); }
+export function __wbg_getRandomValues_263d0aa5464054ee() { return handleError(function (arg0, arg1) {
+    arg0.getRandomValues(arg1);
+}, arguments); }
+export function __wbg_getSeconds_2782a558f414ec05(arg0) {
+    const ret = arg0.getSeconds();
+    return ret;
+}
+export function __wbg_getTime_09f1dd40a44edb30(arg0) {
+    const ret = arg0.getTime();
+    return ret;
+}
+export function __wbg_getTimezoneOffset_96cfb6ddebc9e5ca(arg0) {
+    const ret = arg0.getTimezoneOffset();
+    return ret;
+}
+export function __wbg_get_3e9a707ab7d352eb() { return handleError(function (arg0, arg1) {
+    const ret = Reflect.get(arg0, arg1);
+    return ret;
+}, arguments); }
+export function __wbg_get_98fdf51d029a75eb(arg0, arg1) {
+    const ret = arg0[arg1 >>> 0];
+    return ret;
+}
+export function __wbg_get_dcf82ab8aad1a593() { return handleError(function (arg0, arg1) {
+    const ret = Reflect.get(arg0, arg1);
+    return ret;
+}, arguments); }
+export function __wbg_get_unchecked_1dfe6d05ad91d9b7(arg0, arg1) {
+    const ret = arg0[arg1 >>> 0];
+    return ret;
+}
+export function __wbg_get_with_ref_key_6412cf3094599694(arg0, arg1) {
+    const ret = arg0[arg1];
+    return ret;
+}
+export function __wbg_global_e30ac0b7684506d0(arg0) {
+    const ret = arg0.global;
+    return ret;
+}
+export function __wbg_indexedDB_2e82cb845ce6b3ad() { return handleError(function (arg0) {
+    const ret = arg0.indexedDB;
+    return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+}, arguments); }
+export function __wbg_indexedDB_a2139150e2ea2a08() { return handleError(function (arg0) {
+    const ret = arg0.indexedDB;
+    return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+}, arguments); }
+export function __wbg_indexedDB_cbfeacc981615a77() { return handleError(function (arg0) {
+    const ret = arg0.indexedDB;
+    return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+}, arguments); }
+export function __wbg_instanceof_ArrayBuffer_53db37b06f6b9afe(arg0) {
+    let result;
+    try {
+        result = arg0 instanceof ArrayBuffer;
+    } catch (_) {
+        result = false;
+    }
+    const ret = result;
+    return ret;
+}
+export function __wbg_instanceof_DomException_bc16ce893e8c7439(arg0) {
+    let result;
+    try {
+        result = arg0 instanceof DOMException;
+    } catch (_) {
+        result = false;
+    }
+    const ret = result;
+    return ret;
+}
+export function __wbg_instanceof_Error_b3f7e146d654031a(arg0) {
+    let result;
+    try {
+        result = arg0 instanceof Error;
+    } catch (_) {
+        result = false;
+    }
+    const ret = result;
+    return ret;
+}
+export function __wbg_instanceof_IdbDatabase_102b0fe5255eee9c(arg0) {
+    let result;
+    try {
+        result = arg0 instanceof IDBDatabase;
+    } catch (_) {
+        result = false;
+    }
+    const ret = result;
+    return ret;
+}
+export function __wbg_instanceof_IdbRequest_eef501cff5d0b7c1(arg0) {
+    let result;
+    try {
+        result = arg0 instanceof IDBRequest;
+    } catch (_) {
+        result = false;
+    }
+    const ret = result;
+    return ret;
+}
+export function __wbg_instanceof_Map_16f217b9a2a08d8c(arg0) {
+    let result;
+    try {
+        result = arg0 instanceof Map;
+    } catch (_) {
+        result = false;
+    }
+    const ret = result;
+    return ret;
+}
+export function __wbg_instanceof_Uint8Array_abd07d4bd221d50b(arg0) {
+    let result;
+    try {
+        result = arg0 instanceof Uint8Array;
+    } catch (_) {
+        result = false;
+    }
+    const ret = result;
+    return ret;
+}
+export function __wbg_isArray_94898ed3aad6947b(arg0) {
+    const ret = Array.isArray(arg0);
+    return ret;
+}
+export function __wbg_isSafeInteger_01e964d144ad3a55(arg0) {
+    const ret = Number.isSafeInteger(arg0);
+    return ret;
+}
+export function __wbg_iterator_1441b47f341dc34f() {
+    const ret = Symbol.iterator;
+    return ret;
+}
+export function __wbg_length_2591a0f4f659a55c(arg0) {
+    const ret = arg0.length;
+    return ret;
+}
+export function __wbg_length_56fcd3e2b7e0299d(arg0) {
+    const ret = arg0.length;
+    return ret;
+}
+export function __wbg_lowerBound_a64226f683db77bb() { return handleError(function (arg0, arg1) {
+    const ret = IDBKeyRange.lowerBound(arg0, arg1 !== 0);
+    return ret;
+}, arguments); }
+export function __wbg_message_324ac511aeaf710e(arg0) {
+    const ret = arg0.message;
+    return ret;
+}
+export function __wbg_message_e88a8d3ba2b91c2a(arg0, arg1) {
+    const ret = arg1.message;
+    const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+}
+export function __wbg_msCrypto_8c6d45a75ef1d3da(arg0) {
+    const ret = arg0.msCrypto;
+    return ret;
+}
+export function __wbg_name_fe88cfc178ec40b8(arg0, arg1) {
+    const ret = arg1.name;
+    const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+}
+export function __wbg_new_02d162bc6cf02f60() {
+    const ret = new Object();
+    return ret;
+}
+export function __wbg_new_070df68d66325372() {
+    const ret = new Map();
+    return ret;
+}
+export function __wbg_new_0_2722fcdb71a888a6() {
+    const ret = new Date();
+    return ret;
+}
+export function __wbg_new_1f236d63ba0c4784(arg0, arg1) {
+    const ret = new Error(getStringFromWasm0(arg0, arg1));
+    return ret;
+}
+export function __wbg_new_227d7c05414eb861() {
+    const ret = new Error();
+    return ret;
+}
+export function __wbg_new_310879b66b6e95e1() {
+    const ret = new Array();
+    return ret;
+}
+export function __wbg_new_7ddec6de44ff8f5d(arg0) {
+    const ret = new Uint8Array(arg0);
+    return ret;
+}
+export function __wbg_new_859b9002e2668e82(arg0) {
+    const ret = new Date(arg0);
+    return ret;
+}
+export function __wbg_new_from_slice_269e35316ed2d061(arg0, arg1) {
+    const ret = new Uint8Array(getArrayU8FromWasm0(arg0, arg1));
+    return ret;
+}
+export function __wbg_new_typed_c072c4ce9a2a0cdf(arg0, arg1) {
+    try {
+        var state0 = {a: arg0, b: arg1};
+        var cb0 = (arg0, arg1) => {
+            const a = state0.a;
+            state0.a = 0;
+            try {
+                return wasm_bindgen__convert__closures_____invoke__h7cced28f7815df81(a, state0.b, arg0, arg1);
+            } finally {
+                state0.a = a;
+            }
+        };
+        const ret = new Promise(cb0);
+        return ret;
+    } finally {
+        state0.a = 0;
+    }
+}
+export function __wbg_new_with_length_99887c91eae4abab(arg0) {
+    const ret = new Uint8Array(arg0 >>> 0);
+    return ret;
+}
+export function __wbg_new_with_year_month_day_0ccdc1cc3a42b726(arg0, arg1, arg2) {
+    const ret = new Date(arg0 >>> 0, arg1, arg2);
+    return ret;
+}
+export function __wbg_next_2a4e19f4f5083b0f(arg0) {
+    const ret = arg0.next;
+    return ret;
+}
+export function __wbg_next_6429a146bf756f93() { return handleError(function (arg0) {
+    const ret = arg0.next();
+    return ret;
+}, arguments); }
+export function __wbg_node_95beb7570492fd97(arg0) {
+    const ret = arg0.node;
+    return ret;
+}
+export function __wbg_objectStore_b28adb984a77902e() { return handleError(function (arg0, arg1, arg2) {
+    const ret = arg0.objectStore(getStringFromWasm0(arg1, arg2));
+    return ret;
+}, arguments); }
+export function __wbg_open_40ab11cdd8f5ac5a() { return handleError(function (arg0, arg1, arg2, arg3) {
+    const ret = arg0.open(getStringFromWasm0(arg1, arg2), arg3 >>> 0);
+    return ret;
+}, arguments); }
+export function __wbg_process_b2fea42461d03994(arg0) {
+    const ret = arg0.process;
+    return ret;
+}
+export function __wbg_prototypesetcall_5f9bdc8d75e07276(arg0, arg1, arg2) {
+    Uint8Array.prototype.set.call(getArrayU8FromWasm0(arg0, arg1), arg2);
+}
+export function __wbg_push_b77c476b01548d0a(arg0, arg1) {
+    const ret = arg0.push(arg1);
+    return ret;
+}
+export function __wbg_put_848906967513a84d() { return handleError(function (arg0, arg1) {
+    const ret = arg0.put(arg1);
+    return ret;
+}, arguments); }
+export function __wbg_queueMicrotask_78d584b53af520f5(arg0) {
+    const ret = arg0.queueMicrotask;
+    return ret;
+}
+export function __wbg_queueMicrotask_b39ea83c7f01971a(arg0) {
+    queueMicrotask(arg0);
+}
+export function __wbg_randomFillSync_ca9f178fb14c88cb() { return handleError(function (arg0, arg1) {
+    arg0.randomFillSync(arg1);
+}, arguments); }
+export function __wbg_random_a8dfe52b70cb65a5() {
+    const ret = Math.random();
+    return ret;
+}
+export function __wbg_readyState_b7c530197b76b93b(arg0) {
+    const ret = arg0.readyState;
+    return (__wbindgen_enum_IdbRequestReadyState.indexOf(ret) + 1 || 3) - 1;
+}
+export function __wbg_require_7a9419e39d796c95() { return handleError(function () {
+    const ret = module.require;
+    return ret;
+}, arguments); }
+export function __wbg_resolve_d17db9352f5a220e(arg0) {
+    const ret = Promise.resolve(arg0);
+    return ret;
+}
+export function __wbg_result_c4cb33cd39c97cac() { return handleError(function (arg0) {
+    const ret = arg0.result;
+    return ret;
+}, arguments); }
+export function __wbg_set_24d0fa9e104112f9(arg0, arg1, arg2) {
+    arg0.set(getArrayU8FromWasm0(arg1, arg2));
+}
+export function __wbg_set_6be42768c690e380(arg0, arg1, arg2) {
+    arg0[arg1] = arg2;
+}
+export function __wbg_set_78ea6a19f4818587(arg0, arg1, arg2) {
+    arg0[arg1 >>> 0] = arg2;
+}
+export function __wbg_set_a0e911be3da02782() { return handleError(function (arg0, arg1, arg2) {
+    const ret = Reflect.set(arg0, arg1, arg2);
+    return ret;
+}, arguments); }
+export function __wbg_set_facb7a5914e0fa39(arg0, arg1, arg2) {
+    const ret = arg0.set(arg1, arg2);
+    return ret;
+}
+export function __wbg_set_key_path_8f8e19a098d0851c(arg0, arg1) {
+    arg0.keyPath = arg1;
+}
+export function __wbg_set_onabort_ed56d2172d920901(arg0, arg1) {
+    arg0.onabort = arg1;
+}
+export function __wbg_set_oncomplete_3f428ec13b20d7cc(arg0, arg1) {
+    arg0.oncomplete = arg1;
+}
+export function __wbg_set_onerror_38740b892815eedc(arg0, arg1) {
+    arg0.onerror = arg1;
+}
+export function __wbg_set_onerror_457b093a5063c7ec(arg0, arg1) {
+    arg0.onerror = arg1;
+}
+export function __wbg_set_onsuccess_b556141053d02ea7(arg0, arg1) {
+    arg0.onsuccess = arg1;
+}
+export function __wbg_set_onupgradeneeded_f885fa17614acd2b(arg0, arg1) {
+    arg0.onupgradeneeded = arg1;
+}
+export function __wbg_stack_3b0d974bbf31e44f(arg0, arg1) {
+    const ret = arg1.stack;
+    const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+    getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+}
+export function __wbg_static_accessor_GLOBAL_THIS_02344c9b09eb08a9() {
+    const ret = typeof globalThis === 'undefined' ? null : globalThis;
+    return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+}
+export function __wbg_static_accessor_GLOBAL_ac6d4ac874d5cd54() {
+    const ret = typeof global === 'undefined' ? null : global;
+    return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+}
+export function __wbg_static_accessor_SELF_9b2406c23aeb2023() {
+    const ret = typeof self === 'undefined' ? null : self;
+    return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+}
+export function __wbg_static_accessor_WINDOW_b34d2126934e16ba() {
+    const ret = typeof window === 'undefined' ? null : window;
+    return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+}
+export function __wbg_subarray_7c6a0da8f3b4a1ba(arg0, arg1, arg2) {
+    const ret = arg0.subarray(arg1 >>> 0, arg2 >>> 0);
+    return ret;
+}
+export function __wbg_target_84e05e84ffc12989(arg0) {
+    const ret = arg0.target;
+    return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
+}
+export function __wbg_then_837494e384b37459(arg0, arg1) {
+    const ret = arg0.then(arg1);
+    return ret;
+}
+export function __wbg_toString_1dda136fd8f30a5f(arg0) {
+    const ret = arg0.toString();
+    return ret;
+}
+export function __wbg_transaction_213e4f585d3d1b40(arg0) {
+    const ret = arg0.transaction;
+    return ret;
+}
+export function __wbg_transaction_b7261fed68fa4264() { return handleError(function (arg0, arg1, arg2, arg3) {
+    const ret = arg0.transaction(getStringFromWasm0(arg1, arg2), __wbindgen_enum_IdbTransactionMode[arg3]);
+    return ret;
+}, arguments); }
+export function __wbg_upperBound_f7daa7529e579cfc() { return handleError(function (arg0, arg1) {
+    const ret = IDBKeyRange.upperBound(arg0, arg1 !== 0);
+    return ret;
+}, arguments); }
+export function __wbg_value_9cc0518af87a489c(arg0) {
+    const ret = arg0.value;
+    return ret;
+}
+export function __wbg_versions_215a3ab1c9d5745a(arg0) {
+    const ret = arg0.versions;
+    return ret;
+}
+export function __wbg_warn_b6f36cac66fc96a4(arg0, arg1) {
+    console.warn(arg0, arg1);
+}
+export function __wbindgen_cast_0000000000000001(arg0, arg1) {
+    // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 1131, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
+    const ret = makeMutClosure(arg0, arg1, wasm_bindgen__convert__closures_____invoke__h2c4f0a20127a8a23);
+    return ret;
+}
+export function __wbindgen_cast_0000000000000002(arg0, arg1) {
+    // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("Event")], shim_idx: 214, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+    const ret = makeMutClosure(arg0, arg1, wasm_bindgen__convert__closures_____invoke__h54297d6cc284a2e5);
+    return ret;
+}
+export function __wbindgen_cast_0000000000000003(arg0, arg1) {
+    // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("IDBVersionChangeEvent")], shim_idx: 177, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
+    const ret = makeMutClosure(arg0, arg1, wasm_bindgen__convert__closures_____invoke__h804afe9d352bd562);
+    return ret;
+}
+export function __wbindgen_cast_0000000000000004(arg0, arg1) {
+    // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [], shim_idx: 216, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+    const ret = makeMutClosure(arg0, arg1, wasm_bindgen__convert__closures_____invoke__h5977a2970909c8b8);
+    return ret;
+}
+export function __wbindgen_cast_0000000000000005(arg0) {
+    // Cast intrinsic for `F64 -> Externref`.
+    const ret = arg0;
+    return ret;
+}
+export function __wbindgen_cast_0000000000000006(arg0) {
+    // Cast intrinsic for `I64 -> Externref`.
+    const ret = arg0;
+    return ret;
+}
+export function __wbindgen_cast_0000000000000007(arg0, arg1) {
+    // Cast intrinsic for `Ref(Slice(U8)) -> NamedExternref("Uint8Array")`.
+    const ret = getArrayU8FromWasm0(arg0, arg1);
+    return ret;
+}
+export function __wbindgen_cast_0000000000000008(arg0, arg1) {
+    // Cast intrinsic for `Ref(String) -> Externref`.
+    const ret = getStringFromWasm0(arg0, arg1);
+    return ret;
+}
+export function __wbindgen_cast_0000000000000009(arg0) {
+    // Cast intrinsic for `U64 -> Externref`.
+    const ret = BigInt.asUintN(64, arg0);
+    return ret;
+}
+export function __wbindgen_init_externref_table() {
+    const table = wasm.__wbindgen_externrefs;
+    const offset = table.grow(4);
+    table.set(0, undefined);
+    table.set(offset + 0, undefined);
+    table.set(offset + 1, null);
+    table.set(offset + 2, true);
+    table.set(offset + 3, false);
+}
+function wasm_bindgen__convert__closures_____invoke__h5977a2970909c8b8(arg0, arg1) {
+    wasm.wasm_bindgen__convert__closures_____invoke__h5977a2970909c8b8(arg0, arg1);
+}
+
+function wasm_bindgen__convert__closures_____invoke__h54297d6cc284a2e5(arg0, arg1, arg2) {
+    wasm.wasm_bindgen__convert__closures_____invoke__h54297d6cc284a2e5(arg0, arg1, arg2);
+}
+
+function wasm_bindgen__convert__closures_____invoke__h2c4f0a20127a8a23(arg0, arg1, arg2) {
+    const ret = wasm.wasm_bindgen__convert__closures_____invoke__h2c4f0a20127a8a23(arg0, arg1, arg2);
+    if (ret[1]) {
+        throw takeFromExternrefTable0(ret[0]);
+    }
+}
+
+function wasm_bindgen__convert__closures_____invoke__h804afe9d352bd562(arg0, arg1, arg2) {
+    const ret = wasm.wasm_bindgen__convert__closures_____invoke__h804afe9d352bd562(arg0, arg1, arg2);
+    if (ret[1]) {
+        throw takeFromExternrefTable0(ret[0]);
+    }
+}
+
+function wasm_bindgen__convert__closures_____invoke__h7cced28f7815df81(arg0, arg1, arg2, arg3) {
+    wasm.wasm_bindgen__convert__closures_____invoke__h7cced28f7815df81(arg0, arg1, arg2, arg3);
+}
+
+
+const __wbindgen_enum_IdbRequestReadyState = ["pending", "done"];
+
+
+const __wbindgen_enum_IdbTransactionMode = ["readonly", "readwrite", "versionchange", "readwriteflush", "cleanup"];
+
+function addToExternrefTable0(obj) {
+    const idx = wasm.__externref_table_alloc();
+    wasm.__wbindgen_externrefs.set(idx, obj);
+    return idx;
+}
+
+const CLOSURE_DTORS = (typeof FinalizationRegistry === 'undefined')
+    ? { register: () => {}, unregister: () => {} }
+    : new FinalizationRegistry(state => wasm.__wbindgen_destroy_closure(state.a, state.b));
+
+function debugString(val) {
+    // primitive types
+    const type = typeof val;
+    if (type == 'number' || type == 'boolean' || val == null) {
+        return  `${val}`;
+    }
+    if (type == 'string') {
+        return `"${val}"`;
+    }
+    if (type == 'symbol') {
+        const description = val.description;
+        if (description == null) {
+            return 'Symbol';
+        } else {
+            return `Symbol(${description})`;
+        }
+    }
+    if (type == 'function') {
+        const name = val.name;
+        if (typeof name == 'string' && name.length > 0) {
+            return `Function(${name})`;
+        } else {
+            return 'Function';
+        }
+    }
+    // objects
+    if (Array.isArray(val)) {
+        const length = val.length;
+        let debug = '[';
+        if (length > 0) {
+            debug += debugString(val[0]);
+        }
+        for(let i = 1; i < length; i++) {
+            debug += ', ' + debugString(val[i]);
+        }
+        debug += ']';
+        return debug;
+    }
+    // Test for built-in
+    const builtInMatches = /\[object ([^\]]+)\]/.exec(toString.call(val));
+    let className;
+    if (builtInMatches && builtInMatches.length > 1) {
+        className = builtInMatches[1];
+    } else {
+        // Failed to match the standard '[object ClassName]'
+        return toString.call(val);
+    }
+    if (className == 'Object') {
+        // we're a user defined class or Object
+        // JSON.stringify avoids problems with cycles, and is generally much
+        // easier than looping through ownProperties of `val`.
+        try {
+            return 'Object(' + JSON.stringify(val) + ')';
+        } catch (_) {
+            return 'Object';
+        }
+    }
+    // errors
+    if (val instanceof Error) {
+        return `${val.name}: ${val.message}\n${val.stack}`;
+    }
+    // TODO we could test for more things here, like `Set`s and `Map`s.
+    return className;
+}
+
+function getArrayU8FromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+}
+
+let cachedDataViewMemory0 = null;
+function getDataViewMemory0() {
+    if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) {
+        cachedDataViewMemory0 = new DataView(wasm.memory.buffer);
+    }
+    return cachedDataViewMemory0;
+}
+
+function getStringFromWasm0(ptr, len) {
+    return decodeText(ptr >>> 0, len);
+}
+
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function handleError(f, args) {
+    try {
+        return f.apply(this, args);
+    } catch (e) {
+        const idx = addToExternrefTable0(e);
+        wasm.__wbindgen_exn_store(idx);
+    }
+}
+
+function isLikeNone(x) {
+    return x === undefined || x === null;
+}
+
+function makeMutClosure(arg0, arg1, f) {
+    const state = { a: arg0, b: arg1, cnt: 1 };
+    const real = (...args) => {
+
+        // First up with a closure we increment the internal reference
+        // count. This ensures that the Rust closure environment won't
+        // be deallocated while we're invoking it.
+        state.cnt++;
+        const a = state.a;
+        state.a = 0;
+        try {
+            return f(a, state.b, ...args);
+        } finally {
+            state.a = a;
+            real._wbg_cb_unref();
+        }
+    };
+    real._wbg_cb_unref = () => {
+        if (--state.cnt === 0) {
+            wasm.__wbindgen_destroy_closure(state.a, state.b);
+            state.a = 0;
+            CLOSURE_DTORS.unregister(state);
+        }
+    };
+    CLOSURE_DTORS.register(real, state, state);
+    return real;
+}
+
+function passArray8ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 1, 1) >>> 0;
+    getUint8ArrayMemory0().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+function passStringToWasm0(arg, malloc, realloc) {
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = cachedTextEncoder.encodeInto(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+function takeFromExternrefTable0(idx) {
+    const value = wasm.__wbindgen_externrefs.get(idx);
+    wasm.__externref_table_dealloc(idx);
+    return value;
+}
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+const cachedTextEncoder = new TextEncoder();
+
+if (!('encodeInto' in cachedTextEncoder)) {
+    cachedTextEncoder.encodeInto = function (arg, view) {
+        const buf = cachedTextEncoder.encode(arg);
+        view.set(buf);
+        return {
+            read: arg.length,
+            written: buf.length
+        };
+    };
+}
+
+let WASM_VECTOR_LEN = 0;
+
+
+let wasm;
+export function __wbg_set_wasm(val) {
+    wasm = val;
+}
diff --git a/crates/yaak-wasm/pkg/yaak_wasm_bg.wasm.d.ts b/crates/yaak-wasm/pkg/yaak_wasm_bg.wasm.d.ts
new file mode 100644
index 0000000..a68858d
--- /dev/null
+++ b/crates/yaak-wasm/pkg/yaak_wasm_bg.wasm.d.ts
@@ -0,0 +1,33 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export const blob_delete: (a: number, b: number) => [number, number];
+export const blob_get: (a: number, b: number) => [number, number, number, number];
+export const blob_put: (a: number, b: number, c: number, d: number) => [number, number];
+export const boot: () => any;
+export const prepare_http_send: (a: any) => any;
+export const rpc: (a: number, b: number, c: any, d: number, e: number) => [number, number, number];
+export const rust_sqlite_wasm_abort: () => void;
+export const rust_sqlite_wasm_assert_fail: (a: number, b: number, c: number, d: number) => void;
+export const rust_sqlite_wasm_calloc: (a: number, b: number) => number;
+export const rust_sqlite_wasm_free: (a: number) => void;
+export const rust_sqlite_wasm_getentropy: (a: number, b: number) => number;
+export const rust_sqlite_wasm_localtime: (a: number) => number;
+export const rust_sqlite_wasm_malloc: (a: number) => number;
+export const rust_sqlite_wasm_realloc: (a: number, b: number) => number;
+export const sqlite3_os_end: () => number;
+export const sqlite3_os_init: () => number;
+export const wasm_bindgen__convert__closures_____invoke__h2c4f0a20127a8a23: (a: number, b: number, c: any) => [number, number];
+export const wasm_bindgen__convert__closures_____invoke__h804afe9d352bd562: (a: number, b: number, c: any) => [number, number];
+export const wasm_bindgen__convert__closures_____invoke__h7cced28f7815df81: (a: number, b: number, c: any, d: any) => void;
+export const wasm_bindgen__convert__closures_____invoke__h54297d6cc284a2e5: (a: number, b: number, c: any) => void;
+export const wasm_bindgen__convert__closures_____invoke__h5977a2970909c8b8: (a: number, b: number) => void;
+export const __wbindgen_malloc: (a: number, b: number) => number;
+export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+export const __wbindgen_exn_store: (a: number) => void;
+export const __externref_table_alloc: () => number;
+export const __wbindgen_externrefs: WebAssembly.Table;
+export const __wbindgen_free: (a: number, b: number, c: number) => void;
+export const __wbindgen_destroy_closure: (a: number, b: number) => void;
+export const __externref_table_dealloc: (a: number) => void;
+export const __wbindgen_start: () => void;
diff --git a/crates/yaak-wasm/src/lib.rs b/crates/yaak-wasm/src/lib.rs
new file mode 100644
index 0000000..aeae781
--- /dev/null
+++ b/crates/yaak-wasm/src/lib.rs
@@ -0,0 +1,641 @@
+//! The desktop's model layer, running in a browser.
+//!
+//! Nothing here is model logic. This crate registers a persistent VFS, opens
+//! the database through the same `init_standalone` the CLI uses, and answers
+//! the `models_*` commands by calling the same `ClientDb` queries the desktop
+//! does. A browser tab therefore stores exactly what a desktop install stores,
+//! migrations and all — the only thing that differs is where the SQLite pages
+//! live (IndexedDB) and who is calling in (a worker instead of Tauri).
+//!
+//! It is meant to be loaded once, in one place — a SharedWorker — because two
+//! SQLite instances over the same IndexedDB pages would corrupt them. The
+//! JavaScript side owns that; this crate assumes it is the only writer.
+//!
+//! The command surface is deliberately narrow: what the frontend needs to keep
+//! its model store coherent, blob storage, and the "prepare" half of a send
+//! (resolve, inherit, render — see [`prepare_http_send`]). Putting bytes on the
+//! network, plugins, git, sync and everything else with a socket or a
+//! filesystem behind it lives elsewhere.
+
+// Nothing in here means anything off wasm32, and building it there would drag
+// SQLite's wasm C shim into a native compile. So on any other target the crate
+// is empty — a workspace-wide `cargo test` passes through it.
+#![cfg(target_arch = "wasm32")]
+
+use std::cell::RefCell;
+use std::sync::mpsc;
+
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use wasm_bindgen::prelude::*;
+use yaak_models::blob_manager::{BlobManager, BodyChunk};
+use yaak_models::cookies::apply_cookie_changes;
+use yaak_models::models::{
+    AnyModel, Cookie, CookieJar, HttpRequest, HttpResponseEvent, HttpResponseEventData,
+    HttpSendSettings,
+};
+use yaak_models::models_ops;
+use yaak_models::query_manager::QueryManager;
+use yaak_models::render::render_http_request;
+use yaak_models::util::{ModelPayload, UpdateSource};
+use yaak_templates::{RenderOptions, TemplateCallback};
+
+/// Names inside the VFS, not paths on any disk. Two files because the desktop
+/// keeps two: models in one, blobs in the other.
+const DB_NAME: &str = "yaak.db";
+const BLOB_DB_NAME: &str = "yaak-blobs.db";
+const VFS_NAME: &str = "yaak-idb";
+
+/// What an export made here records as the version that wrote it. The desktop stamps its own
+/// app version; this host has none, and the field is provenance rather than something read
+/// back, so it says what it is.
+const EXPORT_VERSION: &str = "web";
+
+struct Host {
+    queries: QueryManager,
+    blobs: BlobManager,
+    events: mpsc::Receiver<ModelPayload>,
+}
+
+fn lifecycle_host() -> yaak_lifecycle::Host {
+    yaak_lifecycle::Host::owner()
+}
+
+thread_local! {
+    static HOST: RefCell<Option<Host>> = const { RefCell::new(None) };
+}
+
+/* -------------------------------------------------------------------------- */
+/* Errors                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/// What a failed command hands back to JavaScript: a real `Error`, so it
+/// throws like one, with `message` set to the model layer's own text.
+fn js_error(e: impl std::fmt::Display) -> JsValue {
+    js_sys::Error::new(&e.to_string()).into()
+}
+
+type Result<T> = std::result::Result<T, JsValue>;
+
+/* -------------------------------------------------------------------------- */
+/* Boot                                                                        */
+/* -------------------------------------------------------------------------- */
+
+/// Register the IndexedDB-backed VFS and open the database.
+///
+/// Migrations run inside `init_standalone`, exactly as they do for the CLI.
+/// Safe to call more than once; later calls are no-ops.
+#[wasm_bindgen]
+pub async fn boot() -> Result<()> {
+    console_error_panic_hook::set_once();
+
+    if HOST.with(|h| h.borrow().is_some()) {
+        return Ok(());
+    }
+
+    // "Relaxed" means writes land in memory first and are flushed to
+    // IndexedDB shortly after, rather than on every commit. It is the right
+    // trade for a client app: a tab closing mid-flush loses at most the last
+    // few writes, and the alternative (OPFS sync access handles) needs a
+    // dedicated worker per file and is not available everywhere.
+    let cfg = sqlite_wasm_vfs::relaxed_idb::RelaxedIdbCfgBuilder::new()
+        .vfs_name(VFS_NAME)
+        .preload(sqlite_wasm_vfs::relaxed_idb::Preload::All)
+        .build();
+    sqlite_wasm_vfs::relaxed_idb::install::<sqlite_wasm_rs::WasmOsCallback>(&cfg, true)
+        .await
+        .map_err(js_error)?;
+
+    let (queries, blobs, events) =
+        yaak_models::init_standalone(DB_NAME, BLOB_DB_NAME).map_err(js_error)?;
+
+    if let Err(e) = queries.with_tx(|tx| yaak_lifecycle::on_launch(&lifecycle_host(), tx, &blobs)) {
+        web_sys::console::warn_2(&"on_launch hook failed".into(), &js_error(e));
+    }
+
+    HOST.with(|h| *h.borrow_mut() = Some(Host { queries, blobs, events }));
+    Ok(())
+}
+
+fn with_host<T>(f: impl FnOnce(&Host) -> Result<T>) -> Result<T> {
+    HOST.with(|h| {
+        let h = h.borrow();
+        let host = h.as_ref().ok_or_else(|| js_error("yaak-web: call boot() before rpc()"))?;
+        f(host)
+    })
+}
+
+/* -------------------------------------------------------------------------- */
+/* Commands                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/// A command's outcome, plus every model write it caused.
+///
+/// The writes ride along with the result rather than being fetched separately
+/// so the caller can announce them atomically with completion — a tab that
+/// awaits `models_upsert` must see its echo before or with the response, never
+/// after, or the store races the reply.
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct RpcOutcome {
+    result: serde_json::Value,
+    events: Vec<ModelPayload>,
+}
+
+/// Run one command as `label` (the calling tab's identity, which stands in for
+/// the desktop's window label on every write it makes).
+///
+/// The payload shapes match the `Cmd*Req` types in `yaak-rpc-schema`, but are
+/// declared locally and dispatched by name, which is the one place this host
+/// does not share the desktop's guarantees: the desktop builds its router from
+/// the schema, so every command has a handler by construction. Here a renamed
+/// command would surface as a runtime "not a command this host answers".
+///
+/// The fix is `yaak-commands` (the `Host` trait), not more machinery here —
+/// its `models::*` handlers are already this file, typed. Three things have to
+/// give before a wasm host can register them:
+///
+/// 1. `Host: Send + Sync`, which a browser cannot satisfy: there is one thread
+///    and the connection pool is an `Rc`.
+/// 2. `models_delete` reaches for `spawn_blocking`; there is nothing to spawn
+///    onto here.
+/// 3. `yaak-commands` depends on `yaak` and `yaak-plugins`, which pull the HTTP
+///    stack and the Node sidecar and do not build for wasm32.
+///
+/// None of those are hard; they are just not this PR.
+#[wasm_bindgen]
+pub fn rpc(cmd: &str, payload: JsValue, label: &str) -> Result<JsValue> {
+    let source = UpdateSource::from_window_label(label);
+
+    let result = with_host(|host| dispatch(host, cmd, payload, &source))?;
+    let events = with_host(|host| Ok(host.events.try_iter().collect::<Vec<_>>()))?;
+
+    use serde::Serialize as _;
+    RpcOutcome { result, events }
+        .serialize(&serde_wasm_bindgen::Serializer::json_compatible())
+        .map_err(js_error)
+}
+
+fn from_js<T: for<'de> Deserialize<'de>>(payload: JsValue) -> Result<T> {
+    serde_wasm_bindgen::from_value(payload).map_err(js_error)
+}
+
+fn to_json<T: Serialize>(value: T) -> Result<serde_json::Value> {
+    serde_json::to_value(value).map_err(js_error)
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct WorkspaceModelsReq {
+    workspace_id: Option<String>,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct ModelReq {
+    model: AnyModel,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct DuplicateReq {
+    model_type: String,
+    model_id: String,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct WorkspaceIdReq {
+    workspace_id: String,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct RequestIdReq {
+    request_id: String,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct UpsertIntrospectionReq {
+    workspace_id: String,
+    request_id: String,
+    content: Option<String>,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct ExportDataReq {
+    workspace_ids: Vec<String>,
+    include_private_environments: bool,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct ResponseIdReq {
+    response_id: String,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct PersistSendCookiesReq {
+    cookie_jar_id: String,
+    before: Vec<Cookie>,
+    after: Vec<Cookie>,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct InsertResponseEventsReq {
+    response_id: String,
+    workspace_id: String,
+    events: Vec<HttpResponseEventData>,
+}
+
+fn dispatch(
+    host: &Host,
+    cmd: &str,
+    payload: JsValue,
+    source: &UpdateSource,
+) -> Result<serde_json::Value> {
+    match cmd {
+        // The one big read. Same list, same order, and the same lazy
+        // creates (settings, cookie jar, base environment) as
+        // `models_workspace_models` on the desktop — this call is where an
+        // empty database becomes a usable one. Returned as a JSON *string*
+        // because that is what the desktop returns and what the store parses.
+        "models_workspace_models" => {
+            let req: WorkspaceModelsReq = from_js(payload)?;
+            let db = host.queries.connect();
+            let mut list: Vec<AnyModel> = Vec::new();
+
+            list.push(db.get_settings().into());
+            list.extend(db.list_workspaces().map_err(js_error)?.into_iter().map(Into::into));
+            list.extend(db.list_key_values().map_err(js_error)?.into_iter().map(Into::into));
+            // No plugin runtime to resolve these against; the rows are still
+            // the truth about what is installed.
+            list.extend(db.list_plugins().map_err(js_error)?.into_iter().map(Into::into));
+
+            if let Some(wid) = req.workspace_id.as_deref() {
+                let e = js_error;
+                // Opening a workspace is where the rows it is assumed to have get created
+                host.queries
+                    .with_tx(|tx| {
+                        tx.ensure_base_environment(wid)?;
+                        tx.ensure_default_cookie_jar(wid)?;
+                        tx.ensure_workspace_meta(wid)?;
+                        Ok::<(), yaak_models::error::Error>(())
+                    })
+                    .map_err(e)?;
+                list.extend(db.list_cookie_jars(wid).map_err(e)?.into_iter().map(Into::into));
+                list.extend(db.list_environments(wid).map_err(e)?.into_iter().map(Into::into));
+                list.extend(db.list_folders(wid).map_err(e)?.into_iter().map(Into::into));
+                list.extend(db.list_grpc_connections(wid).map_err(e)?.into_iter().map(Into::into));
+                list.extend(db.list_grpc_requests(wid).map_err(e)?.into_iter().map(Into::into));
+                list.extend(db.list_http_requests(wid).map_err(e)?.into_iter().map(Into::into));
+                list.extend(
+                    db.list_http_responses(wid, None).map_err(e)?.into_iter().map(Into::into),
+                );
+                list.extend(
+                    db.list_websocket_connections(wid).map_err(e)?.into_iter().map(Into::into),
+                );
+                list.extend(
+                    db.list_websocket_requests(wid).map_err(e)?.into_iter().map(Into::into),
+                );
+                list.extend(db.list_workspace_metas(wid).map_err(e)?.into_iter().map(Into::into));
+            }
+
+            to_json(serde_json::to_string(&list).map_err(js_error)?)
+        }
+
+        "models_upsert" => {
+            let req: ModelReq = from_js(payload)?;
+            let id = host
+                .queries
+                .with_tx(|tx| models_ops::upsert_model(tx, &host.blobs, req.model, source))
+                .map_err(js_error)?;
+            to_json(id)
+        }
+
+        // Deletes and duplicates cascade, so they run in a transaction, as on
+        // the desktop.
+        "models_delete" => {
+            let req: ModelReq = from_js(payload)?;
+            let id = host
+                .queries
+                .with_tx(|tx| models_ops::delete_model(tx, &host.blobs, req.model, source))
+                .map_err(js_error)?;
+            to_json(id)
+        }
+
+        "models_duplicate" => {
+            let req: DuplicateReq = from_js(payload)?;
+            let id = host
+                .queries
+                .with_tx(|tx| {
+                    models_ops::duplicate_model(tx, &req.model_type, &req.model_id, source)
+                })
+                .map_err(js_error)?;
+            to_json(id)
+        }
+
+        "models_get_settings" => to_json(host.queries.connect().get_settings()),
+
+        "models_get_graphql_introspection" => {
+            let req: RequestIdReq = from_js(payload)?;
+            to_json(host.queries.connect().get_graphql_introspection(&req.request_id))
+        }
+
+        "models_upsert_graphql_introspection" => {
+            let req: UpsertIntrospectionReq = from_js(payload)?;
+            let saved = host
+                .queries
+                .with_tx(|tx| {
+                    tx.upsert_graphql_introspection(
+                        &req.workspace_id,
+                        &req.request_id,
+                        req.content,
+                        source,
+                    )
+                })
+                .map_err(js_error)?;
+            to_json(saved)
+        }
+
+        // Nothing here can open a socket, so no connection ever produced any.
+        "models_grpc_events" | "models_websocket_events" => to_json(Vec::<()>::new()),
+
+        "web_get_http_request" => {
+            let req: RequestIdReq = from_js(payload)?;
+            to_json(host.queries.connect().get_http_request(&req.request_id).map_err(js_error)?)
+        }
+
+        "cmd_get_http_response_events" => {
+            let req: ResponseIdReq = from_js(payload)?;
+            to_json(
+                host.queries
+                    .connect()
+                    .list_http_response_events(&req.response_id)
+                    .map_err(js_error)?,
+            )
+        }
+
+        // The cookies a send set or cleared, applied to the jar as it is *now* rather than
+        // written over it, so an edit made while the send was in flight survives.
+        "web_persist_send_cookies" => {
+            let req: PersistSendCookiesReq = from_js(payload)?;
+            if req.before == req.after {
+                return to_json(());
+            }
+            host.queries
+                .with_tx(|tx| {
+                    let jar = tx.get_cookie_jar(&req.cookie_jar_id)?;
+                    let cookies =
+                        apply_cookie_changes(jar.cookies.clone(), &req.before, &req.after);
+                    tx.upsert_cookie_jar(&CookieJar { cookies, ..jar }, source)
+                })
+                .map_err(js_error)?;
+            to_json(())
+        }
+
+        // The tab's half of the send timeline: the events the proxy streamed back, recorded
+        // under the response they belong to. Same rows the desktop's send task writes, and the
+        // writes fan out to every tab as `model_writes` like any other.
+        "web_insert_http_response_events" => {
+            let req: InsertResponseEventsReq = from_js(payload)?;
+            host.queries
+                .with_tx(|tx| {
+                    for event in req.events {
+                        let model =
+                            HttpResponseEvent::new(&req.response_id, &req.workspace_id, event);
+                        tx.upsert_http_response_event(&model, source)?;
+                    }
+                    Ok::<(), yaak_models::error::Error>(())
+                })
+                .map_err(js_error)?;
+            to_json(())
+        }
+
+        // The same `export_data` the desktop and the CLI call, not a second copy of its
+        // steps. Nothing about what an export *is* is decided here; this host differs only
+        // in what happens to the bytes afterwards, which is the tab's business.
+        "cmd_export_data" => {
+            let req: ExportDataReq = from_js(payload)?;
+            to_json(
+                yaak_models::export::export_data(yaak_models::export::ExportDataParams {
+                    query_manager: &host.queries,
+                    yaak_version: EXPORT_VERSION,
+                    workspace_ids: req.workspace_ids.iter().map(|s| s.as_str()).collect(),
+                    include_private_environments: req.include_private_environments,
+                })
+                .map_err(js_error)?,
+            )
+        }
+
+        "cmd_create_example_workspace" => to_json(
+            yaak_models::example::create_example_workspace(&host.queries, source)
+                .map_err(js_error)?,
+        ),
+
+        "cmd_get_workspace_meta" => {
+            let req: WorkspaceIdReq = from_js(payload)?;
+            let workspace =
+                host.queries.connect().get_workspace(&req.workspace_id).map_err(js_error)?;
+            to_json(
+                host.queries
+                    .with_tx(|tx| tx.ensure_workspace_meta(&workspace.id))
+                    .map_err(js_error)?,
+            )
+        }
+
+        "cmd_delete_all_http_responses" => {
+            let req: RequestIdReq = from_js(payload)?;
+            host.queries
+                .with_tx(|tx| tx.delete_all_http_responses_for_request(&req.request_id, source))
+                .map_err(js_error)?;
+            to_json(())
+        }
+
+        "cmd_delete_send_history" => {
+            let req: WorkspaceIdReq = from_js(payload)?;
+            host.queries
+                .with_tx(|tx| {
+                    tx.delete_all_http_responses_for_workspace(&req.workspace_id, source)?;
+                    tx.delete_all_grpc_connections_for_workspace(&req.workspace_id, source)?;
+                    tx.delete_all_websocket_connections_for_workspace(&req.workspace_id, source)?;
+                    Ok::<(), yaak_models::error::Error>(())
+                })
+                .map_err(js_error)?;
+            to_json(())
+        }
+
+        other => Err(js_error(format!("yaak-web: `{other}` is not a command this host answers"))),
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+/* Preparing a send                                                            */
+/* -------------------------------------------------------------------------- */
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct PrepareHttpSendReq {
+    request_id: String,
+    environment_id: Option<String>,
+    cookie_jar_id: Option<String>,
+}
+
+/// Everything a send needs that lives in the database, resolved and rendered: the desktop's
+/// `HttpSendInputs`, in the shape a tab hands to the proxy and keeps for itself.
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct PreparedHttpSend {
+    /// The request with inherited headers and authentication applied and every template
+    /// rendered. What the proxy sends, and what the response records as its request.
+    request: HttpRequest,
+    settings: HttpSendSettings,
+    /// The `* Setting name=value` timeline lines the desktop writes at the top of a send,
+    /// sources and all. The tab records them before the proxy's own events.
+    setting_events: Vec<HttpResponseEventData>,
+    /// The jar the send starts with, so the tab can write it back with the proxy's changes.
+    cookie_jar: Option<CookieJar>,
+}
+
+/// A template callback for a host with no plugins. Variables render; a function is a clear
+/// refusal naming the function, so the user knows what the request needs rather than seeing
+/// an empty string sent in its place.
+struct NoPluginsCallback;
+
+impl TemplateCallback for NoPluginsCallback {
+    fn run(
+        &self,
+        fn_name: &str,
+        _args: HashMap<String, serde_json::Value>,
+    ) -> impl std::future::Future<Output = yaak_templates::error::Result<String>> + Send {
+        let message = format!(
+            "This request uses the template function \"{fn_name}\", which needs plugins. \
+             Plugins aren't available in the browser yet"
+        );
+        async move { Err(yaak_templates::error::Error::RenderError(message)) }
+    }
+
+    fn transform_arg(
+        &self,
+        _fn_name: &str,
+        _arg_name: &str,
+        arg_value: &str,
+    ) -> yaak_templates::error::Result<String> {
+        Ok(arg_value.to_string())
+    }
+}
+
+/// Resolve and render a request for sending, exactly as the desktop does before it puts the
+/// request on the network: the environment chain, inherited headers and auth, request
+/// settings, the cookie jar. Nothing here touches a socket. What comes back is what the tab
+/// posts to the Yaak server.
+///
+/// Refuses, with a message the user can act on, when the request needs something this host
+/// doesn't have: an authentication plugin, or a template function.
+#[wasm_bindgen]
+pub async fn prepare_http_send(payload: JsValue) -> Result<JsValue> {
+    let req: PrepareHttpSendReq = from_js(payload)?;
+
+    // Everything from the database first, then release the host borrow before rendering.
+    let (request, environment_chain, settings, cookie_jar) = with_host(|host| {
+        let db = host.queries.connect();
+        let request = db.get_http_request(&req.request_id).map_err(js_error)?;
+        let environment_chain = db
+            .resolve_environments(
+                &request.workspace_id,
+                request.folder_id.as_deref(),
+                req.environment_id.as_deref(),
+            )
+            .map_err(js_error)?;
+        let (authentication_type, authentication, _auth_context_id) =
+            db.resolve_auth_for_http_request(&request).map_err(js_error)?;
+        let headers = db.resolve_headers_for_http_request(&request).map_err(js_error)?;
+        let settings = db.resolve_settings_for_http_request(&request).map_err(js_error)?;
+        let cookie_jar = match req.cookie_jar_id.as_deref() {
+            Some(id) => Some(db.get_cookie_jar(id).map_err(js_error)?),
+            None => None,
+        };
+        let request = HttpRequest { authentication_type, authentication, headers, ..request };
+        Ok((request, environment_chain, settings, cookie_jar))
+    })?;
+
+    let rendered = render_http_request(
+        &request,
+        environment_chain,
+        &NoPluginsCallback,
+        &RenderOptions::throw(),
+    )
+    .await
+    .map_err(js_error)?;
+
+    // Authentication is applied by a plugin on the desktop. There is no plugin here, and a
+    // request sent without the auth it asked for is worse than one refused with the reason.
+    let auth_disabled =
+        rendered.authentication.get("disabled").and_then(|v| v.as_bool()) == Some(true);
+    if let Some(auth_type) = rendered.authentication_type.as_deref()
+        && auth_type != "none"
+        && !auth_disabled
+    {
+        return Err(js_error(format!(
+            "This request uses {auth_type} authentication, which needs plugins. \
+             Plugins aren't available in the browser yet"
+        )));
+    }
+
+    let prepared = PreparedHttpSend {
+        request: rendered,
+        settings: HttpSendSettings::from(&settings),
+        setting_events: settings.timeline_events(),
+        cookie_jar,
+    };
+    // JSON-compatible, as `rpc` does: the tab posts this to the proxy with `JSON.stringify`,
+    // and the default serializer's `Map` for the request body would stringify to `{}`.
+    use serde::Serialize as _;
+    prepared.serialize(&serde_wasm_bindgen::Serializer::json_compatible()).map_err(js_error)
+}
+
+/* -------------------------------------------------------------------------- */
+/* Blobs                                                                       */
+/* -------------------------------------------------------------------------- */
+
+/// The bytes stored under an id, or none. Ids are the desktop's: a response's
+/// own id for its body, `{responseId}.request` for the request that produced
+/// it. Bytes cross to JS as a `Uint8Array` rather than through JSON.
+#[wasm_bindgen]
+pub fn blob_get(id: &str) -> Result<Option<Vec<u8>>> {
+    with_host(|host| {
+        let chunks = host.blobs.connect().get_chunks(id).map_err(js_error)?;
+        if chunks.is_empty() {
+            return Ok(None);
+        }
+        Ok(Some(chunks.into_iter().flat_map(|c| c.data).collect()))
+    })
+}
+
+/// Store bytes under an id, replacing anything already there. Chunked the way
+/// the desktop chunks, so a body written here reads back on a desktop that
+/// imports the database, and vice versa.
+#[wasm_bindgen]
+pub fn blob_put(id: &str, bytes: &[u8]) -> Result<()> {
+    const CHUNK: usize = 512 * 1024;
+    with_host(|host| {
+        host.blobs
+            .with_tx(|b| {
+                b.delete_chunks(id)?;
+                for (i, part) in bytes.chunks(CHUNK).enumerate() {
+                    b.insert_chunk(&BodyChunk::new(id, i as i32, part.to_vec()))?;
+                }
+                Ok::<(), yaak_models::error::Error>(())
+            })
+            .map_err(js_error)
+    })
+}
+
+#[wasm_bindgen]
+pub fn blob_delete(id: &str) -> Result<()> {
+    with_host(|host| host.blobs.with_tx(|b| b.delete_chunks(id)).map_err(js_error))
+}
diff --git a/crates/yaak-ws/Cargo.toml b/crates/yaak-ws/Cargo.toml
new file mode 100644
index 0000000..c574ae8
--- /dev/null
+++ b/crates/yaak-ws/Cargo.toml
@@ -0,0 +1,24 @@
+[package]
+name = "yaak-ws"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+futures-util = "0.3.31"
+http = "1"
+log = { workspace = true }
+md5 = "0.8.0"
+serde = { workspace = true, features = ["derive"] }
+url = "2"
+serde_json = { workspace = true }
+thiserror = { workspace = true }
+tokio = { workspace = true, features = ["macros", "time", "test-util", "rt"] }
+tokio-tungstenite = { version = "0.26.2", default-features = false, features = [
+  "rustls-tls-native-roots",
+  "connect",
+] }
+yaak-http = { workspace = true }
+yaak-tls = { workspace = true }
+yaak-models = { workspace = true }
+yaak-templates = { workspace = true }
diff --git a/crates/yaak-ws/index.ts b/crates/yaak-ws/index.ts
new file mode 100644
index 0000000..ead0cb0
--- /dev/null
+++ b/crates/yaak-ws/index.ts
@@ -0,0 +1,43 @@
+import { platform } from "@yaakapp-internal/platform";
+import { WebsocketConnection } from "@yaakapp-internal/models";
+
+export function deleteWebsocketConnections(requestId: string) {
+  return platform.rpc("cmd_ws_delete_connections", {
+    requestId,
+  });
+}
+
+export function connectWebsocket({
+  requestId,
+  environmentId,
+  cookieJarId,
+}: {
+  requestId: string;
+  environmentId: string | null;
+  cookieJarId: string | null;
+}) {
+  return platform.rpc("cmd_ws_connect", {
+    requestId,
+    environmentId,
+    cookieJarId,
+  }) as Promise<WebsocketConnection>;
+}
+
+export function closeWebsocket({ connectionId }: { connectionId: string }) {
+  return platform.rpc("cmd_ws_close", {
+    connectionId,
+  });
+}
+
+export function sendWebsocket({
+  connectionId,
+  environmentId,
+}: {
+  connectionId: string;
+  environmentId: string | null;
+}) {
+  return platform.rpc("cmd_ws_send", {
+    connectionId,
+    environmentId,
+  });
+}
diff --git a/crates/yaak-ws/package.json b/crates/yaak-ws/package.json
new file mode 100644
index 0000000..075582a
--- /dev/null
+++ b/crates/yaak-ws/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/ws",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/crates/yaak-ws/src/connect.rs b/crates/yaak-ws/src/connect.rs
new file mode 100644
index 0000000..1c282a1
--- /dev/null
+++ b/crates/yaak-ws/src/connect.rs
@@ -0,0 +1,60 @@
+use crate::error::Result;
+use http::HeaderMap;
+use log::info;
+use std::sync::Arc;
+use tokio::net::TcpStream;
+use tokio_tungstenite::tungstenite::client::IntoClientRequest;
+use tokio_tungstenite::tungstenite::handshake::client::Response;
+use tokio_tungstenite::tungstenite::http::HeaderValue;
+use tokio_tungstenite::tungstenite::protocol::WebSocketConfig;
+use tokio_tungstenite::{
+    Connector, MaybeTlsStream, WebSocketStream, connect_async_tls_with_config,
+};
+use yaak_tls::{ClientCertificateConfig, get_tls_config};
+
+// Enabling ALPN breaks websocket requests
+const WITH_ALPN: bool = false;
+
+pub async fn ws_connect(
+    url: &str,
+    headers: HeaderMap<HeaderValue>,
+    validate_certificates: bool,
+    client_cert: Option<ClientCertificateConfig>,
+    request_message_size: i32,
+) -> Result<(WebSocketStream<MaybeTlsStream<TcpStream>>, Response)> {
+    info!("Connecting to WS {url}");
+    let tls_config = get_tls_config(validate_certificates, WITH_ALPN, client_cert.clone())?;
+
+    let mut req = url.into_client_request()?;
+    let req_headers = req.headers_mut();
+    for (name, value) in headers {
+        if let Some(name) = name {
+            req_headers.insert(name, value);
+        }
+    }
+
+    let (stream, response) = connect_async_tls_with_config(
+        req,
+        Some(websocket_config(request_message_size)),
+        false,
+        Some(Connector::Rustls(Arc::new(tls_config))),
+    )
+    .await?;
+
+    info!(
+        "Connected to WS {url} validate_certificates={} client_cert={}",
+        validate_certificates,
+        client_cert.is_some()
+    );
+
+    Ok((stream, response))
+}
+
+fn websocket_config(request_message_size: i32) -> WebSocketConfig {
+    let max_message_size = message_size_limit(request_message_size);
+    WebSocketConfig::default().max_message_size(max_message_size).max_frame_size(max_message_size)
+}
+
+pub(crate) fn message_size_limit(setting: i32) -> Option<usize> {
+    setting.try_into().ok().filter(|limit| *limit > 0)
+}
diff --git a/crates/yaak-ws/src/error.rs b/crates/yaak-ws/src/error.rs
new file mode 100644
index 0000000..1403633
--- /dev/null
+++ b/crates/yaak-ws/src/error.rs
@@ -0,0 +1,32 @@
+use serde::{Serialize, Serializer};
+use thiserror::Error;
+use tokio_tungstenite::tungstenite;
+
+#[derive(Error, Debug)]
+pub enum Error {
+    #[error("{0}")]
+    WebSocketErr(#[from] tungstenite::Error),
+
+    #[error(transparent)]
+    ModelError(#[from] yaak_models::error::Error),
+
+    #[error(transparent)]
+    TemplateError(#[from] yaak_templates::error::Error),
+
+    #[error(transparent)]
+    TlsError(#[from] yaak_tls::error::Error),
+
+    #[error("{0}")]
+    GenericError(String),
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak-ws/src/lib.rs b/crates/yaak-ws/src/lib.rs
new file mode 100644
index 0000000..30eade8
--- /dev/null
+++ b/crates/yaak-ws/src/lib.rs
@@ -0,0 +1,12 @@
+mod connect;
+pub mod error;
+pub mod manager;
+pub mod render;
+
+pub use connect::ws_connect;
+pub use manager::WebsocketManager;
+pub use render::render_websocket_request;
+
+// Re-export http types needed by consumers
+pub use http::HeaderMap;
+pub use tokio_tungstenite::tungstenite::http::HeaderValue;
diff --git a/crates/yaak-ws/src/manager.rs b/crates/yaak-ws/src/manager.rs
new file mode 100644
index 0000000..76f5a20
--- /dev/null
+++ b/crates/yaak-ws/src/manager.rs
@@ -0,0 +1,121 @@
+use crate::connect::{message_size_limit, ws_connect};
+use crate::error::Error::GenericError;
+use crate::error::Result;
+use futures_util::stream::SplitSink;
+use futures_util::{SinkExt, StreamExt};
+use http::HeaderMap;
+use log::{debug, info, warn};
+use std::collections::HashMap;
+use std::sync::Arc;
+use std::time::Duration;
+use tokio::net::TcpStream;
+use tokio::sync::{Mutex, mpsc};
+use tokio_tungstenite::tungstenite::Message;
+use tokio_tungstenite::tungstenite::handshake::client::Response;
+use tokio_tungstenite::tungstenite::http::HeaderValue;
+use tokio_tungstenite::{MaybeTlsStream, WebSocketStream};
+use yaak_tls::ClientCertificateConfig;
+
+type WebsocketSink = SplitSink<WebSocketStream<MaybeTlsStream<TcpStream>>, Message>;
+
+struct WebsocketConnection {
+    max_message_size: Option<usize>,
+    sink: WebsocketSink,
+}
+
+#[derive(Clone)]
+pub struct WebsocketManager {
+    connections: Arc<Mutex<HashMap<String, WebsocketConnection>>>,
+    read_tasks: Arc<Mutex<HashMap<String, tokio::task::JoinHandle<()>>>>,
+}
+
+impl WebsocketManager {
+    pub fn new() -> Self {
+        WebsocketManager { connections: Default::default(), read_tasks: Default::default() }
+    }
+
+    pub async fn connect(
+        &mut self,
+        id: &str,
+        url: &str,
+        headers: HeaderMap<HeaderValue>,
+        receive_tx: mpsc::Sender<Message>,
+        validate_certificates: bool,
+        client_cert: Option<ClientCertificateConfig>,
+        request_message_size: i32,
+    ) -> Result<Response> {
+        let tx = receive_tx.clone();
+        let max_message_size = message_size_limit(request_message_size);
+
+        let (stream, response) =
+            ws_connect(url, headers, validate_certificates, client_cert, request_message_size)
+                .await?;
+        let (write, mut read) = stream.split();
+
+        self.connections
+            .lock()
+            .await
+            .insert(id.to_string(), WebsocketConnection { max_message_size, sink: write });
+
+        let handle = {
+            let connection_id = id.to_string();
+            let connections = self.connections.clone();
+            let read_tasks = self.read_tasks.clone();
+            tokio::task::spawn(async move {
+                while let Some(msg) = read.next().await {
+                    match msg {
+                        Err(e) => {
+                            warn!("Broken websocket connection: {}", e);
+                            break;
+                        }
+                        Ok(message) => tx.send(message).await.unwrap(),
+                    }
+                }
+                debug!("Connection {} closed", connection_id);
+                connections.lock().await.remove(&connection_id);
+                read_tasks.lock().await.remove(&connection_id);
+            })
+        };
+
+        self.read_tasks.lock().await.insert(id.to_string(), handle);
+
+        Ok(response)
+    }
+
+    pub async fn send(&mut self, id: &str, msg: Message) -> Result<()> {
+        let mut connections = self.connections.lock().await;
+        let connection = match connections.get_mut(id) {
+            None => return Ok(()),
+            Some(c) => c,
+        };
+        if let Some(limit) = connection.max_message_size {
+            let message_size = msg.len();
+            if message_size > limit {
+                return Err(GenericError(format!(
+                    "WebSocket message too large: found {message_size} bytes, the limit is {limit} bytes"
+                )));
+            }
+        }
+        connection.sink.send(msg).await?;
+        Ok(())
+    }
+
+    pub async fn close(&mut self, id: &str) -> Result<()> {
+        info!("Closing websocket");
+        if let Some(mut connection) = self.connections.lock().await.remove(id) {
+            // Wait a maximum of 1 second for the connection to close
+            if let Err(e) = connection.sink.close().await {
+                warn!("Failed to close websocket connection {e:?}");
+            };
+        }
+
+        // Wait at short time for the server to close the connection, then stop
+        // reading.
+        tokio::time::sleep(Duration::from_millis(500)).await;
+        if let Some(handle) = self.read_tasks.lock().await.remove(id) {
+            handle.abort();
+        }
+
+        Ok(())
+    }
+}
diff --git a/crates/yaak-ws/src/render.rs b/crates/yaak-ws/src/render.rs
new file mode 100644
index 0000000..151b41f
--- /dev/null
+++ b/crates/yaak-ws/src/render.rs
@@ -0,0 +1,80 @@
+use crate::error::Result;
+use log::info;
+use serde_json::Value;
+use std::collections::BTreeMap;
+use yaak_models::models::{Environment, HttpRequestHeader, HttpUrlParameter, WebsocketRequest};
+use yaak_models::render::make_vars_hashmap;
+use yaak_templates::{RenderOptions, TemplateCallback, parse_and_render, render_json_value_raw};
+
+pub async fn render_websocket_request<T: TemplateCallback>(
+    r: &WebsocketRequest,
+    environment_chain: Vec<Environment>,
+    cb: &T,
+    opt: &RenderOptions,
+) -> Result<WebsocketRequest> {
+    let vars = &make_vars_hashmap(environment_chain);
+
+    let mut url_parameters = Vec::new();
+    for p in r.url_parameters.clone() {
+        if !p.enabled {
+            continue;
+        }
+        url_parameters.push(HttpUrlParameter {
+            enabled: p.enabled,
+            name: parse_and_render(&p.name, vars, cb, opt).await?,
+            value: parse_and_render(&p.value, vars, cb, opt).await?,
+            id: p.id,
+        })
+    }
+
+    let mut headers = Vec::new();
+    for p in r.headers.clone() {
+        if !p.enabled {
+            continue;
+        }
+        headers.push(HttpRequestHeader {
+            enabled: p.enabled,
+            name: parse_and_render(&p.name, vars, cb, opt).await?,
+            value: parse_and_render(&p.value, vars, cb, opt).await?,
+            id: p.id,
+        })
+    }
+
+    let authentication = {
+        let mut disabled = false;
+        let mut auth = BTreeMap::new();
+        match r.authentication.get("disabled") {
+            Some(Value::Bool(true)) => {
+                disabled = true;
+            }
+            Some(Value::String(tmpl)) => {
+                disabled = parse_and_render(tmpl.as_str(), vars, cb, &opt)
+                    .await
+                    .unwrap_or_default()
+                    .is_empty();
+                info!(
+                    "Rendering authentication.disabled as a template: {disabled} from \"{tmpl}\""
+                );
+            }
+            _ => {}
+        }
+        if disabled {
+            auth.insert("disabled".to_string(), Value::Bool(true));
+        } else {
+            for (k, v) in r.authentication.clone() {
+                if k == "disabled" {
+                    auth.insert(k, Value::Bool(false));
+                } else {
+                    auth.insert(k, render_json_value_raw(v, vars, cb, &opt).await?);
+                }
+            }
+        }
+        auth
+    };
+
+    let url = parse_and_render(r.url.as_str(), vars, cb, opt).await?;
+
+    let message = parse_and_render(&r.message.clone(), vars, cb, opt).await?;
+
+    Ok(WebsocketRequest { url, url_parameters, headers, authentication, message, ..r.to_owned() })
+}
diff --git a/crates/yaak/Cargo.toml b/crates/yaak/Cargo.toml
new file mode 100644
index 0000000..dadade2
--- /dev/null
+++ b/crates/yaak/Cargo.toml
@@ -0,0 +1,28 @@
+[package]
+name = "yaak"
+version = "0.1.0"
+edition = "2024"
+publish = false
+
+[dependencies]
+async-trait = "0.1"
+base64 = "0.22.1" # For carrying body chunks over a text-only plugin transport
+log = { workspace = true }
+md5 = "0.8.0"
+sha2 = { workspace = true }
+chrono = { workspace = true }
+serde_json = { workspace = true }
+thiserror = { workspace = true }
+tokio = { workspace = true, features = ["sync", "rt"] }
+yaak-http = { workspace = true }
+yaak-core = { workspace = true }
+yaak-crypto = { workspace = true }
+yaak-models = { workspace = true }
+yaak-plugins = { workspace = true }
+yaak-templates = { workspace = true }
+yaak-tls = { workspace = true }
+
+[dev-dependencies]
+rusqlite = { version = "0.38", features = ["bundled"] }
+tempfile = "3"
+tokio = { workspace = true, features = ["macros", "rt-multi-thread"] }
diff --git a/crates/yaak/src/error.rs b/crates/yaak/src/error.rs
new file mode 100644
index 0000000..7b14c7a
--- /dev/null
+++ b/crates/yaak/src/error.rs
@@ -0,0 +1,21 @@
+use thiserror::Error;
+
+#[derive(Debug, Error)]
+pub enum Error {
+    #[error(transparent)]
+    Send(#[from] crate::send::SendHttpRequestError),
+
+    #[error(transparent)]
+    Model(#[from] yaak_models::error::Error),
+
+    #[error(transparent)]
+    Plugin(#[from] yaak_plugins::error::Error),
+
+    #[error("I/O error: {0}")]
+    Io(#[from] std::io::Error),
+
+    #[error("JSON error: {0}")]
+    Json(#[from] serde_json::Error),
+}
+
+pub type Result<T> = std::result::Result<T, Error>;
diff --git a/crates/yaak/src/import.rs b/crates/yaak/src/import.rs
new file mode 100644
index 0000000..6d66f5f
--- /dev/null
+++ b/crates/yaak/src/import.rs
@@ -0,0 +1,3019 @@
+use crate::Result;
+use chrono::Utc;
+use log::info;
+use serde_json::Value;
+use sha2::{Digest, Sha256};
+use std::collections::{BTreeMap, BTreeSet};
+use yaak_models::client_db::{ClientDb, WriteDb};
+use yaak_models::models::{
+    AnyModel, DEFAULT_REQUEST_MESSAGE_SIZE, Environment, Folder, GrpcRequest, HttpRequest,
+    ImportSource, ImportSourceResource, UpsertModelInfo, WebsocketRequest, Workspace,
+};
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::{
+    BatchUpsertResult, ImportConflictResolution, ImportDestination, ImportOrigin, ImportPlan,
+    ImportPlanAction, ImportPlanItem, ImportPlanReason, ImportPlanWarning, ImportResourceType,
+    UpdateSource,
+};
+use yaak_plugins::events::{ImportResources, PluginContext};
+use yaak_plugins::manager::PluginManager;
+
+pub struct PlanImportDataParams<'a> {
+    pub query_manager: &'a QueryManager,
+    pub plugin_manager: &'a PluginManager,
+    pub plugin_context: &'a PluginContext,
+    pub destination: ImportDestination,
+    pub contents: &'a str,
+    pub origin: Option<ImportOrigin>,
+}
+
+/// Parse importer output and turn it into a commit-ready plan without mutating the database.
+pub async fn plan_import_data(params: PlanImportDataParams<'_>) -> Result<ImportPlan> {
+    let import_result =
+        params.plugin_manager.import_data(params.plugin_context, params.contents).await?;
+
+    plan_import_resources(
+        params.query_manager,
+        import_result.importer,
+        params.destination,
+        import_result.resources,
+        import_result.source_keys,
+        params.origin,
+    )
+}
+
+/// Remap parsed importer resources into their selected destination.
+///
+/// Every imported model gets a fresh ID. This prevents an import from accidentally updating an
+/// existing model and also makes the plan safe to inspect before it is committed.
+pub fn plan_import_resources(
+    query_manager: &QueryManager,
+    importer: String,
+    destination: ImportDestination,
+    resources: ImportResources,
+    source_keys: Option<BTreeMap<String, String>>,
+    origin: Option<ImportOrigin>,
+) -> Result<ImportPlan> {
+    let mut warnings = Vec::new();
+    validate_destination(query_manager, &destination)?;
+
+    let plugin_keys = source_keys.unwrap_or_default();
+    // Source keys and merge decisions describe the document as the importer produced it, not as
+    // this destination reshapes it, so keep the original around.
+    let original = resources.clone();
+
+    let source_folder_ids = resources.folders.iter().map(|v| v.id.clone()).collect::<BTreeSet<_>>();
+    let mut folder_ids = BTreeMap::new();
+    for folder in &resources.folders {
+        folder_ids.insert(folder.id.clone(), Folder::generate_id());
+    }
+
+    let mut workspace_ids = BTreeMap::new();
+    let mut workspaces = Vec::new();
+    let (default_workspace_id, target_folder_id) = match &destination {
+        ImportDestination::NewWorkspace => {
+            for source in &resources.workspaces {
+                let mut workspace = source.clone();
+                workspace.id = Workspace::generate_id();
+                workspace_ids.insert(source.id.clone(), workspace.id.clone());
+                workspaces.push(workspace);
+            }
+
+            if workspaces.is_empty() {
+                let workspace = Workspace {
+                    id: Workspace::generate_id(),
+                    model: "workspace".to_string(),
+                    name: format!("{} Import", display_importer_name(&importer)),
+                    setting_follow_redirects: true,
+                    setting_request_message_size: DEFAULT_REQUEST_MESSAGE_SIZE,
+                    setting_validate_certificates: true,
+                    setting_send_cookies: true,
+                    setting_store_cookies: true,
+                    ..Default::default()
+                };
+                workspaces.push(workspace);
+            }
+
+            // Two workspaces of the same name are indistinguishable in the sidebar, and importing
+            // a document a second time is the usual way to end up with a pair.
+            let mut taken = query_manager
+                .connect()
+                .list_workspaces()?
+                .into_iter()
+                .map(|w| w.name)
+                .collect::<Vec<_>>();
+            for workspace in &mut workspaces {
+                let unique = unique_name(&workspace.name, &taken);
+                workspace.name = unique.clone();
+                taken.push(unique);
+            }
+
+            (workspaces[0].id.clone(), None)
+        }
+        ImportDestination::ExistingWorkspace { workspace_id, folder_id } => {
+            for source in &resources.workspaces {
+                workspace_ids.insert(source.id.clone(), workspace_id.clone());
+            }
+            if !resources.workspaces.is_empty() {
+                let destination_workspace = query_manager.connect().get_workspace(workspace_id)?;
+                let skipped_fields = resources
+                    .workspaces
+                    .iter()
+                    .flat_map(|source| {
+                        workspace_fields_not_imported(source, &destination_workspace)
+                    })
+                    .collect::<BTreeSet<_>>();
+                if !skipped_fields.is_empty() {
+                    let source = if resources.workspaces.len() == 1 {
+                        resources.workspaces[0].name.clone()
+                    } else {
+                        format!("{} imported workspaces", resources.workspaces.len())
+                    };
+                    warnings.push(ImportPlanWarning::info(
+                        "Workspace settings skipped",
+                        format!("{source} · {}", display_list(&skipped_fields)),
+                    ));
+                }
+            }
+            (workspace_id.clone(), folder_id.clone())
+        }
+    };
+
+    let resolve_workspace_id = |source_id: &str| {
+        workspace_ids.get(source_id).cloned().unwrap_or_else(|| default_workspace_id.clone())
+    };
+
+    let resolve_folder_id = |source_id: Option<String>| match source_id {
+        Some(source_id) if source_folder_ids.contains(&source_id) => {
+            folder_ids.get(&source_id).cloned()
+        }
+        _ => target_folder_id.clone(),
+    };
+
+    let folders = resources
+        .folders
+        .into_iter()
+        .map(|mut folder| {
+            folder.id = folder_ids.get(&folder.id).cloned().unwrap_or_else(Folder::generate_id);
+            folder.workspace_id = resolve_workspace_id(&folder.workspace_id);
+            folder.folder_id = resolve_folder_id(folder.folder_id);
+            folder
+        })
+        .collect();
+
+    let http_requests = resources
+        .http_requests
+        .into_iter()
+        .map(|mut request| {
+            request.id = HttpRequest::generate_id();
+            request.workspace_id = resolve_workspace_id(&request.workspace_id);
+            request.folder_id = resolve_folder_id(request.folder_id);
+            request
+        })
+        .collect();
+
+    let grpc_requests = resources
+        .grpc_requests
+        .into_iter()
+        .map(|mut request| {
+            request.id = GrpcRequest::generate_id();
+            request.workspace_id = resolve_workspace_id(&request.workspace_id);
+            request.folder_id = resolve_folder_id(request.folder_id);
+            request
+        })
+        .collect();
+
+    let websocket_requests = resources
+        .websocket_requests
+        .into_iter()
+        .map(|mut request| {
+            request.id = WebsocketRequest::generate_id();
+            request.workspace_id = resolve_workspace_id(&request.workspace_id);
+            request.folder_id = resolve_folder_id(request.folder_id);
+            request
+        })
+        .collect();
+
+    let importing_into_existing =
+        matches!(destination, ImportDestination::ExistingWorkspace { .. });
+    let mut separated_base_environments = Vec::new();
+    let mut converted_duplicate_base_environment = false;
+    let mut converted_duplicate_folder_environment = false;
+    let mut base_environment_workspaces = BTreeSet::new();
+    let mut folder_environment_ids = BTreeSet::new();
+    let environments = resources
+        .environments
+        .into_iter()
+        .map(|mut environment| {
+            environment.id = Environment::generate_id();
+            environment.workspace_id = resolve_workspace_id(&environment.workspace_id);
+
+            match (environment.parent_model.as_str(), environment.parent_id.clone()) {
+                ("workspace", _) if importing_into_existing => {
+                    environment.parent_model = "environment".to_string();
+                    environment.parent_id = None;
+                    let source_name = environment.name.clone();
+                    environment.name = format!("{} (Imported)", environment.name);
+                    separated_base_environments.push((
+                        source_name,
+                        environment.name.clone(),
+                        environment.variables.len(),
+                    ));
+                }
+                ("workspace", _) => {
+                    environment.parent_id = None;
+                    if !base_environment_workspaces.insert(environment.workspace_id.clone()) {
+                        environment.parent_model = "environment".to_string();
+                        environment.name = format!("{} (Imported)", environment.name);
+                        converted_duplicate_base_environment = true;
+                    }
+                }
+                ("folder", Some(parent_id)) if source_folder_ids.contains(&parent_id) => {
+                    environment.parent_id = folder_ids.get(&parent_id).cloned();
+                    if let Some(parent_id) = &environment.parent_id
+                        && !folder_environment_ids.insert(parent_id.clone())
+                    {
+                        environment.parent_model = "environment".to_string();
+                        environment.parent_id = None;
+                        converted_duplicate_folder_environment = true;
+                    }
+                }
+                ("folder", _) => {
+                    // Never attach an imported folder environment to an existing folder: the model
+                    // layer permits only one and would otherwise delete the destination's value.
+                    environment.parent_model = "environment".to_string();
+                    environment.parent_id = None;
+                }
+                ("environment", _) => {
+                    environment.parent_id = None;
+                }
+                _ => {
+                    environment.parent_model = "environment".to_string();
+                    environment.parent_id = None;
+                }
+            }
+
+            environment
+        })
+        .collect();
+
+    for (source_name, imported_name, variable_count) in separated_base_environments {
+        let variables = if variable_count == 1 { "variable" } else { "variables" };
+        warnings.push(ImportPlanWarning::info(
+            "Base environment kept separate",
+            format!("{source_name} → {imported_name} · {variable_count} {variables}"),
+        ));
+    }
+    if converted_duplicate_base_environment {
+        warnings.push(ImportPlanWarning::info(
+            "Base environments separated",
+            "Only the first remains the base environment",
+        ));
+    }
+    if converted_duplicate_folder_environment {
+        warnings.push(ImportPlanWarning::info(
+            "Folder environments separated",
+            "Only the first remains attached to each folder",
+        ));
+    }
+
+    let resources = BatchUpsertResult {
+        workspaces,
+        environments,
+        folders,
+        http_requests,
+        grpc_requests,
+        websocket_requests,
+    };
+
+    let mut plan = ImportPlan {
+        importer,
+        destination,
+        source_keys: assign_source_keys(&resources, &original, &plugin_keys),
+        resources,
+        warnings,
+        items: Vec::new(),
+        origin,
+    };
+    merge_with_linked_source(query_manager, &mut plan, &original)?;
+    warn_if_imported_elsewhere(&query_manager.connect(), &mut plan)?;
+    Ok(plan)
+}
+
+/// A document that already produced a workspace can be merged back into it. Importing it anywhere
+/// else copies it instead, which is worth saying before the user finds two of everything.
+fn warn_if_imported_elsewhere(db: &ClientDb, plan: &mut ImportPlan) -> Result<()> {
+    let destination_id = match &plan.destination {
+        ImportDestination::ExistingWorkspace { workspace_id, .. } => Some(workspace_id.as_str()),
+        ImportDestination::NewWorkspace => None,
+    };
+    let incoming = plan.source_keys.values().collect::<BTreeSet<_>>();
+
+    let mut names = BTreeSet::new();
+    for workspace in db.list_workspaces()? {
+        if Some(workspace.id.as_str()) == destination_id {
+            continue;
+        }
+        for source in db.list_import_sources(&workspace.id)? {
+            let overlaps = db
+                .list_import_source_resources(&source.id)?
+                .iter()
+                .any(|row| incoming.contains(&row.source_key));
+            if overlaps {
+                names.insert(workspace.name.clone());
+                break;
+            }
+        }
+    }
+
+    if names.is_empty() {
+        return Ok(());
+    }
+    let names = names.iter().map(String::as_str).collect::<BTreeSet<_>>();
+    plan.warnings.push(ImportPlanWarning::warning(
+        format!("Already imported into {}", display_list(&names)),
+        "Importing here makes a second copy",
+    ));
+    Ok(())
+}
+
+/// Commit a previously prepared plan in one transaction, applying only its selected items.
+pub fn commit_import_plan(
+    query_manager: &QueryManager,
+    plan: ImportPlan,
+) -> Result<BatchUpsertResult> {
+    validate_plan(&plan)?;
+
+    info!("Committing staged import from {}", plan.importer);
+    query_manager.with_tx(|tx| {
+        validate_destination_db(tx, &plan.destination)?;
+        commit_plan_in_tx(tx, plan)
+    })
+}
+
+fn commit_plan_in_tx(db: &WriteDb, plan: ImportPlan) -> Result<BatchUpsertResult> {
+    let items: BTreeMap<String, ImportPlanItem> =
+        plan.items.iter().map(|item| (item.model_id.clone(), item.clone())).collect();
+
+    // A resource without an item (workspaces, plans from older callers) always applies.
+    // A selected keep-local item is an explicit request to revert the local edits.
+    let applies = |id: &str| match items.get(id) {
+        None => true,
+        Some(item) => match item.action {
+            ImportPlanAction::Create
+            | ImportPlanAction::Update
+            | ImportPlanAction::KeepLocal
+            | ImportPlanAction::Ignored => item.selected,
+            ImportPlanAction::Conflict => {
+                item.resolution == Some(ImportConflictResolution::TakeSource)
+            }
+            ImportPlanAction::Delete | ImportPlanAction::Unchanged => false,
+        },
+    };
+
+    // A folder that will not exist takes its planned descendants with it: nothing can be
+    // created inside it.
+    let is_new_folder = |id: &str| {
+        items.get(id).is_some_and(|i| {
+            matches!(i.action, ImportPlanAction::Create | ImportPlanAction::Ignored)
+        })
+    };
+    let mut missing_folders: BTreeSet<String> = plan
+        .resources
+        .folders
+        .iter()
+        .filter(|f| is_new_folder(&f.id) && !applies(&f.id))
+        .map(|f| f.id.clone())
+        .collect();
+    loop {
+        let before = missing_folders.len();
+        for folder in &plan.resources.folders {
+            if let Some(parent_id) = &folder.folder_id
+                && missing_folders.contains(parent_id)
+            {
+                missing_folders.insert(folder.id.clone());
+            }
+        }
+        if missing_folders.len() == before {
+            break;
+        }
+    }
+
+    let folder_available = |folder_id: &Option<String>| match folder_id {
+        Some(id) => !missing_folders.contains(id),
+        None => true,
+    };
+
+    let resources = &plan.resources;
+    let upserted = db.batch_upsert(
+        resources.workspaces.clone(),
+        resources
+            .environments
+            .iter()
+            .filter(|v| applies(&v.id))
+            .filter(|v| v.parent_model != "folder" || folder_available(&v.parent_id))
+            .cloned()
+            .collect(),
+        resources
+            .folders
+            .iter()
+            .filter(|v| applies(&v.id) && !missing_folders.contains(&v.id))
+            .cloned()
+            .collect(),
+        resources
+            .http_requests
+            .iter()
+            .filter(|v| applies(&v.id) && folder_available(&v.folder_id))
+            .cloned()
+            .collect(),
+        resources
+            .grpc_requests
+            .iter()
+            .filter(|v| applies(&v.id) && folder_available(&v.folder_id))
+            .cloned()
+            .collect(),
+        resources
+            .websocket_requests
+            .iter()
+            .filter(|v| applies(&v.id) && folder_available(&v.folder_id))
+            .cloned()
+            .collect(),
+        &UpdateSource::Import,
+    )?;
+
+    let selected_deletes = plan
+        .items
+        .iter()
+        .filter(|i| i.action == ImportPlanAction::Delete && i.selected)
+        .collect::<Vec<_>>();
+    // Folders last so their cascade only has to cover what was not deleted explicitly.
+    for item in selected_deletes.iter().filter(|i| i.model != ImportResourceType::Folder) {
+        delete_existing_model(db, item.model, &item.model_id)?;
+    }
+    for item in selected_deletes.iter().filter(|i| i.model == ImportResourceType::Folder) {
+        delete_existing_model(db, item.model, &item.model_id)?;
+    }
+
+    record_import_source(db, &plan, &items, &upserted)?;
+
+    Ok(upserted)
+}
+
+/// A folder deletion may have already cascaded over the model, so absent models are skipped.
+fn delete_existing_model(db: &WriteDb, resource: ImportResourceType, id: &str) -> Result<()> {
+    use ImportResourceType::*;
+    let source = &UpdateSource::Import;
+    match resource {
+        Environment => {
+            if db.get_environment(id).is_ok() {
+                db.delete_environment_by_id(id, source)?;
+            }
+        }
+        Folder => {
+            if db.get_folder(id).is_ok() {
+                db.delete_folder_by_id(id, source)?;
+            }
+        }
+        HttpRequest => {
+            if db.get_http_request(id).is_ok() {
+                db.delete_http_request_by_id(id, source)?;
+            }
+        }
+        GrpcRequest => {
+            if db.get_grpc_request(id).is_ok() {
+                db.delete_grpc_request_by_id(id, source)?;
+            }
+        }
+        WebsocketRequest => {
+            if db.get_websocket_request(id).is_ok() {
+                db.delete_websocket_request_by_id(id, source)?;
+            }
+        }
+        // The destination workspace is never a plan item, so there is nothing to delete
+        Workspace => {}
+    }
+    Ok(())
+}
+
+/// Link the committed workspace to the import's source and record, per source key, whether the
+/// user wants that resource and which version of it they last decided on.
+///
+/// Hashes advance for everything the user decided on this round — applied items and keep-mine
+/// conflicts alike — while deselected updates and deletions keep their old hash so they are
+/// offered again next time. A resource the user turned down is remembered as a row without a
+/// model, so it is neither re-offered nor resurrected.
+fn record_import_source(
+    db: &WriteDb,
+    plan: &ImportPlan,
+    items: &BTreeMap<String, ImportPlanItem>,
+    upserted: &BatchUpsertResult,
+) -> Result<()> {
+    let Some(origin) = &plan.origin else {
+        return Ok(());
+    };
+
+    let workspace_id = match &plan.destination {
+        ImportDestination::ExistingWorkspace { workspace_id, .. } => workspace_id.clone(),
+        ImportDestination::NewWorkspace => match upserted.workspaces.first() {
+            Some(workspace) => workspace.id.clone(),
+            None => return Ok(()),
+        },
+    };
+
+    let incoming_keys: BTreeSet<String> = plan.source_keys.values().cloned().collect();
+    let existing =
+        match resolve_linked_source(db, &workspace_id, &plan.importer, origin, &incoming_keys)? {
+            LinkedSource::Linked(source) => Some(source),
+            LinkedSource::Ambiguous(_) | LinkedSource::Unlinked => None,
+        };
+    let import_source = db.upsert_import_source(
+        &ImportSource {
+            id: existing.map(|s| s.id).unwrap_or_default(),
+            workspace_id,
+            importer: plan.importer.clone(),
+            origin: origin.origin.clone(),
+            origin_label: origin.label.clone(),
+            last_imported_at: Utc::now().naive_utc(),
+            ..Default::default()
+        },
+        &UpdateSource::Import,
+    )?;
+
+    let mut committed: BTreeMap<&str, String> = BTreeMap::new();
+    for v in &upserted.environments {
+        committed.insert(&v.id, content_hash(serde_json::to_value(v)?));
+    }
+    for v in &upserted.folders {
+        committed.insert(&v.id, content_hash(serde_json::to_value(v)?));
+    }
+    for v in &upserted.http_requests {
+        committed.insert(&v.id, content_hash(serde_json::to_value(v)?));
+    }
+    for v in &upserted.grpc_requests {
+        committed.insert(&v.id, content_hash(serde_json::to_value(v)?));
+    }
+    for v in &upserted.websocket_requests {
+        committed.insert(&v.id, content_hash(serde_json::to_value(v)?));
+    }
+
+    let write_row = |model_id: &str,
+                     resource: ImportResourceType,
+                     incoming: &dyn Fn() -> Result<Value>|
+     -> Result<()> {
+        let Some(source_key) = plan.source_keys.get(model_id) else {
+            return Ok(());
+        };
+        let item = items.get(model_id);
+        let next_row = match committed.get(model_id) {
+            Some(hash) => Some((Some(model_id.to_string()), Some(hash.clone()))),
+            None => match item.map(|i| i.action) {
+                Some(
+                    ImportPlanAction::Unchanged
+                    | ImportPlanAction::KeepLocal
+                    | ImportPlanAction::Conflict,
+                ) => Some((Some(model_id.to_string()), Some(content_hash(incoming()?)))),
+                // Turned down, so remember it as not wanted rather than offering it again
+                Some(ImportPlanAction::Create | ImportPlanAction::Ignored) => Some((None, None)),
+                Some(ImportPlanAction::Delete) if item.is_some_and(|i| i.selected) => {
+                    Some((None, None))
+                }
+                // A deselected update or deletion stays offered next import
+                Some(ImportPlanAction::Update | ImportPlanAction::Delete) | None => None,
+            },
+        };
+        let Some((model_id, content_hash)) = next_row else {
+            return Ok(());
+        };
+        db.upsert_import_source_resource(&ImportSourceResource {
+            import_source_id: import_source.id.clone(),
+            source_key: source_key.clone(),
+            model_type: resource.as_str().to_string(),
+            model_id,
+            content_hash,
+            ..Default::default()
+        })?;
+        Ok(())
+    };
+
+    for v in &plan.resources.environments {
+        write_row(&v.id, ImportResourceType::Environment, &|| Ok(serde_json::to_value(v)?))?;
+    }
+    for v in &plan.resources.folders {
+        write_row(&v.id, ImportResourceType::Folder, &|| Ok(serde_json::to_value(v)?))?;
+    }
+    for v in &plan.resources.http_requests {
+        write_row(&v.id, ImportResourceType::HttpRequest, &|| Ok(serde_json::to_value(v)?))?;
+    }
+    for v in &plan.resources.grpc_requests {
+        write_row(&v.id, ImportResourceType::GrpcRequest, &|| Ok(serde_json::to_value(v)?))?;
+    }
+    for v in &plan.resources.websocket_requests {
+        write_row(&v.id, ImportResourceType::WebsocketRequest, &|| Ok(serde_json::to_value(v)?))?;
+    }
+
+    for row in db.list_import_source_resources(&import_source.id)? {
+        if incoming_keys.contains(&row.source_key) {
+            continue;
+        }
+        let keep = match (ImportResourceType::from_str(&row.model_type), &row.model_id) {
+            // A source that drops a resource for a release must not erase the answer to
+            // "do you want this?", or the answer would be asked again when it returns.
+            (_, None) => true,
+            // Otherwise keep only rows backing a deletion the user deselected; it is offered again
+            (Some(resource), Some(model_id)) => {
+                items
+                    .get(model_id)
+                    .is_some_and(|i| i.action == ImportPlanAction::Delete && !i.selected)
+                    && existing_model_json(db, resource, model_id)?.is_some()
+            }
+            _ => false,
+        };
+        if !keep {
+            db.delete_import_source_resource(&import_source.id, &row.source_key)?;
+        }
+    }
+
+    Ok(())
+}
+
+/// How an import's contents relate to what the destination workspace already has linked.
+enum LinkedSource {
+    Linked(ImportSource),
+    /// Several linked sources contain these resources, so merging would have to guess
+    Ambiguous(Vec<ImportSource>),
+    Unlinked,
+}
+
+/// A re-import is recognized by the source keys it carries rather than by where it was read from,
+/// so a file that moved or was renamed still merges into what it created.
+fn resolve_linked_source(
+    db: &ClientDb,
+    workspace_id: &str,
+    importer: &str,
+    origin: &ImportOrigin,
+    incoming_keys: &BTreeSet<String>,
+) -> Result<LinkedSource> {
+    let sources = db.list_import_sources(workspace_id)?;
+    let same_origin =
+        |source: &ImportSource| source.importer == importer && source.origin == origin.origin;
+
+    let mut overlapping = Vec::new();
+    for source in &sources {
+        // A document keeps its keys between imports, so the same document shows up as most of
+        // both key sets. A stray key in common — two API specs naming an operation the same way
+        // — is a coincidence, and merging on it would rewrite somebody else's resources.
+        if source.importer != importer {
+            continue;
+        }
+        let rows = db.list_import_source_resources(&source.id)?;
+        let shared = rows.iter().filter(|row| incoming_keys.contains(&row.source_key)).count();
+        if shared * 2 > rows.len() && shared * 2 > incoming_keys.len() {
+            overlapping.push(source.clone());
+        }
+    }
+
+    Ok(match overlapping.len() {
+        0 => match sources.into_iter().find(same_origin) {
+            Some(source) => LinkedSource::Linked(source),
+            None => LinkedSource::Unlinked,
+        },
+        1 => LinkedSource::Linked(overlapping.remove(0)),
+        _ => match overlapping.iter().find(|s| same_origin(s)) {
+            Some(source) => LinkedSource::Linked(source.clone()),
+            None => LinkedSource::Ambiguous(overlapping),
+        },
+    })
+}
+
+fn ambiguous_source_warning(sources: &[ImportSource]) -> ImportPlanWarning {
+    let labels = sources.iter().map(|s| s.origin_label.as_str()).collect::<BTreeSet<_>>();
+    ImportPlanWarning::warning(
+        "Imported as new",
+        format!("{} already contain these resources", display_list(&labels)),
+    )
+}
+
+/// Rewrite a plan against the destination's linked import source, if it has one: resources whose
+/// source key still has a model adopt that model's ID, and every resource gets a plan item
+/// describing the decision to preview. Keys the user has turned down come back as offers to
+/// import them after all, rather than as new resources.
+fn merge_with_linked_source(
+    query_manager: &QueryManager,
+    plan: &mut ImportPlan,
+    original: &ImportResources,
+) -> Result<()> {
+    let db = query_manager.connect();
+
+    let incoming_keys: BTreeSet<String> = plan.source_keys.values().cloned().collect();
+    let linked = match (&plan.origin, &plan.destination) {
+        (Some(origin), ImportDestination::ExistingWorkspace { workspace_id, .. }) => {
+            resolve_linked_source(&db, workspace_id, &plan.importer, origin, &incoming_keys)?
+        }
+        (None, _) | (Some(_), ImportDestination::NewWorkspace) => LinkedSource::Unlinked,
+    };
+
+    let source = match linked {
+        LinkedSource::Linked(source) => source,
+        LinkedSource::Ambiguous(sources) => {
+            plan.warnings.push(ambiguous_source_warning(&sources));
+            plan.items = create_only_items(plan);
+            return Ok(());
+        }
+        LinkedSource::Unlinked => {
+            plan.items = create_only_items(plan);
+            return Ok(());
+        }
+    };
+
+    let workspace_id = source.workspace_id.clone();
+    let rows: BTreeMap<String, ImportSourceResource> = db
+        .list_import_source_resources(&source.id)?
+        .into_iter()
+        .map(|row| (row.source_key.clone(), row))
+        .collect();
+
+    // Resources whose key maps to a model that still exists adopt that model's ID.
+    let mut remap: BTreeMap<String, String> = BTreeMap::new();
+    let mut current_models: BTreeMap<String, Value> = BTreeMap::new();
+    {
+        let mut consider = |planned_id: &str, resource: ImportResourceType| -> Result<()> {
+            let Some(key) = plan.source_keys.get(planned_id) else {
+                return Ok(());
+            };
+            let Some(row) = rows.get(key) else {
+                return Ok(());
+            };
+            if ImportResourceType::from_str(&row.model_type) != Some(resource) {
+                return Ok(());
+            }
+            let Some(model_id) = row.model_id.as_deref() else {
+                return Ok(());
+            };
+            let Some(current) = existing_model_json(&db, resource, model_id)? else {
+                return Ok(());
+            };
+            if current.get("workspaceId").and_then(|v| v.as_str()) != Some(workspace_id.as_str()) {
+                return Ok(());
+            }
+            remap.insert(planned_id.to_string(), model_id.to_string());
+            current_models.insert(model_id.to_string(), current);
+            Ok(())
+        };
+        for v in &plan.resources.folders {
+            consider(&v.id, ImportResourceType::Folder)?;
+        }
+        for v in &plan.resources.environments {
+            consider(&v.id, ImportResourceType::Environment)?;
+        }
+        for v in &plan.resources.http_requests {
+            consider(&v.id, ImportResourceType::HttpRequest)?;
+        }
+        for v in &plan.resources.grpc_requests {
+            consider(&v.id, ImportResourceType::GrpcRequest)?;
+        }
+        for v in &plan.resources.websocket_requests {
+            consider(&v.id, ImportResourceType::WebsocketRequest)?;
+        }
+    }
+
+    let remap_ref = |id: Option<String>| id.map(|v| remap.get(&v).cloned().unwrap_or(v));
+    for v in &mut plan.resources.folders {
+        if let Some(existing_id) = remap.get(&v.id) {
+            v.id = existing_id.clone();
+        }
+        v.folder_id = remap_ref(v.folder_id.take());
+    }
+    for v in &mut plan.resources.environments {
+        if let Some(existing_id) = remap.get(&v.id) {
+            v.id = existing_id.clone();
+        }
+        if v.parent_model == "folder" {
+            v.parent_id = remap_ref(v.parent_id.take());
+        }
+    }
+    for v in &mut plan.resources.http_requests {
+        if let Some(existing_id) = remap.get(&v.id) {
+            v.id = existing_id.clone();
+        }
+        v.folder_id = remap_ref(v.folder_id.take());
+    }
+    for v in &mut plan.resources.grpc_requests {
+        if let Some(existing_id) = remap.get(&v.id) {
+            v.id = existing_id.clone();
+        }
+        v.folder_id = remap_ref(v.folder_id.take());
+    }
+    for v in &mut plan.resources.websocket_requests {
+        if let Some(existing_id) = remap.get(&v.id) {
+            v.id = existing_id.clone();
+        }
+        v.folder_id = remap_ref(v.folder_id.take());
+    }
+    plan.source_keys = plan
+        .source_keys
+        .iter()
+        .map(|(id, key)| (remap.get(id).cloned().unwrap_or_else(|| id.clone()), key.clone()))
+        .collect();
+
+    // A mapped environment that is currently the destination's base environment stays the base
+    // environment: it came from this source, so the imported-copy separation does not apply.
+    let mut restored_base_names = BTreeSet::new();
+    for (i, v) in plan.resources.environments.iter_mut().enumerate() {
+        let is_current_base =
+            current_models.get(&v.id).and_then(|m| m.get("parentModel")).and_then(|p| p.as_str())
+                == Some("workspace");
+        if !is_current_base {
+            continue;
+        }
+        if let Some(source) = original.environments.get(i) {
+            v.name = source.name.clone();
+        }
+        v.parent_model = "workspace".to_string();
+        v.parent_id = None;
+        restored_base_names.insert(v.name.clone());
+    }
+    if !restored_base_names.is_empty() {
+        plan.warnings.retain(|w| {
+            !(w.title == "Base environment kept separate"
+                && restored_base_names.iter().any(|n| w.detail.starts_with(&format!("{n} →"))))
+        });
+    }
+
+    // A key whose row still points at a model in this workspace is one the user wants; a key
+    // whose row has lost its model is one they turned down.
+    let status = |planned_id: &str, resource: ImportResourceType| -> KeyStatus {
+        let Some(row) = plan.source_keys.get(planned_id).and_then(|key| rows.get(key)) else {
+            return KeyStatus::New;
+        };
+        if ImportResourceType::from_str(&row.model_type) != Some(resource) {
+            return KeyStatus::New;
+        }
+        if row.model_id.as_deref() == Some(planned_id) && current_models.contains_key(planned_id) {
+            KeyStatus::Wanted(row)
+        } else {
+            KeyStatus::NotWanted
+        }
+    };
+
+    let ignored_folders = plan
+        .resources
+        .folders
+        .iter()
+        .filter(|v| matches!(status(&v.id, ImportResourceType::Folder), KeyStatus::NotWanted))
+        .map(|v| v.id.as_str())
+        .collect::<BTreeSet<_>>();
+    let folder_parents = plan
+        .resources
+        .folders
+        .iter()
+        .map(|v| (v.id.as_str(), v.folder_id.as_deref()))
+        .collect::<BTreeMap<_, _>>();
+    let inside_an_ignored_folder = |parent_id: Option<&str>| {
+        let mut seen = BTreeSet::new();
+        let mut next = parent_id;
+        while let Some(id) = next {
+            if !seen.insert(id) {
+                break;
+            }
+            if ignored_folders.contains(id) {
+                return true;
+            }
+            next = folder_parents.get(id).copied().flatten();
+        }
+        false
+    };
+
+    let mut items = Vec::new();
+    {
+        let mut classify = |any: AnyModel,
+                            resource: ImportResourceType,
+                            parent_id: Option<String>|
+         -> Result<()> {
+            let planned_id = any.id().to_string();
+            let item = |action, selected, resolution, reason| ImportPlanItem {
+                action,
+                model: resource,
+                model_id: planned_id.clone(),
+                name: any.resolved_name(),
+                parent_id: parent_id.clone(),
+                selected,
+                resolution,
+                reason,
+                changed_fields: Vec::new(),
+            };
+
+            // Nothing can be created inside a folder that isn't imported, so it starts unchecked
+            // and comes along only if the folder does.
+            let reachable = !inside_an_ignored_folder(parent_id.as_deref());
+            let row = match status(&planned_id, resource) {
+                KeyStatus::New => {
+                    items.push(item(ImportPlanAction::Create, reachable, None, None));
+                    return Ok(());
+                }
+                KeyStatus::NotWanted => {
+                    items.push(item(ImportPlanAction::Ignored, false, None, None));
+                    return Ok(());
+                }
+                KeyStatus::Wanted(row) => row,
+            };
+
+            let incoming = comparable(serde_json::to_value(&any)?);
+            let current = comparable(current_models.get(&planned_id).cloned().unwrap_or_default());
+            let (source_changed, local_changed) = match recorded_hash(row) {
+                Some(hash) => {
+                    (hash_comparable(&incoming) != hash, hash_comparable(¤t) != hash)
+                }
+                // Without a recorded version, all that can be told is whether the two sides differ
+                None => {
+                    let differs = incoming != current;
+                    (differs, differs)
+                }
+            };
+
+            let (action, selected, resolution) = match (source_changed, local_changed) {
+                (false, false) => (ImportPlanAction::Unchanged, false, None),
+                (true, false) => (ImportPlanAction::Update, true, None),
+                (false, true) => (ImportPlanAction::KeepLocal, false, None),
+                (true, true) => {
+                    (ImportPlanAction::Conflict, true, Some(ImportConflictResolution::KeepMine))
+                }
+            };
+            // A resource the source moved into a folder that isn't imported keeps its place
+            // until that folder is: nothing can be written into a folder that will not exist.
+            let reason = (!reachable).then_some(ImportPlanReason::MovedIntoIgnoredFolder);
+            let mut planned = item(action, selected && reachable, resolution, reason);
+            planned.changed_fields = changed_fields(&incoming, ¤t);
+            items.push(planned);
+            Ok(())
+        };
+
+        for v in &plan.resources.folders {
+            classify(AnyModel::Folder(v.clone()), ImportResourceType::Folder, v.folder_id.clone())?;
+        }
+        for v in &plan.resources.http_requests {
+            classify(
+                AnyModel::HttpRequest(v.clone()),
+                ImportResourceType::HttpRequest,
+                v.folder_id.clone(),
+            )?;
+        }
+        for v in &plan.resources.grpc_requests {
+            classify(
+                AnyModel::GrpcRequest(v.clone()),
+                ImportResourceType::GrpcRequest,
+                v.folder_id.clone(),
+            )?;
+        }
+        for v in &plan.resources.websocket_requests {
+            classify(
+                AnyModel::WebsocketRequest(v.clone()),
+                ImportResourceType::WebsocketRequest,
+                v.folder_id.clone(),
+            )?;
+        }
+        for v in &plan.resources.environments {
+            classify(
+                AnyModel::Environment(v.clone()),
+                ImportResourceType::Environment,
+                v.parent_id.clone(),
+            )?;
+        }
+    }
+
+    // Mapped models the source no longer has become deletion offers, deselected by default.
+    for (key, row) in &rows {
+        if incoming_keys.contains(key) {
+            continue;
+        }
+        let Some(resource) = ImportResourceType::from_str(&row.model_type) else {
+            continue;
+        };
+        let Some(model_id) = row.model_id.as_deref() else {
+            continue;
+        };
+        let Some(current) = existing_model_json(&db, resource, model_id)? else {
+            continue;
+        };
+        if current.get("workspaceId").and_then(|v| v.as_str()) != Some(workspace_id.as_str()) {
+            continue;
+        }
+        let name = serde_json::from_value::<AnyModel>(current.clone())
+            .map(|m| m.resolved_name())
+            .unwrap_or_else(|_| "Unknown".to_string());
+        let parent_id = current
+            .get("folderId")
+            .or_else(|| current.get("parentId"))
+            .and_then(|v| v.as_str())
+            .map(str::to_string);
+        items.push(ImportPlanItem {
+            action: ImportPlanAction::Delete,
+            model: resource,
+            model_id: model_id.to_string(),
+            name,
+            parent_id,
+            selected: false,
+            resolution: None,
+            reason: None,
+            changed_fields: Vec::new(),
+        });
+    }
+
+    plan.items = items;
+    Ok(())
+}
+
+fn create_only_items(plan: &ImportPlan) -> Vec<ImportPlanItem> {
+    let mut items = Vec::new();
+    let mut push = |any: AnyModel, resource: ImportResourceType, parent_id: Option<String>| {
+        items.push(ImportPlanItem {
+            action: ImportPlanAction::Create,
+            model: resource,
+            model_id: any.id().to_string(),
+            name: any.resolved_name(),
+            parent_id,
+            selected: true,
+            resolution: None,
+            reason: None,
+            changed_fields: Vec::new(),
+        });
+    };
+    for v in &plan.resources.folders {
+        push(AnyModel::Folder(v.clone()), ImportResourceType::Folder, v.folder_id.clone());
+    }
+    for v in &plan.resources.http_requests {
+        push(
+            AnyModel::HttpRequest(v.clone()),
+            ImportResourceType::HttpRequest,
+            v.folder_id.clone(),
+        );
+    }
+    for v in &plan.resources.grpc_requests {
+        push(
+            AnyModel::GrpcRequest(v.clone()),
+            ImportResourceType::GrpcRequest,
+            v.folder_id.clone(),
+        );
+    }
+    for v in &plan.resources.websocket_requests {
+        push(
+            AnyModel::WebsocketRequest(v.clone()),
+            ImportResourceType::WebsocketRequest,
+            v.folder_id.clone(),
+        );
+    }
+    for v in &plan.resources.environments {
+        push(
+            AnyModel::Environment(v.clone()),
+            ImportResourceType::Environment,
+            v.parent_id.clone(),
+        );
+    }
+    items
+}
+
+/// What a source key means for the resource the plan wants to put behind it.
+enum KeyStatus<'a> {
+    /// The source has never been imported under this key
+    New,
+    Wanted(&'a ImportSourceResource),
+    /// Imported under this key before, and since turned down or deleted
+    NotWanted,
+}
+
+/// Strip identity and bookkeeping fields so equality means "same content in the same place".
+/// The deprecated environment `base` flag mirrors `parentModel`, which is compared already.
+/// Importers number `sortPriority` from source order, so comparing it would turn one insertion
+/// into an update of everything after it.
+fn comparable(value: Value) -> Value {
+    let mut value = strip_ids(value);
+    if let Some(object) = value.as_object_mut() {
+        for field in [
+            "model",
+            "workspaceId",
+            "createdAt",
+            "updatedAt",
+            "base",
+            "sortPriority",
+        ] {
+            object.remove(field);
+        }
+    }
+    value
+}
+
+/// A header, parameter, or variable carries an `id` that identifies its row to the editor rather
+/// than anything about its content, and the editor fills those in the first time it touches a
+/// resource. Dropping every `id` keeps that from reading as a local edit.
+fn strip_ids(value: Value) -> Value {
+    match value {
+        Value::Object(object) => Value::Object(
+            object
+                .into_iter()
+                .filter(|(key, _)| key != "id")
+                .map(|(key, value)| (key, strip_ids(value)))
+                .collect(),
+        ),
+        Value::Array(items) => Value::Array(items.into_iter().map(strip_ids).collect()),
+        other => other,
+    }
+}
+
+const CONTENT_HASH_VERSION: &str = "v1:";
+
+/// Identifies a resource's content well enough to tell "changed since the last import" from
+/// "unchanged", without keeping a copy of every imported resource around.
+fn content_hash(value: Value) -> String {
+    hash_comparable(&comparable(value))
+}
+
+fn hash_comparable(value: &Value) -> String {
+    let canonical = serde_json::to_string(&sorted_keys(value.clone())).unwrap_or_default();
+    format!("{CONTENT_HASH_VERSION}{:x}", Sha256::digest(canonical.as_bytes()))
+}
+
+/// The fields two comparable forms disagree on, so a preview row can explain itself.
+fn changed_fields(incoming: &Value, current: &Value) -> Vec<String> {
+    let (Some(incoming), Some(current)) = (incoming.as_object(), current.as_object()) else {
+        return Vec::new();
+    };
+    incoming
+        .keys()
+        .chain(current.keys())
+        .collect::<BTreeSet<_>>()
+        .into_iter()
+        .filter(|key| incoming.get(*key) != current.get(*key))
+        .cloned()
+        .collect()
+}
+
+/// A hash written by a version this build doesn't understand says nothing about the resource.
+fn recorded_hash(row: &ImportSourceResource) -> Option<&str> {
+    let hash = row.content_hash.as_deref()?;
+    hash.starts_with(CONTENT_HASH_VERSION).then_some(hash)
+}
+
+fn sorted_keys(value: Value) -> Value {
+    match value {
+        Value::Object(object) => {
+            let mut entries = object.into_iter().collect::<Vec<_>>();
+            entries.sort_by(|(a, _), (b, _)| a.cmp(b));
+            Value::Object(entries.into_iter().map(|(k, v)| (k, sorted_keys(v))).collect())
+        }
+        Value::Array(items) => Value::Array(items.into_iter().map(sorted_keys).collect()),
+        other => other,
+    }
+}
+
+fn existing_model_json(
+    db: &ClientDb,
+    resource: ImportResourceType,
+    id: &str,
+) -> Result<Option<Value>> {
+    use ImportResourceType::*;
+    let value = match resource {
+        Environment => db.get_environment(id).ok().map(|m| serde_json::to_value(&m)),
+        Folder => db.get_folder(id).ok().map(|m| serde_json::to_value(&m)),
+        HttpRequest => db.get_http_request(id).ok().map(|m| serde_json::to_value(&m)),
+        GrpcRequest => db.get_grpc_request(id).ok().map(|m| serde_json::to_value(&m)),
+        WebsocketRequest => db.get_websocket_request(id).ok().map(|m| serde_json::to_value(&m)),
+        Workspace => None,
+    };
+    Ok(value.transpose()?)
+}
+
+fn validate_destination(
+    query_manager: &QueryManager,
+    destination: &ImportDestination,
+) -> Result<()> {
+    let db = query_manager.connect();
+    validate_destination_db(&db, destination)
+}
+
+fn validate_destination_db(db: &ClientDb<'_>, destination: &ImportDestination) -> Result<()> {
+    let ImportDestination::ExistingWorkspace { workspace_id, folder_id } = destination else {
+        return Ok(());
+    };
+
+    db.get_workspace(workspace_id)?;
+    if let Some(folder_id) = folder_id {
+        let folder = db.get_folder(folder_id)?;
+        if folder.workspace_id != *workspace_id {
+            return Err(yaak_models::error::Error::GenericError(format!(
+                "Folder {folder_id} does not belong to workspace {workspace_id}"
+            ))
+            .into());
+        }
+    }
+    Ok(())
+}
+
+fn validate_plan(plan: &ImportPlan) -> Result<()> {
+    let invalid = |message: String| -> Result<()> {
+        Err(yaak_models::error::Error::GenericError(message).into())
+    };
+
+    match &plan.destination {
+        ImportDestination::ExistingWorkspace { workspace_id, .. } => {
+            if !plan.resources.workspaces.is_empty() {
+                return invalid(
+                    "An existing-workspace import plan must not contain workspace updates"
+                        .to_string(),
+                );
+            }
+
+            let all_workspace_ids = plan
+                .resources
+                .environments
+                .iter()
+                .map(|v| &v.workspace_id)
+                .chain(plan.resources.folders.iter().map(|v| &v.workspace_id))
+                .chain(plan.resources.http_requests.iter().map(|v| &v.workspace_id))
+                .chain(plan.resources.grpc_requests.iter().map(|v| &v.workspace_id))
+                .chain(plan.resources.websocket_requests.iter().map(|v| &v.workspace_id));
+            if all_workspace_ids.into_iter().any(|id| id != workspace_id) {
+                return invalid(
+                    "An existing-workspace import plan contains resources for another workspace"
+                        .to_string(),
+                );
+            }
+
+            // A merging plan may update the base environment it created earlier, which its plan
+            // item records; anything else must not replace the destination's base environment.
+            let updates_own_base = |id: &str| {
+                plan.items.iter().any(|i| {
+                    i.model_id == id
+                        && !matches!(i.action, ImportPlanAction::Create | ImportPlanAction::Ignored)
+                })
+            };
+            if plan
+                .resources
+                .environments
+                .iter()
+                .any(|v| v.parent_model == "workspace" && !updates_own_base(&v.id))
+            {
+                return invalid(
+                    "An existing-workspace import plan must not replace the base environment"
+                        .to_string(),
+                );
+            }
+        }
+        ImportDestination::NewWorkspace => {
+            let workspace_ids =
+                plan.resources.workspaces.iter().map(|v| v.id.as_str()).collect::<BTreeSet<_>>();
+            if workspace_ids.is_empty() {
+                return invalid("A new-workspace import plan has no workspace".to_string());
+            }
+            let all_workspace_ids = plan
+                .resources
+                .environments
+                .iter()
+                .map(|v| v.workspace_id.as_str())
+                .chain(plan.resources.folders.iter().map(|v| v.workspace_id.as_str()))
+                .chain(plan.resources.http_requests.iter().map(|v| v.workspace_id.as_str()))
+                .chain(plan.resources.grpc_requests.iter().map(|v| v.workspace_id.as_str()))
+                .chain(plan.resources.websocket_requests.iter().map(|v| v.workspace_id.as_str()));
+            if all_workspace_ids.into_iter().any(|id| !workspace_ids.contains(id)) {
+                return invalid(
+                    "A new-workspace import plan contains resources outside its workspaces"
+                        .to_string(),
+                );
+            }
+
+            let mut base_environment_workspaces = BTreeSet::new();
+            if plan.resources.environments.iter().any(|v| {
+                v.parent_model == "workspace"
+                    && !base_environment_workspaces.insert(v.workspace_id.as_str())
+            }) {
+                return invalid(
+                    "A new-workspace import plan contains multiple base environments for one workspace"
+                        .to_string(),
+                );
+            }
+        }
+    }
+
+    let planned_folder_ids =
+        plan.resources.folders.iter().map(|v| v.id.as_str()).collect::<BTreeSet<_>>();
+    if plan.resources.environments.iter().any(|v| {
+        v.parent_model == "folder"
+            && v.parent_id.as_deref().is_none_or(|id| !planned_folder_ids.contains(id))
+    }) {
+        return invalid(
+            "An import plan must not replace an existing folder environment".to_string(),
+        );
+    }
+
+    Ok(())
+}
+
+/// Number a name up from 2 until it is nobody else's. An empty name is left alone, since the
+/// display falls back to something else for it.
+fn unique_name(name: &str, taken: &[String]) -> String {
+    if name.is_empty() || !taken.iter().any(|t| t == name) {
+        return name.to_string();
+    }
+    let mut n = 2;
+    loop {
+        let candidate = format!("{name} ({n})");
+        if !taken.iter().any(|t| *t == candidate) {
+            return candidate;
+        }
+        n += 1;
+    }
+}
+
+fn display_importer_name(importer: &str) -> &str {
+    importer.strip_prefix("@yaak/importer-").unwrap_or(importer)
+}
+
+fn workspace_fields_not_imported(source: &Workspace, destination: &Workspace) -> Vec<&'static str> {
+    let mut fields = Vec::new();
+    if source.name != destination.name {
+        fields.push("workspace name");
+    }
+    if source.description != destination.description {
+        fields.push("description");
+    }
+    if source.authentication != destination.authentication
+        || source.authentication_type != destination.authentication_type
+    {
+        fields.push("authentication");
+    }
+    if source.headers != destination.headers {
+        fields.push("default headers");
+    }
+    if source.encryption_key_challenge != destination.encryption_key_challenge {
+        fields.push("encryption configuration");
+    }
+    if source.setting_validate_certificates != destination.setting_validate_certificates {
+        fields.push("certificate validation");
+    }
+    if source.setting_follow_redirects != destination.setting_follow_redirects {
+        fields.push("redirect behavior");
+    }
+    if source.setting_request_timeout != destination.setting_request_timeout {
+        fields.push("request timeout");
+    }
+    if source.setting_request_message_size != destination.setting_request_message_size {
+        fields.push("request message size");
+    }
+    if source.setting_dns_overrides != destination.setting_dns_overrides {
+        fields.push("DNS overrides");
+    }
+    if source.setting_send_cookies != destination.setting_send_cookies
+        || source.setting_store_cookies != destination.setting_store_cookies
+    {
+        fields.push("cookie behavior");
+    }
+    fields
+}
+
+fn display_list(items: &BTreeSet<&str>) -> String {
+    let items = items.iter().copied().collect::<Vec<_>>();
+    match items.as_slice() {
+        [] => String::new(),
+        [item] => (*item).to_string(),
+        [first, second] => format!("{first} and {second}"),
+        _ => format!("{}, and {}", items[..items.len() - 1].join(", "), items[items.len() - 1]),
+    }
+}
+
+/// Keys are derived from the document as the importer produced it — names, routes, and folder
+/// ancestry before any destination re-rooting or renaming — so the same document maps onto the
+/// same keys no matter which workspace it is imported into. Collections are positional: planned
+/// entry `i` came from original entry `i`.
+fn assign_source_keys(
+    resources: &BatchUpsertResult,
+    original: &ImportResources,
+    plugin_keys: &BTreeMap<String, String>,
+) -> BTreeMap<String, String> {
+    let folder_tree = original
+        .folders
+        .iter()
+        .map(|v| (v.id.clone(), (v.name.clone(), v.folder_id.clone())))
+        .collect::<BTreeMap<_, _>>();
+
+    let plugin_key = |source_id: Option<&String>| source_id.and_then(|id| plugin_keys.get(id));
+
+    // (model ID, importer key, key by name, key by name and content)
+    let mut candidates: Vec<(&str, Option<&String>, String, String)> = Vec::new();
+
+    for (i, v) in resources.workspaces.iter().enumerate() {
+        let source = original.workspaces.get(i);
+        let name = source.map(|s| s.name.as_str()).unwrap_or(v.name.as_str());
+        let key = fallback_key("workspace", &[], name);
+        candidates.push((&v.id, plugin_key(source.map(|s| &s.id)), key.clone(), key));
+    }
+    for (i, v) in resources.environments.iter().enumerate() {
+        let source = original.environments.get(i);
+        let name = source.map(|s| s.name.as_str()).unwrap_or(v.name.as_str());
+        let parent_id = source
+            .and_then(|s| if s.parent_model == "folder" { s.parent_id.as_deref() } else { None });
+        let ancestry = ancestry_path(&folder_tree, parent_id);
+        let key = fallback_key("environment", &ancestry, name);
+        candidates.push((&v.id, plugin_key(source.map(|s| &s.id)), key.clone(), key));
+    }
+    for (i, v) in resources.folders.iter().enumerate() {
+        let source = original.folders.get(i);
+        let name = source.map(|s| s.name.as_str()).unwrap_or(v.name.as_str());
+        let ancestry = ancestry_path(&folder_tree, source.and_then(|s| s.folder_id.as_deref()));
+        let key = fallback_key("folder", &ancestry, name);
+        candidates.push((&v.id, plugin_key(source.map(|s| &s.id)), key.clone(), key));
+    }
+    for (i, v) in resources.http_requests.iter().enumerate() {
+        let source = original.http_requests.get(i);
+        let s = source.unwrap_or(v);
+        let ancestry = ancestry_path(&folder_tree, s.folder_id.as_deref());
+        let method = if s.method.is_empty() { "GET" } else { s.method.as_str() };
+        let route = format!("{method} {}", s.url);
+        let (by_name, by_content) = derived_pair("http_request", &ancestry, &s.name, &route);
+        candidates.push((&v.id, plugin_key(source.map(|s| &s.id)), by_name, by_content));
+    }
+    for (i, v) in resources.grpc_requests.iter().enumerate() {
+        let source = original.grpc_requests.get(i);
+        let s = source.unwrap_or(v);
+        let ancestry = ancestry_path(&folder_tree, s.folder_id.as_deref());
+        let service = s.service.clone().unwrap_or_default();
+        let method = s.method.clone().unwrap_or_default();
+        let route = format!("{} {service}/{method}", s.url);
+        let (by_name, by_content) = derived_pair("grpc_request", &ancestry, &s.name, &route);
+        candidates.push((&v.id, plugin_key(source.map(|s| &s.id)), by_name, by_content));
+    }
+    for (i, v) in resources.websocket_requests.iter().enumerate() {
+        let source = original.websocket_requests.get(i);
+        let s = source.unwrap_or(v);
+        let ancestry = ancestry_path(&folder_tree, s.folder_id.as_deref());
+        let (by_name, by_content) = derived_pair("websocket_request", &ancestry, &s.name, &s.url);
+        candidates.push((&v.id, plugin_key(source.map(|s| &s.id)), by_name, by_content));
+    }
+
+    // A name shared by several resources identifies none of them, so every member of the group
+    // falls back to its own content. Counting the whole document first keeps that decision
+    // independent of the order the resources happen to be listed in.
+    let mut shared_names: BTreeMap<&str, usize> = BTreeMap::new();
+    for (_, plugin_key, by_name, _) in &candidates {
+        if plugin_key.is_none() {
+            *shared_names.entry(by_name.as_str()).or_default() += 1;
+        }
+    }
+
+    let mut keys = BTreeMap::new();
+    let mut used = BTreeSet::new();
+    for (model_id, plugin_key, by_name, by_content) in &candidates {
+        let key = match plugin_key {
+            Some(plugin_key) => (*plugin_key).clone(),
+            None if shared_names.get(by_name.as_str()).is_some_and(|n| *n > 1) => {
+                by_content.clone()
+            }
+            None => by_name.clone(),
+        };
+
+        // A key identifies one model, so a repeat has to be broken apart rather than overwrite.
+        // Reaching here means the resources are indistinguishable by name and content alike.
+        let mut unique = key.clone();
+        let mut attempt = 1;
+        while !used.insert(unique.clone()) {
+            attempt += 1;
+            unique = format!("{key}~{attempt}");
+        }
+
+        keys.insert((*model_id).to_string(), unique);
+    }
+
+    keys
+}
+
+const IDENTITY_SEP: char = '\u{1f}';
+
+/// A resource's key by name, plus the one to use when another resource already took it.
+fn derived_pair(model: &str, ancestry: &[String], name: &str, route: &str) -> (String, String) {
+    let by_name = if name.is_empty() { route } else { name };
+    let by_content = format!("{by_name}{IDENTITY_SEP}{route}");
+    (fallback_key(model, ancestry, by_name), fallback_key(model, ancestry, &by_content))
+}
+
+/// Stops at the first folder outside the plan, which is the existing folder an import targets.
+fn ancestry_path(
+    folders: &BTreeMap<String, (String, Option<String>)>,
+    folder_id: Option<&str>,
+) -> Vec<String> {
+    let mut path = Vec::new();
+    let mut seen = BTreeSet::new();
+    let mut next = folder_id.map(str::to_string);
+    while let Some(id) = next {
+        if !seen.insert(id.clone()) {
+            break;
+        }
+        let Some((name, parent_id)) = folders.get(&id) else {
+            break;
+        };
+        path.push(name.clone());
+        next = parent_id.clone();
+    }
+    path.reverse();
+    path
+}
+
+/// Known limitation: this changes when the source document renames or moves the resource, so a
+/// re-import sees a rename as a delete plus an add.
+fn fallback_key(model: &str, ancestry: &[String], identity: &str) -> String {
+    const RECORD: char = '\u{1e}';
+    let ancestry = ancestry.join(RECORD.to_string().as_str());
+    format!(
+        "fb:{:x}",
+        md5::compute(format!("{model}{IDENTITY_SEP}{ancestry}{IDENTITY_SEP}{identity}"))
+    )
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use serde_json::json;
+    use yaak_models::models::{EnvironmentVariable, HttpRequestHeader};
+
+    fn destination_workspace() -> Workspace {
+        Workspace {
+            id: "wk_destination".to_string(),
+            model: "workspace".to_string(),
+            name: "Destination".to_string(),
+            authentication: BTreeMap::from([("token".to_string(), json!("keep-me"))]),
+            authentication_type: Some("bearer".to_string()),
+            headers: vec![HttpRequestHeader {
+                enabled: true,
+                name: "X-Destination".to_string(),
+                value: "preserved".to_string(),
+                id: None,
+            }],
+            setting_validate_certificates: false,
+            setting_follow_redirects: false,
+            setting_request_timeout: 1234,
+            ..Default::default()
+        }
+    }
+
+    fn imported_resources() -> ImportResources {
+        ImportResources {
+            workspaces: vec![Workspace {
+                id: "wk_source".to_string(),
+                model: "workspace".to_string(),
+                name: "Imported".to_string(),
+                authentication_type: Some("basic".to_string()),
+                setting_validate_certificates: true,
+                ..Default::default()
+            }],
+            environments: vec![Environment {
+                id: "ev_source_base".to_string(),
+                model: "environment".to_string(),
+                workspace_id: "wk_source".to_string(),
+                name: "Global Variables".to_string(),
+                parent_model: "workspace".to_string(),
+                variables: vec![EnvironmentVariable {
+                    enabled: true,
+                    name: "imported".to_string(),
+                    value: "yes".to_string(),
+                    id: None,
+                }],
+                ..Default::default()
+            }],
+            folders: vec![Folder {
+                id: "fl_source".to_string(),
+                model: "folder".to_string(),
+                workspace_id: "wk_source".to_string(),
+                name: "Imported Folder".to_string(),
+                ..Default::default()
+            }],
+            http_requests: vec![
+                HttpRequest {
+                    id: "rq_root".to_string(),
+                    model: "http_request".to_string(),
+                    workspace_id: "wk_source".to_string(),
+                    name: "Root Request".to_string(),
+                    method: "GET".to_string(),
+                    url: "https://example.com/root".to_string(),
+                    ..Default::default()
+                },
+                HttpRequest {
+                    id: "rq_nested".to_string(),
+                    model: "http_request".to_string(),
+                    workspace_id: "wk_source".to_string(),
+                    folder_id: Some("fl_source".to_string()),
+                    name: "Nested Request".to_string(),
+                    method: "GET".to_string(),
+                    url: "https://example.com/nested".to_string(),
+                    ..Default::default()
+                },
+            ],
+            ..Default::default()
+        }
+    }
+
+    #[test]
+    fn existing_workspace_plan_does_not_mutate_and_preserves_workspace_settings() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let mut destination = destination_workspace();
+        let selected_folder = Folder {
+            id: "fl_selected".to_string(),
+            model: "folder".to_string(),
+            workspace_id: destination.id.clone(),
+            name: "Selected Folder".to_string(),
+            ..Default::default()
+        };
+        query_manager
+            .with_tx(|db| {
+                destination = db.upsert_workspace(&destination, &UpdateSource::Import)?;
+                db.upsert_folder(&selected_folder, &UpdateSource::Import)?;
+                db.upsert_environment(
+                    &Environment {
+                        id: "ev_destination_base".to_string(),
+                        model: "environment".to_string(),
+                        workspace_id: destination.id.clone(),
+                        name: "Destination Variables".to_string(),
+                        parent_model: "workspace".to_string(),
+                        variables: vec![EnvironmentVariable {
+                            enabled: true,
+                            name: "destination".to_string(),
+                            value: "keep".to_string(),
+                            id: None,
+                        }],
+                        ..Default::default()
+                    },
+                    &UpdateSource::Import,
+                )
+            })
+            .expect("seed destination");
+        let workspace_count = query_manager.connect().list_workspaces().expect("list").len();
+
+        let plan = plan_import_resources(
+            &query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::ExistingWorkspace {
+                workspace_id: destination.id.clone(),
+                folder_id: Some(selected_folder.id.clone()),
+            },
+            imported_resources(),
+            None,
+            None,
+        )
+        .expect("plan import");
+
+        // Planning performed only reads.
+        {
+            let db = query_manager.connect();
+            assert_eq!(db.list_workspaces().expect("list workspaces").len(), workspace_count);
+            assert_eq!(db.list_folders(&destination.id).expect("list folders").len(), 1);
+            assert!(db.list_http_requests(&destination.id).expect("list requests").is_empty());
+            assert_eq!(db.list_environments(&destination.id).expect("list environments").len(), 1);
+            assert_eq!(db.get_workspace(&destination.id).expect("get destination"), destination);
+        }
+
+        assert!(plan.resources.workspaces.is_empty());
+        assert_eq!(plan.resources.folders[0].workspace_id, destination.id);
+        assert_eq!(
+            plan.resources.folders[0].folder_id.as_deref(),
+            Some(selected_folder.id.as_str())
+        );
+        let root_request = plan
+            .resources
+            .http_requests
+            .iter()
+            .find(|v| v.name == "Root Request")
+            .expect("root request");
+        assert_eq!(root_request.folder_id.as_deref(), Some(selected_folder.id.as_str()));
+        let nested_request = plan
+            .resources
+            .http_requests
+            .iter()
+            .find(|v| v.name == "Nested Request")
+            .expect("nested request");
+        assert_eq!(nested_request.folder_id, Some(plan.resources.folders[0].id.clone()));
+        assert_eq!(plan.resources.environments[0].parent_model, "environment");
+        assert!(plan.resources.environments[0].name.ends_with("(Imported)"));
+        assert_eq!(plan.warnings.len(), 2);
+        assert!(plan.warnings.iter().any(|warning| {
+            warning.title == "Workspace settings skipped"
+                && warning.detail.starts_with("Imported ·")
+                && warning.detail.contains("authentication")
+                && warning.detail.contains("default headers")
+        }));
+        assert!(plan.warnings.iter().any(|warning| {
+            warning.title == "Base environment kept separate"
+                && warning.detail == "Global Variables → Global Variables (Imported) · 1 variable"
+        }));
+
+        let committed = commit_import_plan(&query_manager, plan).expect("commit import");
+        assert!(committed.workspaces.is_empty());
+        assert_eq!(committed.http_requests.len(), 2);
+        assert_eq!(
+            query_manager
+                .connect()
+                .get_workspace(&destination.id)
+                .expect("get destination after commit"),
+            destination
+        );
+    }
+
+    #[test]
+    fn a_second_import_into_a_new_workspace_is_numbered() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let first = plan_import_resources(
+            &query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::NewWorkspace,
+            imported_resources(),
+            None,
+            None,
+        )
+        .expect("plan first import");
+        assert_eq!(first.resources.workspaces[0].name, "Imported");
+        commit_import_plan(&query_manager, first).expect("commit first import");
+
+        let second = plan_import_resources(
+            &query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::NewWorkspace,
+            imported_resources(),
+            None,
+            None,
+        )
+        .expect("plan second import");
+        assert_eq!(second.resources.workspaces[0].name, "Imported (2)");
+        commit_import_plan(&query_manager, second).expect("commit second import");
+
+        let third = plan_import_resources(
+            &query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::NewWorkspace,
+            imported_resources(),
+            None,
+            None,
+        )
+        .expect("plan third import");
+        assert_eq!(third.resources.workspaces[0].name, "Imported (3)");
+
+        let names = query_manager
+            .connect()
+            .list_workspaces()
+            .expect("list workspaces")
+            .into_iter()
+            .map(|w| w.name)
+            .filter(|name| name.starts_with("Imported"))
+            .collect::<BTreeSet<_>>();
+        assert_eq!(names, BTreeSet::from(["Imported".to_string(), "Imported (2)".to_string()]));
+    }
+
+    #[test]
+    fn importing_a_document_that_already_has_a_workspace_warns() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        let elsewhere = plan_import_resources(
+            &query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::NewWorkspace,
+            imported_resources(),
+            Some(importer_keys()),
+            Some(linked_origin()),
+        )
+        .expect("plan a second copy");
+        let warning = elsewhere
+            .warnings
+            .iter()
+            .find(|w| w.title == "Already imported into Imported")
+            .expect("copying a document that already landed somewhere is called out");
+        assert_eq!(warning.detail, "Importing here makes a second copy");
+
+        // Merging back into the workspace it created is the whole point, so it says nothing.
+        let merging = replan(&query_manager, &workspace_id, imported_resources());
+        assert!(
+            merging.warnings.iter().all(|w| !w.title.starts_with("Already imported")),
+            "{:?}",
+            merging.warnings
+        );
+    }
+
+    #[test]
+    fn environment_collisions_are_explicit_and_do_not_overwrite() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let mut resources = imported_resources();
+        resources.environments.extend([
+            Environment {
+                id: "ev_second_base".to_string(),
+                model: "environment".to_string(),
+                workspace_id: "wk_source".to_string(),
+                name: "Second Base".to_string(),
+                parent_model: "workspace".to_string(),
+                ..Default::default()
+            },
+            Environment {
+                id: "ev_folder_one".to_string(),
+                model: "environment".to_string(),
+                workspace_id: "wk_source".to_string(),
+                name: "Folder One".to_string(),
+                parent_model: "folder".to_string(),
+                parent_id: Some("fl_source".to_string()),
+                ..Default::default()
+            },
+            Environment {
+                id: "ev_folder_two".to_string(),
+                model: "environment".to_string(),
+                workspace_id: "wk_source".to_string(),
+                name: "Folder Two".to_string(),
+                parent_model: "folder".to_string(),
+                parent_id: Some("fl_source".to_string()),
+                ..Default::default()
+            },
+        ]);
+
+        let plan = plan_import_resources(
+            &query_manager,
+            "Yaak".to_string(),
+            ImportDestination::NewWorkspace,
+            resources,
+            None,
+            None,
+        )
+        .expect("plan import");
+
+        assert_eq!(
+            plan.resources.environments.iter().filter(|v| v.parent_model == "workspace").count(),
+            1
+        );
+        assert_eq!(
+            plan.resources.environments.iter().filter(|v| v.parent_model == "folder").count(),
+            1
+        );
+        assert_eq!(plan.warnings.len(), 2);
+    }
+
+    #[test]
+    fn importer_id_conventions_all_flow_through_the_same_planner() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let destination = destination_workspace();
+        query_manager
+            .with_tx(|tx| tx.upsert_workspace(&destination, &UpdateSource::Import))
+            .expect("create destination");
+        let resources = ImportResources {
+            workspaces: vec![
+                Workspace {
+                    id: "GENERATE_ID::WORKSPACE_0".to_string(),
+                    model: "workspace".to_string(),
+                    name: "Generated ID Importer".to_string(),
+                    ..Default::default()
+                },
+                Workspace {
+                    id: "wk_exported".to_string(),
+                    model: "workspace".to_string(),
+                    name: "Stable ID Importer".to_string(),
+                    ..Default::default()
+                },
+            ],
+            http_requests: [
+                "GENERATE_ID::WORKSPACE_0",
+                "wk_exported",
+                "CURRENT_WORKSPACE",
+            ]
+            .into_iter()
+            .enumerate()
+            .map(|(index, workspace_id)| HttpRequest {
+                id: format!("GENERATE_ID::HTTP_REQUEST_{index}"),
+                model: "http_request".to_string(),
+                workspace_id: workspace_id.to_string(),
+                name: format!("Request {index}"),
+                method: "GET".to_string(),
+                ..Default::default()
+            })
+            .collect(),
+            ..Default::default()
+        };
+
+        let plan = plan_import_resources(
+            &query_manager,
+            "Compatibility".to_string(),
+            ImportDestination::ExistingWorkspace {
+                workspace_id: destination.id.clone(),
+                folder_id: None,
+            },
+            resources,
+            None,
+            None,
+        )
+        .expect("plan import");
+
+        assert!(plan.resources.workspaces.is_empty());
+        assert!(plan.resources.http_requests.iter().all(|v| v.workspace_id == destination.id));
+        assert_eq!(
+            plan.resources
+                .http_requests
+                .iter()
+                .map(|v| v.id.as_str())
+                .collect::<BTreeSet<_>>()
+                .len(),
+            3
+        );
+    }
+
+    #[test]
+    fn commit_rolls_back_every_resource_when_a_late_write_fails() {
+        let dir = tempfile::tempdir().expect("create temp directory");
+        let db_path = dir.path().join("models.sqlite");
+        let blob_path = dir.path().join("blobs.sqlite");
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_standalone(&db_path, &blob_path).expect("initialize database");
+        let plan = plan_import_resources(
+            &query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::NewWorkspace,
+            imported_resources(),
+            None,
+            Some(linked_origin()),
+        )
+        .expect("plan import");
+        let workspace_id = plan.resources.workspaces[0].id.clone();
+        let environment_id = plan.resources.environments[0].id.clone();
+
+        let connection = rusqlite::Connection::open(&db_path).expect("open test database");
+        connection
+            .execute_batch(&format!(
+                "CREATE TRIGGER fail_import_environment BEFORE INSERT ON environments \
+                 WHEN NEW.id = '{environment_id}' BEGIN SELECT RAISE(FAIL, 'forced failure'); END;"
+            ))
+            .expect("install failure trigger");
+        drop(connection);
+
+        assert!(commit_import_plan(&query_manager, plan).is_err());
+        let db = query_manager.connect();
+        assert!(db.get_workspace(&workspace_id).is_err(), "workspace insert must roll back");
+        assert!(db.get_environment(&environment_id).is_err(), "environment must not exist");
+        assert!(
+            db.list_import_sources(&workspace_id).expect("list import sources").is_empty(),
+            "import source must roll back"
+        );
+    }
+
+    fn request_key<'a>(plan: &'a ImportPlan, name: &str) -> &'a str {
+        let request = plan
+            .resources
+            .http_requests
+            .iter()
+            .find(|v| v.name == name)
+            .unwrap_or_else(|| panic!("no planned request named {name}"));
+        plan.source_keys.get(&request.id).expect("request has a source key")
+    }
+
+    fn plan_with_keys(
+        resources: ImportResources,
+        source_keys: Option<BTreeMap<String, String>>,
+    ) -> ImportPlan {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        plan_import_resources(
+            &query_manager,
+            "Yaak".to_string(),
+            ImportDestination::NewWorkspace,
+            resources,
+            source_keys,
+            None,
+        )
+        .expect("plan import")
+    }
+
+    #[test]
+    fn every_planned_model_gets_a_source_key() {
+        let plan = plan_with_keys(imported_resources(), None);
+
+        let planned_ids = plan
+            .resources
+            .workspaces
+            .iter()
+            .map(|v| v.id.clone())
+            .chain(plan.resources.environments.iter().map(|v| v.id.clone()))
+            .chain(plan.resources.folders.iter().map(|v| v.id.clone()))
+            .chain(plan.resources.http_requests.iter().map(|v| v.id.clone()))
+            .collect::<BTreeSet<_>>();
+
+        assert_eq!(plan.source_keys.keys().cloned().collect::<BTreeSet<_>>(), planned_ids);
+        assert!(
+            plan.source_keys.values().all(|key| key.starts_with("fb:")),
+            "an importer that supplied no keys should leave every key derived: {:?}",
+            plan.source_keys,
+        );
+    }
+
+    #[test]
+    fn importer_keys_win_over_derived_ones() {
+        let source_keys = BTreeMap::from([("rq_nested".to_string(), "op:listPets".to_string())]);
+        let plan = plan_with_keys(imported_resources(), Some(source_keys));
+
+        assert_eq!(request_key(&plan, "Nested Request"), "op:listPets");
+        assert!(request_key(&plan, "Root Request").starts_with("fb:"));
+    }
+
+    #[test]
+    fn derived_keys_survive_a_re_parse_that_mints_new_ids() {
+        let first = plan_with_keys(imported_resources(), None);
+
+        let mut edited = imported_resources();
+        for (i, request) in edited.http_requests.iter_mut().enumerate() {
+            request.id = format!("reparsed_{i}");
+            request.url = format!("{}?added=1", request.url);
+        }
+        edited.folders[0].id = "reparsed_folder".to_string();
+        edited.http_requests[1].folder_id = Some("reparsed_folder".to_string());
+        let second = plan_with_keys(edited, None);
+
+        assert_eq!(request_key(&first, "Root Request"), request_key(&second, "Root Request"));
+        assert_eq!(request_key(&first, "Nested Request"), request_key(&second, "Nested Request"));
+    }
+
+    #[test]
+    fn derived_keys_distinguish_same_named_requests_by_folder() {
+        let mut resources = imported_resources();
+        resources.http_requests[1].name = resources.http_requests[0].name.clone();
+        let plan = plan_with_keys(resources, None);
+
+        let keys = plan.source_keys.values().collect::<BTreeSet<_>>();
+        assert_eq!(keys.len(), plan.source_keys.len(), "keys collided: {:?}", plan.source_keys);
+    }
+
+    #[test]
+    fn duplicate_keys_are_broken_apart_so_none_are_lost() {
+        let mut resources = imported_resources();
+        resources.http_requests[1].folder_id = None;
+        resources.http_requests[1].name = resources.http_requests[0].name.clone();
+        resources.http_requests[1].url = resources.http_requests[0].url.clone();
+        let plan = plan_with_keys(resources, None);
+
+        assert_eq!(plan.source_keys.len(), 5);
+        let keys = plan.source_keys.values().collect::<BTreeSet<_>>();
+        assert_eq!(keys.len(), 5, "keys collided: {:?}", plan.source_keys);
+        assert!(
+            plan.source_keys.values().any(|key| key.ends_with("~2")),
+            "the repeat should be suffixed: {:?}",
+            plan.source_keys,
+        );
+    }
+
+    #[test]
+    fn same_named_siblings_keep_their_keys_when_the_document_reorders() {
+        let build = |swap: bool| {
+            let mut resources = imported_resources();
+            resources.http_requests[0].name = "Get".to_string();
+            resources.http_requests[1].name = "Get".to_string();
+            resources.http_requests[0].folder_id = Some("fl_source".to_string());
+            resources.http_requests[0].url = "https://example.com/a".to_string();
+            resources.http_requests[1].url = "https://example.com/b".to_string();
+            if swap {
+                resources.http_requests.swap(0, 1);
+            }
+            let plan = plan_with_keys(resources, None);
+            plan.resources
+                .http_requests
+                .iter()
+                .map(|r| (r.url.clone(), plan.source_keys[&r.id].clone()))
+                .collect::<BTreeMap<_, _>>()
+        };
+
+        // Listing the pair the other way round must not hand each other's key over, or a later
+        // re-import would credit one request's edits to the other.
+        assert_eq!(build(false), build(true));
+    }
+
+    #[test]
+    fn derived_keys_are_prefixed_so_importer_keys_stay_distinguishable() {
+        let source_keys = BTreeMap::from([("rq_root".to_string(), "op:root".to_string())]);
+        let plan = plan_with_keys(imported_resources(), Some(source_keys));
+
+        assert!(!request_key(&plan, "Root Request").starts_with("fb:"));
+        assert!(request_key(&plan, "Nested Request").starts_with("fb:"));
+    }
+
+    fn linked_origin() -> ImportOrigin {
+        ImportOrigin { origin: "/tmp/api.yaml".to_string(), label: "api.yaml".to_string() }
+    }
+
+    fn importer_keys() -> BTreeMap<String, String> {
+        BTreeMap::from([
+            ("ev_source_base".to_string(), "env:base".to_string()),
+            ("fl_source".to_string(), "folder:src".to_string()),
+            ("rq_root".to_string(), "op:root".to_string()),
+            ("rq_nested".to_string(), "op:nested".to_string()),
+            ("rq_extra".to_string(), "op:extra".to_string()),
+            ("fl_extra".to_string(), "folder:extra".to_string()),
+        ])
+    }
+
+    fn first_import(query_manager: &QueryManager) -> BatchUpsertResult {
+        first_import_with(query_manager, imported_resources())
+    }
+
+    fn first_import_with(
+        query_manager: &QueryManager,
+        resources: ImportResources,
+    ) -> BatchUpsertResult {
+        let plan = plan_import_resources(
+            query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::NewWorkspace,
+            resources,
+            Some(importer_keys()),
+            Some(linked_origin()),
+        )
+        .expect("plan first import");
+        commit_import_plan(query_manager, plan).expect("commit first import")
+    }
+
+    fn replan(
+        query_manager: &QueryManager,
+        workspace_id: &str,
+        resources: ImportResources,
+    ) -> ImportPlan {
+        replan_from(query_manager, workspace_id, resources, linked_origin())
+    }
+
+    fn replan_from(
+        query_manager: &QueryManager,
+        workspace_id: &str,
+        resources: ImportResources,
+        origin: ImportOrigin,
+    ) -> ImportPlan {
+        plan_import_resources(
+            query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::ExistingWorkspace {
+                workspace_id: workspace_id.to_string(),
+                folder_id: None,
+            },
+            resources,
+            Some(importer_keys()),
+            Some(origin),
+        )
+        .expect("plan re-import")
+    }
+
+    fn extra_request() -> HttpRequest {
+        HttpRequest {
+            id: "rq_extra".to_string(),
+            model: "http_request".to_string(),
+            workspace_id: "wk_source".to_string(),
+            name: "Extra Request".to_string(),
+            method: "GET".to_string(),
+            url: "https://example.com/extra".to_string(),
+            ..Default::default()
+        }
+    }
+
+    fn select(plan: &mut ImportPlan, name: &str, selected: bool) {
+        let item = plan
+            .items
+            .iter_mut()
+            .find(|i| i.name == name)
+            .unwrap_or_else(|| panic!("no plan item named {name}"));
+        item.selected = selected;
+    }
+
+    fn source_rows(query_manager: &QueryManager, workspace_id: &str) -> Vec<ImportSourceResource> {
+        let db = query_manager.connect();
+        let sources = db.list_import_sources(workspace_id).expect("list import sources");
+        assert_eq!(sources.len(), 1, "expected one linked source: {sources:?}");
+        db.list_import_source_resources(&sources[0].id).expect("list resource rows")
+    }
+
+    fn item_by_name<'a>(plan: &'a ImportPlan, name: &str) -> &'a ImportPlanItem {
+        plan.items
+            .iter()
+            .find(|i| i.name == name)
+            .unwrap_or_else(|| panic!("no plan item named {name}: {:?}", plan.items))
+    }
+
+    #[test]
+    fn commit_records_the_linked_source_and_hashes() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        let source = {
+            let db = query_manager.connect();
+            let source = db
+                .find_import_source(&workspace_id, "OpenAPI", "/tmp/api.yaml")
+                .expect("query import source")
+                .expect("import source recorded");
+            assert_eq!(source.origin_label, "api.yaml");
+
+            let rows = db.list_import_source_resources(&source.id).expect("list resource rows");
+            assert_eq!(rows.len(), 4, "one row per non-workspace resource: {rows:?}");
+            for row in &rows {
+                let model_id = row.model_id.as_deref().expect("row is wanted");
+                let resource = ImportResourceType::from_str(&row.model_type)
+                    .expect("row has a known resource type");
+                let current = existing_model_json(&db, resource, model_id)
+                    .expect("query current model")
+                    .expect("row target exists");
+                assert_eq!(row.content_hash.as_deref(), Some(content_hash(current).as_str()));
+            }
+            source
+        };
+
+        // Re-importing the identical document is a no-op offer: everything unchanged,
+        // ancestry re-rooting does not count as a change, and the base environment it
+        // created stays the base environment.
+        let plan = replan(&query_manager, &workspace_id, imported_resources());
+        assert!(
+            plan.items.iter().all(|i| i.action == ImportPlanAction::Unchanged),
+            "expected all unchanged: {:?}",
+            plan.items
+        );
+        let base = plan
+            .resources
+            .environments
+            .iter()
+            .find(|e| e.name == "Global Variables")
+            .expect("base environment keeps its original name");
+        assert_eq!(base.parent_model, "workspace");
+        commit_import_plan(&query_manager, plan).expect("commit re-import");
+
+        let db = query_manager.connect();
+        assert_eq!(db.list_http_requests(&workspace_id).expect("list requests").len(), 2);
+        assert_eq!(db.list_folders(&workspace_id).expect("list folders").len(), 1);
+        assert_eq!(db.list_environments(&workspace_id).expect("list environments").len(), 1);
+        let rows = db.list_import_source_resources(&source.id).expect("list resource rows");
+        assert_eq!(rows.len(), 4, "re-commit replaces rows instead of accumulating");
+    }
+
+    #[test]
+    fn re_import_merges_source_and_local_changes() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+        let root_id = committed
+            .http_requests
+            .iter()
+            .find(|r| r.name == "Root Request")
+            .expect("root request")
+            .id
+            .clone();
+
+        query_manager
+            .with_tx(|db| {
+                let nested = db
+                    .list_http_requests(&workspace_id)?
+                    .into_iter()
+                    .find(|r| r.name == "Nested Request")
+                    .expect("nested request");
+                db.upsert_http_request(
+                    &HttpRequest {
+                        url: "https://example.com/nested-local".to_string(),
+                        ..nested.clone()
+                    },
+                    &UpdateSource::Background,
+                )
+            })
+            .expect("edit nested request locally");
+
+        let mut resources = imported_resources();
+        resources.http_requests[0].url = "https://example.com/root-v2".to_string();
+        resources.http_requests.push(HttpRequest {
+            id: "rq_extra".to_string(),
+            model: "http_request".to_string(),
+            workspace_id: "wk_source".to_string(),
+            name: "Extra Request".to_string(),
+            method: "GET".to_string(),
+            url: "https://example.com/extra".to_string(),
+            ..Default::default()
+        });
+
+        let plan = replan(&query_manager, &workspace_id, resources);
+        let root = item_by_name(&plan, "Root Request");
+        assert_eq!(root.action, ImportPlanAction::Update);
+        assert!(root.selected);
+        assert_eq!(root.model_id, root_id, "update targets the mapped model");
+        let nested = item_by_name(&plan, "Nested Request");
+        assert_eq!(nested.action, ImportPlanAction::KeepLocal);
+        assert!(!nested.selected);
+        assert_eq!(nested.changed_fields, vec!["url".to_string()], "the preview names the edit");
+        let extra = item_by_name(&plan, "Extra Request");
+        assert_eq!(extra.action, ImportPlanAction::Create);
+        assert!(extra.selected);
+        assert_eq!(item_by_name(&plan, "Imported Folder").action, ImportPlanAction::Unchanged);
+
+        commit_import_plan(&query_manager, plan).expect("commit merge");
+
+        let db = query_manager.connect();
+        let requests = db.list_http_requests(&workspace_id).expect("list requests");
+        assert_eq!(requests.len(), 3);
+        assert_eq!(
+            requests.iter().find(|r| r.name == "Root Request").expect("root").url,
+            "https://example.com/root-v2"
+        );
+        assert_eq!(
+            requests.iter().find(|r| r.name == "Nested Request").expect("nested").url,
+            "https://example.com/nested-local"
+        );
+    }
+
+    #[test]
+    fn rename_in_source_updates_the_same_model() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+        let root_id = committed
+            .http_requests
+            .iter()
+            .find(|r| r.name == "Root Request")
+            .expect("root request")
+            .id
+            .clone();
+
+        let mut resources = imported_resources();
+        resources.http_requests[0].name = "Root Request Renamed".to_string();
+        let plan = replan(&query_manager, &workspace_id, resources);
+        let renamed = item_by_name(&plan, "Root Request Renamed");
+        assert_eq!(renamed.action, ImportPlanAction::Update);
+        assert_eq!(renamed.model_id, root_id);
+
+        commit_import_plan(&query_manager, plan).expect("commit rename");
+        let requests =
+            query_manager.connect().list_http_requests(&workspace_id).expect("list requests");
+        assert_eq!(requests.len(), 2, "rename must not duplicate");
+        assert!(requests.iter().any(|r| r.id == root_id && r.name == "Root Request Renamed"));
+    }
+
+    #[test]
+    fn keep_mine_conflicts_advance_and_are_not_offered_again() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+        let root_id = committed
+            .http_requests
+            .iter()
+            .find(|r| r.name == "Root Request")
+            .expect("root request")
+            .id
+            .clone();
+
+        query_manager
+            .with_tx(|db| {
+                let root = db.get_http_request(&root_id)?;
+                db.upsert_http_request(
+                    &HttpRequest { url: "https://example.com/root-local".to_string(), ..root },
+                    &UpdateSource::Background,
+                )
+            })
+            .expect("edit root locally");
+
+        let mut resources = imported_resources();
+        resources.http_requests[0].url = "https://example.com/root-v2".to_string();
+
+        let plan = replan(&query_manager, &workspace_id, resources.clone());
+        let root = item_by_name(&plan, "Root Request");
+        assert_eq!(root.action, ImportPlanAction::Conflict);
+        assert_eq!(root.resolution, Some(ImportConflictResolution::KeepMine));
+        commit_import_plan(&query_manager, plan).expect("commit keep-mine");
+
+        assert_eq!(
+            query_manager.connect().get_http_request(&root_id).expect("get root").url,
+            "https://example.com/root-local",
+            "keep-mine must not overwrite the local edit"
+        );
+
+        // The decision was recorded, so the same source version stops nagging.
+        let plan = replan(&query_manager, &workspace_id, resources);
+        assert_eq!(item_by_name(&plan, "Root Request").action, ImportPlanAction::KeepLocal);
+
+        // A newer source version conflicts again; taking it overwrites the local edit.
+        let mut resources = imported_resources();
+        resources.http_requests[0].url = "https://example.com/root-v3".to_string();
+        let mut plan = replan(&query_manager, &workspace_id, resources.clone());
+        assert_eq!(item_by_name(&plan, "Root Request").action, ImportPlanAction::Conflict);
+        for item in plan.items.iter_mut() {
+            if item.action == ImportPlanAction::Conflict {
+                item.resolution = Some(ImportConflictResolution::TakeSource);
+            }
+        }
+        commit_import_plan(&query_manager, plan).expect("commit take-source");
+        assert_eq!(
+            query_manager.connect().get_http_request(&root_id).expect("get root").url,
+            "https://example.com/root-v3"
+        );
+        let plan = replan(&query_manager, &workspace_id, resources);
+        assert_eq!(item_by_name(&plan, "Root Request").action, ImportPlanAction::Unchanged);
+    }
+
+    #[test]
+    fn deselected_update_is_offered_again_next_import() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        let mut resources = imported_resources();
+        resources.http_requests[0].url = "https://example.com/root-v2".to_string();
+
+        let mut plan = replan(&query_manager, &workspace_id, resources.clone());
+        for item in plan.items.iter_mut() {
+            if item.action == ImportPlanAction::Update {
+                item.selected = false;
+            }
+        }
+        commit_import_plan(&query_manager, plan).expect("commit with deselected update");
+
+        let db = query_manager.connect();
+        let root = db
+            .list_http_requests(&workspace_id)
+            .expect("list requests")
+            .into_iter()
+            .find(|r| r.name == "Root Request")
+            .expect("root request");
+        assert_eq!(root.url, "https://example.com/root", "deselected update must not apply");
+        drop(db);
+
+        let plan = replan(&query_manager, &workspace_id, resources);
+        assert_eq!(item_by_name(&plan, "Root Request").action, ImportPlanAction::Update);
+    }
+
+    #[test]
+    fn source_removals_are_deselected_offers_until_applied() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        let mut resources = imported_resources();
+        resources.http_requests.remove(1);
+
+        let plan = replan(&query_manager, &workspace_id, resources.clone());
+        let removal = item_by_name(&plan, "Nested Request");
+        assert_eq!(removal.action, ImportPlanAction::Delete);
+        assert!(!removal.selected, "deletions default to deselected");
+        commit_import_plan(&query_manager, plan).expect("commit with default selection");
+        assert_eq!(
+            query_manager.connect().list_http_requests(&workspace_id).expect("list").len(),
+            2,
+            "deselected deletion must not delete"
+        );
+
+        let mut plan = replan(&query_manager, &workspace_id, resources.clone());
+        assert_eq!(item_by_name(&plan, "Nested Request").action, ImportPlanAction::Delete);
+        for item in plan.items.iter_mut() {
+            if item.action == ImportPlanAction::Delete {
+                item.selected = true;
+            }
+        }
+        commit_import_plan(&query_manager, plan).expect("commit with deletion");
+        assert_eq!(
+            query_manager.connect().list_http_requests(&workspace_id).expect("list").len(),
+            1
+        );
+
+        let plan = replan(&query_manager, &workspace_id, resources);
+        assert!(
+            plan.items.iter().all(|i| i.action != ImportPlanAction::Delete),
+            "applied deletion must not be offered again: {:?}",
+            plan.items
+        );
+    }
+
+    #[test]
+    fn locally_deleted_mapped_model_is_not_resurrected() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+        let root_id = committed
+            .http_requests
+            .iter()
+            .find(|r| r.name == "Root Request")
+            .expect("root request")
+            .id
+            .clone();
+
+        query_manager
+            .with_tx(|tx| tx.delete_http_request_by_id(&root_id, &UpdateSource::Background))
+            .expect("delete root locally");
+
+        let plan = replan(&query_manager, &workspace_id, imported_resources());
+        let root = item_by_name(&plan, "Root Request");
+        assert_eq!(root.action, ImportPlanAction::Ignored, "deleting it means not wanting it");
+        assert!(!root.selected);
+        assert_ne!(root.model_id, root_id);
+
+        commit_import_plan(&query_manager, plan).expect("commit re-import");
+        assert_eq!(
+            query_manager.connect().list_http_requests(&workspace_id).expect("list").len(),
+            1,
+            "a locally deleted resource must not come back"
+        );
+
+        let plan = replan(&query_manager, &workspace_id, imported_resources());
+        assert_eq!(item_by_name(&plan, "Root Request").action, ImportPlanAction::Ignored);
+    }
+
+    #[test]
+    fn deselected_create_is_not_offered_again() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        let mut resources = imported_resources();
+        resources.http_requests.push(extra_request());
+
+        let mut plan = replan(&query_manager, &workspace_id, resources.clone());
+        assert_eq!(item_by_name(&plan, "Extra Request").action, ImportPlanAction::Create);
+        select(&mut plan, "Extra Request", false);
+        commit_import_plan(&query_manager, plan).expect("commit with deselected create");
+        assert_eq!(
+            query_manager.connect().list_http_requests(&workspace_id).expect("list").len(),
+            2,
+            "a deselected create must not be created"
+        );
+
+        let plan = replan(&query_manager, &workspace_id, resources);
+        let extra = item_by_name(&plan, "Extra Request");
+        assert_eq!(extra.action, ImportPlanAction::Ignored, "deselecting it is remembered");
+        assert!(!extra.selected);
+    }
+
+    #[test]
+    fn restoring_an_ignored_item_relinks_its_source_key() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        let mut resources = imported_resources();
+        resources.http_requests.push(extra_request());
+
+        let mut plan = replan(&query_manager, &workspace_id, resources.clone());
+        select(&mut plan, "Extra Request", false);
+        commit_import_plan(&query_manager, plan).expect("commit with deselected create");
+
+        let mut plan = replan(&query_manager, &workspace_id, resources.clone());
+        assert_eq!(item_by_name(&plan, "Extra Request").action, ImportPlanAction::Ignored);
+        select(&mut plan, "Extra Request", true);
+        commit_import_plan(&query_manager, plan).expect("commit with restored item");
+
+        let extra = query_manager
+            .connect()
+            .list_http_requests(&workspace_id)
+            .expect("list")
+            .into_iter()
+            .find(|r| r.name == "Extra Request")
+            .expect("restored request exists");
+        let rows = source_rows(&query_manager, &workspace_id);
+        let row = rows.iter().find(|r| r.source_key == "op:extra").expect("row for the same key");
+        assert_eq!(row.model_id.as_deref(), Some(extra.id.as_str()), "the key links to the model");
+
+        let plan = replan(&query_manager, &workspace_id, resources);
+        assert_eq!(item_by_name(&plan, "Extra Request").action, ImportPlanAction::Unchanged);
+    }
+
+    #[test]
+    fn moving_into_an_ignored_folder_waits_for_the_folder() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+        let root_id = committed
+            .http_requests
+            .iter()
+            .find(|r| r.name == "Root Request")
+            .expect("root request")
+            .id
+            .clone();
+
+        let with_extra_folder = |root_inside: bool| {
+            let mut resources = imported_resources();
+            resources.folders.push(Folder {
+                id: "fl_extra".to_string(),
+                model: "folder".to_string(),
+                workspace_id: "wk_source".to_string(),
+                name: "Extra Folder".to_string(),
+                ..Default::default()
+            });
+            if root_inside {
+                resources.http_requests[0].folder_id = Some("fl_extra".to_string());
+            }
+            resources
+        };
+
+        let mut plan = replan(&query_manager, &workspace_id, with_extra_folder(false));
+        select(&mut plan, "Extra Folder", false);
+        commit_import_plan(&query_manager, plan).expect("commit without the new folder");
+
+        // The source moves an imported request into the folder that was turned down.
+        let plan = replan(&query_manager, &workspace_id, with_extra_folder(true));
+        assert_eq!(item_by_name(&plan, "Extra Folder").action, ImportPlanAction::Ignored);
+        let root = item_by_name(&plan, "Root Request");
+        assert_eq!(root.action, ImportPlanAction::Update, "a move is not a removal");
+        assert!(!root.selected, "it has nowhere to go until the folder is imported");
+        assert_eq!(root.reason, Some(ImportPlanReason::MovedIntoIgnoredFolder));
+
+        // Anything new inside that folder can't be created either, so it waits for the folder.
+        let mut resources = with_extra_folder(true);
+        resources
+            .http_requests
+            .push(HttpRequest { folder_id: Some("fl_extra".to_string()), ..extra_request() });
+        let plan = replan(&query_manager, &workspace_id, resources);
+        let extra = item_by_name(&plan, "Extra Request");
+        assert_eq!(extra.action, ImportPlanAction::Create);
+        assert!(!extra.selected, "a create with nowhere to go starts unchecked");
+
+        // Leaving it alone keeps the request where it is.
+        let plan = replan(&query_manager, &workspace_id, with_extra_folder(true));
+        commit_import_plan(&query_manager, plan).expect("commit the default selection");
+        let root_folder = query_manager
+            .connect()
+            .get_http_request(&root_id)
+            .expect("root request survives")
+            .folder_id;
+        assert_eq!(root_folder, None, "an unapplied move leaves it in place");
+
+        // Importing the folder is what follows the move, in one pass.
+        let mut plan = replan(&query_manager, &workspace_id, with_extra_folder(true));
+        select(&mut plan, "Extra Folder", true);
+        select(&mut plan, "Root Request", true);
+        commit_import_plan(&query_manager, plan).expect("commit the folder and the move");
+
+        let db = query_manager.connect();
+        let folder = db
+            .list_folders(&workspace_id)
+            .expect("list folders")
+            .into_iter()
+            .find(|f| f.name == "Extra Folder")
+            .expect("the folder is imported");
+        let root = db.get_http_request(&root_id).expect("root request still exists");
+        assert_eq!(root.folder_id, Some(folder.id), "the request follows the move");
+    }
+
+    #[test]
+    fn a_source_that_moved_still_merges_and_updates_its_origin() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        let moved =
+            ImportOrigin { origin: "/tmp/api/v1.yaml".to_string(), label: "v1.yaml".to_string() };
+        let mut resources = imported_resources();
+        resources.http_requests[0].url = "https://example.com/root-v2".to_string();
+
+        let plan = replan_from(&query_manager, &workspace_id, resources, moved.clone());
+        assert!(plan.warnings.iter().all(|w| w.title != "Imported as new"), "{:?}", plan.warnings);
+        assert_eq!(item_by_name(&plan, "Root Request").action, ImportPlanAction::Update);
+        commit_import_plan(&query_manager, plan).expect("commit merge from the new path");
+
+        let db = query_manager.connect();
+        assert_eq!(
+            db.list_http_requests(&workspace_id).expect("list").len(),
+            2,
+            "a renamed file must not duplicate what it created"
+        );
+        let sources = db.list_import_sources(&workspace_id).expect("list import sources");
+        assert_eq!(sources.len(), 1, "the link follows the file: {sources:?}");
+        assert_eq!(sources[0].origin, moved.origin);
+        assert_eq!(sources[0].origin_label, moved.label);
+    }
+
+    #[test]
+    fn an_ambiguous_overlap_warns_instead_of_merging() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        // A second source claiming the same keys leaves nothing to merge into safely.
+        query_manager
+            .with_tx(|db| {
+                let other = db.upsert_import_source(
+                    &ImportSource {
+                        workspace_id: workspace_id.clone(),
+                        importer: "OpenAPI".to_string(),
+                        origin: "/tmp/copy.yaml".to_string(),
+                        origin_label: "copy.yaml".to_string(),
+                        ..Default::default()
+                    },
+                    &UpdateSource::Import,
+                )?;
+                for key in ["env:base", "folder:src", "op:root", "op:nested"] {
+                    db.upsert_import_source_resource(&ImportSourceResource {
+                        import_source_id: other.id.clone(),
+                        source_key: key.to_string(),
+                        model_type: "http_request".to_string(),
+                        ..Default::default()
+                    })?;
+                }
+                Ok::<_, yaak_models::error::Error>(())
+            })
+            .expect("claim the same keys");
+
+        let third =
+            ImportOrigin { origin: "/tmp/third.yaml".to_string(), label: "third.yaml".to_string() };
+        let plan = replan_from(&query_manager, &workspace_id, imported_resources(), third);
+        assert!(
+            plan.items.iter().all(|i| i.action == ImportPlanAction::Create),
+            "an ambiguous link must never guess: {:?}",
+            plan.items
+        );
+        let warning = plan
+            .warnings
+            .iter()
+            .find(|w| w.title == "Imported as new")
+            .expect("ambiguity is surfaced");
+        assert!(warning.detail.contains("api.yaml"), "{warning:?}");
+        assert!(warning.detail.contains("copy.yaml"), "{warning:?}");
+    }
+
+    #[test]
+    fn a_stray_shared_key_does_not_link_an_unrelated_document() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+        let root_id = committed
+            .http_requests
+            .iter()
+            .find(|r| r.name == "Root Request")
+            .expect("root request")
+            .id
+            .clone();
+
+        // Another document that happens to name one operation the same way.
+        let resources = ImportResources {
+            http_requests: vec![HttpRequest {
+                id: "rq_root".to_string(),
+                model: "http_request".to_string(),
+                workspace_id: "wk_source".to_string(),
+                name: "Unrelated Request".to_string(),
+                method: "GET".to_string(),
+                url: "https://unrelated.example.com".to_string(),
+                ..Default::default()
+            }],
+            ..Default::default()
+        };
+        let origin =
+            ImportOrigin { origin: "/tmp/other.yaml".to_string(), label: "other.yaml".to_string() };
+
+        let plan = replan_from(&query_manager, &workspace_id, resources, origin);
+        let unrelated = item_by_name(&plan, "Unrelated Request");
+        assert_eq!(unrelated.action, ImportPlanAction::Create, "one key in common proves nothing");
+        assert_ne!(unrelated.model_id, root_id, "it must not adopt another document's model");
+
+        commit_import_plan(&query_manager, plan).expect("commit the unrelated import");
+        let db = query_manager.connect();
+        assert_eq!(
+            db.get_http_request(&root_id).expect("root request survives").url,
+            "https://example.com/root"
+        );
+        assert_eq!(db.list_http_requests(&workspace_id).expect("list").len(), 3);
+    }
+
+    #[test]
+    fn an_ignored_key_stays_ignored_while_the_source_omits_it() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        let mut with_extra = imported_resources();
+        with_extra.http_requests.push(extra_request());
+
+        let mut plan = replan(&query_manager, &workspace_id, with_extra.clone());
+        select(&mut plan, "Extra Request", false);
+        commit_import_plan(&query_manager, plan).expect("commit with the create turned down");
+
+        // The source drops it for a release, then brings it back.
+        let plan = replan(&query_manager, &workspace_id, imported_resources());
+        assert!(plan.items.iter().all(|i| i.name != "Extra Request"), "{:?}", plan.items);
+        commit_import_plan(&query_manager, plan).expect("commit without it");
+
+        let plan = replan(&query_manager, &workspace_id, with_extra);
+        let extra = item_by_name(&plan, "Extra Request");
+        assert_eq!(extra.action, ImportPlanAction::Ignored, "the answer outlives the absence");
+        assert!(!extra.selected);
+    }
+
+    #[test]
+    fn an_unrecognized_hash_degrades_to_a_conflict() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        query_manager
+            .with_tx(|db| {
+                let sources = db.list_import_sources(&workspace_id)?;
+                let row = db
+                    .list_import_source_resources(&sources[0].id)?
+                    .into_iter()
+                    .find(|r| r.source_key == "op:root")
+                    .expect("row for the root request");
+                db.upsert_import_source_resource(&ImportSourceResource {
+                    content_hash: Some("v99:from-the-future".to_string()),
+                    ..row
+                })
+            })
+            .expect("write an unreadable hash");
+
+        let plan = replan(&query_manager, &workspace_id, imported_resources());
+        assert_eq!(
+            item_by_name(&plan, "Root Request").action,
+            ImportPlanAction::Unchanged,
+            "with nothing to compare against, matching sides are still unchanged"
+        );
+
+        let mut resources = imported_resources();
+        resources.http_requests[0].url = "https://example.com/root-v2".to_string();
+        let plan = replan(&query_manager, &workspace_id, resources);
+        let root = item_by_name(&plan, "Root Request");
+        assert_eq!(root.action, ImportPlanAction::Conflict, "a difference can't be attributed");
+        assert_eq!(root.resolution, Some(ImportConflictResolution::KeepMine));
+    }
+
+    #[test]
+    fn filling_in_editor_row_ids_is_not_an_edit() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let mut resources = imported_resources();
+        resources.http_requests[0].headers = vec![HttpRequestHeader {
+            enabled: true,
+            name: "Accept".to_string(),
+            value: "application/json".to_string(),
+            id: None,
+        }];
+        let committed = first_import_with(&query_manager, resources.clone());
+        let workspace_id = committed.workspaces[0].id.clone();
+        let root_id = committed
+            .http_requests
+            .iter()
+            .find(|r| r.name == "Root Request")
+            .expect("root request")
+            .id
+            .clone();
+
+        // Opening the request in the editor stamps a row ID onto every header it renders.
+        query_manager
+            .with_tx(|db| {
+                let root = db.get_http_request(&root_id)?;
+                let headers = root
+                    .headers
+                    .iter()
+                    .map(|h| HttpRequestHeader {
+                        id: Some("hd_generated".to_string()),
+                        ..h.clone()
+                    })
+                    .collect();
+                db.upsert_http_request(&HttpRequest { headers, ..root }, &UpdateSource::Background)
+            })
+            .expect("stamp row ids");
+
+        let plan = replan(&query_manager, &workspace_id, resources);
+        assert_eq!(
+            item_by_name(&plan, "Root Request").action,
+            ImportPlanAction::Unchanged,
+            "a row ID is not content: {:?}",
+            item_by_name(&plan, "Root Request").changed_fields,
+        );
+    }
+
+    #[test]
+    fn reordering_the_source_document_changes_nothing() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        // Inserting anything ahead of an existing resource renumbers everything after it.
+        let mut resources = imported_resources();
+        for (i, request) in resources.http_requests.iter_mut().enumerate() {
+            request.sort_priority = (i as f64 + 1.0) * 1000.0;
+        }
+        resources.folders[0].sort_priority = 500.0;
+
+        let plan = replan(&query_manager, &workspace_id, resources);
+        assert!(
+            plan.items.iter().all(|i| i.action == ImportPlanAction::Unchanged),
+            "a reorder is not a change: {:?}",
+            plan.items
+        );
+    }
+
+    #[test]
+    fn deselecting_a_new_folder_skips_its_descendants() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let mut plan = plan_import_resources(
+            &query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::NewWorkspace,
+            imported_resources(),
+            Some(importer_keys()),
+            Some(linked_origin()),
+        )
+        .expect("plan import");
+
+        assert_eq!(plan.items.len(), 4, "one create item per non-workspace resource");
+        assert!(plan.items.iter().all(|i| i.action == ImportPlanAction::Create && i.selected));
+
+        for item in plan.items.iter_mut() {
+            if item.model == ImportResourceType::Folder {
+                item.selected = false;
+            }
+        }
+        let committed = commit_import_plan(&query_manager, plan).expect("commit import");
+        let workspace_id = committed.workspaces[0].id.clone();
+
+        let db = query_manager.connect();
+        assert!(db.list_folders(&workspace_id).expect("list folders").is_empty());
+        let requests = db.list_http_requests(&workspace_id).expect("list requests");
+        assert_eq!(requests.len(), 1, "requests inside the skipped folder are skipped too");
+        assert_eq!(requests[0].name, "Root Request");
+
+        let source = db
+            .find_import_source(&workspace_id, "OpenAPI", "/tmp/api.yaml")
+            .expect("query import source")
+            .expect("import source recorded");
+        let rows = db.list_import_source_resources(&source.id).expect("list resource rows");
+        assert_eq!(rows.len(), 4, "every key is remembered, wanted or not: {rows:?}");
+        let not_wanted = rows.iter().filter(|r| r.model_id.is_none()).count();
+        assert_eq!(not_wanted, 2, "the skipped folder and its request are remembered: {rows:?}");
+    }
+
+    #[test]
+    fn desktop_style_json_roundtrip_records_source() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let plan = plan_import_resources(
+            &query_manager,
+            "OpenAPI".to_string(),
+            ImportDestination::NewWorkspace,
+            imported_resources(),
+            None,
+            Some(linked_origin()),
+        )
+        .expect("plan import");
+        let json = serde_json::to_string(&plan).expect("serialize plan");
+        let plan: ImportPlan = serde_json::from_str(&json).expect("deserialize plan");
+        let committed = commit_import_plan(&query_manager, plan).expect("commit");
+        let workspace_id = committed.workspaces[0].id.clone();
+        let source = query_manager
+            .connect()
+            .find_import_source(&workspace_id, "OpenAPI", "/tmp/api.yaml")
+            .expect("query")
+            .expect("source recorded after JSON round-trip");
+        assert_eq!(source.origin_label, "api.yaml");
+    }
+
+    #[test]
+    fn selected_keep_local_reverts_the_local_edit() {
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_in_memory().expect("initialize database");
+        let committed = first_import(&query_manager);
+        let workspace_id = committed.workspaces[0].id.clone();
+        let root_id = committed
+            .http_requests
+            .iter()
+            .find(|r| r.name == "Root Request")
+            .expect("root request")
+            .id
+            .clone();
+
+        query_manager
+            .with_tx(|db| {
+                let root = db.get_http_request(&root_id)?;
+                db.upsert_http_request(
+                    &HttpRequest { url: "https://example.com/root-local".to_string(), ..root },
+                    &UpdateSource::Background,
+                )
+            })
+            .expect("edit root locally");
+
+        let mut plan = replan(&query_manager, &workspace_id, imported_resources());
+        let root = item_by_name(&plan, "Root Request");
+        assert_eq!(root.action, ImportPlanAction::KeepLocal);
+        assert!(!root.selected, "keep-local defaults to keeping the local edit");
+        for item in plan.items.iter_mut() {
+            if item.action == ImportPlanAction::KeepLocal {
+                item.selected = true;
+            }
+        }
+        commit_import_plan(&query_manager, plan).expect("commit revert");
+
+        assert_eq!(
+            query_manager.connect().get_http_request(&root_id).expect("get root").url,
+            "https://example.com/root",
+            "selected keep-local must revert to the source version"
+        );
+        let plan = replan(&query_manager, &workspace_id, imported_resources());
+        assert_eq!(item_by_name(&plan, "Root Request").action, ImportPlanAction::Unchanged);
+    }
+}
diff --git a/crates/yaak/src/lib.rs b/crates/yaak/src/lib.rs
new file mode 100644
index 0000000..6d8aedf
--- /dev/null
+++ b/crates/yaak/src/lib.rs
@@ -0,0 +1,8 @@
+pub mod error;
+pub mod import;
+pub mod plugin_events;
+pub mod response_body;
+pub mod send;
+
+pub use error::Error;
+pub type Result<T> = error::Result<T>;
diff --git a/crates/yaak/src/plugin_events.rs b/crates/yaak/src/plugin_events.rs
new file mode 100644
index 0000000..136e697
--- /dev/null
+++ b/crates/yaak/src/plugin_events.rs
@@ -0,0 +1,815 @@
+use crate::response_body::ResponseBodyStore;
+use base64::Engine;
+use base64::prelude::BASE64_STANDARD;
+use log::warn;
+use yaak_models::models::AnyModel;
+use yaak_models::query_manager::QueryManager;
+use yaak_models::util::UpdateSource;
+use yaak_plugins::events::{
+    CloseWindowRequest, CopyTextRequest, DeleteKeyValueRequest, DeleteKeyValueResponse,
+    DeleteModelRequest, DeleteModelResponse, ErrorResponse, FindHttpResponsesRequest,
+    FindHttpResponsesResponse, GetCookieValueRequest, GetHttpRequestByIdRequest,
+    GetHttpRequestByIdResponse, GetHttpResponseBodyInfoRequest, GetHttpResponseBodyInfoResponse,
+    GetKeyValueRequest, GetKeyValueResponse, InternalEventPayload, ListCookieNamesRequest,
+    ListFoldersRequest, ListFoldersResponse, ListHttpRequestsRequest, ListHttpRequestsResponse,
+    ListOpenWorkspacesRequest, OpenExternalUrlRequest, OpenWindowRequest, PromptFormRequest,
+    PromptTextRequest, ReadHttpResponseBodyChunkRequest, ReadHttpResponseBodyChunkResponse,
+    ReloadResponse, RenderGrpcRequestRequest, RenderHttpRequestRequest, SendHttpRequestRequest,
+    SetKeyValueRequest, ShowToastRequest, TemplateRenderRequest, UpsertModelRequest,
+    UpsertModelResponse, WindowInfoRequest,
+};
+
+pub struct SharedPluginEventContext<'a> {
+    pub plugin_name: &'a str,
+    pub workspace_id: Option<&'a str>,
+}
+
+#[derive(Debug)]
+pub enum GroupedPluginEvent<'a> {
+    Handled(Option<InternalEventPayload>),
+    ToHandle(HostRequest<'a>),
+}
+
+#[derive(Debug)]
+pub enum GroupedPluginRequest<'a> {
+    Shared(SharedRequest<'a>),
+    Host(HostRequest<'a>),
+    Ignore,
+}
+
+#[derive(Debug)]
+pub enum SharedRequest<'a> {
+    GetKeyValue(&'a GetKeyValueRequest),
+    SetKeyValue(&'a SetKeyValueRequest),
+    DeleteKeyValue(&'a DeleteKeyValueRequest),
+    GetHttpRequestById(&'a GetHttpRequestByIdRequest),
+    ListFolders(&'a ListFoldersRequest),
+    ListHttpRequests(&'a ListHttpRequestsRequest),
+    FindHttpResponses(&'a FindHttpResponsesRequest),
+    GetHttpResponseBodyInfo(&'a GetHttpResponseBodyInfoRequest),
+    ReadHttpResponseBodyChunk(&'a ReadHttpResponseBodyChunkRequest),
+    UpsertModel(&'a UpsertModelRequest),
+    DeleteModel(&'a DeleteModelRequest),
+}
+
+#[derive(Debug)]
+pub enum HostRequest<'a> {
+    ShowToast(&'a ShowToastRequest),
+    CopyText(&'a CopyTextRequest),
+    PromptText(&'a PromptTextRequest),
+    PromptForm(&'a PromptFormRequest),
+    RenderGrpcRequest(&'a RenderGrpcRequestRequest),
+    RenderHttpRequest(&'a RenderHttpRequestRequest),
+    TemplateRender(&'a TemplateRenderRequest),
+    SendHttpRequest(&'a SendHttpRequestRequest),
+    OpenWindow(&'a OpenWindowRequest),
+    CloseWindow(&'a CloseWindowRequest),
+    OpenExternalUrl(&'a OpenExternalUrlRequest),
+    ListOpenWorkspaces(&'a ListOpenWorkspacesRequest),
+    ListCookieNames(&'a ListCookieNamesRequest),
+    GetCookieValue(&'a GetCookieValueRequest),
+    WindowInfo(&'a WindowInfoRequest),
+    ErrorResponse(&'a ErrorResponse),
+    ReloadResponse(&'a ReloadResponse),
+    OtherRequest(&'a InternalEventPayload),
+}
+
+impl HostRequest<'_> {
+    pub fn type_name(&self) -> String {
+        match self {
+            HostRequest::ShowToast(_) => "show_toast_request".to_string(),
+            HostRequest::CopyText(_) => "copy_text_request".to_string(),
+            HostRequest::PromptText(_) => "prompt_text_request".to_string(),
+            HostRequest::PromptForm(_) => "prompt_form_request".to_string(),
+            HostRequest::RenderGrpcRequest(_) => "render_grpc_request_request".to_string(),
+            HostRequest::RenderHttpRequest(_) => "render_http_request_request".to_string(),
+            HostRequest::TemplateRender(_) => "template_render_request".to_string(),
+            HostRequest::SendHttpRequest(_) => "send_http_request_request".to_string(),
+            HostRequest::OpenWindow(_) => "open_window_request".to_string(),
+            HostRequest::CloseWindow(_) => "close_window_request".to_string(),
+            HostRequest::OpenExternalUrl(_) => "open_external_url_request".to_string(),
+            HostRequest::ListOpenWorkspaces(_) => "list_open_workspaces_request".to_string(),
+            HostRequest::ListCookieNames(_) => "list_cookie_names_request".to_string(),
+            HostRequest::GetCookieValue(_) => "get_cookie_value_request".to_string(),
+            HostRequest::WindowInfo(_) => "window_info_request".to_string(),
+            HostRequest::ErrorResponse(_) => "error_response".to_string(),
+            HostRequest::ReloadResponse(_) => "reload_response".to_string(),
+            HostRequest::OtherRequest(payload) => payload.type_name(),
+        }
+    }
+}
+
+impl<'a> From<&'a InternalEventPayload> for GroupedPluginRequest<'a> {
+    fn from(payload: &'a InternalEventPayload) -> Self {
+        match payload {
+            InternalEventPayload::GetKeyValueRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::GetKeyValue(req))
+            }
+            InternalEventPayload::SetKeyValueRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::SetKeyValue(req))
+            }
+            InternalEventPayload::DeleteKeyValueRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::DeleteKeyValue(req))
+            }
+            InternalEventPayload::GetHttpRequestByIdRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::GetHttpRequestById(req))
+            }
+            InternalEventPayload::ErrorResponse(resp) => {
+                GroupedPluginRequest::Host(HostRequest::ErrorResponse(resp))
+            }
+            InternalEventPayload::ReloadResponse(req) => {
+                GroupedPluginRequest::Host(HostRequest::ReloadResponse(req))
+            }
+            InternalEventPayload::ListOpenWorkspacesRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::ListOpenWorkspaces(req))
+            }
+            InternalEventPayload::ListFoldersRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::ListFolders(req))
+            }
+            InternalEventPayload::ListHttpRequestsRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::ListHttpRequests(req))
+            }
+            InternalEventPayload::ShowToastRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::ShowToast(req))
+            }
+            InternalEventPayload::CopyTextRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::CopyText(req))
+            }
+            InternalEventPayload::PromptTextRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::PromptText(req))
+            }
+            InternalEventPayload::PromptFormRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::PromptForm(req))
+            }
+            InternalEventPayload::FindHttpResponsesRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::FindHttpResponses(req))
+            }
+            InternalEventPayload::GetHttpResponseBodyInfoRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::GetHttpResponseBodyInfo(req))
+            }
+            InternalEventPayload::ReadHttpResponseBodyChunkRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::ReadHttpResponseBodyChunk(req))
+            }
+            InternalEventPayload::UpsertModelRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::UpsertModel(req))
+            }
+            InternalEventPayload::DeleteModelRequest(req) => {
+                GroupedPluginRequest::Shared(SharedRequest::DeleteModel(req))
+            }
+            InternalEventPayload::RenderGrpcRequestRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::RenderGrpcRequest(req))
+            }
+            InternalEventPayload::RenderHttpRequestRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::RenderHttpRequest(req))
+            }
+            InternalEventPayload::TemplateRenderRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::TemplateRender(req))
+            }
+            InternalEventPayload::SendHttpRequestRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::SendHttpRequest(req))
+            }
+            InternalEventPayload::OpenWindowRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::OpenWindow(req))
+            }
+            InternalEventPayload::CloseWindowRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::CloseWindow(req))
+            }
+            InternalEventPayload::OpenExternalUrlRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::OpenExternalUrl(req))
+            }
+            InternalEventPayload::ListCookieNamesRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::ListCookieNames(req))
+            }
+            InternalEventPayload::GetCookieValueRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::GetCookieValue(req))
+            }
+            InternalEventPayload::WindowInfoRequest(req) => {
+                GroupedPluginRequest::Host(HostRequest::WindowInfo(req))
+            }
+            payload if payload.type_name().ends_with("_request") => {
+                GroupedPluginRequest::Host(HostRequest::OtherRequest(payload))
+            }
+            _ => GroupedPluginRequest::Ignore,
+        }
+    }
+}
+
+pub fn handle_shared_plugin_event<'a>(
+    query_manager: &QueryManager,
+    body_store: &dyn ResponseBodyStore,
+    payload: &'a InternalEventPayload,
+    context: SharedPluginEventContext<'_>,
+) -> GroupedPluginEvent<'a> {
+    match GroupedPluginRequest::from(payload) {
+        GroupedPluginRequest::Shared(req) => GroupedPluginEvent::Handled(Some(build_shared_reply(
+            query_manager,
+            body_store,
+            req,
+            context,
+        ))),
+        GroupedPluginRequest::Host(req) => GroupedPluginEvent::ToHandle(req),
+        GroupedPluginRequest::Ignore => GroupedPluginEvent::Handled(None),
+    }
+}
+
+fn build_shared_reply(
+    query_manager: &QueryManager,
+    body_store: &dyn ResponseBodyStore,
+    request: SharedRequest<'_>,
+    context: SharedPluginEventContext<'_>,
+) -> InternalEventPayload {
+    match request {
+        SharedRequest::GetKeyValue(req) => {
+            let value = query_manager
+                .connect()
+                .get_plugin_key_value(context.plugin_name, &req.key)
+                .map(|v| v.value);
+            InternalEventPayload::GetKeyValueResponse(GetKeyValueResponse { value })
+        }
+        SharedRequest::SetKeyValue(req) => {
+            if let Err(e) = query_manager.with_tx(|tx| {
+                tx.set_plugin_key_value(context.plugin_name, &req.key, &req.value);
+                Ok::<(), yaak_models::error::Error>(())
+            }) {
+                warn!("Failed to set plugin key value: {e}");
+            }
+            InternalEventPayload::SetKeyValueResponse(yaak_plugins::events::SetKeyValueResponse {})
+        }
+        SharedRequest::DeleteKeyValue(req) => {
+            match query_manager
+                .with_tx(|tx| tx.delete_plugin_key_value(context.plugin_name, &req.key))
+            {
+                Ok(deleted) => {
+                    InternalEventPayload::DeleteKeyValueResponse(DeleteKeyValueResponse { deleted })
+                }
+                Err(err) => InternalEventPayload::ErrorResponse(ErrorResponse {
+                    error: format!("Failed to delete plugin key '{}' : {err}", req.key),
+                }),
+            }
+        }
+        SharedRequest::GetHttpRequestById(req) => {
+            let http_request = query_manager.connect().get_http_request(&req.id).ok();
+            InternalEventPayload::GetHttpRequestByIdResponse(GetHttpRequestByIdResponse {
+                http_request,
+            })
+        }
+        SharedRequest::ListFolders(_) => {
+            let Some(workspace_id) = context.workspace_id else {
+                return InternalEventPayload::ErrorResponse(ErrorResponse {
+                    error: "workspace_id is required for list_folders_request".to_string(),
+                });
+            };
+            let folders = match query_manager.connect().list_folders(workspace_id) {
+                Ok(folders) => folders,
+                Err(err) => {
+                    return InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: format!("Failed to list folders: {err}"),
+                    });
+                }
+            };
+            InternalEventPayload::ListFoldersResponse(ListFoldersResponse { folders })
+        }
+        SharedRequest::ListHttpRequests(req) => {
+            let http_requests = if let Some(folder_id) = req.folder_id.as_deref() {
+                match query_manager.connect().list_http_requests_for_folder_recursive(folder_id) {
+                    Ok(http_requests) => http_requests,
+                    Err(err) => {
+                        return InternalEventPayload::ErrorResponse(ErrorResponse {
+                            error: format!("Failed to list HTTP requests for folder: {err}"),
+                        });
+                    }
+                }
+            } else {
+                let Some(workspace_id) = context.workspace_id else {
+                    return InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error:
+                            "workspace_id is required for list_http_requests_request without folder_id"
+                                .to_string(),
+                    });
+                };
+                match query_manager.connect().list_http_requests(workspace_id) {
+                    Ok(http_requests) => http_requests,
+                    Err(err) => {
+                        return InternalEventPayload::ErrorResponse(ErrorResponse {
+                            error: format!("Failed to list HTTP requests: {err}"),
+                        });
+                    }
+                }
+            };
+            InternalEventPayload::ListHttpRequestsResponse(ListHttpRequestsResponse {
+                http_requests,
+            })
+        }
+        SharedRequest::FindHttpResponses(req) => {
+            let http_responses = query_manager
+                .connect()
+                .list_http_responses_for_request(&req.request_id, req.limit.map(|l| l as u64))
+                .unwrap_or_default();
+            InternalEventPayload::FindHttpResponsesResponse(FindHttpResponsesResponse {
+                http_responses,
+            })
+        }
+        SharedRequest::GetHttpResponseBodyInfo(req) => match body_store.info(&req.response_id) {
+            Ok(info) => InternalEventPayload::GetHttpResponseBodyInfoResponse(
+                GetHttpResponseBodyInfoResponse {
+                    content_length: info.content_length,
+                    content_type: info.content_type,
+                    complete: info.complete,
+                },
+            ),
+            Err(err) => InternalEventPayload::ErrorResponse(ErrorResponse {
+                error: format!("Failed to read body of response {}: {err}", req.response_id),
+            }),
+        },
+        SharedRequest::ReadHttpResponseBodyChunk(req) => {
+            match body_store.read_chunk(&req.response_id, req.offset, req.length) {
+                Ok(bytes) => InternalEventPayload::ReadHttpResponseBodyChunkResponse(
+                    ReadHttpResponseBodyChunkResponse {
+                        length: bytes.len() as u64,
+                        data: BASE64_STANDARD.encode(bytes),
+                    },
+                ),
+                Err(err) => InternalEventPayload::ErrorResponse(ErrorResponse {
+                    error: format!("Failed to read body of response {}: {err}", req.response_id),
+                }),
+            }
+        }
+        SharedRequest::UpsertModel(req) => {
+            use AnyModel::*;
+
+            let model = match &req.model {
+                HttpRequest(m) => {
+                    match query_manager
+                        .with_tx(|tx| tx.upsert_http_request(m, &UpdateSource::Plugin))
+                    {
+                        Ok(model) => HttpRequest(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to upsert HTTP request: {err}"),
+                            });
+                        }
+                    }
+                }
+                GrpcRequest(m) => {
+                    match query_manager
+                        .with_tx(|tx| tx.upsert_grpc_request(m, &UpdateSource::Plugin))
+                    {
+                        Ok(model) => GrpcRequest(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to upsert gRPC request: {err}"),
+                            });
+                        }
+                    }
+                }
+                WebsocketRequest(m) => {
+                    match query_manager
+                        .with_tx(|tx| tx.upsert_websocket_request(m, &UpdateSource::Plugin))
+                    {
+                        Ok(model) => WebsocketRequest(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to upsert WebSocket request: {err}"),
+                            });
+                        }
+                    }
+                }
+                Folder(m) => {
+                    match query_manager.with_tx(|tx| tx.upsert_folder(m, &UpdateSource::Plugin)) {
+                        Ok(model) => Folder(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to upsert folder: {err}"),
+                            });
+                        }
+                    }
+                }
+                Environment(m) => {
+                    match query_manager
+                        .with_tx(|tx| tx.upsert_environment(m, &UpdateSource::Plugin))
+                    {
+                        Ok(model) => Environment(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to upsert environment: {err}"),
+                            });
+                        }
+                    }
+                }
+                Workspace(m) => {
+                    match query_manager.with_tx(|tx| tx.upsert_workspace(m, &UpdateSource::Plugin))
+                    {
+                        Ok(model) => Workspace(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to upsert workspace: {err}"),
+                            });
+                        }
+                    }
+                }
+                _ => {
+                    return InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: "Upsert not supported for this model type".to_string(),
+                    });
+                }
+            };
+
+            InternalEventPayload::UpsertModelResponse(UpsertModelResponse { model })
+        }
+        SharedRequest::DeleteModel(req) => {
+            let model = match req.model.as_str() {
+                "http_request" => {
+                    match query_manager
+                        .with_tx(|tx| tx.delete_http_request_by_id(&req.id, &UpdateSource::Plugin))
+                    {
+                        Ok(model) => AnyModel::HttpRequest(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to delete HTTP request: {err}"),
+                            });
+                        }
+                    }
+                }
+                "grpc_request" => {
+                    match query_manager
+                        .with_tx(|tx| tx.delete_grpc_request_by_id(&req.id, &UpdateSource::Plugin))
+                    {
+                        Ok(model) => AnyModel::GrpcRequest(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to delete gRPC request: {err}"),
+                            });
+                        }
+                    }
+                }
+                "websocket_request" => {
+                    match query_manager.with_tx(|tx| {
+                        tx.delete_websocket_request_by_id(&req.id, &UpdateSource::Plugin)
+                    }) {
+                        Ok(model) => AnyModel::WebsocketRequest(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to delete WebSocket request: {err}"),
+                            });
+                        }
+                    }
+                }
+                "folder" => match query_manager
+                    .with_tx(|tx| tx.delete_folder_by_id(&req.id, &UpdateSource::Plugin))
+                {
+                    Ok(model) => AnyModel::Folder(model),
+                    Err(err) => {
+                        return InternalEventPayload::ErrorResponse(ErrorResponse {
+                            error: format!("Failed to delete folder: {err}"),
+                        });
+                    }
+                },
+                "environment" => {
+                    match query_manager
+                        .with_tx(|tx| tx.delete_environment_by_id(&req.id, &UpdateSource::Plugin))
+                    {
+                        Ok(model) => AnyModel::Environment(model),
+                        Err(err) => {
+                            return InternalEventPayload::ErrorResponse(ErrorResponse {
+                                error: format!("Failed to delete environment: {err}"),
+                            });
+                        }
+                    }
+                }
+                _ => {
+                    return InternalEventPayload::ErrorResponse(ErrorResponse {
+                        error: "Delete not supported for this model type".to_string(),
+                    });
+                }
+            };
+
+            InternalEventPayload::DeleteModelResponse(DeleteModelResponse { model })
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::response_body::{FileResponseBodyStore, ResponseBodyInfo};
+    use std::cell::RefCell;
+    use tempfile::TempDir;
+    use yaak_models::models::{AnyModel, Folder, HttpRequest, Workspace};
+    use yaak_models::util::UpdateSource;
+
+    /// The real dispatch, with the store the desktop and CLI hand it.
+    fn dispatch<'a>(
+        query_manager: &QueryManager,
+        payload: &'a InternalEventPayload,
+        context: SharedPluginEventContext<'_>,
+    ) -> GroupedPluginEvent<'a> {
+        handle_shared_plugin_event(
+            query_manager,
+            &FileResponseBodyStore::new(query_manager),
+            payload,
+            context,
+        )
+    }
+
+    fn seed_query_manager() -> (QueryManager, TempDir) {
+        let temp_dir = TempDir::new().expect("Failed to create temp dir");
+        let db_path = temp_dir.path().join("db.sqlite");
+        let blob_path = temp_dir.path().join("blobs.sqlite");
+        let (query_manager, _blob_manager, _rx) =
+            yaak_models::init_standalone(&db_path, &blob_path).expect("Failed to initialize DB");
+
+        query_manager
+            .with_tx(|tx| {
+                tx.upsert_workspace(
+                    &Workspace {
+                        id: "wk_test".to_string(),
+                        name: "Workspace".to_string(),
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                )?;
+                tx.upsert_folder(
+                    &Folder {
+                        id: "fl_test".to_string(),
+                        workspace_id: "wk_test".to_string(),
+                        name: "Folder".to_string(),
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                )?;
+                tx.upsert_http_request(
+                    &HttpRequest {
+                        id: "rq_test".to_string(),
+                        workspace_id: "wk_test".to_string(),
+                        folder_id: Some("fl_test".to_string()),
+                        name: "Request".to_string(),
+                        method: "GET".to_string(),
+                        url: "https://example.com".to_string(),
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                )
+            })
+            .expect("Failed to seed");
+
+        (query_manager, temp_dir)
+    }
+
+    #[test]
+    fn list_requests_requires_workspace_when_folder_missing() {
+        let (query_manager, _temp_dir) = seed_query_manager();
+        let payload = InternalEventPayload::ListHttpRequestsRequest(
+            yaak_plugins::events::ListHttpRequestsRequest { folder_id: None },
+        );
+        let result = dispatch(
+            &query_manager,
+            &payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: None },
+        );
+
+        assert!(matches!(
+            result,
+            GroupedPluginEvent::Handled(Some(InternalEventPayload::ErrorResponse(_)))
+        ));
+    }
+
+    #[test]
+    fn list_requests_by_workspace_and_folder() {
+        let (query_manager, _temp_dir) = seed_query_manager();
+
+        let by_workspace_payload = InternalEventPayload::ListHttpRequestsRequest(
+            yaak_plugins::events::ListHttpRequestsRequest { folder_id: None },
+        );
+        let by_workspace = dispatch(
+            &query_manager,
+            &by_workspace_payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: Some("wk_test") },
+        );
+        match by_workspace {
+            GroupedPluginEvent::Handled(Some(InternalEventPayload::ListHttpRequestsResponse(
+                resp,
+            ))) => {
+                assert_eq!(resp.http_requests.len(), 1);
+            }
+            other => panic!("unexpected workspace response: {other:?}"),
+        }
+
+        let by_folder_payload = InternalEventPayload::ListHttpRequestsRequest(
+            yaak_plugins::events::ListHttpRequestsRequest {
+                folder_id: Some("fl_test".to_string()),
+            },
+        );
+        let by_folder = dispatch(
+            &query_manager,
+            &by_folder_payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: None },
+        );
+        match by_folder {
+            GroupedPluginEvent::Handled(Some(InternalEventPayload::ListHttpRequestsResponse(
+                resp,
+            ))) => {
+                assert_eq!(resp.http_requests.len(), 1);
+            }
+            other => panic!("unexpected folder response: {other:?}"),
+        }
+    }
+
+    #[test]
+    fn find_http_responses_is_shared_handled() {
+        let (query_manager, _temp_dir) = seed_query_manager();
+        let payload = InternalEventPayload::FindHttpResponsesRequest(FindHttpResponsesRequest {
+            request_id: "rq_test".to_string(),
+            limit: Some(1),
+        });
+
+        let result = dispatch(
+            &query_manager,
+            &payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: Some("wk_test") },
+        );
+
+        match result {
+            GroupedPluginEvent::Handled(Some(InternalEventPayload::FindHttpResponsesResponse(
+                resp,
+            ))) => {
+                assert!(resp.http_responses.is_empty());
+            }
+            other => panic!("unexpected find responses result: {other:?}"),
+        }
+    }
+
+    /// A store that answers from memory, standing in for whatever holds the
+    /// bytes — the point being that the dispatch below never learns which.
+    struct FakeBodyStore {
+        body: Vec<u8>,
+        reads: RefCell<Vec<(u64, u64)>>,
+    }
+
+    impl ResponseBodyStore for FakeBodyStore {
+        fn info(&self, _response_id: &str) -> crate::error::Result<ResponseBodyInfo> {
+            Ok(ResponseBodyInfo {
+                content_length: self.body.len() as u64,
+                content_type: Some("text/plain; charset=utf-8".to_string()),
+                complete: true,
+            })
+        }
+
+        fn read_chunk(
+            &self,
+            _response_id: &str,
+            offset: u64,
+            length: u64,
+        ) -> crate::error::Result<Vec<u8>> {
+            self.reads.borrow_mut().push((offset, length));
+            let start = (offset as usize).min(self.body.len());
+            let end = (start + length as usize).min(self.body.len());
+            Ok(self.body[start..end].to_vec())
+        }
+    }
+
+    #[test]
+    fn response_body_is_read_by_id_through_the_store() {
+        let (query_manager, _temp_dir) = seed_query_manager();
+        let store = FakeBodyStore { body: b"hello".to_vec(), reads: RefCell::new(Vec::new()) };
+
+        let info_payload =
+            InternalEventPayload::GetHttpResponseBodyInfoRequest(GetHttpResponseBodyInfoRequest {
+                response_id: "rs_test".to_string(),
+            });
+        let info = handle_shared_plugin_event(
+            &query_manager,
+            &store,
+            &info_payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: None },
+        );
+        match info {
+            GroupedPluginEvent::Handled(Some(
+                InternalEventPayload::GetHttpResponseBodyInfoResponse(resp),
+            )) => {
+                assert_eq!(resp.content_length, 5);
+                assert_eq!(resp.content_type.as_deref(), Some("text/plain; charset=utf-8"));
+            }
+            other => panic!("unexpected body info result: {other:?}"),
+        }
+
+        let chunk_payload = InternalEventPayload::ReadHttpResponseBodyChunkRequest(
+            ReadHttpResponseBodyChunkRequest {
+                response_id: "rs_test".to_string(),
+                offset: 1,
+                length: 3,
+            },
+        );
+        let chunk = handle_shared_plugin_event(
+            &query_manager,
+            &store,
+            &chunk_payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: None },
+        );
+        match chunk {
+            GroupedPluginEvent::Handled(Some(
+                InternalEventPayload::ReadHttpResponseBodyChunkResponse(resp),
+            )) => {
+                assert_eq!(resp.length, 3);
+                assert_eq!(BASE64_STANDARD.decode(resp.data).unwrap(), b"ell");
+            }
+            other => panic!("unexpected body chunk result: {other:?}"),
+        }
+
+        assert_eq!(*store.reads.borrow(), vec![(1, 3)]);
+    }
+
+    #[test]
+    fn an_unreadable_response_body_becomes_an_error_reply() {
+        let (query_manager, _temp_dir) = seed_query_manager();
+        let payload =
+            InternalEventPayload::GetHttpResponseBodyInfoRequest(GetHttpResponseBodyInfoRequest {
+                response_id: "rs_never_persisted".to_string(),
+            });
+        let result = dispatch(
+            &query_manager,
+            &payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: None },
+        );
+
+        match result {
+            GroupedPluginEvent::Handled(Some(InternalEventPayload::ErrorResponse(resp))) => {
+                assert!(
+                    resp.error.contains("rs_never_persisted"),
+                    "unhelpful error: {}",
+                    resp.error
+                )
+            }
+            other => panic!("unexpected missing-response result: {other:?}"),
+        }
+    }
+
+    #[test]
+    fn upsert_and_delete_model_are_shared_handled() {
+        let (query_manager, _temp_dir) = seed_query_manager();
+
+        let existing = query_manager
+            .connect()
+            .get_http_request("rq_test")
+            .expect("Failed to load seeded request");
+        let upsert_payload = InternalEventPayload::UpsertModelRequest(UpsertModelRequest {
+            model: AnyModel::HttpRequest(HttpRequest {
+                name: "Request Updated".to_string(),
+                ..existing
+            }),
+        });
+
+        let upsert_result = dispatch(
+            &query_manager,
+            &upsert_payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: Some("wk_test") },
+        );
+        match upsert_result {
+            GroupedPluginEvent::Handled(Some(InternalEventPayload::UpsertModelResponse(resp))) => {
+                match resp.model {
+                    AnyModel::HttpRequest(r) => assert_eq!(r.name, "Request Updated"),
+                    other => panic!("unexpected upsert model type: {other:?}"),
+                }
+            }
+            other => panic!("unexpected upsert result: {other:?}"),
+        }
+
+        let delete_payload = InternalEventPayload::DeleteModelRequest(DeleteModelRequest {
+            model: "http_request".to_string(),
+            id: "rq_test".to_string(),
+        });
+        let delete_result = dispatch(
+            &query_manager,
+            &delete_payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: Some("wk_test") },
+        );
+        match delete_result {
+            GroupedPluginEvent::Handled(Some(InternalEventPayload::DeleteModelResponse(resp))) => {
+                match resp.model {
+                    AnyModel::HttpRequest(r) => assert_eq!(r.id, "rq_test"),
+                    other => panic!("unexpected delete model type: {other:?}"),
+                }
+            }
+            other => panic!("unexpected delete result: {other:?}"),
+        }
+    }
+
+    #[test]
+    fn host_request_classification_works() {
+        let (query_manager, _temp_dir) = seed_query_manager();
+        let payload = InternalEventPayload::WindowInfoRequest(WindowInfoRequest {
+            label: "main".to_string(),
+        });
+        let result = dispatch(
+            &query_manager,
+            &payload,
+            SharedPluginEventContext { plugin_name: "@yaak/test", workspace_id: None },
+        );
+
+        match result {
+            GroupedPluginEvent::ToHandle(HostRequest::WindowInfo(req)) => {
+                assert_eq!(req.label, "main")
+            }
+            other => panic!("unexpected host classification: {other:?}"),
+        }
+    }
+}
diff --git a/crates/yaak/src/response_body.rs b/crates/yaak/src/response_body.rs
new file mode 100644
index 0000000..3876203
--- /dev/null
+++ b/crates/yaak/src/response_body.rs
@@ -0,0 +1,235 @@
+//! Reading response bodies back out, by response id.
+//!
+//! Plugins only ever name a response. Where its bytes actually live — files the
+//! engine wrote under `<data dir>/responses/<id>` today, blob rows later — is
+//! behind [`ResponseBodyStore`], so moving the bytes is a change to this file
+//! and nothing a plugin can see.
+//!
+//! Only saved responses are reachable by id. A send that saved nothing hands
+//! its body back with the reply instead, which is the only copy of it there is.
+
+use crate::error::Result;
+use std::fs::File;
+use std::io::{Read, Seek, SeekFrom};
+use yaak_models::models::HttpResponseState;
+use yaak_models::query_manager::QueryManager;
+
+/// The most bytes one read will hand back, however much was asked for.
+///
+/// A chunk is buffered whole and, on the desktop transport, base64'd into a
+/// single WebSocket frame, so an unbounded request is a way to make the host
+/// allocate on a plugin's say-so.
+pub const MAX_CHUNK_BYTES: u64 = 8 * 1024 * 1024;
+
+/// What a stored body is, without reading any of it.
+#[derive(Debug, Clone, Default)]
+pub struct ResponseBodyInfo {
+    /// Bytes actually stored, which is not necessarily what `Content-Length`
+    /// claimed. Zero when the response has no body.
+    pub content_length: u64,
+    /// The response's `Content-Type` header, verbatim.
+    pub content_type: Option<String>,
+    /// Whether the response has finished arriving, so `content_length` is
+    /// final. A body still being written grows past it.
+    pub complete: bool,
+}
+
+/// Somewhere response bodies can be read from, a window at a time.
+///
+/// Reads are repeatable — the bytes are durable, so nothing is consumed by
+/// looking at it.
+pub trait ResponseBodyStore {
+    fn info(&self, response_id: &str) -> Result<ResponseBodyInfo>;
+
+    /// Bytes `[offset, offset + length)`, clamped to what is there. A short
+    /// read means the body ended.
+    fn read_chunk(&self, response_id: &str, offset: u64, length: u64) -> Result<Vec<u8>>;
+}
+
+/// The desktop and CLI store: the database says where the file is, and the
+/// filesystem holds it.
+pub struct FileResponseBodyStore<'a> {
+    query_manager: &'a QueryManager,
+}
+
+impl<'a> FileResponseBodyStore<'a> {
+    pub fn new(query_manager: &'a QueryManager) -> Self {
+        Self { query_manager }
+    }
+
+    /// The file backing a response, or `None` when it stored no body.
+    ///
+    /// Only responses the store knows about are reachable here. A send with no
+    /// request behind it never reaches the store at all, and its bytes come
+    /// back from the send instead — see `SendHttpRequestResponse::body`.
+    fn body_path(&self, response_id: &str) -> Result<Option<String>> {
+        Ok(self.query_manager.connect().get_http_response(response_id)?.body_path)
+    }
+}
+
+impl ResponseBodyStore for FileResponseBodyStore<'_> {
+    fn info(&self, response_id: &str) -> Result<ResponseBodyInfo> {
+        let response = self.query_manager.connect().get_http_response(response_id)?;
+
+        let content_type = response
+            .headers
+            .iter()
+            .find(|h| h.name.eq_ignore_ascii_case("content-type"))
+            .map(|h| h.value.clone());
+
+        let content_length = match response.body_path {
+            Some(path) => std::fs::metadata(path)?.len(),
+            None => 0,
+        };
+
+        Ok(ResponseBodyInfo {
+            content_length,
+            content_type,
+            // Closed is the one terminal state: success, error, and cancel all end there.
+            complete: matches!(response.state, HttpResponseState::Closed),
+        })
+    }
+
+    fn read_chunk(&self, response_id: &str, offset: u64, length: u64) -> Result<Vec<u8>> {
+        let Some(path) = self.body_path(response_id)? else {
+            return Ok(Vec::new());
+        };
+
+        let length = length.min(MAX_CHUNK_BYTES);
+        if length == 0 {
+            return Ok(Vec::new());
+        }
+
+        let mut file = File::open(path)?;
+        file.seek(SeekFrom::Start(offset))?;
+
+        let mut buf = Vec::new();
+        file.take(length).read_to_end(&mut buf)?;
+        Ok(buf)
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::io::Write;
+    use tempfile::TempDir;
+    use yaak_models::models::{HttpRequest, HttpResponse, HttpResponseHeader, Workspace};
+    use yaak_models::util::UpdateSource;
+
+    fn seed(body: Option<&[u8]>) -> (QueryManager, TempDir, String) {
+        let temp_dir = TempDir::new().unwrap();
+        let (query_manager, blob_manager, _rx) = yaak_models::init_standalone(
+            &temp_dir.path().join("db.sqlite"),
+            &temp_dir.path().join("blobs.sqlite"),
+        )
+        .unwrap();
+
+        query_manager
+            .with_tx(|tx| {
+                tx.upsert_workspace(
+                    &Workspace { id: "wk_test".to_string(), ..Default::default() },
+                    &UpdateSource::Sync,
+                )
+            })
+            .unwrap();
+
+        query_manager
+            .with_tx(|tx| {
+                tx.upsert_http_request(
+                    &HttpRequest {
+                        id: "rq_test".to_string(),
+                        workspace_id: "wk_test".to_string(),
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                )
+            })
+            .unwrap();
+
+        let body_path = body.map(|bytes| {
+            let path = temp_dir.path().join("body");
+            let mut f = std::fs::File::create(&path).unwrap();
+            f.write_all(bytes).unwrap();
+            path.to_string_lossy().to_string()
+        });
+
+        let response = query_manager
+            .with_tx(|tx| {
+                tx.upsert_http_response(
+                    &HttpResponse {
+                        workspace_id: "wk_test".to_string(),
+                        request_id: "rq_test".to_string(),
+                        body_path,
+                        headers: vec![HttpResponseHeader {
+                            name: "Content-Type".to_string(),
+                            value: "application/json; charset=utf-8".to_string(),
+                        }],
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                    &blob_manager,
+                )
+            })
+            .unwrap();
+
+        let id = response.id.clone();
+        (query_manager, temp_dir, id)
+    }
+
+    #[test]
+    fn info_reports_stored_size_and_content_type() {
+        let (qm, _tmp, id) = seed(Some(b"hello world"));
+        let info = FileResponseBodyStore::new(&qm).info(&id).unwrap();
+        assert_eq!(info.content_length, 11);
+        assert_eq!(info.content_type.as_deref(), Some("application/json; charset=utf-8"));
+    }
+
+    #[test]
+    fn chunks_cover_the_body_and_stop_short_at_the_end() {
+        let (qm, _tmp, id) = seed(Some(b"hello world"));
+        let store = FileResponseBodyStore::new(&qm);
+        assert_eq!(store.read_chunk(&id, 0, 5).unwrap(), b"hello");
+        assert_eq!(store.read_chunk(&id, 6, 100).unwrap(), b"world");
+        assert!(store.read_chunk(&id, 11, 100).unwrap().is_empty());
+        // Reading the same window twice gives the same bytes; nothing is consumed.
+        assert_eq!(store.read_chunk(&id, 0, 5).unwrap(), b"hello");
+    }
+
+    #[test]
+    fn a_response_with_no_body_is_empty_not_an_error() {
+        let (qm, _tmp, id) = seed(None);
+        let store = FileResponseBodyStore::new(&qm);
+        assert_eq!(store.info(&id).unwrap().content_length, 0);
+        assert!(store.read_chunk(&id, 0, 100).unwrap().is_empty());
+    }
+
+    #[test]
+    fn complete_tracks_whether_the_response_has_closed() {
+        let (qm, _tmp, id) = seed(Some(b"partial"));
+        // Seeded responses default to Initialized: still arriving.
+        assert!(!FileResponseBodyStore::new(&qm).info(&id).unwrap().complete);
+
+        let mut response = qm.connect().get_http_response(&id).unwrap();
+        response.state = HttpResponseState::Closed;
+        qm.with_tx(|tx| tx.update_http_response_if_id(&response, &UpdateSource::Sync)).unwrap();
+
+        assert!(FileResponseBodyStore::new(&qm).info(&id).unwrap().complete);
+    }
+
+    #[test]
+    fn an_unknown_response_fails() {
+        let (qm, _tmp, _id) = seed(Some(b"hi"));
+        assert!(FileResponseBodyStore::new(&qm).info("rs_nope").is_err());
+    }
+
+    #[test]
+    fn an_unsaved_response_is_not_reachable_by_id() {
+        // Its bytes rode back with the send; there is nothing here to find, and
+        // guessing at a file named for the id is exactly what this must not do.
+        let (qm, tmp, _id) = seed(Some(b"hi"));
+        std::fs::write(tmp.path().join("rs_ephemeral1"), b"access_token=abc").unwrap();
+
+        assert!(FileResponseBodyStore::new(&qm).info("rs_ephemeral1").is_err());
+    }
+}
diff --git a/crates/yaak/src/send.rs b/crates/yaak/src/send.rs
new file mode 100644
index 0000000..026c60d
--- /dev/null
+++ b/crates/yaak/src/send.rs
@@ -0,0 +1,1539 @@
+use async_trait::async_trait;
+use log::warn;
+use std::path::{Path, PathBuf};
+use std::sync::Arc;
+use std::sync::atomic::{AtomicI32, Ordering};
+use std::time::{Duration, Instant};
+use thiserror::Error;
+use tokio::fs::File;
+use tokio::io::{AsyncReadExt, AsyncWriteExt};
+use tokio::sync::mpsc;
+use tokio::sync::watch;
+use yaak_crypto::manager::EncryptionManager;
+use yaak_http::client::{
+    HttpConnectionOptions, HttpConnectionProxySetting, HttpConnectionProxySettingAuth,
+};
+use yaak_http::cookies::CookieStore;
+use yaak_http::manager::HttpConnectionManager;
+use yaak_http::sender::{HttpResponseEvent as SenderHttpResponseEvent, ReqwestSender};
+use yaak_http::tee_reader::TeeReader;
+use yaak_http::transaction::HttpTransaction;
+use yaak_http::types::{
+    SendableBody, SendableHttpRequest, SendableHttpRequestOptions, append_query_params,
+};
+use yaak_models::blob_manager::{BlobManager, BodyChunk};
+use yaak_models::models::{
+    ClientCertificate, Cookie, CookieJar, DnsOverride, Environment, HttpRequest, HttpResponse,
+    HttpResponseEvent, HttpResponseEventData, HttpResponseHeader, HttpResponseState, ProxySetting,
+    ProxySettingAuth, ResolvedHttpRequestSettings,
+};
+use yaak_models::query_manager::QueryManager;
+use yaak_models::render::render_http_request;
+use yaak_models::util::{UpdateSource, generate_prefixed_id};
+use yaak_plugins::events::{
+    CallHttpAuthenticationRequest, HttpHeader, PluginContext, RenderPurpose,
+};
+use yaak_plugins::manager::PluginManager;
+use yaak_plugins::template_callback::PluginTemplateCallback;
+use yaak_templates::{RenderOptions, TemplateCallback};
+use yaak_tls::find_client_certificate;
+
+const HTTP_EVENT_CHANNEL_CAPACITY: usize = 100;
+const REQUEST_BODY_CHUNK_SIZE: usize = 1024 * 1024;
+const RESPONSE_PROGRESS_UPDATE_INTERVAL_MS: u128 = 100;
+const MAX_AUTH_BODY_BYTES: usize = 10 * 1024 * 1024;
+
+#[derive(Debug, Error)]
+pub enum SendHttpRequestError {
+    #[error("Failed to load request: {0}")]
+    LoadRequest(#[source] yaak_models::error::Error),
+
+    #[error("Failed to load workspace: {0}")]
+    LoadWorkspace(#[source] yaak_models::error::Error),
+
+    #[error("Failed to resolve environments: {0}")]
+    ResolveEnvironments(#[source] yaak_models::error::Error),
+
+    #[error("Failed to resolve inherited request settings: {0}")]
+    ResolveRequestInheritance(#[source] yaak_models::error::Error),
+
+    #[error("Failed to load cookie jar: {0}")]
+    LoadCookieJar(#[source] yaak_models::error::Error),
+
+    #[error("Failed to persist cookie jar: {0}")]
+    PersistCookieJar(#[source] yaak_models::error::Error),
+
+    #[error("Failed to render request templates: {0}")]
+    RenderRequest(#[source] yaak_templates::error::Error),
+
+    #[error("Failed to prepare request before send: {0}")]
+    PrepareSendableRequest(String),
+
+    #[error("Failed to persist response metadata: {0}")]
+    PersistResponse(#[source] yaak_models::error::Error),
+
+    #[error("Failed to create HTTP client: {0}")]
+    CreateHttpClient(#[source] yaak_http::error::Error),
+
+    #[error("Failed to build sendable request: {0}")]
+    BuildSendableRequest(#[source] yaak_http::error::Error),
+
+    #[error("Failed to send request: {0}")]
+    SendRequest(#[source] yaak_http::error::Error),
+
+    #[error("Failed to read response body: {0}")]
+    ReadResponseBody(#[source] yaak_http::error::Error),
+
+    #[error("Failed to create response directory {path:?}: {source}")]
+    CreateResponseDirectory {
+        path: PathBuf,
+        #[source]
+        source: std::io::Error,
+    },
+
+    #[error("Failed to write response body to {path:?}: {source}")]
+    WriteResponseBody {
+        path: PathBuf,
+        #[source]
+        source: std::io::Error,
+    },
+}
+
+pub type Result<T> = std::result::Result<T, SendHttpRequestError>;
+
+#[async_trait]
+pub trait PrepareSendableRequest: Send + Sync {
+    async fn prepare_sendable_request(
+        &self,
+        rendered_request: &HttpRequest,
+        auth_context_id: &str,
+        sendable_request: &mut SendableHttpRequest,
+    ) -> std::result::Result<(), String>;
+}
+
+#[async_trait]
+pub trait SendRequestExecutor: Send + Sync {
+    async fn send(
+        &self,
+        sendable_request: SendableHttpRequest,
+        event_tx: mpsc::Sender<SenderHttpResponseEvent>,
+        cookie_behavior: CookieBehavior,
+    ) -> yaak_http::error::Result<yaak_http::sender::HttpResponse>;
+}
+
+#[derive(Clone)]
+pub struct CookieBehavior {
+    pub store: Option<CookieStore>,
+    pub send_cookies: bool,
+    pub store_cookies: bool,
+}
+
+struct PluginPrepareSendableRequest {
+    plugin_manager: Arc<PluginManager>,
+    plugin_context: PluginContext,
+    cancelled_rx: Option<watch::Receiver<bool>>,
+}
+
+#[async_trait]
+impl PrepareSendableRequest for PluginPrepareSendableRequest {
+    async fn prepare_sendable_request(
+        &self,
+        rendered_request: &HttpRequest,
+        auth_context_id: &str,
+        sendable_request: &mut SendableHttpRequest,
+    ) -> std::result::Result<(), String> {
+        if let Some(cancelled_rx) = &self.cancelled_rx {
+            let mut cancelled_rx = cancelled_rx.clone();
+            tokio::select! {
+                result = apply_plugin_authentication(
+                    sendable_request,
+                    rendered_request,
+                    auth_context_id,
+                    &self.plugin_manager,
+                    &self.plugin_context,
+                ) => result,
+                _ = cancelled_rx.changed() => Err("Request canceled".to_string()),
+            }
+        } else {
+            apply_plugin_authentication(
+                sendable_request,
+                rendered_request,
+                auth_context_id,
+                &self.plugin_manager,
+                &self.plugin_context,
+            )
+            .await
+        }
+    }
+}
+
+struct ConnectionManagerSendRequestExecutor<'a> {
+    connection_manager: &'a HttpConnectionManager,
+    plugin_context_id: String,
+    runtime_config: HttpSendRuntimeConfig,
+    cancelled_rx: Option<watch::Receiver<bool>>,
+}
+
+#[async_trait]
+impl SendRequestExecutor for ConnectionManagerSendRequestExecutor<'_> {
+    async fn send(
+        &self,
+        sendable_request: SendableHttpRequest,
+        event_tx: mpsc::Sender<SenderHttpResponseEvent>,
+        cookie_behavior: CookieBehavior,
+    ) -> yaak_http::error::Result<yaak_http::sender::HttpResponse> {
+        let runtime_config = &self.runtime_config;
+        let client_certificate =
+            find_client_certificate(&sendable_request.url, &runtime_config.client_certificates);
+        let cached_client = self
+            .connection_manager
+            .get_client(&HttpConnectionOptions {
+                id: self.plugin_context_id.clone(),
+                validate_certificates: runtime_config.settings.validate_certificates.value,
+                http_version: runtime_config.settings.http_version.value,
+                proxy: runtime_config.proxy.clone(),
+                client_certificate,
+                dns_overrides: runtime_config.dns_overrides.clone(),
+                address_filter: None,
+            })
+            .await?;
+
+        cached_client.resolver.set_event_sender(Some(event_tx.clone())).await;
+
+        let sender = ReqwestSender::with_client(cached_client.client);
+        let transaction = match cookie_behavior.store {
+            Some(cs) => HttpTransaction::with_cookie_behavior(
+                sender,
+                cs,
+                cookie_behavior.send_cookies,
+                cookie_behavior.store_cookies,
+            ),
+            None => HttpTransaction::new(sender),
+        };
+
+        let result = if let Some(cancelled_rx) = self.cancelled_rx.clone() {
+            transaction.execute_with_cancellation(sendable_request, cancelled_rx, event_tx).await
+        } else {
+            let (_cancel_tx, cancel_rx) = watch::channel(false);
+            transaction.execute_with_cancellation(sendable_request, cancel_rx, event_tx).await
+        };
+        cached_client.resolver.set_event_sender(None).await;
+        result
+    }
+}
+
+pub struct SendHttpRequestByIdParams<'a, T: TemplateCallback> {
+    pub query_manager: &'a QueryManager,
+    pub blob_manager: &'a BlobManager,
+    pub request_id: &'a str,
+    pub environment_id: Option<&'a str>,
+    pub template_callback: &'a T,
+    pub update_source: UpdateSource,
+    pub cookie_jar_id: Option<String>,
+    pub response_dir: &'a Path,
+    pub emit_events_to: Option<mpsc::Sender<SenderHttpResponseEvent>>,
+    pub emit_response_body_chunks_to: Option<mpsc::UnboundedSender<Vec<u8>>>,
+    pub cancelled_rx: Option<watch::Receiver<bool>>,
+    pub prepare_sendable_request: Option<&'a dyn PrepareSendableRequest>,
+    pub executor: &'a dyn SendRequestExecutor,
+}
+
+/// An [`HttpRequest`] carrying the authentication and headers it inherits from its folder or
+/// workspace, alongside the id of the model that authentication came from.
+///
+/// Sending requires inheritance to be applied first, and this type is the only way to say it has
+/// been. There is no public constructor beyond [`resolve_inherited_request`], which resolves it
+/// against a database, and [`ResolvedHttpRequest::assume_resolved`], which a caller without a
+/// database must name explicitly — so skipping inheritance is a deliberate, greppable act rather
+/// than something a new call site forgets.
+#[derive(Clone)]
+pub struct ResolvedHttpRequest {
+    request: HttpRequest,
+    auth_context_id: String,
+}
+
+impl ResolvedHttpRequest {
+    /// Declare a request already resolved, for callers with no database to resolve against. The
+    /// caller owns the promise that inherited authentication and headers are applied.
+    pub fn assume_resolved(request: HttpRequest, auth_context_id: String) -> Self {
+        Self { request, auth_context_id }
+    }
+
+    pub fn request(&self) -> &HttpRequest {
+        &self.request
+    }
+
+    pub fn auth_context_id(&self) -> &str {
+        &self.auth_context_id
+    }
+
+    fn into_parts(self) -> (HttpRequest, String) {
+        (self.request, self.auth_context_id)
+    }
+}
+
+/// Everything a send needs that would otherwise be read from the database.
+///
+/// Callers backed by a database build this with [`resolve_send_inputs`]. A stateless caller
+/// constructs it directly, which is what lets [`send_http_request`] run with no database at all.
+pub struct HttpSendInputs {
+    pub request: ResolvedHttpRequest,
+    pub environment_chain: Vec<Environment>,
+    pub runtime_config: HttpSendRuntimeConfig,
+    /// Cookies the send starts with. The store is shared, so reading it back after the send
+    /// returns (or fails) yields the cookies the transaction collected.
+    pub cookie_store: Option<CookieStore>,
+}
+
+/// Where a send writes its response. Without it, the send keeps everything in memory: no
+/// response body file, no model writes, and no timeline rows.
+pub struct ResponseStorage<'a> {
+    pub query_manager: &'a QueryManager,
+    pub blob_manager: &'a BlobManager,
+    pub update_source: UpdateSource,
+    pub response_dir: &'a Path,
+}
+
+pub struct SendHttpRequestParams<'a, T: TemplateCallback> {
+    pub inputs: HttpSendInputs,
+    pub template_callback: &'a T,
+    pub storage: Option<ResponseStorage<'a>>,
+    pub emit_events_to: Option<mpsc::Sender<SenderHttpResponseEvent>>,
+    pub emit_response_body_chunks_to: Option<mpsc::UnboundedSender<Vec<u8>>>,
+    pub cancelled_rx: Option<watch::Receiver<bool>>,
+    pub existing_response: Option<HttpResponse>,
+    pub prepare_sendable_request: Option<&'a dyn PrepareSendableRequest>,
+    pub executor: &'a dyn SendRequestExecutor,
+}
+
+pub struct SendHttpRequestWithPluginsParams<'a> {
+    pub query_manager: &'a QueryManager,
+    pub blob_manager: &'a BlobManager,
+    pub request: HttpRequest,
+    pub environment_id: Option<&'a str>,
+    pub update_source: UpdateSource,
+    pub cookie_jar_id: Option<String>,
+    pub response_dir: &'a Path,
+    pub emit_events_to: Option<mpsc::Sender<SenderHttpResponseEvent>>,
+    pub emit_response_body_chunks_to: Option<mpsc::UnboundedSender<Vec<u8>>>,
+    pub existing_response: Option<HttpResponse>,
+    pub plugin_manager: Arc<PluginManager>,
+    pub encryption_manager: Arc<EncryptionManager>,
+    pub plugin_context: &'a PluginContext,
+    pub cancelled_rx: Option<watch::Receiver<bool>>,
+    pub connection_manager: &'a HttpConnectionManager,
+}
+
+pub struct SendHttpRequestByIdWithPluginsParams<'a> {
+    pub query_manager: &'a QueryManager,
+    pub blob_manager: &'a BlobManager,
+    pub request_id: &'a str,
+    pub environment_id: Option<&'a str>,
+    pub update_source: UpdateSource,
+    pub cookie_jar_id: Option<String>,
+    pub response_dir: &'a Path,
+    pub emit_events_to: Option<mpsc::Sender<SenderHttpResponseEvent>>,
+    pub emit_response_body_chunks_to: Option<mpsc::UnboundedSender<Vec<u8>>>,
+    pub plugin_manager: Arc<PluginManager>,
+    pub encryption_manager: Arc<EncryptionManager>,
+    pub plugin_context: &'a PluginContext,
+    pub cancelled_rx: Option<watch::Receiver<bool>>,
+    pub connection_manager: &'a HttpConnectionManager,
+}
+
+/// Where a send left the response body, so the caller knows where to get it.
+///
+/// The body goes to exactly one place, and which one depends on what the caller
+/// asked for. Saying so outright beats handing back a `Vec` that is empty for
+/// two entirely different reasons.
+pub enum ResponseBody {
+    /// Written to the response's own file. Read it back by response id.
+    Stored,
+    /// Sent to the chunk sender the caller supplied, as it arrived.
+    Streamed,
+    /// Here it is, because nothing else kept it. Empty means the response
+    /// really had no body.
+    Returned(Vec<u8>),
+}
+
+impl ResponseBody {
+    /// The bytes, when this is the only copy of them.
+    ///
+    /// Stored and streamed bodies belong to whoever holds them; only `Returned`
+    /// has to travel back to the caller.
+    pub fn returned_bytes(&self) -> Option<&[u8]> {
+        match self {
+            ResponseBody::Returned(bytes) => Some(bytes),
+            ResponseBody::Stored | ResponseBody::Streamed => None,
+        }
+    }
+}
+
+pub struct SendHttpRequestResult {
+    pub rendered_request: HttpRequest,
+    pub response: HttpResponse,
+    pub response_body: ResponseBody,
+    /// The cookies held by the jar after the send, for callers that persist
+    /// one. `None` when the caller supplied no jar, which is independent of
+    /// where the body went.
+    pub cookies: Option<Vec<Cookie>>,
+}
+
+#[derive(Clone)]
+pub struct HttpSendRuntimeConfig {
+    pub settings: ResolvedHttpRequestSettings,
+    pub proxy: HttpConnectionProxySetting,
+    pub dns_overrides: Vec<DnsOverride>,
+    pub client_certificates: Vec<ClientCertificate>,
+}
+
+impl HttpSendRuntimeConfig {
+    pub fn send_options(&self) -> SendableHttpRequestOptions {
+        SendableHttpRequestOptions {
+            follow_redirects: self.settings.follow_redirects.value,
+            timeout: if self.settings.request_timeout.value > 0 {
+                Some(Duration::from_millis(
+                    self.settings.request_timeout.value.unsigned_abs() as u64
+                ))
+            } else {
+                None
+            },
+        }
+    }
+}
+
+/// Resolve every database-backed input a send needs, in one pass.
+pub fn resolve_send_inputs(
+    query_manager: &QueryManager,
+    request: &HttpRequest,
+    environment_id: Option<&str>,
+    cookies: Option<Vec<Cookie>>,
+) -> Result<HttpSendInputs> {
+    let db = query_manager.connect();
+
+    let environment_chain = db
+        .resolve_environments(&request.workspace_id, request.folder_id.as_deref(), environment_id)
+        .map_err(SendHttpRequestError::ResolveEnvironments)?;
+
+    let resolved_request = resolve_inherited_request(query_manager, request)?;
+
+    let workspace =
+        db.get_workspace(&request.workspace_id).map_err(SendHttpRequestError::LoadWorkspace)?;
+    let settings = db.get_settings();
+    let resolved_settings = db
+        .resolve_settings_for_http_request(request)
+        .map_err(SendHttpRequestError::ResolveRequestInheritance)?;
+
+    Ok(HttpSendInputs {
+        request: resolved_request,
+        environment_chain,
+        runtime_config: HttpSendRuntimeConfig {
+            settings: resolved_settings,
+            proxy: proxy_setting_from_settings(settings.proxy),
+            dns_overrides: workspace.setting_dns_overrides,
+            client_certificates: settings.client_certificates,
+        },
+        cookie_store: cookies.map(CookieStore::from_cookies),
+    })
+}
+
+/// Apply the authentication and headers a request inherits from its folder or workspace.
+pub fn resolve_inherited_request(
+    query_manager: &QueryManager,
+    request: &HttpRequest,
+) -> Result<ResolvedHttpRequest> {
+    let db = query_manager.connect();
+    let (authentication_type, authentication, auth_context_id) = db
+        .resolve_auth_for_http_request(request)
+        .map_err(SendHttpRequestError::ResolveRequestInheritance)?;
+    let headers = db
+        .resolve_headers_for_http_request(request)
+        .map_err(SendHttpRequestError::ResolveRequestInheritance)?;
+
+    Ok(ResolvedHttpRequest {
+        request: HttpRequest { authentication_type, authentication, headers, ..request.clone() },
+        auth_context_id,
+    })
+}
+
+pub async fn send_http_request_by_id_with_plugins(
+    params: SendHttpRequestByIdWithPluginsParams<'_>,
+) -> Result<SendHttpRequestResult> {
+    let request = params
+        .query_manager
+        .connect()
+        .get_http_request(params.request_id)
+        .map_err(SendHttpRequestError::LoadRequest)?;
+
+    send_http_request_with_plugins(SendHttpRequestWithPluginsParams {
+        query_manager: params.query_manager,
+        blob_manager: params.blob_manager,
+        request,
+        environment_id: params.environment_id,
+        update_source: params.update_source,
+        cookie_jar_id: params.cookie_jar_id,
+        response_dir: params.response_dir,
+        emit_events_to: params.emit_events_to,
+        emit_response_body_chunks_to: params.emit_response_body_chunks_to,
+        existing_response: None,
+        plugin_manager: params.plugin_manager,
+        encryption_manager: params.encryption_manager,
+        plugin_context: params.plugin_context,
+        cancelled_rx: params.cancelled_rx,
+        connection_manager: params.connection_manager,
+    })
+    .await
+}
+
+pub async fn send_http_request_with_plugins(
+    params: SendHttpRequestWithPluginsParams<'_>,
+) -> Result<SendHttpRequestResult> {
+    let mut cookie_jar = load_cookie_jar(params.query_manager, params.cookie_jar_id.as_deref())?;
+    let inputs = resolve_send_inputs(
+        params.query_manager,
+        ¶ms.request,
+        params.environment_id,
+        cookie_jar.as_ref().map(|jar| jar.cookies.clone()),
+    )?;
+
+    let template_callback = PluginTemplateCallback::new(
+        params.plugin_manager.clone(),
+        params.encryption_manager.clone(),
+        params.plugin_context,
+        RenderPurpose::Send,
+    );
+    let auth_hook = PluginPrepareSendableRequest {
+        plugin_manager: params.plugin_manager,
+        plugin_context: params.plugin_context.clone(),
+        cancelled_rx: params.cancelled_rx.clone(),
+    };
+    let executor = ConnectionManagerSendRequestExecutor {
+        connection_manager: params.connection_manager,
+        plugin_context_id: params.plugin_context.id.clone(),
+        runtime_config: inputs.runtime_config.clone(),
+        cancelled_rx: params.cancelled_rx.clone(),
+    };
+    let cookie_store = inputs.cookie_store.clone();
+
+    let result = send_http_request(SendHttpRequestParams {
+        inputs,
+        template_callback: &template_callback,
+        storage: Some(ResponseStorage {
+            query_manager: params.query_manager,
+            blob_manager: params.blob_manager,
+            update_source: params.update_source,
+            response_dir: params.response_dir,
+        }),
+        emit_events_to: params.emit_events_to,
+        emit_response_body_chunks_to: params.emit_response_body_chunks_to,
+        cancelled_rx: params.cancelled_rx,
+        existing_response: params.existing_response,
+        prepare_sendable_request: Some(&auth_hook),
+        executor: &executor,
+    })
+    .await;
+
+    persist_cookies_after_send(params.query_manager, cookie_jar.as_mut(), cookie_store.as_ref())?;
+
+    result
+}
+
+pub async fn send_http_request_by_id<T: TemplateCallback>(
+    params: SendHttpRequestByIdParams<'_, T>,
+) -> Result<SendHttpRequestResult> {
+    let request = params
+        .query_manager
+        .connect()
+        .get_http_request(params.request_id)
+        .map_err(SendHttpRequestError::LoadRequest)?;
+    let mut cookie_jar = load_cookie_jar(params.query_manager, params.cookie_jar_id.as_deref())?;
+    let inputs = resolve_send_inputs(
+        params.query_manager,
+        &request,
+        params.environment_id,
+        cookie_jar.as_ref().map(|jar| jar.cookies.clone()),
+    )?;
+    let cookie_store = inputs.cookie_store.clone();
+
+    let result = send_http_request(SendHttpRequestParams {
+        inputs,
+        template_callback: params.template_callback,
+        storage: Some(ResponseStorage {
+            query_manager: params.query_manager,
+            blob_manager: params.blob_manager,
+            update_source: params.update_source,
+            response_dir: params.response_dir,
+        }),
+        emit_events_to: params.emit_events_to,
+        emit_response_body_chunks_to: params.emit_response_body_chunks_to,
+        cancelled_rx: params.cancelled_rx,
+        existing_response: None,
+        prepare_sendable_request: params.prepare_sendable_request,
+        executor: params.executor,
+    })
+    .await;
+
+    persist_cookies_after_send(params.query_manager, cookie_jar.as_mut(), cookie_store.as_ref())?;
+
+    result
+}
+
+pub async fn send_http_request<T: TemplateCallback>(
+    params: SendHttpRequestParams<'_, T>,
+) -> Result<SendHttpRequestResult> {
+    let HttpSendInputs { request, environment_chain, runtime_config, cookie_store } = params.inputs;
+    let (request, auth_context_id) = request.into_parts();
+    let storage = params.storage;
+    let send_options = runtime_config.send_options();
+    let resolved_settings = &runtime_config.settings;
+    let cookie_behavior = CookieBehavior {
+        store: cookie_store,
+        send_cookies: resolved_settings.send_cookies.value,
+        store_cookies: resolved_settings.store_cookies.value,
+    };
+
+    let rendered_request = render_http_request(
+        &request,
+        environment_chain,
+        params.template_callback,
+        &RenderOptions::throw(),
+    )
+    .await
+    .map_err(SendHttpRequestError::RenderRequest)?;
+
+    let mut sendable_request =
+        SendableHttpRequest::from_http_request(&rendered_request, send_options)
+            .await
+            .map_err(SendHttpRequestError::BuildSendableRequest)?;
+
+    if let Some(hook) = params.prepare_sendable_request {
+        hook.prepare_sendable_request(&rendered_request, &auth_context_id, &mut sendable_request)
+            .await
+            .map_err(SendHttpRequestError::PrepareSendableRequest)?;
+    }
+
+    let request_content_length = match sendable_request.body.as_ref() {
+        Some(SendableBody::Bytes(_)) => sendable_body_length(sendable_request.body.as_ref()),
+        Some(SendableBody::Stream { .. }) | None => None,
+    };
+    let mut response = params.existing_response.unwrap_or_default();
+    response.request_id = request.id.clone();
+    response.workspace_id = request.workspace_id.clone();
+    response.request_content_length = request_content_length;
+    response.request_headers = sendable_request
+        .headers
+        .iter()
+        .map(|(name, value)| HttpResponseHeader { name: name.clone(), value: value.clone() })
+        .collect();
+    response.url = sendable_request.url.clone();
+    response.state = HttpResponseState::Initialized;
+    response.error = None;
+    response.content_length = None;
+    response.content_length_compressed = None;
+    response.body_path = None;
+    response.status = 0;
+    response.status_reason = None;
+    response.headers = Vec::new();
+    response.remote_addr = None;
+    response.version = None;
+    response.elapsed = 0;
+    response.elapsed_headers = 0;
+    response.elapsed_dns = 0;
+    // Responses with no request behind them are ephemeral: they belong to whoever called this
+    // function and never reach the model store.
+    let store = storage.as_ref().filter(|_| !response.request_id.is_empty());
+    let persist_response = store.is_some();
+    if let Some(store) = store {
+        response = store
+            .query_manager
+            .with_tx(|tx| {
+                tx.upsert_http_response(&response, &store.update_source, store.blob_manager)
+            })
+            .map_err(SendHttpRequestError::PersistResponse)?;
+    } else if response.id.is_empty() {
+        response.id = generate_prefixed_id("rs");
+    }
+
+    let request_body_id = format!("{}.request", response.id);
+    let mut request_body_capture_task = None;
+    let mut request_body_capture_error = None;
+    if let Some(store) = store {
+        match sendable_request.body.as_mut() {
+            Some(SendableBody::Bytes(bytes)) => {
+                if let Err(err) =
+                    persist_request_body_bytes(store.blob_manager, &request_body_id, bytes.as_ref())
+                {
+                    request_body_capture_error = Some(err);
+                }
+            }
+            Some(SendableBody::Stream { data, .. }) => {
+                let (tx, rx) = tokio::sync::mpsc::unbounded_channel::<Vec<u8>>();
+                let inner = std::mem::replace(data, Box::pin(tokio::io::empty()));
+                let tee_reader = TeeReader::new(inner, tx);
+                *data = Box::pin(tee_reader);
+                let blob_manager = store.blob_manager.clone();
+                let body_id = request_body_id.clone();
+                request_body_capture_task = Some(tokio::spawn(async move {
+                    persist_request_body_stream(blob_manager, body_id, rx).await
+                }));
+            }
+            None => {}
+        }
+    }
+
+    let (event_tx, mut event_rx) =
+        mpsc::channel::<SenderHttpResponseEvent>(HTTP_EVENT_CHANNEL_CAPACITY);
+    let event_store = store.map(|store| (store.query_manager.clone(), store.update_source.clone()));
+    let event_response_id = response.id.clone();
+    let event_workspace_id = request.workspace_id.clone();
+    let emit_events_to = params.emit_events_to.clone();
+    let dns_elapsed = Arc::new(AtomicI32::new(0));
+    let event_dns_elapsed = dns_elapsed.clone();
+    let event_handle = tokio::spawn(async move {
+        while let Some(event) = event_rx.recv().await {
+            if let SenderHttpResponseEvent::DnsResolved { duration, .. } = &event {
+                event_dns_elapsed.store(u64_to_i32(*duration), Ordering::Relaxed);
+            }
+
+            if let Some((query_manager, update_source)) = event_store.as_ref() {
+                let db_event = HttpResponseEvent::new(
+                    &event_response_id,
+                    &event_workspace_id,
+                    event.clone().into(),
+                );
+                if let Err(err) = query_manager
+                    .with_tx(|tx| tx.upsert_http_response_event(&db_event, update_source))
+                {
+                    warn!("Failed to persist HTTP response event: {}", err);
+                }
+            }
+
+            if let Some(tx) = emit_events_to.as_ref() {
+                let _ = tx.try_send(event);
+            }
+        }
+    });
+
+    let executor = params.executor;
+    let started_at = Instant::now();
+    let request_started_url = sendable_request.url.clone();
+
+    for event in resolved_settings.timeline_events() {
+        if let HttpResponseEventData::Setting {
+            name,
+            value,
+            source_model,
+            source_id,
+            source_name,
+        } = event
+        {
+            let _ = event_tx.try_send(SenderHttpResponseEvent::Setting {
+                name,
+                value,
+                source_model,
+                source_id,
+                source_name,
+            });
+        }
+    }
+
+    let mut http_response =
+        match executor.send(sendable_request, event_tx, cookie_behavior.clone()).await {
+            Ok(response) => response,
+            Err(err) => {
+                if let Some(store) = store {
+                    let _ = persist_response_error(
+                        store,
+                        &response,
+                        started_at,
+                        err.to_string(),
+                        request_started_url,
+                    );
+                }
+                if let Err(join_err) = event_handle.await {
+                    warn!("Failed to join response event task: {}", join_err);
+                }
+                if let Some(task) = request_body_capture_task.take() {
+                    let _ = task.await;
+                }
+                return Err(SendHttpRequestError::SendRequest(err));
+            }
+        };
+
+    let headers_elapsed = duration_to_i32(started_at.elapsed());
+    let body_path = match storage.as_ref() {
+        Some(storage) => {
+            std::fs::create_dir_all(storage.response_dir).map_err(|source| {
+                SendHttpRequestError::CreateResponseDirectory {
+                    path: storage.response_dir.to_path_buf(),
+                    source,
+                }
+            })?;
+            Some(storage.response_dir.join(&response.id))
+        }
+        None => None,
+    };
+    let response_body_path = body_path.as_ref().map(|p| p.to_string_lossy().to_string());
+    let connected_response = HttpResponse {
+        state: HttpResponseState::Connected,
+        elapsed_headers: headers_elapsed,
+        status: i32::from(http_response.status),
+        status_reason: http_response.status_reason.clone(),
+        url: http_response.url.clone(),
+        remote_addr: http_response.remote_addr.clone(),
+        version: http_response.version.clone(),
+        elapsed_dns: dns_elapsed.load(Ordering::Relaxed),
+        body_path: response_body_path.clone(),
+        content_length: http_response.content_length.map(u64_to_i32),
+        headers: http_response
+            .headers
+            .iter()
+            .map(|(name, value)| HttpResponseHeader { name: name.clone(), value: value.clone() })
+            .collect(),
+        request_headers: http_response
+            .request_headers
+            .iter()
+            .map(|(name, value)| HttpResponseHeader { name: name.clone(), value: value.clone() })
+            .collect(),
+        ..response
+    };
+    if let Some(store) = store {
+        response = store
+            .query_manager
+            .with_tx(|tx| {
+                tx.upsert_http_response(
+                    &connected_response,
+                    &store.update_source,
+                    store.blob_manager,
+                )
+            })
+            .map_err(SendHttpRequestError::PersistResponse)?;
+    } else {
+        response = connected_response;
+    }
+
+    let mut body_file = match body_path {
+        Some(path) => {
+            let file =
+                File::options().create(true).truncate(true).write(true).open(&path).await.map_err(
+                    |source| SendHttpRequestError::WriteResponseBody { path: path.clone(), source },
+                )?;
+            Some((file, path))
+        }
+        None => None,
+    };
+    let mut body_stream =
+        http_response.into_body_stream().map_err(SendHttpRequestError::ReadResponseBody)?;
+    let mut read_buf = vec![0; 64 * 1024];
+    // Decided once, before the first chunk: the accumulator only exists in the
+    // one arm that returns it, so nothing can hand back bytes it never received.
+    let mut response_body = if params.emit_response_body_chunks_to.is_some() {
+        ResponseBody::Streamed
+    } else if persist_response {
+        ResponseBody::Stored
+    } else {
+        ResponseBody::Returned(Vec::new())
+    };
+    let mut body_read_error = None;
+    let mut written_bytes: usize = 0;
+    let mut last_progress_update = started_at;
+    let mut cancelled_rx = params.cancelled_rx.clone();
+
+    loop {
+        let read_result = if let Some(cancelled_rx) = cancelled_rx.as_mut() {
+            if *cancelled_rx.borrow() {
+                break;
+            }
+
+            tokio::select! {
+                biased;
+                _ = cancelled_rx.changed() => {
+                    None
+                }
+                result = body_stream.read(&mut read_buf) => {
+                    Some(result)
+                }
+            }
+        } else {
+            Some(body_stream.read(&mut read_buf).await)
+        };
+
+        let Some(read_result) = read_result else {
+            break;
+        };
+
+        match read_result {
+            Ok(0) => break,
+            Ok(n) => {
+                written_bytes += n;
+                let chunk = &read_buf[..n];
+                if let Some((file, path)) = body_file.as_mut() {
+                    file.write_all(chunk).await.map_err(|source| {
+                        SendHttpRequestError::WriteResponseBody { path: path.clone(), source }
+                    })?;
+                }
+                if let Some(tx) = params.emit_response_body_chunks_to.as_ref() {
+                    let _ = tx.send(chunk.to_vec());
+                } else if let ResponseBody::Returned(body) = &mut response_body {
+                    body.extend_from_slice(chunk);
+                }
+
+                let now = Instant::now();
+                let should_update = now.duration_since(last_progress_update).as_millis()
+                    >= RESPONSE_PROGRESS_UPDATE_INTERVAL_MS;
+                if should_update {
+                    let elapsed = duration_to_i32(started_at.elapsed());
+                    let progress_response = HttpResponse {
+                        elapsed,
+                        content_length: Some(usize_to_i32(written_bytes)),
+                        elapsed_dns: dns_elapsed.load(Ordering::Relaxed),
+                        ..response.clone()
+                    };
+                    if let Some(store) = store {
+                        response = store
+                            .query_manager
+                            .with_tx(|tx| {
+                                tx.upsert_http_response(
+                                    &progress_response,
+                                    &store.update_source,
+                                    store.blob_manager,
+                                )
+                            })
+                            .map_err(SendHttpRequestError::PersistResponse)?;
+                    } else {
+                        response = progress_response;
+                    }
+                    last_progress_update = now;
+                }
+            }
+            Err(err) => {
+                body_read_error = Some(SendHttpRequestError::ReadResponseBody(
+                    yaak_http::error::Error::BodyReadError(err.to_string()),
+                ));
+                break;
+            }
+        }
+    }
+
+    if let Some((file, path)) = body_file.as_mut() {
+        file.flush().await.map_err(|source| SendHttpRequestError::WriteResponseBody {
+            path: path.clone(),
+            source,
+        })?;
+    }
+    drop(body_stream);
+
+    if let Some(err) = request_body_capture_error.take() {
+        response.error = Some(append_error_message(
+            response.error.take(),
+            format!("Request succeeded but failed to store request body: {err}"),
+        ));
+    }
+
+    if let Some(err) = body_read_error {
+        if let Some(store) = store {
+            let _ = persist_response_error(
+                store,
+                &response,
+                started_at,
+                err.to_string(),
+                request_started_url,
+            );
+        }
+        if let Some(task) = request_body_capture_task.take() {
+            match task.await {
+                Ok(Ok(_)) => {}
+                Ok(Err(err)) => warn!("Failed to store request body after response error: {err}"),
+                Err(err) => warn!("Failed to join request body capture task: {err}"),
+            }
+        }
+        if let Err(join_err) = event_handle.await {
+            warn!("Failed to join response event task: {}", join_err);
+        }
+        return Err(err);
+    }
+
+    let compressed_length = http_response.content_length.unwrap_or(written_bytes as u64);
+    let final_response = HttpResponse {
+        body_path: response_body_path,
+        content_length: Some(usize_to_i32(written_bytes)),
+        content_length_compressed: Some(u64_to_i32(compressed_length)),
+        elapsed: duration_to_i32(started_at.elapsed()),
+        elapsed_headers: headers_elapsed,
+        elapsed_dns: dns_elapsed.load(Ordering::Relaxed),
+        state: HttpResponseState::Closed,
+        ..response
+    };
+    if let Some(store) = store {
+        response = store
+            .query_manager
+            .with_tx(|tx| {
+                tx.upsert_http_response(&final_response, &store.update_source, store.blob_manager)
+            })
+            .map_err(SendHttpRequestError::PersistResponse)?;
+    } else {
+        response = final_response;
+    }
+
+    // Request-body history can be much larger than the response. It should not keep the
+    // response in a loading state after the network/response-body work has completed.
+    if let Some(task) = request_body_capture_task.take() {
+        let mut update_response = false;
+        match task.await {
+            Ok(Ok(total)) => {
+                let total = Some(usize_to_i32(total));
+                if response.request_content_length != total {
+                    response.request_content_length = total;
+                    update_response = true;
+                }
+            }
+            Ok(Err(err)) => {
+                response.error = Some(append_error_message(
+                    response.error.take(),
+                    format!("Request succeeded but failed to store request body: {err}"),
+                ));
+                update_response = true;
+            }
+            Err(err) => {
+                response.error = Some(append_error_message(
+                    response.error.take(),
+                    format!("Request succeeded but failed to store request body: {err}"),
+                ));
+                update_response = true;
+            }
+        }
+
+        if update_response && let Some(store) = store {
+            response = store
+                .query_manager
+                .with_tx(|tx| {
+                    tx.upsert_http_response(&response, &store.update_source, store.blob_manager)
+                })
+                .map_err(SendHttpRequestError::PersistResponse)?;
+        }
+    }
+
+    // Timeline events are useful history, but they should not keep the response in a loading state
+    // after the network/response-body work has completed.
+    if let Err(join_err) = event_handle.await {
+        warn!("Failed to join response event task: {}", join_err);
+    }
+
+    Ok(SendHttpRequestResult {
+        rendered_request,
+        response,
+        response_body,
+        cookies: cookie_behavior.store.as_ref().map(|store| store.get_all_cookies()),
+    })
+}
+
+fn persist_request_body_bytes(
+    blob_manager: &BlobManager,
+    body_id: &str,
+    bytes: &[u8],
+) -> std::result::Result<(), String> {
+    if bytes.is_empty() {
+        return Ok(());
+    }
+
+    blob_manager
+        .with_tx(|b| {
+            for (chunk_index, data) in bytes.chunks(REQUEST_BODY_CHUNK_SIZE).enumerate() {
+                b.insert_chunk(&BodyChunk::new(body_id, chunk_index as i32, data.to_vec()))?;
+            }
+            Ok::<_, yaak_models::error::Error>(())
+        })
+        .map_err(|e| e.to_string())
+}
+
+async fn persist_request_body_stream(
+    blob_manager: BlobManager,
+    body_id: String,
+    mut rx: tokio::sync::mpsc::UnboundedReceiver<Vec<u8>>,
+) -> std::result::Result<usize, String> {
+    let mut chunk_index: i32 = 0;
+    let mut total_bytes = 0usize;
+
+    // Stream reads arrive in small (eg. 8-16 KiB) pieces, so accumulate them into
+    // full-size chunks to avoid thousands of tiny inserts for large bodies
+    let mut buf: Vec<u8> = Vec::with_capacity(REQUEST_BODY_CHUNK_SIZE);
+    while let Some(data) = rx.recv().await {
+        total_bytes += data.len();
+        buf.extend_from_slice(&data);
+        while buf.len() >= REQUEST_BODY_CHUNK_SIZE {
+            let data = buf.drain(..REQUEST_BODY_CHUNK_SIZE).collect();
+            let chunk = BodyChunk::new(&body_id, chunk_index, data);
+            blob_manager.with_tx(|b| b.insert_chunk(&chunk)).map_err(|e| e.to_string())?;
+            chunk_index += 1;
+        }
+    }
+
+    if !buf.is_empty() {
+        let chunk = BodyChunk::new(&body_id, chunk_index, buf);
+        blob_manager.with_tx(|b| b.insert_chunk(&chunk)).map_err(|e| e.to_string())?;
+    }
+
+    Ok(total_bytes)
+}
+
+fn append_error_message(existing_error: Option<String>, message: String) -> String {
+    match existing_error {
+        Some(existing) => format!("{existing}; {message}"),
+        None => message,
+    }
+}
+
+pub fn load_cookie_jar(
+    query_manager: &QueryManager,
+    cookie_jar_id: Option<&str>,
+) -> Result<Option<CookieJar>> {
+    let Some(cookie_jar_id) = cookie_jar_id else {
+        return Ok(None);
+    };
+
+    query_manager
+        .connect()
+        .get_cookie_jar(cookie_jar_id)
+        .map(Some)
+        .map_err(SendHttpRequestError::LoadCookieJar)
+}
+
+/// Write the cookies a send collected back to its jar.
+///
+/// The store is shared with the HTTP transaction, so it holds every cookie picked up along the
+/// way no matter how the send ended — including when the response arrived but the storage work
+/// after it failed. Call this whatever the send returned; a send that failed before the
+/// transaction started leaves the store untouched, which compares equal and writes nothing.
+pub fn persist_cookies_after_send(
+    query_manager: &QueryManager,
+    cookie_jar: Option<&mut CookieJar>,
+    cookie_store: Option<&CookieStore>,
+) -> Result<()> {
+    let (Some(cookie_jar), Some(cookie_store)) = (cookie_jar, cookie_store) else {
+        return Ok(());
+    };
+
+    let cookies = cookie_store.get_all_cookies();
+    if cookies == cookie_jar.cookies {
+        return Ok(());
+    }
+
+    cookie_jar.cookies = cookies;
+    query_manager
+        .with_tx(|tx| tx.upsert_cookie_jar(cookie_jar, &UpdateSource::Background))
+        .map_err(SendHttpRequestError::PersistCookieJar)?;
+    Ok(())
+}
+
+fn proxy_setting_from_settings(proxy: Option<ProxySetting>) -> HttpConnectionProxySetting {
+    match proxy {
+        None => HttpConnectionProxySetting::System,
+        Some(ProxySetting::Disabled) => HttpConnectionProxySetting::Disabled,
+        Some(ProxySetting::Enabled { http, https, auth, bypass, disabled }) => {
+            if disabled {
+                HttpConnectionProxySetting::System
+            } else {
+                HttpConnectionProxySetting::Enabled {
+                    http,
+                    https,
+                    bypass,
+                    auth: auth.map(|ProxySettingAuth { user, password }| {
+                        HttpConnectionProxySettingAuth { user, password }
+                    }),
+                }
+            }
+        }
+    }
+}
+
+pub async fn apply_plugin_authentication(
+    sendable_request: &mut SendableHttpRequest,
+    request: &HttpRequest,
+    auth_context_id: &str,
+    plugin_manager: &PluginManager,
+    plugin_context: &PluginContext,
+) -> std::result::Result<(), String> {
+    match &request.authentication_type {
+        None => {}
+        Some(authentication_type) if authentication_type == "none" => {}
+        Some(authentication_type) => {
+            let req = CallHttpAuthenticationRequest {
+                context_id: format!("{:x}", md5::compute(auth_context_id)),
+                values: serde_json::from_value(
+                    serde_json::to_value(&request.authentication)
+                        .map_err(|e| format!("Failed to serialize auth values: {e}"))?,
+                )
+                .map_err(|e| format!("Failed to parse auth values: {e}"))?,
+                url: sendable_request.url.clone(),
+                method: sendable_request.method.clone(),
+                headers: sendable_request
+                    .headers
+                    .iter()
+                    .map(|(name, value)| HttpHeader {
+                        name: name.to_string(),
+                        value: value.to_string(),
+                    })
+                    .collect(),
+                body: match &sendable_request.body {
+                    // Bodies above the cap are not passed to auth plugins. Copying
+                    // them across the plugin IPC is too expensive, and payloads that
+                    // large are usually uploads that signing schemes treat as
+                    // unsigned anyway. Streamed bodies (files, multipart) are never
+                    // passed for the same reason.
+                    Some(SendableBody::Bytes(bytes)) if bytes.len() <= MAX_AUTH_BODY_BYTES => {
+                        String::from_utf8(bytes.to_vec()).ok()
+                    }
+                    _ => None,
+                },
+            };
+            let plugin_result = plugin_manager
+                .call_http_authentication(plugin_context, authentication_type, req)
+                .await
+                .map_err(|e| format!("Failed to apply authentication plugin: {e}"))?;
+
+            for header in plugin_result.set_headers.unwrap_or_default() {
+                sendable_request.insert_header((header.name, header.value));
+            }
+
+            if let Some(params) = plugin_result.set_query_parameters {
+                let params = params.into_iter().map(|p| (p.name, p.value)).collect::<Vec<_>>();
+                sendable_request.url = append_query_params(&sendable_request.url, params);
+            }
+        }
+    }
+    Ok(())
+}
+
+fn persist_response_error(
+    store: &ResponseStorage,
+    response: &HttpResponse,
+    started_at: Instant,
+    error: String,
+    fallback_url: String,
+) -> Result<HttpResponse> {
+    let elapsed = duration_to_i32(started_at.elapsed());
+    store
+        .query_manager
+        .with_tx(|tx| {
+            tx.upsert_http_response(
+                &HttpResponse {
+                    state: HttpResponseState::Closed,
+                    elapsed,
+                    elapsed_headers: if response.elapsed_headers == 0 {
+                        elapsed
+                    } else {
+                        response.elapsed_headers
+                    },
+                    error: Some(error),
+                    url: if response.url.is_empty() { fallback_url } else { response.url.clone() },
+                    ..response.clone()
+                },
+                &store.update_source,
+                store.blob_manager,
+            )
+        })
+        .map_err(SendHttpRequestError::PersistResponse)
+}
+
+fn sendable_body_length(body: Option<&SendableBody>) -> Option<i32> {
+    match body {
+        Some(SendableBody::Bytes(bytes)) => Some(usize_to_i32(bytes.len())),
+        Some(SendableBody::Stream { content_length: Some(length), .. }) => {
+            Some(u64_to_i32(*length))
+        }
+        _ => None,
+    }
+}
+
+fn duration_to_i32(duration: std::time::Duration) -> i32 {
+    u128_to_i32(duration.as_millis())
+}
+
+fn usize_to_i32(value: usize) -> i32 {
+    if value > i32::MAX as usize { i32::MAX } else { value as i32 }
+}
+
+fn u64_to_i32(value: u64) -> i32 {
+    if value > i32::MAX as u64 { i32::MAX } else { value as i32 }
+}
+
+fn u128_to_i32(value: u128) -> i32 {
+    if value > i32::MAX as u128 { i32::MAX } else { value as i32 }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::collections::HashMap;
+    use std::pin::Pin;
+    use tempfile::TempDir;
+    use tokio::io::AsyncRead;
+    use yaak_http::decompress::ContentEncoding;
+    use yaak_models::models::{CookieDomain, CookieExpires, Workspace};
+
+    struct NoopTemplateCallback;
+
+    impl TemplateCallback for NoopTemplateCallback {
+        async fn run(
+            &self,
+            _fn_name: &str,
+            _args: HashMap<String, serde_json::Value>,
+        ) -> yaak_templates::error::Result<String> {
+            Ok(String::new())
+        }
+
+        fn transform_arg(
+            &self,
+            _fn_name: &str,
+            _arg_name: &str,
+            arg_value: &str,
+        ) -> yaak_templates::error::Result<String> {
+            Ok(arg_value.to_string())
+        }
+    }
+
+    struct StubExecutor {
+        body: &'static [u8],
+    }
+
+    #[async_trait]
+    impl SendRequestExecutor for StubExecutor {
+        async fn send(
+            &self,
+            sendable_request: SendableHttpRequest,
+            event_tx: mpsc::Sender<SenderHttpResponseEvent>,
+            _cookie_behavior: CookieBehavior,
+        ) -> yaak_http::error::Result<yaak_http::sender::HttpResponse> {
+            let _ = event_tx.try_send(SenderHttpResponseEvent::HeaderDown(
+                "content-type".to_string(),
+                "text/plain".to_string(),
+            ));
+            let body: Pin<Box<dyn AsyncRead + Send>> =
+                Box::pin(std::io::Cursor::new(self.body.to_vec()));
+            Ok(yaak_http::sender::HttpResponse::new(
+                200,
+                Some("OK".to_string()),
+                vec![("content-type".to_string(), "text/plain".to_string())],
+                Vec::new(),
+                Some(self.body.len() as u64),
+                sendable_request.url.clone(),
+                None,
+                Some("HTTP/1.1".to_string()),
+                body,
+                ContentEncoding::Identity,
+            ))
+        }
+    }
+
+    /// The hosted sender runs with no query manager, blob manager, or response directory. Nothing
+    /// here touches storage, so the caller's only view of the response is what gets streamed out.
+    #[tokio::test]
+    async fn sends_without_a_database() {
+        let (event_tx, mut event_rx) = mpsc::channel(HTTP_EVENT_CHANNEL_CAPACITY);
+        let (chunk_tx, mut chunk_rx) = mpsc::unbounded_channel();
+        let executor = StubExecutor { body: b"hello world" };
+
+        let result = send_http_request(SendHttpRequestParams {
+            inputs: HttpSendInputs {
+                request: ResolvedHttpRequest::assume_resolved(
+                    HttpRequest {
+                        workspace_id: "wk_test".to_string(),
+                        url: "http://localhost/test".to_string(),
+                        ..Default::default()
+                    },
+                    String::new(),
+                ),
+                environment_chain: Vec::new(),
+                runtime_config: HttpSendRuntimeConfig {
+                    settings: ResolvedHttpRequestSettings::default(),
+                    proxy: HttpConnectionProxySetting::System,
+                    dns_overrides: Vec::new(),
+                    client_certificates: Vec::new(),
+                },
+                cookie_store: Some(CookieStore::new()),
+            },
+            template_callback: &NoopTemplateCallback,
+            storage: None,
+            emit_events_to: Some(event_tx),
+            emit_response_body_chunks_to: Some(chunk_tx),
+            cancelled_rx: None,
+            existing_response: None,
+            prepare_sendable_request: None,
+            executor: &executor,
+        })
+        .await
+        .expect("send should succeed without a database");
+
+        assert_eq!(result.response.status, 200);
+        assert!(matches!(result.response.state, HttpResponseState::Closed));
+        assert_eq!(result.response.content_length, Some(11));
+        assert!(result.cookies.is_some());
+
+        // Nothing was written, so the response carries no body file and only ever lived in memory.
+        assert_eq!(result.response.body_path, None);
+        assert!(!result.response.id.is_empty());
+
+        let mut body = Vec::new();
+        while let Some(chunk) = chunk_rx.recv().await {
+            body.extend_from_slice(&chunk);
+        }
+        assert_eq!(body, b"hello world");
+
+        let mut events = Vec::new();
+        while let Some(event) = event_rx.recv().await {
+            events.push(event);
+        }
+        assert!(
+            events.iter().any(
+                |e| matches!(e, SenderHttpResponseEvent::Setting { name, .. } if name == "redirects")
+            ),
+            "expected timeline settings events, got {events:?}"
+        );
+        assert!(
+            events.iter().any(|e| matches!(e, SenderHttpResponseEvent::HeaderDown(..))),
+            "expected timeline events from the executor, got {events:?}"
+        );
+    }
+
+    /// A response nothing stores has to hand its body back, because no later
+    /// read can find it: there is no row to look up and no id to read it by.
+    /// GraphQL introspection is the caller that depends on this.
+    #[tokio::test]
+    async fn returns_the_body_when_nothing_stores_it() {
+        let executor = StubExecutor { body: b"hello world" };
+
+        let result = send_http_request(SendHttpRequestParams {
+            inputs: HttpSendInputs {
+                request: ResolvedHttpRequest::assume_resolved(
+                    HttpRequest {
+                        workspace_id: "wk_test".to_string(),
+                        url: "http://localhost/test".to_string(),
+                        ..Default::default()
+                    },
+                    String::new(),
+                ),
+                environment_chain: Vec::new(),
+                runtime_config: HttpSendRuntimeConfig {
+                    settings: ResolvedHttpRequestSettings::default(),
+                    proxy: HttpConnectionProxySetting::System,
+                    dns_overrides: Vec::new(),
+                    client_certificates: Vec::new(),
+                },
+                cookie_store: Some(CookieStore::new()),
+            },
+            template_callback: &NoopTemplateCallback,
+            storage: None,
+            emit_events_to: None,
+            // No chunk sender: the body is collected for the caller instead.
+            emit_response_body_chunks_to: None,
+            cancelled_rx: None,
+            existing_response: None,
+            prepare_sendable_request: None,
+            executor: &executor,
+        })
+        .await
+        .expect("send should succeed without a database");
+
+        let ResponseBody::Returned(body) = result.response_body else {
+            panic!("a response nothing stores has to hand its body back");
+        };
+        assert_eq!(body, b"hello world");
+        assert!(result.response.request_id.is_empty(), "an unsaved response has no request");
+    }
+
+    fn seed_cookie_jar() -> (QueryManager, CookieJar, TempDir) {
+        let temp_dir = TempDir::new().expect("Failed to create temp dir");
+        let (query_manager, _blob_manager, _rx) = yaak_models::init_standalone(
+            &temp_dir.path().join("db.sqlite"),
+            &temp_dir.path().join("blobs.sqlite"),
+        )
+        .expect("Failed to initialize DB");
+
+        query_manager
+            .with_tx(|tx| {
+                tx.upsert_workspace(
+                    &Workspace { id: "wk_test".to_string(), ..Default::default() },
+                    &UpdateSource::Sync,
+                )
+            })
+            .expect("Failed to seed workspace");
+        let cookie_jar = query_manager
+            .with_tx(|tx| {
+                tx.upsert_cookie_jar(
+                    &CookieJar {
+                        id: "cj_test".to_string(),
+                        workspace_id: "wk_test".to_string(),
+                        name: "Default".to_string(),
+                        ..Default::default()
+                    },
+                    &UpdateSource::Sync,
+                )
+            })
+            .expect("Failed to seed cookie jar");
+
+        (query_manager, cookie_jar, temp_dir)
+    }
+
+    fn cookie(name: &str) -> Cookie {
+        Cookie {
+            name: name.to_string(),
+            value: "value".to_string(),
+            domain: CookieDomain::HostOnly("localhost".to_string()),
+            expires: CookieExpires::SessionEnd,
+            path: "/".to_string(),
+            secure: false,
+            http_only: false,
+            same_site: None,
+        }
+    }
+
+    /// Cookies the transaction collected must survive no matter how the send ended, including the
+    /// storage work that runs after a response has already arrived.
+    #[test]
+    fn persists_cookies_collected_before_a_failure() {
+        let (query_manager, mut cookie_jar, _temp_dir) = seed_cookie_jar();
+        let store = CookieStore::from_cookies(cookie_jar.cookies.clone());
+        store.store_cookies_from_response(
+            &"http://localhost/test".parse().expect("valid url"),
+            &["session=abc123; Path=/".to_string()],
+        );
+
+        persist_cookies_after_send(&query_manager, Some(&mut cookie_jar), Some(&store))
+            .expect("Failed to persist cookies");
+
+        let stored =
+            query_manager.connect().get_cookie_jar("cj_test").expect("Failed to load cookie jar");
+        assert_eq!(stored.cookies.len(), 1);
+        assert_eq!(stored.cookies[0].name, "session");
+        assert_eq!(stored.cookies[0].value, "abc123");
+    }
+
+    /// A send that failed before the transaction started leaves the store untouched, so there is
+    /// nothing to write and a concurrent update to the jar must not be clobbered.
+    #[test]
+    fn leaves_the_jar_alone_when_no_cookies_changed() {
+        let (query_manager, mut cookie_jar, _temp_dir) = seed_cookie_jar();
+        cookie_jar.cookies = vec![cookie("original")];
+        cookie_jar = query_manager
+            .with_tx(|tx| tx.upsert_cookie_jar(&cookie_jar, &UpdateSource::Sync))
+            .expect("Failed to seed cookies");
+        let store = CookieStore::from_cookies(cookie_jar.cookies.clone());
+
+        // Someone else updates the jar while the send is in flight.
+        query_manager
+            .with_tx(|tx| {
+                tx.upsert_cookie_jar(
+                    &CookieJar { cookies: vec![cookie("newer")], ..cookie_jar.clone() },
+                    &UpdateSource::Sync,
+                )
+            })
+            .expect("Failed to update cookie jar");
+
+        persist_cookies_after_send(&query_manager, Some(&mut cookie_jar), Some(&store))
+            .expect("Failed to persist cookies");
+
+        let stored =
+            query_manager.connect().get_cookie_jar("cj_test").expect("Failed to load cookie jar");
+        assert_eq!(stored.cookies, vec![cookie("newer")]);
+    }
+}
diff --git a/flatpak/app.yaak.Yaak.metainfo.xml b/flatpak/app.yaak.Yaak.metainfo.xml
new file mode 100644
index 0000000..eacb381
--- /dev/null
+++ b/flatpak/app.yaak.Yaak.metainfo.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<component type="desktop-application">
+  <id>app.yaak.Yaak</id>
+
+  <name>Yaak</name>
+  <summary>An offline, Git friendly API Client</summary>
+
+  <developer id="app.yaak">
+    <name>Yaak</name>
+  </developer>
+
+  <metadata_license>MIT</metadata_license>
+  <project_license>MIT</project_license>
+
+  <url type="homepage">https://yaak.app</url>
+  <url type="bugtracker">https://yaak.app/feedback</url>
+  <url type="contact">https://yaak.app/feedback</url>
+  <url type="vcs-browser">https://github.com/mountain-loop/yaak</url>
+
+  <description>
+    <p>
+      A fast, privacy-first API client for REST, GraphQL, SSE, WebSocket,
+      and gRPC — built with Tauri, Rust, and React.
+    </p>
+    <p>Features include:</p>
+    <ul>
+      <li>REST, GraphQL, SSE, WebSocket, and gRPC support</li>
+      <li>Local-only data, secrets encryption, and zero telemetry</li>
+      <li>Git-friendly plain-text project storage</li>
+      <li>Environment variables and template functions</li>
+      <li>Request chaining and dynamic values</li>
+      <li>OAuth 2.0, Bearer, Basic, Digest, API Key, AWS, JWT, and NTLM authentication</li>
+      <li>Import from cURL, Postman, Insomnia, and OpenAPI</li>
+      <li>Extensible plugin system</li>
+    </ul>
+  </description>
+
+  <launchable type="desktop-id">app.yaak.Yaak.desktop</launchable>
+
+  <branding>
+    <color type="primary" scheme_preference="light">#8b32ff</color>
+    <color type="primary" scheme_preference="dark">#c293ff</color>
+  </branding>
+
+  <content_rating type="oars-1.1" />
+
+  <screenshots>
+    <screenshot type="default">
+      <caption>Crafting an API request</caption>
+      <image>https://assets.yaak.app/uploads/screenshot-BLG1w_2310x1326.png</image>
+    </screenshot>
+  </screenshots>
+
+  <releases>
+    <release version="2026.2.0" date="2026-02-10" />
+  </releases>
+</component>
diff --git a/flatpak/fix-lockfile.mjs b/flatpak/fix-lockfile.mjs
new file mode 100644
index 0000000..e8adc89
--- /dev/null
+++ b/flatpak/fix-lockfile.mjs
@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+
+// Adds missing `resolved` and `integrity` fields to npm package-lock.json.
+//
+// npm sometimes omits these fields for nested dependencies inside workspace
+// packages. This breaks offline installs and tools like flatpak-node-generator
+// that need explicit tarball URLs for every package.
+//
+// Based on https://github.com/grant-dennison/npm-package-lock-add-resolved
+// (MIT License, Copyright (c) 2024 Grant Dennison)
+
+import { readFile, writeFile } from "node:fs/promises";
+import { get } from "node:https";
+
+const lockfilePath = process.argv[2] || "package-lock.json";
+
+function fetchJson(url) {
+  return new Promise((resolve, reject) => {
+    get(url, (res) => {
+      let data = "";
+      res.on("data", (chunk) => {
+        data += chunk;
+      });
+      res.on("end", () => {
+        if (res.statusCode === 200) {
+          resolve(JSON.parse(data));
+        } else {
+          reject(`${url} returned ${res.statusCode} ${res.statusMessage}`);
+        }
+      });
+      res.on("error", reject);
+    }).on("error", reject);
+  });
+}
+
+async function fillResolved(name, p) {
+  const version = p.version.replace(/^.*@/, "");
+  console.log(`Retrieving metadata for ${name}@${version}`);
+  const metadataUrl = `https://registry.npmjs.com/${name}/${version}`;
+  const metadata = await fetchJson(metadataUrl);
+  p.resolved = metadata.dist.tarball;
+  p.integrity = metadata.dist.integrity;
+}
+
+let changesMade = false;
+
+async function fillAllResolved(packages) {
+  for (const packagePath in packages) {
+    if (packagePath === "") continue;
+    if (!packagePath.includes("node_modules/")) continue;
+    const p = packages[packagePath];
+    if (p.link) continue;
+    if (!p.inBundle && !p.bundled && (!p.resolved || !p.integrity)) {
+      const packageName =
+        p.name ||
+        /^npm:(.+?)@.+$/.exec(p.version)?.[1] ||
+        packagePath.replace(/^.*node_modules\/(?=.+?$)/, "");
+      await fillResolved(packageName, p);
+      changesMade = true;
+    }
+  }
+}
+
+const oldContents = await readFile(lockfilePath, "utf-8");
+const packageLock = JSON.parse(oldContents);
+
+await fillAllResolved(packageLock.packages ?? []);
+
+if (changesMade) {
+  const newContents = JSON.stringify(packageLock, null, 2) + "\n";
+  await writeFile(lockfilePath, newContents);
+  console.log(`Updated ${lockfilePath}`);
+} else {
+  console.log("No changes needed.");
+}
diff --git a/flatpak/generate-sources.sh b/flatpak/generate-sources.sh
new file mode 100755
index 0000000..216d0a4
--- /dev/null
+++ b/flatpak/generate-sources.sh
@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+#
+# Generate offline dependency source files for Flatpak builds.
+#
+# Prerequisites:
+#   pip install flatpak-node-generator tomlkit aiohttp
+#   Clone https://github.com/flatpak/flatpak-builder-tools (for cargo generator)
+#
+# Usage:
+#   ./flatpak/generate-sources.sh <flathub-repo-path>
+#   ./flatpak/generate-sources.sh ../flathub-repo
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+
+if [ $# -lt 1 ]; then
+    echo "Usage: $0 <flathub-repo-path>"
+    echo "Example: $0 ../flathub-repo"
+    exit 1
+fi
+
+FLATHUB_REPO="$(cd "$1" && pwd)"
+
+python3 "$SCRIPT_DIR/flatpak-builder-tools/cargo/flatpak-cargo-generator.py" \
+  -o "$FLATHUB_REPO/cargo-sources.json" "$REPO_ROOT/Cargo.lock"
+
+TMPDIR=$(mktemp -d)
+trap 'rm -rf "$TMPDIR"' EXIT
+
+cp "$REPO_ROOT/package-lock.json" "$TMPDIR/package-lock.json"
+cp "$REPO_ROOT/package.json" "$TMPDIR/package.json"
+
+node "$SCRIPT_DIR/fix-lockfile.mjs" "$TMPDIR/package-lock.json"
+
+node -e "
+  const fs = require('fs');
+  const p = process.argv[1];
+  const d = JSON.parse(fs.readFileSync(p, 'utf-8'));
+  for (const [name, info] of Object.entries(d.packages || {})) {
+    if (name && (info.link || !info.resolved)) delete d.packages[name];
+  }
+  fs.writeFileSync(p, JSON.stringify(d, null, 2));
+" "$TMPDIR/package-lock.json"
+
+flatpak-node-generator --no-requests-cache \
+  -o "$FLATHUB_REPO/node-sources.json" npm "$TMPDIR/package-lock.json"
diff --git a/flatpak/update-manifest.sh b/flatpak/update-manifest.sh
new file mode 100755
index 0000000..8ad59f7
--- /dev/null
+++ b/flatpak/update-manifest.sh
@@ -0,0 +1,86 @@
+#!/usr/bin/env bash
+#
+# Update the Flathub repo for a new release.
+#
+# Usage:
+#   ./flatpak/update-manifest.sh <version-tag> <flathub-repo-path>
+#   ./flatpak/update-manifest.sh v2026.2.0 ../flathub-repo
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+
+if [ $# -lt 2 ]; then
+    echo "Usage: $0 <version-tag> <flathub-repo-path>"
+    echo "Example: $0 v2026.2.0 ../flathub-repo"
+    exit 1
+fi
+
+VERSION_TAG="$1"
+VERSION="${VERSION_TAG#v}"
+FLATHUB_REPO="$(cd "$2" && pwd)"
+MANIFEST="$FLATHUB_REPO/app.yaak.Yaak.yml"
+METAINFO="$SCRIPT_DIR/app.yaak.Yaak.metainfo.xml"
+
+if [[ "$VERSION" == *-* ]]; then
+    echo "Skipping pre-release version '$VERSION_TAG' (only stable releases are published to Flathub)"
+    exit 0
+fi
+
+REPO="mountain-loop/yaak"
+COMMIT=$(git ls-remote "https://github.com/$REPO.git" "refs/tags/$VERSION_TAG" | cut -f1)
+
+if [ -z "$COMMIT" ]; then
+    echo "Error: Could not resolve commit for tag $VERSION_TAG"
+    exit 1
+fi
+
+echo "Tag: $VERSION_TAG"
+echo "Commit: $COMMIT"
+
+# Update git tag and commit in the manifest
+sed -i "s|tag: v.*|tag: $VERSION_TAG|" "$MANIFEST"
+sed -i "s|commit: .*|commit: $COMMIT|" "$MANIFEST"
+echo "Updated manifest tag and commit."
+
+# Regenerate offline dependency sources from the tagged lockfiles
+TMPDIR=$(mktemp -d)
+trap 'rm -rf "$TMPDIR"' EXIT
+
+echo "Fetching lockfiles from $VERSION_TAG..."
+curl -fsSL "https://raw.githubusercontent.com/$REPO/$VERSION_TAG/Cargo.lock" -o "$TMPDIR/Cargo.lock"
+curl -fsSL "https://raw.githubusercontent.com/$REPO/$VERSION_TAG/package-lock.json" -o "$TMPDIR/package-lock.json"
+curl -fsSL "https://raw.githubusercontent.com/$REPO/$VERSION_TAG/package.json" -o "$TMPDIR/package.json"
+
+echo "Generating cargo-sources.json..."
+python3 "$SCRIPT_DIR/flatpak-builder-tools/cargo/flatpak-cargo-generator.py" \
+  -o "$FLATHUB_REPO/cargo-sources.json" "$TMPDIR/Cargo.lock"
+
+echo "Generating node-sources.json..."
+node "$SCRIPT_DIR/fix-lockfile.mjs" "$TMPDIR/package-lock.json"
+
+node -e "
+  const fs = require('fs');
+  const p = process.argv[1];
+  const d = JSON.parse(fs.readFileSync(p, 'utf-8'));
+  for (const [name, info] of Object.entries(d.packages || {})) {
+    if (name && (info.link || !info.resolved)) delete d.packages[name];
+  }
+  fs.writeFileSync(p, JSON.stringify(d, null, 2));
+" "$TMPDIR/package-lock.json"
+
+flatpak-node-generator --no-requests-cache \
+  -o "$FLATHUB_REPO/node-sources.json" npm "$TMPDIR/package-lock.json"
+
+# Update metainfo with new release
+TODAY=$(date +%Y-%m-%d)
+sed -i "s|  <releases>|  <releases>\n    <release version=\"$VERSION\" date=\"$TODAY\" />|" "$METAINFO"
+echo "Updated metainfo with release $VERSION."
+
+echo ""
+echo "Done! Review the changes:"
+echo "  $MANIFEST"
+echo "  $METAINFO"
+echo "  $FLATHUB_REPO/cargo-sources.json"
+echo "  $FLATHUB_REPO/node-sources.json"
diff --git a/greptile.json b/greptile.json
new file mode 100644
index 0000000..f99d708
--- /dev/null
+++ b/greptile.json
@@ -0,0 +1,3 @@
+{
+  "ignorePatterns": "crates/yaak-templates/pkg/**\ncrates/yaak-wasm/pkg/**\n**/bindings/gen_*.ts\npackage-lock.json\nCargo.lock"
+}
diff --git a/npm/cli-darwin-arm64/bin/.gitkeep b/npm/cli-darwin-arm64/bin/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/npm/cli-darwin-arm64/package.json b/npm/cli-darwin-arm64/package.json
new file mode 100644
index 0000000..51d7b54
--- /dev/null
+++ b/npm/cli-darwin-arm64/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaakapp/cli-darwin-arm64",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mountain-loop/yaak.git"
+  },
+  "os": [
+    "darwin"
+  ],
+  "cpu": [
+    "arm64"
+  ]
+}
diff --git a/npm/cli-darwin-x64/bin/.gitkeep b/npm/cli-darwin-x64/bin/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/npm/cli-darwin-x64/package.json b/npm/cli-darwin-x64/package.json
new file mode 100644
index 0000000..484a36a
--- /dev/null
+++ b/npm/cli-darwin-x64/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaakapp/cli-darwin-x64",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mountain-loop/yaak.git"
+  },
+  "os": [
+    "darwin"
+  ],
+  "cpu": [
+    "x64"
+  ]
+}
diff --git a/npm/cli-linux-arm64/bin/.gitkeep b/npm/cli-linux-arm64/bin/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/npm/cli-linux-arm64/package.json b/npm/cli-linux-arm64/package.json
new file mode 100644
index 0000000..bc219f0
--- /dev/null
+++ b/npm/cli-linux-arm64/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaakapp/cli-linux-arm64",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mountain-loop/yaak.git"
+  },
+  "os": [
+    "linux"
+  ],
+  "cpu": [
+    "arm64"
+  ]
+}
diff --git a/npm/cli-linux-x64/bin/.gitkeep b/npm/cli-linux-x64/bin/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/npm/cli-linux-x64/package.json b/npm/cli-linux-x64/package.json
new file mode 100644
index 0000000..070b5b0
--- /dev/null
+++ b/npm/cli-linux-x64/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaakapp/cli-linux-x64",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mountain-loop/yaak.git"
+  },
+  "os": [
+    "linux"
+  ],
+  "cpu": [
+    "x64"
+  ]
+}
diff --git a/npm/cli-win32-arm64/bin/.gitkeep b/npm/cli-win32-arm64/bin/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/npm/cli-win32-arm64/package.json b/npm/cli-win32-arm64/package.json
new file mode 100644
index 0000000..8975e28
--- /dev/null
+++ b/npm/cli-win32-arm64/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaakapp/cli-win32-arm64",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mountain-loop/yaak.git"
+  },
+  "os": [
+    "win32"
+  ],
+  "cpu": [
+    "arm64"
+  ]
+}
diff --git a/npm/cli-win32-x64/bin/.gitkeep b/npm/cli-win32-x64/bin/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/npm/cli-win32-x64/package.json b/npm/cli-win32-x64/package.json
new file mode 100644
index 0000000..c62ef00
--- /dev/null
+++ b/npm/cli-win32-x64/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaakapp/cli-win32-x64",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mountain-loop/yaak.git"
+  },
+  "os": [
+    "win32"
+  ],
+  "cpu": [
+    "x64"
+  ]
+}
diff --git a/npm/cli/.gitignore b/npm/cli/.gitignore
new file mode 100644
index 0000000..c3ac0f6
--- /dev/null
+++ b/npm/cli/.gitignore
@@ -0,0 +1,2 @@
+yaak
+yaak.exe
diff --git a/npm/cli/bin/cli.js b/npm/cli/bin/cli.js
new file mode 100755
index 0000000..0527525
--- /dev/null
+++ b/npm/cli/bin/cli.js
@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+const path = require("path");
+const childProcess = require("child_process");
+const { BINARY_NAME, PLATFORM_SPECIFIC_PACKAGE_NAME } = require("../common");
+
+function getBinaryPath() {
+  try {
+    if (!PLATFORM_SPECIFIC_PACKAGE_NAME) {
+      throw new Error("unsupported platform");
+    }
+    return require.resolve(`${PLATFORM_SPECIFIC_PACKAGE_NAME}/bin/${BINARY_NAME}`);
+  } catch (_) {
+    return path.join(__dirname, "..", BINARY_NAME);
+  }
+}
+
+const result = childProcess.spawnSync(getBinaryPath(), process.argv.slice(2), {
+  stdio: "inherit",
+  env: { ...process.env, YAAK_CLI_INSTALL_SOURCE: process.env.YAAK_CLI_INSTALL_SOURCE ?? "npm" },
+});
+
+if (result.error) {
+  throw result.error;
+}
+
+if (result.signal) {
+  process.kill(process.pid, result.signal);
+}
+
+process.exit(result.status ?? 1);
diff --git a/npm/cli/common.js b/npm/cli/common.js
new file mode 100644
index 0000000..8f22e19
--- /dev/null
+++ b/npm/cli/common.js
@@ -0,0 +1,20 @@
+const BINARY_DISTRIBUTION_PACKAGES = {
+  darwin_arm64: "@yaakapp/cli-darwin-arm64",
+  darwin_x64: "@yaakapp/cli-darwin-x64",
+  linux_arm64: "@yaakapp/cli-linux-arm64",
+  linux_x64: "@yaakapp/cli-linux-x64",
+  win32_x64: "@yaakapp/cli-win32-x64",
+  win32_arm64: "@yaakapp/cli-win32-arm64",
+};
+
+const BINARY_DISTRIBUTION_VERSION = require("./package.json").version;
+const BINARY_NAME = process.platform === "win32" ? "yaak.exe" : "yaak";
+const PLATFORM_SPECIFIC_PACKAGE_NAME =
+  BINARY_DISTRIBUTION_PACKAGES[`${process.platform}_${process.arch}`];
+
+module.exports = {
+  BINARY_DISTRIBUTION_PACKAGES,
+  BINARY_DISTRIBUTION_VERSION,
+  BINARY_NAME,
+  PLATFORM_SPECIFIC_PACKAGE_NAME,
+};
diff --git a/npm/cli/index.js b/npm/cli/index.js
new file mode 100644
index 0000000..ae8f866
--- /dev/null
+++ b/npm/cli/index.js
@@ -0,0 +1,21 @@
+const path = require("path");
+const childProcess = require("child_process");
+const { PLATFORM_SPECIFIC_PACKAGE_NAME, BINARY_NAME } = require("./common");
+
+function getBinaryPath() {
+  try {
+    if (!PLATFORM_SPECIFIC_PACKAGE_NAME) {
+      throw new Error("unsupported platform");
+    }
+    return require.resolve(`${PLATFORM_SPECIFIC_PACKAGE_NAME}/bin/${BINARY_NAME}`);
+  } catch (_) {
+    return path.join(__dirname, BINARY_NAME);
+  }
+}
+
+module.exports.runBinary = function runBinary(...args) {
+  childProcess.execFileSync(getBinaryPath(), args, {
+    stdio: "inherit",
+    env: { ...process.env, YAAK_CLI_INSTALL_SOURCE: process.env.YAAK_CLI_INSTALL_SOURCE ?? "npm" },
+  });
+};
diff --git a/npm/cli/install.js b/npm/cli/install.js
new file mode 100644
index 0000000..d5f1311
--- /dev/null
+++ b/npm/cli/install.js
@@ -0,0 +1,97 @@
+const fs = require("node:fs");
+const path = require("node:path");
+const zlib = require("node:zlib");
+const https = require("node:https");
+const {
+  BINARY_DISTRIBUTION_VERSION,
+  BINARY_NAME,
+  PLATFORM_SPECIFIC_PACKAGE_NAME,
+} = require("./common");
+
+const fallbackBinaryPath = path.join(__dirname, BINARY_NAME);
+
+function makeRequest(url) {
+  return new Promise((resolve, reject) => {
+    https
+      .get(url, (response) => {
+        if (response.statusCode >= 200 && response.statusCode < 300) {
+          const chunks = [];
+          response.on("data", (chunk) => chunks.push(chunk));
+          response.on("end", () => resolve(Buffer.concat(chunks)));
+        } else if (
+          response.statusCode >= 300 &&
+          response.statusCode < 400 &&
+          response.headers.location
+        ) {
+          makeRequest(response.headers.location).then(resolve, reject);
+        } else {
+          reject(
+            new Error(
+              `npm responded with status code ${response.statusCode} when downloading package ${url}`,
+            ),
+          );
+        }
+      })
+      .on("error", (error) => reject(error));
+  });
+}
+
+function extractFileFromTarball(tarballBuffer, filepath) {
+  let offset = 0;
+  while (offset < tarballBuffer.length) {
+    const header = tarballBuffer.subarray(offset, offset + 512);
+    offset += 512;
+
+    const fileName = header.toString("utf-8", 0, 100).replace(/\0.*/g, "");
+    const fileSize = parseInt(header.toString("utf-8", 124, 136).replace(/\0.*/g, ""), 8);
+
+    if (fileName === filepath) {
+      return tarballBuffer.subarray(offset, offset + fileSize);
+    }
+
+    offset = (offset + fileSize + 511) & ~511;
+  }
+
+  return null;
+}
+
+async function downloadBinaryFromNpm() {
+  if (!PLATFORM_SPECIFIC_PACKAGE_NAME) {
+    throw new Error(`Unsupported platform: ${process.platform}/${process.arch}`);
+  }
+
+  const packageNameWithoutScope = PLATFORM_SPECIFIC_PACKAGE_NAME.split("/")[1];
+  const tarballUrl = `https://registry.npmjs.org/${PLATFORM_SPECIFIC_PACKAGE_NAME}/-/${packageNameWithoutScope}-${BINARY_DISTRIBUTION_VERSION}.tgz`;
+  const tarballDownloadBuffer = await makeRequest(tarballUrl);
+  const tarballBuffer = zlib.unzipSync(tarballDownloadBuffer);
+
+  const binary = extractFileFromTarball(tarballBuffer, `package/bin/${BINARY_NAME}`);
+  if (!binary) {
+    throw new Error(`Could not find package/bin/${BINARY_NAME} in tarball`);
+  }
+
+  fs.writeFileSync(fallbackBinaryPath, binary);
+  fs.chmodSync(fallbackBinaryPath, "755");
+}
+
+function isPlatformSpecificPackageInstalled() {
+  try {
+    if (!PLATFORM_SPECIFIC_PACKAGE_NAME) {
+      return false;
+    }
+    require.resolve(`${PLATFORM_SPECIFIC_PACKAGE_NAME}/bin/${BINARY_NAME}`);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
+if (!isPlatformSpecificPackageInstalled()) {
+  console.log("Platform package missing. Downloading Yaak CLI binary from npm...");
+  downloadBinaryFromNpm().catch((err) => {
+    console.error("Failed to install Yaak CLI binary:", err);
+    process.exitCode = 1;
+  });
+} else {
+  console.log("Platform package present. Using bundled Yaak CLI binary.");
+}
diff --git a/npm/cli/package.json b/npm/cli/package.json
new file mode 100644
index 0000000..1601d7a
--- /dev/null
+++ b/npm/cli/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@yaakapp/cli",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mountain-loop/yaak.git"
+  },
+  "bin": {
+    "yaak": "bin/cli.js",
+    "yaakcli": "bin/cli.js"
+  },
+  "main": "./index.js",
+  "scripts": {
+    "postinstall": "node ./install.js",
+    "prepublishOnly": "node ./prepublish.js"
+  },
+  "optionalDependencies": {
+    "@yaakapp/cli-darwin-arm64": "0.0.1",
+    "@yaakapp/cli-darwin-x64": "0.0.1",
+    "@yaakapp/cli-linux-arm64": "0.0.1",
+    "@yaakapp/cli-linux-x64": "0.0.1",
+    "@yaakapp/cli-win32-arm64": "0.0.1",
+    "@yaakapp/cli-win32-x64": "0.0.1"
+  }
+}
diff --git a/npm/cli/prepublish.js b/npm/cli/prepublish.js
new file mode 100644
index 0000000..47dd4e8
--- /dev/null
+++ b/npm/cli/prepublish.js
@@ -0,0 +1,5 @@
+const fs = require("node:fs");
+const path = require("node:path");
+
+const cliReadme = path.join(__dirname, "..", "..", "crates-cli", "yaak-cli", "README.md");
+fs.copyFileSync(cliReadme, path.join(__dirname, "README.md"));
diff --git a/npm/prepare-publish.js b/npm/prepare-publish.js
new file mode 100644
index 0000000..f576b9f
--- /dev/null
+++ b/npm/prepare-publish.js
@@ -0,0 +1,77 @@
+const { chmodSync, copyFileSync, existsSync, readFileSync, writeFileSync } = require("node:fs");
+const { join } = require("node:path");
+
+const version = process.env.YAAK_CLI_VERSION?.replace(/^v/, "");
+if (!version) {
+  console.error("YAAK_CLI_VERSION is not set");
+  process.exit(1);
+}
+
+const packages = [
+  "cli",
+  "cli-darwin-arm64",
+  "cli-darwin-x64",
+  "cli-linux-arm64",
+  "cli-linux-x64",
+  "cli-win32-arm64",
+  "cli-win32-x64",
+];
+
+const binaries = [
+  {
+    src: join(__dirname, "dist", "cli-darwin-arm64", "yaak"),
+    dest: join(__dirname, "cli-darwin-arm64", "bin", "yaak"),
+  },
+  {
+    src: join(__dirname, "dist", "cli-darwin-x64", "yaak"),
+    dest: join(__dirname, "cli-darwin-x64", "bin", "yaak"),
+  },
+  {
+    src: join(__dirname, "dist", "cli-linux-arm64", "yaak"),
+    dest: join(__dirname, "cli-linux-arm64", "bin", "yaak"),
+  },
+  {
+    src: join(__dirname, "dist", "cli-linux-x64", "yaak"),
+    dest: join(__dirname, "cli-linux-x64", "bin", "yaak"),
+  },
+  {
+    src: join(__dirname, "dist", "cli-win32-arm64", "yaak.exe"),
+    dest: join(__dirname, "cli-win32-arm64", "bin", "yaak.exe"),
+  },
+  {
+    src: join(__dirname, "dist", "cli-win32-x64", "yaak.exe"),
+    dest: join(__dirname, "cli-win32-x64", "bin", "yaak.exe"),
+  },
+];
+
+for (const { src, dest } of binaries) {
+  if (!existsSync(src)) {
+    console.error(`Missing binary artifact: ${src}`);
+    process.exit(1);
+  }
+  copyFileSync(src, dest);
+  if (!dest.endsWith(".exe")) {
+    chmodSync(dest, 0o755);
+  }
+}
+
+for (const pkg of packages) {
+  const filepath = join(__dirname, pkg, "package.json");
+  const json = JSON.parse(readFileSync(filepath, "utf-8"));
+  json.version = version;
+
+  if (json.name === "@yaakapp/cli") {
+    json.optionalDependencies = {
+      "@yaakapp/cli-darwin-x64": version,
+      "@yaakapp/cli-darwin-arm64": version,
+      "@yaakapp/cli-linux-arm64": version,
+      "@yaakapp/cli-linux-x64": version,
+      "@yaakapp/cli-win32-x64": version,
+      "@yaakapp/cli-win32-arm64": version,
+    };
+  }
+
+  writeFileSync(filepath, `${JSON.stringify(json, null, 2)}\n`);
+}
+
+console.log(`Prepared @yaakapp/cli npm packages for ${version}`);
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..1b82878
--- /dev/null
+++ b/package.json
@@ -0,0 +1,150 @@
+{
+  "name": "yaak-monorepo",
+  "version": "0.0.0",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mountain-loop/yaak.git"
+  },
+  "workspaces": [
+    "packages/ui",
+    "packages/theme",
+    "packages/tailwind-config",
+    "packages/model-store",
+    "packages/common-lib",
+    "packages/platform",
+    "packages/plugin-runtime",
+    "packages/plugin-runtime-types",
+    "plugins-external/mcp-server",
+    "plugins-external/faker",
+    "plugins-external/httpsnippet",
+    "plugins/action-copy-curl",
+    "plugins/action-copy-grpcurl",
+    "plugins/action-send-folder",
+    "plugins/auth-apikey",
+    "plugins/auth-aws",
+    "plugins/auth-basic",
+    "plugins/auth-bearer",
+    "plugins/auth-digest",
+    "plugins/auth-jwt",
+    "plugins/auth-ntlm",
+    "plugins/auth-oauth2",
+    "plugins/auth-oauth1",
+    "plugins/filter-jsonpath",
+    "plugins/filter-xpath",
+    "plugins/importer-curl",
+    "plugins/importer-insomnia",
+    "plugins/importer-openapi",
+    "plugins/importer-postman",
+    "plugins/importer-postman-environment",
+    "plugins/importer-yaak",
+    "plugins/template-function-1password",
+    "plugins/template-function-cookie",
+    "plugins/template-function-ctx",
+    "plugins/template-function-encode",
+    "plugins/template-function-fs",
+    "plugins/template-function-hash",
+    "plugins/template-function-json",
+    "plugins/template-function-prompt",
+    "plugins/template-function-random",
+    "plugins/template-function-regex",
+    "plugins/template-function-timestamp",
+    "plugins/template-function-uuid",
+    "plugins/template-function-xml",
+    "plugins/template-function-request",
+    "plugins/template-function-response",
+    "plugins/themes-yaak",
+    "crates-tauri/yaak-app-client",
+    "crates-tauri/yaak-app-proxy",
+    "crates-tauri/yaak-fonts",
+    "crates-tauri/yaak-license",
+    "crates-tauri/yaak-mac-window",
+    "crates/common/yaak-rpc-schema",
+    "crates/yaak-crypto",
+    "crates/yaak-git",
+    "crates/yaak-models",
+    "crates/yaak-plugins",
+    "crates/yaak-sse",
+    "crates/yaak-sync",
+    "crates/yaak-templates",
+    "crates/yaak-wasm",
+    "crates/yaak-ws",
+    "crates-proxy/yaak-proxy-lib",
+    "crates-server/yaak-web",
+    "apps/yaak-client",
+    "apps/yaak-proxy"
+  ],
+  "scripts": {
+    "prepare": "vp config",
+    "init": "npm install && npm run bootstrap",
+    "start": "npm run client:dev",
+    "client:build": "node scripts/run-build.mjs client",
+    "client:dev": "node scripts/run-dev.mjs client",
+    "client:bundle": "node scripts/run-build.mjs client --config crates-tauri/yaak-app-client/tauri.release.conf.json --no-sign",
+    "proxy:build": "node scripts/run-build.mjs proxy",
+    "proxy:dev": "node scripts/run-dev.mjs proxy",
+    "web:dev": "run-p web:dev:*",
+    "web:dev:app": "node scripts/run-web.mjs dev",
+    "web:dev:proxy": "node scripts/run-web.mjs proxy",
+    "web:build": "node scripts/run-web.mjs build",
+    "web:serve": "node scripts/run-web.mjs serve",
+    "migration": "node scripts/create-migration.cjs",
+    "build": "npm run --workspaces --if-present build",
+    "test": "npm run --workspaces --if-present test",
+    "icons": "run-p client:icons:*",
+    "client:icons:dev": "tauri icon crates-tauri/yaak-app-client/icons/icon-dev.png --output crates-tauri/yaak-app-client/icons/dev",
+    "client:icons:release": "tauri icon crates-tauri/yaak-app-client/icons/icon.png --output crates-tauri/yaak-app-client/icons/release",
+    "bootstrap": "run-s bootstrap:*",
+    "bootstrap:install-wasm-pack": "node scripts/install-wasm-pack.cjs",
+    "bootstrap:build": "npm run build",
+    "bootstrap:vendor": "npm run vendor",
+    "vendor": "run-p vendor:*",
+    "vendor:vendor-plugins": "node scripts/vendor-plugins.cjs",
+    "vendor:vendor-protoc": "node scripts/vendor-protoc.cjs",
+    "vendor:vendor-node": "node scripts/vendor-node.cjs",
+    "lint": "run-p lint:*",
+    "lint:vp": "vp lint",
+    "lint:workspaces": "npm run --workspaces --if-present lint",
+    "replace-version": "node scripts/replace-version.cjs",
+    "format": "vp fmt",
+    "tauri": "tauri",
+    "client:tauri-before-build": "npm run bootstrap",
+    "client:tauri-before-dev": "node scripts/run-workspaces-dev.mjs apps/yaak-client",
+    "proxy:tauri-before-build": "npm run bootstrap",
+    "proxy:tauri-before-dev": "node scripts/run-workspaces-dev.mjs apps/yaak-proxy"
+  },
+  "dependencies": {
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-php": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/legacy-modes": "^6.5.2"
+  },
+  "devDependencies": {
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@tailwindcss/postcss": "^4.3.2",
+    "@tauri-apps/cli": "npm:@tauri-apps/cli-cef@3.0.0-alpha.6",
+    "@types/babel__core": "^7.20.5",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@yaakapp/cli": "0.5.1",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "dotenv-cli": "^11.0.0",
+    "nodejs-file-downloader": "^4.13.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.5.25",
+    "tailwindcss": "^4.3.2",
+    "tar": "^7.5.22",
+    "typescript": "^5.8.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@^0.3.2",
+    "vite-plus": "^0.3.0",
+    "vitest": "^4.1.10",
+    "yauzl": "^3.4.0"
+  },
+  "overrides": {
+    "@vitest/mocker": "^4.1.11",
+    "js-yaml": "^4.3.1",
+    "underscore": "^1.13.8",
+    "vite": "npm:@voidzero-dev/vite-plus-core@^0.3.2"
+  },
+  "packageManager": "npm@11.11.1"
+}
diff --git a/packages/common-lib/debounce.test.ts b/packages/common-lib/debounce.test.ts
new file mode 100644
index 0000000..b92ec8b
--- /dev/null
+++ b/packages/common-lib/debounce.test.ts
@@ -0,0 +1,76 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { debounce } from "./debounce";
+
+describe("debounce", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("calls once with the latest args after the delay", () => {
+    const fn = vi.fn();
+    const d = debounce(fn, 100);
+
+    d("a");
+    d("b");
+    d("c");
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledExactlyOnceWith("c");
+  });
+
+  it("flush invokes a pending call immediately", () => {
+    const fn = vi.fn();
+    const d = debounce(fn, 100);
+
+    d("a");
+    d("b");
+    d.flush();
+    expect(fn).toHaveBeenCalledExactlyOnceWith("b");
+
+    // The scheduled call was cancelled, so waiting out the delay adds nothing
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it("flush is a no-op with nothing pending", () => {
+    const fn = vi.fn();
+    const d = debounce(fn, 100);
+
+    d.flush();
+    expect(fn).not.toHaveBeenCalled();
+
+    d("a");
+    vi.advanceTimersByTime(100);
+    d.flush();
+    expect(fn).toHaveBeenCalledExactlyOnceWith("a");
+  });
+
+  it("cancel drops the pending call and its args", () => {
+    const fn = vi.fn();
+    const d = debounce(fn, 100);
+
+    d("a");
+    d.cancel();
+    vi.advanceTimersByTime(100);
+    expect(fn).not.toHaveBeenCalled();
+
+    // A cancelled call must not leak its args into the next one
+    d.flush();
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it("starts a fresh delay after firing", () => {
+    const fn = vi.fn();
+    const d = debounce(fn, 100);
+
+    d("a");
+    vi.advanceTimersByTime(100);
+    d("b");
+    vi.advanceTimersByTime(99);
+    expect(fn).toHaveBeenCalledOnce();
+
+    vi.advanceTimersByTime(1);
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(fn).toHaveBeenLastCalledWith("b");
+  });
+});
diff --git a/packages/common-lib/debounce.ts b/packages/common-lib/debounce.ts
new file mode 100644
index 0000000..24fbc6b
--- /dev/null
+++ b/packages/common-lib/debounce.ts
@@ -0,0 +1,32 @@
+// oxlint-disable-next-line no-explicit-any
+export function debounce(fn: (...args: any[]) => void, delay = 500) {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  // oxlint-disable-next-line no-explicit-any
+  let lastArgs: any[] | null = null;
+  // oxlint-disable-next-line no-explicit-any
+  const result = (...args: any[]) => {
+    lastArgs = args;
+    if (timer != null) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      const argsToUse = lastArgs ?? [];
+      lastArgs = null;
+      fn(...argsToUse);
+    }, delay);
+  };
+  result.cancel = () => {
+    if (timer != null) clearTimeout(timer);
+    timer = null;
+    lastArgs = null;
+  };
+  // Invoke a pending call immediately instead of waiting out the delay
+  result.flush = () => {
+    if (timer == null) return;
+    clearTimeout(timer);
+    timer = null;
+    const argsToUse = lastArgs ?? [];
+    lastArgs = null;
+    fn(...argsToUse);
+  };
+  return result;
+}
diff --git a/packages/common-lib/eagerDebounceAsync.ts b/packages/common-lib/eagerDebounceAsync.ts
new file mode 100644
index 0000000..09e2c2b
--- /dev/null
+++ b/packages/common-lib/eagerDebounceAsync.ts
@@ -0,0 +1,36 @@
+export function eagerDebounceAsync(fn: () => Promise<void>, delay: number) {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let inFlight: Promise<void> | null = null;
+  let runAfterInFlight = false;
+
+  const run = async () => {
+    if (inFlight != null) {
+      runAfterInFlight = true;
+      return;
+    }
+
+    runAfterInFlight = false;
+    inFlight = fn()
+      .catch(console.error)
+      .finally(() => {
+        inFlight = null;
+        if (runAfterInFlight && timer == null) {
+          void run();
+        }
+      });
+    await inFlight;
+  };
+
+  return () => {
+    if (timer == null) {
+      void run();
+    } else {
+      clearTimeout(timer);
+    }
+
+    timer = setTimeout(() => {
+      timer = null;
+      void run();
+    }, delay);
+  };
+}
diff --git a/packages/common-lib/formatSize.ts b/packages/common-lib/formatSize.ts
new file mode 100644
index 0000000..7d5ac66
--- /dev/null
+++ b/packages/common-lib/formatSize.ts
@@ -0,0 +1,20 @@
+export function formatSize(bytes: number): string {
+  let num: number;
+  let unit: string;
+
+  if (bytes > 1000 * 1000 * 1000) {
+    num = bytes / 1000 / 1000 / 1000;
+    unit = "GB";
+  } else if (bytes > 1000 * 1000) {
+    num = bytes / 1000 / 1000;
+    unit = "MB";
+  } else if (bytes > 1000) {
+    num = bytes / 1000;
+    unit = "KB";
+  } else {
+    num = bytes;
+    unit = "B";
+  }
+
+  return `${Math.round(num * 10) / 10} ${unit}`;
+}
diff --git a/packages/common-lib/index.ts b/packages/common-lib/index.ts
new file mode 100644
index 0000000..245e43a
--- /dev/null
+++ b/packages/common-lib/index.ts
@@ -0,0 +1,4 @@
+export * from "./debounce";
+export * from "./eagerDebounceAsync";
+export * from "./formatSize";
+export * from "./templateFunction";
diff --git a/packages/common-lib/jsonPath.ts b/packages/common-lib/jsonPath.ts
new file mode 100644
index 0000000..3e9eeb7
--- /dev/null
+++ b/packages/common-lib/jsonPath.ts
@@ -0,0 +1,39 @@
+/** Literal steps into a JSON response, distinct from JSONPath operators. */
+export type JsonPathSegment =
+  | { readonly kind: "key"; readonly key: string }
+  | { readonly kind: "index"; readonly index: number };
+
+const PATH_SEGMENT = /^(?:\.([A-Za-z_$][A-Za-z0-9_$]*)|\[(0|[1-9]\d*)\]|\[("(?:[^"\\]|\\.)*")\])/;
+
+/**
+ * Parse a single location with JSON-quoted keys (`$.a[0]["b.c"]`). Other
+ * JSONPath expressions belong to the filter engine, not to the breadcrumb trail.
+ */
+export function jsonPathToSegments(path: string): JsonPathSegment[] | null {
+  let rest = path.trim();
+  if (!rest.startsWith("$")) return null;
+  rest = rest.slice(1);
+
+  const segments: JsonPathSegment[] = [];
+  while (rest.length > 0) {
+    const match = PATH_SEGMENT.exec(rest);
+    if (match == null) return null;
+    const [whole, bareKey, index, quotedKey] = match;
+    if (bareKey != null) {
+      if (bareKey === "$") return null; // The library's root operator, not a literal key.
+      segments.push({ kind: "key", key: bareKey });
+    } else if (index != null) {
+      const value = Number(index);
+      if (!Number.isSafeInteger(value)) return null;
+      segments.push({ kind: "index", index: value });
+    } else if (quotedKey != null) {
+      try {
+        segments.push({ kind: "key", key: JSON.parse(quotedKey) as string });
+      } catch {
+        return null;
+      }
+    }
+    rest = rest.slice(whole.length);
+  }
+  return segments;
+}
diff --git a/packages/common-lib/package.json b/packages/common-lib/package.json
new file mode 100644
index 0000000..e5b41bf
--- /dev/null
+++ b/packages/common-lib/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/lib",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.ts"
+}
diff --git a/packages/common-lib/templateFunction.ts b/packages/common-lib/templateFunction.ts
new file mode 100644
index 0000000..4132ba2
--- /dev/null
+++ b/packages/common-lib/templateFunction.ts
@@ -0,0 +1,49 @@
+import type {
+  CallTemplateFunctionArgs,
+  JsonPrimitive,
+  TemplateFunctionArg,
+} from "@yaakapp-internal/plugins";
+
+export function validateTemplateFunctionArgs(
+  fnName: string,
+  args: TemplateFunctionArg[],
+  values: CallTemplateFunctionArgs["values"],
+): string | null {
+  for (const arg of args) {
+    if ("inputs" in arg && arg.inputs) {
+      // Recurse down
+      const err = validateTemplateFunctionArgs(fnName, arg.inputs, values);
+      if (err) return err;
+    }
+    if (!("name" in arg)) continue;
+    if (arg.optional) continue;
+    if (arg.defaultValue != null) continue;
+    if (arg.hidden) continue;
+    if (values[arg.name] != null) continue;
+
+    return `Missing required argument "${arg.label || arg.name}" for template function ${fnName}()`;
+  }
+
+  return null;
+}
+
+/** Recursively apply form input defaults to a set of values */
+export function applyFormInputDefaults(
+  inputs: TemplateFunctionArg[],
+  values: { [p: string]: JsonPrimitive | undefined },
+) {
+  let newValues: { [p: string]: JsonPrimitive | undefined } = { ...values };
+  for (const input of inputs) {
+    if ("defaultValue" in input && values[input.name] === undefined) {
+      newValues[input.name] = input.defaultValue;
+    }
+    if (input.type === "checkbox" && values[input.name] === undefined) {
+      newValues[input.name] = false;
+    }
+    // Recurse down to all child inputs
+    if ("inputs" in input) {
+      newValues = applyFormInputDefaults(input.inputs ?? [], newValues);
+    }
+  }
+  return newValues;
+}
diff --git a/packages/model-store/package.json b/packages/model-store/package.json
new file mode 100644
index 0000000..c1402c5
--- /dev/null
+++ b/packages/model-store/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaakapp-internal/model-store",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "peerDependencies": {
+    "jotai": "^2.18.0"
+  }
+}
diff --git a/packages/model-store/src/index.ts b/packages/model-store/src/index.ts
new file mode 100644
index 0000000..f3c0bfc
--- /dev/null
+++ b/packages/model-store/src/index.ts
@@ -0,0 +1,94 @@
+import { atom } from "jotai";
+import { selectAtom } from "jotai/utils";
+
+/** Model map: each key is a model type name, each value is the model shape (must have id). */
+type ModelMap = Record<string, { id: string }>;
+
+/** The store data shape derived from the model map. */
+type StoreData<M extends ModelMap> = {
+  [K in keyof M]: Record<string, M[K]>;
+};
+
+export type ModelChange = { type: "upsert" } | { type: "delete" };
+
+function emptyStore<M extends ModelMap>(keys: (keyof M)[]): StoreData<M> {
+  const data = {} as StoreData<M>;
+  for (const k of keys) {
+    data[k] = {} as Record<string, M[typeof k]>;
+  }
+  return data;
+}
+
+export function createModelStore<M extends ModelMap>(modelTypes: (keyof M & string)[]) {
+  const dataAtom = atom<StoreData<M>>(emptyStore<M>(modelTypes));
+
+  /** Apply a single upsert or delete to the store. */
+  function applyChange<K extends keyof M & string>(
+    prev: StoreData<M>,
+    modelType: K,
+    model: M[K],
+    change: ModelChange,
+  ): StoreData<M> {
+    if (change.type === "upsert") {
+      return {
+        ...prev,
+        [modelType]: { ...prev[modelType], [model.id]: model },
+      };
+    } else {
+      const bucket = { ...prev[modelType] };
+      delete bucket[model.id];
+      return { ...prev, [modelType]: bucket };
+    }
+  }
+
+  /** Atom that selects all models of a given type as an array. */
+  function listAtom<K extends keyof M & string>(modelType: K) {
+    return selectAtom(
+      dataAtom,
+      (data) => Object.values(data[modelType] ?? {}) as M[K][],
+      shallowEqual,
+    );
+  }
+
+  /** Atom that selects all models of a given type, sorted by a field. */
+  function orderedListAtom<K extends keyof M & string>(
+    modelType: K,
+    field: keyof M[K],
+    order: "asc" | "desc",
+  ) {
+    return selectAtom(
+      dataAtom,
+      (data) => {
+        const vals = Object.values(data[modelType] ?? {}) as M[K][];
+        return vals.sort((a, b) => {
+          const n = a[field] > b[field] ? 1 : -1;
+          return order === "desc" ? -n : n;
+        });
+      },
+      shallowEqual,
+    );
+  }
+
+  /** Replace all models of a given type. Used for initial hydration. */
+  function replaceAll<K extends keyof M & string>(
+    prev: StoreData<M>,
+    modelType: K,
+    models: M[K][],
+  ): StoreData<M> {
+    const bucket = {} as Record<string, M[K]>;
+    for (const m of models) {
+      bucket[m.id] = m;
+    }
+    return { ...prev, [modelType]: bucket };
+  }
+
+  return { dataAtom, applyChange, replaceAll, listAtom, orderedListAtom };
+}
+
+function shallowEqual<T>(a: T[], b: T[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
diff --git a/packages/platform/package.json b/packages/platform/package.json
new file mode 100644
index 0000000..2beea84
--- /dev/null
+++ b/packages/platform/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@yaakapp-internal/platform",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@yaakapp-internal/models": "^1.0.0",
+    "@yaakapp-internal/rpc-schema": "^1.0.0",
+    "@yaakapp-internal/web": "^1.0.0",
+    "@yaakapp-internal/wasm": "^1.0.0",
+    "@tauri-apps/api": "^2.11.0",
+    "@tauri-apps/plugin-clipboard-manager": "^2.3.2",
+    "@tauri-apps/plugin-dialog": "^2.7.1",
+    "@tauri-apps/plugin-fs": "^2.5.1",
+    "@tauri-apps/plugin-opener": "^2.5.4",
+    "@tauri-apps/plugin-os": "^2.3.2"
+  }
+}
diff --git a/packages/platform/src/capabilities.ts b/packages/platform/src/capabilities.ts
new file mode 100644
index 0000000..71b89e6
--- /dev/null
+++ b/packages/platform/src/capabilities.ts
@@ -0,0 +1,14 @@
+import { platform } from "./registry";
+import type { CapabilityName } from "./types";
+
+/**
+ * Whether the current host supports a feature.
+ *
+ * A hook so components can gate on it directly, and so this can become reactive
+ * later — a browser tab gains and loses capabilities when the local bridge comes
+ * and goes. Capabilities are fixed for the life of the desktop app, so today it
+ * is a plain read.
+ */
+export function useCapability(name: CapabilityName): boolean {
+  return platform.capabilities[name];
+}
diff --git a/packages/platform/src/index.ts b/packages/platform/src/index.ts
new file mode 100644
index 0000000..305b5e6
--- /dev/null
+++ b/packages/platform/src/index.ts
@@ -0,0 +1,15 @@
+import { setPlatform } from "./registry";
+import { createTauriPlatform } from "./tauri";
+
+// The desktop entry. Installed unconditionally and synchronously — several
+// modules call commands while the module graph is still evaluating, so there is
+// no later moment to do this in.
+//
+// This line is the swap point, and a browser build swaps it by resolving the
+// package to `index.web.ts` instead of this file. Because nothing else in the
+// app imports a host directly, that is the whole change.
+setPlatform(createTauriPlatform());
+
+export * from "./capabilities";
+export { platform, setPlatform } from "./registry";
+export * from "./types";
diff --git a/packages/platform/src/index.web.ts b/packages/platform/src/index.web.ts
new file mode 100644
index 0000000..cf45858
--- /dev/null
+++ b/packages/platform/src/index.web.ts
@@ -0,0 +1,23 @@
+import { setPlatform } from "./registry";
+import { createWebPlatform } from "./web";
+
+/**
+ * The package entry for browser builds, selected by aliasing
+ * `@yaakapp-internal/platform` to this file (see `YAAK_TARGET=web` in the
+ * client's vite.config.ts).
+ *
+ * A separate entry rather than a branch inside `index.ts`, because a branch
+ * would still leave `import "@tauri-apps/api"` in the module graph: the folded
+ * `if` disappears, but the imports it guarded do not, and those modules cannot
+ * be proven side-effect free. Splitting the entry means a web build never
+ * mentions Tauri at all — and it keeps `index.ts` exactly as the desktop has
+ * always had it.
+ *
+ * Like `index.ts`, this must install the host eagerly and synchronously:
+ * boot-time modules call commands while the module graph is still evaluating.
+ */
+setPlatform(createWebPlatform());
+
+export * from "./capabilities";
+export { platform, setPlatform } from "./registry";
+export * from "./types";
diff --git a/packages/platform/src/registry.ts b/packages/platform/src/registry.ts
new file mode 100644
index 0000000..30ee742
--- /dev/null
+++ b/packages/platform/src/registry.ts
@@ -0,0 +1,66 @@
+import type { Platform } from "./types";
+
+let installed: Platform | null = null;
+
+/**
+ * Install the host implementation. Called once at import time by this package's
+ * entry point, before any consumer's module body runs.
+ *
+ * It stays swappable at runtime because a browser build has to choose between
+ * talking to a local bridge and running in-page, and it can only find out which
+ * after it has tried to reach the bridge.
+ */
+export function setPlatform(next: Platform): void {
+  installed = next;
+}
+
+function host(): Platform {
+  if (installed == null) {
+    throw new Error("No platform installed. Import @yaakapp-internal/platform before using it.");
+  }
+  return installed;
+}
+
+/**
+ * The host, for everyone else to use.
+ *
+ * This is a fixed object that forwards to whatever is installed, so modules can
+ * import it at any time — including at module scope, which several boot-time
+ * modules do — without capturing a stale implementation.
+ *
+ * A host that has to connect before it can work (a WebSocket to the bridge)
+ * buffers inside its own `rpc`; nothing here waits on a connection, because the
+ * app's boot sequence calls commands while the module graph is still evaluating
+ * and cannot be made to wait.
+ */
+export const platform: Platform = {
+  get httpProxyUrl() {
+    return host().httpProxyUrl;
+  },
+  get capabilities() {
+    return host().capabilities;
+  },
+  get window() {
+    return host().window;
+  },
+  get clipboard() {
+    return host().clipboard;
+  },
+  get dialog() {
+    return host().dialog;
+  },
+  get files() {
+    return host().files;
+  },
+  get blobs() {
+    return host().blobs;
+  },
+  rpc: (cmd, payload) => host().rpc(cmd, payload),
+  rpcStream: (cmd, payload, onMessage) => host().rpcStream(cmd, payload, onMessage),
+  listen: (event, callback) => host().listen(event, callback),
+  emit: (event, payload) => host().emit(event, payload),
+  openUrl: (url) => host().openUrl(url),
+  revealItemInDir: (path) => host().revealItemInDir(path),
+  osType: () => host().osType(),
+  appIdentifier: () => host().appIdentifier(),
+};
diff --git a/packages/platform/src/tauri/index.ts b/packages/platform/src/tauri/index.ts
new file mode 100644
index 0000000..c428039
--- /dev/null
+++ b/packages/platform/src/tauri/index.ts
@@ -0,0 +1,228 @@
+import { getIdentifier } from "@tauri-apps/api/app";
+import { convertFileSrc, invoke } from "@tauri-apps/api/core";
+import { emit as tauriEmit, listen as tauriListen } from "@tauri-apps/api/event";
+import { basename, resolveResource } from "@tauri-apps/api/path";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { clear, readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { open, save as saveDialog } from "@tauri-apps/plugin-dialog";
+import { readDir, readFile, readTextFile } from "@tauri-apps/plugin-fs";
+import { openUrl, revealItemInDir } from "@tauri-apps/plugin-opener";
+import { type as osType } from "@tauri-apps/plugin-os";
+import type {
+  DragDropEvent,
+  OpenDialogOptions,
+  Platform,
+  PlatformCapabilities,
+  PlatformWindow,
+  RpcPayload,
+  RpcStreamHandle,
+  Unsubscribe,
+} from "../types";
+
+/**
+ * The desktop host: the yaak-rpc envelope carried by Tauri's `invoke` and
+ * window events. Every command goes through the single `rpc` Tauri command
+ * into the `RpcRouter` on the Rust side.
+ */
+
+/**
+ * Tauri hands back an unsubscribe function asynchronously; the platform hands
+ * back one immediately, so callers can unsubscribe from a React cleanup without
+ * awaiting. Unsubscribing before the subscription lands is honoured once it does.
+ */
+function toSyncUnsubscribe(pending: Promise<Unsubscribe>): Unsubscribe {
+  let unsubscribe: Unsubscribe | null = null;
+  let cancelled = false;
+
+  pending
+    .then((fn) => {
+      if (cancelled) fn();
+      else unsubscribe = fn;
+    })
+    .catch(console.error);
+
+  return () => {
+    cancelled = true;
+    unsubscribe?.();
+    unsubscribe = null;
+  };
+}
+
+const ALL_CAPABILITIES: PlatformCapabilities = {
+  httpSending: true,
+  grpc: true,
+  websocket: true,
+  git: true,
+  sync: true,
+  tlsOptions: true,
+  cookieJar: true,
+  localFiles: true,
+  timeline: true,
+  multiWindow: true,
+  windowChrome: true,
+  interfaceZoom: true,
+  plugins: true,
+  encryption: true,
+  updater: true,
+  clipboardRead: true,
+  systemFonts: true,
+  license: true,
+};
+
+function createWindow(): PlatformWindow {
+  const webview = getCurrentWebviewWindow();
+
+  return {
+    label: webview.label,
+    show: () => webview.show(),
+    close: () => webview.close(),
+    minimize: () => webview.minimize(),
+    maximize: () => webview.maximize(),
+    unmaximize: () => webview.unmaximize(),
+    isMaximized: () => webview.isMaximized(),
+    isFullscreen: () => webview.isFullscreen(),
+    setZoom: (scale) => webview.setZoom(scale),
+    theme: () => webview.theme(),
+    onThemeChanged: (callback) =>
+      toSyncUnsubscribe(webview.onThemeChanged((e) => callback(e.payload))),
+    onFocusChanged: (callback) =>
+      toSyncUnsubscribe(webview.onFocusChanged((e) => callback(e.payload))),
+    onDragDrop: (callback) =>
+      toSyncUnsubscribe(webview.onDragDropEvent((e) => callback(e.payload as DragDropEvent))),
+  };
+}
+
+async function rpc<T>(cmd: string, payload?: RpcPayload): Promise<T> {
+  try {
+    // Host plugin commands (`plugin:yaak-license|check`, ...) are registered by
+    // their Tauri plugins and ride outside the envelope. Everything else goes
+    // through the single `rpc` command and the RpcRouter behind it.
+    if (cmd.startsWith("plugin:")) {
+      return await invoke<T>(cmd, payload);
+    }
+    return await invoke<T>("rpc", { cmd, payload: payload ?? {} });
+  } catch (err) {
+    console.warn("Platform command error", cmd, err);
+    throw err;
+  }
+}
+
+/**
+ * Where this host keeps the bytes stored under an id, or null if it has none.
+ *
+ * The desktop stores them as files the engine wrote, so answering means asking
+ * the backend. Callers hold ids and nothing else; the path exists for exactly
+ * as long as it takes to open the file, which is the one thing a desktop host
+ * can do that a tab cannot.
+ */
+function storedBodyPath(id: string): Promise<string | null> {
+  return rpc<string | null>("cmd_http_response_body_path", { responseId: id });
+}
+
+/**
+ * Base64 for the trip over IPC, in chunks so a few megabytes don't blow the
+ * argument limit. The engine's write command speaks base64; only this host has
+ * to care.
+ */
+function toBase64(bytes: Uint8Array): string {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += 0x8000) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+  }
+  return btoa(binary);
+}
+
+export function createTauriPlatform(): Platform {
+  const window = createWindow();
+
+  return {
+    capabilities: ALL_CAPABILITIES,
+    httpProxyUrl: null,
+    window,
+
+    clipboard: {
+      writeText: (text) => writeText(text),
+      readText: () => readText(),
+      clear: () => clear(),
+    },
+
+    dialog: {
+      // Overloaded on the interface; one implementation covers both shapes.
+      open: ((options?: OpenDialogOptions) => open(options)) as Platform["dialog"]["open"],
+      save: (options) => saveDialog(options ?? {}),
+    },
+
+    files: {
+      readDir: (path) => readDir(path),
+      readText: (path) => readTextFile(path),
+      url: (path) => convertFileSrc(path),
+      basename: (path) => basename(path),
+      resolveResource: (path) => resolveResource(path),
+
+      async save(suggestedName, content, filters) {
+        const path = await saveDialog({ defaultPath: suggestedName, filters });
+        if (path == null) return null;
+        // Not the fs plugin: its ACL is read-only and scoped to the app's own
+        // directories, and a path the user just picked is neither. The engine
+        // writes it, which is where the desktop has always written it — and it
+        // speaks base64, so content that is already base64 goes straight over.
+        const data = content instanceof Uint8Array ? toBase64(content) : content.base64;
+        await rpc("cmd_save_base64_to_binary", { filepath: path, data });
+        return path;
+      },
+    },
+
+    blobs: {
+      async read(id) {
+        const path = await storedBodyPath(id);
+        return path == null ? null : readFile(path);
+      },
+
+      async url(id) {
+        const path = await storedBodyPath(id);
+        return path == null ? null : convertFileSrc(path);
+      },
+    },
+
+    rpc,
+
+    async rpcStream<T, M>(
+      cmd: string,
+      payload: RpcPayload,
+      onMessage: (message: M) => void,
+    ): Promise<RpcStreamHandle<T>> {
+      // The caller mints the stream id, and the subscription is awaited before
+      // the command dispatches: registration is its own IPC round trip, and the
+      // command may emit its first message while it runs.
+      const streamId = crypto.randomUUID();
+      const unlisten = await tauriListen<M>(`stream_${streamId}`, (e) => onMessage(e.payload), {
+        target: { kind: "Window", label: window.label },
+      });
+      try {
+        const result = await rpc<T>(cmd, { ...payload, streamId });
+        return { result, unlisten };
+      } catch (err) {
+        unlisten();
+        throw err;
+      }
+    },
+
+    listen<T>(event: string, callback: (payload: T) => void): Unsubscribe {
+      return toSyncUnsubscribe(
+        tauriListen<T>(event, (e) => callback(e.payload), {
+          // Receives events broadcast to every window as well as ones addressed
+          // to this one, which is how the backend sends both kinds today.
+          target: { kind: "Window", label: window.label },
+        }),
+      );
+    },
+
+    emit: (event, payload) => tauriEmit(event, payload),
+
+    openUrl: (url) => openUrl(url),
+    revealItemInDir: (path) => revealItemInDir(path),
+
+    osType: () => osType(),
+    appIdentifier: () => getIdentifier(),
+  };
+}
diff --git a/packages/platform/src/types.ts b/packages/platform/src/types.ts
new file mode 100644
index 0000000..52119da
--- /dev/null
+++ b/packages/platform/src/types.ts
@@ -0,0 +1,318 @@
+/**
+ * The complete surface the app is allowed to use to reach its host.
+ *
+ * Everything the UI needs from outside the page goes through this interface, so
+ * that a host other than Tauri (a browser tab talking to the local bridge, a
+ * self-hosted or hosted server) can be added by writing one more implementation
+ * instead of touching call sites. Nothing outside `src/tauri` may import
+ * `@tauri-apps/*` — that is the whole point of the package.
+ *
+ * Commands and events are the yaak-rpc envelope: a command name plus a JSON
+ * payload in, a JSON payload out, and named events pushed the other way. The
+ * Tauri host puts that envelope inside `invoke`; a WebSocket host will put it on
+ * the wire unchanged.
+ */
+
+/** Cancels a subscription. Safe to call more than once. */
+export type Unsubscribe = () => void;
+
+/** Matches the values `@tauri-apps/plugin-os` reports so hosts agree on spelling. */
+export type OsType =
+  | "android"
+  | "dragonfly"
+  | "freebsd"
+  | "ios"
+  | "linux"
+  | "macos"
+  | "netbsd"
+  | "openbsd"
+  | "solaris"
+  | "windows";
+
+export type PlatformAppearance = "light" | "dark";
+
+/** Command arguments. Serialized to JSON, so only JSON values belong here. */
+export type RpcPayload = Record<string, unknown>;
+
+/** A streaming command's result, plus the teardown for its subscription. */
+export interface RpcStreamHandle<T> {
+  result: T;
+  unlisten: Unsubscribe;
+}
+
+/**
+ * What to save: the bytes, or base64 of them for a caller that already has it
+ * that way.
+ *
+ * Both forms exist because both hosts want a different one, and a value that
+ * arrives base64 should not be decoded and re-encoded to get back where it
+ * started. Whichever a caller has is the one to pass; each host converts only
+ * when it has to.
+ */
+export type SaveContent = Uint8Array | { base64: string };
+
+export interface DialogFilter {
+  name: string;
+  extensions: string[];
+}
+
+export interface OpenDialogOptions {
+  title?: string;
+  defaultPath?: string;
+  directory?: boolean;
+  multiple?: boolean;
+  filters?: DialogFilter[];
+}
+
+export interface SaveDialogOptions {
+  title?: string;
+  defaultPath?: string;
+  filters?: DialogFilter[];
+}
+
+export interface DirEntry {
+  name: string;
+  isDirectory: boolean;
+  isFile: boolean;
+  isSymlink: boolean;
+}
+
+export interface DragDropPosition {
+  x: number;
+  y: number;
+}
+
+/**
+ * A native drag-and-drop over the window. Distinct from the DOM's drag events:
+ * the host reports window coordinates, not a DOM target, so listeners hit-test
+ * against their own bounding box.
+ */
+export type DragDropEvent =
+  | { type: "enter"; paths: string[]; position: DragDropPosition }
+  | { type: "over"; position: DragDropPosition }
+  | { type: "drop"; paths: string[]; position: DragDropPosition }
+  | { type: "leave" };
+
+/**
+ * The window (desktop) or tab (browser) this UI is running in.
+ *
+ * Every method a host must provide is named here on purpose. The build spike
+ * replaced the Tauri window object wholesale and a single missing method
+ * (`onDragDropEvent`) threw mid-render with nothing to catch it at compile time;
+ * an explicit interface makes that class of failure a type error instead.
+ */
+export interface PlatformWindow {
+  /**
+   * Identity of this window among all the app's windows.
+   *
+   * Model writes carry the label of the window that made them so the others can
+   * tell an echo of their own write from someone else's. A browser host can
+   * satisfy this with a per-tab id and a BroadcastChannel.
+   */
+  readonly label: string;
+
+  show(): Promise<void>;
+  close(): Promise<void>;
+  minimize(): Promise<void>;
+  maximize(): Promise<void>;
+  unmaximize(): Promise<void>;
+  isMaximized(): Promise<boolean>;
+  isFullscreen(): Promise<boolean>;
+
+  /** Scale the whole window's contents. 1 is unscaled. */
+  setZoom(scale: number): Promise<void>;
+
+  /** The host's current appearance, or null if it has no opinion and CSS should decide. */
+  theme(): Promise<PlatformAppearance | null>;
+
+  onThemeChanged(callback: (appearance: PlatformAppearance) => void): Unsubscribe;
+  onFocusChanged(callback: (focused: boolean) => void): Unsubscribe;
+  onDragDrop(callback: (event: DragDropEvent) => void): Unsubscribe;
+}
+
+export interface PlatformClipboard {
+  writeText(text: string): Promise<void>;
+  readText(): Promise<string>;
+  clear(): Promise<void>;
+}
+
+export interface PlatformDialog {
+  open(options: OpenDialogOptions & { multiple: true }): Promise<string[] | null>;
+  open(options?: OpenDialogOptions): Promise<string | null>;
+  save(options?: SaveDialogOptions): Promise<string | null>;
+}
+
+/**
+ * File-ish operations, keyed by paths the backend handed us.
+ *
+ * A path here is an opaque handle, not something to parse or construct: the UI
+ * only ever passes one back to `url` or `readDir`. A host without a filesystem
+ * can mint handles of its own (a blob id, a URL) and stay compatible.
+ */
+export interface PlatformFiles {
+  readDir(path: string): Promise<DirEntry[]>;
+
+  /**
+   * The text of a file the user picked, decoded as UTF-8.
+   *
+   * Only for paths the host itself handed us — a dialog result or a drag-drop
+   * payload — never one the page assembled. A host without a filesystem reads
+   * whatever its own handle points at.
+   */
+  readText(path: string): Promise<string>;
+
+  /** A URL the page can load a file from, for `<img>`, `<video>`, and friends. */
+  url(path: string): string;
+
+  basename(path: string): Promise<string>;
+
+  /** Resolve a path bundled with the app itself, rather than one from the backend. */
+  resolveResource(path: string): Promise<string>;
+
+  /**
+   * Put bytes somewhere the user chooses. Returns where they went — a path, a
+   * filename, whatever this host can say — or null if the user backed out.
+   *
+   * The caller supplies the bytes, which is the whole point: the alternative
+   * shape, where a dialog mints a path and a separate backend command writes to
+   * it, can only work on a host that has both a filesystem and a backend. A tab
+   * has neither, so every one of those call sites was a dead control. Whoever
+   * produces the bytes already knows what they are; the host only has to know
+   * where they go.
+   *
+   * `suggestedName` is what the save dialog opens with, extension included.
+   */
+  save(
+    suggestedName: string,
+    content: SaveContent,
+    filters?: DialogFilter[],
+  ): Promise<string | null>;
+}
+
+/**
+ * Content the backend stored, addressed by the id it stored it under.
+ *
+ * Where those bytes actually live is the one thing every host answers
+ * differently — a file the engine wrote, a row in a database, a URL on the
+ * other end of a socket — so finding them is the host's job and nobody else's.
+ * The caller passes an id and never a location, which is also what keeps a page
+ * from naming something the backend never wrote.
+ *
+ * What the content *means* is the app's business, not this package's.
+ */
+export interface PlatformBlobs {
+  /** The bytes, or null if the host has nothing stored under that id. */
+  read(id: string): Promise<Uint8Array<ArrayBuffer> | null>;
+
+  /**
+   * A URL an element can load the content from, for `<img>`, `<video>` and
+   * friends, or null if the host has nothing stored under that id.
+   *
+   * Asynchronous because the host may have to ask its backend where the bytes
+   * are, and it only does that the moment before it reads them.
+   */
+  url(id: string): Promise<string | null>;
+}
+
+export interface Platform {
+  readonly capabilities: PlatformCapabilities;
+  /** Web request relay, or null when this host executes requests itself. */
+  readonly httpProxyUrl: string | null;
+  readonly window: PlatformWindow;
+  readonly clipboard: PlatformClipboard;
+  readonly dialog: PlatformDialog;
+  readonly files: PlatformFiles;
+  readonly blobs: PlatformBlobs;
+
+  /** Call a backend command and await its result. */
+  rpc<T>(cmd: string, payload?: RpcPayload): Promise<T>;
+
+  /**
+   * Call a command that streams messages back while it runs.
+   *
+   * Resolves once the command itself completes, with its result and an
+   * `unlisten` that tears down the local subscription. The host guarantees the
+   * subscription is live before the command is dispatched, so a stream that
+   * emits immediately cannot lose its first message.
+   */
+  rpcStream<T, M>(
+    cmd: string,
+    payload: RpcPayload,
+    onMessage: (message: M) => void,
+  ): Promise<RpcStreamHandle<T>>;
+
+  /** Subscribe to a backend event addressed to this window. */
+  listen<T>(event: string, callback: (payload: T) => void): Unsubscribe;
+
+  /** Send an event to the backend. Used for replies and for long-lived streams. */
+  emit(event: string, payload?: unknown): Promise<void>;
+
+  openUrl(url: string): Promise<void>;
+  revealItemInDir(path: string): Promise<void>;
+
+  /**
+   * Which OS the UI is running on. Synchronous because layout decisions
+   * (traffic-light padding, modifier key labels) are made during first render.
+   */
+  osType(): OsType;
+
+  /** The host application's identifier, eg. `app.yaak.desktop`. */
+  appIdentifier(): Promise<string>;
+}
+
+/**
+ * What this host can actually do.
+ *
+ * Read these instead of testing for a platform: "does this host have a cookie
+ * jar" is the real question, and it stays answerable when there are three hosts.
+ * The Tauri host hardcodes every capability on; Rust hosts will report theirs
+ * from the cargo features they were built with.
+ */
+export interface PlatformCapabilities {
+  /** Send HTTP requests and see the whole response: every header, the redirect chain, timing. */
+  httpSending: boolean;
+  /** Send gRPC requests. Needs HTTP/2 trailers, so it needs a real backend. */
+  grpc: boolean;
+  /** Send WebSocket requests with custom headers and auth. */
+  websocket: boolean;
+  /** Git-backed workspaces. */
+  git: boolean;
+  /** Two-way sync between a workspace and a directory of files. */
+  sync: boolean;
+  /** Client certificates, custom CAs, and disabling certificate validation. */
+  tlsOptions: boolean;
+  /** A cookie jar the user can read and edit. */
+  cookieJar: boolean;
+  /** Paths the backend can read: file bodies, proto files, sync directories. */
+  localFiles: boolean;
+  /** Per-request timing and connection detail. */
+  timeline: boolean;
+  /** More than one window or tab on the same data. */
+  multiWindow: boolean;
+  /**
+   * The page is the window's titlebar: it draws the drag region and window
+   * controls, and leaves room for macOS traffic lights. False when something
+   * else owns the frame around the page (a browser tab), so none of that
+   * chrome should be reserved or drawn.
+   */
+  windowChrome: boolean;
+  /**
+   * The app zooms its own interface, and so owns Cmd/Ctrl `+`, `-` and `0`.
+   * False in a browser, where those keys are already the browser's.
+   */
+  interfaceZoom: boolean;
+  /** The plugin runtime. */
+  plugins: boolean;
+  /** Workspace encryption backed by a key the host keeps. */
+  encryption: boolean;
+  /** In-app update checks and installs. */
+  updater: boolean;
+  /** Reading the clipboard without the user pasting first. */
+  clipboardRead: boolean;
+  /** Enumerating the fonts installed on the machine. */
+  systemFonts: boolean;
+  /** Commercial licence activation. */
+  license: boolean;
+}
+
+export type CapabilityName = keyof PlatformCapabilities;
diff --git a/packages/platform/src/web/README.md b/packages/platform/src/web/README.md
new file mode 100644
index 0000000..c01a3df
--- /dev/null
+++ b/packages/platform/src/web/README.md
@@ -0,0 +1,228 @@
+# The browser host
+
+Yaak running in a plain tab: no install, no local process. The desktop's own
+model layer — `yaak-models`, SQLite included — runs compiled to wasm inside a
+worker the tab talks to, so a browser stores exactly what a desktop install
+stores, migrations and all.
+
+Select it at build time. `vp run web:dev` does that and starts the send server
+alongside the frontend:
+
+```shell
+vp run web:dev
+```
+
+The flag resolves `@yaakapp-internal/platform` to `../index.web.ts`, which
+installs this host instead of the Tauri one. It is a separate entry rather than
+a branch inside `index.ts` so that a web build never pulls `@tauri-apps/*` into
+the module graph at all — a folded branch would drop the code but keep the
+imports it guarded.
+
+Desktop builds are untouched: without the flag, `packages/platform/src/index.ts`
+installs the Tauri host exactly as before.
+
+## How it fits together
+
+```
+tab (index.ts, commands.ts) ──MessagePort──▶ worker.ts ──▶ @yaakapp-internal/web (wasm)
+        │                   ◀── model_writes ──          crates/yaak-wasm → yaak-models → SQLite
+        │                                                               └─ pages in IndexedDB
+        └── send.ts ──POST rendered request──▶ yaak-web (crates-server) ──▶ the internet
+                     ◀── NDJSON: events, response, body, cookies ──
+```
+
+| File            | What it is                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `index.ts`      | The `Platform` implementation.                                                                                                        |
+| `commands.ts`   | The command table: model commands forward to the worker; the rest is fixed answers and refusals-with-a-reason.                        |
+| `connection.ts` | A tab's end of the wire: request/response over a `MessagePort`, event delivery, and the tab's identity (`label`).                     |
+| `send.ts`       | Sending: the worker renders (`prepare_http_send`), the server executes, this file stores what comes back where the desktop stores it. |
+| `server.ts`     | Where the Yaak server is, and the wire shapes it speaks (generated from `crates-server/yaak-web/src/wire.rs`).                        |
+| `worker.ts`     | The process that owns the database. Loads the wasm, opens the DB once, answers each port, fans `model_writes` out to every port.      |
+| `protocol.ts`   | The message shapes both sides import.                                                                                                 |
+| `errors.ts`     | `UnsupportedCommandError`, the structured refusal.                                                                                    |
+| `storage.ts`    | `navigator.storage.persist()`.                                                                                                        |
+
+The Rust side is `crates/yaak-wasm` (`@yaakapp-internal/wasm`): `boot()`,
+`rpc(cmd, payload, label)` returning `{ result, events }`, blob get/put, and
+`prepare_http_send(payload)` — the database half of a send (environment chain,
+inherited headers and auth, request settings, cookie jar, rendering), which is
+`yaak_models::render::render_http_request`, the same function the desktop
+renders with.
+Its `pkg/` is committed; rebuilding needs a clang with a WebAssembly backend
+(`brew install llvm`), and `build-wasm.cjs` skips with a notice when there
+isn't one, so a desktop `npm run bootstrap` never depends on it.
+
+Behaviours worth knowing before changing anything:
+
+- **The worker is a `SharedWorker`, and only that.** The browser hands every
+  tab on the origin the same one, which is what makes "one database owner"
+  true without anyone coordinating — and makes the browser look like the
+  desktop: one process holds the data, every window talks to it, it pushes
+  writes to all of them. It still takes a Web Lock before opening, for the one
+  overlap the browser doesn't rule out (a reloading tab's dying predecessor).
+  There is deliberately no fallback to a per-tab worker: two kinds of worker
+  that can both come up is a race. Every current browser, desktop and mobile,
+  has `SharedWorker` and Web Locks (Chrome for Android since 148, April 2026);
+  older ones get a clear "unsupported browser" message rather than a second
+  SQLite over the same pages.
+- **Every write is stamped with the calling tab's `label`** as
+  `UpdateSource::Window`, exactly like a desktop window label, so the frontend
+  store's echo handling is unchanged.
+- **Cascade rules, duplicate naming, id generation, serde defaults, and the
+  lazy first-run bootstrap are all the Rust code's.** Nothing about what a
+  model _is_ is decided in TypeScript.
+- **Persistence is `relaxed-idb`**: SQLite pages live in IndexedDB, writes land
+  in memory and flush shortly after. A tab closing mid-flush loses at most the
+  last few writes.
+
+## Commands
+
+109 commands are declared in `@yaakapp-internal/rpc-schema`. This host answers
+32, declines 43 by name with a reason, and refuses the remaining 34 generically.
+
+### Implemented (32)
+
+| Group                           | Commands                                                                                                                                                                                                                                                 |
+| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Models                          | `models_workspace_models`, `models_upsert`, `models_delete`, `models_duplicate`, `models_get_settings`, `models_get_graphql_introspection`, `models_upsert_graphql_introspection`, `models_grpc_events`, `models_websocket_events`                       |
+| Sending                         | `cmd_send_http_request` (through the Yaak server; see below)                                                                                                                                                                                             |
+| App                             | `cmd_metadata`, `cmd_get_workspace_meta`, `cmd_default_headers`, `cmd_get_themes`, `cmd_check_for_updates`, `cmd_dismiss_notification`, `cmd_plugin_init_errors`                                                                                         |
+| Bodies                          | `cmd_http_response_body`, `cmd_http_response_body_path`, `cmd_http_request_body`, `cmd_get_http_response_events`, `cmd_get_sse_events`                                                                                                                   |
+| Plugin surfaces (empty results) | `cmd_http_request_actions`, `cmd_websocket_request_actions`, `cmd_grpc_request_actions`, `cmd_workspace_actions`, `cmd_folder_actions`, `cmd_template_function_summaries`, `cmd_get_http_authentication_summaries`, `cmd_get_http_authentication_config` |
+| Text                            | `cmd_format_json`, `cmd_render_template`                                                                                                                                                                                                                 |
+
+Some of these answer honestly rather than fully, and the difference matters:
+
+- `cmd_render_template` returns the template **unrendered**. Resolving variables
+  and calling template functions is plugin work. The preview shows the raw
+  `${[…]}` rather than a wrong value.
+- `cmd_get_http_authentication_summaries` returns the auth methods Yaak ships as
+  plugins, so the picker is truthful about the product — but
+  `cmd_get_http_authentication_config` returns an empty form, because the plugin
+  that defines the form isn't running.
+- `cmd_template_function_summaries` returns one provider contributing no
+  functions. Both summary commands are polled every second until they return
+  something, so an empty list is a poll that never stops rather than a quiet no.
+- `cmd_metadata` reports empty strings for the data, log, plugin and project
+  directories. There is no filesystem behind this host.
+
+### Declined by name (43)
+
+Each returns an `UnsupportedCommandError` carrying `cmd`, a user-facing
+`message`, and the `capability` a caller should have checked. The UI turns it
+into a toast.
+
+| Reason                           | Commands                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Sending, the parts not wired yet | `cmd_send_ephemeral_request`, `cmd_delete_send_history`, `cmd_delete_all_http_responses`, `cmd_import_url`                                                                                                                                                                                                                                                                                                                                                                                                            |
+| No plugin runtime                | `cmd_reload_plugins`, `cmd_plugin_info`, `cmd_plugins_search`, `cmd_plugins_install`, `cmd_plugins_install_from_directory`, `cmd_plugins_uninstall`, `cmd_plugins_updates`, `cmd_plugins_update_all`, `cmd_template_function_config`, `cmd_template_tokens_to_string`, `cmd_call_http_request_action`, `cmd_call_websocket_request_action`, `cmd_call_grpc_request_action`, `cmd_call_workspace_action`, `cmd_call_folder_action`, `cmd_call_http_authentication_action`, `cmd_curl_to_request`, `cmd_format_graphql` |
+| No filesystem                    | `cmd_import_data`, `cmd_export_data`, `cmd_save_response`, `cmd_save_base64_to_binary`                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| Needs a real socket              | `cmd_grpc_reflect`, `cmd_grpc_go`, `cmd_delete_all_grpc_connections`, `cmd_ws_connect`, `cmd_ws_send`, `cmd_ws_close`, `cmd_ws_delete_connections`                                                                                                                                                                                                                                                                                                                                                                    |
+| Workspace encryption             | `cmd_enable_encryption`, `cmd_disable_encryption`, `cmd_reveal_workspace_key`, `cmd_set_workspace_key`, `cmd_secure_template`, `cmd_decrypt_template`                                                                                                                                                                                                                                                                                                                                                                 |
+| One tab, no windows              | `cmd_new_child_window`, `cmd_new_main_window`, `cmd_restart`                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| Other                            | `cmd_send_feedback`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+### Refused generically (34)
+
+The 30 `cmd_git_*` commands and `cmd_sync_calculate`, `cmd_sync_calculate_fs`,
+`cmd_sync_apply`, `cmd_sync_watch`. Nothing in the app reaches them unless a
+workspace has a sync directory, which a browser tab cannot set.
+
+Anything added to the schema later also lands here, and the error names the
+command — an unlisted command is a gap in `commands.ts`, and whoever hits it
+should be able to see which.
+
+## Capabilities
+
+Reported honestly, so callers gate on the question rather than on the host:
+
+| True                                   | False                                                                                                                                                                                         |
+| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `httpSending`, `timeline`, `cookieJar` | `grpc`, `websocket`, `git`, `sync`, `tlsOptions`, `localFiles`, `multiWindow`, `windowChrome`, `interfaceZoom`, `plugins`, `encryption`, `updater`, `clipboardRead`, `systemFonts`, `license` |
+
+`interfaceZoom: false` leaves Cmd/Ctrl `+`, `-` and `0` to the browser instead
+of swallowing them, and drops those three rows from the hotkeys screen.
+
+`multiWindow: false` means the host cannot open a _second window_ on demand —
+what `cmd_new_child_window` does for Settings and workspace switching. It is not
+a claim that nothing else is looking: other tabs may well be open on the same
+worker, and it pushes every write to all of them regardless.
+
+`windowChrome: false` means the browser owns the frame around the page, so the
+header draws no window controls and reserves no room for macOS traffic lights.
+
+## Multiple tabs
+
+Each tab mints a label at load (`tab_xxxxxxxx`) and sends it with every command;
+the worker stamps writes with it as `UpdateSource::Window { label }`, standing in
+for the desktop's window label. The worker fans each write out to every
+connected tab, and the receiving tab's store applies or ignores it exactly as a
+desktop window would.
+
+The label is deliberately _not_ kept in `sessionStorage`: duplicating a tab
+copies session storage, and two tabs sharing one identity would each mistake the
+other's writes for an echo of their own and drop them.
+
+## Known gaps
+
+- **Storage persistence is requested, not guaranteed.** `navigator.storage.persist()`
+  runs at boot; browsers grant it on their own heuristics and often decline on
+  `localhost`.
+- **`pkg/yaak_web_bg.wasm` is 3.8 MB and committed** (no `wasm-opt`, matching
+  `yaak-templates`). It will churn on every model-layer change; a CI-built
+  artifact is the real answer.
+- **Settings opens in the same tab** and is left with the browser's Back button.
+- **Settings shows Data Directory / Logs Directory rows** with empty values; the
+  Create Workspace dialog offers directory sync and encryption. Should be gated
+  on `localFiles` / `sync` / `encryption`.
+- **`cmd_render_template` returns the template unrendered.** Resolving variables
+  and calling template functions is plugin work.
+- **A declined command logs an unhandled rejection** next to its toast — the
+  app's own `createFastMutation.mutate`, same on desktop.
+- **`yaak-rpc-schema` does not come to wasm** (it pulls the git/gRPC/plugin
+  crates for their types), so the crate declares the handful of request shapes
+  it needs locally, and `commands.ts` stays typed against `RpcSchema`.
+
+## Sending
+
+A page cannot see a response the way a desktop app can — CORS exposes a handful
+of headers, redirects are followed silently, there is no timeline — so the
+network half of a send runs on a small stateless server,
+`crates-server/yaak-web`. This layer stays the only place data lives:
+
+1. `send.ts` creates the `http_response` row (state `initialized`), as the
+   desktop does, so anything that goes wrong lands in the response pane.
+2. The worker resolves and renders the request (`prepare_http_send`): the
+   environment chain, inherited headers and auth, request settings, the cookie
+   jar. This is the desktop's `HttpSendInputs`, in Rust, on the same model layer,
+   with `yaak_models::render::render_http_request`. Variables (`${[ name ]}`)
+   render here with no plugins involved.
+3. The rendered request, the settings and the jar's cookies are POSTed to the
+   server. It streams back timeline events, the response head, body chunks and a
+   terminal frame carrying the jar as the send left it.
+4. Each frame is written where the desktop writes it: the response row as it
+   progresses, `http_response_event` rows for the timeline (which is why
+   `timeline` is true), the body under the response id via `blob_put`, and the
+   cookie jar through `models_upsert`. Every write fans out to every tab.
+
+**What sends today:** any saved request whose templates are variables and whose
+authentication is none, or an inline header. Sending a request that needs a
+template _function_ (`${[ timestamp() ]}`) or an authentication plugin (bearer,
+basic, OAuth, …) is refused before anything leaves the tab, with a message naming
+what it needs; those light up when plugins run in the browser. Requests with a
+file body or multipart file fields are refused by the server (it has no access to
+your files, and must not read its own). And on a public instance a request to
+`localhost` or a LAN address can't work: the server runs elsewhere and refuses
+private ranges outright — that is what the desktop app is for. A self-hosted
+server on your own network can be started with `--allow-private-networks`, which
+is the one case where those addresses are the user's to reach.
+
+**Where the tab sends** (`server.ts`): its own origin, in development as well as
+production, so there is no address to learn and no CORS in the loop. A
+production build is served by the sender itself (`yaak-web --serve
+dist/apps/yaak-client`, which is what the `ghcr.io/mountain-loop/yaak-web`
+image runs). In development the Vite server passes `/v1` through to `yaak-web`
+instead, following `PORT` to find it — `vp run web:dev` starts both.
+`VITE_YAAK_WEB_URL` overrides this, for a deployment that keeps the app and the
+server apart.
diff --git a/packages/platform/src/web/commands.ts b/packages/platform/src/web/commands.ts
new file mode 100644
index 0000000..8218faf
--- /dev/null
+++ b/packages/platform/src/web/commands.ts
@@ -0,0 +1,373 @@
+/**
+ * The command table: what this host answers, and what it declines and why.
+ *
+ * The model commands are forwarded to the worker, where the desktop's own
+ * model layer answers them — same queries, same migrations, same cascade
+ * rules — so nothing about *what a model is* is decided in this file. What is
+ * decided here is the rest of the desktop's command surface: a handful of
+ * fixed answers that are true of a browser tab, and the refusals. The refusals
+ * are the important half: a command that silently returns nothing leaves the
+ * UI showing something that isn't true, whereas a refusal with a reason becomes
+ * a toast the user can act on. So each unsupported command is listed by name
+ * with the reason, and anything not listed at all is refused generically
+ * rather than guessed at.
+ *
+ * The command names are `keyof RpcSchema`, the same generated wire schema the
+ * desktop's router is built from, so a command renamed or added in Rust shows
+ * up here as a type error rather than as a runtime surprise.
+ */
+
+import type { RpcSchema } from "@yaakapp-internal/rpc-schema";
+import type { CapabilityName, RpcPayload } from "../types";
+import type { WorkerConnection } from "./connection";
+import { unsupported } from "./errors";
+import { sendHttpRequest } from "./send";
+
+export type AppCmd = keyof RpcSchema;
+
+type Handler = (payload: RpcPayload, db: WorkerConnection) => Promise<unknown>;
+
+/** Placeholder shown wherever the desktop would show a real filesystem path. */
+const NO_PATH = "";
+
+function str(payload: RpcPayload, key: string): string | null {
+  const value = payload[key];
+  return typeof value === "string" && value !== "" ? value : null;
+}
+
+/** Like `str`, but for fields where an empty string is a legitimate value. */
+function text(payload: RpcPayload, key: string): string {
+  const value = payload[key];
+  return typeof value === "string" ? value : "";
+}
+
+/**
+ * Commands this host answers itself.
+ *
+ * Anything here either reads and writes the browser's own database, or is a
+ * fixed answer that is true of this host — not a stub standing in for something
+ * that should work.
+ */
+const HANDLERS: Partial<Record<AppCmd, Handler>> = {
+  /* ------------------------------- models -------------------------------- */
+
+  // Answered by the model layer itself, in the worker. The payload goes over
+  // untouched and the answer comes back untouched: this file has no opinion
+  // about models, and it would be wrong for it to grow one.
+  models_workspace_models: (payload, db) => db.rpc("models_workspace_models", payload),
+  models_upsert: (payload, db) => db.rpc("models_upsert", payload),
+  models_delete: (payload, db) => db.rpc("models_delete", payload),
+  models_duplicate: (payload, db) => db.rpc("models_duplicate", payload),
+  models_get_settings: (payload, db) => db.rpc("models_get_settings", payload),
+  models_get_graphql_introspection: (payload, db) =>
+    db.rpc("models_get_graphql_introspection", payload),
+  models_upsert_graphql_introspection: (payload, db) =>
+    db.rpc("models_upsert_graphql_introspection", payload),
+  models_grpc_events: (payload, db) => db.rpc("models_grpc_events", payload),
+  models_websocket_events: (payload, db) => db.rpc("models_websocket_events", payload),
+  cmd_get_workspace_meta: (payload, db) => db.rpc("cmd_get_workspace_meta", payload),
+  cmd_delete_all_http_responses: (payload, db) => db.rpc("cmd_delete_all_http_responses", payload),
+  cmd_delete_send_history: (payload, db) => db.rpc("cmd_delete_send_history", payload),
+
+  /* ------------------------------- sending ------------------------------- */
+
+  // The tab renders and stores; a stateless server puts the bytes on the wire.
+  // See send.ts for the whole shape of it.
+  cmd_send_http_request: (payload, db) => {
+    const requestId = str(payload, "requestId");
+    if (requestId == null) throw new Error("cmd_send_http_request needs a requestId");
+    return sendHttpRequest(
+      db,
+      requestId,
+      str(payload, "environmentId"),
+      str(payload, "cookieJarId"),
+    );
+  },
+
+  /* -------------------------------- app ---------------------------------- */
+
+  async cmd_metadata() {
+    return {
+      isDev: true,
+      version: "0.0.0-web",
+      cliVersion: null,
+      name: "Yaak",
+      // The desktop hands out real directories here and the UI offers to open
+      // them. There is no filesystem behind this host, and the capability flags
+      // are what the UI should be gating those affordances on.
+      appDataDir: NO_PATH,
+      appLogDir: NO_PATH,
+      vendoredPluginDir: NO_PATH,
+      defaultProjectDir: NO_PATH,
+      featureUpdater: false,
+      featureLicense: false,
+    };
+  },
+
+  // The theme package ships its own defaults, so an empty list is a complete
+  // answer rather than a degraded one — themes beyond those come from plugins.
+  async cmd_get_themes() {
+    return [];
+  },
+
+  async cmd_default_headers() {
+    // Mirrors `default_headers()` in crates/yaak-models/src/queries/workspaces.rs
+    return [
+      { enabled: true, name: "User-Agent", value: "yaak", id: null },
+      { enabled: true, name: "Accept", value: "*/*", id: null },
+    ];
+  },
+
+  async cmd_plugin_init_errors() {
+    return [];
+  },
+
+  async cmd_check_for_updates() {
+    return false;
+  },
+
+  async cmd_dismiss_notification() {
+    return null;
+  },
+
+  // Plugin-contributed menus. Empty is honest: no plugin runtime, no actions.
+  async cmd_http_request_actions() {
+    return [];
+  },
+  async cmd_websocket_request_actions() {
+    return [];
+  },
+  async cmd_grpc_request_actions() {
+    return [];
+  },
+  async cmd_workspace_actions() {
+    return [];
+  },
+  async cmd_folder_actions() {
+    return [];
+  },
+
+  /**
+   * Both of these are polled once a second until they answer with something, so
+   * an empty list is not a quiet no — it is a poll that never stops.
+   *
+   * The auth list names what Yaak actually offers, so the picker tells the
+   * truth about the product even though the form behind each entry stays empty
+   * until plugins run here. Template functions get the opposite treatment: one
+   * provider contributing no functions. That settles the poll while putting
+   * nothing in the autocomplete, which is the honest answer — a function the
+   * user could insert but nothing could evaluate would be worse than none.
+   */
+  async cmd_get_http_authentication_summaries() {
+    return HTTP_AUTHENTICATION_SUMMARIES;
+  },
+  async cmd_template_function_summaries() {
+    return [{ pluginRefId: "web", functions: [] }];
+  },
+
+  async cmd_get_http_authentication_config() {
+    return { args: [], pluginRefId: "web" };
+  },
+
+  async cmd_format_json(payload) {
+    const source = text(payload, "text");
+    try {
+      return JSON.stringify(JSON.parse(source), null, 2);
+    } catch {
+      // Formatting invalid JSON is a no-op, not an error: the editor calls this
+      // while the user is still typing.
+      return source;
+    }
+  },
+
+  /**
+   * Rendering resolves variables and calls template functions, and the
+   * functions live in plugins. Handing the template back unrendered is what the
+   * preview then shows — the raw `${[...]}`, which is at least the thing the
+   * user typed rather than a wrong value.
+   */
+  async cmd_render_template(payload) {
+    return text(payload, "template");
+  },
+
+  /* ------------------------------- bodies -------------------------------- */
+
+  async cmd_http_response_body(payload, db) {
+    const responseId = str(payload, "responseId");
+    if (responseId == null) return { content: "" };
+
+    if (str(payload, "filter") != null) {
+      return {
+        content: "",
+        error: "Response filters come from a plugin, which this host doesn't run yet",
+      };
+    }
+
+    const bytes = await db.blobGet(responseId);
+    return { content: bytes == null ? "" : new TextDecoder().decode(bytes) };
+  },
+
+  // Bodies live in this database, not on a disk, so there is no path to give.
+  async cmd_http_response_body_path() {
+    return null;
+  },
+
+  async cmd_http_request_body(payload, db) {
+    const responseId = str(payload, "responseId");
+    if (responseId == null) return null;
+    // Keyed the way the desktop keys it: the request bytes belong to the
+    // response that recorded them.
+    const bytes = await db.blobGet(`${responseId}.request`);
+    return bytes == null ? null : Array.from(bytes);
+  },
+
+  // The rows the sender wrote for that response, same table as the desktop.
+  cmd_get_http_response_events: (payload, db) => db.rpc("cmd_get_http_response_events", payload),
+
+  /* ------------------------------- export -------------------------------- */
+
+  // Built by the model layer, exactly as the desktop and the CLI build it. Where
+  // the document goes is not decided here: the caller hands it to `files.save`,
+  // which is the one thing each host answers differently.
+  cmd_export_data: (payload, db) => db.rpc("cmd_export_data", payload),
+
+  // The same example the desktop creates, built by the model layer in the worker.
+  cmd_create_example_workspace: (payload, db) => db.rpc("cmd_create_example_workspace", payload),
+
+  async cmd_get_sse_events() {
+    return [];
+  },
+};
+
+/**
+ * The auth methods Yaak ships as plugins today (plugins/auth-*). Listed so the
+ * picker is truthful about the product; choosing one currently yields an empty
+ * config form, because the plugin that defines the form isn't running.
+ */
+const HTTP_AUTHENTICATION_SUMMARIES = [
+  { name: "apikey", label: "API Key", shortLabel: "API Key" },
+  { name: "aws", label: "AWS SigV4", shortLabel: "AWS" },
+  { name: "basic", label: "Basic Auth", shortLabel: "Basic" },
+  { name: "bearer", label: "Bearer Token", shortLabel: "Bearer" },
+  { name: "digest", label: "Digest Auth", shortLabel: "Digest" },
+  { name: "jwt", label: "JWT Bearer", shortLabel: "JWT" },
+  { name: "ntlm", label: "NTLM", shortLabel: "NTLM" },
+  { name: "oauth1", label: "OAuth 1.0", shortLabel: "OAuth 1" },
+  { name: "oauth2", label: "OAuth 2.0", shortLabel: "OAuth 2" },
+];
+
+/**
+ * Commands this host declines, each with the reason a user would need.
+ *
+ * Naming them individually rather than letting them fall through to a generic
+ * refusal is deliberate: "sending is not available yet" and "Yaak in a browser
+ * has no filesystem" are different situations, and the second is permanent
+ * while the first is a slice away.
+ */
+const DECLINED: Partial<Record<AppCmd, [reason: string, capability: CapabilityName | null]>> = {
+  // Saved requests send through the server (see send.ts). Ephemeral sends — the
+  // ones nothing stores, used for GraphQL introspection — take the same road but
+  // return the body inline; not wired yet.
+  cmd_send_ephemeral_request: ["Sending unsaved requests isn't available in the browser yet", null],
+  cmd_curl_to_request: ["Importing from cURL needs a plugin, which this host doesn't run", null],
+
+  // Protocols that need a real socket.
+  cmd_grpc_reflect: ["gRPC isn't available in the browser", "grpc"],
+  cmd_grpc_go: ["gRPC isn't available in the browser", "grpc"],
+  cmd_delete_all_grpc_connections: ["gRPC isn't available in the browser", "grpc"],
+  cmd_ws_connect: ["WebSocket requests aren't available in the browser yet", "websocket"],
+  cmd_ws_send: ["WebSocket requests aren't available in the browser yet", "websocket"],
+  cmd_ws_close: ["WebSocket requests aren't available in the browser yet", "websocket"],
+  cmd_ws_delete_connections: [
+    "WebSocket requests aren't available in the browser yet",
+    "websocket",
+  ],
+
+  // Anything that needs files the page can't reach.
+  cmd_import_data: [
+    "Importing from a file needs a filesystem, which a browser tab has no",
+    "localFiles",
+  ],
+  cmd_import_url: ["Importing from a URL needs the Yaak server, which isn't available yet", null],
+  cmd_commit_import: ["Importing needs a plugin, which this host doesn't run", null],
+  cmd_list_import_sources: ["Importing isn't available in the browser yet", null],
+  cmd_import_sources_for_origin: ["Importing isn't available in the browser yet", null],
+  cmd_save_response: ["Saving a response to disk isn't available in the browser", "localFiles"],
+  cmd_save_base64_to_binary: ["Saving to disk isn't available in the browser", "localFiles"],
+  cmd_format_graphql: ["Formatting GraphQL needs a plugin, which this host doesn't run", null],
+
+  // Windows. A tab is the window, and there is only ever one of it.
+  cmd_new_child_window: ["Yaak in a browser uses one tab", "multiWindow"],
+  cmd_new_main_window: ["Yaak in a browser uses one tab", "multiWindow"],
+  cmd_restart: ["Reload the page to restart Yaak", null],
+
+  // Workspace encryption is backed by a key the host keeps for you; a page has
+  // nowhere to keep one that a page couldn't also read.
+  cmd_enable_encryption: ["Workspace encryption isn't available in the browser", "encryption"],
+  cmd_disable_encryption: ["Workspace encryption isn't available in the browser", "encryption"],
+  cmd_reveal_workspace_key: ["Workspace encryption isn't available in the browser", "encryption"],
+  cmd_set_workspace_key: ["Workspace encryption isn't available in the browser", "encryption"],
+  cmd_secure_template: ["Workspace encryption isn't available in the browser", "encryption"],
+  cmd_decrypt_template: ["Workspace encryption isn't available in the browser", "encryption"],
+
+  // The plugin runtime is a Node process. Nothing here runs one.
+  cmd_reload_plugins: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_plugin_info: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_plugins_search: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_plugins_install: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_plugins_install_from_directory: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_plugins_uninstall: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_plugins_updates: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_plugins_update_all: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_template_function_config: [
+    "Template functions come from plugins, which this host doesn't run",
+    "plugins",
+  ],
+  cmd_template_tokens_to_string: [
+    "Template functions come from plugins, which this host doesn't run",
+    "plugins",
+  ],
+  cmd_call_http_request_action: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_call_websocket_request_action: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_call_grpc_request_action: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_call_workspace_action: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_call_folder_action: ["Plugins aren't available in the browser yet", "plugins"],
+  cmd_call_http_authentication_action: ["Plugins aren't available in the browser yet", "plugins"],
+
+  cmd_send_feedback: ["Feedback goes through the desktop app for now", null],
+};
+
+/**
+ * The support table, for documentation and for the console.
+ *
+ * Derived from the two maps above rather than written alongside them, so it
+ * cannot drift from what the host actually does.
+ */
+export function commandSupport(): {
+  implemented: string[];
+  declined: { cmd: string; reason: string; capability: CapabilityName | null }[];
+} {
+  return {
+    implemented: Object.keys(HANDLERS).sort(),
+    declined: Object.entries(DECLINED)
+      .map(([cmd, [reason, capability]]) => ({ cmd, reason, capability }))
+      .sort((a, b) => a.cmd.localeCompare(b.cmd)),
+  };
+}
+
+export async function runCommand(
+  cmd: string,
+  payload: RpcPayload,
+  db: WorkerConnection,
+): Promise<unknown> {
+  const handler = HANDLERS[cmd as AppCmd];
+  if (handler != null) return handler(payload, db);
+
+  const declined = DECLINED[cmd as AppCmd];
+  if (declined != null) throw unsupported(cmd, declined[0], declined[1]);
+
+  // Git and sync land here, along with anything added to the schema since. The
+  // message names the command because an unlisted one is a gap in this file,
+  // and whoever hits it should be able to see which.
+  throw unsupported(cmd, `\`${cmd}\` isn't available when Yaak runs in a browser`);
+}
diff --git a/packages/platform/src/web/connection.ts b/packages/platform/src/web/connection.ts
new file mode 100644
index 0000000..e66b7ff
--- /dev/null
+++ b/packages/platform/src/web/connection.ts
@@ -0,0 +1,236 @@
+/**
+ * A tab's end of the wire to the worker that owns the database.
+ *
+ * Constructible synchronously and usable immediately, which is the hard
+ * requirement: boot-time modules call commands while the module graph is still
+ * evaluating, so there is no later moment to connect in. Messages posted before
+ * the worker has opened the database sit in the port until it has, and the
+ * app's own top-level await then doubles as the boot gate — nothing renders
+ * until the first command has answered, and it can only answer once the
+ * database is open.
+ */
+
+import type { Unsubscribe } from "../types";
+import { randomId } from "./ids";
+import { type FromWorker, type ToWorker, WORKER_NAME } from "./protocol";
+
+/**
+ * How long a freshly connected worker gets to say hello.
+ *
+ * A live worker answers in the same turn it is connected — the worker script
+ * is tiny and imports the model layer lazily, so this measures liveness, not
+ * load time. It only has to be longer than a cold fetch of that small script;
+ * a worker silent past this is not coming, and a message beats a blank page.
+ */
+const HELLO_TIMEOUT_MS = 3000;
+
+const WORKER_FAILED = "Yaak's database worker could not be started. Reload the page to try again";
+
+const UNSUPPORTED =
+  "This browser can't run Yaak: it needs shared workers and Web Locks to keep your data safe across tabs. Every current browser has both.";
+
+type Pending = { resolve: (value: unknown) => void; reject: (reason: Error) => void };
+
+export class WorkerConnection {
+  private port: MessagePort | null;
+  private readonly pending = new Map<number, Pending>();
+  private readonly listeners = new Map<string, Set<(payload: unknown) => void>>();
+  private nextId = 1;
+  private bootError: string | null = null;
+
+  /**
+   * This tab's identity, standing in for the desktop's window label. Stamped
+   * on every write this tab makes, so the store can tell an echo of its own
+   * write from another tab's. Minted per page load, not kept in
+   * `sessionStorage`, on purpose: duplicating a tab copies session storage,
+   * and two tabs claiming one identity would each drop the other's writes as
+   * echoes.
+   */
+  readonly label = `tab_${randomId(4)}`;
+
+  /** True once the worker has said anything at all. */
+  private heard = false;
+
+  constructor() {
+    // Both are required and neither is faked. Without a shared worker every
+    // tab would need its own SQLite over the same pages; without Web Locks
+    // nothing can promise there is only one even so. Every current browser,
+    // desktop and mobile, has both (Chrome for Android since 148); the ones
+    // that don't get told, not corrupted.
+    if (typeof SharedWorker === "undefined" || typeof navigator.locks === "undefined") {
+      this.port = null;
+      this.bootError = UNSUPPORTED;
+      showBootError(UNSUPPORTED);
+      return;
+    }
+
+    this.port = this.connect();
+
+    // Let the worker forget this port. Not load-bearing — a port that never
+    // says goodbye is a leaked entry in a Set — but tidy.
+    window.addEventListener("pagehide", () => this.post({ type: "goodbye" }));
+  }
+
+  /**
+   * Connect to the origin's one database worker.
+   *
+   * The browser hands every tab the same SharedWorker for this name and URL,
+   * which is what makes "one database owner" true without anyone coordinating.
+   *
+   * `new URL("./worker.ts", import.meta.url)` is written out inline on purpose:
+   * that exact syntax is what the bundler pattern-matches to know it must
+   * bundle a worker entry. Hoisted into a variable it becomes an asset URL and
+   * ships as raw TypeScript.
+   */
+  private connect(): MessagePort {
+    const worker = new SharedWorker(new URL("./worker.ts", import.meta.url), {
+      type: "module",
+      name: WORKER_NAME,
+    });
+    // A worker whose script fails to load fires `error` on the SharedWorker
+    // object and nothing else — the port just goes quiet.
+    worker.onerror = () => {
+      if (!this.heard) this.failEverything(`${WORKER_FAILED} (its script failed to load).`);
+    };
+    worker.port.onmessage = (e: MessageEvent<FromWorker>) => this.receive(e.data);
+    worker.port.start();
+
+    // The worker says hello synchronously on connect. Silence past the timeout
+    // means this port is attached to nothing that will ever answer, and the
+    // user should see that rather than a blank page. It is not retried: the
+    // one way this used to happen (a module worker missing connects during a
+    // top-level-await import) is fixed at the source by importing the wasm
+    // lazily, and a reload is the right remedy for anything else.
+    setTimeout(() => {
+      if (!this.heard) this.failEverything(`${WORKER_FAILED} (it never answered).`);
+    }, HELLO_TIMEOUT_MS);
+
+    return worker.port;
+  }
+
+  private failEverything(message: string): void {
+    this.bootError = message;
+    showBootError(message);
+    for (const [id, p] of this.pending) {
+      this.pending.delete(id);
+      p.reject(new Error(message));
+    }
+  }
+
+  private post(message: ToWorker, transfer: Transferable[] = []): void {
+    this.port?.postMessage(message, transfer);
+  }
+
+  private receive(message: FromWorker): void {
+    this.heard = true;
+    switch (message.type) {
+      case "hello":
+      case "ready":
+        return;
+      case "boot_error":
+        // Nothing will ever answer, and the app cannot render without an
+        // answer, so say what happened where the user can see it. This is the
+        // page's whole content at this point.
+        this.failEverything(message.message);
+        return;
+      case "result": {
+        const p = this.pending.get(message.id);
+        this.pending.delete(message.id);
+        p?.resolve(message.result);
+        return;
+      }
+      case "error": {
+        const p = this.pending.get(message.id);
+        this.pending.delete(message.id);
+        p?.reject(new Error(message.message));
+        return;
+      }
+      case "event":
+        this.deliver(message.event, message.payload);
+        return;
+    }
+  }
+
+  private request<T>(build: (id: number) => ToWorker, transfer: Transferable[] = []): Promise<T> {
+    if (this.bootError != null) return Promise.reject(new Error(this.bootError));
+    const id = this.nextId++;
+    return new Promise<T>((resolve, reject) => {
+      this.pending.set(id, { resolve: resolve as (v: unknown) => void, reject });
+      this.post(build(id), transfer);
+    });
+  }
+
+  rpc<T>(cmd: string, payload: unknown): Promise<T> {
+    return this.request<T>((id) => ({ type: "rpc", id, cmd, payload, label: this.label }));
+  }
+
+  /** See `prepare_http_send` in crates/yaak-wasm: the database half of a send. */
+  prepareHttpSend<T>(payload: unknown): Promise<T> {
+    return this.request<T>((id) => ({ type: "prepare_http_send", id, payload }));
+  }
+
+  async blobGet(blobId: string): Promise<Uint8Array<ArrayBuffer> | null> {
+    const buf = await this.request<ArrayBuffer | null>((id) => ({ type: "blob_get", id, blobId }));
+    return buf == null ? null : new Uint8Array(buf);
+  }
+
+  blobPut(blobId: string, bytes: Uint8Array): Promise<void> {
+    // Copied so the caller's buffer isn't detached out from under it, then
+    // transferred so the copy isn't copied again crossing to the worker.
+    const copy = new Uint8Array(bytes.byteLength);
+    copy.set(bytes);
+    return this.request<void>(
+      (id) => ({ type: "blob_put", id, blobId, bytes: copy.buffer }),
+      [copy.buffer],
+    );
+  }
+
+  blobDelete(blobId: string): Promise<void> {
+    return this.request<void>((id) => ({ type: "blob_delete", id, blobId }));
+  }
+
+  /* ------------------------------- events -------------------------------- */
+
+  listen(event: string, callback: (payload: unknown) => void): Unsubscribe {
+    let set = this.listeners.get(event);
+    if (set == null) {
+      set = new Set();
+      this.listeners.set(event, set);
+    }
+    set.add(callback);
+    return () => {
+      set.delete(callback);
+      if (set.size === 0) this.listeners.delete(event);
+    };
+  }
+
+  /**
+   * Deliver an event to this tab's listeners.
+   *
+   * Used for what the worker pushes, and for the app's own local emits (a
+   * plugin round trip, a stream teardown). Local emits stay local: every
+   * emitter in the app is replying to something *this* tab is doing.
+   */
+  deliver(event: string, payload: unknown): void {
+    const set = this.listeners.get(event);
+    if (set == null) return;
+    // Copied because a listener may unsubscribe itself while being called
+    for (const callback of Array.from(set)) {
+      try {
+        callback(payload);
+      } catch (err) {
+        console.error(`Listener for \`${event}\` threw`, err);
+      }
+    }
+  }
+}
+
+function showBootError(message: string): void {
+  const root = document.getElementById("root");
+  if (root == null || root.childElementCount > 0) return;
+  const el = document.createElement("div");
+  el.style.cssText =
+    "font: 15px/1.5 system-ui, sans-serif; max-width: 32rem; margin: 20vh auto; padding: 0 1rem; color: inherit";
+  el.textContent = message;
+  root.appendChild(el);
+}
diff --git a/packages/platform/src/web/errors.ts b/packages/platform/src/web/errors.ts
new file mode 100644
index 0000000..d6127ef
--- /dev/null
+++ b/packages/platform/src/web/errors.ts
@@ -0,0 +1,32 @@
+import type { CapabilityName } from "../types";
+
+/**
+ * What this host says when it is asked for something it doesn't have.
+ *
+ * A rejected command reaches the user as a toast built from `message`, so the
+ * message is the user-facing text and has to read like one. The structured
+ * fields alongside it are for code: `capability` names the switch a caller
+ * should have checked first, and `cmd` identifies the command without anyone
+ * having to parse prose back out of the message.
+ */
+export class UnsupportedCommandError extends Error {
+  readonly name = "UnsupportedCommandError";
+  /** Stable discriminator, so a caller can branch without matching on text. */
+  readonly code = "unsupported_command";
+  readonly cmd: string;
+  readonly capability: CapabilityName | null;
+
+  constructor(cmd: string, message: string, capability: CapabilityName | null = null) {
+    super(message);
+    this.cmd = cmd;
+    this.capability = capability;
+  }
+}
+
+export function unsupported(
+  cmd: string,
+  reason: string,
+  capability: CapabilityName | null = null,
+): UnsupportedCommandError {
+  return new UnsupportedCommandError(cmd, reason, capability);
+}
diff --git a/packages/platform/src/web/ids.ts b/packages/platform/src/web/ids.ts
new file mode 100644
index 0000000..613d918
--- /dev/null
+++ b/packages/platform/src/web/ids.ts
@@ -0,0 +1,14 @@
+/**
+ * Random ids that do not need a secure context.
+ *
+ * `crypto.randomUUID` exists only on HTTPS and localhost, so a tab opened at
+ * `http://some-host:1424` — a self-hosted instance reached from another machine —
+ * throws on it before anything renders. `crypto.getRandomValues` carries no such
+ * restriction, and nothing here needs UUID semantics: these ids identify a tab and
+ * a stream within one page, and only have to not collide with each other.
+ */
+export function randomId(bytes = 8): string {
+  const buf = new Uint8Array(bytes);
+  crypto.getRandomValues(buf);
+  return Array.from(buf, (b) => b.toString(16).padStart(2, "0")).join("");
+}
diff --git a/packages/platform/src/web/index.ts b/packages/platform/src/web/index.ts
new file mode 100644
index 0000000..787a3a5
--- /dev/null
+++ b/packages/platform/src/web/index.ts
@@ -0,0 +1,383 @@
+/**
+ * The browser host: Yaak in a tab, with no install and nothing running locally.
+ *
+ * The desktop host forwards to a Rust process. This one forwards to a worker
+ * running the same model layer compiled to wasm, over a `MessagePort` instead
+ * of Tauri's IPC. The worker owns the database and is shared by every tab on
+ * the origin, so two tabs stay coherent for the same reason two desktop windows
+ * do: one process holds the data and pushes every write to all of them.
+ *
+ * Sending goes through a small stateless server, because a page cannot see a
+ * response the way a desktop app can (see send.ts). What a page genuinely
+ * cannot do is not faked: there is no file dialog, no second window, no
+ * clipboard read without a prompt. Those report false through `capabilities`
+ * and refuse with a reason if called anyway, so a missing feature shows up as a
+ * disabled control or a toast that explains itself, never as a silent no-op.
+ */
+
+import type {
+  DialogFilter,
+  DragDropEvent,
+  OsType,
+  Platform,
+  PlatformCapabilities,
+  PlatformWindow,
+  RpcPayload,
+  RpcStreamHandle,
+  SaveContent,
+  Unsubscribe,
+} from "../types";
+import { commandSupport, runCommand } from "./commands";
+import { WorkerConnection } from "./connection";
+import { unsupported } from "./errors";
+import { randomId } from "./ids";
+import { serverBaseUrl } from "./server";
+import { requestPersistence } from "./storage";
+
+/** What this host can do, reported honestly. */
+function capabilitiesFor(): PlatformCapabilities {
+  return {
+    // Through the Yaak server: the tab renders, the server executes, the tab
+    // stores. Requests needing plugin auth or template functions are refused
+    // with the reason until plugins run here.
+    httpSending: true,
+    grpc: false,
+    websocket: false,
+    git: false,
+    sync: false,
+    // Certificates and proxies are decided by whoever puts the bytes on the
+    // wire, and the Yaak server uses its own.
+    tlsOptions: false,
+    cookieJar: true,
+    localFiles: false,
+    // The server streams the engine's events back and the sender stores them.
+    timeline: true,
+    // Whether the host can put a *second window* on this data on demand — what
+    // `cmd_new_child_window` does for Settings and workspace switching. A tab
+    // can't, so those open in place instead. This is not a claim that nothing
+    // else is looking: other tabs may well be open on the same worker, and it
+    // pushes every write to all of them regardless of this flag.
+    multiWindow: false,
+    // The browser draws the frame around the page. There are no traffic lights
+    // to leave room for and no window controls to draw.
+    windowChrome: false,
+    // The browser already zooms the page, on the same keys, and remembers it
+    // per site. The app stays out of the way.
+    interfaceZoom: false,
+    plugins: false,
+    encryption: false,
+    updater: false,
+    // Reading needs a permission prompt at first paint, which is a bad ask for
+    // an app people paste bearer tokens into. Pasting still works everywhere.
+    clipboardRead: false,
+    systemFonts: false,
+    license: false,
+  };
+}
+
+/** Match `@tauri-apps/plugin-os` spellings so layout code needs no new branch. */
+function detectOsType(): OsType {
+  const ua = navigator.userAgent;
+  if (/Mac|iPhone|iPad|iPod/.test(ua)) return "macos";
+  if (/Win/.test(ua)) return "windows";
+  if (/Android/.test(ua)) return "android";
+  return "linux";
+}
+
+/**
+ * The Tauri host-plugin commands, which ride outside the RPC envelope.
+ *
+ * `set_title` has a real browser equivalent. `set_theme` paints the native
+ * window frame behind the webview, which a tab has neither of. The license and
+ * font plugins answer with "nothing", which is true and keeps the settings
+ * screens rendering instead of erroring.
+ */
+async function hostPluginCommand<T>(cmd: string, payload?: RpcPayload): Promise<T> {
+  switch (cmd) {
+    case "plugin:yaak-mac-window|set_title": {
+      const title = payload?.title;
+      document.title = typeof title === "string" ? title : "Yaak";
+      return undefined as T;
+    }
+    case "plugin:yaak-mac-window|set_theme":
+      return undefined as T;
+    case "plugin:yaak-fonts|list":
+      // Enumerating installed fonts is a fingerprinting surface browsers don't
+      // offer. The pickers fall back to their bundled families.
+      return { editorFonts: [], uiFonts: [] } as T;
+    default:
+      throw unsupported(cmd, `\`${cmd}\` isn't available when Yaak runs in a browser`);
+  }
+}
+
+/**
+ * The File System Access API, where the browser has it. Chromium does; Firefox
+ * and Safari do not, and fall through to a download below.
+ */
+interface SaveFilePicker {
+  (options: {
+    suggestedName?: string;
+    types?: { description: string; accept: Record<string, string[]> }[];
+  }): Promise<{
+    name: string;
+    createWritable(): Promise<{ write(data: Uint8Array): Promise<void>; close(): Promise<void> }>;
+  }>;
+}
+
+/**
+ * Saving, the only way a page can: a real save dialog where the browser offers
+ * one, and a download everywhere else.
+ *
+ * The return value is a name rather than a path because a name is all a tab
+ * ever learns. Callers show it back to the user and nothing more, which is why
+ * the interface promises "where they went" rather than a path.
+ */
+function toBytes(content: SaveContent): Uint8Array {
+  if (content instanceof Uint8Array) return content;
+  const binary = atob(content.base64);
+  const out = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) out[i] = binary.charCodeAt(i);
+  return out;
+}
+
+async function saveBytes(
+  suggestedName: string,
+  content: SaveContent,
+  filters?: DialogFilter[],
+): Promise<string | null> {
+  const picker = (window as unknown as { showSaveFilePicker?: SaveFilePicker }).showSaveFilePicker;
+  const bytes = toBytes(content);
+
+  if (picker != null) {
+    let handle;
+    try {
+      handle = await picker({
+        suggestedName,
+        types: filters?.map((f) => ({
+          description: f.name,
+          // The API keys accepted extensions by MIME type. Nothing here knows
+          // the real one, and it only labels the dialog's filter, so the
+          // catch-all is honest enough.
+          accept: { "application/octet-stream": f.extensions.map((e) => `.${e}`) },
+        })),
+      });
+    } catch (err) {
+      // Only choosing a file is allowed to fall back. Backing out is not a
+      // failure and must not become a download nobody asked for; anything else
+      // here is a browser that won't show the dialog, which a download covers.
+      if ((err as { name?: string } | null)?.name === "AbortError") return null;
+      console.warn("Save dialog unavailable, falling back to a download", err);
+    }
+
+    // Past the dialog, the user has named a destination. A write that fails
+    // there is a failed save, and saying so beats quietly putting the file
+    // somewhere else and reporting success.
+    if (handle != null) {
+      const writable = await handle.createWritable();
+      await writable.write(bytes);
+      await writable.close();
+      return handle.name;
+    }
+  }
+
+  // No dialog: the file lands wherever the browser puts downloads, under the
+  // name we suggested. The user is not asked, so there is nothing to cancel.
+  const url = URL.createObjectURL(new Blob([bytes as BlobPart]));
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = suggestedName;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  // Revoked on a later turn: revoking while the browser is still reading the
+  // blob cancels the download in some of them.
+  setTimeout(() => URL.revokeObjectURL(url), 30_000);
+  return suggestedName;
+}
+
+function createWindow(db: WorkerConnection): PlatformWindow {
+  const noop = async () => {};
+
+  return {
+    // Stands in for the desktop's window label: the identity model writes carry
+    // so a tab can tell its own echo from another tab's write.
+    label: db.label,
+
+    // A tab manages its own frame. These exist because the interface names
+    // them; the UI only reaches for them behind `multiWindow`.
+    show: noop,
+    close: noop,
+    minimize: noop,
+    maximize: noop,
+    unmaximize: noop,
+    isMaximized: async () => false,
+    isFullscreen: async () => document.fullscreenElement != null,
+    setZoom: noop,
+
+    // Null means "no opinion, let CSS decide". The desktop returns a real value
+    // because applying a theme forces the window appearance and poisons the
+    // media query; nothing does that here, so `prefers-color-scheme` is the
+    // honest answer and the theme package already falls back to it.
+    theme: async () => null,
+
+    onThemeChanged(callback) {
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      const listener = () => callback(media.matches ? "dark" : "light");
+      media.addEventListener("change", listener);
+      return () => media.removeEventListener("change", listener);
+    },
+
+    onFocusChanged(callback) {
+      const onFocus = () => callback(true);
+      const onBlur = () => callback(false);
+      window.addEventListener("focus", onFocus);
+      window.addEventListener("blur", onBlur);
+      return () => {
+        window.removeEventListener("focus", onFocus);
+        window.removeEventListener("blur", onBlur);
+      };
+    },
+
+    // Native drag-and-drop reports OS paths, which a page never sees. The DOM's
+    // own drag events are a different thing, and the components that need those
+    // use them directly.
+    onDragDrop(_callback: (event: DragDropEvent) => void): Unsubscribe {
+      return () => {};
+    },
+  };
+}
+
+export function createWebPlatform(): Platform {
+  const db = new WorkerConnection();
+  const capabilities = capabilitiesFor();
+
+  // Without this, IndexedDB is best-effort storage and a browser reclaiming
+  // space may drop someone's workspaces. Asking is all we can do, and there is
+  // nothing useful to do about a refusal.
+  void requestPersistence();
+
+  // Enough to answer "what does this host actually do?" from the console
+  // without reading the source.
+  (window as unknown as Record<string, unknown>).__YAAK_WEB__ = {
+    label: db.label,
+    capabilities,
+    commands: commandSupport,
+  };
+
+  return {
+    capabilities,
+    httpProxyUrl: serverBaseUrl() || window.location.origin,
+    window: createWindow(db),
+
+    clipboard: {
+      writeText: (text) => navigator.clipboard.writeText(text),
+      readText: async () => {
+        throw unsupported(
+          "clipboard.readText",
+          "Paste instead — Yaak in a browser can't read the clipboard on its own",
+          "clipboardRead",
+        );
+      },
+      clear: async () => {
+        throw unsupported(
+          "clipboard.clear",
+          "Yaak in a browser can't modify the clipboard",
+          "clipboardRead",
+        );
+      },
+    },
+
+    // Returning null rather than throwing: null is what a cancelled dialog
+    // returns, which every caller already handles.
+    dialog: {
+      open: (async () => null) as Platform["dialog"]["open"],
+      save: async () => null,
+    },
+
+    files: {
+      readDir: async () => {
+        throw unsupported(
+          "files.readDir",
+          "A browser tab can't browse your filesystem",
+          "localFiles",
+        );
+      },
+      readText: async () => {
+        throw unsupported("files.readText", "A browser tab can't read local files", "localFiles");
+      },
+      // No filesystem here, so a path is just a string this host echoes back.
+      url: (path) => path,
+      basename: async (path) => path.split(/[/\\]/).pop() ?? path,
+      resolveResource: async (path) => path,
+
+      save: saveBytes,
+    },
+
+    /**
+     * Bodies live in the worker's blob database, addressed by the id they were
+     * stored under. A page hands over an id and never a location, which is what
+     * keeps it from naming bytes the app never wrote.
+     */
+    blobs: {
+      read: (id) => db.blobGet(id),
+
+      async url(id) {
+        const bytes = await db.blobGet(id);
+        // An object URL, the tab's equivalent of Tauri's `convertFileSrc`. The
+        // caller keys a query on it and drops it on the next response, so it is
+        // left to be reclaimed when the document goes rather than revoked here
+        // while an <img> may still be loading it.
+        return bytes == null ? null : URL.createObjectURL(new Blob([bytes]));
+      },
+    },
+
+    rpc<T>(cmd: string, payload?: RpcPayload): Promise<T> {
+      // `plugin:` commands are Tauri host plugins, not engine commands, and
+      // never reached the router even on the desktop.
+      if (cmd.startsWith("plugin:")) return hostPluginCommand<T>(cmd, payload);
+      return runCommand(cmd, payload ?? {}, db) as Promise<T>;
+    },
+
+    async rpcStream<T, M>(
+      cmd: string,
+      payload: RpcPayload,
+      onMessage: (message: M) => void,
+    ): Promise<RpcStreamHandle<T>> {
+      // Same shape as the desktop — subscribe first, then dispatch — so that a
+      // command which grows the ability to stream here needs no caller changes.
+      const streamId = randomId();
+      const unlisten = db.listen(`stream_${streamId}`, (p) => onMessage(p as M));
+      try {
+        const result = (await runCommand(cmd, { ...payload, streamId }, db)) as T;
+        return { result, unlisten };
+      } catch (err) {
+        unlisten();
+        throw err;
+      }
+    },
+
+    listen<T>(event: string, callback: (payload: T) => void): Unsubscribe {
+      return db.listen(event, (payload) => callback(payload as T));
+    },
+
+    // Local only. Every emitter in the app is replying to something this tab is
+    // doing — a plugin round trip, a stream teardown — and telling other tabs
+    // about it would answer a question they never asked.
+    emit: async (event, payload) => db.deliver(event, payload),
+
+    openUrl: async (url) => {
+      window.open(url, "_blank", "noopener,noreferrer");
+    },
+
+    revealItemInDir: async () => {
+      throw unsupported(
+        "revealItemInDir",
+        "A browser tab can't open your file manager",
+        "localFiles",
+      );
+    },
+
+    osType: detectOsType,
+    appIdentifier: async () => "app.yaak.web",
+  };
+}
diff --git a/packages/platform/src/web/protocol.ts b/packages/platform/src/web/protocol.ts
new file mode 100644
index 0000000..5104463
--- /dev/null
+++ b/packages/platform/src/web/protocol.ts
@@ -0,0 +1,53 @@
+/**
+ * The messages that cross between a tab and the worker that owns the database.
+ *
+ * Declared once and imported from both sides, so a change to the shape is a
+ * type error in whichever side forgot. Kept deliberately small: commands in,
+ * results or errors out, and events pushed the other way — the same envelope
+ * the desktop's IPC uses, because that is what the frontend is written against.
+ */
+
+/** Tab → worker */
+export type ToWorker =
+  | { type: "rpc"; id: number; cmd: string; payload: unknown; label: string }
+  /**
+   * The prepare half of a send: resolve, inherit and render a request against
+   * the database. Its own message rather than an `rpc` command because it is
+   * async in the engine (rendering is), where every `rpc` command is not.
+   */
+  | { type: "prepare_http_send"; id: number; payload: unknown }
+  | { type: "blob_get"; id: number; blobId: string }
+  | { type: "blob_put"; id: number; blobId: string; bytes: ArrayBuffer }
+  | { type: "blob_delete"; id: number; blobId: string }
+  /** The tab is going away; the worker can forget its port. */
+  | { type: "goodbye" };
+
+/** Worker → tab */
+export type FromWorker =
+  /**
+   * Sent synchronously the moment a port connects, before anything else. Its
+   * only job is to prove the worker is alive: a tab that connects during a
+   * shared worker's teardown gets a port that is accepted and then never
+   * serviced, and this is how it tells that apart from a slow boot.
+   */
+  | { type: "hello" }
+  /** The database is open. Sent to each port once boot has finished. */
+  | { type: "ready" }
+  /** The database could not be opened; every command will fail with this. */
+  | { type: "boot_error"; message: string }
+  | { type: "result"; id: number; result: unknown }
+  | { type: "error"; id: number; message: string }
+  /** A backend event for the app — today only `model_writes`. Sent to every port. */
+  | { type: "event"; event: string; payload: unknown };
+
+/** What the worker registers itself under. Tabs on one origin share it. */
+export const WORKER_NAME = "yaak-db";
+
+/**
+ * The Web Lock the worker takes before opening the database.
+ *
+ * The browser already guarantees one SharedWorker per origin for this name.
+ * The lock covers the one overlap it doesn't rule out: a tab reloading itself,
+ * whose old worker may still be letting go while the new one comes up.
+ */
+export const DB_LOCK_NAME = "yaak-db";
diff --git a/packages/platform/src/web/send.ts b/packages/platform/src/web/send.ts
new file mode 100644
index 0000000..061abc2
--- /dev/null
+++ b/packages/platform/src/web/send.ts
@@ -0,0 +1,352 @@
+/**
+ * Sending an HTTP request from a tab.
+ *
+ * A tab can't see a response the way the desktop can — CORS hides most headers,
+ * redirects are followed silently, there is no timeline — so the network half of
+ * a send happens on a small stateless server (`crates-server/yaak-web`).
+ * Everything else happens here, against this tab's own database, in the same
+ * order the desktop does it:
+ *
+ *   1. create the `http_response` row (state: initialized);
+ *   2. resolve and render the request in the worker (`prepare_http_send`: the
+ *      environment chain, inherited headers and auth, request settings, cookie
+ *      jar — the desktop's `HttpSendInputs`, in Rust, on the same model layer);
+ *   3. POST the rendered request to the server and consume its stream: timeline
+ *      events, the response head, body chunks, and a terminal frame;
+ *   4. write what comes back where the desktop writes it — the response row as
+ *      it progresses, `http_response_event` rows for the timeline, the body
+ *      blob under the response id, the cookie jar with the server's changes.
+ *
+ * The server keeps nothing. Every byte it sees comes from this tab and every
+ * byte it returns is stored by this tab.
+ */
+
+// Types only: the models package imports this one at runtime, and a type import
+// is erased, so there is no cycle.
+import type {
+  Cookie,
+  CookieJar,
+  HttpRequest,
+  HttpResponse,
+  HttpResponseEventData,
+  HttpSendSettings,
+} from "@yaakapp-internal/models";
+import type { Frame, SendRequest } from "@yaakapp-internal/web";
+import type { WorkerConnection } from "./connection";
+import { serverIdentity, serverSendUrl, readFrames } from "./server";
+
+/* -------------------------------- shapes --------------------------------- */
+
+/**
+ * The response row as this file knows it: what identifies it, plus whatever
+ * has been written so far. Every other field is optional and takes the model
+ * layer's default when absent, the same way the desktop's row does — defaults
+ * live in Rust, once.
+ */
+type ResponseRow = Pick<HttpResponse, "model" | "requestId" | "workspaceId"> &
+  Partial<Omit<HttpResponse, "model" | "requestId" | "workspaceId">>;
+
+type ResponsePatch = Partial<HttpResponse>;
+
+/** What `prepare_http_send` (crates/yaak-wasm) hands back. */
+interface PreparedHttpSend {
+  request: HttpRequest;
+  settings: HttpSendSettings;
+  settingEvents: HttpResponseEventData[];
+  cookieJar: CookieJar | null;
+}
+
+/** The desktop writes progress at most this often while a body streams in. */
+const PROGRESS_INTERVAL_MS = 100;
+
+/* --------------------------------- send ---------------------------------- */
+
+export async function sendHttpRequest(
+  db: WorkerConnection,
+  requestId: string,
+  environmentId: string | null,
+  cookieJarId: string | null,
+): Promise<ResponseRow> {
+  // The response row exists before anything can go wrong, as on the desktop, so
+  // a failure to render or to reach the server lands in the response pane as
+  // that response's error rather than as a toast that names no request.
+  const workspaceId = await workspaceIdOfRequest(db, requestId);
+  const response = new ResponseWriter(db, { model: "http_response", requestId, workspaceId });
+  await response.create();
+
+  const cancel = new AbortController();
+  const unlistenCancel = db.listen(`cancel_http_response_${response.id}`, () => cancel.abort());
+
+  try {
+    await runSend(db, response, requestId, environmentId, cookieJarId, cancel.signal);
+  } catch (err) {
+    const message = cancel.signal.aborted ? "Request canceled" : errorMessage(err);
+    await response.finish({ error: message });
+  } finally {
+    unlistenCancel();
+  }
+  return response.current();
+}
+
+async function runSend(
+  db: WorkerConnection,
+  response: ResponseWriter,
+  requestId: string,
+  environmentId: string | null,
+  cookieJarId: string | null,
+  signal: AbortSignal,
+): Promise<void> {
+  const prepared = await db.prepareHttpSend<PreparedHttpSend>({
+    requestId,
+    environmentId,
+    cookieJarId,
+  });
+  await response.patch({ url: prepared.request.url });
+
+  // The first line of the timeline says what did the sending and where. A
+  // request through a proxy shows a different origin to the server than the
+  // user's machine, and this is where that should be visible.
+  const timeline = new TimelineWriter(db, response.id, response.workspaceId);
+  timeline.push([{ type: "info", message: `Executed by ${await serverIdentity()}` }]);
+  timeline.push(prepared.settingEvents);
+
+  const body: SendRequest = {
+    request: prepared.request,
+    settings: prepared.settings,
+    cookies: prepared.cookieJar?.cookies ?? null,
+  };
+  const startedAt = performance.now();
+  const res = await fetch(serverSendUrl(), {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+    signal,
+  }).catch((err: unknown) => {
+    if (signal.aborted) throw err;
+    throw new Error(`Couldn't reach the Yaak server at ${serverSendUrl()}: ${errorMessage(err)}`);
+  });
+
+  if (!res.ok) {
+    // A refusal, not a failed send: bad destination, rate limit, a body the
+    // server can't build. It comes as JSON with the reason.
+    const text = await res.text();
+    let reason = text;
+    try {
+      reason = (JSON.parse(text) as { error?: string }).error ?? text;
+    } catch {
+      /* not JSON; the text is the reason */
+    }
+    throw new Error(reason || `The Yaak server answered ${res.status}`);
+  }
+  if (res.body == null) throw new Error("The Yaak server sent no body");
+
+  const chunks: Uint8Array[] = [];
+  let received = 0;
+  let lastProgress = startedAt;
+  let terminal: Frame | null = null;
+
+  for await (const frame of readFrames(res.body)) {
+    switch (frame.type) {
+      case "event":
+        timeline.push([frame.event]);
+        break;
+      case "response":
+        await response.patch(headOf(frame));
+        break;
+      case "body": {
+        const bytes = base64ToBytes(frame.data);
+        chunks.push(bytes);
+        received += bytes.byteLength;
+        const now = performance.now();
+        if (now - lastProgress >= PROGRESS_INTERVAL_MS) {
+          lastProgress = now;
+          await response.patch({
+            contentLength: received,
+            elapsed: Math.round(now - startedAt),
+          });
+        }
+        break;
+      }
+      case "done":
+      case "error":
+        terminal = frame;
+        break;
+    }
+    if (terminal != null) break;
+  }
+
+  // Everything the server said about the timeline is in the database before the
+  // response is marked closed, so a reader that wakes on "closed" sees all of it.
+  await timeline.flush();
+
+  if (terminal == null) {
+    throw new Error("The Yaak server closed the stream without finishing");
+  }
+
+  // Cookies come back on both outcomes: a hop before the failing one may have
+  // set some, and the desktop keeps those too.
+  if (prepared.cookieJar != null && terminal.cookies != null) {
+    await persistCookies(db, prepared.cookieJar, terminal.cookies);
+  }
+
+  if (terminal.type === "error") {
+    throw new Error(terminal.message);
+  }
+
+  // The body is written under the response id, which is how every reader —
+  // `cmd_http_response_body`, the image viewer, the download button — asks for
+  // it. One write, once the whole body is here: the worker's blob store has no
+  // append, and a body larger than memory is over the server's cap anyway.
+  await db.blobPut(response.id, concat(chunks, received));
+  await response.finish({
+    contentLength: terminal.contentLength,
+    contentLengthCompressed: terminal.contentLengthCompressed,
+    elapsed: terminal.elapsed,
+  });
+}
+
+function headOf(frame: Extract<Frame, { type: "response" }>): ResponsePatch {
+  return {
+    state: "connected",
+    status: frame.status,
+    statusReason: frame.statusReason,
+    url: frame.url,
+    remoteAddr: frame.remoteAddr,
+    version: frame.version,
+    headers: frame.headers,
+    requestHeaders: frame.requestHeaders,
+    contentLength: frame.contentLength,
+    elapsedHeaders: frame.elapsedHeaders,
+    elapsedDns: frame.elapsedDns,
+  };
+}
+
+/* ------------------------------- helpers --------------------------------- */
+
+/**
+ * The response row, written the way the desktop writes it: created empty,
+ * patched as the send progresses, closed at the end. Each write goes through
+ * `models_upsert`, so every tab on this database sees the response land.
+ */
+class ResponseWriter {
+  private state: ResponseRow;
+
+  constructor(
+    private readonly db: WorkerConnection,
+    initial: ResponseRow,
+  ) {
+    this.state = initial;
+  }
+
+  get id(): string {
+    return this.state.id ?? "";
+  }
+
+  get workspaceId(): string {
+    return this.state.workspaceId;
+  }
+
+  current(): ResponseRow {
+    return this.state;
+  }
+
+  /** Create the row. Everything but its identity is the model layer's default. */
+  async create(): Promise<void> {
+    const id = await this.db.rpc<string>("models_upsert", { model: this.state });
+    this.state = { ...this.state, id };
+  }
+
+  async patch(patch: ResponsePatch): Promise<void> {
+    // Structured clone carries `undefined` across to the worker as a present
+    // key, and the model layer reads that as "wrong type" and refuses the whole
+    // model. Nothing here should produce one, but a missing wire field must
+    // not take the response row down with it.
+    const defined = Object.fromEntries(Object.entries(patch).filter(([, v]) => v !== undefined));
+    this.state = { ...this.state, ...defined };
+    await this.db.rpc("models_upsert", { model: this.state });
+  }
+
+  async finish(patch: ResponsePatch): Promise<void> {
+    await this.patch({ ...patch, state: "closed" });
+  }
+}
+
+/**
+ * Timeline events, written in the order they arrived. Writes are chained rather
+ * than awaited inline so a burst of `header_down` events doesn't serialise the
+ * body read behind a database round trip each, and `flush()` is the point at
+ * which the whole timeline is known to be in the database.
+ */
+class TimelineWriter {
+  private queue: HttpResponseEventData[] = [];
+  private inFlight: Promise<void> = Promise.resolve();
+
+  constructor(
+    private readonly db: WorkerConnection,
+    private readonly responseId: string,
+    private readonly workspaceId: string,
+  ) {}
+
+  push(events: HttpResponseEventData[]): void {
+    if (events.length === 0) return;
+    this.queue.push(...events);
+    this.inFlight = this.inFlight.then(() => this.drain());
+  }
+
+  private async drain(): Promise<void> {
+    if (this.queue.length === 0) return;
+    const events = this.queue;
+    this.queue = [];
+    await this.db.rpc("web_insert_http_response_events", {
+      responseId: this.responseId,
+      workspaceId: this.workspaceId,
+      events,
+    });
+  }
+
+  flush(): Promise<void> {
+    return this.inFlight;
+  }
+}
+
+/**
+ * Carry the send's cookie changes into the jar. The worker applies them as a
+ * difference against the jar as it is now (see `apply_cookie_changes` in
+ * yaak-models), so an edit made while the send was in flight survives rather
+ * than being written over by the send's stale snapshot.
+ */
+async function persistCookies(db: WorkerConnection, jar: CookieJar, cookies: Cookie[]): Promise<void> {
+  await db.rpc("web_persist_send_cookies", { cookieJarId: jar.id, before: jar.cookies, after: cookies });
+}
+
+/**
+ * The request's workspace, needed to create the response row before the worker
+ * has resolved the request (which is where a render refusal would land).
+ */
+async function workspaceIdOfRequest(db: WorkerConnection, requestId: string): Promise<string> {
+  const req = await db.rpc<{ workspaceId: string }>("web_get_http_request", { requestId });
+  return req.workspaceId;
+}
+
+function errorMessage(err: unknown): string {
+  if (err instanceof Error) return err.message;
+  return String(err);
+}
+
+function base64ToBytes(data: string): Uint8Array {
+  const bin = atob(data);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+
+function concat(chunks: Uint8Array[], total: number): Uint8Array {
+  if (chunks.length === 1) return chunks[0]!;
+  const out = new Uint8Array(total);
+  let offset = 0;
+  for (const c of chunks) {
+    out.set(c, offset);
+    offset += c.byteLength;
+  }
+  return out;
+}
diff --git a/packages/platform/src/web/server.ts b/packages/platform/src/web/server.ts
new file mode 100644
index 0000000..3c60e9e
--- /dev/null
+++ b/packages/platform/src/web/server.ts
@@ -0,0 +1,83 @@
+/**
+ * The wire to the Yaak server: where it is, and how to read what comes back.
+ *
+ * The shapes themselves are generated from `crates-server/yaak-web/src/wire.rs`
+ * into `@yaakapp-internal/web`, so the two sides cannot drift silently.
+ */
+
+import type { Frame } from "@yaakapp-internal/web";
+
+/* ------------------------------- location -------------------------------- */
+
+/**
+ * Where the tab sends.
+ *
+ * Empty means "this origin": the server can serve the app itself
+ * (`yaak-web --serve`), and then a send is a request to a path on the
+ * page's own origin — no CORS, and nothing for a self-hoster to configure.
+ *
+ * `VITE_YAAK_WEB_URL` overrides it at build time, for a deployment that keeps the
+ * two apart. Nothing else needs to: the dev server passes `/v1` through to
+ * `yaak-web` (see the client's vite config), so a dev build and a production
+ * build are both talking to their own origin, and neither has an address to
+ * learn. A tab opened from another machine therefore works unchanged.
+ */
+export function serverBaseUrl(): string {
+  const env = (import.meta as unknown as { env?: Record<string, string | undefined> }).env;
+  const configured = env?.VITE_YAAK_WEB_URL?.trim();
+  return configured ? configured.replace(/\/+$/, "") : "";
+}
+
+export function serverSendUrl(): string {
+  return `${serverBaseUrl()}/v1/http/send`;
+}
+
+let identity: Promise<string> | null = null;
+
+/** The server's location as a person reads it, since "" means "this origin". */
+function serverLocation(): string {
+  return serverBaseUrl() || globalThis.location?.origin || "this origin";
+}
+
+/**
+ * Who does the sending, for the timeline: `yaak-web 0.1.0 at http://…`.
+ * Asked of `/v1/health` once per page load; if the server can't be reached the
+ * URL alone is the answer, and the send itself will say why shortly after.
+ */
+export function serverIdentity(): Promise<string> {
+  identity ??= fetch(`${serverBaseUrl()}/v1/health`)
+    .then((res) => res.json() as Promise<{ version?: string }>)
+    .then((health) => `yaak-web ${health.version ?? ""} at ${serverLocation()}`.replace("  ", " "))
+    .catch(() => {
+      identity = null; // try again next send
+      return `Yaak server at ${serverLocation()}`;
+    });
+  return identity;
+}
+
+/**
+ * Yield frames from an NDJSON stream as they arrive. A partial trailing line is
+ * held until its newline comes; anything left when the stream ends is dropped,
+ * because a frame without its newline is a frame the server didn't finish writing.
+ */
+export async function* readFrames(stream: ReadableStream<Uint8Array>): AsyncGenerator<Frame> {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      let newline = buffer.indexOf("\n");
+      while (newline !== -1) {
+        const line = buffer.slice(0, newline);
+        buffer = buffer.slice(newline + 1);
+        if (line.trim() !== "") yield JSON.parse(line) as Frame;
+        newline = buffer.indexOf("\n");
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
diff --git a/packages/platform/src/web/storage.ts b/packages/platform/src/web/storage.ts
new file mode 100644
index 0000000..2ad3d3a
--- /dev/null
+++ b/packages/platform/src/web/storage.ts
@@ -0,0 +1,18 @@
+/**
+ * Ask the browser not to evict this origin's data under storage pressure.
+ *
+ * Without it IndexedDB — where the worker's SQLite pages live — is "best
+ * effort", and a browser clearing space can drop a user's workspaces. Granting
+ * is the browser's call; it typically says yes once a site looks installed or
+ * engaged, and often says no on localhost. This is a request, not a guarantee,
+ * and there is nothing useful to do when it declines.
+ */
+export async function requestPersistence(): Promise<boolean> {
+  try {
+    if (navigator.storage?.persist == null) return false;
+    if (await navigator.storage.persisted()) return true;
+    return await navigator.storage.persist();
+  } catch {
+    return false;
+  }
+}
diff --git a/packages/platform/src/web/worker.ts b/packages/platform/src/web/worker.ts
new file mode 100644
index 0000000..8998b54
--- /dev/null
+++ b/packages/platform/src/web/worker.ts
@@ -0,0 +1,196 @@
+/// <reference lib="webworker" />
+
+/**
+ * The process that owns the database.
+ *
+ * On the desktop that is the Rust binary: it holds SQLite, every window talks
+ * to it, and it pushes model writes to all of them. In a browser this worker
+ * plays that part. It loads the model layer compiled to wasm, opens the one
+ * database, answers each tab's commands over its port, and fans every
+ * `model_writes` out to every port — so two tabs are coherent for the same
+ * reason two desktop windows are, not because of a side channel.
+ *
+ * It is a SharedWorker, and only that: the browser hands every tab on the
+ * origin the same one, which is what makes "one database owner" true without
+ * anyone coordinating. It still takes a Web Lock before opening the database,
+ * for the one overlap the browser doesn't rule out — a tab reloading itself,
+ * whose old worker may still be letting go while the new one comes up.
+ */
+
+import { DB_LOCK_NAME, type FromWorker, type ToWorker } from "./protocol";
+
+/**
+ * The wasm is imported lazily, inside `boot()`, rather than at the top of the
+ * module. That keeps this script's own evaluation instant, so a tab's connect
+ * gets its `hello` immediately regardless of how long the model layer takes to
+ * download and compile — and the tab can therefore tell "this worker is dead"
+ * from "this worker is busy" with a short timeout.
+ */
+type Engine = typeof import("@yaakapp-internal/wasm");
+let engine: Engine | null = null;
+
+const ports = new Set<MessagePort>();
+
+/** Resolves once `boot()` has, or rejects with why it couldn't. */
+let booted: Promise<void> | null = null;
+let bootError: string | null = null;
+
+function send(port: MessagePort, message: FromWorker, transfer: Transferable[] = []): void {
+  port.postMessage(message, transfer);
+}
+
+function broadcast(message: FromWorker): void {
+  for (const port of ports) send(port, message);
+}
+
+function errorMessage(err: unknown): string {
+  if (err instanceof Error) return err.message;
+  return String(err);
+}
+
+/**
+ * How long to wait for the database lock before concluding someone else has it
+ * for good. The wait exists for one case: a tab reloading itself. Its old
+ * worker still holds the lock while it is torn down, and the new worker only
+ * needs it to let go — which takes milliseconds, not seconds. Anything longer
+ * is a live worker in another tab, and the honest answer is to say so.
+ */
+const LOCK_TIMEOUT_MS = 3000;
+
+const ALREADY_OPEN =
+  "Yaak's database is held by another worker that isn't letting go. Close Yaak's other tabs and reload.";
+
+/**
+ * Take the lock, or explain why not.
+ *
+ * Held for the life of the worker: the callback's promise never settles, so
+ * the browser keeps the lock until this worker is gone. Requested with a
+ * timeout rather than `ifAvailable`, so a dying predecessor's brief hold is
+ * waited out but a live one is reported.
+ */
+function acquireDatabaseLock(): Promise<void> {
+  // The tab checked for Web Locks before it ever connected; a worker without
+  // them would be a browser lying about its own features.
+  return new Promise<void>((resolve, reject) => {
+    navigator.locks
+      .request(DB_LOCK_NAME, { signal: AbortSignal.timeout(LOCK_TIMEOUT_MS) }, () => {
+        resolve();
+        return new Promise<void>(() => {});
+      })
+      .catch((err: unknown) => {
+        const name = (err as { name?: string } | null)?.name;
+        reject(name === "AbortError" || name === "TimeoutError" ? new Error(ALREADY_OPEN) : err);
+      });
+  });
+}
+
+/**
+ * Open the database, once, for everyone.
+ *
+ * Lock first, then load the model layer, then open — in that order, so a
+ * worker that will never own the database also never downloads and compiles
+ * the wasm for it.
+ */
+function bootOnce(): Promise<void> {
+  if (booted != null) return booted;
+
+  booted = (async () => {
+    await acquireDatabaseLock();
+    const loaded = await import("@yaakapp-internal/wasm");
+    await loaded.boot();
+    engine = loaded;
+  })();
+
+  booted.catch((err) => {
+    bootError = errorMessage(err);
+  });
+
+  return booted;
+}
+
+async function handle(port: MessagePort, message: ToWorker): Promise<void> {
+  if (message.type === "goodbye") {
+    ports.delete(port);
+    return;
+  }
+
+  // Every command waits for boot rather than the tab having to. Tabs post
+  // the moment they load; the port queues; this drains once the DB is open.
+  try {
+    await booted;
+  } catch {
+    send(port, { type: "error", id: message.id, message: bootError ?? "Database failed to open" });
+    return;
+  }
+  const { rpc, blob_get, blob_put, blob_delete, prepare_http_send } = engine!;
+
+  try {
+    switch (message.type) {
+      case "rpc": {
+        const outcome = rpc(message.cmd, message.payload, message.label) as {
+          result: unknown;
+          events: unknown[];
+        };
+        // Result first, to the caller; then the writes, to everyone including
+        // the caller. The store applies its own echo the same as any other
+        // window's, so it must arrive — and the caller's `await` resolving
+        // before its echo lands is fine, because it resolves on the same tick
+        // and the store reads on the next.
+        send(port, { type: "result", id: message.id, result: outcome.result });
+        if (outcome.events.length > 0) {
+          broadcast({ type: "event", event: "model_writes", payload: outcome.events });
+        }
+        return;
+      }
+      case "prepare_http_send": {
+        const prepared = await prepare_http_send(message.payload);
+        send(port, { type: "result", id: message.id, result: prepared });
+        return;
+      }
+      case "blob_get": {
+        const bytes = blob_get(message.blobId);
+        if (bytes == null) {
+          send(port, { type: "result", id: message.id, result: null });
+        } else {
+          // Copy into a fresh buffer we can transfer: the wasm's memory
+          // cannot leave the worker.
+          const out = new Uint8Array(bytes.byteLength);
+          out.set(bytes);
+          send(port, { type: "result", id: message.id, result: out.buffer }, [out.buffer]);
+        }
+        return;
+      }
+      case "blob_put": {
+        blob_put(message.blobId, new Uint8Array(message.bytes));
+        send(port, { type: "result", id: message.id, result: null });
+        return;
+      }
+      case "blob_delete": {
+        blob_delete(message.blobId);
+        send(port, { type: "result", id: message.id, result: null });
+        return;
+      }
+    }
+  } catch (err) {
+    send(port, { type: "error", id: message.id, message: errorMessage(err) });
+  }
+}
+
+function attach(port: MessagePort): void {
+  ports.add(port);
+  port.onmessage = (e: MessageEvent<ToWorker>) => void handle(port, e.data);
+  port.start?.();
+
+  // Proof of life, before boot: the tab is timing this.
+  send(port, { type: "hello" });
+
+  bootOnce().then(
+    () => send(port, { type: "ready" }),
+    (err) => send(port, { type: "boot_error", message: errorMessage(err) }),
+  );
+}
+
+// Each tab arrives as a connect event with its own port.
+(self as unknown as SharedWorkerGlobalScope).onconnect = (e: MessageEvent) => {
+  attach(e.ports[0]!);
+};
diff --git a/packages/platform/tsconfig.json b/packages/platform/tsconfig.json
new file mode 100644
index 0000000..6facef5
--- /dev/null
+++ b/packages/platform/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "strict": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/plugin-runtime-types/.gitignore b/packages/plugin-runtime-types/.gitignore
new file mode 100644
index 0000000..3063f07
--- /dev/null
+++ b/packages/plugin-runtime-types/.gitignore
@@ -0,0 +1,2 @@
+lib
+node_modules
diff --git a/packages/plugin-runtime-types/README.md b/packages/plugin-runtime-types/README.md
new file mode 100644
index 0000000..90bacbc
--- /dev/null
+++ b/packages/plugin-runtime-types/README.md
@@ -0,0 +1,28 @@
+# Yaak Plugin API
+
+Yaak is a desktop [API client](https://yaak.app/blog/yet-another-api-client) for
+interacting with REST, GraphQL, Server Sent Events (SSE), WebSocket, and gRPC APIs. It's
+built using Tauri, Rust, and ReactJS.
+
+Plugins can be created in TypeScript, which are executed alongside Yaak in a NodeJS
+runtime. This package contains the TypeScript type definitions required to make building
+Yaak plugins a breeze.
+
+## Quick Start
+
+The easiest way to get started is by generating a plugin with the Yaak CLI:
+
+```shell
+npx @yaakapp/cli generate
+```
+
+For more details on creating plugins, check out
+the [Quick Start Guide](https://yaak.app/docs/plugin-development/plugins-quick-start)
+
+## Installation
+
+If you prefer starting from scratch, manually install the types package:
+
+```shell
+npm install -D @yaakapp/api
+```
diff --git a/packages/plugin-runtime-types/package.json b/packages/plugin-runtime-types/package.json
new file mode 100644
index 0000000..c60a527
--- /dev/null
+++ b/packages/plugin-runtime-types/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@yaakapp/api",
+  "version": "0.9.0",
+  "keywords": [
+    "api-client",
+    "bruno-alternative",
+    "insomnia-alternative",
+    "postman-alternative"
+  ],
+  "homepage": "https://yaak.app",
+  "bugs": {
+    "url": "https://feedback.yaak.app"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak"
+  },
+  "files": [
+    "lib/**/*"
+  ],
+  "main": "lib/index.js",
+  "typings": "./lib/index.d.ts",
+  "scripts": {
+    "bootstrap": "npm run build",
+    "build": "run-s build:copy-types build:tsc",
+    "build:tsc": "tsc",
+    "build:copy-types": "run-p build:copy-types:*",
+    "build:copy-types:root": "cpy --flat ../../crates/yaak-plugins/bindings/*.ts ./src/bindings",
+    "build:copy-types:next": "cpy --flat ../../crates/yaak-plugins/bindings/serde_json/*.ts ./src/bindings/serde_json",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@types/node": "^24.0.13"
+  },
+  "devDependencies": {
+    "cpy-cli": "^7.0.0"
+  }
+}
diff --git a/packages/plugin-runtime-types/src/bindings/gen_api.ts b/packages/plugin-runtime-types/src/bindings/gen_api.ts
new file mode 100644
index 0000000..9dcbb82
--- /dev/null
+++ b/packages/plugin-runtime-types/src/bindings/gen_api.ts
@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { PluginVersion } from "./gen_search";
+
+export type PluginNameVersion = { name: string, version: string, };
+
+export type PluginSearchResponse = { plugins: Array<PluginVersion>, };
+
+export type PluginUpdatesResponse = { plugins: Array<PluginNameVersion>, };
diff --git a/packages/plugin-runtime-types/src/bindings/gen_events.ts b/packages/plugin-runtime-types/src/bindings/gen_events.ts
new file mode 100644
index 0000000..ae56422
--- /dev/null
+++ b/packages/plugin-runtime-types/src/bindings/gen_events.ts
@@ -0,0 +1,663 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { AnyModel, Environment, Folder, GrpcRequest, HttpRequest, HttpResponse, WebsocketRequest, Workspace } from "./gen_models";
+import type { JsonValue } from "./serde_json/JsonValue";
+
+export type BootRequest = { dir: string, watch: boolean, };
+
+export type CallFolderActionArgs = { folder: Folder, };
+
+export type CallFolderActionRequest = { index: number, pluginRefId: string, args: CallFolderActionArgs, };
+
+export type CallGrpcRequestActionArgs = { grpcRequest: GrpcRequest, protoFiles: Array<string>, };
+
+export type CallGrpcRequestActionRequest = { index: number, pluginRefId: string, args: CallGrpcRequestActionArgs, };
+
+export type CallHttpAuthenticationActionArgs = { contextId: string, values: { [key in string]?: JsonPrimitive }, };
+
+export type CallHttpAuthenticationActionRequest = { index: number, pluginRefId: string, args: CallHttpAuthenticationActionArgs, };
+
+export type CallHttpAuthenticationRequest = { contextId: string, values: { [key in string]?: JsonPrimitive }, method: string, url: string, headers: Array<HttpHeader>, body: string | null, };
+
+export type CallHttpAuthenticationResponse = { 
+/**
+ * HTTP headers to add to the request. Existing headers will be replaced, while
+ * new headers will be added.
+ */
+setHeaders?: Array<HttpHeader>, 
+/**
+ * Query parameters to add to the request. Existing params will be replaced, while
+ * new params will be added.
+ */
+setQueryParameters?: Array<HttpHeader>, };
+
+export type CallHttpRequestActionArgs = { httpRequest: HttpRequest, };
+
+export type CallHttpRequestActionRequest = { index: number, pluginRefId: string, args: CallHttpRequestActionArgs, };
+
+export type CallTemplateFunctionArgs = { purpose: RenderPurpose, values: { [key in string]?: JsonPrimitive }, };
+
+export type CallTemplateFunctionRequest = { name: string, args: CallTemplateFunctionArgs, };
+
+export type CallTemplateFunctionResponse = { value: string | null, error?: string, };
+
+export type CallWebsocketRequestActionArgs = { websocketRequest: WebsocketRequest, };
+
+export type CallWebsocketRequestActionRequest = { index: number, pluginRefId: string, args: CallWebsocketRequestActionArgs, };
+
+export type CallWorkspaceActionArgs = { workspace: Workspace, };
+
+export type CallWorkspaceActionRequest = { index: number, pluginRefId: string, args: CallWorkspaceActionArgs, };
+
+export type CloseWindowRequest = { label: string, };
+
+export type Color = "primary" | "secondary" | "info" | "success" | "notice" | "warning" | "danger";
+
+export type CompletionOptionType = "constant" | "variable";
+
+export type Content = { "type": "text", content: string, } | { "type": "markdown", content: string, };
+
+export type CopyTextRequest = { text: string, };
+
+export type DeleteKeyValueRequest = { key: string, };
+
+export type DeleteKeyValueResponse = { deleted: boolean, };
+
+export type DeleteModelRequest = { model: string, id: string, };
+
+export type DeleteModelResponse = { model: AnyModel, };
+
+export type DialogSize = "sm" | "md" | "lg" | "full" | "dynamic";
+
+export type EditorLanguage = "text" | "javascript" | "json" | "html" | "xml" | "graphql" | "markdown" | "c" | "clojure" | "csharp" | "go" | "http" | "java" | "kotlin" | "objective_c" | "ocaml" | "php" | "powershell" | "python" | "r" | "ruby" | "shell" | "swift";
+
+export type EmptyPayload = {};
+
+export type ErrorResponse = { error: string, };
+
+export type ExportHttpRequestRequest = { httpRequest: HttpRequest, };
+
+export type ExportHttpRequestResponse = { content: string, };
+
+export type FileFilter = { name: string, 
+/**
+ * File extensions to require
+ */
+extensions: Array<string>, };
+
+export type FilterRequest = { content: string, filter: string, };
+
+export type FilterResponse = { content: string, error?: string, };
+
+export type FindHttpResponsesRequest = { requestId: string, limit?: number, };
+
+export type FindHttpResponsesResponse = { httpResponses: Array<HttpResponse>, };
+
+export type FolderAction = { label: string, icon?: Icon, };
+
+export type FormInput = { "type": "text" } & FormInputText | { "type": "editor" } & FormInputEditor | { "type": "select" } & FormInputSelect | { "type": "checkbox" } & FormInputCheckbox | { "type": "file" } & FormInputFile | { "type": "http_request" } & FormInputHttpRequest | { "type": "accordion" } & FormInputAccordion | { "type": "h_stack" } & FormInputHStack | { "type": "banner" } & FormInputBanner | { "type": "markdown" } & FormInputMarkdown | { "type": "key_value" } & FormInputKeyValue;
+
+export type FormInputAccordion = { label: string, inputs?: Array<FormInput>, hidden?: boolean, };
+
+export type FormInputBanner = { inputs?: Array<FormInput>, hidden?: boolean, color?: Color, };
+
+export type FormInputBase = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputCheckbox = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputEditor = { 
+/**
+ * Placeholder for the text input
+ */
+placeholder?: string | null, 
+/**
+ * Don't show the editor gutter (line numbers, folds, etc.)
+ */
+hideGutter?: boolean, 
+/**
+ * Language for syntax highlighting
+ */
+language?: EditorLanguage, readOnly?: boolean, 
+/**
+ * Fixed number of visible rows
+ */
+rows?: number, completionOptions?: Array<GenericCompletionOption>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputFile = { 
+/**
+ * The title of the file selection window
+ */
+title: string, 
+/**
+ * Allow selecting multiple files
+ */
+multiple?: boolean, directory?: boolean, defaultPath?: string, filters?: Array<FileFilter>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputHStack = { inputs?: Array<FormInput>, hidden?: boolean, };
+
+export type FormInputHttpRequest = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputKeyValue = { 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputMarkdown = { content: string, hidden?: boolean, };
+
+export type FormInputSelect = { 
+/**
+ * The options that will be available in the select input
+ */
+options: Array<FormInputSelectOption>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type FormInputSelectOption = { label: string, value: string, };
+
+export type FormInputText = { 
+/**
+ * Placeholder for the text input
+ */
+placeholder?: string | null, 
+/**
+ * Placeholder for the text input
+ */
+password?: boolean, 
+/**
+ * Whether to allow newlines in the input, like a <textarea/>
+ */
+multiLine?: boolean, completionOptions?: Array<GenericCompletionOption>, 
+/**
+ * The name of the input. The value will be stored at this object attribute in the resulting data
+ */
+name: string, 
+/**
+ * Whether this input is visible for the given configuration. Use this to
+ * make branching forms.
+ */
+hidden?: boolean, 
+/**
+ * Whether the user must fill in the argument
+ */
+optional?: boolean, 
+/**
+ * The label of the input
+ */
+label?: string, 
+/**
+ * Visually hide the label of the input
+ */
+hideLabel?: boolean, 
+/**
+ * The default value
+ */
+defaultValue?: string, disabled?: boolean, 
+/**
+ * Longer description of the input, likely shown in a tooltip
+ */
+description?: string, };
+
+export type GenericCompletionOption = { label: string, detail?: string, info?: string, type?: CompletionOptionType, boost?: number, };
+
+export type GetCookieValueRequest = { name: string, domain?: string | null, };
+
+export type GetCookieValueResponse = { value: string | null, };
+
+export type GetFolderActionsResponse = { actions: Array<FolderAction>, pluginRefId: string, };
+
+export type GetGrpcRequestActionsResponse = { actions: Array<GrpcRequestAction>, pluginRefId: string, };
+
+export type GetHttpAuthenticationConfigRequest = { contextId: string, values: { [key in string]?: JsonPrimitive }, };
+
+export type GetHttpAuthenticationConfigResponse = { args: Array<FormInput>, pluginRefId: string, actions?: Array<HttpAuthenticationAction>, };
+
+export type GetHttpAuthenticationSummaryResponse = { name: string, label: string, shortLabel: string, };
+
+export type GetHttpRequestActionsResponse = { actions: Array<HttpRequestAction>, pluginRefId: string, };
+
+export type GetHttpRequestByIdRequest = { id: string, };
+
+export type GetHttpRequestByIdResponse = { httpRequest: HttpRequest | null, };
+
+/**
+ * Ask what a response's body is, before deciding whether to pull it.
+ *
+ * Bodies are addressed by response id and never by path, so where the host
+ * keeps the bytes is its own business.
+ */
+export type GetHttpResponseBodyInfoRequest = { responseId: string, };
+
+export type GetHttpResponseBodyInfoResponse = { 
+/**
+ * How many bytes are stored right now, which is not necessarily what the
+ * `Content-Length` header claimed. Zero when the response has no body.
+ */
+contentLength: number, 
+/**
+ * Whether the response has finished arriving. While it has not, the body
+ * keeps growing past `content_length`, and a reader that wants all of it
+ * asks again.
+ */
+complete: boolean, 
+/**
+ * The response's `Content-Type` header, verbatim, so the reader can pick a
+ * charset.
+ */
+contentType?: string | null, };
+
+export type GetKeyValueRequest = { key: string, };
+
+export type GetKeyValueResponse = { value?: string, };
+
+export type GetTemplateFunctionConfigRequest = { contextId: string, name: string, values: { [key in string]?: JsonPrimitive }, };
+
+export type GetTemplateFunctionConfigResponse = { function: TemplateFunction, pluginRefId: string, };
+
+export type GetTemplateFunctionSummaryResponse = { functions: Array<TemplateFunction>, pluginRefId: string, };
+
+export type GetThemesRequest = Record<string, never>;
+
+export type GetThemesResponse = { themes: Array<Theme>, };
+
+export type GetWebsocketRequestActionsResponse = { actions: Array<WebsocketRequestAction>, pluginRefId: string, };
+
+export type GetWorkspaceActionsResponse = { actions: Array<WorkspaceAction>, pluginRefId: string, };
+
+export type GrpcRequestAction = { label: string, icon?: Icon, };
+
+export type HttpAuthenticationAction = { label: string, icon?: Icon, };
+
+export type HttpHeader = { name: string, value: string, };
+
+export type HttpRequestAction = { label: string, icon?: Icon, };
+
+export type Icon = "alert_triangle" | "check" | "check_circle" | "chevron_down" | "copy" | "info" | "pin" | "search" | "trash" | "_unknown";
+
+export type ImportRequest = { content: string, };
+
+export type ImportResources = { workspaces: Array<Workspace>, environments: Array<Environment>, folders: Array<Folder>, httpRequests: Array<HttpRequest>, grpcRequests: Array<GrpcRequest>, websocketRequests: Array<WebsocketRequest>, };
+
+export type ImportResponse = { 
+/**
+ * Display name of the importer that recognized the input.
+ */
+importer: string, resources: ImportResources, 
+/**
+ * Identifies the same source element across re-parses, keyed by the IDs in `resources`.
+ *
+ * Must come from the document, never from anything the user can rename in Yaak. Only set
+ * for formats that carry their own identifiers; the host derives the rest.
+ */
+sourceKeys?: { [key in string]?: string }, };
+
+export type InternalEvent = { id: string, pluginRefId: string, pluginName: string, replyId: string | null, context: PluginContext, payload: InternalEventPayload, };
+
+export type InternalEventPayload = { "type": "boot_request" } & BootRequest | { "type": "boot_response" } | { "type": "reload_response" } & ReloadResponse | { "type": "terminate_request" } | { "type": "terminate_response" } | { "type": "import_request" } & ImportRequest | { "type": "import_response" } & ImportResponse | { "type": "filter_request" } & FilterRequest | { "type": "filter_response" } & FilterResponse | { "type": "export_http_request_request" } & ExportHttpRequestRequest | { "type": "export_http_request_response" } & ExportHttpRequestResponse | { "type": "send_http_request_request" } & SendHttpRequestRequest | { "type": "send_http_request_response" } & SendHttpRequestResponse | { "type": "list_cookie_names_request" } & ListCookieNamesRequest | { "type": "list_cookie_names_response" } & ListCookieNamesResponse | { "type": "get_cookie_value_request" } & GetCookieValueRequest | { "type": "get_cookie_value_response" } & GetCookieValueResponse | { "type": "get_http_request_actions_request" } & EmptyPayload | { "type": "get_http_request_actions_response" } & GetHttpRequestActionsResponse | { "type": "call_http_request_action_request" } & CallHttpRequestActionRequest | { "type": "get_websocket_request_actions_request" } & EmptyPayload | { "type": "get_websocket_request_actions_response" } & GetWebsocketRequestActionsResponse | { "type": "call_websocket_request_action_request" } & CallWebsocketRequestActionRequest | { "type": "get_workspace_actions_request" } & EmptyPayload | { "type": "get_workspace_actions_response" } & GetWorkspaceActionsResponse | { "type": "call_workspace_action_request" } & CallWorkspaceActionRequest | { "type": "get_folder_actions_request" } & EmptyPayload | { "type": "get_folder_actions_response" } & GetFolderActionsResponse | { "type": "call_folder_action_request" } & CallFolderActionRequest | { "type": "get_grpc_request_actions_request" } & EmptyPayload | { "type": "get_grpc_request_actions_response" } & GetGrpcRequestActionsResponse | { "type": "call_grpc_request_action_request" } & CallGrpcRequestActionRequest | { "type": "get_template_function_summary_request" } & EmptyPayload | { "type": "get_template_function_summary_response" } & GetTemplateFunctionSummaryResponse | { "type": "get_template_function_config_request" } & GetTemplateFunctionConfigRequest | { "type": "get_template_function_config_response" } & GetTemplateFunctionConfigResponse | { "type": "call_template_function_request" } & CallTemplateFunctionRequest | { "type": "call_template_function_response" } & CallTemplateFunctionResponse | { "type": "get_http_authentication_summary_request" } & EmptyPayload | { "type": "get_http_authentication_summary_response" } & GetHttpAuthenticationSummaryResponse | { "type": "get_http_authentication_config_request" } & GetHttpAuthenticationConfigRequest | { "type": "get_http_authentication_config_response" } & GetHttpAuthenticationConfigResponse | { "type": "call_http_authentication_request" } & CallHttpAuthenticationRequest | { "type": "call_http_authentication_response" } & CallHttpAuthenticationResponse | { "type": "call_http_authentication_action_request" } & CallHttpAuthenticationActionRequest | { "type": "call_http_authentication_action_response" } & EmptyPayload | { "type": "copy_text_request" } & CopyTextRequest | { "type": "copy_text_response" } & EmptyPayload | { "type": "render_http_request_request" } & RenderHttpRequestRequest | { "type": "render_http_request_response" } & RenderHttpRequestResponse | { "type": "render_grpc_request_request" } & RenderGrpcRequestRequest | { "type": "render_grpc_request_response" } & RenderGrpcRequestResponse | { "type": "template_render_request" } & TemplateRenderRequest | { "type": "template_render_response" } & TemplateRenderResponse | { "type": "get_key_value_request" } & GetKeyValueRequest | { "type": "get_key_value_response" } & GetKeyValueResponse | { "type": "set_key_value_request" } & SetKeyValueRequest | { "type": "set_key_value_response" } & SetKeyValueResponse | { "type": "delete_key_value_request" } & DeleteKeyValueRequest | { "type": "delete_key_value_response" } & DeleteKeyValueResponse | { "type": "open_window_request" } & OpenWindowRequest | { "type": "window_navigate_event" } & WindowNavigateEvent | { "type": "window_close_event" } | { "type": "close_window_request" } & CloseWindowRequest | { "type": "open_external_url_request" } & OpenExternalUrlRequest | { "type": "open_external_url_response" } & EmptyPayload | { "type": "show_toast_request" } & ShowToastRequest | { "type": "show_toast_response" } & EmptyPayload | { "type": "prompt_text_request" } & PromptTextRequest | { "type": "prompt_text_response" } & PromptTextResponse | { "type": "prompt_form_request" } & PromptFormRequest | { "type": "prompt_form_response" } & PromptFormResponse | { "type": "window_info_request" } & WindowInfoRequest | { "type": "window_info_response" } & WindowInfoResponse | { "type": "list_open_workspaces_request" } & ListOpenWorkspacesRequest | { "type": "list_open_workspaces_response" } & ListOpenWorkspacesResponse | { "type": "get_http_request_by_id_request" } & GetHttpRequestByIdRequest | { "type": "get_http_request_by_id_response" } & GetHttpRequestByIdResponse | { "type": "find_http_responses_request" } & FindHttpResponsesRequest | { "type": "find_http_responses_response" } & FindHttpResponsesResponse | { "type": "get_http_response_body_info_request" } & GetHttpResponseBodyInfoRequest | { "type": "get_http_response_body_info_response" } & GetHttpResponseBodyInfoResponse | { "type": "read_http_response_body_chunk_request" } & ReadHttpResponseBodyChunkRequest | { "type": "read_http_response_body_chunk_response" } & ReadHttpResponseBodyChunkResponse | { "type": "list_http_requests_request" } & ListHttpRequestsRequest | { "type": "list_http_requests_response" } & ListHttpRequestsResponse | { "type": "list_folders_request" } & ListFoldersRequest | { "type": "list_folders_response" } & ListFoldersResponse | { "type": "upsert_model_request" } & UpsertModelRequest | { "type": "upsert_model_response" } & UpsertModelResponse | { "type": "delete_model_request" } & DeleteModelRequest | { "type": "delete_model_response" } & DeleteModelResponse | { "type": "get_themes_request" } & GetThemesRequest | { "type": "get_themes_response" } & GetThemesResponse | { "type": "empty_response" } & EmptyPayload | { "type": "error_response" } & ErrorResponse;
+
+export type JsonPrimitive = string | number | boolean | null;
+
+export type ListCookieNamesRequest = {};
+
+export type ListCookieNamesResponse = { names: Array<string>, };
+
+export type ListFoldersRequest = {};
+
+export type ListFoldersResponse = { folders: Array<Folder>, };
+
+export type ListHttpRequestsRequest = { folderId?: string, };
+
+export type ListHttpRequestsResponse = { httpRequests: Array<HttpRequest>, };
+
+export type ListOpenWorkspacesRequest = Record<string, never>;
+
+export type ListOpenWorkspacesResponse = { workspaces: Array<WorkspaceInfo>, };
+
+export type OpenExternalUrlRequest = { url: string, };
+
+export type OpenWindowRequest = { url: string, 
+/**
+ * Label for the window. If not provided, a random one will be generated.
+ */
+label: string, title?: string, size?: WindowSize, dataDirKey?: string, };
+
+export type PluginContext = { id: string, label: string | null, workspaceId: string | null, };
+
+export type PromptFormRequest = { id: string, title: string, description?: string, inputs: Array<FormInput>, confirmText?: string, cancelText?: string, size?: DialogSize, };
+
+export type PromptFormResponse = { values: { [key in string]?: JsonPrimitive } | null, done?: boolean, };
+
+export type PromptTextRequest = { id: string, title: string, label: string, description?: string, defaultValue?: string, placeholder?: string, 
+/**
+ * Text to add to the confirmation button
+ */
+confirmText?: string, password?: boolean, 
+/**
+ * Text to add to the cancel button
+ */
+cancelText?: string, 
+/**
+ * Require the user to enter a non-empty value
+ */
+required?: boolean, };
+
+export type PromptTextResponse = { value: string | null, };
+
+/**
+ * Pull one window of a response body.
+ *
+ * Reads are idempotent: the bytes live in durable storage, so the same window
+ * can be asked for as many times as the plugin likes.
+ */
+export type ReadHttpResponseBodyChunkRequest = { responseId: string, offset: number, length: number, };
+
+export type ReadHttpResponseBodyChunkResponse = { 
+/**
+ * Base64, because the desktop transport is a WebSocket that only sends
+ * text frames today. A host that can carry binary sends the bytes as they
+ * are and fills this in from them.
+ */
+data: string, 
+/**
+ * Bytes decoded from `data`. Short of the requested length means the body
+ * ended here.
+ */
+length: number, };
+
+export type ReloadResponse = { silent: boolean, };
+
+export type RenderGrpcRequestRequest = { grpcRequest: GrpcRequest, purpose: RenderPurpose, };
+
+export type RenderGrpcRequestResponse = { grpcRequest: GrpcRequest, };
+
+export type RenderHttpRequestRequest = { httpRequest: HttpRequest, purpose: RenderPurpose, };
+
+export type RenderHttpRequestResponse = { httpRequest: HttpRequest, };
+
+export type RenderPurpose = "send" | "preview";
+
+export type SendHttpRequestRequest = { httpRequest: Partial<HttpRequest>,
+/**
+ * Override the environment for this send without changing the active selection.
+ * When omitted, use the host's active environment.
+ */
+environmentId?: string, };
+
+export type SendHttpRequestResponse = { httpResponse: HttpResponse, 
+/**
+ * The body, base64, when the send saved nothing.
+ *
+ * A request with no id behind it produces a response the model store never
+ * sees, so it cannot be read back by id later the way a saved one can.
+ * This is the only copy of it. `None` means the body was stored and should
+ * be read with `read_http_response_body_chunk_request`.
+ */
+body?: string | null, };
+
+export type SetKeyValueRequest = { key: string, value: string, };
+
+export type SetKeyValueResponse = {};
+
+export type ShowToastRequest = { message: string, color?: Color, icon?: Icon, timeout?: number, };
+
+export type TemplateFunction = { name: string, previewType?: TemplateFunctionPreviewType, description?: string, 
+/**
+ * Also support alternative names. This is useful for not breaking existing
+ * tags when changing the `name` property
+ */
+aliases?: Array<string>, args: Array<TemplateFunctionArg>, 
+/**
+ * A list of arg names to show in the inline preview. If not provided, none will be shown (for privacy reasons).
+ */
+previewArgs?: Array<string>, };
+
+/**
+ * Similar to FormInput, but contains
+ */
+export type TemplateFunctionArg = FormInput;
+
+export type TemplateFunctionPreviewType = "live" | "click" | "none";
+
+export type TemplateRenderRequest = { data: JsonValue, purpose: RenderPurpose, };
+
+export type TemplateRenderResponse = { data: JsonValue, };
+
+export type Theme = { 
+/**
+ * How the theme is identified. This should never be changed
+ */
+id: string, 
+/**
+ * The friendly name of the theme to be displayed to the user
+ */
+label: string, 
+/**
+ * Whether the theme will be used for dark or light appearance
+ */
+dark: boolean, 
+/**
+ * The default top-level colors for the theme
+ */
+base: ThemeComponentColors, 
+/**
+ * Optionally override theme for individual UI components for more control
+ */
+components?: ThemeComponents, };
+
+export type ThemeComponentColors = { surface?: string, surfaceHighlight?: string, surfaceActive?: string, text?: string, textSubtle?: string, textSubtlest?: string, border?: string, borderSubtle?: string, borderFocus?: string, shadow?: string, backdrop?: string, selection?: string, primary?: string, secondary?: string, info?: string, success?: string, notice?: string, warning?: string, danger?: string, };
+
+export type ThemeComponents = { dialog?: ThemeComponentColors, menu?: ThemeComponentColors, toast?: ThemeComponentColors, sidebar?: ThemeComponentColors, responsePane?: ThemeComponentColors, appHeader?: ThemeComponentColors, button?: ThemeComponentColors, banner?: ThemeComponentColors, templateTag?: ThemeComponentColors, urlBar?: ThemeComponentColors, editor?: ThemeComponentColors, input?: ThemeComponentColors, };
+
+export type UpsertModelRequest = { model: AnyModel, };
+
+export type UpsertModelResponse = { model: AnyModel, };
+
+export type WebsocketRequestAction = { label: string, icon?: Icon, };
+
+export type WindowInfoRequest = { label: string, };
+
+export type WindowInfoResponse = { requestId: string | null, environmentId: string | null, workspaceId: string | null, label: string, };
+
+export type WindowNavigateEvent = { url: string, };
+
+export type WindowSize = { width: number, height: number, };
+
+export type WorkspaceAction = { label: string, icon?: Icon, };
+
+export type WorkspaceInfo = { id: string, name: string, };
diff --git a/packages/plugin-runtime-types/src/bindings/gen_models.ts b/packages/plugin-runtime-types/src/bindings/gen_models.ts
new file mode 100644
index 0000000..c03e259
--- /dev/null
+++ b/packages/plugin-runtime-types/src/bindings/gen_models.ts
@@ -0,0 +1,514 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type AnyModel =
+  | CookieJar
+  | Environment
+  | Folder
+  | GraphQlIntrospection
+  | GrpcConnection
+  | GrpcEvent
+  | GrpcRequest
+  | HttpRequest
+  | HttpResponse
+  | HttpResponseEvent
+  | ImportSource
+  | KeyValue
+  | Plugin
+  | Settings
+  | SyncState
+  | WebsocketConnection
+  | WebsocketEvent
+  | WebsocketRequest
+  | Workspace
+  | WorkspaceMeta;
+
+export type ClientCertificate = {
+  host: string;
+  port: number | null;
+  crtFile: string | null;
+  keyFile: string | null;
+  pfxFile: string | null;
+  passphrase: string | null;
+  enabled?: boolean;
+};
+
+export type Cookie = {
+  name: string;
+  value: string;
+  domain: CookieDomain;
+  expires: CookieExpires;
+  path: string;
+  secure: boolean;
+  httpOnly: boolean;
+  sameSite: CookieSameSite | null;
+};
+
+export type CookieDomain = { HostOnly: string } | { Suffix: string } | "NotPresent" | "Empty";
+
+export type CookieExpires = { AtUtc: string } | "SessionEnd";
+
+export type CookieJar = {
+  model: "cookie_jar";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  cookies: Array<Cookie>;
+  name: string;
+};
+
+export type CookieSameSite = "Strict" | "Lax" | "None";
+
+export type DnsOverride = {
+  hostname: string;
+  ipv4: Array<string>;
+  ipv6: Array<string>;
+  enabled?: boolean;
+};
+
+export type EditorKeymap = "default" | "vim" | "vscode" | "emacs";
+
+export type EncryptedKey = { encryptedKey: string };
+
+export type Environment = {
+  model: "environment";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  name: string;
+  public: boolean;
+  parentModel: string;
+  parentId: string | null;
+  /**
+   * Variables defined in this environment scope.
+   * Child environments override parent variables by name.
+   */
+  variables: Array<EnvironmentVariable>;
+  color: string | null;
+  sortPriority: number;
+};
+
+export type EnvironmentVariable = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type Folder = {
+  model: "folder";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  sortPriority: number;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type GraphQlIntrospection = {
+  model: "graphql_introspection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  content: string | null;
+};
+
+export type GrpcConnection = {
+  model: "grpc_connection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  elapsed: number;
+  error: string | null;
+  method: string;
+  service: string;
+  status: number;
+  state: GrpcConnectionState;
+  trailers: { [key in string]?: string };
+  url: string;
+};
+
+export type GrpcConnectionState = "initialized" | "connected" | "closed";
+
+export type GrpcEvent = {
+  model: "grpc_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  connectionId: string;
+  content: string;
+  error: string | null;
+  eventType: GrpcEventType;
+  metadata: { [key in string]?: string };
+  status: number | null;
+};
+
+export type GrpcEventType =
+  | "info"
+  | "error"
+  | "client_message"
+  | "server_message"
+  | "connection_start"
+  | "connection_end";
+
+export type GrpcRequest = {
+  model: "grpc_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authenticationType: string | null;
+  authentication: Record<string, any>;
+  description: string;
+  message: string;
+  metadata: Array<HttpRequestHeader>;
+  method: string | null;
+  name: string;
+  service: string | null;
+  sortPriority: number;
+  /**
+   * Server URL (http for plaintext or https for secure)
+   */
+  url: string;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type HttpRequest = {
+  model: "http_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  body: Record<string, any>;
+  bodyType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  method: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingFollowRedirects: InheritedBoolSetting;
+  settingRequestTimeout: InheritedIntSetting;
+  settingHttpVersion: InheritedHttpVersionSetting;
+};
+
+export type HttpRequestHeader = { enabled?: boolean; name: string; value: string; id?: string };
+
+export type HttpResponse = {
+  model: "http_response";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  contentLength: number | null;
+  contentLengthCompressed: number | null;
+  elapsed: number;
+  elapsedHeaders: number;
+  elapsedDns: number;
+  error: string | null;
+  headers: Array<HttpResponseHeader>;
+  remoteAddr: string | null;
+  requestContentLength: number | null;
+  requestHeaders: Array<HttpResponseHeader>;
+  status: number;
+  statusReason: string | null;
+  state: HttpResponseState;
+  url: string;
+  version: string | null;
+};
+
+export type HttpResponseEvent = {
+  model: "http_response_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  responseId: string;
+  event: HttpResponseEventData;
+};
+
+/**
+ * Serializable representation of HTTP response events for DB storage.
+ * This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
+ * The `From` impl is in yaak-http to avoid circular dependencies.
+ */
+export type HttpResponseEventData =
+  | {
+      type: "setting";
+      name: string;
+      value: string;
+      source_model?: string;
+      source_id?: string;
+      source_name?: string;
+    }
+  | { type: "info"; message: string }
+  | {
+      type: "redirect";
+      url: string;
+      status: number;
+      behavior: string;
+      dropped_body: boolean;
+      dropped_headers: Array<string>;
+    }
+  | {
+      type: "send_url";
+      method: string;
+      scheme: string;
+      username: string;
+      password: string;
+      host: string;
+      port: number;
+      path: string;
+      query: string;
+      fragment: string;
+    }
+  | { type: "receive_url"; version: string; status: string }
+  | { type: "header_up"; name: string; value: string }
+  | { type: "header_down"; name: string; value: string }
+  | { type: "chunk_sent"; bytes: number }
+  | { type: "chunk_received"; bytes: number }
+  | {
+      type: "dns_resolved";
+      hostname: string;
+      addresses: Array<string>;
+      duration: bigint;
+      overridden: boolean;
+    };
+
+export type HttpResponseHeader = { name: string; value: string };
+
+export type HttpResponseState = "initialized" | "connected" | "closed";
+
+export type HttpUrlParameter = {
+  enabled?: boolean;
+  /**
+   * Colon-prefixed parameters are treated as path parameters if they match, like `/users/:id`
+   * Other entries are appended as query parameters
+   */
+  name: string;
+  value: string;
+  id?: string;
+};
+
+export type HttpVersion = "auto" | "http1" | "http2";
+
+export type ImportSource = {
+  model: "import_source";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  importer: string;
+  origin: string;
+  originLabel: string;
+  lastImportedAt: string;
+};
+
+export type InheritedBoolSetting = { enabled?: boolean; value: boolean };
+
+export type InheritedHttpVersionSetting = { enabled?: boolean; value: HttpVersion };
+
+export type InheritedIntSetting = { enabled?: boolean; value: number };
+
+export type KeyValue = {
+  model: "key_value";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  key: string;
+  namespace: string;
+  value: string;
+};
+
+export type Plugin = {
+  model: "plugin";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  checkedAt: string | null;
+  directory: string;
+  enabled: boolean;
+  url: string | null;
+  source: PluginSource;
+};
+
+export type PluginSource = "bundled" | "filesystem" | "registry";
+
+export type ProxySetting =
+  | {
+      type: "enabled";
+      http: string;
+      https: string;
+      auth: ProxySettingAuth | null;
+      bypass: string;
+      disabled: boolean;
+    }
+  | { type: "disabled" };
+
+export type ProxySettingAuth = { user: string; password: string };
+
+export type Settings = {
+  model: "settings";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  appearance: string;
+  clientCertificates: Array<ClientCertificate>;
+  coloredMethods: boolean;
+  editorFont: string | null;
+  editorFontSize: number;
+  editorKeymap: EditorKeymap;
+  editorSoftWrap: boolean;
+  hideWindowControls: boolean;
+  useNativeTitlebar: boolean;
+  interfaceFont: string | null;
+  interfaceFontSize: number;
+  interfaceScale: number;
+  openWorkspaceNewWindow: boolean | null;
+  proxy: ProxySetting | null;
+  themeDark: string;
+  themeLight: string;
+  updateChannel: string;
+  hideLicenseBadge: boolean;
+  promptFeedback: boolean;
+  autoupdate: boolean;
+  autoDownloadUpdates: boolean;
+  checkNotifications: boolean;
+  hotkeys: { [key in string]?: Array<string> };
+};
+
+export type SyncState = {
+  model: "sync_state";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  flushedAt: string;
+  modelId: string;
+  checksum: string;
+  relPath: string;
+  syncDir: string;
+};
+
+export type WebsocketConnection = {
+  model: "websocket_connection";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  elapsed: number;
+  error: string | null;
+  headers: Array<HttpResponseHeader>;
+  state: WebsocketConnectionState;
+  status: number;
+  url: string;
+};
+
+export type WebsocketConnectionState = "initialized" | "connected" | "closing" | "closed";
+
+export type WebsocketEvent = {
+  model: "websocket_event";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  requestId: string;
+  connectionId: string;
+  isServer: boolean;
+  message: Array<number>;
+  messageType: WebsocketEventType;
+};
+
+export type WebsocketEventType =
+  | "binary"
+  | "close"
+  | "error"
+  | "frame"
+  | "open"
+  | "ping"
+  | "pong"
+  | "text";
+
+export type WebsocketRequest = {
+  model: "websocket_request";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  workspaceId: string;
+  folderId: string | null;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  message: string;
+  name: string;
+  sortPriority: number;
+  url: string;
+  /**
+   * URL parameters used for both path placeholders (`:id`) and query string entries.
+   */
+  urlParameters: Array<HttpUrlParameter>;
+  settingSendCookies: InheritedBoolSetting;
+  settingStoreCookies: InheritedBoolSetting;
+  settingValidateCertificates: InheritedBoolSetting;
+  settingRequestMessageSize: InheritedIntSetting;
+};
+
+export type Workspace = {
+  model: "workspace";
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  authentication: Record<string, any>;
+  authenticationType: string | null;
+  description: string;
+  headers: Array<HttpRequestHeader>;
+  name: string;
+  encryptionKeyChallenge: string | null;
+  settingValidateCertificates: boolean;
+  settingFollowRedirects: boolean;
+  settingRequestTimeout: number;
+  settingRequestMessageSize: number;
+  settingDnsOverrides: Array<DnsOverride>;
+  settingSendCookies: boolean;
+  settingStoreCookies: boolean;
+  settingHttpVersion: HttpVersion;
+};
+
+export type WorkspaceMeta = {
+  model: "workspace_meta";
+  id: string;
+  workspaceId: string;
+  createdAt: string;
+  updatedAt: string;
+  encryptionKey: EncryptedKey | null;
+  settingSyncDir: string | null;
+};
diff --git a/packages/plugin-runtime-types/src/bindings/gen_search.ts b/packages/plugin-runtime-types/src/bindings/gen_search.ts
new file mode 100644
index 0000000..dd3c1ad
--- /dev/null
+++ b/packages/plugin-runtime-types/src/bindings/gen_search.ts
@@ -0,0 +1,5 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type PluginMetadata = { version: string, name: string, displayName: string, description: string | null, homepageUrl: string | null, repositoryUrl: string | null, };
+
+export type PluginVersion = { id: string, version: string, url: string, description: string | null, name: string, displayName: string, homepageUrl: string | null, repositoryUrl: string | null, checksum: string, readme: string | null, yanked: boolean, };
diff --git a/packages/plugin-runtime-types/src/bindings/serde_json/JsonValue.ts b/packages/plugin-runtime-types/src/bindings/serde_json/JsonValue.ts
new file mode 100644
index 0000000..3ad5da8
--- /dev/null
+++ b/packages/plugin-runtime-types/src/bindings/serde_json/JsonValue.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type JsonValue = number | string | boolean | Array<JsonValue> | { [key in string]?: JsonValue } | null;
diff --git a/packages/plugin-runtime-types/src/helpers.ts b/packages/plugin-runtime-types/src/helpers.ts
new file mode 100644
index 0000000..26cc642
--- /dev/null
+++ b/packages/plugin-runtime-types/src/helpers.ts
@@ -0,0 +1,2 @@
+export type AtLeast<T, K extends keyof T> = Partial<T> & Pick<T, K>;
+export type MaybePromise<T> = Promise<T> | T;
diff --git a/packages/plugin-runtime-types/src/index.ts b/packages/plugin-runtime-types/src/index.ts
new file mode 100644
index 0000000..8ef2c46
--- /dev/null
+++ b/packages/plugin-runtime-types/src/index.ts
@@ -0,0 +1,9 @@
+export type * from "./plugins";
+export type * from "./themes";
+
+export * from "./bindings/gen_models";
+export * from "./bindings/gen_events";
+
+// Some extras for utility
+
+export type { PartialImportResources } from "./plugins/ImporterPlugin";
diff --git a/packages/plugin-runtime-types/src/plugins/AuthenticationPlugin.ts b/packages/plugin-runtime-types/src/plugins/AuthenticationPlugin.ts
new file mode 100644
index 0000000..e6427d3
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/AuthenticationPlugin.ts
@@ -0,0 +1,45 @@
+import type {
+  CallHttpAuthenticationActionArgs,
+  CallHttpAuthenticationRequest,
+  CallHttpAuthenticationResponse,
+  FormInput,
+  GetHttpAuthenticationSummaryResponse,
+  HttpAuthenticationAction,
+} from "../bindings/gen_events";
+import type { MaybePromise } from "../helpers";
+import type { Context } from "./Context";
+
+type AddDynamicMethod<T> = {
+  dynamic?: (
+    ctx: Context,
+    args: CallHttpAuthenticationActionArgs,
+  ) => MaybePromise<Partial<T> | null | undefined>;
+};
+
+// oxlint-disable-next-line no-explicit-any -- distributive conditional type pattern
+type AddDynamic<T> = T extends any
+  ? T extends { inputs?: FormInput[] }
+    ? Omit<T, "inputs"> & {
+        inputs: Array<AddDynamic<FormInput>>;
+        dynamic?: (
+          ctx: Context,
+          args: CallHttpAuthenticationActionArgs,
+        ) => MaybePromise<
+          Partial<Omit<T, "inputs"> & { inputs: Array<AddDynamic<FormInput>> }> | null | undefined
+        >;
+      }
+    : T & AddDynamicMethod<T>
+  : never;
+
+export type DynamicAuthenticationArg = AddDynamic<FormInput>;
+
+export type AuthenticationPlugin = GetHttpAuthenticationSummaryResponse & {
+  args: DynamicAuthenticationArg[];
+  onApply(
+    ctx: Context,
+    args: CallHttpAuthenticationRequest,
+  ): MaybePromise<CallHttpAuthenticationResponse>;
+  actions?: (HttpAuthenticationAction & {
+    onSelect(ctx: Context, args: CallHttpAuthenticationActionArgs): Promise<void> | void;
+  })[];
+};
diff --git a/packages/plugin-runtime-types/src/plugins/Context.ts b/packages/plugin-runtime-types/src/plugins/Context.ts
new file mode 100644
index 0000000..96854c2
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/Context.ts
@@ -0,0 +1,236 @@
+import type {
+  FindHttpResponsesRequest,
+  FindHttpResponsesResponse,
+  FormInput,
+  GetCookieValueRequest,
+  GetCookieValueResponse,
+  GetHttpRequestByIdRequest,
+  GetHttpRequestByIdResponse,
+  GetHttpResponseBodyInfoRequest,
+  JsonPrimitive,
+  ListCookieNamesResponse,
+  ListFoldersRequest,
+  ListFoldersResponse,
+  ListHttpRequestsRequest,
+  ListHttpRequestsResponse,
+  OpenWindowRequest,
+  PromptFormRequest,
+  PromptFormResponse,
+  PromptTextRequest,
+  PromptTextResponse,
+  RenderGrpcRequestRequest,
+  RenderGrpcRequestResponse,
+  RenderHttpRequestRequest,
+  RenderHttpRequestResponse,
+  SendHttpRequestRequest,
+  ShowToastRequest,
+  TemplateRenderRequest,
+  WorkspaceInfo,
+} from "../bindings/gen_events.ts";
+import type { Folder, HttpRequest, HttpResponse } from "../bindings/gen_models.ts";
+import type { JsonValue } from "../bindings/serde_json/JsonValue";
+import type { MaybePromise } from "../helpers";
+
+export type CallPromptFormDynamicArgs = {
+  values: { [key in string]?: JsonPrimitive };
+};
+
+type AddDynamicMethod<T> = {
+  dynamic?: (
+    ctx: Context,
+    args: CallPromptFormDynamicArgs,
+  ) => MaybePromise<Partial<T> | null | undefined>;
+};
+
+// oxlint-disable-next-line no-explicit-any -- distributive conditional type pattern
+type AddDynamic<T> = T extends any
+  ? T extends { inputs?: FormInput[] }
+    ? Omit<T, "inputs"> & {
+        inputs: Array<AddDynamic<FormInput>>;
+        dynamic?: (
+          ctx: Context,
+          args: CallPromptFormDynamicArgs,
+        ) => MaybePromise<
+          Partial<Omit<T, "inputs"> & { inputs: Array<AddDynamic<FormInput>> }> | null | undefined
+        >;
+      }
+    : T & AddDynamicMethod<T>
+  : never;
+
+export type DynamicPromptFormArg = AddDynamic<FormInput>;
+
+type DynamicPromptFormRequest = Omit<PromptFormRequest, "inputs"> & {
+  inputs: DynamicPromptFormArg[];
+};
+
+export type WorkspaceHandle = Pick<WorkspaceInfo, "id" | "name">;
+
+export interface ReadHttpResponseBodyOptions {
+  /**
+   * Refuse to buffer a body larger than this, in bytes. Defaults to 32 MiB.
+   * Pass `Infinity` to read whatever is there.
+   */
+  maxBytes?: number;
+
+  /** Bytes to pull from the host at a time. Defaults to 1 MiB. */
+  chunkSize?: number;
+}
+
+/**
+ * A response body, read back from wherever the host stored it.
+ *
+ * The accessors are named after `fetch`'s and behave the same way against a
+ * response that is still arriving: they wait for the rest, and one that never
+ * finishes is never finished reading — `chunks()` is the way to consume that.
+ * Unlike `fetch`, the body is not used up by reading it: the bytes are in
+ * durable storage, so every accessor can be called as many times as you like,
+ * in any order.
+ */
+export interface HttpResponseBody {
+  /** The response these bytes belong to. */
+  readonly responseId: string;
+
+  /**
+   * How many bytes were stored when this body was opened, which is not
+   * necessarily what the `Content-Length` header claimed. Zero when the
+   * response has no body. Final only if `complete`.
+   */
+  readonly contentLength: number;
+
+  /** The response's `Content-Type` header, verbatim, or null if it had none. */
+  readonly contentType: string | null;
+
+  /**
+   * Whether the response had finished arriving when this body was opened.
+   * When false, the accessors below will wait for the rest of it.
+   */
+  readonly complete: boolean;
+
+  /**
+   * The whole body decoded to a string, using the charset from `contentType`
+   * and falling back to UTF-8. Waits for a response still arriving. Throws
+   * once more than `maxBytes` has been read.
+   */
+  text(options?: ReadHttpResponseBodyOptions): Promise<string>;
+
+  /** `text()`, parsed as JSON. */
+  json<T = unknown>(options?: ReadHttpResponseBodyOptions): Promise<T>;
+
+  /** The whole body as raw bytes. Waits and throws as `text()` does. */
+  arrayBuffer(options?: ReadHttpResponseBodyOptions): Promise<ArrayBuffer>;
+
+  /**
+   * The raw bytes, a chunk at a time, so a body of any size can be read
+   * without holding all of it at once. Not subject to `maxBytes`.
+   *
+   * Follows a response that is still arriving, yielding as it comes, and ends
+   * when the response does. Break out of the loop to stop early.
+   */
+  chunks(options?: Pick<ReadHttpResponseBodyOptions, "chunkSize">): AsyncIterable<Uint8Array>;
+}
+
+/** What a send came back with. */
+export interface SentHttpRequest {
+  httpResponse: HttpResponse;
+
+  /**
+   * The response's body.
+   *
+   * Handed over here rather than looked up later, because a request with no id
+   * is not saved and this is the only copy of its body. Reading it is the same
+   * either way, so nothing has to know which kind of send it made.
+   */
+  body: HttpResponseBody;
+}
+
+export interface Context {
+  clipboard: {
+    copyText(text: string): Promise<void>;
+  };
+  toast: {
+    show(args: ShowToastRequest): Promise<void>;
+  };
+  prompt: {
+    text(args: PromptTextRequest): Promise<PromptTextResponse["value"]>;
+    form(args: DynamicPromptFormRequest): Promise<PromptFormResponse["values"]>;
+  };
+  store: {
+    set<T>(key: string, value: T): Promise<void>;
+    get<T>(key: string): Promise<T | undefined>;
+    delete(key: string): Promise<boolean>;
+  };
+  window: {
+    requestId(): Promise<string | null>;
+    workspaceId(): Promise<string | null>;
+    environmentId(): Promise<string | null>;
+    openUrl(
+      args: OpenWindowRequest & {
+        onNavigate?: (args: { url: string }) => void;
+        onClose?: () => void;
+      },
+    ): Promise<{ close: () => void }>;
+    openExternalUrl(url: string): Promise<void>;
+  };
+  cookies: {
+    listNames(): Promise<ListCookieNamesResponse["names"]>;
+    getValue(args: GetCookieValueRequest): Promise<GetCookieValueResponse["value"]>;
+  };
+  grpcRequest: {
+    render(args: RenderGrpcRequestRequest): Promise<RenderGrpcRequestResponse["grpcRequest"]>;
+  };
+  httpRequest: {
+    /**
+     * Send a request and wait for the response and its body.
+     *
+     * The body comes back with the response because a request with no id is
+     * never saved, and there would be nothing to look up afterwards.
+     */
+    send(args: SendHttpRequestRequest): Promise<SentHttpRequest>;
+    getById(args: GetHttpRequestByIdRequest): Promise<GetHttpRequestByIdResponse["httpRequest"]>;
+    render(args: RenderHttpRequestRequest): Promise<RenderHttpRequestResponse["httpRequest"]>;
+    list(args?: ListHttpRequestsRequest): Promise<ListHttpRequestsResponse["httpRequests"]>;
+    create(
+      args: Omit<Partial<HttpRequest>, "id" | "model" | "createdAt" | "updatedAt"> &
+        Pick<HttpRequest, "workspaceId" | "url">,
+    ): Promise<HttpRequest>;
+    update(
+      args: Omit<Partial<HttpRequest>, "model" | "createdAt" | "updatedAt"> &
+        Pick<HttpRequest, "id">,
+    ): Promise<HttpRequest>;
+    delete(args: { id: string }): Promise<HttpRequest>;
+  };
+  folder: {
+    list(args?: ListFoldersRequest): Promise<ListFoldersResponse["folders"]>;
+    getById(args: { id: string }): Promise<Folder | null>;
+    create(
+      args: Omit<Partial<Folder>, "id" | "model" | "createdAt" | "updatedAt"> &
+        Pick<Folder, "workspaceId" | "name">,
+    ): Promise<Folder>;
+    update(
+      args: Omit<Partial<Folder>, "model" | "createdAt" | "updatedAt"> & Pick<Folder, "id">,
+    ): Promise<Folder>;
+    delete(args: { id: string }): Promise<Folder>;
+  };
+  httpResponse: {
+    find(args: FindHttpResponsesRequest): Promise<FindHttpResponsesResponse["httpResponses"]>;
+    /**
+     * Read a saved response's body by id. Where the host keeps the bytes —
+     * files on a desktop, rows in a database, somewhere else later — is not
+     * something a plugin sees or should depend on.
+     *
+     * Ids come from `find`. A response that was never saved has none to look
+     * up, so its body arrives with the send that made it instead.
+     */
+    body(args: GetHttpResponseBodyInfoRequest): Promise<HttpResponseBody>;
+  };
+  templates: {
+    render<T extends JsonValue>(args: TemplateRenderRequest & { data: T }): Promise<T>;
+  };
+  plugin: {
+    reload(): void;
+  };
+  workspace: {
+    list(): Promise<WorkspaceHandle[]>;
+    withContext(handle: WorkspaceHandle): Context;
+  };
+}
diff --git a/packages/plugin-runtime-types/src/plugins/FilterPlugin.ts b/packages/plugin-runtime-types/src/plugins/FilterPlugin.ts
new file mode 100644
index 0000000..720d9f7
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/FilterPlugin.ts
@@ -0,0 +1,11 @@
+import type { FilterResponse } from "../bindings/gen_events";
+import type { Context } from "./Context";
+
+export type FilterPlugin = {
+  name: string;
+  description?: string;
+  onFilter(
+    ctx: Context,
+    args: { payload: string; filter: string; mimeType: string },
+  ): Promise<FilterResponse> | FilterResponse;
+};
diff --git a/packages/plugin-runtime-types/src/plugins/FolderActionPlugin.ts b/packages/plugin-runtime-types/src/plugins/FolderActionPlugin.ts
new file mode 100644
index 0000000..da5ad29
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/FolderActionPlugin.ts
@@ -0,0 +1,6 @@
+import type { CallFolderActionArgs, FolderAction } from "../bindings/gen_events";
+import type { Context } from "./Context";
+
+export type FolderActionPlugin = FolderAction & {
+  onSelect(ctx: Context, args: CallFolderActionArgs): Promise<void> | void;
+};
diff --git a/packages/plugin-runtime-types/src/plugins/GrpcRequestActionPlugin.ts b/packages/plugin-runtime-types/src/plugins/GrpcRequestActionPlugin.ts
new file mode 100644
index 0000000..0defb53
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/GrpcRequestActionPlugin.ts
@@ -0,0 +1,6 @@
+import type { CallGrpcRequestActionArgs, GrpcRequestAction } from "../bindings/gen_events";
+import type { Context } from "./Context";
+
+export type GrpcRequestActionPlugin = GrpcRequestAction & {
+  onSelect(ctx: Context, args: CallGrpcRequestActionArgs): Promise<void> | void;
+};
diff --git a/packages/plugin-runtime-types/src/plugins/HttpRequestActionPlugin.ts b/packages/plugin-runtime-types/src/plugins/HttpRequestActionPlugin.ts
new file mode 100644
index 0000000..6dd4036
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/HttpRequestActionPlugin.ts
@@ -0,0 +1,6 @@
+import type { CallHttpRequestActionArgs, HttpRequestAction } from "../bindings/gen_events";
+import type { Context } from "./Context";
+
+export type HttpRequestActionPlugin = HttpRequestAction & {
+  onSelect(ctx: Context, args: CallHttpRequestActionArgs): Promise<void> | void;
+};
diff --git a/packages/plugin-runtime-types/src/plugins/ImporterPlugin.ts b/packages/plugin-runtime-types/src/plugins/ImporterPlugin.ts
new file mode 100644
index 0000000..6a553f2
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/ImporterPlugin.ts
@@ -0,0 +1,31 @@
+import type { ImportResources, ImportResponse } from "../bindings/gen_events";
+import type { AtLeast, MaybePromise } from "../helpers";
+import type { Context } from "./Context";
+
+type RootFields = "name" | "id" | "model";
+type CommonFields = RootFields | "workspaceId";
+
+export type PartialImportResources = {
+  workspaces: Array<AtLeast<ImportResources["workspaces"][0], RootFields>>;
+  environments: Array<AtLeast<ImportResources["environments"][0], CommonFields>>;
+  folders: Array<AtLeast<ImportResources["folders"][0], CommonFields>>;
+  httpRequests: Array<AtLeast<ImportResources["httpRequests"][0], CommonFields>>;
+  grpcRequests: Array<AtLeast<ImportResources["grpcRequests"][0], CommonFields>>;
+  websocketRequests: Array<AtLeast<ImportResources["websocketRequests"][0], CommonFields>>;
+};
+
+/** `importer` is omitted because the host fills it in from the plugin's own name. */
+export type ImportPluginResponse =
+  | null
+  | (Omit<ImportResponse, "importer" | "resources"> & {
+      resources: PartialImportResources;
+    });
+
+export type ImporterPlugin = {
+  name: string;
+  description?: string;
+  onImport(
+    ctx: Context,
+    args: { text: string },
+  ): MaybePromise<ImportPluginResponse | null | undefined>;
+};
diff --git a/packages/plugin-runtime-types/src/plugins/TemplateFunctionPlugin.ts b/packages/plugin-runtime-types/src/plugins/TemplateFunctionPlugin.ts
new file mode 100644
index 0000000..2a6bd1e
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/TemplateFunctionPlugin.ts
@@ -0,0 +1,32 @@
+import type { CallTemplateFunctionArgs, FormInput, TemplateFunction } from "../bindings/gen_events";
+import type { MaybePromise } from "../helpers";
+import type { Context } from "./Context";
+
+type AddDynamicMethod<T> = {
+  dynamic?: (
+    ctx: Context,
+    args: CallTemplateFunctionArgs,
+  ) => MaybePromise<Partial<T> | null | undefined>;
+};
+
+// oxlint-disable-next-line no-explicit-any -- distributive conditional type pattern
+type AddDynamic<T> = T extends any
+  ? T extends { inputs?: FormInput[] }
+    ? Omit<T, "inputs"> & {
+        inputs: Array<AddDynamic<FormInput>>;
+        dynamic?: (
+          ctx: Context,
+          args: CallTemplateFunctionArgs,
+        ) => MaybePromise<
+          Partial<Omit<T, "inputs"> & { inputs: Array<AddDynamic<FormInput>> }> | null | undefined
+        >;
+      }
+    : T & AddDynamicMethod<T>
+  : never;
+
+export type DynamicTemplateFunctionArg = AddDynamic<FormInput>;
+
+export type TemplateFunctionPlugin = Omit<TemplateFunction, "args"> & {
+  args: DynamicTemplateFunctionArg[];
+  onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null>;
+};
diff --git a/packages/plugin-runtime-types/src/plugins/ThemePlugin.ts b/packages/plugin-runtime-types/src/plugins/ThemePlugin.ts
new file mode 100644
index 0000000..7563470
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/ThemePlugin.ts
@@ -0,0 +1,3 @@
+import type { Theme } from "../bindings/gen_events";
+
+export type ThemePlugin = Theme;
diff --git a/packages/plugin-runtime-types/src/plugins/WebsocketRequestActionPlugin.ts b/packages/plugin-runtime-types/src/plugins/WebsocketRequestActionPlugin.ts
new file mode 100644
index 0000000..94a497d
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/WebsocketRequestActionPlugin.ts
@@ -0,0 +1,9 @@
+import type {
+  CallWebsocketRequestActionArgs,
+  WebsocketRequestAction,
+} from "../bindings/gen_events";
+import type { Context } from "./Context";
+
+export type WebsocketRequestActionPlugin = WebsocketRequestAction & {
+  onSelect(ctx: Context, args: CallWebsocketRequestActionArgs): Promise<void> | void;
+};
diff --git a/packages/plugin-runtime-types/src/plugins/WorkspaceActionPlugin.ts b/packages/plugin-runtime-types/src/plugins/WorkspaceActionPlugin.ts
new file mode 100644
index 0000000..6c61edc
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/WorkspaceActionPlugin.ts
@@ -0,0 +1,6 @@
+import type { CallWorkspaceActionArgs, WorkspaceAction } from "../bindings/gen_events";
+import type { Context } from "./Context";
+
+export type WorkspaceActionPlugin = WorkspaceAction & {
+  onSelect(ctx: Context, args: CallWorkspaceActionArgs): Promise<void> | void;
+};
diff --git a/packages/plugin-runtime-types/src/plugins/index.ts b/packages/plugin-runtime-types/src/plugins/index.ts
new file mode 100644
index 0000000..d5280ac
--- /dev/null
+++ b/packages/plugin-runtime-types/src/plugins/index.ts
@@ -0,0 +1,44 @@
+import type { AuthenticationPlugin } from "./AuthenticationPlugin";
+
+import type { Context } from "./Context";
+import type { FilterPlugin } from "./FilterPlugin";
+import type { FolderActionPlugin } from "./FolderActionPlugin";
+import type { GrpcRequestActionPlugin } from "./GrpcRequestActionPlugin";
+import type { HttpRequestActionPlugin } from "./HttpRequestActionPlugin";
+import type { ImporterPlugin } from "./ImporterPlugin";
+import type { TemplateFunctionPlugin } from "./TemplateFunctionPlugin";
+import type { ThemePlugin } from "./ThemePlugin";
+import type { WebsocketRequestActionPlugin } from "./WebsocketRequestActionPlugin";
+import type { WorkspaceActionPlugin } from "./WorkspaceActionPlugin";
+
+export type { Context };
+export type { DynamicAuthenticationArg } from "./AuthenticationPlugin";
+export type {
+  CallPromptFormDynamicArgs,
+  DynamicPromptFormArg,
+  HttpResponseBody,
+  ReadHttpResponseBodyOptions,
+  SentHttpRequest,
+} from "./Context";
+export type { DynamicTemplateFunctionArg } from "./TemplateFunctionPlugin";
+export type { TemplateFunctionPlugin };
+export type { FolderActionPlugin } from "./FolderActionPlugin";
+export type { WorkspaceActionPlugin } from "./WorkspaceActionPlugin";
+
+/**
+ * The global structure of a Yaak plugin
+ */
+export type PluginDefinition = {
+  init?: (ctx: Context) => void | Promise<void>;
+  dispose?: () => void | Promise<void>;
+  importer?: ImporterPlugin;
+  themes?: ThemePlugin[];
+  filter?: FilterPlugin;
+  authentication?: AuthenticationPlugin;
+  httpRequestActions?: HttpRequestActionPlugin[];
+  websocketRequestActions?: WebsocketRequestActionPlugin[];
+  workspaceActions?: WorkspaceActionPlugin[];
+  folderActions?: FolderActionPlugin[];
+  grpcRequestActions?: GrpcRequestActionPlugin[];
+  templateFunctions?: TemplateFunctionPlugin[];
+};
diff --git a/packages/plugin-runtime-types/src/themes/index.ts b/packages/plugin-runtime-types/src/themes/index.ts
new file mode 100644
index 0000000..00fdc32
--- /dev/null
+++ b/packages/plugin-runtime-types/src/themes/index.ts
@@ -0,0 +1,44 @@
+export type Colors = {
+  surface: string;
+  surfaceHighlight?: string;
+  surfaceActive?: string;
+
+  text: string;
+  textSubtle?: string;
+  textSubtlest?: string;
+
+  border?: string;
+  borderSubtle?: string;
+  borderFocus?: string;
+
+  shadow?: string;
+  backdrop?: string;
+  selection?: string;
+
+  primary?: string;
+  secondary?: string;
+  info?: string;
+  success?: string;
+  notice?: string;
+  warning?: string;
+  danger?: string;
+};
+
+export type Index = Colors & {
+  id: string;
+  name: string;
+  components?: Partial<{
+    dialog: Partial<Colors>;
+    menu: Partial<Colors>;
+    toast: Partial<Colors>;
+    sidebar: Partial<Colors>;
+    responsePane: Partial<Colors>;
+    appHeader: Partial<Colors>;
+    button: Partial<Colors>;
+    banner: Partial<Colors>;
+    placeholder: Partial<Colors>;
+    urlBar: Partial<Colors>;
+    editor: Partial<Colors>;
+    input: Partial<Colors>;
+  }>;
+};
diff --git a/packages/plugin-runtime-types/tsconfig.json b/packages/plugin-runtime-types/tsconfig.json
new file mode 100644
index 0000000..9faeff5
--- /dev/null
+++ b/packages/plugin-runtime-types/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "node16",
+    "target": "es6",
+    "lib": ["es2021", "dom"],
+    "declaration": true,
+    "declarationDir": "./lib",
+    "rootDir": "./src",
+    "outDir": "./lib",
+    "strict": true,
+    "types": ["node"]
+  },
+  "files": ["src/index.ts"]
+}
diff --git a/packages/plugin-runtime/.node-version b/packages/plugin-runtime/.node-version
new file mode 100644
index 0000000..9e2934a
--- /dev/null
+++ b/packages/plugin-runtime/.node-version
@@ -0,0 +1 @@
+24.11.1
diff --git a/packages/plugin-runtime/package.json b/packages/plugin-runtime/package.json
new file mode 100644
index 0000000..83696e6
--- /dev/null
+++ b/packages/plugin-runtime/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@yaakapp-internal/plugin-runtime",
+  "scripts": {
+    "bootstrap": "npm run build",
+    "build": "run-p build:*",
+    "build:main": "esbuild src/index.ts --bundle --platform=node --outfile=../../crates-tauri/yaak-app-client/vendored/plugin-runtime/index.cjs"
+  },
+  "dependencies": {
+    "ws": "^8.21.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.13",
+    "@types/ws": "^8.5.13",
+    "esbuild": "^0.28.0"
+  }
+}
diff --git a/packages/plugin-runtime/src/EventChannel.ts b/packages/plugin-runtime/src/EventChannel.ts
new file mode 100644
index 0000000..fa0e769
--- /dev/null
+++ b/packages/plugin-runtime/src/EventChannel.ts
@@ -0,0 +1,19 @@
+import type { InternalEvent } from "@yaakapp/api";
+
+export class EventChannel {
+  #listeners = new Set<(event: InternalEvent) => void>();
+
+  emit(e: InternalEvent) {
+    for (const l of this.#listeners) {
+      l(e);
+    }
+  }
+
+  listen(cb: (e: InternalEvent) => void) {
+    this.#listeners.add(cb);
+  }
+
+  unlisten(cb: (e: InternalEvent) => void) {
+    this.#listeners.delete(cb);
+  }
+}
diff --git a/packages/plugin-runtime/src/PluginHandle.ts b/packages/plugin-runtime/src/PluginHandle.ts
new file mode 100644
index 0000000..c3eba20
--- /dev/null
+++ b/packages/plugin-runtime/src/PluginHandle.ts
@@ -0,0 +1,26 @@
+import type { BootRequest, InternalEvent } from "@yaakapp/api";
+import type { PluginContext } from "@yaakapp-internal/plugins";
+import type { EventChannel } from "./EventChannel";
+import { PluginInstance, type PluginWorkerData } from "./PluginInstance";
+
+export class PluginHandle {
+  #instance: PluginInstance;
+
+  constructor(
+    pluginRefId: string,
+    context: PluginContext,
+    bootRequest: BootRequest,
+    pluginToAppEvents: EventChannel,
+  ) {
+    const workerData: PluginWorkerData = { pluginRefId, context, bootRequest };
+    this.#instance = new PluginInstance(workerData, pluginToAppEvents);
+  }
+
+  sendToWorker(event: InternalEvent) {
+    this.#instance.postMessage(event);
+  }
+
+  async terminate() {
+    await this.#instance.terminate();
+  }
+}
diff --git a/packages/plugin-runtime/src/PluginInstance.ts b/packages/plugin-runtime/src/PluginInstance.ts
new file mode 100644
index 0000000..f93b260
--- /dev/null
+++ b/packages/plugin-runtime/src/PluginInstance.ts
@@ -0,0 +1,1099 @@
+import console from "node:console";
+import { type Stats, statSync, watch } from "node:fs";
+import path from "node:path";
+import type {
+  CallPromptFormDynamicArgs,
+  Context,
+  DynamicPromptFormArg,
+  PluginDefinition,
+} from "@yaakapp/api";
+import {
+  applyFormInputDefaults,
+  validateTemplateFunctionArgs,
+} from "@yaakapp-internal/lib/templateFunction";
+import type {
+  BootRequest,
+  DeleteKeyValueResponse,
+  DeleteModelResponse,
+  FindHttpResponsesResponse,
+  Folder,
+  FormInput,
+  GetCookieValueRequest,
+  GetCookieValueResponse,
+  GetHttpRequestByIdResponse,
+  GetHttpResponseBodyInfoResponse,
+  GetKeyValueResponse,
+  GrpcRequestAction,
+  HttpAuthenticationAction,
+  HttpRequest,
+  HttpRequestAction,
+  HttpResponse,
+  ImportResources,
+  InternalEvent,
+  InternalEventPayload,
+  ListCookieNamesResponse,
+  ListFoldersResponse,
+  ListHttpRequestsRequest,
+  ListHttpRequestsResponse,
+  ListOpenWorkspacesResponse,
+  PluginContext,
+  PromptFormResponse,
+  PromptTextResponse,
+  ReadHttpResponseBodyChunkResponse,
+  RenderGrpcRequestResponse,
+  RenderHttpRequestResponse,
+  SendHttpRequestResponse,
+  TemplateFunction,
+  TemplateRenderRequest,
+  TemplateRenderResponse,
+  UpsertModelResponse,
+  WindowInfoResponse,
+} from "@yaakapp-internal/plugins";
+import { applyDynamicFormInput } from "./common";
+import { EventChannel } from "./EventChannel";
+import { migrateTemplateFunctionSelectOptions } from "./migrations";
+import { createResponseBody, decodeBase64Chunk } from "./responseBody";
+
+/**
+ * A response as a plugin should see it.
+ *
+ * The host still puts `bodyPath` on the wire for its own callers, but it names
+ * a file on the host's disk — meaningless to a plugin, absent once bodies move
+ * off the filesystem, and impossible in a browser. Plugins address bodies by
+ * response id, so drop it here rather than let one grow a dependency on it.
+ */
+function forPlugin(httpResponse: HttpResponse): HttpResponse {
+  const { bodyPath: _bodyPath, ...rest } = httpResponse as HttpResponse & {
+    bodyPath?: string | null;
+  };
+  return rest;
+}
+
+export interface PluginWorkerData {
+  bootRequest: BootRequest;
+  pluginRefId: string;
+  context: PluginContext;
+}
+
+export class PluginInstance {
+  #workerData: PluginWorkerData;
+  #mod: PluginDefinition;
+  #pluginToAppEvents: EventChannel;
+  #appToPluginEvents: EventChannel;
+  #pendingDynamicForms = new Map<string, DynamicPromptFormArg[]>();
+
+  constructor(workerData: PluginWorkerData, pluginEvents: EventChannel) {
+    this.#workerData = workerData;
+    this.#pluginToAppEvents = pluginEvents;
+    this.#appToPluginEvents = new EventChannel();
+
+    // Forward incoming events to onMessage()
+    this.#appToPluginEvents.listen(async (event) => {
+      await this.#onMessage(event);
+    });
+
+    this.#mod = {};
+
+    const fileChangeCallback = async () => {
+      const ctx = this.#newCtx(workerData.context);
+      try {
+        await this.#mod?.dispose?.();
+        this.#importModule();
+        await this.#mod?.init?.(ctx);
+        this.#sendPayload(
+          workerData.context,
+          {
+            type: "reload_response",
+            silent: false,
+          },
+          null,
+        );
+      } catch (err: unknown) {
+        await ctx.toast.show({
+          message: `Failed to initialize plugin ${this.#workerData.bootRequest.dir.split("/").pop()}: ${err instanceof Error ? err.message : String(err)}`,
+          color: "notice",
+          icon: "alert_triangle",
+          timeout: 30000,
+        });
+      }
+    };
+
+    if (this.#workerData.bootRequest.watch) {
+      watchFile(this.#pathMod(), fileChangeCallback);
+      watchFile(this.#pathPkg(), fileChangeCallback);
+    }
+
+    this.#importModule();
+  }
+
+  postMessage(event: InternalEvent) {
+    this.#appToPluginEvents.emit(event);
+  }
+
+  async terminate() {
+    await this.#mod?.dispose?.();
+    this.#pendingDynamicForms.clear();
+    this.#unimportModule();
+  }
+
+  async #onMessage(event: InternalEvent) {
+    const ctx = this.#newCtx(event.context);
+
+    const { context, payload, id: replyId } = event;
+
+    try {
+      if (payload.type === "boot_request") {
+        await this.#mod?.init?.(ctx);
+        this.#sendPayload(context, { type: "boot_response" }, replyId);
+        return;
+      }
+
+      if (payload.type === "terminate_request") {
+        const payload: InternalEventPayload = {
+          type: "terminate_response",
+        };
+        await this.terminate();
+        this.#sendPayload(context, payload, replyId);
+        return;
+      }
+
+      if (
+        payload.type === "import_request" &&
+        typeof this.#mod?.importer?.onImport === "function"
+      ) {
+        const reply = await this.#mod.importer.onImport(ctx, {
+          text: payload.content,
+        });
+        if (reply != null) {
+          const replyPayload: InternalEventPayload = {
+            type: "import_response",
+            importer: this.#mod.importer.name,
+            resources: reply.resources as ImportResources,
+            sourceKeys: reply.sourceKeys ?? null,
+          };
+          this.#sendPayload(context, replyPayload, replyId);
+          return;
+        } else {
+          // Send back an empty reply (below)
+        }
+      }
+
+      if (payload.type === "filter_request" && typeof this.#mod?.filter?.onFilter === "function") {
+        const reply = await this.#mod.filter.onFilter(ctx, {
+          filter: payload.filter,
+          payload: payload.content,
+          mimeType: payload.type,
+        });
+        this.#sendPayload(context, { type: "filter_response", ...reply }, replyId);
+        return;
+      }
+
+      if (
+        payload.type === "get_grpc_request_actions_request" &&
+        Array.isArray(this.#mod?.grpcRequestActions)
+      ) {
+        const reply: GrpcRequestAction[] = this.#mod.grpcRequestActions.map((a) => ({
+          ...a,
+          // Add everything except onSelect
+          onSelect: undefined,
+        }));
+        const replyPayload: InternalEventPayload = {
+          type: "get_grpc_request_actions_response",
+          pluginRefId: this.#workerData.pluginRefId,
+          actions: reply,
+        };
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (
+        payload.type === "get_http_request_actions_request" &&
+        Array.isArray(this.#mod?.httpRequestActions)
+      ) {
+        const reply: HttpRequestAction[] = this.#mod.httpRequestActions.map((a) => ({
+          ...a,
+          // Add everything except onSelect
+          onSelect: undefined,
+        }));
+        const replyPayload: InternalEventPayload = {
+          type: "get_http_request_actions_response",
+          pluginRefId: this.#workerData.pluginRefId,
+          actions: reply,
+        };
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (
+        payload.type === "get_websocket_request_actions_request" &&
+        Array.isArray(this.#mod?.websocketRequestActions)
+      ) {
+        const reply = this.#mod.websocketRequestActions.map((a) => ({
+          ...a,
+          onSelect: undefined,
+        }));
+        const replyPayload: InternalEventPayload = {
+          type: "get_websocket_request_actions_response",
+          pluginRefId: this.#workerData.pluginRefId,
+          actions: reply,
+        };
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (
+        payload.type === "get_workspace_actions_request" &&
+        Array.isArray(this.#mod?.workspaceActions)
+      ) {
+        const reply = this.#mod.workspaceActions.map((a) => ({
+          ...a,
+          onSelect: undefined,
+        }));
+        const replyPayload: InternalEventPayload = {
+          type: "get_workspace_actions_response",
+          pluginRefId: this.#workerData.pluginRefId,
+          actions: reply,
+        };
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (
+        payload.type === "get_folder_actions_request" &&
+        Array.isArray(this.#mod?.folderActions)
+      ) {
+        const reply = this.#mod.folderActions.map((a) => ({
+          ...a,
+          onSelect: undefined,
+        }));
+        const replyPayload: InternalEventPayload = {
+          type: "get_folder_actions_response",
+          pluginRefId: this.#workerData.pluginRefId,
+          actions: reply,
+        };
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (payload.type === "get_themes_request" && Array.isArray(this.#mod?.themes)) {
+        const replyPayload: InternalEventPayload = {
+          type: "get_themes_response",
+          themes: this.#mod.themes,
+        };
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (
+        payload.type === "get_template_function_summary_request" &&
+        Array.isArray(this.#mod?.templateFunctions)
+      ) {
+        const functions: TemplateFunction[] = this.#mod.templateFunctions.map(
+          (templateFunction) => {
+            return {
+              ...migrateTemplateFunctionSelectOptions(templateFunction),
+              // Add everything except render
+              onRender: undefined,
+            };
+          },
+        );
+        const replyPayload: InternalEventPayload = {
+          type: "get_template_function_summary_response",
+          pluginRefId: this.#workerData.pluginRefId,
+          functions,
+        };
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (
+        payload.type === "get_template_function_config_request" &&
+        Array.isArray(this.#mod?.templateFunctions)
+      ) {
+        const templateFunction = this.#mod.templateFunctions.find((f) => f.name === payload.name);
+        if (templateFunction == null) {
+          this.#sendEmpty(context, replyId);
+          return;
+        }
+
+        const fn = {
+          ...migrateTemplateFunctionSelectOptions(templateFunction),
+          onRender: undefined,
+        };
+
+        payload.values = applyFormInputDefaults(fn.args, payload.values);
+        const p = { ...payload, purpose: "preview" } as const;
+        const resolvedArgs = await applyDynamicFormInput(ctx, fn.args, p);
+
+        const replyPayload: InternalEventPayload = {
+          type: "get_template_function_config_response",
+          pluginRefId: this.#workerData.pluginRefId,
+          function: { ...fn, args: stripDynamicCallbacks(resolvedArgs) },
+        };
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (payload.type === "get_http_authentication_summary_request" && this.#mod?.authentication) {
+        const replyPayload: InternalEventPayload = {
+          type: "get_http_authentication_summary_response",
+          ...this.#mod.authentication,
+        };
+
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (payload.type === "get_http_authentication_config_request" && this.#mod?.authentication) {
+        const { args, actions } = this.#mod.authentication;
+        payload.values = applyFormInputDefaults(args, payload.values);
+        const resolvedArgs = await applyDynamicFormInput(ctx, args, payload);
+        const resolvedActions: HttpAuthenticationAction[] = [];
+        // oxlint-disable-next-line unbound-method
+        for (const { onSelect: _onSelect, ...action } of actions ?? []) {
+          resolvedActions.push(action);
+        }
+
+        const replyPayload: InternalEventPayload = {
+          type: "get_http_authentication_config_response",
+          args: stripDynamicCallbacks(resolvedArgs),
+          actions: resolvedActions,
+          pluginRefId: this.#workerData.pluginRefId,
+        };
+
+        this.#sendPayload(context, replyPayload, replyId);
+        return;
+      }
+
+      if (payload.type === "call_http_authentication_request" && this.#mod?.authentication) {
+        const auth = this.#mod.authentication;
+        if (typeof auth?.onApply === "function") {
+          const resolvedArgs = await applyDynamicFormInput(ctx, auth.args, payload);
+          payload.values = applyFormInputDefaults(resolvedArgs, payload.values);
+          this.#sendPayload(
+            context,
+            {
+              type: "call_http_authentication_response",
+              ...(await auth.onApply(ctx, payload)),
+            },
+            replyId,
+          );
+          return;
+        }
+      }
+
+      if (
+        payload.type === "call_http_authentication_action_request" &&
+        this.#mod.authentication != null
+      ) {
+        const action = this.#mod.authentication.actions?.[payload.index];
+        if (typeof action?.onSelect === "function") {
+          await action.onSelect(ctx, payload.args);
+          this.#sendEmpty(context, replyId);
+          return;
+        }
+      }
+
+      if (
+        payload.type === "call_http_request_action_request" &&
+        Array.isArray(this.#mod.httpRequestActions)
+      ) {
+        const action = this.#mod.httpRequestActions[payload.index];
+        if (typeof action?.onSelect === "function") {
+          await action.onSelect(ctx, payload.args);
+          this.#sendEmpty(context, replyId);
+          return;
+        }
+      }
+
+      if (
+        payload.type === "call_websocket_request_action_request" &&
+        Array.isArray(this.#mod.websocketRequestActions)
+      ) {
+        const action = this.#mod.websocketRequestActions[payload.index];
+        if (typeof action?.onSelect === "function") {
+          await action.onSelect(ctx, payload.args);
+          this.#sendEmpty(context, replyId);
+          return;
+        }
+      }
+
+      if (
+        payload.type === "call_workspace_action_request" &&
+        Array.isArray(this.#mod.workspaceActions)
+      ) {
+        const action = this.#mod.workspaceActions[payload.index];
+        if (typeof action?.onSelect === "function") {
+          await action.onSelect(ctx, payload.args);
+          this.#sendEmpty(context, replyId);
+          return;
+        }
+      }
+
+      if (payload.type === "call_folder_action_request" && Array.isArray(this.#mod.folderActions)) {
+        const action = this.#mod.folderActions[payload.index];
+        if (typeof action?.onSelect === "function") {
+          await action.onSelect(ctx, payload.args);
+          this.#sendEmpty(context, replyId);
+          return;
+        }
+      }
+
+      if (
+        payload.type === "call_grpc_request_action_request" &&
+        Array.isArray(this.#mod.grpcRequestActions)
+      ) {
+        const action = this.#mod.grpcRequestActions[payload.index];
+        if (typeof action?.onSelect === "function") {
+          await action.onSelect(ctx, payload.args);
+          this.#sendEmpty(context, replyId);
+          return;
+        }
+      }
+
+      if (
+        payload.type === "call_template_function_request" &&
+        Array.isArray(this.#mod?.templateFunctions)
+      ) {
+        const fn = this.#mod.templateFunctions.find((a) => a.name === payload.name);
+        if (
+          payload.args.purpose === "preview" &&
+          (fn?.previewType === "click" || fn?.previewType === "none")
+        ) {
+          // Send empty render response
+          this.#sendPayload(
+            context,
+            {
+              type: "call_template_function_response",
+              value: null,
+              error: "Live preview disabled for this function",
+            },
+            replyId,
+          );
+        } else if (typeof fn?.onRender === "function") {
+          const resolvedArgs = await applyDynamicFormInput(ctx, fn.args, payload.args);
+          const values = applyFormInputDefaults(resolvedArgs, payload.args.values);
+          const error = validateTemplateFunctionArgs(fn.name, resolvedArgs, values);
+          if (error && payload.args.purpose !== "preview") {
+            this.#sendPayload(
+              context,
+              { type: "call_template_function_response", value: null, error },
+              replyId,
+            );
+            return;
+          }
+
+          try {
+            const result = await fn.onRender(ctx, { ...payload.args, values });
+            this.#sendPayload(
+              context,
+              { type: "call_template_function_response", value: result ?? null },
+              replyId,
+            );
+          } catch (err) {
+            this.#sendPayload(
+              context,
+              {
+                type: "call_template_function_response",
+                value: null,
+                error: (err instanceof Error ? err.message : String(err)).replace(
+                  /^Error:\s*/g,
+                  "",
+                ),
+              },
+              replyId,
+            );
+          }
+          return;
+        }
+      }
+    } catch (err) {
+      const error = (err instanceof Error ? err.message : String(err)).replace(/^Error:\s*/g, "");
+      console.log("Plugin call threw exception", payload.type, "→", error);
+      this.#sendPayload(context, { type: "error_response", error }, replyId);
+      return;
+    }
+
+    // No matches, so send back an empty response so the caller doesn't block forever
+    this.#sendEmpty(context, replyId);
+  }
+
+  #pathMod() {
+    return path.posix.join(this.#workerData.bootRequest.dir, "build", "index.js");
+  }
+
+  #pathPkg() {
+    return path.join(this.#workerData.bootRequest.dir, "package.json");
+  }
+
+  #unimportModule() {
+    const id = require.resolve(this.#pathMod());
+    delete require.cache[id];
+  }
+
+  #importModule() {
+    const id = require.resolve(this.#pathMod());
+    delete require.cache[id];
+    this.#mod = require(id).plugin;
+  }
+
+  #buildEventToSend(
+    context: PluginContext,
+    payload: InternalEventPayload,
+    replyId: string | null = null,
+  ): InternalEvent {
+    return {
+      pluginRefId: this.#workerData.pluginRefId,
+      pluginName: path.basename(this.#workerData.bootRequest.dir),
+      id: genId(),
+      replyId,
+      payload,
+      context,
+    };
+  }
+
+  #sendPayload(
+    context: PluginContext,
+    payload: InternalEventPayload,
+    replyId: string | null,
+  ): string {
+    const event = this.#buildEventToSend(context, payload, replyId);
+    this.#sendEvent(event);
+    return event.id;
+  }
+
+  #sendEvent(event: InternalEvent) {
+    // if (event.payload.type !== 'empty_response') {
+    //   console.log('Sending event to app', this.#pkg.name, event.id, event.payload.type);
+    // }
+    this.#pluginToAppEvents.emit(event);
+  }
+
+  #sendEmpty(context: PluginContext, replyId: string | null = null): string {
+    return this.#sendPayload(context, { type: "empty_response" }, replyId);
+  }
+
+  /**
+   * Send a request to the host and wait for its reply.
+   *
+   * A host that cannot answer replies with an error, which becomes a thrown
+   * error here. The alternative is handing back a reply-shaped object with
+   * none of the fields the caller destructures, and letting it fail somewhere
+   * further along with no idea why.
+   */
+  #sendForReply<T extends Omit<InternalEventPayload, "type">>(
+    context: PluginContext,
+    payload: InternalEventPayload,
+  ): Promise<T> {
+    // 1. Build event to send
+    const eventToSend = this.#buildEventToSend(context, payload, null);
+
+    // 2. Spawn listener in background
+    const promise = new Promise<T>((resolve, reject) => {
+      const cb = (event: InternalEvent) => {
+        if (event.replyId === eventToSend.id) {
+          this.#appToPluginEvents.unlisten(cb); // Unlisten, now that we're done
+          const { type: _, ...payload } = event.payload;
+          if (event.payload.type === "error_response") {
+            const { error } = payload as { error?: string };
+            reject(new Error(error || `Host failed to handle ${eventToSend.payload.type}`));
+            return;
+          }
+          resolve(payload as T);
+        }
+      };
+      this.#appToPluginEvents.listen(cb);
+    });
+
+    // 3. Send the event after we start listening (to prevent race)
+    this.#sendEvent(eventToSend);
+
+    // 4. Return the listener promise
+    return promise as unknown as Promise<T>;
+  }
+
+  #sendAndListenForEvents(
+    context: PluginContext,
+    payload: InternalEventPayload,
+    onEvent: (event: InternalEventPayload) => void,
+  ): void {
+    // 1. Build event to send
+    const eventToSend = this.#buildEventToSend(context, payload, null);
+
+    // 2. Listen for replies in the background
+    this.#appToPluginEvents.listen((event: InternalEvent) => {
+      if (event.replyId === eventToSend.id) {
+        onEvent(event.payload);
+      }
+    });
+
+    // 3. Send the event after we start listening (to prevent race)
+    this.#sendEvent(eventToSend);
+  }
+
+  #newCtx(context: PluginContext): Context {
+    /** Read a body the host has stored, a chunk at a time, following it if it is still arriving. */
+    const storedBody = async (responseId: string) => {
+      const bodyInfo = () =>
+        this.#sendForReply<GetHttpResponseBodyInfoResponse>(context, {
+          type: "get_http_response_body_info_request",
+          responseId,
+        });
+      const info = await bodyInfo();
+
+      return createResponseBody(
+        {
+          responseId,
+          contentLength: info.contentLength,
+          contentType: info.contentType ?? null,
+          complete: info.complete,
+        },
+        async (offset, length) => {
+          const chunk = await this.#sendForReply<ReadHttpResponseBodyChunkResponse>(
+            context,
+            { type: "read_http_response_body_chunk_request", responseId, offset, length },
+          );
+          return decodeBase64Chunk(chunk.data);
+        },
+        { refresh: bodyInfo },
+      );
+    };
+
+    const _windowInfo = async () => {
+      if (context.label == null) {
+        throw new Error("Can't get window context without an active window");
+      }
+      const payload: InternalEventPayload = {
+        type: "window_info_request",
+        label: context.label,
+      };
+
+      return this.#sendForReply<WindowInfoResponse>(context, payload);
+    };
+
+    return {
+      clipboard: {
+        copyText: async (text) => {
+          await this.#sendForReply(context, {
+            type: "copy_text_request",
+            text,
+          });
+        },
+      },
+      toast: {
+        show: async (args) => {
+          await this.#sendForReply(context, {
+            type: "show_toast_request",
+            // Handle default here because null/undefined both convert to None in Rust translation
+            timeout: args.timeout === undefined ? 5000 : args.timeout,
+            ...args,
+          });
+        },
+      },
+      window: {
+        requestId: async () => {
+          return (await _windowInfo()).requestId;
+        },
+        async workspaceId(): Promise<string | null> {
+          return (await _windowInfo()).workspaceId;
+        },
+        async environmentId(): Promise<string | null> {
+          return (await _windowInfo()).environmentId;
+        },
+        openUrl: async ({ onNavigate, onClose, ...args }) => {
+          args.label = args.label || `${Math.random()}`;
+          const payload: InternalEventPayload = { type: "open_window_request", ...args };
+          const onEvent = (event: InternalEventPayload) => {
+            if (event.type === "window_navigate_event") {
+              onNavigate?.(event);
+            } else if (event.type === "window_close_event") {
+              onClose?.();
+            }
+          };
+          this.#sendAndListenForEvents(context, payload, onEvent);
+          return {
+            close: () => {
+              const closePayload: InternalEventPayload = {
+                type: "close_window_request",
+                label: args.label,
+              };
+              this.#sendPayload(context, closePayload, null);
+            },
+          };
+        },
+        openExternalUrl: async (url) => {
+          await this.#sendForReply(context, {
+            type: "open_external_url_request",
+            url,
+          });
+        },
+      },
+      prompt: {
+        text: async (args) => {
+          const reply: PromptTextResponse = await this.#sendForReply(context, {
+            type: "prompt_text_request",
+            ...args,
+          });
+          return reply.value;
+        },
+        form: async (args) => {
+          // Resolve dynamic callbacks on initial inputs using default values
+          const defaults = applyFormInputDefaults(args.inputs, {});
+          const callArgs: CallPromptFormDynamicArgs = { values: defaults };
+          const resolvedInputs = await applyDynamicFormInput(
+            this.#newCtx(context),
+            args.inputs,
+            callArgs,
+          );
+          const strippedInputs = stripDynamicCallbacks(resolvedInputs);
+
+          // Build the event manually so we can get the event ID for keying
+          const eventToSend = this.#buildEventToSend(
+            context,
+            { type: "prompt_form_request", ...args, inputs: strippedInputs },
+            null,
+          );
+
+          // Store original inputs (with dynamic callbacks) for later resolution
+          this.#pendingDynamicForms.set(eventToSend.id, args.inputs);
+
+          const reply = await new Promise<PromptFormResponse>((resolve) => {
+            const cb = (event: InternalEvent) => {
+              if (event.replyId !== eventToSend.id) return;
+
+              if (event.payload.type === "prompt_form_response") {
+                const { done, values } = event.payload as PromptFormResponse;
+                if (done) {
+                  // Final response — resolve the promise and clean up
+                  this.#appToPluginEvents.unlisten(cb);
+                  this.#pendingDynamicForms.delete(eventToSend.id);
+                  resolve({ values } as PromptFormResponse);
+                } else {
+                  // Intermediate value change — resolve dynamic inputs and send back
+                  // Skip empty values (fired on initial mount before user interaction)
+                  const storedInputs = this.#pendingDynamicForms.get(eventToSend.id);
+                  if (storedInputs && values && Object.keys(values).length > 0) {
+                    const ctx = this.#newCtx(context);
+                    const callArgs: CallPromptFormDynamicArgs = { values };
+                    applyDynamicFormInput(ctx, storedInputs, callArgs)
+                      .then((resolvedInputs) => {
+                        const stripped = stripDynamicCallbacks(resolvedInputs);
+                        this.#sendPayload(
+                          context,
+                          { type: "prompt_form_request", ...args, inputs: stripped },
+                          eventToSend.id,
+                        );
+                      })
+                      .catch((err) => {
+                        console.error("Failed to resolve dynamic form inputs", err);
+                      });
+                  }
+                }
+              }
+            };
+            this.#appToPluginEvents.listen(cb);
+
+            // Send the initial event after we start listening (to prevent race)
+            this.#sendEvent(eventToSend);
+          });
+
+          return reply.values;
+        },
+      },
+      httpResponse: {
+        find: async (args) => {
+          const payload = {
+            type: "find_http_responses_request",
+            ...args,
+          } as const;
+          const { httpResponses } = await this.#sendForReply<FindHttpResponsesResponse>(
+            context,
+            payload,
+          );
+          return httpResponses.map(forPlugin);
+        },
+        body: ({ responseId }) => storedBody(responseId),
+      },
+      grpcRequest: {
+        render: async (args) => {
+          const payload = {
+            type: "render_grpc_request_request",
+            ...args,
+          } as const;
+          const { grpcRequest } = await this.#sendForReply<RenderGrpcRequestResponse>(
+            context,
+            payload,
+          );
+          return grpcRequest;
+        },
+      },
+      httpRequest: {
+        getById: async (args) => {
+          const payload = {
+            type: "get_http_request_by_id_request",
+            ...args,
+          } as const;
+          const { httpRequest } = await this.#sendForReply<GetHttpRequestByIdResponse>(
+            context,
+            payload,
+          );
+          return httpRequest;
+        },
+        send: async (args) => {
+          const payload = {
+            type: "send_http_request_request",
+            ...args,
+          } as const;
+          const { httpResponse, body } = await this.#sendForReply<SendHttpRequestResponse>(
+            context,
+            payload,
+          );
+
+          // A send with no request behind it saves nothing, so the reply
+          // carries the only copy of its body. A saved one is read back from
+          // the host like any other. Callers get the same thing either way.
+          if (body == null) {
+            return { httpResponse: forPlugin(httpResponse), body: await storedBody(httpResponse.id) };
+          }
+
+          const bytes = decodeBase64Chunk(body);
+          return {
+            httpResponse: forPlugin(httpResponse),
+            body: createResponseBody(
+              {
+                responseId: httpResponse.id,
+                contentLength: bytes.byteLength,
+                contentType:
+                  httpResponse.headers.find((h) => h.name.toLowerCase() === "content-type")
+                    ?.value ?? null,
+                // The host waited for the whole send before replying.
+                complete: true,
+              },
+              async (offset, length) => bytes.slice(offset, offset + length),
+            ),
+          };
+        },
+        render: async (args) => {
+          const payload = {
+            type: "render_http_request_request",
+            ...args,
+          } as const;
+          const { httpRequest } = await this.#sendForReply<RenderHttpRequestResponse>(
+            context,
+            payload,
+          );
+          return httpRequest;
+        },
+        list: async (args?: { folderId?: string }) => {
+          const payload: InternalEventPayload = {
+            type: "list_http_requests_request",
+            folderId: args?.folderId,
+          } satisfies ListHttpRequestsRequest & { type: "list_http_requests_request" };
+          const { httpRequests } = await this.#sendForReply<ListHttpRequestsResponse>(
+            context,
+            payload,
+          );
+          return httpRequests;
+        },
+        create: async (args) => {
+          const payload = {
+            type: "upsert_model_request",
+            model: {
+              name: "",
+              method: "GET",
+              ...args,
+              id: "",
+              model: "http_request",
+            },
+          } as InternalEventPayload;
+          const response = await this.#sendForReply<UpsertModelResponse>(context, payload);
+          return response.model as HttpRequest;
+        },
+        update: async (args) => {
+          const payload = {
+            type: "upsert_model_request",
+            model: {
+              model: "http_request",
+              ...args,
+            },
+          } as InternalEventPayload;
+          const response = await this.#sendForReply<UpsertModelResponse>(context, payload);
+          return response.model as HttpRequest;
+        },
+        delete: async (args) => {
+          const payload = {
+            type: "delete_model_request",
+            model: "http_request",
+            id: args.id,
+          } as InternalEventPayload;
+          const response = await this.#sendForReply<DeleteModelResponse>(context, payload);
+          return response.model as HttpRequest;
+        },
+      },
+      folder: {
+        list: async () => {
+          const payload = { type: "list_folders_request" } as const;
+          const { folders } = await this.#sendForReply<ListFoldersResponse>(context, payload);
+          return folders;
+        },
+        getById: async (args: { id: string }) => {
+          const payload = { type: "list_folders_request" } as const;
+          const { folders } = await this.#sendForReply<ListFoldersResponse>(context, payload);
+          return folders.find((f) => f.id === args.id) ?? null;
+        },
+        create: async ({ name, ...args }) => {
+          const payload = {
+            type: "upsert_model_request",
+            model: {
+              ...args,
+              name: name ?? "",
+              id: "",
+              model: "folder",
+            },
+          } as InternalEventPayload;
+          const response = await this.#sendForReply<UpsertModelResponse>(context, payload);
+          return response.model as Folder;
+        },
+        update: async (args) => {
+          const payload = {
+            type: "upsert_model_request",
+            model: {
+              model: "folder",
+              ...args,
+            },
+          } as InternalEventPayload;
+          const response = await this.#sendForReply<UpsertModelResponse>(context, payload);
+          return response.model as Folder;
+        },
+        delete: async (args: { id: string }) => {
+          const payload = {
+            type: "delete_model_request",
+            model: "folder",
+            id: args.id,
+          } as InternalEventPayload;
+          const response = await this.#sendForReply<DeleteModelResponse>(context, payload);
+          return response.model as Folder;
+        },
+      },
+      cookies: {
+        getValue: async (args: GetCookieValueRequest) => {
+          const payload = {
+            type: "get_cookie_value_request",
+            ...args,
+          } as const;
+          const { value } = await this.#sendForReply<GetCookieValueResponse>(context, payload);
+          return value;
+        },
+        listNames: async () => {
+          const payload = { type: "list_cookie_names_request" } as const;
+          const { names } = await this.#sendForReply<ListCookieNamesResponse>(context, payload);
+          return names;
+        },
+      },
+      templates: {
+        /**
+         * Invoke Yaak's template engine to render a value. If the value is a nested type
+         * (eg. object), it will be recursively rendered.
+         */
+        render: async (args: TemplateRenderRequest) => {
+          const payload = { type: "template_render_request", ...args } as const;
+          const result = await this.#sendForReply<TemplateRenderResponse>(context, payload);
+          // oxlint-disable-next-line no-explicit-any -- That's okay
+          return result.data as any;
+        },
+      },
+      store: {
+        get: async <T>(key: string) => {
+          const payload = { type: "get_key_value_request", key } as const;
+          const result = await this.#sendForReply<GetKeyValueResponse>(context, payload);
+          return result.value ? (JSON.parse(result.value) as T) : undefined;
+        },
+        set: async <T>(key: string, value: T) => {
+          const valueStr = JSON.stringify(value);
+          const payload: InternalEventPayload = {
+            type: "set_key_value_request",
+            key,
+            value: valueStr,
+          };
+          await this.#sendForReply<GetKeyValueResponse>(context, payload);
+        },
+        delete: async (key: string) => {
+          const payload = { type: "delete_key_value_request", key } as const;
+          const result = await this.#sendForReply<DeleteKeyValueResponse>(context, payload);
+          return result.deleted;
+        },
+      },
+      plugin: {
+        reload: () => {
+          this.#sendPayload(context, { type: "reload_response", silent: true }, null);
+        },
+      },
+      workspace: {
+        list: async () => {
+          const payload = {
+            type: "list_open_workspaces_request",
+          } as InternalEventPayload;
+          const response = await this.#sendForReply<ListOpenWorkspacesResponse>(context, payload);
+          return response.workspaces.map((w) => {
+            // Internal workspace info includes label field not in public API
+            type WorkspaceInfoInternal = typeof w & { label?: string };
+            return {
+              id: w.id,
+              name: w.name,
+              // Hide label from plugin authors, but keep it for internal routing
+              _label: (w as WorkspaceInfoInternal).label as string,
+            };
+          });
+        },
+        withContext: (workspaceHandle: { id: string; name: string; _label?: string }) => {
+          // Create a new context with the workspace's window label
+          const newContext: PluginContext = {
+            ...context,
+            label: workspaceHandle._label || null,
+            workspaceId: workspaceHandle.id,
+          };
+          return this.#newCtx(newContext);
+        },
+      },
+    };
+  }
+}
+
+function stripDynamicCallbacks(inputs: { dynamic?: unknown }[]): FormInput[] {
+  return inputs.map((input) => {
+    // oxlint-disable-next-line no-explicit-any -- stripping dynamic from union type
+    const { dynamic: _dynamic, ...rest } = input as any;
+    if ("inputs" in rest && Array.isArray(rest.inputs)) {
+      rest.inputs = stripDynamicCallbacks(rest.inputs);
+    }
+    return rest as FormInput;
+  });
+}
+
+function genId(len = 5): string {
+  const alphabet = "01234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  let id = "";
+  for (let i = 0; i < len; i++) {
+    id += alphabet[Math.floor(Math.random() * alphabet.length)];
+  }
+  return id;
+}
+
+const watchedFiles: Record<string, Stats | null> = {};
+
+/**
+ * Watch a file and trigger a callback on change.
+ *
+ * We also track the stat for each file because fs.watch() will
+ * trigger a "change" event when the access date changes.
+ */
+function watchFile(filepath: string, cb: () => void) {
+  watch(filepath, () => {
+    const stat = statSync(filepath, { throwIfNoEntry: false });
+    if (stat == null || stat.mtimeMs !== watchedFiles[filepath]?.mtimeMs) {
+      watchedFiles[filepath] = stat ?? null;
+      console.log("[plugin-runtime] watchFile triggered", filepath);
+      cb();
+    }
+  });
+}
diff --git a/packages/plugin-runtime/src/common.ts b/packages/plugin-runtime/src/common.ts
new file mode 100644
index 0000000..b37c60d
--- /dev/null
+++ b/packages/plugin-runtime/src/common.ts
@@ -0,0 +1,75 @@
+import type {
+  CallPromptFormDynamicArgs,
+  Context,
+  DynamicAuthenticationArg,
+  DynamicPromptFormArg,
+  DynamicTemplateFunctionArg,
+} from "@yaakapp/api";
+import type {
+  CallHttpAuthenticationActionArgs,
+  CallTemplateFunctionArgs,
+} from "@yaakapp-internal/plugins";
+
+type AnyDynamicArg = DynamicTemplateFunctionArg | DynamicAuthenticationArg | DynamicPromptFormArg;
+type AnyCallArgs =
+  | CallTemplateFunctionArgs
+  | CallHttpAuthenticationActionArgs
+  | CallPromptFormDynamicArgs;
+
+export async function applyDynamicFormInput(
+  ctx: Context,
+  args: DynamicTemplateFunctionArg[],
+  callArgs: CallTemplateFunctionArgs,
+): Promise<DynamicTemplateFunctionArg[]>;
+
+export async function applyDynamicFormInput(
+  ctx: Context,
+  args: DynamicAuthenticationArg[],
+  callArgs: CallHttpAuthenticationActionArgs,
+): Promise<DynamicAuthenticationArg[]>;
+
+export async function applyDynamicFormInput(
+  ctx: Context,
+  args: DynamicPromptFormArg[],
+  callArgs: CallPromptFormDynamicArgs,
+): Promise<DynamicPromptFormArg[]>;
+
+export async function applyDynamicFormInput(
+  ctx: Context,
+  args: AnyDynamicArg[],
+  callArgs: AnyCallArgs,
+): Promise<AnyDynamicArg[]> {
+  const resolvedArgs: AnyDynamicArg[] = [];
+  for (const { dynamic, ...arg } of args) {
+    const dynamicResult =
+      typeof dynamic === "function"
+        ? await dynamic(
+            ctx,
+            callArgs as CallTemplateFunctionArgs &
+              CallHttpAuthenticationActionArgs &
+              CallPromptFormDynamicArgs,
+          )
+        : undefined;
+
+    const newArg = {
+      ...arg,
+      ...dynamicResult,
+    } as AnyDynamicArg;
+
+    if ("inputs" in newArg && Array.isArray(newArg.inputs)) {
+      try {
+        newArg.inputs = await applyDynamicFormInput(
+          ctx,
+          newArg.inputs as DynamicTemplateFunctionArg[],
+          callArgs as CallTemplateFunctionArgs &
+            CallHttpAuthenticationActionArgs &
+            CallPromptFormDynamicArgs,
+        );
+      } catch (e) {
+        console.error("Failed to apply dynamic form input", e);
+      }
+    }
+    resolvedArgs.push(newArg);
+  }
+  return resolvedArgs;
+}
diff --git a/packages/plugin-runtime/src/index.ts b/packages/plugin-runtime/src/index.ts
new file mode 100644
index 0000000..6a6660b
--- /dev/null
+++ b/packages/plugin-runtime/src/index.ts
@@ -0,0 +1,73 @@
+import type { InternalEvent } from "@yaakapp/api";
+import WebSocket from "ws";
+import { EventChannel } from "./EventChannel";
+import { PluginHandle } from "./PluginHandle";
+
+const port = process.env.PORT;
+if (!port) {
+  throw new Error("Plugin runtime missing PORT");
+}
+
+const host = process.env.HOST;
+if (!host) {
+  throw new Error("Plugin runtime missing HOST");
+}
+
+const pluginToAppEvents = new EventChannel();
+const plugins: Record<string, PluginHandle> = {};
+
+const ws = new WebSocket(`ws://${host}:${port}`);
+
+ws.on("message", async (e: Buffer) => {
+  try {
+    await handleIncoming(e.toString());
+  } catch (err) {
+    console.log("Failed to handle incoming plugin event", err);
+  }
+});
+ws.on("open", () => console.log("Plugin runtime connected to websocket"));
+ws.on("error", (err: unknown) => console.error("Plugin runtime websocket error", err));
+ws.on("close", (code: number) => console.log("Plugin runtime websocket closed", code));
+
+// Listen for incoming events from plugins
+pluginToAppEvents.listen((e) => {
+  const eventStr = JSON.stringify(e);
+  ws.send(eventStr);
+});
+
+async function handleIncoming(msg: string) {
+  const pluginEvent: InternalEvent = JSON.parse(msg);
+  // Handle special event to bootstrap plugin
+  if (pluginEvent.payload.type === "boot_request") {
+    const plugin = new PluginHandle(
+      pluginEvent.pluginRefId,
+      pluginEvent.context,
+      pluginEvent.payload,
+      pluginToAppEvents,
+    );
+    plugins[pluginEvent.pluginRefId] = plugin;
+  }
+
+  // Once booted, forward all events to the plugin worker
+  const plugin = plugins[pluginEvent.pluginRefId];
+  if (!plugin) {
+    console.warn("Failed to get plugin for event by", pluginEvent.pluginRefId);
+    return;
+  }
+
+  if (pluginEvent.payload.type === "terminate_request") {
+    await plugin.terminate();
+    console.log("Terminated plugin worker", pluginEvent.pluginRefId);
+    delete plugins[pluginEvent.pluginRefId];
+  }
+
+  plugin.sendToWorker(pluginEvent);
+}
+
+process.on("unhandledRejection", (reason, promise) => {
+  console.error("Unhandled Rejection at:", promise, "reason:", reason);
+});
+
+process.on("uncaughtException", (error) => {
+  console.error("Uncaught Exception:", error);
+});
diff --git a/packages/plugin-runtime/src/interceptStdout.ts b/packages/plugin-runtime/src/interceptStdout.ts
new file mode 100644
index 0000000..bd8e4be
--- /dev/null
+++ b/packages/plugin-runtime/src/interceptStdout.ts
@@ -0,0 +1,29 @@
+/* oxlint-disable unbound-method */
+import process from "node:process";
+
+export function interceptStdout(intercept: (text: string) => string) {
+  const old_stdout_write = process.stdout.write;
+  const old_stderr_write = process.stderr.write;
+
+  process.stdout.write = ((write) =>
+    ((text: string, ...args: never[]) => {
+      write.call(process.stdout, interceptor(text, intercept), ...args);
+      return true;
+    }) as typeof process.stdout.write)(process.stdout.write);
+
+  process.stderr.write = ((write) =>
+    ((text: string, ...args: never[]) => {
+      write.call(process.stderr, interceptor(text, intercept), ...args);
+      return true;
+    }) as typeof process.stderr.write)(process.stderr.write);
+
+  // puts back to original
+  return function unhook() {
+    process.stdout.write = old_stdout_write;
+    process.stderr.write = old_stderr_write;
+  };
+}
+
+function interceptor(text: string, fn: (text: string) => string) {
+  return fn(text).replace(/\n$/, "") + (fn(text) && text.endsWith("\n") ? "\n" : "");
+}
diff --git a/packages/plugin-runtime/src/metadata.ts b/packages/plugin-runtime/src/metadata.ts
new file mode 100644
index 0000000..eef2ea3
--- /dev/null
+++ b/packages/plugin-runtime/src/metadata.ts
@@ -0,0 +1,190 @@
+import fs from "node:fs";
+import { createRequire } from "node:module";
+import path from "node:path";
+import type { PluginDefinition } from "@yaakapp/api";
+
+type PluginFeatureKey = Exclude<
+  Extract<keyof PluginDefinition, string>,
+  "init" | "dispose"
+>;
+type PluginAPIKey = PluginFeatureKey | "lifecycle";
+
+type MetadataDefinition = {
+  key: PluginFeatureKey;
+  label: string;
+  array: boolean;
+};
+
+type MetadataItem =
+  | string
+  | number
+  | boolean
+  | null
+  | MetadataItem[]
+  | { [key: string]: MetadataItem };
+
+type APITypeMetadata = {
+  label: string;
+  source: string;
+  count: number;
+  items: MetadataItem[];
+};
+
+type PluginMetadata = {
+  schemaVersion: 1;
+  apiTypes: PluginAPIKey[];
+  apis: Partial<Record<PluginAPIKey, APITypeMetadata>>;
+};
+
+const definitions: MetadataDefinition[] = [
+  {
+    key: "authentication",
+    label: "Authentication",
+    array: false,
+  },
+  { key: "filter", label: "Filter", array: false },
+  {
+    key: "folderActions",
+    label: "Folder Action",
+    array: true,
+  },
+  {
+    key: "grpcRequestActions",
+    label: "gRPC Request Action",
+    array: true,
+  },
+  {
+    key: "httpRequestActions",
+    label: "HTTP Request Action",
+    array: true,
+  },
+  { key: "importer", label: "Importer", array: false },
+  {
+    key: "templateFunctions",
+    label: "Template Tag",
+    array: true,
+  },
+  { key: "themes", label: "Theme", array: true },
+  {
+    key: "websocketRequestActions",
+    label: "WebSocket Request Action",
+    array: true,
+  },
+  {
+    key: "workspaceActions",
+    label: "Workspace Action",
+    array: true,
+  },
+];
+
+export function generatePluginMetadata(
+  plugin: PluginDefinition,
+): PluginMetadata {
+  const metadata: PluginMetadata = {
+    schemaVersion: 1,
+    apiTypes: [],
+    apis: {},
+  };
+
+  for (const definition of definitions) {
+    const value = plugin[definition.key];
+    const items = definition.array ? value : value ? [value] : [];
+
+    if (!Array.isArray(items) || items.length === 0) {
+      continue;
+    }
+
+    metadata.apiTypes.push(definition.key);
+    metadata.apis[definition.key] = {
+      label: definition.label,
+      source: definition.key,
+      count: items.length,
+      items: sanitize(items) as MetadataItem[],
+    };
+  }
+
+  const lifecycleHooks = ["init", "dispose"].filter(
+    (key) =>
+      typeof plugin[key as keyof Pick<PluginDefinition, "init" | "dispose">] ===
+      "function",
+  );
+  if (lifecycleHooks.length > 0) {
+    metadata.apiTypes.push("lifecycle");
+    metadata.apis.lifecycle = {
+      label: "Lifecycle Hook",
+      source: lifecycleHooks.join(","),
+      count: lifecycleHooks.length,
+      items: lifecycleHooks.map((name) => ({ name })),
+    };
+  }
+
+  return metadata;
+}
+
+const entryPath = process.argv[1];
+const outputPath = process.argv[2];
+
+if (!entryPath) {
+  throw new Error("Missing plugin entrypoint path");
+}
+if (!outputPath) {
+  throw new Error("Missing plugin metadata output path");
+}
+
+const require = createRequire(path.join(process.cwd(), "plugin-metadata.js"));
+const moduleExports = require(path.resolve(entryPath)) as PluginDefinition & {
+  plugin?: PluginDefinition;
+  default?: PluginDefinition;
+};
+const plugin = moduleExports.plugin ?? moduleExports.default ?? moduleExports;
+
+if (!plugin || typeof plugin !== "object") {
+  throw new Error("Plugin entrypoint must export a plugin object");
+}
+
+const metadata = generatePluginMetadata(plugin);
+fs.writeFileSync(outputPath, `${JSON.stringify(metadata, null, 2)}\n`);
+
+function sanitize(
+  value: unknown,
+  seen = new WeakSet<object>(),
+): MetadataItem | undefined {
+  if (value === null) return null;
+
+  switch (typeof value) {
+    case "boolean":
+    case "number":
+    case "string":
+      return value;
+    case "bigint":
+      return value.toString();
+    case "function":
+    case "symbol":
+    case "undefined":
+      return undefined;
+  }
+
+  const objectValue = value as object;
+  if (seen.has(objectValue)) {
+    return "[Circular]";
+  }
+
+  seen.add(objectValue);
+
+  if (Array.isArray(value)) {
+    const output = value.map((item) => sanitize(item, seen) ?? null);
+    seen.delete(objectValue);
+    return output;
+  }
+
+  const output: Record<string, MetadataItem> = {};
+  for (const [key, item] of Object.entries(objectValue)) {
+    const sanitized = sanitize(item, seen);
+    if (sanitized !== undefined) {
+      output[key] = sanitized;
+    }
+  }
+
+  seen.delete(objectValue);
+  return output;
+}
diff --git a/packages/plugin-runtime/src/migrations.ts b/packages/plugin-runtime/src/migrations.ts
new file mode 100644
index 0000000..45da919
--- /dev/null
+++ b/packages/plugin-runtime/src/migrations.ts
@@ -0,0 +1,22 @@
+import type { TemplateFunctionPlugin } from "@yaakapp/api";
+
+export function migrateTemplateFunctionSelectOptions(
+  f: TemplateFunctionPlugin,
+): TemplateFunctionPlugin {
+  const migratedArgs = f.args.map((a) => {
+    if (a.type === "select") {
+      // Migrate old options that had 'name' instead of 'label'
+      type LegacyOption = { label?: string; value: string; name?: string };
+      a.options = a.options.map((o) => {
+        const legacy = o as LegacyOption;
+        return {
+          label: legacy.label ?? legacy.name ?? "",
+          value: legacy.value,
+        };
+      });
+    }
+    return a;
+  });
+
+  return { ...f, args: migratedArgs };
+}
diff --git a/packages/plugin-runtime/src/responseBody.ts b/packages/plugin-runtime/src/responseBody.ts
new file mode 100644
index 0000000..527cfe0
--- /dev/null
+++ b/packages/plugin-runtime/src/responseBody.ts
@@ -0,0 +1,194 @@
+import type { HttpResponseBody, ReadHttpResponseBodyOptions } from "@yaakapp/api";
+
+/** Bytes pulled from the host per round trip, when the caller doesn't say. */
+const DEFAULT_CHUNK_SIZE = 1024 * 1024;
+
+/**
+ * The most a plugin buffers by default.
+ *
+ * Reading a body used to be unbounded, so any ceiling is an improvement; this
+ * one is set well above what an API returns and well below what makes the
+ * plugin runtime fall over. `chunks()` has no ceiling, and any caller that
+ * really wants the whole thing can raise `maxBytes`.
+ */
+const DEFAULT_MAX_BYTES = 32 * 1024 * 1024;
+
+/** How long to wait, having caught up with a body still arriving, before looking again. */
+const DEFAULT_POLL_INTERVAL_MS = 100;
+
+/** Fetch one window of body bytes from the host. */
+export type ReadResponseBodyChunk = (offset: number, length: number) => Promise<Uint8Array>;
+
+export interface ResponseBodyInfo {
+  responseId: string;
+  contentLength: number;
+  contentType: string | null;
+  /** Whether the response has finished arriving, so `contentLength` is final. */
+  complete: boolean;
+}
+
+/** What can change while a body is still arriving. */
+export type ResponseBodyProgress = Pick<ResponseBodyInfo, "contentLength" | "complete">;
+
+export interface CreateResponseBodyOptions {
+  /**
+   * Ask the host where the body has got to. Needed only for a body that was
+   * not complete when opened; a reader that has caught up calls this to learn
+   * whether to wait for more or stop.
+   */
+  refresh?: () => Promise<ResponseBodyProgress>;
+  pollIntervalMs?: number;
+}
+
+export function createResponseBody(
+  info: ResponseBodyInfo,
+  readChunk: ReadResponseBodyChunk,
+  { refresh, pollIntervalMs = DEFAULT_POLL_INTERVAL_MS }: CreateResponseBodyOptions = {},
+): HttpResponseBody {
+  const { responseId, contentLength, contentType, complete } = info;
+
+  /**
+   * Yield the body from the start until it has all arrived.
+   *
+   * A complete body is read up to its known length and no further. One still
+   * arriving is followed: on catching up, ask the host whether it has finished,
+   * and if not, wait and look again. So this ends when the response does —
+   * which for a stream that never closes means it doesn't, exactly as
+   * iterating `fetch`'s body would not.
+   */
+  async function* chunks(
+    options?: Pick<ReadHttpResponseBodyOptions, "chunkSize">,
+  ): AsyncIterable<Uint8Array> {
+    const chunkSize = Math.max(1, Math.floor(options?.chunkSize ?? DEFAULT_CHUNK_SIZE));
+    let known = contentLength;
+    let done = complete;
+    let offset = 0;
+
+    while (true) {
+      if (done && offset >= known) return;
+
+      const want = done ? Math.min(chunkSize, known - offset) : chunkSize;
+      const chunk = await readChunk(offset, want);
+      if (chunk.byteLength > 0) {
+        yield chunk;
+        offset += chunk.byteLength;
+        continue;
+      }
+
+      // Caught up. A complete body that came up short simply ended sooner than
+      // the host said; one still arriving needs asking about.
+      if (done || refresh == null) return;
+      ({ contentLength: known, complete: done } = await refresh());
+      if (offset < known) continue;
+      if (done) return;
+      await new Promise((resolve) => setTimeout(resolve, pollIntervalMs));
+    }
+  }
+
+  async function readAll(accessor: string, options?: ReadHttpResponseBodyOptions) {
+    const maxBytes = options?.maxBytes ?? DEFAULT_MAX_BYTES;
+    refuseIfTooBig(accessor, contentLength, maxBytes);
+
+    const parts: Uint8Array[] = [];
+    let total = 0;
+    for await (const chunk of chunks(options)) {
+      total += chunk.byteLength;
+      // The size the host reported is a claim about a moment ago, so check the
+      // bytes actually arriving too.
+      refuseIfTooBig(accessor, total, maxBytes);
+      parts.push(chunk);
+    }
+
+    const bytes = new Uint8Array(total);
+    let offset = 0;
+    for (const part of parts) {
+      bytes.set(part, offset);
+      offset += part.byteLength;
+    }
+    return bytes;
+  }
+
+  return {
+    responseId,
+    contentLength,
+    contentType,
+    complete,
+    chunks,
+    async arrayBuffer(options) {
+      const bytes = await readAll("arrayBuffer", options);
+      return bytes.buffer as ArrayBuffer;
+    },
+    async text(options) {
+      return decodeBody(await readAll("text", options), contentType);
+    },
+    async json<T>(options?: ReadHttpResponseBodyOptions) {
+      return JSON.parse(decodeBody(await readAll("json", options), contentType)) as T;
+    },
+  };
+}
+
+function refuseIfTooBig(accessor: string, bytes: number, maxBytes: number) {
+  if (bytes <= maxBytes) return;
+  throw new Error(
+    `Response body is ${formatBytes(bytes)}, over the ${formatBytes(maxBytes)} limit for ` +
+      `${accessor}(). Read it with chunks() instead, or pass a larger maxBytes.`,
+  );
+}
+
+/**
+ * Decode using the charset the response declared.
+ *
+ * Assuming UTF-8 mangles every response that isn't, and the header is right
+ * there. An unknown label is the one case worth guessing on, since the
+ * alternative is refusing to read a body we can very likely still read.
+ */
+function decodeBody(bytes: Uint8Array, contentType: string | null): string {
+  const charset = parseCharset(contentType);
+  if (charset != null) {
+    try {
+      return new TextDecoder(charset).decode(bytes);
+    } catch {
+      // Not a label this runtime knows.
+    }
+  }
+  // TextDecoder drops a leading BOM on its own.
+  return new TextDecoder("utf-8").decode(bytes);
+}
+
+function parseCharset(contentType: string | null): string | null {
+  const match = contentType?.match(/;\s*charset\s*=\s*"?([^";]+)"?/i);
+  return match?.[1]?.trim() || null;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === Infinity) return "unlimited";
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${value.toFixed(1)} ${units[unit]}`;
+}
+
+/**
+ * Decode a chunk that arrived as base64.
+ *
+ * The desktop transport is a WebSocket carrying JSON text frames, so bytes
+ * have to be spelled out. A host that can pass an ArrayBuffer along skips this.
+ */
+export function decodeBase64Chunk(data: string): Uint8Array {
+  if (typeof Buffer !== "undefined") {
+    const buf = Buffer.from(data, "base64");
+    return new Uint8Array(buf.buffer, buf.byteOffset, buf.byteLength);
+  }
+
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
diff --git a/packages/plugin-runtime/tests/common.test.ts b/packages/plugin-runtime/tests/common.test.ts
new file mode 100644
index 0000000..4a07229
--- /dev/null
+++ b/packages/plugin-runtime/tests/common.test.ts
@@ -0,0 +1,151 @@
+import { applyFormInputDefaults } from "@yaakapp-internal/lib/templateFunction";
+import type { CallTemplateFunctionArgs } from "@yaakapp-internal/plugins";
+import type { Context, DynamicTemplateFunctionArg } from "@yaakapp/api";
+import { describe, expect, test } from "vite-plus/test";
+import { applyDynamicFormInput } from "../src/common";
+
+describe("applyFormInputDefaults", () => {
+  test("Works with top-level select", () => {
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: "select",
+        name: "test",
+        options: [{ label: "Option 1", value: "one" }],
+        defaultValue: "one",
+      },
+    ];
+    expect(applyFormInputDefaults(args, {})).toEqual({
+      test: "one",
+    });
+  });
+
+  test("Works with existing value", () => {
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: "select",
+        name: "test",
+        options: [{ label: "Option 1", value: "one" }],
+        defaultValue: "one",
+      },
+    ];
+    expect(applyFormInputDefaults(args, { test: "explicit" })).toEqual({
+      test: "explicit",
+    });
+  });
+
+  test("Works with recursive select", () => {
+    const args: DynamicTemplateFunctionArg[] = [
+      { type: "text", name: "dummy", defaultValue: "top" },
+      {
+        type: "accordion",
+        label: "Test",
+        inputs: [
+          { type: "text", name: "name", defaultValue: "hello" },
+          {
+            type: "select",
+            name: "test",
+            options: [{ label: "Option 1", value: "one" }],
+            defaultValue: "one",
+          },
+        ],
+      },
+    ];
+    expect(applyFormInputDefaults(args, {})).toEqual({
+      dummy: "top",
+      test: "one",
+      name: "hello",
+    });
+  });
+
+  test("Works with dynamic options", () => {
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: "select",
+        name: "test",
+        defaultValue: "one",
+        options: [],
+        dynamic() {
+          return { options: [{ label: "Option 1", value: "one" }] };
+        },
+      },
+    ];
+    expect(applyFormInputDefaults(args, {})).toEqual({
+      test: "one",
+    });
+    expect(applyFormInputDefaults(args, {})).toEqual({
+      test: "one",
+    });
+  });
+});
+
+describe("applyDynamicFormInput", () => {
+  test("Works with plain input", async () => {
+    const ctx = {} as Context;
+    const args: DynamicTemplateFunctionArg[] = [
+      { type: "text", name: "name" },
+      { type: "checkbox", name: "checked" },
+    ];
+    const callArgs: CallTemplateFunctionArgs = {
+      values: {},
+      purpose: "preview",
+    };
+    expect(await applyDynamicFormInput(ctx, args, callArgs)).toEqual([
+      { type: "text", name: "name" },
+      { type: "checkbox", name: "checked" },
+    ]);
+  });
+
+  test("Works with dynamic input", async () => {
+    const ctx = {} as Context;
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: "text",
+        name: "name",
+        async dynamic(_ctx, _args) {
+          return { hidden: true };
+        },
+      },
+    ];
+    const callArgs: CallTemplateFunctionArgs = {
+      values: {},
+      purpose: "preview",
+    };
+    expect(await applyDynamicFormInput(ctx, args, callArgs)).toEqual([
+      { type: "text", name: "name", hidden: true },
+    ]);
+  });
+
+  test("Works with recursive dynamic input", async () => {
+    const ctx = {} as Context;
+    const callArgs: CallTemplateFunctionArgs = {
+      values: { hello: "world" },
+      purpose: "preview",
+    };
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: "banner",
+        inputs: [
+          {
+            type: "text",
+            name: "name",
+            async dynamic(_ctx, args) {
+              return { hidden: args.values.hello === "world" };
+            },
+          },
+        ],
+      },
+    ];
+    expect(await applyDynamicFormInput(ctx, args, callArgs)).toEqual([
+      {
+        type: "banner",
+        inputs: [
+          {
+            type: "text",
+            name: "name",
+            hidden: true,
+          },
+        ],
+      },
+    ]);
+  });
+});
diff --git a/packages/plugin-runtime/tests/responseBody.test.ts b/packages/plugin-runtime/tests/responseBody.test.ts
new file mode 100644
index 0000000..cee5f3b
--- /dev/null
+++ b/packages/plugin-runtime/tests/responseBody.test.ts
@@ -0,0 +1,203 @@
+import { describe, expect, test } from "vite-plus/test";
+import { createResponseBody, decodeBase64Chunk } from "../src/responseBody";
+
+/** A finished body, in a store that records every window it was asked for. */
+function fakeBody(bytes: Uint8Array, contentType: string | null) {
+  const reads: Array<[number, number]> = [];
+  const body = createResponseBody(
+    { responseId: "rs_test", contentLength: bytes.byteLength, contentType, complete: true },
+    async (offset, length) => {
+      reads.push([offset, length]);
+      return bytes.slice(offset, offset + length);
+    },
+  );
+  return { body, reads };
+}
+
+/**
+ * A body still arriving: it grows by one script step every time the reader
+ * asks the host where it has got to, and completes on the last step.
+ */
+function streamingBody(steps: string[], contentType = "text/plain") {
+  let stored = new Uint8Array();
+  let step = 0;
+  let refreshes = 0;
+  const advance = () => {
+    if (step < steps.length) {
+      const next = utf8(steps[step]!);
+      const grown = new Uint8Array(stored.byteLength + next.byteLength);
+      grown.set(stored);
+      grown.set(next, stored.byteLength);
+      stored = grown;
+      step++;
+    }
+    return { contentLength: stored.byteLength, complete: step >= steps.length };
+  };
+  const body = createResponseBody(
+    { responseId: "rs_live", contentLength: 0, contentType, complete: false },
+    async (offset, length) => stored.slice(offset, offset + length),
+    {
+      refresh: async () => {
+        refreshes++;
+        return advance();
+      },
+      pollIntervalMs: 1,
+    },
+  );
+  return { body, refreshCount: () => refreshes };
+}
+
+function utf8(text: string) {
+  return new TextEncoder().encode(text);
+}
+
+describe("response body", () => {
+  test("pulls a body in chunks and reassembles it", async () => {
+    const { body, reads } = fakeBody(utf8("abcdefghij"), "text/plain");
+
+    expect(await body.text({ chunkSize: 4 })).toEqual("abcdefghij");
+    expect(reads).toEqual([
+      [0, 4],
+      [4, 4],
+      [8, 2],
+    ]);
+  });
+
+  test("can be read more than once, unlike fetch", async () => {
+    const { body } = fakeBody(utf8('{"a":1}'), "application/json");
+
+    expect(await body.text()).toEqual('{"a":1}');
+    expect(await body.json()).toEqual({ a: 1 });
+    expect(new Uint8Array(await body.arrayBuffer())).toEqual(utf8('{"a":1}'));
+  });
+
+  test("decodes using the charset the response declared", async () => {
+    // "café naïve" as Latin-1, which is mojibake if read as UTF-8.
+    const latin1 = new Uint8Array([0x63, 0x61, 0x66, 0xe9, 0x20, 0x6e, 0x61, 0xef, 0x76, 0x65]);
+
+    const declared = fakeBody(latin1, "text/plain; charset=iso-8859-1");
+    expect(await declared.body.text()).toEqual("café naïve");
+
+    const undeclared = fakeBody(latin1, "text/plain");
+    expect(await undeclared.body.text()).not.toEqual("café naïve");
+  });
+
+  test("falls back to UTF-8 for a charset the runtime doesn't know", async () => {
+    const { body } = fakeBody(utf8("hello"), "text/plain; charset=not-a-real-charset");
+    expect(await body.text()).toEqual("hello");
+  });
+
+  test("drops a UTF-8 BOM", async () => {
+    const withBom = new Uint8Array([0xef, 0xbb, 0xbf, ...utf8('{"a":1}')]);
+    const { body } = fakeBody(withBom, "application/json");
+
+    expect(await body.text()).toEqual('{"a":1}');
+    expect(await body.json()).toEqual({ a: 1 });
+  });
+
+  test("refuses to buffer past maxBytes, and says what to do instead", async () => {
+    const { body } = fakeBody(utf8("x".repeat(100)), "text/plain");
+
+    await expect(body.text({ maxBytes: 50 })).rejects.toThrow(/chunks/);
+    await expect(body.json({ maxBytes: 50 })).rejects.toThrow(/over the/);
+    await expect(body.arrayBuffer({ maxBytes: 50 })).rejects.toThrow(/arrayBuffer/);
+
+    // The ceiling is the caller's to raise.
+    expect(await body.text({ maxBytes: 100 })).toHaveLength(100);
+  });
+
+  test("streams past maxBytes through chunks()", async () => {
+    const { body } = fakeBody(utf8("x".repeat(100)), "text/plain");
+
+    let total = 0;
+    for await (const chunk of body.chunks({ chunkSize: 10 })) {
+      total += chunk.byteLength;
+    }
+    expect(total).toEqual(100);
+  });
+
+  test("stops early when the host runs out of bytes sooner than it claimed", async () => {
+    // contentLength says 100; the store only ever hands back 10.
+    const body = createResponseBody(
+      { responseId: "rs_test", contentLength: 100, contentType: "text/plain", complete: true },
+      async (offset) => (offset === 0 ? utf8("0123456789") : new Uint8Array()),
+    );
+
+    expect(await body.text()).toEqual("0123456789");
+  });
+
+  test("a response with no body reads as empty", async () => {
+    const { body, reads } = fakeBody(new Uint8Array(), "application/json");
+
+    expect(body.contentLength).toEqual(0);
+    expect(await body.text()).toEqual("");
+    expect(reads).toEqual([]);
+  });
+
+  test("keeps binary bytes intact", async () => {
+    const png = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0xff]);
+    const { body } = fakeBody(png, "image/png");
+
+    expect(new Uint8Array(await body.arrayBuffer({ chunkSize: 3 }))).toEqual(png);
+  });
+});
+
+describe("a response still arriving", () => {
+  test("chunks() follows it until it finishes", async () => {
+    const { body, refreshCount } = streamingBody(["data: 1\n", "data: 2\n", "data: 3\n"]);
+    expect(body.complete).toBe(false);
+
+    const seen: string[] = [];
+    for await (const chunk of body.chunks()) {
+      seen.push(new TextDecoder().decode(chunk));
+    }
+
+    expect(seen.join("")).toEqual("data: 1\ndata: 2\ndata: 3\n");
+    // Asked once per catch-up, and stopped as soon as the host said it was done.
+    expect(refreshCount()).toEqual(3);
+  });
+
+  test("text() waits for the rest rather than returning a prefix", async () => {
+    const { body } = streamingBody(['{"token":', '"abc"}']);
+    expect(await body.json()).toEqual({ token: "abc" });
+  });
+
+  test("keeps waiting through a stretch with nothing new", async () => {
+    // Two refreshes report no growth before the body finally moves.
+    const { body } = streamingBody(["", "", "late"]);
+    expect(await body.text()).toEqual("late");
+  });
+
+  test("still refuses to buffer past maxBytes as it streams", async () => {
+    const { body } = streamingBody(["x".repeat(40), "x".repeat(40), "x".repeat(40)]);
+    await expect(body.text({ maxBytes: 100 })).rejects.toThrow(/chunks/);
+  });
+
+  test("a finished body never asks the host again", async () => {
+    let refreshes = 0;
+    const body = createResponseBody(
+      { responseId: "rs_done", contentLength: 5, contentType: null, complete: true },
+      async (offset, length) => utf8("hello").slice(offset, offset + length),
+      {
+        refresh: async () => {
+          refreshes++;
+          return { contentLength: 5, complete: true };
+        },
+      },
+    );
+    expect(await body.text()).toEqual("hello");
+    expect(refreshes).toEqual(0);
+  });
+});
+
+describe("decodeBase64Chunk", () => {
+  test("round-trips arbitrary bytes", () => {
+    const bytes = new Uint8Array([0, 1, 127, 128, 254, 255]);
+    const base64 = Buffer.from(bytes).toString("base64");
+    expect(decodeBase64Chunk(base64)).toEqual(bytes);
+  });
+
+  test("decodes an empty chunk", () => {
+    expect(decodeBase64Chunk("")).toEqual(new Uint8Array());
+  });
+});
diff --git a/packages/plugin-runtime/tests/sendHttpRequest.test.ts b/packages/plugin-runtime/tests/sendHttpRequest.test.ts
new file mode 100644
index 0000000..b781e36
--- /dev/null
+++ b/packages/plugin-runtime/tests/sendHttpRequest.test.ts
@@ -0,0 +1,65 @@
+import { mkdtemp, mkdir, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import type { InternalEvent } from "@yaakapp/api";
+import { expect, test } from "vite-plus/test";
+import { EventChannel } from "../src/EventChannel";
+import { PluginInstance } from "../src/PluginInstance";
+
+test("the runtime forwards per-send environments without changing plugin context", async () => {
+  const dir = await mkdtemp(path.join(tmpdir(), "yaak-send-environment-"));
+  await mkdir(path.join(dir, "build"));
+  await writeFile(
+    path.join(dir, "build/index.js"),
+    `exports.plugin = { async init(ctx) {
+      await Promise.all(["ev_a", "ev_b", undefined].map(environmentId =>
+        ctx.httpRequest.send({ httpRequest: { id: "rq_test" }, environmentId })
+      ));
+    } };`,
+  );
+  const channel = new EventChannel();
+  const context = { workspaceId: "wk_test", label: "test-window" };
+  const bootRequest = { dir, watch: false };
+  const instance = new PluginInstance({ bootRequest, pluginRefId: "test", context }, channel);
+  const sends: InternalEvent[] = [];
+  const booted = new Promise<void>((resolve, reject) => {
+    channel.listen((event) => {
+      if (event.payload.type === "send_http_request_request") {
+        // Match the JSON transport used by the real plugin host.
+        sends.push(JSON.parse(JSON.stringify(event)) as InternalEvent);
+        instance.postMessage({
+          ...event,
+          id: `reply-${event.id}`,
+          replyId: event.id,
+          payload: { type: "error_response", error: "test host received send" },
+        });
+      } else if (event.payload.type === "error_response") {
+        // The stub host rejects the sends after capturing them.
+        if (event.payload.error === "test host received send") resolve();
+        else reject(new Error(event.payload.error));
+      } else if (event.payload.type === "boot_response") {
+        reject(new Error("Expected the test host's send error"));
+      }
+    });
+  });
+  try {
+    instance.postMessage({
+      id: "boot",
+      replyId: null,
+      pluginRefId: "test",
+      pluginName: "test",
+      context,
+      payload: { type: "boot_request", ...bootRequest },
+    });
+    await booted;
+    expect(sends.map((event) => event.payload)).toEqual([
+      { type: "send_http_request_request", httpRequest: { id: "rq_test" }, environmentId: "ev_a" },
+      { type: "send_http_request_request", httpRequest: { id: "rq_test" }, environmentId: "ev_b" },
+      { type: "send_http_request_request", httpRequest: { id: "rq_test" } },
+    ]);
+    expect(sends.map((event) => event.context)).toEqual([context, context, context]);
+  } finally {
+    await instance.terminate();
+    await rm(dir, { recursive: true, force: true });
+  }
+});
diff --git a/packages/plugin-runtime/tsconfig.json b/packages/plugin-runtime/tsconfig.json
new file mode 100644
index 0000000..6d7ac8c
--- /dev/null
+++ b/packages/plugin-runtime/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "node16",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es2021",
+    "lib": ["es2021"],
+    "noImplicitAny": false,
+    "moduleResolution": "node16",
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "rootDir": "src",
+    "outDir": "build"
+  },
+  "include": ["src"]
+}
diff --git a/packages/tailwind-config/index.css b/packages/tailwind-config/index.css
new file mode 100644
index 0000000..20163ec
--- /dev/null
+++ b/packages/tailwind-config/index.css
@@ -0,0 +1,124 @@
+@custom-variant dark (&:is([data-resolved-appearance="dark"] *));
+@custom-variant hocus (&:hover, &:focus-visible, &.focus:focus);
+@custom-variant focus-visible-or-class (&:focus-visible, &.focus:focus);
+
+@theme inline {
+  --font-mono:
+    var(--font-family-editor), JetBrains Mono, ui-monospace, SFMono-Regular,
+    Menlo, Monaco, Fira Code, Ubuntu Mono, Consolas, Liberation Mono,
+    Courier New, DejaVu Sans Mono, Hack, monospace;
+  --font-sans:
+    var(--font-family-interface), Inter UI, -apple-system, BlinkMacSystemFont,
+    Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-serif: initial;
+
+  --text-*: initial;
+  --text-4xs: 0.6rem;
+  --text-3xs: 0.675rem;
+  --text-2xs: 0.75rem;
+  --text-xs: 0.8rem;
+  --text-sm: 0.9rem;
+  --text-base: 1rem;
+  --text-lg: 1.12rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 2rem;
+  --text-4xl: 2.5rem;
+  --text-5xl: 3rem;
+  --text-editor: var(--editor-font-size);
+  --text-shrink: 0.8em;
+
+  --shadow-*: initial;
+  --shadow: 0 1px 3px 0 var(--shadow);
+  --shadow-lg: 0 10px 15px -3px var(--shadow);
+
+  --color-*: initial;
+  --color-transparent: transparent;
+  --color-placeholder: var(--textSubtlest);
+  --color-shadow: var(--shadow);
+  --color-backdrop: var(--backdrop);
+  --color-selection: var(--selection);
+  --color-surface: var(--surface);
+  --color-surface-highlight: var(--surfaceHighlight);
+  --color-surface-active: var(--surfaceActive);
+  --color-text: var(--text);
+  --color-text-subtle: var(--textSubtle);
+  --color-text-subtlest: var(--textSubtlest);
+  --color-border: var(--border);
+  --color-border-subtle: var(--borderSubtle);
+  --color-border-focus: var(--borderFocus);
+  --color-primary: var(--primary);
+  --color-danger: var(--danger);
+  --color-secondary: var(--secondary);
+  --color-success: var(--success);
+  --color-info: var(--info);
+  --color-notice: var(--notice);
+  --color-warning: var(--warning);
+
+  --animate-blinkRing: blinkRing 150ms step-start 400ms infinite;
+
+  --opacity-disabled: 30%;
+
+  --height-2xs: 1.4rem;
+  --height-xs: 1.8rem;
+  --height-sm: 2rem;
+  --height-md: 2.3rem;
+  --height-lg: 2.6rem;
+
+  --width-2xs: 1.4rem;
+  --width-xs: 1.8rem;
+  --width-sm: 2rem;
+  --width-md: 2.3rem;
+  --width-lg: 2.6rem;
+
+  --min-height-2xs: 1.4rem;
+  --min-height-xs: 1.8rem;
+  --min-height-sm: 2rem;
+  --min-height-md: 2.3rem;
+  --min-height-lg: 2.6rem;
+
+  --min-width-2xs: 1.4rem;
+  --min-width-xs: 1.8rem;
+  --min-width-sm: 2rem;
+  --min-width-md: 2.3rem;
+  --min-width-lg: 2.6rem;
+
+  --leading-xs: calc(1.75rem - 2px);
+  --leading-sm: calc(2rem - 2px);
+  --leading-md: calc(2.5rem - 2px);
+
+  --transition-property-grid: grid;
+
+  @keyframes blinkRing {
+    0%,
+    49% {
+      --tw-ring-color: var(--primary);
+    }
+    50%,
+    99% {
+      --tw-ring-color: transparent;
+    }
+    100% {
+      --tw-ring-color: var(--primary);
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
new file mode 100644
index 0000000..eee96c8
--- /dev/null
+++ b/packages/tailwind-config/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@yaakapp-internal/tailwind-config",
+  "version": "1.0.0",
+  "private": true,
+  "style": "index.css"
+}
diff --git a/packages/theme/package.json b/packages/theme/package.json
new file mode 100644
index 0000000..8ece002
--- /dev/null
+++ b/packages/theme/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@yaakapp-internal/theme",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "@tauri-apps/api": "^2.11.0",
+    "@yaakapp-internal/plugins": "^1.0.0",
+    "parse-color": "^1.0.0"
+  }
+}
diff --git a/packages/theme/src/appearance.ts b/packages/theme/src/appearance.ts
new file mode 100644
index 0000000..6ef5db3
--- /dev/null
+++ b/packages/theme/src/appearance.ts
@@ -0,0 +1,85 @@
+import { platform } from "@yaakapp-internal/platform";
+
+export type Appearance = "light" | "dark";
+
+const SYSTEM_APPEARANCE_CHANGE_EVENT = "system_appearance_change";
+
+declare global {
+  interface Window {
+    __YAAK_INITIAL_APPEARANCE__?: Appearance;
+  }
+}
+
+// NOTE: On macOS and Linux the backend detects the appearance the OS prefers and injects
+//  it here, later emitting change events. This is required because applying a theme forces
+//  the window appearance, which poisons what the webview reports (CSS media queries and
+//  window theme events follow the override).
+export function getSystemAppearance(): Appearance | null {
+  const appearance = window.__YAAK_INITIAL_APPEARANCE__;
+  return appearance === "dark" || appearance === "light" ? appearance : null;
+}
+
+export function getCSSAppearance(): Appearance {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export async function getWindowAppearance(): Promise<Appearance> {
+  const appearance = await platform.window.theme();
+  return appearance ?? getCSSAppearance();
+}
+
+export function subscribeToCSSAppearanceChange(cb: (appearance: Appearance) => void): () => void {
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  const listener = () => cb(media.matches ? "dark" : "light");
+  media.addEventListener("change", listener);
+  return () => media.removeEventListener("change", listener);
+}
+
+export function subscribeToWindowAppearanceChange(
+  cb: (appearance: Appearance) => void,
+): () => void {
+  return platform.window.onThemeChanged(cb);
+}
+
+export function subscribeToSystemAppearanceChange(
+  cb: (appearance: Appearance) => void,
+): () => void {
+  return platform.listen<Appearance>(SYSTEM_APPEARANCE_CHANGE_EVENT, cb);
+}
+
+export function resolveAppearance(
+  preferredAppearance: Appearance,
+  appearanceSetting: string,
+): Appearance {
+  const appearance = appearanceSetting === "system" ? preferredAppearance : appearanceSetting;
+  return appearance === "dark" ? "dark" : "light";
+}
+
+export function subscribeToPreferredAppearance(cb: (appearance: Appearance) => void) {
+  const systemAppearance = getSystemAppearance();
+  if (systemAppearance != null) {
+    cb(systemAppearance);
+    return subscribeToSystemAppearanceChange(cb);
+  }
+
+  cb(getCSSAppearance());
+  void getWindowAppearance().then(cb);
+  return subscribeToPreferredAppearanceChange(cb);
+}
+
+export function subscribeToPreferredAppearanceChange(cb: (appearance: Appearance) => void) {
+  if (getSystemAppearance() != null) {
+    // The CSS and window sources are poisoned by forced window appearances, so only
+    // listen to the backend's system appearance detection when it's available
+    return subscribeToSystemAppearanceChange(cb);
+  }
+
+  const unsubscribeCSS = subscribeToCSSAppearanceChange(cb);
+  const unsubscribeWindow = subscribeToWindowAppearanceChange(cb);
+  const unsubscribeSystem = subscribeToSystemAppearanceChange(cb);
+  return () => {
+    unsubscribeCSS();
+    unsubscribeWindow();
+    unsubscribeSystem();
+  };
+}
diff --git a/packages/theme/src/defaultThemes.ts b/packages/theme/src/defaultThemes.ts
new file mode 100644
index 0000000..5b944db
--- /dev/null
+++ b/packages/theme/src/defaultThemes.ts
@@ -0,0 +1,76 @@
+import type { Theme } from "@yaakapp-internal/plugins";
+
+export const defaultDarkTheme: Theme = {
+  id: "yaak-dark",
+  label: "Yaak",
+  dark: true,
+  base: {
+    surface: "hsl(244,23%,14%)",
+    surfaceHighlight: "hsl(244,23%,20%)",
+    text: "hsl(245,23%,85%)",
+    textSubtle: "hsl(245,18%,58%)",
+    textSubtlest: "hsl(245,18%,45%)",
+    border: "hsl(244,23%,25%)",
+    primary: "hsl(266,100%,79%)",
+    secondary: "hsl(245,23%,60%)",
+    info: "hsl(206,100%,63%)",
+    success: "hsl(150,99%,44%)",
+    notice: "hsl(48,80%,63%)",
+    warning: "hsl(28,100%,61%)",
+    danger: "hsl(342,90%,68%)",
+  },
+  components: {
+    button: {
+      primary: "hsl(266,100%,71.1%)",
+      secondary: "hsl(244,23%,54%)",
+      info: "hsl(206,100%,56.7%)",
+      success: "hsl(150,99%,37.4%)",
+      notice: "hsl(48,80%,50.4%)",
+      warning: "hsl(28,100%,54.9%)",
+      danger: "hsl(342,90%,61.2%)",
+    },
+    dialog: {
+      border: "hsl(244,23%,24%)",
+    },
+    sidebar: {
+      surface: "hsl(243,23%,16%)",
+      border: "hsl(244,23%,22%)",
+    },
+    responsePane: {
+      surface: "hsl(243,23%,16%)",
+      border: "hsl(246,23%,23%)",
+    },
+    appHeader: {
+      surface: "hsl(244,23%,12%)",
+      border: "hsl(244,23%,21%)",
+    },
+  },
+};
+
+export const defaultLightTheme: Theme = {
+  id: "yaak-light",
+  label: "Yaak",
+  dark: false,
+  base: {
+    surface: "hsl(0,0%,100%)",
+    surfaceHighlight: "hsl(218,24%,92%)",
+    text: "hsl(217,24%,10%)",
+    textSubtle: "hsl(217,24%,40%)",
+    textSubtlest: "hsl(217,24%,58%)",
+    border: "hsl(217,22%,90%)",
+    primary: "hsl(266,100%,60%)",
+    secondary: "hsl(220,24%,50%)",
+    info: "hsl(206,100%,40%)",
+    success: "hsl(139,66%,34%)",
+    notice: "hsl(45,100%,34%)",
+    warning: "hsl(30,100%,36%)",
+    danger: "hsl(335,75%,48%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(220,20%,98%)",
+      border: "hsl(217,22%,88%)",
+      surfaceHighlight: "hsl(217,25%,94%)",
+    },
+  },
+};
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
new file mode 100644
index 0000000..f92166c
--- /dev/null
+++ b/packages/theme/src/index.ts
@@ -0,0 +1,28 @@
+export type { Appearance } from "./appearance";
+export {
+  subscribeToCSSAppearanceChange,
+  getCSSAppearance,
+  getSystemAppearance,
+  getWindowAppearance,
+  resolveAppearance,
+  subscribeToPreferredAppearance,
+  subscribeToPreferredAppearanceChange,
+  subscribeToSystemAppearanceChange,
+  subscribeToWindowAppearanceChange,
+} from "./appearance";
+export { defaultDarkTheme, defaultLightTheme } from "./defaultThemes";
+export { YaakColor } from "./yaakColor";
+export type { DocumentPlatform, YaakColorKey, YaakColors, YaakTheme } from "./window";
+export {
+  addThemeStylesToDocument,
+  applyThemeToDocument,
+  completeColorVariables,
+  completeFullColorVariables,
+  completePartialColorVariables,
+  completeTheme,
+  getThemeCSS,
+  indent,
+  platformFromUserAgent,
+  setThemeOnDocument,
+  setPlatformOnDocument,
+} from "./window";
diff --git a/packages/theme/src/window.ts b/packages/theme/src/window.ts
new file mode 100644
index 0000000..485eb84
--- /dev/null
+++ b/packages/theme/src/window.ts
@@ -0,0 +1,413 @@
+import type { Theme, ThemeComponentColors } from "@yaakapp-internal/plugins";
+import { defaultDarkTheme, defaultLightTheme } from "./defaultThemes";
+import { YaakColor } from "./yaakColor";
+
+export type YaakColors = {
+  surface: YaakColor;
+  surfaceHighlight?: YaakColor;
+  surfaceActive?: YaakColor;
+  text: YaakColor;
+  textSubtle?: YaakColor;
+  textSubtlest?: YaakColor;
+  border?: YaakColor;
+  borderSubtle?: YaakColor;
+  borderFocus?: YaakColor;
+  shadow?: YaakColor;
+  backdrop?: YaakColor;
+  selection?: YaakColor;
+  primary?: YaakColor;
+  secondary?: YaakColor;
+  info?: YaakColor;
+  success?: YaakColor;
+  notice?: YaakColor;
+  warning?: YaakColor;
+  danger?: YaakColor;
+};
+
+export type YaakTheme = {
+  id: string;
+  name: string;
+  base: YaakColors;
+  components?: Partial<{
+    dialog: Partial<YaakColors>;
+    menu: Partial<YaakColors>;
+    toast: Partial<YaakColors>;
+    sidebar: Partial<YaakColors>;
+    responsePane: Partial<YaakColors>;
+    appHeader: Partial<YaakColors>;
+    button: Partial<YaakColors>;
+    banner: Partial<YaakColors>;
+    templateTag: Partial<YaakColors>;
+    urlBar: Partial<YaakColors>;
+    editor: Partial<YaakColors>;
+    input: Partial<YaakColors>;
+  }>;
+};
+
+export type YaakColorKey = keyof ThemeComponentColors;
+export type DocumentPlatform = "linux" | "macos" | "windows" | "unknown";
+
+type ComponentName = keyof NonNullable<Theme["components"]>;
+type CSSVariables = Record<YaakColorKey, string | undefined>;
+
+export function completeFullColorVariables(theme: Theme, cmp: Partial<CSSVariables>): CSSVariables {
+  const color = (value: string | undefined) => yc(theme, value);
+  const vars: CSSVariables = {
+    surface: cmp.surface,
+    surfaceHighlight: cmp.surfaceHighlight ?? color(cmp.surface)?.lift(0.06).css(),
+    surfaceActive: cmp.surfaceActive ?? color(cmp.primary)?.lower(0.2).translucify(0.8).css(),
+    backdrop: cmp.backdrop ?? color(cmp.surface)?.lower(0.2).translucify(0.2).css(),
+    selection: cmp.selection ?? color(cmp.primary)?.lower(0.1).translucify(0.7).css(),
+    border: cmp.border,
+    borderSubtle: cmp.borderSubtle,
+    borderFocus: cmp.borderFocus ?? color(cmp.info)?.translucify(0.5)?.css(),
+    text: cmp.text,
+    textSubtle: cmp.textSubtle,
+    textSubtlest: cmp.textSubtlest,
+    shadow:
+      cmp.shadow ??
+      YaakColor.black()
+        .translucify(theme.dark ? 0.7 : 0.93)
+        .css(),
+    primary: cmp.primary,
+    secondary: cmp.secondary,
+    info: cmp.info,
+    success: cmp.success,
+    notice: cmp.notice,
+    warning: cmp.warning,
+    danger: cmp.danger,
+  };
+
+  const themeColor = (value: string) => new YaakColor(value, theme.dark ? "dark" : "light");
+  const themeSurface = themeColor(theme.dark ? "oklch(23% 0 0)" : "oklch(100% 0 0)");
+  const surface = themeColor(vars.surface ?? themeSurface.css());
+  const reference = surface.compositeOver(themeSurface);
+  const seed = themeColor(vars.surface ?? vars.surfaceHighlight ?? vars.border ?? surface.css());
+  const textBase = seed.desaturate(0.6).opacify(1);
+  const borderBase = seed.opacify(1);
+  const text = vars.text ?? textBase.withContrast(reference, 11).css();
+  const textColor = themeColor(text);
+
+  return normalizeColorVariables(theme, {
+    ...vars,
+    text,
+    textSubtle: vars.textSubtle ?? textColor.lower(0.2).css(),
+    textSubtlest: vars.textSubtlest ?? textColor.lower(0.4).css(),
+    border: vars.border ?? borderBase.desaturate(0.2).withContrast(reference, 3).css(),
+    borderSubtle:
+      vars.borderSubtle ?? borderBase.desaturate(0.2).withContrast(reference, 1.2).css(),
+  });
+}
+
+export function completePartialColorVariables(
+  theme: Theme,
+  cmp: Partial<CSSVariables>,
+): CSSVariables {
+  const color = (value: string | undefined) => yc(theme, value);
+  const text = color(cmp.text);
+
+  return normalizeColorVariables(theme, {
+    surface: cmp.surface,
+    surfaceHighlight: cmp.surfaceHighlight ?? color(cmp.surface)?.lift(0.06).css(),
+    surfaceActive: cmp.surfaceActive ?? color(cmp.primary)?.lower(0.2).translucify(0.8).css(),
+    backdrop: cmp.backdrop ?? color(cmp.surface)?.lower(0.2).translucify(0.2).css(),
+    selection: cmp.selection ?? color(cmp.primary)?.lower(0.1).translucify(0.7).css(),
+    border: cmp.border ?? color(cmp.surface)?.lift(0.11).css(),
+    borderSubtle: cmp.borderSubtle ?? color(cmp.border)?.lower(0.06).css(),
+    borderFocus: cmp.borderFocus ?? color(cmp.info)?.translucify(0.5).css(),
+    text: cmp.text,
+    textSubtle: cmp.textSubtle ?? text?.lower(0.3).css(),
+    textSubtlest: cmp.textSubtlest ?? text?.lower(0.5).css(),
+    shadow:
+      cmp.shadow ??
+      YaakColor.black()
+        .translucify(theme.dark ? 0.7 : 0.93)
+        .css(),
+    primary: cmp.primary,
+    secondary: cmp.secondary,
+    info: cmp.info,
+    success: cmp.success,
+    notice: cmp.notice,
+    warning: cmp.warning,
+    danger: cmp.danger,
+  });
+}
+
+export const completeColorVariables = completeFullColorVariables;
+
+function normalizeColorVariables(theme: Theme, vars: CSSVariables): CSSVariables {
+  const normalized: CSSVariables = {} as CSSVariables;
+
+  for (const [key, value] of Object.entries(vars)) {
+    normalized[key as YaakColorKey] = value == null ? undefined : yc(theme, value).css();
+  }
+
+  return normalized;
+}
+
+function templateTagColorVariables(theme: Theme, color: YaakColor): CSSVariables {
+  return completeFullColorVariables(theme, {
+    // Lift toward the foreground, but not all the way. liftMax() pushes lightness to an
+    // extreme, and the two extremes don't behave alike: lightening past the sRGB gamut clips
+    // to a still-tinted color, while darkening to zero lightness collapses every hue to black.
+    // That's why tags kept their color in dark mode and turned black in light. Stopping short
+    // keeps the hue in both, and still clears 6:1 against the tag's own surface.
+    text: color.lift(0.6).css(),
+    textSubtle: color.lift(0.5).css(),
+    textSubtlest: color.css(),
+    surface: color.lower(0.2).translucify(0.8).css(),
+    border: color.translucify(0.6).css(),
+    borderSubtle: color.translucify(0.8).css(),
+    surfaceHighlight: color.lower(0.1).translucify(0.7).css(),
+  });
+}
+
+function toastColorVariables(theme: Theme, color: YaakColor): CSSVariables {
+  return completeFullColorVariables(theme, {
+    surface: color.translucify(0.9).css(),
+    surfaceHighlight: color.translucify(0.8).css(),
+  });
+}
+
+function bannerColorVariables(theme: Theme, color: YaakColor): CSSVariables {
+  return completeFullColorVariables(theme, {
+    text: color.desaturate(0.5).lift(0.12).css(),
+    textSubtle: color.desaturate(0.58).lift(0.04).translucify(0.04).css(),
+    textSubtlest: color.desaturate(0.65).translucify(0.18).css(),
+    surface: color.translucify(0.95).css(),
+    surfaceHighlight: color.translucify(0.85).css(),
+    border: color.lift(0.3).translucify(0.8).css(),
+  });
+}
+
+function buttonSolidColorVariables(
+  theme: Theme,
+  color: YaakColor,
+  isDefault = false,
+): CSSVariables {
+  const vars: Partial<CSSVariables> = {
+    surface: color.lower(0.3).css(),
+    surfaceHighlight: color.lower(0.1).css(),
+  };
+
+  if (isDefault) {
+    vars.surface = undefined;
+    vars.surfaceHighlight = color.lift(0.08).css();
+  }
+
+  return completeFullColorVariables(theme, vars);
+}
+
+function buttonBorderColorVariables(
+  theme: Theme,
+  color: YaakColor,
+  isDefault = false,
+): CSSVariables {
+  const vars: Partial<CSSVariables> = {
+    text: color.desaturate(0.4).lift(1).css(),
+    textSubtle: color.desaturate(0.4).lift(0.55).css(),
+    surfaceHighlight: color.translucify(0.8).css(),
+    borderSubtle: color.translucify(0.5).css(),
+    border: color.translucify(0.3).css(),
+  };
+
+  if (isDefault) {
+    vars.borderSubtle = color.lift(0.28).css();
+    vars.border = color.lift(0.5).css();
+  }
+
+  return completeFullColorVariables(theme, vars);
+}
+
+function variablesToCSS(
+  selector: string | null,
+  vars: Partial<CSSVariables> | null,
+): string | null {
+  if (vars == null) return null;
+
+  const css = Object.entries(vars)
+    .filter(([, value]) => value)
+    .map(([name, value]) => `--${name}: ${value};`)
+    .join("\n");
+
+  return selector == null ? css : `${selector} {\n${indent(css)}\n}`;
+}
+
+function componentCSS(component: ComponentName, vars: CSSVariables): string | null {
+  return variablesToCSS(`.x-theme-${component}`, vars);
+}
+
+function buttonCSS(
+  theme: Theme,
+  colorKey: YaakColorKey,
+  colors?: ThemeComponentColors,
+): string | null {
+  const color = yc(theme, colors?.[colorKey]);
+  if (color == null) return null;
+
+  return [
+    variablesToCSS(`.x-theme-button--solid--${colorKey}`, buttonSolidColorVariables(theme, color)),
+    variablesToCSS(
+      `.x-theme-button--border--${colorKey}`,
+      buttonBorderColorVariables(theme, color),
+    ),
+  ].join("\n\n");
+}
+
+function bannerCSS(
+  theme: Theme,
+  colorKey: YaakColorKey,
+  colors?: ThemeComponentColors,
+): string | null {
+  const color = yc(theme, colors?.[colorKey]);
+  if (color == null) return null;
+
+  return variablesToCSS(`.x-theme-banner--${colorKey}`, bannerColorVariables(theme, color));
+}
+
+function toastCSS(
+  theme: Theme,
+  colorKey: YaakColorKey,
+  colors?: ThemeComponentColors,
+): string | null {
+  const color = yc(theme, colors?.[colorKey]);
+  if (color == null) return null;
+
+  return variablesToCSS(`.x-theme-toast--${colorKey}`, toastColorVariables(theme, color));
+}
+
+function templateTagCSS(
+  theme: Theme,
+  colorKey: YaakColorKey,
+  colors?: ThemeComponentColors,
+): string | null {
+  const color = yc(theme, colors?.[colorKey]);
+  if (color == null) return null;
+
+  return variablesToCSS(
+    `.x-theme-templateTag--${colorKey}`,
+    templateTagColorVariables(theme, color),
+  );
+}
+
+export function getThemeCSS(theme: Theme): string {
+  theme.components = theme.components ?? {};
+  theme.components.toast = theme.components.toast ?? theme.components.menu ?? {};
+  const { components, id, label } = theme;
+  const colors = Object.keys(theme.base).reduce((prev, key) => {
+    return { ...prev, [key]: theme.base[key as YaakColorKey] };
+  }, {} as ThemeComponentColors);
+
+  let themeCSS = "";
+  try {
+    const baseCss = variablesToCSS(null, completeFullColorVariables(theme, theme.base));
+    const baseSurface = yc(theme, theme.base.surface);
+
+    themeCSS = [
+      baseCss,
+      ...Object.entries(components).map(([key, value]) =>
+        componentCSS(key as ComponentName, completePartialColorVariables(theme, value ?? {})),
+      ),
+      baseSurface == null
+        ? null
+        : variablesToCSS(
+            ".x-theme-button--solid--default",
+            buttonSolidColorVariables(theme, baseSurface, true),
+          ),
+      baseSurface == null
+        ? null
+        : variablesToCSS(
+            ".x-theme-button--border--default",
+            buttonBorderColorVariables(theme, baseSurface, true),
+          ),
+      ...Object.keys(colors).map((key) =>
+        buttonCSS(theme, key as YaakColorKey, theme.components?.button ?? colors),
+      ),
+      ...Object.keys(colors).map((key) =>
+        bannerCSS(theme, key as YaakColorKey, theme.components?.banner ?? colors),
+      ),
+      ...Object.keys(colors).map((key) =>
+        toastCSS(theme, key as YaakColorKey, theme.components?.banner ?? colors),
+      ),
+      ...Object.keys(colors).map((key) =>
+        templateTagCSS(theme, key as YaakColorKey, theme.components?.templateTag ?? colors),
+      ),
+    ].join("\n\n");
+  } catch (err) {
+    console.error("Failed to generate CSS", err);
+  }
+
+  return [`/* ${label} */`, `[data-theme="${id}"] {`, indent(themeCSS), "}"].join("\n");
+}
+
+export function addThemeStylesToDocument(rawTheme: Theme | null) {
+  if (rawTheme == null) {
+    console.error("Failed to add theme styles: theme is null");
+    return;
+  }
+
+  const theme = completeTheme(rawTheme);
+  let styleEl = document.head.querySelector("style[data-theme]");
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    document.head.appendChild(styleEl);
+  }
+
+  styleEl.setAttribute("data-theme", theme.id);
+  styleEl.setAttribute("data-updated-at", new Date().toISOString());
+  styleEl.textContent = getThemeCSS(theme);
+}
+
+export function setThemeOnDocument(theme: Theme | null) {
+  if (theme == null) {
+    console.error("Failed to set theme: theme is null");
+    return;
+  }
+
+  document.documentElement.setAttribute("data-theme", theme.id);
+}
+
+export function applyThemeToDocument(theme: Theme | null) {
+  addThemeStylesToDocument(theme);
+  setThemeOnDocument(theme);
+}
+
+export function platformFromUserAgent(userAgent: string): DocumentPlatform {
+  const normalized = userAgent.toLowerCase();
+
+  if (normalized.includes("linux")) return "linux";
+  if (normalized.includes("mac os") || normalized.includes("macintosh")) return "macos";
+  if (normalized.includes("win")) return "windows";
+  return "unknown";
+}
+
+export function setPlatformOnDocument(platform: string | null | undefined) {
+  const normalized =
+    platform === "linux" || platform === "macos" || platform === "windows" ? platform : "unknown";
+  document.documentElement.setAttribute("data-platform", normalized);
+}
+
+export function indent(text: string, space = "    "): string {
+  return text
+    .split("\n")
+    .map((line) => space + line)
+    .join("\n");
+}
+
+function yc<T extends string | null | undefined>(
+  theme: Theme,
+  value: T,
+): T extends string ? YaakColor : null {
+  if (value == null) return null as never;
+  return new YaakColor(value, theme.dark ? "dark" : "light") as never;
+}
+
+export function completeTheme(theme: Theme): Theme {
+  const fallback = theme.dark ? defaultDarkTheme.base : defaultLightTheme.base;
+
+  for (const [key, value] of Object.entries(fallback)) {
+    theme.base[key as YaakColorKey] ??= value;
+  }
+
+  return theme;
+}
diff --git a/packages/theme/src/yaakColor.ts b/packages/theme/src/yaakColor.ts
new file mode 100644
index 0000000..41f6b0b
--- /dev/null
+++ b/packages/theme/src/yaakColor.ts
@@ -0,0 +1,386 @@
+import parseColor from "parse-color";
+
+export class YaakColor {
+  private readonly appearance: "dark" | "light" = "light";
+
+  private lightness = 0;
+  private chroma = 0;
+  private hue = 0;
+  private alpha = 1;
+
+  constructor(cssColor: string, appearance: "dark" | "light" = "light") {
+    try {
+      this.set(cssColor);
+      this.appearance = appearance;
+    } catch (err) {
+      console.log("Failed to parse CSS color", cssColor, err);
+    }
+  }
+
+  static transparent(): YaakColor {
+    return new YaakColor("rgb(0,0,0)", "light").translucify(1);
+  }
+
+  static white(): YaakColor {
+    return new YaakColor("rgb(0,0,0)", "light").lower(999);
+  }
+
+  static black(): YaakColor {
+    return new YaakColor("rgb(0,0,0)", "light").lift(999);
+  }
+
+  set(cssColor: string): YaakColor {
+    let fixedCssColor = cssColor;
+    if (cssColor.startsWith("#") && cssColor.length === 9) {
+      const [r, g, b, a] = hexToRgba(cssColor);
+      fixedCssColor = `rgba(${r},${g},${b},${a})`;
+    }
+
+    const oklch = parseOklch(fixedCssColor);
+    if (oklch != null) {
+      this.lightness = oklch.lightness;
+      this.chroma = oklch.chroma;
+      this.hue = oklch.hue;
+      this.alpha = oklch.alpha;
+      return this;
+    }
+
+    const { rgba } = parseColor(fixedCssColor);
+    const [lightness, chroma, hue] = rgbToOklch(rgba[0], rgba[1], rgba[2]);
+    this.lightness = lightness;
+    this.chroma = chroma;
+    this.hue = hue;
+    this.alpha = rgba[3] ?? 1;
+    return this;
+  }
+
+  clone(): YaakColor {
+    return new YaakColor(this.css(), this.appearance);
+  }
+
+  themeColor(cssColor: string): YaakColor {
+    return new YaakColor(cssColor, this.appearance);
+  }
+
+  lower(mod: number): YaakColor {
+    return this.appearance === "dark" ? this._darken(mod) : this._lighten(mod);
+  }
+
+  lift(mod: number): YaakColor {
+    return this.appearance === "dark" ? this._lighten(mod) : this._darken(mod);
+  }
+
+  liftMax(): YaakColor {
+    return this.lift(999);
+  }
+
+  lowerMax(): YaakColor {
+    return this.lower(999);
+  }
+
+  themeSurface(): YaakColor {
+    return new YaakColor(
+      this.appearance === "dark" ? "oklch(23% 0 0)" : "oklch(100% 0 0)",
+      this.appearance,
+    );
+  }
+
+  minLightness(n: number): YaakColor {
+    const color = this.clone();
+    if (color.lightness < n) {
+      color.lightness = n;
+    }
+    return color;
+  }
+
+  isDark(): boolean {
+    return this.lightness < 50;
+  }
+
+  translucify(mod: number): YaakColor {
+    const color = this.clone();
+    color.alpha = clamp(color.alpha - color.alpha * mod, 0, 1);
+    return color;
+  }
+
+  opacify(mod: number): YaakColor {
+    const color = this.clone();
+    color.alpha = clamp(this.alpha + (1 - this.alpha) * mod, 0, 1);
+    return color;
+  }
+
+  desaturate(mod: number): YaakColor {
+    const color = this.clone();
+    color.chroma = color.chroma - color.chroma * mod;
+    return color;
+  }
+
+  saturate(mod: number): YaakColor {
+    const color = this.clone();
+    color.chroma = this.chroma + this.chroma * mod;
+    return color;
+  }
+
+  lighterThan(color: YaakColor): boolean {
+    return this.lightness > color.lightness;
+  }
+
+  contrastRatio(background: YaakColor): number {
+    const foreground = this.alpha < 1 ? this.compositeOver(background) : this;
+    const foregroundLuminance = foreground.relativeLuminance();
+    const backgroundLuminance = background.relativeLuminance();
+    const lighter = Math.max(foregroundLuminance, backgroundLuminance);
+    const darker = Math.min(foregroundLuminance, backgroundLuminance);
+    return (lighter + 0.05) / (darker + 0.05);
+  }
+
+  withContrast(background: YaakColor, minContrast: number): YaakColor {
+    const darker = this.clone();
+    darker.lightness = 0;
+    darker.chroma = 0;
+    darker.hue = 0;
+
+    const lighter = this.clone();
+    lighter.lightness = 100;
+    lighter.chroma = 0;
+    lighter.hue = 0;
+
+    const darkerContrast = darker.contrastRatio(background);
+    const lighterContrast = lighter.contrastRatio(background);
+    let useLighterColor = lighterContrast >= darkerContrast;
+
+    // Saturated accent surfaces often read better with white text even when
+    // black has the higher numeric contrast. Keep yellow-ish light accents dark
+    // by requiring white to clear a modest contrast floor first.
+    if (minContrast >= 3 && lighterContrast >= 2.5) {
+      useLighterColor = true;
+    }
+
+    const selectedContrast = useLighterColor ? lighterContrast : darkerContrast;
+    if (selectedContrast < minContrast) {
+      return useLighterColor ? lighter : darker;
+    }
+
+    let minLightness = 0;
+    let maxLightness = 100;
+    const color = this.clone();
+
+    for (let i = 0; i < 24; i += 1) {
+      color.lightness = (minLightness + maxLightness) / 2;
+      const contrast = color.contrastRatio(background);
+
+      if (useLighterColor) {
+        if (contrast >= minContrast) {
+          maxLightness = color.lightness;
+        } else {
+          minLightness = color.lightness;
+        }
+      } else if (contrast >= minContrast) {
+        minLightness = color.lightness;
+      } else {
+        maxLightness = color.lightness;
+      }
+    }
+
+    color.lightness = useLighterColor ? maxLightness : minLightness;
+    return color;
+  }
+
+  compositeOver(background: YaakColor): YaakColor {
+    const [fgR, fgG, fgB] = this.rgb();
+    const [bgR, bgG, bgB] = background.rgb();
+    const alpha = this.alpha + background.alpha * (1 - this.alpha);
+
+    if (alpha <= 0) {
+      return YaakColor.transparent();
+    }
+
+    const r = (fgR * this.alpha + bgR * background.alpha * (1 - this.alpha)) / alpha;
+    const g = (fgG * this.alpha + bgG * background.alpha * (1 - this.alpha)) / alpha;
+    const b = (fgB * this.alpha + bgB * background.alpha * (1 - this.alpha)) / alpha;
+
+    return new YaakColor(`rgba(${r},${g},${b},${alpha})`, this.appearance);
+  }
+
+  css(): string {
+    const [r, g, b] = this.rgb();
+    return rgbaToHex(r, g, b, this.alpha);
+  }
+
+  hexNoAlpha(): string {
+    const [r, g, b] = this.rgb();
+    return rgbaToHexNoAlpha(r, g, b);
+  }
+
+  private relativeLuminance(): number {
+    const [r, g, b] = this.rgb();
+    const red = srgbToLinear(r / 255);
+    const green = srgbToLinear(g / 255);
+    const blue = srgbToLinear(b / 255);
+    return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+  }
+
+  private rgb(): [number, number, number] {
+    return oklchToRgb(this.lightness, this.chroma, this.hue);
+  }
+
+  private _lighten(mod: number): YaakColor {
+    const color = this.clone();
+    color.lightness = clamp(this.lightness + (100 - this.lightness) * mod, 0, 100);
+    return color;
+  }
+
+  private _darken(mod: number): YaakColor {
+    const color = this.clone();
+    color.lightness = clamp(this.lightness - this.lightness * mod, 0, 100);
+    return color;
+  }
+}
+
+function parseOklch(
+  cssColor: string,
+): { lightness: number; chroma: number; hue: number; alpha: number } | null {
+  const match = cssColor
+    .trim()
+    .match(
+      /^oklch$\s*([^\s,]+)(?:\s+|,\s*)([^\s,]+)(?:\s+|,\s*)([^\s,/]+)(?:\s*\/\s*([^)]+)|(?:\s*,\s*([^)]*))?)\s*$$/i,
+    );
+  if (match == null) return null;
+
+  const [, lightnessValue, chromaValue, hueValue, slashAlpha, commaAlpha] = match;
+  if (lightnessValue == null || chromaValue == null || hueValue == null) return null;
+
+  const lightness = parseOklchLightness(lightnessValue);
+  const chroma = parseCssNumber(chromaValue, 1);
+  const hue = normalizeHue(parseCssNumber(hueValue.replace(/deg$/i, ""), 1));
+  const alpha = parseCssNumber(slashAlpha ?? commaAlpha ?? "1", 1);
+
+  if (
+    !Number.isFinite(lightness) ||
+    !Number.isFinite(chroma) ||
+    !Number.isFinite(hue) ||
+    !Number.isFinite(alpha)
+  ) {
+    return null;
+  }
+
+  return {
+    lightness: clamp(lightness, 0, 100),
+    chroma: Math.max(0, chroma),
+    hue,
+    alpha: clamp(alpha, 0, 1),
+  };
+}
+
+function parseCssNumber(value: string, percentScale: number): number {
+  const normalized = value.trim();
+  if (normalized.endsWith("%")) {
+    return (Number.parseFloat(normalized) / 100) * percentScale;
+  }
+  return Number.parseFloat(normalized);
+}
+
+function parseOklchLightness(value: string): number {
+  const parsed = parseCssNumber(value, 100);
+  return value.trim().endsWith("%") || parsed > 1 ? parsed : parsed * 100;
+}
+
+function rgbToOklch(r: number, g: number, b: number): [number, number, number] {
+  const red = srgbToLinear(r / 255);
+  const green = srgbToLinear(g / 255);
+  const blue = srgbToLinear(b / 255);
+
+  const l = 0.4122214708 * red + 0.5363325363 * green + 0.0514459929 * blue;
+  const m = 0.2119034982 * red + 0.6806995451 * green + 0.1073969566 * blue;
+  const s = 0.0883024619 * red + 0.2817188376 * green + 0.6299787005 * blue;
+
+  const lRoot = Math.cbrt(l);
+  const mRoot = Math.cbrt(m);
+  const sRoot = Math.cbrt(s);
+
+  const lightness = 0.2104542553 * lRoot + 0.793617785 * mRoot - 0.0040720468 * sRoot;
+  const a = 1.9779984951 * lRoot - 2.428592205 * mRoot + 0.4505937099 * sRoot;
+  const okb = 0.0259040371 * lRoot + 0.7827717662 * mRoot - 0.808675766 * sRoot;
+
+  return [
+    lightness * 100,
+    Math.sqrt(a * a + okb * okb),
+    normalizeHue(radToDeg(Math.atan2(okb, a))),
+  ];
+}
+
+function oklchToRgb(lightness: number, chroma: number, hue: number): [number, number, number] {
+  const l = clamp(lightness, 0, 100) / 100;
+  const a = Math.cos(degToRad(hue)) * chroma;
+  const b = Math.sin(degToRad(hue)) * chroma;
+
+  const lRoot = l + 0.3963377774 * a + 0.2158037573 * b;
+  const mRoot = l - 0.1055613458 * a - 0.0638541728 * b;
+  const sRoot = l - 0.0894841775 * a - 1.291485548 * b;
+
+  const lCube = lRoot * lRoot * lRoot;
+  const mCube = mRoot * mRoot * mRoot;
+  const sCube = sRoot * sRoot * sRoot;
+
+  const red = 4.0767416621 * lCube - 3.3077115913 * mCube + 0.2309699292 * sCube;
+  const green = -1.2684380046 * lCube + 2.6097574011 * mCube - 0.3413193965 * sCube;
+  const blue = -0.0041960863 * lCube - 0.7034186147 * mCube + 1.707614701 * sCube;
+
+  return [linearToSrgb(red) * 255, linearToSrgb(green) * 255, linearToSrgb(blue) * 255];
+}
+
+function srgbToLinear(value: number): number {
+  return value <= 0.04045 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
+}
+
+function linearToSrgb(value: number): number {
+  const srgb = value <= 0.0031308 ? value * 12.92 : 1.055 * Math.pow(value, 1 / 2.4) - 0.055;
+  return clamp(srgb, 0, 1);
+}
+
+function normalizeHue(value: number): number {
+  const hue = value % 360;
+  return hue < 0 ? hue + 360 : hue;
+}
+
+function degToRad(value: number): number {
+  return (value * Math.PI) / 180;
+}
+
+function radToDeg(value: number): number {
+  return (value * 180) / Math.PI;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function rgbaToHex(r: number, g: number, b: number, a: number): string {
+  const toHex = (n: number): string => {
+    const hex = Number(Math.round(n)).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${[toHex(r), toHex(g), toHex(b), toHex(a * 255)].join("").toUpperCase()}`;
+}
+
+function rgbaToHexNoAlpha(r: number, g: number, b: number): string {
+  const toHex = (n: number): string => {
+    const hex = Number(Math.round(n)).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${[toHex(r), toHex(g), toHex(b)].join("").toUpperCase()}`;
+}
+
+function hexToRgba(hex: string): [number, number, number, number] {
+  const fromHex = (value: string): number => {
+    if (value === "") return 255;
+    return Number(`0x${value}`);
+  };
+
+  const r = fromHex(hex.slice(1, 3));
+  const g = fromHex(hex.slice(3, 5));
+  const b = fromHex(hex.slice(5, 7));
+  const a = fromHex(hex.slice(7, 9));
+
+  return [r, g, b, a / 255];
+}
diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json
new file mode 100644
index 0000000..8920f3d
--- /dev/null
+++ b/packages/theme/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "noEmit": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..283be29
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaakapp-internal/ui",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "jotai-family": "^1.0.1"
+  }
+}
diff --git a/packages/ui/src/components/Banner.tsx b/packages/ui/src/components/Banner.tsx
new file mode 100644
index 0000000..03ecd86
--- /dev/null
+++ b/packages/ui/src/components/Banner.tsx
@@ -0,0 +1,28 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+export interface BannerProps {
+  children: ReactNode;
+  className?: string;
+  color?: "primary" | "secondary" | "success" | "notice" | "warning" | "danger" | "info";
+}
+
+export function Banner({ children, className, color }: BannerProps) {
+  return (
+    <div className="w-auto grid grid-rows-1 max-h-full flex-0">
+      <div
+        className={classNames(
+          className,
+          color && "bg-surface",
+          `x-theme-banner--${color}`,
+          "border border-border border-dashed",
+          "px-4 py-2 rounded-lg select-auto cursor-auto",
+          "overflow-auto text-text",
+          "mb-auto", // Don't stretch all the way down if the parent is in grid or flexbox
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
new file mode 100644
index 0000000..bc65c8d
--- /dev/null
+++ b/packages/ui/src/components/Button.tsx
@@ -0,0 +1,127 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import classNames from "classnames";
+import type { HTMLAttributes, ReactNode } from "react";
+import { forwardRef } from "react";
+import { Icon } from "./Icon";
+import { LoadingIcon } from "./LoadingIcon";
+
+type ButtonVariant = "border" | "solid" | "input";
+type ButtonSize = "2xs" | "xs" | "sm" | "md" | "auto";
+
+export type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, "color" | "onChange"> & {
+  innerClassName?: string;
+  color?: Color | "custom" | "default";
+  tone?: Color | "default";
+  variant?: ButtonVariant;
+  isLoading?: boolean;
+  size?: ButtonSize;
+  justify?: "start" | "center";
+  type?: "button" | "submit";
+  forDropdown?: boolean;
+  disabled?: boolean;
+  title?: string;
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    isLoading,
+    className,
+    innerClassName,
+    children,
+    color,
+    tone,
+    forDropdown,
+    type = "button",
+    justify = "center",
+    size = "md",
+    variant = "solid",
+    leftSlot,
+    rightSlot,
+    disabled,
+    title,
+    onClick,
+    ...props
+  }: ButtonProps,
+  ref,
+) {
+  const resolvedColor = color ?? tone ?? "default";
+  const isDisabled = disabled || isLoading;
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={classNames(
+        className,
+        "x-theme-button",
+        `x-theme-button--${variant}`,
+        `x-theme-button--${variant}--${resolvedColor}`,
+        "border",
+        "max-w-full min-w-0",
+        "hocus:opacity-100",
+        "whitespace-nowrap outline-hidden",
+        "shrink-0 flex items-center",
+        "outline-0",
+        isDisabled ? "pointer-events-none opacity-disabled" : "pointer-events-auto",
+        justify === "start" && "justify-start",
+        justify === "center" && "justify-center",
+        size === "md" && "h-md px-3 rounded-md",
+        size === "sm" && "h-sm px-2.5 rounded-md",
+        size === "xs" && "h-xs px-2 text-sm rounded-md",
+        size === "2xs" && "h-2xs px-2 text-xs rounded-sm",
+        size === "auto" && "px-3 py-2 rounded-md",
+        variant === "solid" && "border-transparent",
+        variant === "solid" &&
+          resolvedColor === "custom" &&
+          "focus-visible:outline-2 outline-border-focus",
+        variant === "solid" &&
+          resolvedColor !== "custom" &&
+          "text-text enabled:hocus:text-text enabled:hocus:bg-surface-highlight outline-border-subtle",
+        variant === "solid" &&
+          resolvedColor !== "custom" &&
+          resolvedColor !== "default" &&
+          "bg-surface",
+        variant === "border" && "border",
+        variant === "border" &&
+          resolvedColor !== "custom" &&
+          "border-border-subtle text-text-subtle enabled:hocus:border-border " +
+            "enabled:hocus:bg-surface-highlight enabled:hocus:text-text outline-border-subtler",
+        // Chrome of a form input rather than a button: no hover state, and colors resolve from the
+        // surrounding x-theme-input rather than a button theme.
+        variant === "input" && "border-border text-text",
+      )}
+      disabled={isDisabled}
+      onClick={onClick}
+      onDoubleClick={(e) => {
+        e.stopPropagation();
+      }}
+      title={title}
+      {...props}
+    >
+      {isLoading ? (
+        <LoadingIcon size={size === "auto" ? "md" : size} className="mr-1" />
+      ) : leftSlot ? (
+        <div className="mr-2">{leftSlot}</div>
+      ) : null}
+      <div
+        className={classNames(
+          "truncate w-full",
+          justify === "start" ? "text-left" : "text-center",
+          innerClassName,
+        )}
+      >
+        {children}
+      </div>
+      {rightSlot && <div className="ml-1">{rightSlot}</div>}
+      {forDropdown && (
+        <Icon
+          icon="chevron_down"
+          size={size === "auto" ? "md" : size}
+          className="ml-1 -mr-1 relative top-[0.1em]"
+        />
+      )}
+    </button>
+  );
+});
diff --git a/packages/ui/src/components/DropMarker.tsx b/packages/ui/src/components/DropMarker.tsx
new file mode 100644
index 0000000..8f8866d
--- /dev/null
+++ b/packages/ui/src/components/DropMarker.tsx
@@ -0,0 +1,34 @@
+import classNames from "classnames";
+import type { CSSProperties } from "react";
+import { memo } from "react";
+
+interface Props {
+  className?: string;
+  style?: CSSProperties;
+  orientation?: "horizontal" | "vertical";
+}
+
+export const DropMarker = memo(
+  function DropMarker({ className, style, orientation = "horizontal" }: Props) {
+    return (
+      <div
+        style={style}
+        className={classNames(
+          className,
+          "absolute pointer-events-none z-50",
+          orientation === "horizontal" && "w-full",
+          orientation === "vertical" && "w-0 top-0 bottom-0",
+        )}
+      >
+        <div
+          className={classNames(
+            "absolute bg-primary rounded-full",
+            orientation === "horizontal" && "left-2 right-2 bottom-[-0.1rem] h-[0.2rem]",
+            orientation === "vertical" && "left-[-0.1rem] top-0 bottom-0 w-[0.2rem]",
+          )}
+        />
+      </div>
+    );
+  },
+  () => true,
+);
diff --git a/packages/ui/src/components/FormattedError.tsx b/packages/ui/src/components/FormattedError.tsx
new file mode 100644
index 0000000..07c0255
--- /dev/null
+++ b/packages/ui/src/components/FormattedError.tsx
@@ -0,0 +1,23 @@
+import classNames from "classnames";
+import type { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+export function FormattedError({ children, className }: Props) {
+  return (
+    <pre
+      className={classNames(
+        className,
+        "cursor-text select-auto",
+        "**:cursor-text **:select-auto",
+        "font-mono text-sm w-full bg-surface-highlight p-3 rounded-sm",
+        "whitespace-pre-wrap border border-danger border-dashed overflow-x-auto",
+      )}
+    >
+      {children}
+    </pre>
+  );
+}
diff --git a/packages/ui/src/components/HeaderSize.tsx b/packages/ui/src/components/HeaderSize.tsx
new file mode 100644
index 0000000..8056696
--- /dev/null
+++ b/packages/ui/src/components/HeaderSize.tsx
@@ -0,0 +1,100 @@
+import { useCapability } from "@yaakapp-internal/platform";
+import classNames from "classnames";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { useMemo } from "react";
+import { useIsFullscreen } from "../hooks/useIsFullscreen";
+import { HEADER_SIZE_LG, HEADER_SIZE_MD, WINDOW_CONTROLS_WIDTH } from "../lib/constants";
+import { WindowControls } from "./WindowControls";
+
+interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  size: "md" | "lg";
+  ignoreControlsSpacing?: boolean;
+  onlyXWindowControl?: boolean;
+  hideControls?: boolean;
+  osType: string;
+  hideWindowControls: boolean;
+  useNativeTitlebar: boolean;
+  interfaceScale: number;
+}
+
+export function HeaderSize({
+  className,
+  style,
+  size,
+  ignoreControlsSpacing,
+  onlyXWindowControl,
+  children,
+  hideControls,
+  osType,
+  hideWindowControls,
+  useNativeTitlebar,
+  interfaceScale,
+}: HeaderSizeProps) {
+  const isFullscreen = useIsFullscreen();
+  // The header only doubles as the titlebar when the host hands the page the
+  // window frame (Tauri) and the user hasn't opted for the native one. In a
+  // browser tab the frame is the browser's: no controls, no traffic lights.
+  const drawsWindowChrome = useCapability("windowChrome") && !useNativeTitlebar;
+  const finalStyle = useMemo<CSSProperties>(() => {
+    const s = { ...style };
+
+    // Set the height (use min-height because scaling font size may make it larger
+    if (size === "md") s.minHeight = HEADER_SIZE_MD;
+    if (size === "lg") s.minHeight = HEADER_SIZE_LG;
+
+    if (!drawsWindowChrome) {
+      // No style updates when something else draws the titlebar
+    } else if (osType === "macos") {
+      if (!isFullscreen) {
+        // Add large padding for window controls
+        s.paddingLeft = 76 / interfaceScale;
+      }
+    } else if (!ignoreControlsSpacing && !hideWindowControls) {
+      s.paddingRight = WINDOW_CONTROLS_WIDTH;
+    }
+
+    return s;
+  }, [
+    ignoreControlsSpacing,
+    isFullscreen,
+    hideWindowControls,
+    interfaceScale,
+    size,
+    style,
+    drawsWindowChrome,
+    osType,
+  ]);
+
+  return (
+    <div
+      data-tauri-drag-region
+      style={finalStyle}
+      className={classNames(
+        className,
+        "pt-px", // Make up for bottom border
+        "select-none relative flex items-center",
+        "w-full border-b border-border-subtle min-w-0",
+      )}
+    >
+      {/* NOTE: This needs display:grid or else the element shrinks (even though scrollable) */}
+      <div
+        data-tauri-drag-region
+        className={classNames(
+          "pointer-events-none h-full w-full overflow-x-auto hide-scrollbars grid",
+          "px-1", // Give it some space on either end for focus outlines
+        )}
+      >
+        {children}
+      </div>
+      {!hideControls && drawsWindowChrome && (
+        <WindowControls
+          onlyX={onlyXWindowControl}
+          osType={osType}
+          hideWindowControls={hideWindowControls}
+          useNativeTitlebar={useNativeTitlebar}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/Heading.tsx b/packages/ui/src/components/Heading.tsx
new file mode 100644
index 0000000..bb68cd9
--- /dev/null
+++ b/packages/ui/src/components/Heading.tsx
@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import type { HTMLAttributes } from "react";
+
+interface Props extends HTMLAttributes<HTMLHeadingElement> {
+  level?: 1 | 2 | 3;
+}
+
+export function Heading({ className, level = 1, ...props }: Props) {
+  const Component = level === 1 ? "h1" : level === 2 ? "h2" : "h3";
+  return (
+    <Component
+      className={classNames(
+        className,
+        "font-semibold text-text",
+        level === 1 && "text-2xl",
+        level === 2 && "text-xl",
+        level === 3 && "text-lg",
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/packages/ui/src/components/Icon.tsx b/packages/ui/src/components/Icon.tsx
new file mode 100644
index 0000000..675b46e
--- /dev/null
+++ b/packages/ui/src/components/Icon.tsx
@@ -0,0 +1,340 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import classNames from "classnames";
+import {
+  AlarmClockIcon,
+  AlertTriangleIcon,
+  ArchiveIcon,
+  ArrowBigDownDashIcon,
+  ArrowBigLeftDashIcon,
+  ArrowBigRightDashIcon,
+  ArrowBigRightIcon,
+  ArrowBigUpDashIcon,
+  ArrowDownIcon,
+  ArrowDownToDotIcon,
+  ArrowDownToLineIcon,
+  ArrowLeftIcon,
+  ArrowRightCircleIcon,
+  ArrowRightIcon,
+  ArrowUpDownIcon,
+  ArrowUpFromDotIcon,
+  ArrowUpFromLineIcon,
+  ArrowUpIcon,
+  BadgeCheckIcon,
+  BookOpenText,
+  BoxIcon,
+  CakeIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsDownUpIcon,
+  ChevronsUpDownIcon,
+  CircleAlertIcon,
+  CircleDashedIcon,
+  CircleDollarSignIcon,
+  CircleFadingArrowUpIcon,
+  CircleHelpIcon,
+  CircleOffIcon,
+  CirclePauseIcon,
+  CirclePlayIcon,
+  CircleStopIcon,
+  ClipboardPasteIcon,
+  ClockIcon,
+  CodeIcon,
+  Columns2Icon,
+  CommandIcon,
+  CookieIcon,
+  CopyCheck,
+  CopyIcon,
+  CornerRightDownIcon,
+  CornerRightUpIcon,
+  CreditCardIcon,
+  CrosshairIcon,
+  DotIcon,
+  DownloadIcon,
+  EllipsisIcon,
+  EllipsisVerticalIcon,
+  ExpandIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileTextIcon,
+  FilterIcon,
+  FlameIcon,
+  FlaskConicalIcon,
+  FolderCodeIcon,
+  FolderCogIcon,
+  FolderDownIcon,
+  FolderGitIcon,
+  FolderIcon,
+  FolderInputIcon,
+  FolderOpenIcon,
+  FolderOutputIcon,
+  FolderSymlinkIcon,
+  FolderSyncIcon,
+  FolderUpIcon,
+  GiftIcon,
+  GitBranchIcon,
+  GitBranchPlusIcon,
+  GitCommitIcon,
+  GitCommitVerticalIcon,
+  GitForkIcon,
+  GitPullRequestIcon,
+  GlobeIcon,
+  GripVerticalIcon,
+  HandIcon,
+  HardDriveDownloadIcon,
+  HistoryIcon,
+  HomeIcon,
+  ImportIcon,
+  InfoIcon,
+  KeyRoundIcon,
+  KeyboardIcon,
+  ListXIcon,
+  LockIcon,
+  LockOpenIcon,
+  MergeIcon,
+  MessageSquare,
+  MinusCircleIcon,
+  MinusIcon,
+  MoonIcon,
+  MoreVerticalIcon,
+  PaletteIcon,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  PencilIcon,
+  PinIcon,
+  PinOffIcon,
+  Plug,
+  PlusCircleIcon,
+  PlusIcon,
+  PuzzleIcon,
+  RefreshCcwIcon,
+  RefreshCwIcon,
+  RocketIcon,
+  RotateCcwIcon,
+  Rows2Icon,
+  SaveIcon,
+  SearchIcon,
+  SendHorizontalIcon,
+  SettingsIcon,
+  ShieldAlertIcon,
+  ShieldCheckIcon,
+  ShieldIcon,
+  ShieldOffIcon,
+  SparklesIcon,
+  SquareCheckIcon,
+  SquareIcon,
+  SquareTerminalIcon,
+  SunIcon,
+  TableIcon,
+  Trash2Icon,
+  Undo2Icon,
+  UploadIcon,
+  VariableIcon,
+  Wand2Icon,
+  WifiIcon,
+  WrenchIcon,
+  XIcon,
+  ZapIcon,
+  ZapOffIcon,
+} from "lucide-react";
+import type { CSSProperties, HTMLAttributes } from "react";
+import { memo } from "react";
+
+const icons = {
+  alarm_clock: AlarmClockIcon,
+  alert_triangle: AlertTriangleIcon,
+  archive: ArchiveIcon,
+  arrow_big_down_dash: ArrowBigDownDashIcon,
+  arrow_big_left_dash: ArrowBigLeftDashIcon,
+  arrow_big_right: ArrowBigRightIcon,
+  arrow_big_right_dash: ArrowBigRightDashIcon,
+  arrow_big_up_dash: ArrowBigUpDashIcon,
+  arrow_down: ArrowDownIcon,
+  arrow_down_to_dot: ArrowDownToDotIcon,
+  arrow_down_to_line: ArrowDownToLineIcon,
+  arrow_left: ArrowLeftIcon,
+  arrow_right: ArrowRightIcon,
+  arrow_right_circle: ArrowRightCircleIcon,
+  arrow_up: ArrowUpIcon,
+  arrow_up_down: ArrowUpDownIcon,
+  arrow_up_from_dot: ArrowUpFromDotIcon,
+  arrow_up_from_line: ArrowUpFromLineIcon,
+  badge_check: BadgeCheckIcon,
+  book_open_text: BookOpenText,
+  box: BoxIcon,
+  cake: CakeIcon,
+  chat: MessageSquare,
+  check: CheckIcon,
+  check_circle: CheckCircleIcon,
+  check_square_checked: SquareCheckIcon,
+  check_square_unchecked: SquareIcon,
+  chevron_down: ChevronDownIcon,
+  chevron_left: ChevronLeftIcon,
+  chevrons_up_down: ChevronsUpDownIcon,
+  chevrons_down_up: ChevronsDownUpIcon,
+  chevron_right: ChevronRightIcon,
+  circle_alert: CircleAlertIcon,
+  circle_dashed: CircleDashedIcon,
+  circle_dollar_sign: CircleDollarSignIcon,
+  circle_fading_arrow_up: CircleFadingArrowUpIcon,
+  clock: ClockIcon,
+  code: CodeIcon,
+  columns_2: Columns2Icon,
+  command: CommandIcon,
+  cookie: CookieIcon,
+  copy: CopyIcon,
+  copy_check: CopyCheck,
+  corner_right_down: CornerRightDownIcon,
+  corner_right_up: CornerRightUpIcon,
+  credit_card: CreditCardIcon,
+  crosshair: CrosshairIcon,
+  dot: DotIcon,
+  download: DownloadIcon,
+  ellipsis: EllipsisIcon,
+  ellipsis_vertical: EllipsisVerticalIcon,
+  expand: ExpandIcon,
+  external_link: ExternalLinkIcon,
+  eye: EyeIcon,
+  eye_closed: EyeOffIcon,
+  file: FileIcon,
+  file_code: FileCodeIcon,
+  file_text: FileTextIcon,
+  filter: FilterIcon,
+  flame: FlameIcon,
+  flask: FlaskConicalIcon,
+  folder: FolderIcon,
+  folder_code: FolderCodeIcon,
+  folder_cog: FolderCogIcon,
+  folder_git: FolderGitIcon,
+  folder_input: FolderInputIcon,
+  folder_open: FolderOpenIcon,
+  folder_output: FolderOutputIcon,
+  folder_symlink: FolderSymlinkIcon,
+  folder_sync: FolderSyncIcon,
+  folder_down: FolderDownIcon,
+  folder_up: FolderUpIcon,
+  gift: GiftIcon,
+  git_branch: GitBranchIcon,
+  git_branch_plus: GitBranchPlusIcon,
+  git_commit: GitCommitIcon,
+  git_commit_vertical: GitCommitVerticalIcon,
+  git_fork: GitForkIcon,
+  git_pull_request: GitPullRequestIcon,
+  globe: GlobeIcon,
+  grip_vertical: GripVerticalIcon,
+  circle_off: CircleOffIcon,
+  circle_pause: CirclePauseIcon,
+  circle_play: CirclePlayIcon,
+  circle_stop: CircleStopIcon,
+  hand: HandIcon,
+  hard_drive_download: HardDriveDownloadIcon,
+  help: CircleHelpIcon,
+  history: HistoryIcon,
+  house: HomeIcon,
+  import: ImportIcon,
+  info: InfoIcon,
+  key_round: KeyRoundIcon,
+  keyboard: KeyboardIcon,
+  left_panel_hidden: PanelLeftOpenIcon,
+  left_panel_visible: PanelLeftCloseIcon,
+  list_x: ListXIcon,
+  lock: LockIcon,
+  lock_open: LockOpenIcon,
+  magic_wand: Wand2Icon,
+  merge: MergeIcon,
+  minus: MinusIcon,
+  minus_circle: MinusCircleIcon,
+  moon: MoonIcon,
+  more_vertical: MoreVerticalIcon,
+  palette: PaletteIcon,
+  paste: ClipboardPasteIcon,
+  pencil: PencilIcon,
+  pin: PinIcon,
+  plug: Plug,
+  plus: PlusIcon,
+  plus_circle: PlusCircleIcon,
+  puzzle: PuzzleIcon,
+  refresh: RefreshCwIcon,
+  rocket: RocketIcon,
+  rotate_ccw: RotateCcwIcon,
+  rows_2: Rows2Icon,
+  save: SaveIcon,
+  search: SearchIcon,
+  send_horizontal: SendHorizontalIcon,
+  settings: SettingsIcon,
+  shield: ShieldIcon,
+  shield_check: ShieldCheckIcon,
+  shield_off: ShieldOffIcon,
+  sparkles: SparklesIcon,
+  square_terminal: SquareTerminalIcon,
+  sun: SunIcon,
+  table: TableIcon,
+  text: FileTextIcon,
+  trash: Trash2Icon,
+  undo_2: Undo2Icon,
+  unpin: PinOffIcon,
+  update: RefreshCcwIcon,
+  upload: UploadIcon,
+  variable: VariableIcon,
+  wifi: WifiIcon,
+  wrench: WrenchIcon,
+  x: XIcon,
+  zap: ZapIcon,
+  zap_off: ZapOffIcon,
+  _unknown: ShieldAlertIcon,
+
+  empty: (props: HTMLAttributes<HTMLSpanElement>) => <div {...props} />,
+};
+
+export interface IconProps {
+  icon: keyof typeof icons;
+  className?: string;
+  style?: CSSProperties;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+  spin?: boolean;
+  title?: string;
+  color?: Color | "custom" | "default";
+}
+
+export const Icon = memo(function Icon({
+  icon,
+  color = "default",
+  spin,
+  size = "md",
+  style,
+  className,
+  title,
+}: IconProps) {
+  const Component = icons[icon] ?? icons._unknown;
+  return (
+    <Component
+      style={style}
+      title={title}
+      className={classNames(
+        className,
+        !spin && "transform-gpu",
+        spin && "animate-spin",
+        "shrink-0",
+        size === "xl" && "h-6 w-6",
+        size === "lg" && "h-5 w-5",
+        size === "md" && "h-4 w-4",
+        size === "sm" && "h-3.5 w-3.5",
+        size === "xs" && "h-3 w-3",
+        size === "2xs" && "h-2.5 w-2.5",
+        color === "default" && "inherit",
+        color === "danger" && "text-danger",
+        color === "warning" && "text-warning",
+        color === "notice" && "text-notice",
+        color === "info" && "text-info",
+        color === "success" && "text-success",
+        color === "primary" && "text-primary",
+        color === "secondary" && "text-secondary",
+      )}
+    />
+  );
+});
diff --git a/packages/ui/src/components/IconButton.tsx b/packages/ui/src/components/IconButton.tsx
new file mode 100644
index 0000000..4cf5aa4
--- /dev/null
+++ b/packages/ui/src/components/IconButton.tsx
@@ -0,0 +1,95 @@
+import classNames from "classnames";
+import type { MouseEvent } from "react";
+import { forwardRef, useCallback } from "react";
+import { useTimedBoolean } from "../hooks/useTimedBoolean";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
+import type { IconProps } from "./Icon";
+import { Icon } from "./Icon";
+import { LoadingIcon } from "./LoadingIcon";
+
+export type IconButtonProps = IconProps &
+  ButtonProps & {
+    showConfirm?: boolean;
+    iconClassName?: string;
+    iconSize?: IconProps["size"];
+    iconColor?: IconProps["color"];
+    title: string;
+    showBadge?: boolean;
+  };
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  {
+    showConfirm,
+    icon,
+    color = "default",
+    spin,
+    onClick,
+    className,
+    iconClassName,
+    tabIndex,
+    size = "md",
+    iconSize,
+    showBadge,
+    iconColor,
+    isLoading,
+    type = "button",
+    ...props
+  }: IconButtonProps,
+  ref,
+) {
+  const [confirmed, setConfirmed] = useTimedBoolean();
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (showConfirm) setConfirmed();
+      onClick?.(e);
+    },
+    [onClick, setConfirmed, showConfirm],
+  );
+
+  return (
+    <Button
+      ref={ref}
+      aria-hidden={icon === "empty"}
+      disabled={icon === "empty"}
+      tabIndex={(tabIndex ?? icon === "empty") ? -1 : undefined}
+      onClick={handleClick}
+      innerClassName="flex items-center justify-center"
+      size={size}
+      color={color}
+      type={type}
+      className={classNames(
+        className,
+        "group/button relative shrink-0",
+        "px-0!",
+        size === "md" && "w-md",
+        size === "sm" && "w-sm",
+        size === "xs" && "w-xs",
+        size === "2xs" && "w-5",
+      )}
+      {...props}
+    >
+      {showBadge && (
+        <div className="absolute top-0 right-0 w-1/2 h-1/2 flex items-center justify-center">
+          <div className="w-2.5 h-2.5 bg-pink-500 rounded-full" />
+        </div>
+      )}
+      {isLoading ? (
+        <LoadingIcon size={iconSize} className={iconClassName} />
+      ) : (
+        <Icon
+          size={iconSize}
+          icon={confirmed ? "check" : icon}
+          spin={spin}
+          color={iconColor}
+          className={classNames(
+            iconClassName,
+            "group-hover/button:text-text",
+            confirmed && "text-success!",
+            props.disabled && "opacity-70",
+          )}
+        />
+      )}
+    </Button>
+  );
+});
diff --git a/packages/ui/src/components/InlineCode.tsx b/packages/ui/src/components/InlineCode.tsx
new file mode 100644
index 0000000..aeb87f2
--- /dev/null
+++ b/packages/ui/src/components/InlineCode.tsx
@@ -0,0 +1,15 @@
+import classNames from "classnames";
+import type { HTMLAttributes } from "react";
+
+export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <code
+      className={classNames(
+        className,
+        "font-mono text-shrink bg-surface-highlight border border-border-subtle grow-0",
+        "px-1.5 py-0.5 rounded-sm text shadow-inner wrap-break-word",
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/packages/ui/src/components/LoadingIcon.tsx b/packages/ui/src/components/LoadingIcon.tsx
new file mode 100644
index 0000000..edaa885
--- /dev/null
+++ b/packages/ui/src/components/LoadingIcon.tsx
@@ -0,0 +1,35 @@
+import classNames from "classnames";
+
+interface Props {
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+}
+
+export function LoadingIcon({ size = "md", className }: Props) {
+  const classes = classNames(
+    className,
+    "text-inherit shrink-0",
+    size === "xl" && "h-6 w-6",
+    size === "lg" && "h-5 w-5",
+    size === "md" && "h-4 w-4",
+    size === "sm" && "h-3.5 w-3.5",
+    size === "xs" && "h-3 w-3",
+    size === "2xs" && "h-2.5 w-2.5",
+    "animate-spin",
+  );
+
+  return (
+    <div
+      className={classNames(
+        classes,
+        "border-[currentColor] border-b-transparent rounded-full",
+        size === "xl" && "border-[0.2rem]",
+        size === "lg" && "border-[0.16rem]",
+        size === "md" && "border-[0.13rem]",
+        size === "sm" && "border-[0.1rem]",
+        size === "xs" && "border-[0.08rem]",
+        size === "2xs" && "border-[0.06rem]",
+      )}
+    />
+  );
+}
diff --git a/packages/ui/src/components/Overlay.tsx b/packages/ui/src/components/Overlay.tsx
new file mode 100644
index 0000000..c22e61e
--- /dev/null
+++ b/packages/ui/src/components/Overlay.tsx
@@ -0,0 +1,90 @@
+import classNames from "classnames";
+import { FocusTrap } from "focus-trap-react";
+import * as m from "motion/react-m";
+import type { ReactNode } from "react";
+import { useRef } from "react";
+import { Portal } from "./Portal";
+
+interface Props {
+  children: ReactNode;
+  portalName: string;
+  open: boolean;
+  onClose?: () => void;
+  zIndex?: keyof typeof zIndexes;
+  variant?: "default" | "transparent";
+  noBackdrop?: boolean;
+}
+
+const zIndexes: Record<number, string> = {
+  10: "z-10",
+  20: "z-20",
+  30: "z-30",
+  40: "z-40",
+  50: "z-50",
+};
+
+export function Overlay({
+  variant = "default",
+  zIndex = 30,
+  open,
+  onClose,
+  portalName,
+  noBackdrop,
+  children,
+}: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  if (noBackdrop) {
+    return (
+      <Portal name={portalName}>
+        {open && (
+          <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
+            {/* NOTE: <div> wrapper is required for some reason, or FocusTrap complains */}
+            <div>{children}</div>
+          </FocusTrap>
+        )}
+      </Portal>
+    );
+  }
+
+  return (
+    <Portal name={portalName}>
+      {open && (
+        <FocusTrap
+          focusTrapOptions={{
+            // Allow outside click so we can click things like toasts
+            allowOutsideClick: true,
+            delayInitialFocus: true,
+            checkCanFocusTrap: async () => {
+              // Not sure why delayInitialFocus: true doesn't help, but having this no-op promise
+              // seems to be required to make things work.
+            },
+          }}
+        >
+          <m.div
+            ref={containerRef}
+            className={classNames("fixed inset-0", zIndexes[zIndex])}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+          >
+            <div
+              aria-hidden
+              onClick={onClose}
+              className={classNames(
+                "absolute inset-0",
+                variant === "default" && "bg-backdrop backdrop-blur-xs",
+              )}
+            />
+
+            {/* Show the draggable region at the top */}
+            {/* TODO: Figure out tauri drag region and also make clickable still */}
+            {variant === "default" && (
+              <div data-tauri-drag-region className="absolute top-0 left-0 h-md right-0" />
+            )}
+            {children}
+          </m.div>
+        </FocusTrap>
+      )}
+    </Portal>
+  );
+}
diff --git a/packages/ui/src/components/Portal.tsx b/packages/ui/src/components/Portal.tsx
new file mode 100644
index 0000000..2a30219
--- /dev/null
+++ b/packages/ui/src/components/Portal.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { usePortal } from "../hooks/usePortal";
+
+interface Props {
+  children: ReactNode;
+  name: string;
+}
+
+export function Portal({ children, name }: Props) {
+  const portal = usePortal(name);
+  return createPortal(children, portal);
+}
diff --git a/packages/ui/src/components/ResizeHandle.tsx b/packages/ui/src/components/ResizeHandle.tsx
new file mode 100644
index 0000000..73cc23d
--- /dev/null
+++ b/packages/ui/src/components/ResizeHandle.tsx
@@ -0,0 +1,112 @@
+import classNames from "classnames";
+import type { CSSProperties, MouseEvent as ReactMouseEvent } from "react";
+import { useCallback, useRef, useState } from "react";
+
+const START_DISTANCE = 7;
+
+export interface ResizeHandleEvent {
+  x: number;
+  y: number;
+  xStart: number;
+  yStart: number;
+}
+
+interface Props {
+  style?: CSSProperties;
+  className?: string;
+  onResizeStart?: () => void;
+  onResizeEnd?: () => void;
+  onResizeMove?: (e: ResizeHandleEvent) => void;
+  onReset?: () => void;
+  side: "left" | "right" | "top";
+  justify: "center" | "end" | "start";
+}
+
+export function ResizeHandle({
+  style,
+  justify,
+  className,
+  onResizeStart,
+  onResizeEnd,
+  onResizeMove,
+  onReset,
+  side,
+}: Props) {
+  const vertical = side === "top";
+  const [isResizing, setIsResizing] = useState<boolean>(false);
+  const moveState = useRef<{
+    move: (e: MouseEvent) => void;
+    up: (e: MouseEvent) => void;
+    calledStart: boolean;
+    xStart: number;
+    yStart: number;
+  } | null>(null);
+
+  const handlePointerDown = useCallback(
+    (e: ReactMouseEvent<HTMLDivElement>) => {
+      function move(e: MouseEvent) {
+        if (moveState.current == null) return;
+
+        const xDistance = moveState.current.xStart - e.clientX;
+        const yDistance = moveState.current.yStart - e.clientY;
+        const distance = Math.abs(vertical ? yDistance : xDistance);
+        if (moveState.current.calledStart) {
+          onResizeMove?.({
+            x: e.clientX,
+            y: e.clientY,
+            xStart: moveState.current.xStart,
+            yStart: moveState.current.yStart,
+          });
+        } else if (distance > START_DISTANCE) {
+          onResizeStart?.();
+          moveState.current.calledStart = true;
+          setIsResizing(true);
+        }
+      }
+
+      function up() {
+        setIsResizing(false);
+        moveState.current = null;
+        document.documentElement.removeEventListener("mousemove", move);
+        document.documentElement.removeEventListener("mouseup", up);
+        onResizeEnd?.();
+      }
+
+      moveState.current = { calledStart: false, xStart: e.clientX, yStart: e.clientY, move, up };
+
+      document.documentElement.addEventListener("mousemove", move);
+      document.documentElement.addEventListener("mouseup", up);
+    },
+    [onResizeEnd, onResizeMove, onResizeStart, vertical],
+  );
+
+  return (
+    <div
+      aria-hidden
+      style={style}
+      onDoubleClick={onReset}
+      onPointerDown={handlePointerDown}
+      className={classNames(
+        className,
+        "group z-10 flex select-none transition-colors hover:bg-surface-active rounded-full",
+        vertical ? "w-full h-1.5 cursor-row-resize" : "h-full w-1.5 cursor-col-resize",
+        justify === "center" && "justify-center",
+        justify === "end" && "justify-end",
+        justify === "start" && "justify-start",
+        side === "right" && "right-0",
+        side === "left" && "left-0",
+        side === "top" && "top-0",
+      )}
+    >
+      {isResizing && (
+        <div
+          className={classNames(
+            "fixed left-[-100vw] right-[-100vw] top-[-100vh] bottom-[-100vh]",
+            vertical && "cursor-row-resize",
+            !vertical && "cursor-col-resize",
+          )}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/SidebarLayout.tsx b/packages/ui/src/components/SidebarLayout.tsx
new file mode 100644
index 0000000..448bbe9
--- /dev/null
+++ b/packages/ui/src/components/SidebarLayout.tsx
@@ -0,0 +1,146 @@
+import classNames from "classnames";
+import * as m from "motion/react-m";
+import type { CSSProperties, ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useContainerSize } from "../hooks/useContainerSize";
+import { Overlay } from "./Overlay";
+import type { ResizeHandleEvent } from "./ResizeHandle";
+import { ResizeHandle } from "./ResizeHandle";
+
+const FLOATING_BREAKPOINT = 600;
+
+const side = { gridArea: "side", minWidth: 0 };
+const drag = { gridArea: "drag" };
+const body = { gridArea: "body", minWidth: 0 };
+
+interface Props {
+  width: number;
+  onWidthChange: (width: number) => void;
+  hidden?: boolean;
+  onHiddenChange?: (hidden: boolean) => void;
+  floatingHidden?: boolean;
+  onFloatingHiddenChange?: (hidden: boolean) => void;
+  onFloatingChange?: (floating: boolean) => void;
+  floatingWidth?: number;
+  defaultWidth?: number;
+  minWidth?: number;
+  className?: string;
+  sidebar: ReactNode;
+  children: ReactNode;
+}
+
+export function SidebarLayout({
+  width,
+  onWidthChange,
+  hidden = false,
+  onHiddenChange,
+  floatingHidden = true,
+  onFloatingHiddenChange,
+  onFloatingChange,
+  floatingWidth = 320,
+  defaultWidth = 250,
+  minWidth = 50,
+  className,
+  sidebar,
+  children,
+}: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerSize = useContainerSize(containerRef);
+  const floating = containerSize.width > 0 && containerSize.width <= FLOATING_BREAKPOINT;
+
+  useEffect(() => {
+    onFloatingChange?.(floating);
+  }, [floating]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const [isResizing, setIsResizing] = useState(false);
+  const startWidth = useRef<number | null>(null);
+
+  const sideWidth = hidden ? 0 : width;
+
+  const styles = useMemo<CSSProperties>(
+    () => ({
+      gridTemplate: `
+        ' ${side.gridArea} ${drag.gridArea} ${body.gridArea}' minmax(0,1fr)
+        / ${sideWidth}px   0                1fr`,
+    }),
+    [sideWidth],
+  );
+
+  const handleResizeStart = useCallback(() => {
+    startWidth.current = width;
+    setIsResizing(true);
+  }, [width]);
+
+  const handleResizeEnd = useCallback(() => {
+    setIsResizing(false);
+    startWidth.current = null;
+  }, []);
+
+  const handleResizeMove = useCallback(
+    ({ x, xStart }: ResizeHandleEvent) => {
+      if (startWidth.current == null) return;
+
+      const newWidth = startWidth.current + (x - xStart);
+      if (newWidth < minWidth) {
+        onHiddenChange?.(true);
+        onWidthChange(defaultWidth);
+      } else {
+        if (hidden) onHiddenChange?.(false);
+        onWidthChange(newWidth);
+      }
+    },
+    [minWidth, hidden, onHiddenChange, onWidthChange, defaultWidth],
+  );
+
+  const handleReset = useCallback(() => {
+    onWidthChange(defaultWidth);
+  }, [onWidthChange, defaultWidth]);
+
+  if (floating) {
+    return (
+      <div ref={containerRef} className={classNames(className, "w-full h-full min-h-0")}>
+        <Overlay
+          open={!floatingHidden}
+          portalName="sidebar"
+          onClose={() => onFloatingHiddenChange?.(true)}
+          zIndex={20}
+        >
+          <m.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            style={{ width: floatingWidth }}
+            className="absolute top-0 left-0 bottom-0"
+          >
+            {sidebar}
+          </m.div>
+        </Overlay>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      style={styles}
+      className={classNames(className, "grid w-full h-full", !isResizing && "transition-grid")}
+    >
+      <div style={side} className="overflow-hidden">
+        {sidebar}
+      </div>
+      <ResizeHandle
+        style={drag}
+        className="-translate-x-px"
+        justify="end"
+        side="right"
+        onResizeStart={handleResizeStart}
+        onResizeEnd={handleResizeEnd}
+        onResizeMove={handleResizeMove}
+        onReset={handleReset}
+      />
+      <div style={body} className="min-w-0">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/SplitLayout.tsx b/packages/ui/src/components/SplitLayout.tsx
new file mode 100644
index 0000000..b5fd516
--- /dev/null
+++ b/packages/ui/src/components/SplitLayout.tsx
@@ -0,0 +1,168 @@
+import classNames from "classnames";
+import type { CSSProperties, ReactNode } from "react";
+import { useCallback, useMemo, useRef } from "react";
+import { useLocalStorage } from "react-use";
+import { useContainerSize } from "../hooks/useContainerSize";
+import { clamp } from "../lib/clamp";
+import type { ResizeHandleEvent } from "./ResizeHandle";
+import { ResizeHandle } from "./ResizeHandle";
+
+export type SplitLayoutLayout = "responsive" | "horizontal" | "vertical";
+
+export interface SlotProps {
+  orientation: "horizontal" | "vertical";
+  style: CSSProperties;
+}
+
+interface Props {
+  storageKey: string;
+  firstSlot: (props: SlotProps) => ReactNode;
+  secondSlot: null | ((props: SlotProps) => ReactNode);
+  style?: CSSProperties;
+  className?: string;
+  defaultRatio?: number;
+  minHeightPx?: number;
+  minWidthPx?: number;
+  layout?: SplitLayoutLayout;
+  resizeHandleClassName?: string;
+}
+
+const baseProperties = { minHeight: 0, minWidth: 0 };
+const areaL = { ...baseProperties, gridArea: "left" };
+const areaR = { ...baseProperties, gridArea: "right" };
+const areaD = { ...baseProperties, gridArea: "drag" };
+
+const STACK_VERTICAL_WIDTH = 500;
+
+export function SplitLayout({
+  style,
+  firstSlot,
+  secondSlot,
+  className,
+  storageKey,
+  layout = "responsive",
+  resizeHandleClassName,
+  defaultRatio = 0.5,
+  minHeightPx = 10,
+  minWidthPx = 10,
+}: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [widthRaw, setWidth] = useLocalStorage<number>(`${storageKey}_width`);
+  const [heightRaw, setHeight] = useLocalStorage<number>(`${storageKey}_height`);
+  const width = widthRaw ?? defaultRatio;
+  let height = heightRaw ?? defaultRatio;
+
+  if (!secondSlot) {
+    height = 0;
+    minHeightPx = 0;
+  }
+
+  const size = useContainerSize(containerRef);
+  const verticalBasedOnSize = size.width !== 0 && size.width < STACK_VERTICAL_WIDTH;
+  const vertical = layout !== "horizontal" && (layout === "vertical" || verticalBasedOnSize);
+  const renderedWidth = clampSplitRatio(width, minWidthPx, size.width);
+  const renderedHeight = secondSlot ? clampSplitRatio(height, minHeightPx, size.height) : 0;
+
+  const styles = useMemo<CSSProperties>(() => {
+    return {
+      ...style,
+      gridTemplate: vertical
+        ? `
+            ' ${areaL.gridArea}' minmax(0,${1 - renderedHeight}fr)
+            ' ${areaD.gridArea}' 0
+            ' ${areaR.gridArea}' minmax(0,${renderedHeight}fr)
+            / 1fr
+          `
+        : `
+            ' ${areaL.gridArea} ${areaD.gridArea} ${areaR.gridArea}' minmax(0,1fr)
+            / ${1 - renderedWidth}fr    0                 ${renderedWidth}fr
+          `,
+    };
+  }, [style, vertical, renderedHeight, renderedWidth]);
+
+  const handleReset = useCallback(() => {
+    if (vertical) setHeight(defaultRatio);
+    else setWidth(defaultRatio);
+  }, [vertical, setHeight, defaultRatio, setWidth]);
+
+  const handleResizeMove = useCallback(
+    (e: ResizeHandleEvent) => {
+      if (containerRef.current === null) return;
+
+      const { paddingLeft, paddingRight, paddingTop, paddingBottom } = getComputedStyle(
+        containerRef.current,
+      );
+      const $c = containerRef.current;
+      const containerWidth =
+        $c.clientWidth - Number.parseFloat(paddingLeft) - Number.parseFloat(paddingRight);
+      const containerHeight =
+        $c.clientHeight - Number.parseFloat(paddingTop) - Number.parseFloat(paddingBottom);
+
+      if ((vertical && containerHeight <= 0) || (!vertical && containerWidth <= 0)) {
+        return;
+      }
+
+      const mouseStartX = e.xStart;
+      const mouseStartY = e.yStart;
+      const startWidth = containerWidth * renderedWidth;
+      const startHeight = containerHeight * renderedHeight;
+
+      if (vertical) {
+        const minHeight = Math.min(minHeightPx, containerHeight);
+        const maxHeightPx = Math.max(minHeight, containerHeight - minHeightPx);
+        const newHeightPx = clamp(startHeight - (e.y - mouseStartY), minHeight, maxHeightPx);
+        setHeight(newHeightPx / containerHeight);
+      } else {
+        const minWidth = Math.min(minWidthPx, containerWidth);
+        const maxWidthPx = Math.max(minWidth, containerWidth - minWidthPx);
+        const newWidthPx = clamp(startWidth - (e.x - mouseStartX), minWidth, maxWidthPx);
+        setWidth(newWidthPx / containerWidth);
+      }
+    },
+    [
+      renderedWidth,
+      renderedHeight,
+      vertical,
+      minHeightPx,
+      setHeight,
+      minWidthPx,
+      setWidth,
+    ],
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      style={styles}
+      className={classNames(className, "grid w-full h-full overflow-hidden")}
+    >
+      {firstSlot({ style: areaL, orientation: vertical ? "vertical" : "horizontal" })}
+      {secondSlot && (
+        <>
+          <ResizeHandle
+            style={areaD}
+            className={classNames(
+              resizeHandleClassName,
+              vertical ? "-translate-y-1" : "-translate-x-1",
+            )}
+            onResizeMove={handleResizeMove}
+            onReset={handleReset}
+            side={vertical ? "top" : "left"}
+            justify="center"
+          />
+          {secondSlot({ style: areaR, orientation: vertical ? "vertical" : "horizontal" })}
+        </>
+      )}
+    </div>
+  );
+}
+
+function clampSplitRatio(ratio: number, minPx: number, containerPx: number): number {
+  if (containerPx <= 0 || minPx <= 0) {
+    return ratio;
+  }
+
+  const minRatio = Math.min(1, minPx / containerPx);
+  const maxRatio = minRatio >= 0.5 ? minRatio : 1 - minRatio;
+  return clamp(ratio, minRatio, maxRatio);
+}
diff --git a/packages/ui/src/components/Stacks.tsx b/packages/ui/src/components/Stacks.tsx
new file mode 100644
index 0000000..f8ad1cd
--- /dev/null
+++ b/packages/ui/src/components/Stacks.tsx
@@ -0,0 +1,93 @@
+import classNames from "classnames";
+import type { ComponentType, ForwardedRef, HTMLAttributes, ReactNode } from "react";
+import { forwardRef } from "react";
+
+const gapClasses = {
+  0: "gap-0",
+  0.5: "gap-0.5",
+  1: "gap-1",
+  1.5: "gap-1.5",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+};
+
+interface HStackProps extends BaseStackProps {
+  children?: ReactNode;
+}
+
+export const HStack = forwardRef(function HStack(
+  { className, space, children, alignItems = "center", ...props }: HStackProps,
+  // oxlint-disable-next-line no-explicit-any
+  ref: ForwardedRef<any>,
+) {
+  return (
+    <BaseStack
+      ref={ref}
+      className={classNames(className, "flex-row", space != null && gapClasses[space])}
+      alignItems={alignItems}
+      {...props}
+    >
+      {children}
+    </BaseStack>
+  );
+});
+
+export type VStackProps = BaseStackProps & {
+  children: ReactNode;
+};
+
+export const VStack = forwardRef(function VStack(
+  { className, space, children, ...props }: VStackProps,
+  // oxlint-disable-next-line no-explicit-any
+  ref: ForwardedRef<any>,
+) {
+  return (
+    <BaseStack
+      ref={ref}
+      className={classNames(className, "flex-col", space != null && gapClasses[space])}
+      {...props}
+    >
+      {children}
+    </BaseStack>
+  );
+});
+
+type BaseStackProps = HTMLAttributes<HTMLElement> & {
+  as?: ComponentType | "ul" | "label" | "form" | "p";
+  space?: keyof typeof gapClasses;
+  alignItems?: "start" | "center" | "stretch" | "end";
+  justifyContent?: "start" | "center" | "end" | "between";
+  wrap?: boolean;
+};
+
+const BaseStack = forwardRef(function BaseStack(
+  { className, alignItems, justifyContent, wrap, children, as, ...props }: BaseStackProps,
+  // oxlint-disable-next-line no-explicit-any
+  ref: ForwardedRef<any>,
+) {
+  const Component = as ?? "div";
+  return (
+    <Component
+      ref={ref}
+      className={classNames(
+        className,
+        "flex",
+        wrap && "flex-wrap",
+        alignItems === "center" && "items-center",
+        alignItems === "start" && "items-start",
+        alignItems === "stretch" && "items-stretch",
+        alignItems === "end" && "items-end",
+        justifyContent === "start" && "justify-start",
+        justifyContent === "center" && "justify-center",
+        justifyContent === "end" && "justify-end",
+        justifyContent === "between" && "justify-between",
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});
diff --git a/packages/ui/src/components/Table.tsx b/packages/ui/src/components/Table.tsx
new file mode 100644
index 0000000..64138e9
--- /dev/null
+++ b/packages/ui/src/components/Table.tsx
@@ -0,0 +1,128 @@
+import classNames from "classnames";
+import type { HTMLAttributes } from "react";
+import type { ReactNode } from "react";
+
+export function Table({
+  children,
+  className,
+  scrollable,
+  style,
+}: {
+  children: ReactNode;
+  className?: string;
+  scrollable?: boolean;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <div style={style} className={classNames("w-full", scrollable && "h-full overflow-y-auto")}>
+      <table
+        className={classNames(
+          className,
+          "w-full text-sm mb-auto min-w-full max-w-full",
+          "border-separate border-spacing-0",
+          scrollable && "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-10",
+        )}
+      >
+        {children}
+      </table>
+    </div>
+  );
+}
+
+export function TableBody({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <tbody
+      className={classNames(
+        className,
+        "[&>tr:not(:last-child):not([data-table-spacer])>td]:border-b",
+        "[&>tr:not(:last-child):not([data-table-spacer])>td]:border-b-surface-highlight",
+      )}
+    >
+      <tr aria-hidden data-table-spacer className="h-0.5">
+        <td className="p-0" colSpan={1000} />
+      </tr>
+      {children}
+    </tbody>
+  );
+}
+
+export function TableHead({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <thead
+      className={classNames(
+        className,
+        "bg-surface [&_th]:border-b [&_th]:border-b-surface-highlight",
+      )}
+    >
+      {children}
+    </thead>
+  );
+}
+
+export function TableRow({
+  children,
+  className,
+  ...props
+}: {
+  children: ReactNode;
+  className?: string;
+} & HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr className={className} {...props}>
+      {children}
+    </tr>
+  );
+}
+
+export function TableCell({
+  children,
+  className,
+  align = "left",
+}: {
+  children: ReactNode;
+  className?: string;
+  align?: "left" | "center" | "right";
+}) {
+  return (
+    <td
+      className={classNames(
+        className,
+        "py-2 not-first:pl-4 whitespace-nowrap",
+        align === "left" ? "text-left" : align === "center" ? "text-center" : "text-right",
+      )}
+    >
+      {children}
+    </td>
+  );
+}
+
+export function TruncatedWideTableCell({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <TableCell className={classNames(className, "truncate max-w-0 w-full")}>{children}</TableCell>
+  );
+}
+
+export function TableHeaderCell({
+  children,
+  className,
+}: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <th
+      className={classNames(
+        className,
+        "whitespace-nowrap py-2 not-first:pl-4 text-left text-text-subtle",
+      )}
+    >
+      {children}
+    </th>
+  );
+}
diff --git a/packages/ui/src/components/WindowControls.tsx b/packages/ui/src/components/WindowControls.tsx
new file mode 100644
index 0000000..a23deda
--- /dev/null
+++ b/packages/ui/src/components/WindowControls.tsx
@@ -0,0 +1,99 @@
+import { platform } from "@yaakapp-internal/platform";
+import classNames from "classnames";
+import { useState } from "react";
+import { WINDOW_CONTROLS_WIDTH } from "../lib/constants";
+import { Button } from "./Button";
+
+interface Props {
+  className?: string;
+  onlyX?: boolean;
+  osType: string;
+  hideWindowControls: boolean;
+  useNativeTitlebar: boolean;
+}
+
+export function WindowControls({
+  className,
+  onlyX,
+  osType,
+  hideWindowControls,
+  useNativeTitlebar,
+}: Props) {
+  const [maximized, setMaximized] = useState<boolean>(false);
+
+  // Never show controls on macOS or if hideWindowControls is true
+  if (osType === "macos" || hideWindowControls || useNativeTitlebar) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        className,
+        "ml-4 absolute right-0 top-0 bottom-0 flex items-center justify-end",
+      )}
+      style={{ width: WINDOW_CONTROLS_WIDTH }}
+      data-tauri-drag-region
+    >
+      {!onlyX && (
+        <>
+          <Button
+            className="h-full! px-4 text-text-subtle hocus:text hocus:bg-surface-highlight rounded-none"
+            color="custom"
+            onClick={() => platform.window.minimize()}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+              <title>Minimize</title>
+              <path fill="currentColor" d="M14 8v1H3V8z" />
+            </svg>
+          </Button>
+          <Button
+            className="h-full! px-4 text-text-subtle hocus:text hocus:bg-surface-highlight rounded-none"
+            color="custom"
+            onClick={async () => {
+              const w = platform.window;
+              const isMaximized = await w.isMaximized();
+              if (isMaximized) {
+                await w.unmaximize();
+                setMaximized(false);
+              } else {
+                await w.maximize();
+                setMaximized(true);
+              }
+            }}
+          >
+            {maximized ? (
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                <title>Unmaximize</title>
+                <g fill="currentColor">
+                  <path d="M3 5v9h9V5zm8 8H4V6h7z" />
+                  <path fillRule="evenodd" d="M5 5h1V4h7v7h-1v1h2V3H5z" clipRule="evenodd" />
+                </g>
+              </svg>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                <title>Maximize</title>
+                <path fill="currentColor" d="M3 3v10h10V3zm9 9H4V4h8z" />
+              </svg>
+            )}
+          </Button>
+        </>
+      )}
+      <Button
+        color="custom"
+        className="h-full! px-4 text-text-subtle rounded-none hocus:bg-danger hocus:text-text"
+        onClick={() => platform.window.close()}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+          <title>Close</title>
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="m7.116 8l-4.558 4.558l.884.884L8 8.884l4.558 4.558l.884-.884L8.884 8l4.558-4.558l-.884-.884L8 7.116L3.442 2.558l-.884.884z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </Button>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/tree/Tree.tsx b/packages/ui/src/components/tree/Tree.tsx
new file mode 100644
index 0000000..697dedc
--- /dev/null
+++ b/packages/ui/src/components/tree/Tree.tsx
@@ -0,0 +1,835 @@
+import type { DragEndEvent, DragMoveEvent, DragStartEvent } from "@dnd-kit/core";
+import type { Virtualizer } from "@tanstack/react-virtual";
+import {
+  DndContext,
+  MeasuringStrategy,
+  PointerSensor,
+  pointerWithin,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { platform } from "@yaakapp-internal/platform";
+import classNames from "classnames";
+import type { ComponentType, MouseEvent, ReactElement, Ref, RefAttributes } from "react";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useKey, useKeyPressEvent } from "react-use";
+import { computeSideForDragMove } from "../../lib/dnd";
+import { useAtomValue, useStore } from "jotai";
+import { draggingIdsFamily, focusIdsFamily, hoveredParentFamily, selectedIdsFamily } from "./atoms";
+import { type CollapsedAtom, CollapsedAtomContext } from "./context";
+import type { ContextMenuRenderer, TreeNode } from "./common";
+import { closestVisibleNode, equalSubtree, getSelectedItems, hasAncestor } from "./common";
+import { TreeDragOverlay } from "./TreeDragOverlay";
+import type { TreeItemClickEvent, TreeItemHandle, TreeItemProps } from "./TreeItem";
+import type { TreeItemListProps } from "./TreeItemList";
+import { TreeItemList } from "./TreeItemList";
+import { useSelectableItems } from "./useSelectableItems";
+
+/** So we re-calculate after expanding a folder during drag */
+const measuring = { droppable: { strategy: MeasuringStrategy.Always } };
+
+export interface TreeProps<T extends { id: string }> {
+  root: TreeNode<T>;
+  treeId: string;
+  collapsedAtom: CollapsedAtom;
+  getItemKey: (item: T) => string;
+  getContextMenu?: (items: T[]) => unknown[] | Promise<unknown[]>;
+  renderContextMenu?: ContextMenuRenderer;
+  ItemInner: ComponentType<{ treeId: string; item: T }>;
+  ItemLeftSlotInner?: ComponentType<{ treeId: string; item: T }>;
+  ItemRightSlot?: ComponentType<{ treeId: string; item: T }>;
+  className?: string;
+  onActivate?: (item: T) => void;
+  onDragEnd?: (opt: { items: T[]; parent: T; children: T[]; insertAt: number }) => void;
+  getEditOptions?: (item: T) => {
+    defaultValue: string;
+    placeholder?: string;
+    onChange: (item: T, text: string) => void;
+  };
+}
+
+export interface TreeHandle {
+  treeId: string;
+  focus: () => boolean;
+  hasFocus: () => boolean;
+  getSelectedItems: () => { id: string }[];
+  selectItem: (id: string, focus?: boolean) => void;
+  renameItem: (id: string) => void;
+  showContextMenu: () => void;
+}
+
+function TreeInner<T extends { id: string }>(
+  {
+    className,
+    collapsedAtom,
+    getContextMenu,
+    getEditOptions,
+    getItemKey,
+    onActivate,
+    onDragEnd,
+    renderContextMenu,
+    ItemInner,
+    ItemLeftSlotInner,
+    ItemRightSlot,
+    root,
+    treeId,
+  }: TreeProps<T>,
+  ref: Ref<TreeHandle>,
+) {
+  const store = useStore();
+  const treeRef = useRef<HTMLDivElement>(null);
+  const virtualizerRef = useRef<Virtualizer<HTMLElement, Element> | null>(null);
+
+  // The scroll container is tracked in state as well as a ref, so the virtualizer re-resolves it
+  // once it exists. React attaches refs and runs layout effects child-first, so TreeItemList's
+  // effects run before this ancestor's ref is set: on a fresh mount a ref-only getScrollElement
+  // returns null, and the virtualizer renders nothing until some later render happens to wake it
+  // up. Usually one does, which is why this only showed when the tree remounted into settled data
+  // (filtering down to no results and back).
+  const [scrollEl, setScrollEl] = useState<HTMLDivElement | null>(null);
+  const setTreeRef = useCallback((el: HTMLDivElement | null) => {
+    treeRef.current = el;
+    setScrollEl(el);
+  }, []);
+  const getScrollElement = useCallback(() => scrollEl, [scrollEl]);
+  const handleVirtualizerReady = useCallback((v: Virtualizer<HTMLElement, Element>) => {
+    virtualizerRef.current = v;
+  }, []);
+  const selectableItems = useSelectableItems(root);
+
+  // Only render nodes that are actually visible (not filtered out, and not
+  // inside a collapsed folder). Mounting every node regardless of visibility
+  // makes large workspaces unusable: thousands of hidden TreeItems each run
+  // their dnd/context hooks on every tree commit just to return null.
+  const collapsedMap = useAtomValue(collapsedAtom);
+  const visibleItems = useMemo(() => {
+    return selectableItems.filter((i) => {
+      if (i.node.hidden) return false;
+      for (let p = i.node.parent; p != null; p = p.parent) {
+        if (collapsedMap[p.item.id]) return false;
+      }
+      return true;
+    });
+  }, [selectableItems, collapsedMap]);
+  const [showContextMenu, setShowContextMenu] = useState<{
+    items: unknown[];
+    x: number;
+    y: number;
+  } | null>(null);
+  const treeItemRefs = useRef<Record<string, TreeItemHandle>>({});
+  const handleAddTreeItemRef = useCallback((item: T, r: TreeItemHandle | null) => {
+    if (r == null) {
+      delete treeItemRefs.current[item.id];
+
+      // Keep keyboard focus inside the tree when the focused row is virtualized away.
+      //
+      // Scrolling the focused row out of the window destroys the button holding focus, and the
+      // browser drops focus to the body rather than moving it anywhere. Everything keyboard-driven
+      // is gated on the tree containing document.activeElement (arrow navigation here, rename,
+      // delete, duplicate and the context menu in the consumer), so the entire keyboard interface
+      // would go dead until the user clicked a row again. They all act on the selected id rather
+      // than the focused element, so parking focus on the container is enough to keep them live.
+      //
+      // NOTE: This has to hang off the unmount rather than a render or a focusout. Scrolling
+      //  re-renders the list, not this component, and removing a focused element doesn't reliably
+      //  fire focusout.
+      requestAnimationFrame(() => {
+        const el = treeRef.current;
+        if (el == null) return;
+        const active = document.activeElement;
+        const focusWasDropped = active == null || active === document.body || !active.isConnected;
+        if (focusWasDropped) {
+          el.focus({ preventScroll: true });
+        }
+      });
+    } else {
+      treeItemRefs.current[item.id] = r;
+    }
+  }, []);
+
+  // Select the first item on first render
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Only used for initial render
+  useEffect(() => {
+    const ids = store.get(selectedIdsFamily(treeId));
+    const fallback = selectableItems[0];
+    if (ids.length === 0 && fallback != null) {
+      store.set(selectedIdsFamily(treeId), [fallback.node.item.id]);
+      store.set(focusIdsFamily(treeId), {
+        anchorId: fallback.node.item.id,
+        lastId: fallback.node.item.id,
+      });
+    }
+  }, [treeId]);
+
+  const handleCloseContextMenu = useCallback(() => {
+    setShowContextMenu(null);
+  }, []);
+
+  const isTreeFocused = useCallback(() => {
+    return treeRef.current?.contains(document.activeElement);
+  }, []);
+
+  const tryFocus = useCallback(() => {
+    const find = () =>
+      treeRef.current?.querySelector<HTMLButtonElement>('.tree-item button[tabindex="0"]');
+    const $el = find();
+    if ($el != null) {
+      // preventScroll so scrolling stays single-sourced (focus() implicitly
+      // scrolls, which fights the virtualizer's scrollToIndex)
+      $el.focus({ preventScroll: true });
+      $el.scrollIntoView({ block: "nearest" });
+      return true;
+    }
+
+    // The focused row may be virtualized out of range. Scroll it into range,
+    // then focus it once it has mounted.
+    const lastFocusedId = store.get(focusIdsFamily(treeId)).lastId;
+    const index = visibleItems.findIndex((i) => i.node.item.id === lastFocusedId);
+    if (index < 0) {
+      return false;
+    }
+    virtualizerRef.current?.scrollToIndex(index, { align: "auto" });
+    requestAnimationFrame(() => find()?.focus({ preventScroll: true }));
+    return true;
+  }, [store, treeId, visibleItems]);
+
+  const ensureTabbableItem = useCallback(() => {
+    const lastSelectedId = store.get(focusIdsFamily(treeId)).lastId;
+    const lastSelectedItem = selectableItems.find(
+      (i) => i.node.item.id === lastSelectedId && !i.node.hidden,
+    );
+
+    // If no item found, default to selecting the first item (prefer leaf node);
+    if (lastSelectedItem == null) {
+      const firstLeafItem = selectableItems.find((i) => !i.node.hidden && i.node.children == null);
+      const firstItem = firstLeafItem ?? selectableItems.find((i) => !i.node.hidden);
+      if (firstItem != null) {
+        const id = firstItem.node.item.id;
+        store.set(selectedIdsFamily(treeId), [id]);
+        store.set(focusIdsFamily(treeId), { anchorId: id, lastId: id });
+      }
+      return;
+    }
+
+    const closest = closestVisibleNode(store, collapsedAtom, lastSelectedItem.node);
+    if (closest != null) {
+      const id = closest.item.id;
+      store.set(selectedIdsFamily(treeId), [id]);
+      store.set(focusIdsFamily(treeId), { anchorId: id, lastId: id });
+    }
+  }, [selectableItems, treeId]);
+
+  // Ensure there's always a tabbable item after collapsed state changes
+  useEffect(() => {
+    const unsub = store.sub(collapsedAtom, ensureTabbableItem);
+    return unsub;
+  }, [ensureTabbableItem, treeId]);
+
+  // Ensure there's always a tabbable item after render
+  useEffect(() => {
+    requestAnimationFrame(ensureTabbableItem);
+  });
+
+  const hasFocus = useCallback(() => {
+    return treeRef.current?.contains(document.activeElement) ?? false;
+  }, []);
+
+  const setSelected = useCallback(
+    (ids: string[], focus: boolean) => {
+      store.set(selectedIdsFamily(treeId), ids);
+      // TODO: Figure out a better way than timeout
+      if (!focus) return;
+      setTimeout(tryFocus, 50);
+    },
+    [treeId, tryFocus],
+  );
+
+  /**
+   * Run something against a row's handle, scrolling the row into view first when it isn't
+   * mounted.
+   *
+   * Virtualized rows only have a handle while they're in the window, but the row these act on is
+   * the selected one, which the user is free to scroll away from before hitting a hotkey. Without
+   * this, renaming an off-screen row silently does nothing and the context menu has no rect to
+   * open against.
+   */
+  const withTreeItem = useCallback(
+    (id: string, action: (handle: TreeItemHandle) => void) => {
+      const mounted = treeItemRefs.current[id];
+      if (mounted != null) {
+        action(mounted);
+        return;
+      }
+
+      const index = visibleItems.findIndex((i) => i.node.item.id === id);
+      if (index < 0) return;
+
+      virtualizerRef.current?.scrollToIndex(index, { align: "auto" });
+      requestAnimationFrame(() => {
+        const handle = treeItemRefs.current[id];
+        if (handle != null) action(handle);
+      });
+    },
+    [visibleItems],
+  );
+
+  const treeHandle = useMemo<TreeHandle>(
+    () => ({
+      treeId,
+      focus: tryFocus,
+      hasFocus: hasFocus,
+      getSelectedItems: () => getSelectedItems(store, treeId, selectableItems),
+      renameItem: (id) => withTreeItem(id, (handle) => handle.rename()),
+      selectItem: (id, focus) => {
+        if (store.get(selectedIdsFamily(treeId)).includes(id)) {
+          // Already selected
+          return;
+        }
+        store.set(focusIdsFamily(treeId), { anchorId: id, lastId: id });
+        setSelected([id], focus === true);
+      },
+      showContextMenu: async () => {
+        if (getContextMenu == null) return;
+        const items = getSelectedItems(store, treeId, selectableItems);
+        const menuItems = await getContextMenu(items);
+        const lastSelectedId = store.get(focusIdsFamily(treeId)).lastId;
+        if (lastSelectedId == null) return;
+        withTreeItem(lastSelectedId, (handle) => {
+          const rect = handle.rect();
+          setShowContextMenu({ items: menuItems, x: rect.x, y: rect.y });
+        });
+      },
+    }),
+    [getContextMenu, hasFocus, selectableItems, setSelected, treeId, tryFocus, withTreeItem],
+  );
+
+  useImperativeHandle(ref, (): TreeHandle => treeHandle, [treeHandle]);
+
+  const handleGetContextMenu = useMemo(() => {
+    if (getContextMenu == null) return;
+    return (item: T) => {
+      const items = getSelectedItems(store, treeId, selectableItems);
+      const isSelected = items.find((i) => i.id === item.id);
+      if (isSelected) {
+        // If right-clicked an item that was in the multiple-selection, use the entire selection
+        return getContextMenu(items);
+      }
+      // If right-clicked an item that was NOT in the multiple-selection, just use that one
+      // Also update the selection with it
+      setSelected([item.id], false);
+      store.set(focusIdsFamily(treeId), (prev) => ({ ...prev, lastId: item.id }));
+      return getContextMenu([item]);
+    };
+  }, [getContextMenu, selectableItems, setSelected, treeId]);
+
+  const handleSelect = useCallback<NonNullable<TreeItemProps<T>["onClick"]>>(
+    (item, { shiftKey, metaKey, ctrlKey }) => {
+      const anchorSelectedId = store.get(focusIdsFamily(treeId)).anchorId;
+      const selectedIdsAtom = selectedIdsFamily(treeId);
+      const selectedIds = store.get(selectedIdsAtom);
+
+      // Mark the item as the last one selected
+      store.set(focusIdsFamily(treeId), (prev) => ({ ...prev, lastId: item.id }));
+
+      if (shiftKey) {
+        const anchorIndex = visibleItems.findIndex((i) => i.node.item.id === anchorSelectedId);
+        const currIndex = visibleItems.findIndex((v) => v.node.item.id === item.id);
+
+        // Nothing was selected yet, so just select this item
+        if (selectedIds.length === 0 || anchorIndex === -1 || currIndex === -1) {
+          setSelected([item.id], true);
+          store.set(focusIdsFamily(treeId), (prev) => ({ ...prev, anchorId: item.id }));
+          return;
+        }
+
+        if (currIndex > anchorIndex) {
+          // Selecting down
+          const itemsToSelect = visibleItems.slice(anchorIndex, currIndex + 1);
+          setSelected(
+            itemsToSelect.map((v) => v.node.item.id),
+            true,
+          );
+        } else if (currIndex < anchorIndex) {
+          // Selecting up
+          const itemsToSelect = visibleItems.slice(currIndex, anchorIndex + 1);
+          setSelected(
+            itemsToSelect.map((v) => v.node.item.id),
+            true,
+          );
+        } else {
+          setSelected([item.id], true);
+        }
+      } else if (platform.osType() === "macos" ? metaKey : ctrlKey) {
+        const withoutCurr = selectedIds.filter((id) => id !== item.id);
+        if (withoutCurr.length === selectedIds.length) {
+          // It wasn't in there, so add it
+          setSelected([...selectedIds, item.id], true);
+        } else {
+          // It was in there, so remove it
+          setSelected(withoutCurr, true);
+        }
+      } else {
+        // Select single
+        setSelected([item.id], true);
+        store.set(focusIdsFamily(treeId), (prev) => ({ ...prev, anchorId: item.id }));
+      }
+    },
+    [setSelected, treeId, visibleItems],
+  );
+
+  const handleClick = useCallback<NonNullable<TreeItemProps<T>["onClick"]>>(
+    (item, e) => {
+      if (e.shiftKey || e.ctrlKey || e.metaKey) {
+        handleSelect(item, e);
+      } else {
+        handleSelect(item, e);
+        onActivate?.(item);
+      }
+    },
+    [handleSelect, onActivate],
+  );
+
+  const selectPrevItem = useCallback(
+    (e: TreeItemClickEvent) => {
+      const lastSelectedId = store.get(focusIdsFamily(treeId)).lastId;
+      const index = visibleItems.findIndex((i) => i.node.item.id === lastSelectedId);
+      const item = visibleItems[index - 1];
+      if (item != null) {
+        handleSelect(item.node.item, e);
+      }
+    },
+    [handleSelect, treeId, visibleItems],
+  );
+
+  const selectNextItem = useCallback(
+    (e: TreeItemClickEvent) => {
+      const lastSelectedId = store.get(focusIdsFamily(treeId)).lastId;
+      const index = visibleItems.findIndex((i) => i.node.item.id === lastSelectedId);
+      const item = visibleItems[index + 1];
+      if (item != null) {
+        handleSelect(item.node.item, e);
+      }
+    },
+    [handleSelect, treeId, visibleItems],
+  );
+
+  const selectParentItem = useCallback(
+    (e: TreeItemClickEvent) => {
+      const lastSelectedId = store.get(focusIdsFamily(treeId)).lastId;
+      const lastSelectedItem =
+        selectableItems.find((i) => i.node.item.id === lastSelectedId)?.node ?? null;
+      if (lastSelectedItem?.parent != null) {
+        handleSelect(lastSelectedItem.parent.item, e);
+      }
+    },
+    [handleSelect, selectableItems, treeId],
+  );
+
+  useKey(
+    (e) => e.key === "ArrowUp" || e.key.toLowerCase() === "k",
+    (e) => {
+      if (!isTreeFocused()) return;
+      e.preventDefault();
+      selectPrevItem(e);
+    },
+    undefined,
+    [selectableItems, handleSelect],
+  );
+
+  useKey(
+    (e) => e.key === "ArrowDown" || e.key.toLowerCase() === "j",
+    (e) => {
+      if (!isTreeFocused()) return;
+      e.preventDefault();
+      selectNextItem(e);
+    },
+    undefined,
+    [selectableItems, handleSelect],
+  );
+
+  // If the selected item is a collapsed folder, expand it. Otherwise, select next item
+  useKey(
+    (e) => e.key === "ArrowRight" || e.key === "l",
+    (e) => {
+      if (!isTreeFocused()) return;
+      e.preventDefault();
+
+      const collapsed = store.get(collapsedAtom);
+      const lastSelectedId = store.get(focusIdsFamily(treeId)).lastId;
+      const lastSelectedItem = selectableItems.find((i) => i.node.item.id === lastSelectedId);
+
+      if (
+        lastSelectedId &&
+        lastSelectedItem?.node.children != null &&
+        collapsed[lastSelectedItem.node.item.id] === true
+      ) {
+        store.set(collapsedAtom, { ...collapsed, [lastSelectedId]: false });
+      } else {
+        selectNextItem(e);
+      }
+    },
+    undefined,
+    [selectableItems, handleSelect],
+  );
+
+  // If the selected item is in a folder, select its parent.
+  // If the selected item is an expanded folder, collapse it.
+  useKey(
+    (e) => e.key === "ArrowLeft" || e.key === "h",
+    (e) => {
+      if (!isTreeFocused()) return;
+      e.preventDefault();
+
+      const collapsed = store.get(collapsedAtom);
+      const lastSelectedId = store.get(focusIdsFamily(treeId)).lastId;
+      const lastSelectedItem = selectableItems.find((i) => i.node.item.id === lastSelectedId);
+
+      if (
+        lastSelectedId &&
+        lastSelectedItem?.node.children != null &&
+        collapsed[lastSelectedItem.node.item.id] !== true
+      ) {
+        store.set(collapsedAtom, { ...collapsed, [lastSelectedId]: true });
+      } else {
+        selectParentItem(e);
+      }
+    },
+    { options: {} },
+    [selectableItems, handleSelect],
+  );
+
+  useKeyPressEvent("Escape", async () => {
+    if (!treeRef.current?.contains(document.activeElement)) return;
+    clearDragState();
+    const lastSelectedId = store.get(focusIdsFamily(treeId)).lastId;
+    if (lastSelectedId == null) return;
+    setSelected([lastSelectedId], false);
+  });
+
+  const handleDragMove = useCallback(
+    function handleDragMove(e: DragMoveEvent) {
+      const over = e.over;
+      if (!over) {
+        // Clear the drop indicator when hovering outside the tree
+        store.set(hoveredParentFamily(treeId), {
+          parentId: null,
+          parentDepth: null,
+          childIndex: null,
+          index: null,
+        });
+        return;
+      }
+
+      // Not sure when or if this happens
+      if (e.active.rect.current.initial == null) {
+        return;
+      }
+
+      // Root is anything past the end of the list, so set it to the end
+      const hoveringRoot = over.id === root.item.id;
+      if (hoveringRoot) {
+        store.set(hoveredParentFamily(treeId), {
+          parentId: root.item.id,
+          parentDepth: root.depth,
+          index: visibleItems.length,
+          childIndex: visibleItems.length,
+        });
+        return;
+      }
+
+      const overSelectableItem = selectableItems.find((i) => i.node.item.id === over.id) ?? null;
+      if (overSelectableItem == null) {
+        return;
+      }
+
+      const draggingItems = store.get(draggingIdsFamily(treeId));
+      for (const id of draggingItems) {
+        const item = selectableItems.find((i) => i.node.item.id === id)?.node ?? null;
+        if (item == null) {
+          return;
+        }
+
+        const isSameParent = item.parent?.item.id === overSelectableItem.node.parent?.item.id;
+        if (item.localDrag && !isSameParent) {
+          return;
+        }
+      }
+
+      const node = overSelectableItem.node;
+      const side = computeSideForDragMove(node.item.id, e);
+
+      const item = node.item;
+      let hoveredParent = node.parent;
+      const dragIndex = visibleItems.findIndex((n) => n.node.item.id === item.id) ?? -1;
+      const hovered = visibleItems[dragIndex]?.node ?? null;
+      const hoveredIndex = dragIndex + (side === "before" ? 0 : 1);
+      let hoveredChildIndex = overSelectableItem.index + (side === "before" ? 0 : 1);
+
+      // Move into the folder if it's open and we're moving after it
+      if (hovered?.children != null && side === "after") {
+        hoveredParent = hovered;
+        hoveredChildIndex = 0;
+      }
+
+      const parentId = hoveredParent?.item.id ?? null;
+      const parentDepth = hoveredParent?.depth ?? null;
+      const index = hoveredIndex;
+      const childIndex = hoveredChildIndex;
+      const existing = store.get(hoveredParentFamily(treeId));
+      if (
+        !(
+          parentId === existing.parentId &&
+          parentDepth === existing.parentDepth &&
+          index === existing.index &&
+          childIndex === existing.childIndex
+        )
+      ) {
+        store.set(hoveredParentFamily(treeId), {
+          parentId,
+          parentDepth,
+          index,
+          childIndex,
+        });
+      }
+    },
+    [root.depth, root.item.id, selectableItems, treeId, visibleItems],
+  );
+
+  const handleDragStart = useCallback(
+    function handleDragStart(e: DragStartEvent) {
+      const selectedItems = getSelectedItems(store, treeId, selectableItems);
+      const isDraggingSelectedItem = selectedItems.find((i) => i.id === e.active.id);
+
+      // If we started dragging an already-selected item, we'll use that
+      if (isDraggingSelectedItem) {
+        store.set(
+          draggingIdsFamily(treeId),
+          selectedItems.map((i) => i.id),
+        );
+      } else {
+        // If we started dragging a non-selected item, only drag that item
+        const activeItem = selectableItems.find((i) => i.node.item.id === e.active.id)?.node.item;
+        if (activeItem != null) {
+          store.set(draggingIdsFamily(treeId), [activeItem.id]);
+          // Also update selection to just be this one
+          handleSelect(activeItem, {
+            shiftKey: false,
+            metaKey: false,
+            ctrlKey: false,
+          });
+        }
+      }
+    },
+    [handleSelect, selectableItems, treeId],
+  );
+
+  const clearDragState = useCallback(() => {
+    store.set(hoveredParentFamily(treeId), {
+      parentId: null,
+      parentDepth: null,
+      index: null,
+      childIndex: null,
+    });
+    store.set(draggingIdsFamily(treeId), []);
+  }, [treeId]);
+
+  const handleDragEnd = useCallback(
+    function handleDragEnd(e: DragEndEvent) {
+      // Get this from the store so our callback doesn't change all the time
+      const {
+        index: hoveredIndex,
+        parentId: hoveredParentId,
+        childIndex: hoveredChildIndex,
+      } = store.get(hoveredParentFamily(treeId));
+      const draggingItems = store.get(draggingIdsFamily(treeId));
+      clearDragState();
+
+      // Dropped outside the tree?
+      if (e.over == null) {
+        return;
+      }
+
+      const hoveredParentS =
+        hoveredParentId === root.item.id
+          ? { node: root, depth: 0, index: 0 }
+          : (selectableItems.find((i) => i.node.item.id === hoveredParentId) ?? null);
+      const hoveredParent = hoveredParentS?.node ?? null;
+
+      if (hoveredParent == null || hoveredIndex == null || !draggingItems?.length) {
+        return;
+      }
+
+      // Resolve the actual tree nodes for each dragged item (keeps order of draggingItems)
+      const draggedNodes: TreeNode<T>[] = draggingItems
+        .map((id) => {
+          return selectableItems.find((i) => i.node.item.id === id)?.node ?? null;
+        })
+        .filter((n) => n != null)
+        // Filter out invalid drags (dragging into descendant)
+        .filter(
+          (n) => hoveredParent.item.id !== n.item.id && !hasAncestor(hoveredParent, n.item.id),
+        );
+
+      // Work on a local copy of target children
+      const nextChildren = [...(hoveredParent.children ?? [])];
+
+      // Remove any of the dragged nodes already in the target, adjusting hoveredIndex
+      let insertAt = hoveredChildIndex ?? 0;
+      for (const node of draggedNodes) {
+        const i = nextChildren.findIndex((n) => n.item.id === node.item.id);
+        if (i !== -1) {
+          nextChildren.splice(i, 1);
+          if (i < insertAt) insertAt -= 1; // account for removed-before
+        }
+      }
+
+      // Batch callback
+      onDragEnd?.({
+        items: draggedNodes.map((n) => n.item),
+        parent: hoveredParent.item,
+        children: nextChildren.map((c) => c.item),
+        insertAt,
+      });
+    },
+    [treeId, clearDragState, selectableItems, root, onDragEnd],
+  );
+
+  const treeItemListProps: Omit<
+    TreeItemListProps<T>,
+    "nodes" | "treeId" | "activeIdAtom" | "hoveredParent" | "hoveredIndex"
+  > = {
+    getItemKey,
+    getContextMenu: handleGetContextMenu,
+    renderContextMenu,
+    onClick: handleClick,
+    getEditOptions,
+    ItemInner,
+    ItemLeftSlotInner,
+    ItemRightSlot,
+  };
+
+  const handleContextMenu = useCallback(
+    async (e: MouseEvent<HTMLElement>) => {
+      if (getContextMenu == null) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+      const items = await getContextMenu([]);
+      setShowContextMenu({ items, x: e.clientX, y: e.clientY });
+    },
+    [getContextMenu],
+  );
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+
+  return (
+    <CollapsedAtomContext.Provider value={collapsedAtom}>
+      {showContextMenu &&
+        renderContextMenu?.({
+          items: showContextMenu.items,
+          position: showContextMenu,
+          onClose: handleCloseContextMenu,
+        })}
+      <DndContext
+        sensors={sensors}
+        collisionDetection={pointerWithin}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragCancel={clearDragState}
+        onDragAbort={clearDragState}
+        onDragMove={handleDragMove}
+        measuring={measuring}
+        autoScroll
+      >
+        <div
+          ref={setTreeRef}
+          // Focusable so the container can hold focus when the focused row unmounts. Not reachable
+          // by tabbing, since the rows themselves are what's tabbable.
+          tabIndex={-1}
+          className={classNames(
+            className,
+            "outline-hidden h-full",
+            "overflow-y-auto overflow-x-hidden",
+            "grid grid-rows-[auto_1fr]",
+          )}
+        >
+          <div
+            className={classNames(
+              "[&_.tree-item.selected_.tree-item-inner]:text-text",
+              "focus-within:[&_.tree-item.selected]:bg-surface-active",
+              "not-focus-within:[&_.tree-item.selected:not([data-context-menu-open])]:bg-surface-highlight",
+              "[&_.tree-item.selected[data-context-menu-open]]:bg-surface-active",
+              // Round the items, but only if the ends of the selection.
+              // Also account for the drop marker being in between items
+              "[&_.tree-item]:rounded-md",
+              "[&_.tree-item.selected+.tree-item.selected]:rounded-t-none",
+              "[&_.tree-item.selected+.drop-marker+.tree-item.selected]:rounded-t-none",
+              "[&_.tree-item.selected:has(+.tree-item.selected)]:rounded-b-none",
+              "[&_.tree-item.selected:has(+.drop-marker+.tree-item.selected)]:rounded-b-none",
+              // Virtualized rows are wrapped in .tree-row divs, so the sibling
+              // relationships above need wrapper-aware equivalents
+              "[&_.tree-row:has(.tree-item.selected)+.tree-row_.tree-item.selected]:rounded-t-none",
+              "[&_.tree-row:has(.tree-item.selected):has(+.tree-row_.tree-item.selected)_.tree-item.selected]:rounded-b-none",
+            )}
+          >
+            <TreeItemList
+              addTreeItemRef={handleAddTreeItemRef}
+              nodes={visibleItems}
+              treeId={treeId}
+              getScrollElement={getScrollElement}
+              onVirtualizerReady={handleVirtualizerReady}
+              {...treeItemListProps}
+            />
+          </div>
+          {/* Assign root ID so we can reuse our same move/end logic */}
+          <DropRegionAfterList id={root.item.id} onContextMenu={handleContextMenu} />
+        </div>
+        <TreeDragOverlay
+          treeId={treeId}
+          selectableItems={selectableItems}
+          ItemInner={ItemInner}
+          getItemKey={getItemKey}
+        />
+      </DndContext>
+    </CollapsedAtomContext.Provider>
+  );
+}
+
+// 1) Preserve generics through forwardRef:
+const Tree_ = forwardRef(TreeInner) as <T extends { id: string }>(
+  props: TreeProps<T> & RefAttributes<TreeHandle>,
+) => ReactElement | null;
+
+export const Tree = memo(
+  Tree_,
+  ({ root: prevNode, ...prevProps }, { root: nextNode, ...nextProps }) => {
+    for (const key of Object.keys(prevProps)) {
+      if (prevProps[key as keyof typeof prevProps] !== nextProps[key as keyof typeof nextProps]) {
+        return false;
+      }
+    }
+    return equalSubtree(prevNode, nextNode, nextProps.getItemKey);
+  },
+) as typeof Tree_;
+
+function DropRegionAfterList({
+  id,
+  onContextMenu,
+}: {
+  id: string;
+  onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void;
+}) {
+  const { setNodeRef } = useDroppable({ id });
+  // biome-ignore lint/a11y/noStaticElementInteractions: Meh
+  return <div ref={setNodeRef} onContextMenu={onContextMenu} />;
+}
diff --git a/packages/ui/src/components/tree/TreeDragOverlay.tsx b/packages/ui/src/components/tree/TreeDragOverlay.tsx
new file mode 100644
index 0000000..e021cea
--- /dev/null
+++ b/packages/ui/src/components/tree/TreeDragOverlay.tsx
@@ -0,0 +1,31 @@
+import { DragOverlay } from "@dnd-kit/core";
+import { useAtomValue } from "jotai";
+import { draggingIdsFamily } from "./atoms";
+import type { SelectableTreeNode } from "./common";
+import type { TreeProps } from "./Tree";
+import { TreeItemList } from "./TreeItemList";
+
+export function TreeDragOverlay<T extends { id: string }>({
+  treeId,
+  selectableItems,
+  getItemKey,
+  ItemInner,
+  ItemLeftSlotInner,
+}: {
+  treeId: string;
+  selectableItems: SelectableTreeNode<T>[];
+} & Pick<TreeProps<T>, "getItemKey" | "ItemInner" | "ItemLeftSlotInner">) {
+  const draggingItems = useAtomValue(draggingIdsFamily(treeId));
+  return (
+    <DragOverlay dropAnimation={null}>
+      <TreeItemList
+        treeId={`${treeId}.dragging`}
+        nodes={selectableItems.filter((i) => draggingItems.includes(i.node.item.id))}
+        getItemKey={getItemKey}
+        ItemInner={ItemInner}
+        ItemLeftSlotInner={ItemLeftSlotInner}
+        forceDepth={0}
+      />
+    </DragOverlay>
+  );
+}
diff --git a/packages/ui/src/components/tree/TreeDropMarker.tsx b/packages/ui/src/components/tree/TreeDropMarker.tsx
new file mode 100644
index 0000000..4c01e02
--- /dev/null
+++ b/packages/ui/src/components/tree/TreeDropMarker.tsx
@@ -0,0 +1,36 @@
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { memo } from "react";
+import { DropMarker } from "../DropMarker";
+import { hoveredParentDepthFamily, isIndexHoveredFamily } from "./atoms";
+import type { TreeNode } from "./common";
+import { useIsCollapsed } from "./context";
+
+export const TreeDropMarker = memo(function TreeDropMarker<T extends { id: string }>({
+  className,
+  treeId,
+  node,
+  index,
+}: {
+  treeId: string;
+  index: number;
+  node: TreeNode<T> | null;
+  className?: string;
+}) {
+  const isHovered = useAtomValue(isIndexHoveredFamily({ treeId, index }));
+  const parentDepth = useAtomValue(hoveredParentDepthFamily(treeId));
+  const collapsed = useIsCollapsed(node?.item.id);
+
+  // Only show if we're hovering over this index
+  if (!isHovered) return null;
+
+  // Don't show if we're right under a collapsed folder, or empty folder. We have a separate
+  // delayed expansion animation for that.
+  if (collapsed || node?.children?.length === 0) return null;
+
+  return (
+    <div className="drop-marker relative" style={{ paddingLeft: `${parentDepth}rem` }}>
+      <DropMarker className={classNames(className)} />
+    </div>
+  );
+});
diff --git a/packages/ui/src/components/tree/TreeIndentGuide.tsx b/packages/ui/src/components/tree/TreeIndentGuide.tsx
new file mode 100644
index 0000000..834de98
--- /dev/null
+++ b/packages/ui/src/components/tree/TreeIndentGuide.tsx
@@ -0,0 +1,32 @@
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { memo } from "react";
+import { hoveredParentDepthFamily, isAncestorHoveredFamily } from "./atoms";
+
+export const TreeIndentGuide = memo(function TreeIndentGuide({
+  treeId,
+  depth,
+  ancestorIds,
+}: {
+  treeId: string;
+  depth: number;
+  ancestorIds: string[];
+}) {
+  const parentDepth = useAtomValue(hoveredParentDepthFamily(treeId));
+  const isHovered = useAtomValue(isAncestorHoveredFamily({ treeId, ancestorIds }));
+
+  return (
+    <div className="flex">
+      {Array.from({ length: depth }).map((_, i) => (
+        <div
+          // oxlint-disable-next-line react/no-array-index-key
+          key={i}
+          className={classNames(
+            "w-[calc(1rem+0.5px)] border-r border-r-text-subtlest",
+            !(parentDepth === i + 1 && isHovered) && "opacity-30",
+          )}
+        />
+      ))}
+    </div>
+  );
+});
diff --git a/packages/ui/src/components/tree/TreeItem.tsx b/packages/ui/src/components/tree/TreeItem.tsx
new file mode 100644
index 0000000..87eb5c0
--- /dev/null
+++ b/packages/ui/src/components/tree/TreeItem.tsx
@@ -0,0 +1,415 @@
+import type { DragMoveEvent } from "@dnd-kit/core";
+import { useDndContext, useDndMonitor, useDraggable, useDroppable } from "@dnd-kit/core";
+import classNames from "classnames";
+import { useAtomValue, useStore } from "jotai";
+import type {
+  MouseEvent,
+  PointerEvent,
+  FocusEvent as ReactFocusEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+} from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { computeSideForDragMove } from "../../lib/dnd";
+import { Icon } from "../Icon";
+import { isLastFocusedFamily, isSelectedFamily } from "./atoms";
+import {
+  useCollapsedAtom,
+  useIsAncestorCollapsed,
+  useIsCollapsed,
+  useSetCollapsed,
+} from "./context";
+import type { TreeNode } from "./common";
+import { getNodeKey } from "./common";
+import { isImeCompositionEvent } from "./keyboard";
+import type { TreeProps } from "./Tree";
+import { TreeIndentGuide } from "./TreeIndentGuide";
+
+export interface TreeItemClickEvent {
+  shiftKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+}
+
+export type TreeItemProps<T extends { id: string }> = Pick<
+  TreeProps<T>,
+  | "ItemInner"
+  | "ItemLeftSlotInner"
+  | "ItemRightSlot"
+  | "treeId"
+  | "getEditOptions"
+  | "getItemKey"
+  | "renderContextMenu"
+> & {
+  node: TreeNode<T>;
+  className?: string;
+  onClick?: (item: T, e: TreeItemClickEvent) => void;
+  getContextMenu?: (item: T) => unknown[] | Promise<unknown[]>;
+  depth: number;
+  setRef?: (item: T, n: TreeItemHandle | null) => void;
+};
+
+export interface TreeItemHandle {
+  rename: () => void;
+  isRenaming: boolean;
+  rect: () => DOMRect;
+  focus: () => void;
+  scrollIntoView: () => void;
+}
+
+const HOVER_CLOSED_FOLDER_DELAY = 800;
+
+function TreeItem_<T extends { id: string }>({
+  treeId,
+  node,
+  ItemInner,
+  ItemLeftSlotInner,
+  ItemRightSlot,
+  getContextMenu,
+  renderContextMenu,
+  onClick,
+  getEditOptions,
+  className,
+  depth,
+  setRef,
+}: TreeItemProps<T>) {
+  const store = useStore();
+  const listItemRef = useRef<HTMLLIElement>(null);
+  const draggableRef = useRef<HTMLButtonElement>(null);
+  const collapsedAtom = useCollapsedAtom();
+  const isSelected = useAtomValue(isSelectedFamily({ treeId, itemId: node.item.id }));
+  const isCollapsed = useIsCollapsed(node.item.id);
+  const setCollapsed = useSetCollapsed(node.item.id);
+  const isLastSelected = useAtomValue(isLastFocusedFamily({ treeId, itemId: node.item.id }));
+  const [editing, setEditing] = useState<boolean>(false);
+  const [dropHover, setDropHover] = useState<null | "drop" | "animate">(null);
+  const startedHoverTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const handle = useMemo<TreeItemHandle>(
+    () => ({
+      focus: () => {
+        draggableRef.current?.focus();
+      },
+      rename: () => {
+        if (getEditOptions != null) {
+          setEditing(true);
+        }
+      },
+      isRenaming: editing,
+      rect: () => {
+        if (listItemRef.current == null) {
+          return new DOMRect(0, 0, 0, 0);
+        }
+        return listItemRef.current.getBoundingClientRect();
+      },
+      scrollIntoView: () => {
+        listItemRef.current?.scrollIntoView({ block: "nearest" });
+      },
+    }),
+    [editing, getEditOptions],
+  );
+
+  // NOTE: Unregisters on unmount, or the tree keeps a handle to a component that no longer exists.
+  //  Harmless while every row stayed mounted, but virtualized rows unmount whenever they leave the
+  //  window, and acting on a dead handle does nothing at best (rename) and reports a zeroed rect at
+  //  worst (the context menu opening in the corner of the screen).
+  useEffect(() => {
+    const item = node.item;
+    setRef?.(item, handle);
+    return () => setRef?.(item, null);
+  }, [setRef, handle, node.item]);
+
+  const ancestorIds = useMemo(() => {
+    const ids: string[] = [];
+    let p = node.parent;
+
+    while (p) {
+      ids.push(p.item.id);
+      p = p.parent;
+    }
+
+    return ids;
+  }, [node]);
+
+  const isAncestorCollapsed = useIsAncestorCollapsed(ancestorIds);
+
+  const [showContextMenu, setShowContextMenu] = useState<{
+    items: unknown[];
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => onClick?.(node.item, e),
+    [node, onClick],
+  );
+
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((prev) => !prev);
+  }, [setCollapsed]);
+
+  const handleSubmitNameEdit = useCallback(
+    async (el: HTMLInputElement) => {
+      const editOptions = getEditOptions?.(node.item);
+      if (editOptions == null || el.value === editOptions.defaultValue) {
+        setEditing(false);
+        return;
+      }
+
+      editOptions.onChange(node.item, el.value);
+      onClick?.(node.item, { shiftKey: false, ctrlKey: false, metaKey: false });
+      // Slight delay for the model to propagate to the local store
+      setTimeout(() => setEditing(false), 200);
+    },
+    [getEditOptions, node.item, onClick],
+  );
+
+  const handleEditFocus = useCallback(function handleEditFocus(el: HTMLInputElement | null) {
+    el?.focus();
+    el?.select();
+  }, []);
+
+  const handleEditBlur = useCallback(
+    async function editBlur(e: ReactFocusEvent<HTMLInputElement>) {
+      await handleSubmitNameEdit(e.currentTarget);
+    },
+    [handleSubmitNameEdit],
+  );
+
+  const handleEditKeyDown = useCallback(
+    async (e: ReactKeyboardEvent<HTMLInputElement>) => {
+      e.stopPropagation(); // Don't trigger other tree keys (like arrows)
+      if (isImeCompositionEvent(e.nativeEvent)) return;
+
+      switch (e.key) {
+        case "Enter":
+          if (editing) {
+            e.preventDefault();
+            await handleSubmitNameEdit(e.currentTarget);
+          }
+          break;
+        case "Escape":
+          if (editing) {
+            e.preventDefault();
+            setEditing(false);
+          }
+          break;
+      }
+    },
+    [editing, handleSubmitNameEdit],
+  );
+
+  const handleDoubleClick = useCallback(() => {
+    const isFolder = node.children != null;
+    if (isFolder) {
+      toggleCollapsed();
+    } else if (getEditOptions != null) {
+      setEditing(true);
+    }
+  }, [getEditOptions, node.children, toggleCollapsed]);
+
+  const clearDropHover = () => {
+    if (startedHoverTimeout.current) {
+      clearTimeout(startedHoverTimeout.current);
+      startedHoverTimeout.current = undefined;
+    }
+    setDropHover(null);
+  };
+
+  const dndContext = useDndContext();
+
+  // Toggle auto-expand of folders when hovering over them
+  useDndMonitor({
+    onDragEnd() {
+      clearDropHover();
+    },
+    onDragMove(e: DragMoveEvent) {
+      const side = computeSideForDragMove(node.item.id, e);
+      const isFolder = node.children != null;
+      const hasChildren = (node.children?.length ?? 0) > 0;
+      const collapsedMap = store.get(collapsedAtom);
+      const itemCollapsed = !!collapsedMap[node.item.id];
+      if (itemCollapsed && isFolder && hasChildren && side === "after") {
+        setDropHover("animate");
+        clearTimeout(startedHoverTimeout.current);
+        startedHoverTimeout.current = setTimeout(() => {
+          store.set(collapsedAtom, { ...store.get(collapsedAtom), [node.item.id]: false });
+          clearDropHover();
+          // Force re-measure everything because all containers below the folder have been pushed down
+          requestAnimationFrame(() => {
+            dndContext.measureDroppableContainers(
+              dndContext.droppableContainers.toArray().map((c) => c.id),
+            );
+          });
+        }, HOVER_CLOSED_FOLDER_DELAY);
+      } else if (isFolder && !hasChildren && side === "after") {
+        setDropHover("drop");
+      } else {
+        clearDropHover();
+      }
+    },
+  });
+
+  const handleContextMenu = useCallback(
+    async (e: MouseEvent<HTMLElement>) => {
+      if (getContextMenu == null) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Set data attribute on the list item to preserve active state
+      if (listItemRef.current) {
+        listItemRef.current.setAttribute("data-context-menu-open", "true");
+      }
+
+      const items = await getContextMenu(node.item);
+      setShowContextMenu({ items, x: e.clientX ?? 100, y: e.clientY ?? 100 });
+    },
+    [getContextMenu, node.item],
+  );
+
+  const handleCloseContextMenu = useCallback(() => {
+    // Remove data attribute when context menu closes
+    if (listItemRef.current) {
+      listItemRef.current.removeAttribute("data-context-menu-open");
+    }
+    setShowContextMenu(null);
+  }, []);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDraggableRef,
+  } = useDraggable({ id: node.item.id, disabled: node.draggable === false || editing });
+
+  const { setNodeRef: setDroppableRef } = useDroppable({ id: node.item.id });
+
+  const handlePointerDown = useCallback(
+    function handlePointerDown(e: PointerEvent<HTMLButtonElement>) {
+      const handleByTree = e.metaKey || e.ctrlKey || e.shiftKey;
+      if (!handleByTree) {
+        listeners?.onPointerDown?.(e);
+      }
+    },
+    [listeners],
+  );
+
+  const handleSetDraggableRef = useCallback(
+    (node: HTMLButtonElement | null) => {
+      draggableRef.current = node;
+      setDraggableRef(node);
+      setDroppableRef(node);
+    },
+    [setDraggableRef, setDroppableRef],
+  );
+
+  if (node.hidden || isAncestorCollapsed) return null;
+
+  return (
+    <li
+      ref={listItemRef}
+      onContextMenu={handleContextMenu}
+      className={classNames(
+        className,
+        "tree-item",
+        "h-sm",
+        "grid grid-cols-[auto_minmax(0,1fr)]",
+        editing && "ring-1 focus-within:ring-focus",
+        dropHover != null && "relative z-10 ring-2 ring-primary",
+        dropHover === "animate" && "animate-blinkRing",
+        isSelected && "selected",
+      )}
+    >
+      <TreeIndentGuide treeId={treeId} depth={depth} ancestorIds={ancestorIds} />
+      <div
+        className={classNames(
+          "text-text-subtle",
+          "grid grid-cols-[auto_minmax(0,1fr)_auto] gap-x-2 items-center rounded-md",
+        )}
+      >
+        {showContextMenu &&
+          renderContextMenu?.({
+            items: showContextMenu.items,
+            position: showContextMenu,
+            onClose: handleCloseContextMenu,
+          })}
+        {node.children != null ? (
+          <button
+            type="button"
+            tabIndex={-1}
+            className="h-full pl-2 outline-hidden"
+            onClick={toggleCollapsed}
+          >
+            <Icon
+              icon={node.children.length === 0 ? "dot" : "chevron_right"}
+              className={classNames(
+                "transition-transform text-text-subtlest",
+                "ml-auto",
+                "w-4 h-4",
+                !isCollapsed && node.children.length > 0 && "rotate-90",
+              )}
+            />
+          </button>
+        ) : (
+          <span aria-hidden /> // Make the grid happy
+        )}
+
+        <button
+          ref={handleSetDraggableRef}
+          onPointerDown={handlePointerDown}
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          disabled={editing}
+          className="cursor-default tree-item-inner pr-1 focus:outline-hidden flex items-center gap-2 h-full whitespace-nowrap"
+          {...attributes}
+          {...listeners}
+          tabIndex={isLastSelected ? 0 : -1}
+        >
+          {ItemLeftSlotInner != null && <ItemLeftSlotInner treeId={treeId} item={node.item} />}
+          {getEditOptions != null && editing ? (
+            (() => {
+              const { defaultValue, placeholder } = getEditOptions(node.item);
+              return (
+                <input
+                  data-disable-hotkey
+                  ref={handleEditFocus}
+                  defaultValue={defaultValue}
+                  placeholder={placeholder}
+                  autoCapitalize="off"
+                  autoCorrect="off"
+                  className="bg-transparent outline-hidden w-full cursor-text"
+                  onBlur={handleEditBlur}
+                  onKeyDown={handleEditKeyDown}
+                />
+              );
+            })()
+          ) : (
+            <ItemInner treeId={treeId} item={node.item} />
+          )}
+        </button>
+        {ItemRightSlot != null ? (
+          <ItemRightSlot treeId={treeId} item={node.item} />
+        ) : (
+          <span aria-hidden />
+        )}
+      </div>
+    </li>
+  );
+}
+
+export const TreeItem = memo(
+  TreeItem_,
+  ({ node: prevNode, ...prevProps }, { node: nextNode, ...nextProps }) => {
+    const nonEqualKeys = [];
+    for (const key of Object.keys(prevProps)) {
+      if (prevProps[key as keyof typeof prevProps] !== nextProps[key as keyof typeof nextProps]) {
+        nonEqualKeys.push(key);
+      }
+    }
+    if (nonEqualKeys.length > 0) {
+      return false;
+    }
+
+    return (
+      getNodeKey(prevNode, prevProps.getItemKey) === getNodeKey(nextNode, nextProps.getItemKey)
+    );
+  },
+) as typeof TreeItem_;
diff --git a/packages/ui/src/components/tree/TreeItemList.tsx b/packages/ui/src/components/tree/TreeItemList.tsx
new file mode 100644
index 0000000..16f378a
--- /dev/null
+++ b/packages/ui/src/components/tree/TreeItemList.tsx
@@ -0,0 +1,191 @@
+import type { Virtualizer } from "@tanstack/react-virtual";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useAtomValue } from "jotai";
+import type { CSSProperties } from "react";
+import { Fragment, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { draggingIdsFamily } from "./atoms";
+import type { SelectableTreeNode } from "./common";
+import type { TreeProps } from "./Tree";
+import { TreeDropMarker } from "./TreeDropMarker";
+import type { TreeItemHandle, TreeItemProps } from "./TreeItem";
+import { TreeItem } from "./TreeItem";
+
+export type TreeItemListProps<T extends { id: string }> = Pick<
+  TreeProps<T>,
+  | "ItemInner"
+  | "ItemLeftSlotInner"
+  | "ItemRightSlot"
+  | "treeId"
+  | "getItemKey"
+  | "getEditOptions"
+  | "renderContextMenu"
+> &
+  Pick<TreeItemProps<T>, "onClick" | "getContextMenu"> & {
+    nodes: SelectableTreeNode<T>[];
+    style?: CSSProperties;
+    className?: string;
+    forceDepth?: number;
+    addTreeItemRef?: (item: T, n: TreeItemHandle | null) => void;
+    /**
+     * Enable virtualization by providing the scroll container. Rows are then
+     * windowed with @tanstack/react-virtual and only visible rows mount.
+     */
+    getScrollElement?: () => HTMLElement | null;
+    onVirtualizerReady?: (v: Virtualizer<HTMLElement, Element>) => void;
+  };
+
+export function TreeItemList<T extends { id: string }>(props: TreeItemListProps<T>) {
+  if (props.getScrollElement != null) {
+    return <VirtualTreeItemList {...props} getScrollElement={props.getScrollElement} />;
+  }
+  return <StaticTreeItemList {...props} />;
+}
+
+function StaticTreeItemList<T extends { id: string }>({
+  className,
+  getItemKey,
+  nodes,
+  style,
+  treeId,
+  forceDepth,
+  addTreeItemRef,
+  getScrollElement: _getScrollElement,
+  onVirtualizerReady: _onVirtualizerReady,
+  ...props
+}: TreeItemListProps<T>) {
+  return (
+    <ul style={style} className={className}>
+      <TreeDropMarker node={null} treeId={treeId} index={0} />
+      {nodes.map((child, i) => (
+        <Fragment key={getItemKey(child.node.item)}>
+          <TreeItem
+            treeId={treeId}
+            setRef={addTreeItemRef}
+            node={child.node}
+            getItemKey={getItemKey}
+            depth={forceDepth == null ? child.depth : forceDepth}
+            {...props}
+          />
+          <TreeDropMarker node={child.node} treeId={treeId} index={i + 1} />
+        </Fragment>
+      ))}
+    </ul>
+  );
+}
+
+// Rows are --height-sm (2rem). Derive the pixel estimate from the actual root
+// font size so scroll math stays accurate under interface scaling.
+function estimateRowHeightPx() {
+  const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+  return 2 * rem;
+}
+
+function VirtualTreeItemList<T extends { id: string }>({
+  className,
+  getItemKey,
+  nodes,
+  style,
+  treeId,
+  forceDepth,
+  addTreeItemRef,
+  getScrollElement,
+  onVirtualizerReady,
+  ...props
+}: TreeItemListProps<T> & { getScrollElement: () => HTMLElement | null }) {
+  const listRef = useRef<HTMLUListElement>(null);
+
+  // Offset of the list within the scroll container (eg. container padding),
+  // so windowing and scrollToIndex targets aren't shifted by it
+  const [scrollMargin, setScrollMargin] = useState(0);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    const scroller = getScrollElement();
+    if (list == null || scroller == null) return;
+    const offset =
+      list.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+    setScrollMargin(offset);
+  }, [getScrollElement]);
+
+  const virtualizer = useVirtualizer({
+    count: nodes.length,
+    getScrollElement,
+    estimateSize: estimateRowHeightPx,
+    overscan: 10,
+    scrollMargin,
+  });
+
+  useLayoutEffect(() => {
+    onVirtualizerReady?.(virtualizer);
+  }, [virtualizer, onVirtualizerReady]);
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  // Rows being dragged stay mounted even after they scroll out of the window.
+  //
+  // dnd-kit keeps a live reference to the node being dragged and re-measures it whenever that
+  // node is replaced. Its scroll adjustment is a delta against a baseline captured when that rect
+  // was last measured, and re-measuring resets the baseline to wherever the list happens to be
+  // scrolled right then, discarding the scroll accumulated so far. Letting the dragged row unmount
+  // mid-drag therefore corrupts every coordinate dnd-kit derives, by a bit more each time it
+  // happens, which is why the drop indicator drifts further the longer a drag autoscrolls.
+  const draggingIds = useAtomValue(draggingIdsFamily(treeId));
+  const pinnedIndexes = useMemo(() => {
+    if (draggingIds.length === 0) return [];
+    const rendered = new Set(virtualItems.map((v) => v.index));
+    const out: number[] = [];
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (node == null || rendered.has(i)) continue;
+      if (draggingIds.includes(node.node.item.id)) out.push(i);
+    }
+    return out;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keyed off the rendered range
+  }, [draggingIds, nodes, virtualItems]);
+
+  const renderRow = (index: number, start: number, measure: boolean) => {
+    const child = nodes[index];
+    if (child == null) return null;
+    return (
+      <div
+        // Key by item so window shifts don't remount rows unnecessarily
+        key={getItemKey(child.node.item)}
+        ref={measure ? virtualizer.measureElement : undefined}
+        data-index={index}
+        className="tree-row"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          transform: `translateY(${start - scrollMargin}px)`,
+        }}
+      >
+        <TreeItem
+          treeId={treeId}
+          setRef={addTreeItemRef}
+          node={child.node}
+          getItemKey={getItemKey}
+          depth={forceDepth == null ? child.depth : forceDepth}
+          {...props}
+        />
+        <TreeDropMarker node={child.node} treeId={treeId} index={index + 1} />
+      </div>
+    );
+  };
+
+  return (
+    <ul
+      ref={listRef}
+      style={{ ...style, height: `${virtualizer.getTotalSize()}px`, position: "relative" }}
+      className={className}
+    >
+      <TreeDropMarker node={null} treeId={treeId} index={0} />
+      {virtualItems.map((virtualItem) => renderRow(virtualItem.index, virtualItem.start, true))}
+      {/* NOTE: Not measured. Measuring an out-of-window row would write its size into the
+          virtualizer's cache under an index the window isn't tracking. */}
+      {pinnedIndexes.map((index) =>
+        renderRow(index, virtualizer.measurementsCache[index]?.start ?? 0, false),
+      )}
+    </ul>
+  );
+}
diff --git a/packages/ui/src/components/tree/atoms.ts b/packages/ui/src/components/tree/atoms.ts
new file mode 100644
index 0000000..d7070d1
--- /dev/null
+++ b/packages/ui/src/components/tree/atoms.ts
@@ -0,0 +1,76 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai-family";
+import { selectAtom } from "jotai/utils";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const selectedIdsFamily = atomFamily((_treeId: string) => {
+  return atom<string[]>([]);
+});
+
+export const isSelectedFamily = atomFamily(
+  ({ treeId, itemId }: { treeId: string; itemId: string }) => {
+    return selectAtom(selectedIdsFamily(treeId), (ids) => ids.includes(itemId), Object.is);
+  },
+  (a, b) => a.treeId === b.treeId && a.itemId === b.itemId,
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const focusIdsFamily = atomFamily((_treeId: string) => {
+  return atom<{ lastId: string | null; anchorId: string | null }>({ lastId: null, anchorId: null });
+});
+
+export const isLastFocusedFamily = atomFamily(
+  ({ treeId, itemId }: { treeId: string; itemId: string }) =>
+    selectAtom(focusIdsFamily(treeId), (v) => v.lastId === itemId, Object.is),
+  (a, b) => a.treeId === b.treeId && a.itemId === b.itemId,
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const draggingIdsFamily = atomFamily((_treeId: string) => {
+  return atom<string[]>([]);
+});
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const hoveredParentFamily = atomFamily((_treeId: string) => {
+  return atom<{
+    index: number | null;
+    childIndex: number | null;
+    parentId: string | null;
+    parentDepth: number | null;
+  }>({
+    index: null,
+    childIndex: null,
+    parentId: null,
+    parentDepth: null,
+  });
+});
+
+export const isParentHoveredFamily = atomFamily(
+  ({ treeId, parentId }: { treeId: string; parentId: string | null }) =>
+    selectAtom(hoveredParentFamily(treeId), (v) => v.parentId === parentId, Object.is),
+  (a, b) => a.treeId === b.treeId && a.parentId === b.parentId,
+);
+
+export const isAncestorHoveredFamily = atomFamily(
+  ({ treeId, ancestorIds }: { treeId: string; ancestorIds: string[] }) =>
+    selectAtom(
+      hoveredParentFamily(treeId),
+      (v) => v.parentId && ancestorIds.includes(v.parentId),
+      Object.is,
+    ),
+  (a, b) => a.treeId === b.treeId && a.ancestorIds.join(",") === b.ancestorIds.join(","),
+);
+
+export const isIndexHoveredFamily = atomFamily(
+  ({ treeId, index }: { treeId: string; index: number }) =>
+    selectAtom(hoveredParentFamily(treeId), (v) => v.index === index, Object.is),
+  (a, b) => a.treeId === b.treeId && a.index === b.index,
+);
+
+export const hoveredParentDepthFamily = atomFamily((treeId: string) =>
+  selectAtom(
+    hoveredParentFamily(treeId),
+    (s) => s.parentDepth,
+    (a, b) => Object.is(a, b), // prevents re-render unless the value changes
+  ),
+);
diff --git a/packages/ui/src/components/tree/common.ts b/packages/ui/src/components/tree/common.ts
new file mode 100644
index 0000000..e03a77b
--- /dev/null
+++ b/packages/ui/src/components/tree/common.ts
@@ -0,0 +1,100 @@
+import type { createStore } from "jotai";
+import type { ReactNode } from "react";
+import type { CollapsedAtom } from "./context";
+import { selectedIdsFamily } from "./atoms";
+
+export type JotaiStore = ReturnType<typeof createStore>;
+
+export type ContextMenuRenderer = (props: {
+  items: unknown[];
+  position: { x: number; y: number };
+  onClose: () => void;
+}) => ReactNode;
+
+export interface TreeNode<T extends { id: string }> {
+  children?: TreeNode<T>[];
+  item: T;
+  hidden?: boolean;
+  parent: TreeNode<T> | null;
+  depth: number;
+  draggable?: boolean;
+  localDrag?: boolean;
+}
+
+export interface SelectableTreeNode<T extends { id: string }> {
+  node: TreeNode<T>;
+  depth: number;
+  index: number;
+}
+
+export function getSelectedItems<T extends { id: string }>(
+  store: JotaiStore,
+  treeId: string,
+  selectableItems: SelectableTreeNode<T>[],
+) {
+  const selectedItemIds = store.get(selectedIdsFamily(treeId));
+  return selectableItems
+    .filter((i) => selectedItemIds.includes(i.node.item.id))
+    .map((i) => i.node.item);
+}
+
+export function equalSubtree<T extends { id: string }>(
+  a: TreeNode<T>,
+  b: TreeNode<T>,
+  getItemKey: (t: T) => string,
+): boolean {
+  if (getNodeKey(a, getItemKey) !== getNodeKey(b, getItemKey)) return false;
+  const ak = a.children ?? [];
+  const bk = b.children ?? [];
+
+  if (ak.length !== bk.length) {
+    return false;
+  }
+
+  for (let i = 0; i < ak.length; i++) {
+    // biome-ignore lint/style/noNonNullAssertion: none
+    if (!equalSubtree(ak[i]!, bk[i]!, getItemKey)) return false;
+  }
+
+  return true;
+}
+
+export function getNodeKey<T extends { id: string }>(a: TreeNode<T>, getItemKey: (i: T) => string) {
+  return getItemKey(a.item) + a.hidden;
+}
+
+export function hasAncestor<T extends { id: string }>(node: TreeNode<T>, ancestorId: string) {
+  if (node.parent == null) return false;
+  if (node.parent.item.id === ancestorId) return true;
+
+  // Check parents recursively
+  return hasAncestor(node.parent, ancestorId);
+}
+
+export function isVisibleNode<T extends { id: string }>(
+  store: JotaiStore,
+  collapsedAtom: CollapsedAtom,
+  node: TreeNode<T>,
+) {
+  const collapsed = store.get(collapsedAtom);
+  let p = node.parent;
+  while (p) {
+    if (collapsed[p.item.id]) return false; // any collapsed ancestor hides this node
+    p = p.parent;
+  }
+  return true;
+}
+
+export function closestVisibleNode<T extends { id: string }>(
+  store: JotaiStore,
+  collapsedAtom: CollapsedAtom,
+  node: TreeNode<T>,
+): TreeNode<T> | null {
+  let n: TreeNode<T> | null = node;
+  while (n) {
+    if (isVisibleNode(store, collapsedAtom, n) && !n.hidden) return n;
+    if (n.parent == null) return null;
+    n = n.parent;
+  }
+  return null;
+}
diff --git a/packages/ui/src/components/tree/context.ts b/packages/ui/src/components/tree/context.ts
new file mode 100644
index 0000000..b204f2e
--- /dev/null
+++ b/packages/ui/src/components/tree/context.ts
@@ -0,0 +1,60 @@
+import type { WritableAtom } from "jotai";
+import { useAtomValue, useStore } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { createContext, useCallback, useContext, useMemo } from "react";
+
+type CollapsedMap = Record<string, boolean>;
+type SetAction = CollapsedMap | ((prev: CollapsedMap) => CollapsedMap);
+export type CollapsedAtom = WritableAtom<CollapsedMap, [SetAction], void>;
+
+export const CollapsedAtomContext = createContext<CollapsedAtom | null>(null);
+
+export function useCollapsedAtom(): CollapsedAtom {
+  const atom = useContext(CollapsedAtomContext);
+  if (!atom) throw new Error("CollapsedAtomContext not provided");
+  return atom;
+}
+
+export function useIsCollapsed(itemId: string | undefined) {
+  const collapsedAtom = useCollapsedAtom();
+  const derivedAtom = useMemo(
+    () => selectAtom(collapsedAtom, (map) => !!map[itemId ?? "n/a"], Object.is),
+    [collapsedAtom, itemId],
+  );
+  return useAtomValue(derivedAtom);
+}
+
+export function useSetCollapsed(itemId: string | undefined) {
+  const collapsedAtom = useCollapsedAtom();
+  const store = useStore();
+  return useCallback(
+    (next: boolean | ((prev: boolean) => boolean)) => {
+      const key = itemId ?? "n/a";
+      const prevMap = store.get(collapsedAtom);
+      const prevValue = !!prevMap[key];
+      const value = typeof next === "function" ? next(prevValue) : next;
+      if (value === prevValue) return;
+      store.set(collapsedAtom, { ...prevMap, [key]: value });
+    },
+    [collapsedAtom, itemId, store],
+  );
+}
+
+export function useCollapsedMap() {
+  const collapsedAtom = useCollapsedAtom();
+  return useAtomValue(collapsedAtom);
+}
+
+export function useIsAncestorCollapsed(ancestorIds: string[]) {
+  const collapsedAtom = useCollapsedAtom();
+  const derivedAtom = useMemo(
+    () =>
+      selectAtom(
+        collapsedAtom,
+        (collapsed) => ancestorIds.some((id) => collapsed[id]),
+        (a, b) => a === b,
+      ),
+    [collapsedAtom, ancestorIds],
+  );
+  return useAtomValue(derivedAtom);
+}
diff --git a/packages/ui/src/components/tree/keyboard.test.ts b/packages/ui/src/components/tree/keyboard.test.ts
new file mode 100644
index 0000000..de7c0fe
--- /dev/null
+++ b/packages/ui/src/components/tree/keyboard.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, test } from "vite-plus/test";
+import { isImeCompositionEvent } from "./keyboard";
+
+describe("isImeCompositionEvent", () => {
+  test("detects an active standards-based composition", () => {
+    expect(isImeCompositionEvent({ isComposing: true, keyCode: 13 })).toBe(true);
+  });
+
+  test("detects the Safari/WebKit key code fallback", () => {
+    expect(isImeCompositionEvent({ isComposing: false, keyCode: 229 })).toBe(true);
+  });
+
+  test("does not classify an ordinary Enter keydown as composition", () => {
+    expect(isImeCompositionEvent({ isComposing: false, keyCode: 13 })).toBe(false);
+  });
+
+  test("does not classify an ordinary Escape keydown as composition", () => {
+    expect(isImeCompositionEvent({ isComposing: false, keyCode: 27 })).toBe(false);
+  });
+});
diff --git a/packages/ui/src/components/tree/keyboard.ts b/packages/ui/src/components/tree/keyboard.ts
new file mode 100644
index 0000000..beecf09
--- /dev/null
+++ b/packages/ui/src/components/tree/keyboard.ts
@@ -0,0 +1,7 @@
+export type ImeKeyboardEvent = Pick<KeyboardEvent, "isComposing" | "keyCode">;
+
+export function isImeCompositionEvent(event: ImeKeyboardEvent): boolean {
+  // Safari can clear `isComposing` on the keydown that finishes composition.
+  // `229` is retained as the compatibility signal that an IME is processing it.
+  return event.isComposing || event.keyCode === 229;
+}
diff --git a/packages/ui/src/components/tree/useSelectableItems.ts b/packages/ui/src/components/tree/useSelectableItems.ts
new file mode 100644
index 0000000..a714bbb
--- /dev/null
+++ b/packages/ui/src/components/tree/useSelectableItems.ts
@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+import type { SelectableTreeNode, TreeNode } from "./common";
+
+export function useSelectableItems<T extends { id: string }>(root: TreeNode<T>) {
+  return useMemo(() => {
+    const selectableItems: SelectableTreeNode<T>[] = [];
+
+    // Put requests and folders into a tree structure
+    const next = (node: TreeNode<T>, depth = 0) => {
+      if (node.children == null) {
+        return;
+      }
+
+      // Recurse to children
+      let selectableIndex = 0;
+      for (const child of node.children) {
+        selectableItems.push({
+          node: child,
+          index: selectableIndex++,
+          depth,
+        });
+
+        next(child, depth + 1);
+      }
+    };
+
+    next(root);
+    return selectableItems;
+  }, [root]);
+}
diff --git a/packages/ui/src/hooks/useContainerSize.ts b/packages/ui/src/hooks/useContainerSize.ts
new file mode 100644
index 0000000..902fdb2
--- /dev/null
+++ b/packages/ui/src/hooks/useContainerSize.ts
@@ -0,0 +1,30 @@
+import type { RefObject } from "react";
+import { useLayoutEffect, useState } from "react";
+
+export function useContainerSize(ref: RefObject<HTMLElement | null>) {
+  const [size, setSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (el) {
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.target === el) {
+            setSize({ width: entry.contentRect.width, height: entry.contentRect.height });
+          }
+        }
+      });
+
+      observer.observe(el);
+
+      return () => {
+        observer.unobserve(el);
+        observer.disconnect();
+      };
+    }
+
+    return undefined;
+  }, [ref]);
+
+  return size;
+}
diff --git a/packages/ui/src/hooks/useDebouncedState.ts b/packages/ui/src/hooks/useDebouncedState.ts
new file mode 100644
index 0000000..099810b
--- /dev/null
+++ b/packages/ui/src/hooks/useDebouncedState.ts
@@ -0,0 +1,12 @@
+import { debounce } from "@yaakapp-internal/lib";
+import type { Dispatch, SetStateAction } from "react";
+import { useMemo, useState } from "react";
+
+export function useDebouncedState<T>(
+  defaultValue: T,
+  delay = 500,
+): [T, Dispatch<SetStateAction<T>>, Dispatch<SetStateAction<T>>] {
+  const [state, setState] = useState<T>(defaultValue);
+  const debouncedSetState = useMemo(() => debounce(setState, delay), [delay]);
+  return [state, debouncedSetState, setState];
+}
diff --git a/packages/ui/src/hooks/useDebouncedValue.ts b/packages/ui/src/hooks/useDebouncedValue.ts
new file mode 100644
index 0000000..b1c9db0
--- /dev/null
+++ b/packages/ui/src/hooks/useDebouncedValue.ts
@@ -0,0 +1,8 @@
+import { useEffect } from "react";
+import { useDebouncedState } from "./useDebouncedState";
+
+export function useDebouncedValue<T>(value: T, delay = 500) {
+  const [state, setState] = useDebouncedState<T>(value, delay);
+  useEffect(() => setState(value), [setState, value]);
+  return state;
+}
diff --git a/packages/ui/src/hooks/useIsFullscreen.ts b/packages/ui/src/hooks/useIsFullscreen.ts
new file mode 100644
index 0000000..3dedb1e
--- /dev/null
+++ b/packages/ui/src/hooks/useIsFullscreen.ts
@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+import { platform } from "@yaakapp-internal/platform";
+import { useWindowSize } from "react-use";
+import { useDebouncedValue } from "./useDebouncedValue";
+
+export function useIsFullscreen() {
+  const windowSize = useWindowSize();
+  const debouncedWindowWidth = useDebouncedValue(windowSize.width);
+
+  // NOTE: Fullscreen state isn't updated right after resize event on Mac (needs to wait for animation) so
+  // we'll wait for a bit using the debounced window size. Hopefully Tauri eventually adds a way to listen
+  // for fullscreen change events.
+
+  return (
+    useQuery({
+      queryKey: ["is_fullscreen", debouncedWindowWidth],
+      queryFn: async () => {
+        return platform.window.isFullscreen();
+      },
+    }).data ?? false
+  );
+}
diff --git a/packages/ui/src/hooks/usePortal.ts b/packages/ui/src/hooks/usePortal.ts
new file mode 100644
index 0000000..c867697
--- /dev/null
+++ b/packages/ui/src/hooks/usePortal.ts
@@ -0,0 +1,26 @@
+import { useRef } from "react";
+
+const PORTAL_CONTAINER_ID = "react-portal";
+
+export function usePortal(name: string) {
+  const ref = useRef(getOrCreatePortal(name));
+  return ref.current;
+}
+
+function getOrCreatePortal(name: string) {
+  let portalContainer = document.getElementById(PORTAL_CONTAINER_ID);
+  if (!portalContainer) {
+    portalContainer = document.createElement("div");
+    portalContainer.id = PORTAL_CONTAINER_ID;
+    document.body.appendChild(portalContainer);
+  }
+
+  let existing = portalContainer.querySelector(`:scope > [data-portal-name="${name}"]`);
+  if (!existing) {
+    const el = document.createElement("div");
+    el.setAttribute("data-portal-name", name);
+    portalContainer.appendChild(el);
+    existing = el;
+  }
+  return existing;
+}
diff --git a/packages/ui/src/hooks/useTimedBoolean.ts b/packages/ui/src/hooks/useTimedBoolean.ts
new file mode 100644
index 0000000..3604a1c
--- /dev/null
+++ b/packages/ui/src/hooks/useTimedBoolean.ts
@@ -0,0 +1,19 @@
+import { useRef, useState } from "react";
+import { useUnmount } from "react-use";
+
+/** Returns a boolean that is true for a given number of milliseconds. */
+export function useTimedBoolean(millis = 1500): [boolean, () => void] {
+  const [value, setValue] = useState(false);
+  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const reset = () => timeout.current && clearTimeout(timeout.current);
+
+  useUnmount(reset);
+
+  const setToTrue = () => {
+    setValue(true);
+    reset();
+    timeout.current = setTimeout(() => setValue(false), millis);
+  };
+
+  return [value, setToTrue];
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..338c4dc
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,48 @@
+export type { BannerProps } from "./components/Banner";
+export { Banner } from "./components/Banner";
+export type { ButtonProps } from "./components/Button";
+export { Button } from "./components/Button";
+export { DropMarker } from "./components/DropMarker";
+export { HeaderSize } from "./components/HeaderSize";
+export { Heading } from "./components/Heading";
+export type { IconProps } from "./components/Icon";
+export { Icon } from "./components/Icon";
+export type { IconButtonProps } from "./components/IconButton";
+export { IconButton } from "./components/IconButton";
+export { FormattedError } from "./components/FormattedError";
+export { InlineCode } from "./components/InlineCode";
+export { LoadingIcon } from "./components/LoadingIcon";
+export { Overlay } from "./components/Overlay";
+export { Portal } from "./components/Portal";
+export type { ResizeHandleEvent } from "./components/ResizeHandle";
+export { ResizeHandle } from "./components/ResizeHandle";
+export { SidebarLayout } from "./components/SidebarLayout";
+export type { SlotProps, SplitLayoutLayout } from "./components/SplitLayout";
+export { SplitLayout } from "./components/SplitLayout";
+export type { VStackProps } from "./components/Stacks";
+export { HStack, VStack } from "./components/Stacks";
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  TruncatedWideTableCell,
+} from "./components/Table";
+export { isSelectedFamily, selectedIdsFamily } from "./components/tree/atoms";
+export type { TreeNode } from "./components/tree/common";
+export type { TreeHandle, TreeProps } from "./components/tree/Tree";
+export { Tree } from "./components/tree/Tree";
+export type { TreeItemProps } from "./components/tree/TreeItem";
+export { WindowControls } from "./components/WindowControls";
+export { useContainerSize } from "./hooks/useContainerSize";
+export { useDebouncedState } from "./hooks/useDebouncedState";
+export { useDebouncedValue } from "./hooks/useDebouncedValue";
+export { useIsFullscreen } from "./hooks/useIsFullscreen";
+export { usePortal } from "./hooks/usePortal";
+export { useTimedBoolean } from "./hooks/useTimedBoolean";
+export { clamp } from "./lib/clamp";
+export { HEADER_SIZE_LG, HEADER_SIZE_MD, WINDOW_CONTROLS_WIDTH } from "./lib/constants";
+export { computeSideForDragMove } from "./lib/dnd";
+export { minPromiseMillis } from "./lib/minPromiseMillis";
diff --git a/packages/ui/src/lib/clamp.ts b/packages/ui/src/lib/clamp.ts
new file mode 100644
index 0000000..0210f95
--- /dev/null
+++ b/packages/ui/src/lib/clamp.ts
@@ -0,0 +1,3 @@
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
diff --git a/packages/ui/src/lib/constants.ts b/packages/ui/src/lib/constants.ts
new file mode 100644
index 0000000..71487db
--- /dev/null
+++ b/packages/ui/src/lib/constants.ts
@@ -0,0 +1,4 @@
+export const HEADER_SIZE_MD = "30px";
+export const HEADER_SIZE_LG = "40px";
+
+export const WINDOW_CONTROLS_WIDTH = "10.5rem";
diff --git a/packages/ui/src/lib/dnd.ts b/packages/ui/src/lib/dnd.ts
new file mode 100644
index 0000000..fc18b81
--- /dev/null
+++ b/packages/ui/src/lib/dnd.ts
@@ -0,0 +1,39 @@
+import type { DragMoveEvent } from "@dnd-kit/core";
+
+export function computeSideForDragMove(
+  id: string,
+  e: DragMoveEvent,
+  orientation: "vertical" | "horizontal" = "vertical",
+): "before" | "after" | null {
+  if (e.over == null || e.over.id !== id) {
+    return null;
+  }
+  if (e.active.rect.current.initial == null) return null;
+
+  const overRect = e.over.rect;
+
+  if (orientation === "horizontal") {
+    // For horizontal layouts (tabs side-by-side), use left/right logic
+    const activeLeft =
+      e.active.rect.current.translated?.left ?? e.active.rect.current.initial.left + e.delta.x;
+    const pointerX = activeLeft + e.active.rect.current.initial.width / 2;
+
+    const hoverLeft = overRect.left;
+    const hoverRight = overRect.right;
+    const hoverMiddleX = hoverLeft + (hoverRight - hoverLeft) / 2;
+
+    return pointerX < hoverMiddleX ? "before" : "after"; // 'before' = left, 'after' = right
+  } else {
+    // For vertical layouts, use top/bottom logic
+    const activeTop =
+      e.active.rect.current.translated?.top ?? e.active.rect.current.initial.top + e.delta.y;
+    const pointerY = activeTop + e.active.rect.current.initial.height / 2;
+
+    const hoverTop = overRect.top;
+    const hoverBottom = overRect.bottom;
+    const hoverMiddleY = (hoverBottom - hoverTop) / 2;
+    const hoverClientY = pointerY - hoverTop;
+
+    return hoverClientY < hoverMiddleY ? "before" : "after";
+  }
+}
diff --git a/packages/ui/src/lib/minPromiseMillis.ts b/packages/ui/src/lib/minPromiseMillis.ts
new file mode 100644
index 0000000..c362881
--- /dev/null
+++ b/packages/ui/src/lib/minPromiseMillis.ts
@@ -0,0 +1,16 @@
+export async function minPromiseMillis<T>(promise: Promise<T>, millis = 300): Promise<T> {
+  const start = Date.now();
+  let result: T;
+
+  try {
+    result = await promise;
+  } catch (e) {
+    const remaining = millis - (Date.now() - start);
+    if (remaining > 0) await new Promise((r) => setTimeout(r, remaining));
+    throw e;
+  }
+
+  const remaining = millis - (Date.now() - start);
+  if (remaining > 0) await new Promise((r) => setTimeout(r, remaining));
+  return result;
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..e855de2
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "strict": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "noEmit": true
+  },
+  "include": ["src"]
+}
diff --git a/plugins-external/.gitignore b/plugins-external/.gitignore
new file mode 100644
index 0000000..5c644e1
--- /dev/null
+++ b/plugins-external/.gitignore
@@ -0,0 +1 @@
+*/build
diff --git a/plugins-external/faker/README.md b/plugins-external/faker/README.md
new file mode 100644
index 0000000..5aee5f0
--- /dev/null
+++ b/plugins-external/faker/README.md
@@ -0,0 +1,76 @@
+# Yaak Faker Plugin
+
+This is a template function that generates realistic fake data
+for testing and development using [FakerJS](https://fakerjs.dev).
+
+![CleanShot 2024-09-19 at 13 56 33@2x](https://github.com/user-attachments/assets/2f935110-4af2-4236-a50d-18db5454176d)
+
+## Example JSON Body
+
+Here's an example JSON body that uses fake data:
+
+```json
+{
+  "id": "${[ faker.string.uuid() ]}",
+  "name": "${[ faker.person.fullName() ]}",
+  "email": "${[ faker.internet.email() ]}",
+  "phone": "${[ faker.phone.number() ]}",
+  "address": {
+    "street": "${[ faker.location.streetAddress() ]}",
+    "city": "${[ faker.location.city() ]}",
+    "country": "${[ faker.location.country() ]}",
+    "zipCode": "${[ faker.location.zipCode() ]}"
+  },
+  "company": "${[ faker.company.name() ]}",
+  "website": "${[ faker.internet.url() ]}"
+}
+```
+
+This will generate a random JSON body on every request:
+
+```json
+{
+  "id": "589f0aec-7310-4bf2-81c4-0b1bb7f1c3c1",
+  "name": "Lucy Gottlieb-Weissnat",
+  "email": "Destiny_Herzog@gmail.com",
+  "phone": "411.805.2871 x699",
+  "address": {
+    "street": "846 Christ Mills",
+    "city": "Spencerfurt",
+    "country": "United Kingdom",
+    "zipCode": "20354"
+  },
+  "company": "Emard, Kohler and Rutherford",
+  "website": "https://watery-detective.org"
+}
+```
+
+## Available Categories
+
+The plugin provides access to all FakerJS modules and their methods:
+
+| Category   | Description               | Example Methods                            |
+| ---------- | ------------------------- | ------------------------------------------ |
+| `airline`  | Airline-related data      | `aircraftType`, `airline`, `airplane`      |
+| `animal`   | Animal names and types    | `bear`, `bird`, `cat`, `dog`, `fish`       |
+| `color`    | Colors in various formats | `human`, `rgb`, `hex`, `hsl`               |
+| `commerce` | E-commerce data           | `department`, `product`, `price`           |
+| `company`  | Company information       | `name`, `catchPhrase`, `bs`                |
+| `database` | Database-related data     | `column`, `type`, `collation`              |
+| `date`     | Date and time values      | `recent`, `future`, `past`, `between`      |
+| `finance`  | Financial data            | `account`, `amount`, `currency`            |
+| `git`      | Git-related data          | `branch`, `commitEntry`, `commitSha`       |
+| `hacker`   | Tech/hacker terminology   | `abbreviation`, `noun`, `phrase`           |
+| `image`    | Image URLs and data       | `avatar`, `url`, `dataUri`                 |
+| `internet` | Internet-related data     | `email`, `url`, `ip`, `userAgent`          |
+| `location` | Geographic data           | `city`, `country`, `latitude`, `longitude` |
+| `lorem`    | Lorem ipsum text          | `word`, `sentence`, `paragraph`            |
+| `person`   | Personal information      | `firstName`, `lastName`, `fullName`        |
+| `music`    | Music-related data        | `genre`, `songName`, `artist`              |
+| `number`   | Numeric data              | `int`, `float`, `binary`, `hex`            |
+| `phone`    | Phone numbers             | `number`, `imei`                           |
+| `science`  | Scientific data           | `chemicalElement`, `unit`                  |
+| `string`   | String utilities          | `uuid`, `alpha`, `alphanumeric`            |
+| `system`   | System-related data       | `fileName`, `mimeType`, `fileExt`          |
+| `vehicle`  | Vehicle information       | `vehicle`, `manufacturer`, `model`         |
+| `word`     | Word generation           | `adjective`, `adverb`, `conjunction`       |
diff --git a/plugins-external/faker/package.json b/plugins-external/faker/package.json
new file mode 100755
index 0000000..57cf6f2
--- /dev/null
+++ b/plugins-external/faker/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@yaak/faker",
+  "displayName": "Faker",
+  "version": "1.1.1",
+  "private": true,
+  "description": "Template functions for generating fake data using FakerJS",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins-external/faker"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^10.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/plugins-external/faker/src/index.ts b/plugins-external/faker/src/index.ts
new file mode 100755
index 0000000..2250e88
--- /dev/null
+++ b/plugins-external/faker/src/index.ts
@@ -0,0 +1,106 @@
+import { faker } from "@faker-js/faker";
+import type { DynamicTemplateFunctionArg, PluginDefinition } from "@yaakapp/api";
+
+const modules = [
+  "airline",
+  "animal",
+  "color",
+  "commerce",
+  "company",
+  "database",
+  "date",
+  "finance",
+  "git",
+  "hacker",
+  "image",
+  "internet",
+  "location",
+  "lorem",
+  "person",
+  "music",
+  "number",
+  "phone",
+  "science",
+  "string",
+  "system",
+  "vehicle",
+  "word",
+];
+
+function normalizeResult(result: unknown): string {
+  if (typeof result === "string") return result;
+  if (result instanceof Date) return result.toISOString();
+  return JSON.stringify(result);
+}
+
+// Whatever Yaak’s arg type shape is – rough example
+function args(modName: string, fnName: string): DynamicTemplateFunctionArg[] {
+  return [
+    {
+      type: "banner",
+      color: "info",
+      inputs: [
+        {
+          type: "markdown",
+          content: `Need help? View documentation for [\`${modName}.${fnName}(…)\`](https://fakerjs.dev/api/${encodeURIComponent(modName)}.html#${encodeURIComponent(fnName)})`,
+        },
+      ],
+    },
+    {
+      name: "options",
+      label: "Arguments",
+      type: "editor",
+      language: "json",
+      optional: true,
+      placeholder: 'e.g. { "min": 1, "max": 10 } or 10 or ["en","US"]',
+    },
+  ];
+}
+
+export const plugin: PluginDefinition = {
+  templateFunctions: modules.flatMap((modName) => {
+    const mod = faker[modName as keyof typeof faker];
+    return Object.keys(mod)
+      .filter((n) => n !== "faker")
+      .map((fnName) => ({
+        name: ["faker", modName, fnName].join("."),
+        args: args(modName, fnName),
+        async onRender(_ctx, args) {
+          const fn = mod[fnName as keyof typeof mod] as (...a: unknown[]) => unknown;
+          const options = args.values.options;
+
+          // No options supplied
+          if (options == null || options === "") {
+            return normalizeResult(fn());
+          }
+
+          // Try JSON first
+          let parsed: unknown = options;
+          if (typeof options === "string") {
+            try {
+              parsed = JSON.parse(options);
+            } catch {
+              // Not valid JSON – maybe just a scalar
+              const n = Number(options);
+              if (!Number.isNaN(n)) {
+                parsed = n;
+              } else {
+                parsed = options;
+              }
+            }
+          }
+
+          let result: unknown;
+          if (Array.isArray(parsed)) {
+            // Treat as positional arguments
+            result = fn(...parsed);
+          } else {
+            // Treat as a single argument (option object or scalar)
+            result = fn(parsed);
+          }
+
+          return normalizeResult(result);
+        },
+      }));
+  }),
+};
diff --git a/plugins-external/faker/tests/__snapshots__/init.test.ts.snap b/plugins-external/faker/tests/__snapshots__/init.test.ts.snap
new file mode 100644
index 0000000..45030ba
--- /dev/null
+++ b/plugins-external/faker/tests/__snapshots__/init.test.ts.snap
@@ -0,0 +1,234 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`template-function-faker > exports all expected template functions 1`] = `
+[
+  "faker.airline.aircraftType",
+  "faker.airline.airline",
+  "faker.airline.airplane",
+  "faker.airline.airport",
+  "faker.airline.flightNumber",
+  "faker.airline.recordLocator",
+  "faker.airline.seat",
+  "faker.animal.bear",
+  "faker.animal.bird",
+  "faker.animal.cat",
+  "faker.animal.cetacean",
+  "faker.animal.cow",
+  "faker.animal.crocodilia",
+  "faker.animal.dog",
+  "faker.animal.fish",
+  "faker.animal.horse",
+  "faker.animal.insect",
+  "faker.animal.lion",
+  "faker.animal.petName",
+  "faker.animal.rabbit",
+  "faker.animal.rodent",
+  "faker.animal.snake",
+  "faker.animal.type",
+  "faker.color.cmyk",
+  "faker.color.colorByCSSColorSpace",
+  "faker.color.cssSupportedFunction",
+  "faker.color.cssSupportedSpace",
+  "faker.color.hsl",
+  "faker.color.human",
+  "faker.color.hwb",
+  "faker.color.lab",
+  "faker.color.lch",
+  "faker.color.rgb",
+  "faker.color.space",
+  "faker.commerce.department",
+  "faker.commerce.isbn",
+  "faker.commerce.price",
+  "faker.commerce.product",
+  "faker.commerce.productAdjective",
+  "faker.commerce.productDescription",
+  "faker.commerce.productMaterial",
+  "faker.commerce.productName",
+  "faker.commerce.upc",
+  "faker.company.buzzAdjective",
+  "faker.company.buzzNoun",
+  "faker.company.buzzPhrase",
+  "faker.company.buzzVerb",
+  "faker.company.catchPhrase",
+  "faker.company.catchPhraseAdjective",
+  "faker.company.catchPhraseDescriptor",
+  "faker.company.catchPhraseNoun",
+  "faker.company.name",
+  "faker.database.collation",
+  "faker.database.column",
+  "faker.database.engine",
+  "faker.database.mongodbObjectId",
+  "faker.database.type",
+  "faker.date.anytime",
+  "faker.date.between",
+  "faker.date.betweens",
+  "faker.date.birthdate",
+  "faker.date.future",
+  "faker.date.month",
+  "faker.date.past",
+  "faker.date.recent",
+  "faker.date.soon",
+  "faker.date.timeZone",
+  "faker.date.weekday",
+  "faker.finance.accountName",
+  "faker.finance.accountNumber",
+  "faker.finance.amount",
+  "faker.finance.bic",
+  "faker.finance.bitcoinAddress",
+  "faker.finance.creditCardCVV",
+  "faker.finance.creditCardIssuer",
+  "faker.finance.creditCardNumber",
+  "faker.finance.currency",
+  "faker.finance.currencyCode",
+  "faker.finance.currencyName",
+  "faker.finance.currencyNumericCode",
+  "faker.finance.currencySymbol",
+  "faker.finance.ethereumAddress",
+  "faker.finance.iban",
+  "faker.finance.litecoinAddress",
+  "faker.finance.pin",
+  "faker.finance.routingNumber",
+  "faker.finance.transactionDescription",
+  "faker.finance.transactionType",
+  "faker.git.branch",
+  "faker.git.commitDate",
+  "faker.git.commitEntry",
+  "faker.git.commitMessage",
+  "faker.git.commitSha",
+  "faker.hacker.abbreviation",
+  "faker.hacker.adjective",
+  "faker.hacker.ingverb",
+  "faker.hacker.noun",
+  "faker.hacker.phrase",
+  "faker.hacker.verb",
+  "faker.image.avatar",
+  "faker.image.avatarGitHub",
+  "faker.image.dataUri",
+  "faker.image.personPortrait",
+  "faker.image.url",
+  "faker.image.urlLoremFlickr",
+  "faker.image.urlPicsumPhotos",
+  "faker.internet.displayName",
+  "faker.internet.domainName",
+  "faker.internet.domainSuffix",
+  "faker.internet.domainWord",
+  "faker.internet.email",
+  "faker.internet.emoji",
+  "faker.internet.exampleEmail",
+  "faker.internet.httpMethod",
+  "faker.internet.httpStatusCode",
+  "faker.internet.ip",
+  "faker.internet.ipv4",
+  "faker.internet.ipv6",
+  "faker.internet.jwt",
+  "faker.internet.jwtAlgorithm",
+  "faker.internet.mac",
+  "faker.internet.password",
+  "faker.internet.port",
+  "faker.internet.protocol",
+  "faker.internet.url",
+  "faker.internet.userAgent",
+  "faker.internet.username",
+  "faker.location.buildingNumber",
+  "faker.location.cardinalDirection",
+  "faker.location.city",
+  "faker.location.continent",
+  "faker.location.country",
+  "faker.location.countryCode",
+  "faker.location.county",
+  "faker.location.direction",
+  "faker.location.language",
+  "faker.location.latitude",
+  "faker.location.longitude",
+  "faker.location.nearbyGPSCoordinate",
+  "faker.location.ordinalDirection",
+  "faker.location.postalAddress",
+  "faker.location.secondaryAddress",
+  "faker.location.state",
+  "faker.location.street",
+  "faker.location.streetAddress",
+  "faker.location.timeZone",
+  "faker.location.zipCode",
+  "faker.lorem.lines",
+  "faker.lorem.paragraph",
+  "faker.lorem.paragraphs",
+  "faker.lorem.sentence",
+  "faker.lorem.sentences",
+  "faker.lorem.slug",
+  "faker.lorem.text",
+  "faker.lorem.word",
+  "faker.lorem.words",
+  "faker.music.album",
+  "faker.music.artist",
+  "faker.music.genre",
+  "faker.music.songName",
+  "faker.number.bigInt",
+  "faker.number.binary",
+  "faker.number.float",
+  "faker.number.hex",
+  "faker.number.int",
+  "faker.number.octal",
+  "faker.number.romanNumeral",
+  "faker.person.bio",
+  "faker.person.firstName",
+  "faker.person.fullName",
+  "faker.person.gender",
+  "faker.person.jobArea",
+  "faker.person.jobDescriptor",
+  "faker.person.jobTitle",
+  "faker.person.jobType",
+  "faker.person.lastName",
+  "faker.person.middleName",
+  "faker.person.prefix",
+  "faker.person.sex",
+  "faker.person.sexType",
+  "faker.person.suffix",
+  "faker.person.zodiacSign",
+  "faker.phone.imei",
+  "faker.phone.number",
+  "faker.science.chemicalElement",
+  "faker.science.unit",
+  "faker.string.alpha",
+  "faker.string.alphanumeric",
+  "faker.string.binary",
+  "faker.string.fromCharacters",
+  "faker.string.hexadecimal",
+  "faker.string.nanoid",
+  "faker.string.numeric",
+  "faker.string.octal",
+  "faker.string.sample",
+  "faker.string.symbol",
+  "faker.string.ulid",
+  "faker.string.uuid",
+  "faker.system.commonFileExt",
+  "faker.system.commonFileName",
+  "faker.system.commonFileType",
+  "faker.system.cron",
+  "faker.system.directoryPath",
+  "faker.system.fileExt",
+  "faker.system.fileName",
+  "faker.system.filePath",
+  "faker.system.fileType",
+  "faker.system.mimeType",
+  "faker.system.networkInterface",
+  "faker.system.semver",
+  "faker.vehicle.bicycle",
+  "faker.vehicle.color",
+  "faker.vehicle.fuel",
+  "faker.vehicle.manufacturer",
+  "faker.vehicle.model",
+  "faker.vehicle.type",
+  "faker.vehicle.vehicle",
+  "faker.vehicle.vin",
+  "faker.vehicle.vrm",
+  "faker.word.adjective",
+  "faker.word.adverb",
+  "faker.word.conjunction",
+  "faker.word.interjection",
+  "faker.word.noun",
+  "faker.word.preposition",
+  "faker.word.sample",
+  "faker.word.verb",
+  "faker.word.words",
+]
+`;
diff --git a/plugins-external/faker/tests/init.test.ts b/plugins-external/faker/tests/init.test.ts
new file mode 100644
index 0000000..6b5b2ae
--- /dev/null
+++ b/plugins-external/faker/tests/init.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vite-plus/test";
+
+describe("template-function-faker", () => {
+  it("exports all expected template functions", async () => {
+    const { plugin } = await import("../src/index");
+    const names = plugin.templateFunctions?.map((fn) => fn.name).sort() ?? [];
+
+    // Snapshot the full list of exported function names so we catch any
+    // accidental additions, removals, or renames across faker upgrades.
+    expect(names).toMatchSnapshot();
+  });
+
+  it("renders date results as unquoted ISO strings", async () => {
+    const { plugin } = await import("../src/index");
+    const fn = plugin.templateFunctions?.find((fn) => fn.name === "faker.date.future");
+    // oxlint-disable-next-line unbound-method
+    const onRender = fn?.onRender;
+
+    expect(onRender).toBeTypeOf("function");
+    if (onRender == null) {
+      throw new Error("Expected template function 'faker.date.future' to define onRender");
+    }
+
+    const result = await onRender(
+      {} as Parameters<typeof onRender>[0],
+      { values: {} } as Parameters<typeof onRender>[1],
+    );
+
+    expect(result).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/);
+  });
+});
diff --git a/plugins-external/faker/tsconfig.json b/plugins-external/faker/tsconfig.json
new file mode 100755
index 0000000..4082f16
--- /dev/null
+++ b/plugins-external/faker/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins-external/httpsnippet/README.md b/plugins-external/httpsnippet/README.md
new file mode 100644
index 0000000..ddce0a3
--- /dev/null
+++ b/plugins-external/httpsnippet/README.md
@@ -0,0 +1,52 @@
+# Yaak HTTP Snippet Plugin
+
+Generate code snippets for HTTP requests in various languages and frameworks,
+powered by [@readme/httpsnippet](https://github.com/readmeio/httpsnippet).
+
+![Httpsnippet plugin](https://assets.yaak.app/uploads/httpsnippet-guiaX_1786x1420.png)
+
+## How It Works
+
+Right-click any HTTP request (or use the `...` menu) and select **Generate Code Snippet**.
+A dialog lets you pick a language and library, with a live preview of the generated code.
+Click **Copy to Clipboard** to copy the snippet. Your language and library selections are
+remembered for next time.
+
+## Supported Languages
+
+Each language supports one or more libraries, listed in the order they appear in the
+dialog:
+
+| Language    | Libraries                                 |
+| ----------- | ----------------------------------------- |
+| Agent       | Agent Prompt                              |
+| C           | Libcurl                                   |
+| Clojure     | clj-http                                  |
+| Crystal     | http::client                              |
+| C#          | HttpClient, RestSharp                     |
+| Go          | NewRequest                                |
+| HTTP        | HTTP/1.1                                  |
+| Java        | AsyncHttp, java.net.http, OkHttp, Unirest |
+| JavaScript  | XMLHttpRequest, Axios, fetch, jQuery      |
+| Kotlin      | OkHttp                                    |
+| Node.js     | HTTP, Axios, fetch                        |
+| Objective-C | NSURLSession                              |
+| OCaml       | CoHTTP                                    |
+| PHP         | cURL, Guzzle, HTTP v1, HTTP v2            |
+| Powershell  | Invoke-WebRequest, Invoke-RestMethod      |
+| Python      | Requests                                  |
+| R           | httr                                      |
+| Ruby        | net::http, faraday                        |
+| Rust        | reqwest                                   |
+| Shell       | cURL, HTTPie, Wget                        |
+| Swift       | URLSession                                |
+
+The **Agent** target produces a prompt describing the request rather than code, for handing
+to an AI coding agent.
+
+## Features
+
+- Renders template variables before generating snippets, so the output reflects real values
+- Supports all body types: JSON, form-urlencoded, multipart, GraphQL, and raw text
+- Includes authentication headers (Basic, Bearer, and API Key)
+- Includes query parameters and custom headers
diff --git a/plugins-external/httpsnippet/package.json b/plugins-external/httpsnippet/package.json
new file mode 100644
index 0000000..d6567d0
--- /dev/null
+++ b/plugins-external/httpsnippet/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@yaak/httpsnippet",
+  "displayName": "HTTP Snippet",
+  "version": "1.0.3",
+  "private": true,
+  "description": "Generate code snippets for HTTP requests in various languages and frameworks",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins-external/httpsnippet"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "@readme/httpsnippet": "^11.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.9.3"
+  },
+  "minYaakVersion": "2026.2.0-beta.10"
+}
diff --git a/plugins-external/httpsnippet/src/index.ts b/plugins-external/httpsnippet/src/index.ts
new file mode 100644
index 0000000..87a1f1d
--- /dev/null
+++ b/plugins-external/httpsnippet/src/index.ts
@@ -0,0 +1,317 @@
+import { availableTargets, type HarRequest, HTTPSnippet } from "@readme/httpsnippet";
+import type { EditorLanguage, HttpRequest, PluginDefinition } from "@yaakapp/api";
+
+// Get all available targets and build select options
+const targets = availableTargets();
+
+// Targets to exclude from the language list
+const excludedTargets = new Set(["json"]);
+
+// Build language (target) options
+const languageOptions = targets
+  .filter((target) => !excludedTargets.has(target.key))
+  .map((target) => ({
+    label: target.title,
+    value: target.key,
+  }));
+
+// Preferred clients per target (shown first in the list)
+const preferredClients: Record<string, string> = {
+  javascript: "fetch",
+  node: "fetch",
+};
+
+// Get client options for a given target key
+function getClientOptions(targetKey: string) {
+  const target = targets.find((t) => t.key === targetKey);
+  if (!target) return [];
+  const preferred = preferredClients[targetKey];
+  return target.clients
+    .map((client) => ({
+      label: client.title,
+      value: client.key,
+    }))
+    .sort((a, b) => {
+      if (a.value === preferred) return -1;
+      if (b.value === preferred) return 1;
+      return 0;
+    });
+}
+
+// Get default client for a target
+function getDefaultClient(targetKey: string): string {
+  const options = getClientOptions(targetKey);
+  return options[0]?.value ?? "";
+}
+
+// Defaults
+const defaultTarget = "javascript";
+
+// Map httpsnippet target key to editor language for syntax highlighting
+const editorLanguageMap: Record<string, EditorLanguage> = {
+  c: "c",
+  clojure: "clojure",
+  csharp: "csharp",
+  go: "go",
+  http: "http",
+  java: "java",
+  javascript: "javascript",
+  kotlin: "kotlin",
+  node: "javascript",
+  objc: "objective_c",
+  ocaml: "ocaml",
+  php: "php",
+  powershell: "powershell",
+  python: "python",
+  r: "r",
+  ruby: "ruby",
+  shell: "shell",
+  swift: "swift",
+};
+
+function getEditorLanguage(targetKey: string): EditorLanguage {
+  return editorLanguageMap[targetKey] ?? "text";
+}
+
+// Convert Yaak HttpRequest to HAR format
+function toHarRequest(request: Partial<HttpRequest>) {
+  // Build URL with query parameters
+  let finalUrl = request.url || "";
+  const urlParams = (request.urlParameters ?? []).filter((p) => p.enabled !== false && !!p.name);
+  if (urlParams.length > 0) {
+    const [base, hash] = finalUrl.split("#");
+    const separator = base?.includes("?") ? "&" : "?";
+    const queryString = urlParams
+      .map((p) => `${encodeURIComponent(p.name)}=${encodeURIComponent(p.value)}`)
+      .join("&");
+    finalUrl = base + separator + queryString + (hash ? `#${hash}` : "");
+  }
+
+  // Build headers array
+  const headers: Array<{ name: string; value: string }> = (request.headers ?? [])
+    .filter((h) => h.enabled !== false && !!h.name)
+    .map((h) => ({ name: h.name, value: h.value }));
+
+  // Handle authentication
+  if (request.authentication?.disabled !== true) {
+    if (request.authenticationType === "basic") {
+      const credentials = btoa(
+        `${request.authentication?.username ?? ""}:${request.authentication?.password ?? ""}`,
+      );
+      headers.push({ name: "Authorization", value: `Basic ${credentials}` });
+    } else if (request.authenticationType === "bearer") {
+      const prefix = request.authentication?.prefix ?? "Bearer";
+      const token = request.authentication?.token ?? "";
+      headers.push({ name: "Authorization", value: `${prefix} ${token}`.trim() });
+    } else if (request.authenticationType === "apikey") {
+      if (request.authentication?.location === "header") {
+        headers.push({
+          name: request.authentication?.key ?? "X-Api-Key",
+          value: request.authentication?.value ?? "",
+        });
+      } else if (request.authentication?.location === "query") {
+        const sep = finalUrl.includes("?") ? "&" : "?";
+        finalUrl = [
+          finalUrl,
+          sep,
+          encodeURIComponent(request.authentication?.key ?? "token"),
+          "=",
+          encodeURIComponent(request.authentication?.value ?? ""),
+        ].join("");
+      }
+    }
+  }
+
+  // Build HAR request object
+  const har: Record<string, unknown> = {
+    method: request.method || "GET",
+    url: finalUrl,
+    headers,
+  };
+
+  // Handle request body
+  const bodyType = request.bodyType ?? "none";
+  if (bodyType !== "none" && request.body) {
+    if (bodyType === "application/x-www-form-urlencoded" && Array.isArray(request.body.form)) {
+      const params = request.body.form
+        .filter((p: { enabled?: boolean; name?: string }) => p.enabled !== false && !!p.name)
+        .map((p: { name: string; value: string }) => ({ name: p.name, value: p.value }));
+      har.postData = {
+        mimeType: "application/x-www-form-urlencoded",
+        params,
+      };
+    } else if (bodyType === "multipart/form-data" && Array.isArray(request.body.form)) {
+      const params = request.body.form
+        .filter((p: { enabled?: boolean; name?: string }) => p.enabled !== false && !!p.name)
+        .map((p: { name: string; value: string; file?: string; contentType?: string }) => {
+          const param: Record<string, string> = { name: p.name, value: p.value || "" };
+          if (p.file) param.fileName = p.file;
+          if (p.contentType) param.contentType = p.contentType;
+          return param;
+        });
+      har.postData = {
+        mimeType: "multipart/form-data",
+        params,
+      };
+    } else if (bodyType === "graphql" && typeof request.body.query === "string") {
+      const body = {
+        query: request.body.query || "",
+        variables: maybeParseJSON(request.body.variables, undefined),
+      };
+      har.postData = {
+        mimeType: "application/json",
+        text: JSON.stringify(body),
+      };
+    } else if (typeof request.body.text === "string") {
+      har.postData = {
+        mimeType: bodyType,
+        text: request.body.text,
+      };
+    }
+  }
+
+  return har;
+}
+
+function maybeParseJSON<T>(v: unknown, fallback: T): unknown {
+  if (typeof v !== "string") return fallback;
+  try {
+    return JSON.parse(v);
+  } catch {
+    return fallback;
+  }
+}
+
+export const plugin: PluginDefinition = {
+  httpRequestActions: [
+    {
+      label: "Generate Code Snippet",
+      icon: "copy",
+      async onSelect(ctx, args) {
+        // Render the request with variables resolved
+        const renderedRequest = await ctx.httpRequest.render({
+          httpRequest: args.httpRequest,
+          purpose: "send",
+        });
+
+        // Convert to HAR format
+        const harRequest = toHarRequest(renderedRequest) as HarRequest;
+
+        // Get previously selected language or use defaults
+        const storedTarget = await ctx.store.get<string>("selectedTarget");
+        const initialTarget = storedTarget || defaultTarget;
+        const storedClient = await ctx.store.get<string>(`selectedClient:${initialTarget}`);
+        const initialClient = storedClient || getDefaultClient(initialTarget);
+
+        // Create snippet generator
+        const snippet = new HTTPSnippet(harRequest);
+        const generateSnippet = (target: string, client: string): string => {
+          const result = snippet.convert(
+            target as Parameters<typeof snippet.convert>[0],
+            client as Parameters<typeof snippet.convert>[1],
+          );
+          return (Array.isArray(result) ? result.join("\n") : result || "").replace(/\r\n/g, "\n");
+        };
+
+        // Generate initial code preview
+        let initialCode = "";
+        try {
+          initialCode = generateSnippet(initialTarget, initialClient);
+        } catch {
+          initialCode = "// Error generating snippet";
+        }
+
+        // Show dialog with language/library selectors and code preview
+        const result = await ctx.prompt.form({
+          id: "httpsnippet",
+          title: "Generate Code Snippet",
+          confirmText: "Copy to Clipboard",
+          cancelText: "Cancel",
+          size: "md",
+          inputs: [
+            {
+              type: "h_stack",
+              inputs: [
+                {
+                  type: "select",
+                  name: "target",
+                  label: "Language",
+                  defaultValue: initialTarget,
+                  options: languageOptions,
+                },
+                {
+                  type: "select",
+                  name: `client-${initialTarget}`,
+                  label: "Library",
+                  defaultValue: initialClient,
+                  options: getClientOptions(initialTarget),
+                  dynamic(_ctx, { values }) {
+                    const targetKey = String(values.target || defaultTarget);
+                    const options = getClientOptions(targetKey);
+                    return {
+                      name: `client-${targetKey}`,
+                      options,
+                      defaultValue: options[0]?.value ?? "",
+                    };
+                  },
+                },
+              ],
+            },
+            {
+              type: "editor",
+              name: "code",
+              label: "Preview",
+              language: getEditorLanguage(initialTarget),
+              defaultValue: initialCode,
+              readOnly: true,
+              rows: 15,
+              dynamic(_ctx, { values }) {
+                const targetKey = String(values.target || defaultTarget);
+                const clientKey = String(
+                  values[`client-${targetKey}`] || getDefaultClient(targetKey),
+                );
+                let code: string;
+                try {
+                  code = generateSnippet(targetKey, clientKey);
+                } catch {
+                  code = "// Error generating snippet";
+                }
+                return {
+                  defaultValue: code,
+                  language: getEditorLanguage(targetKey),
+                };
+              },
+            },
+          ],
+        });
+
+        if (result) {
+          // Store the selected language and library for next time
+          const selectedTarget = String(result.target || initialTarget);
+          const selectedClient = String(
+            result[`client-${selectedTarget}`] || getDefaultClient(selectedTarget),
+          );
+          await ctx.store.set("selectedTarget", selectedTarget);
+          await ctx.store.set(`selectedClient:${selectedTarget}`, selectedClient);
+
+          // Generate snippet for the selected language
+          try {
+            const codeText = generateSnippet(selectedTarget, selectedClient);
+            await ctx.clipboard.copyText(codeText);
+            await ctx.toast.show({
+              message: "Code snippet copied to clipboard",
+              icon: "copy",
+              color: "success",
+            });
+          } catch (err) {
+            await ctx.toast.show({
+              message: `Failed to generate snippet: ${err instanceof Error ? err.message : String(err)}`,
+              icon: "alert_triangle",
+              color: "danger",
+            });
+          }
+        }
+      },
+    },
+  ],
+};
diff --git a/plugins-external/mcp-server/README.md b/plugins-external/mcp-server/README.md
new file mode 100644
index 0000000..ebd9598
--- /dev/null
+++ b/plugins-external/mcp-server/README.md
@@ -0,0 +1,58 @@
+# Yaak MCP Server Plugin
+
+Exposes Yaak's functionality via the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/).
+
+## Setup
+
+Add this to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
+
+```json
+{
+  "mcpServers": {
+    "yaak": {
+      "command": "npx",
+      "args": ["-y", "mcp-remote", "http://127.0.0.1:64343/mcp"]
+    }
+  }
+}
+```
+
+Restart Claude Desktop and make sure Yaak is running.
+
+## Available Tools
+
+- `list_http_requests` - List all HTTP requests in a workspace
+- `get_http_request` - Get details of a specific HTTP request
+- `send_http_request` - Send an HTTP request and get the response
+- `create_http_request` - Create a new HTTP request
+- `update_http_request` - Update an existing HTTP request
+- `delete_http_request` - Delete an HTTP request
+- `list_folders` - List all folders in a workspace
+- `list_workspaces` - List all open workspaces
+- `get_workspace_id` - Get the current workspace ID
+- `get_environment_id` - Get the current environment ID
+- `copy_to_clipboard` - Copy text to the system clipboard
+- `show_toast` - Show a toast notification in Yaak
+
+## Environment Selection
+
+`send_http_request` accepts an optional `environmentId` for that execution. It overrides the
+active environment without changing the selection in Yaak. Omitting it uses the host's
+active environment, as before.
+
+The ID must identify a base or sub-environment in the request's workspace. An empty,
+unknown, foreign-workspace, or folder environment ID returns an error before sending.
+Use the base environment ID to run with global variables only. Folder variables still
+apply according to the request's folder hierarchy.
+
+```json
+{
+  "id": "rq_example",
+  "workspaceId": "wk_example",
+  "environmentId": "ev_staging"
+}
+```
+
+This requires a Yaak host with support for the `environmentId` plugin API field;
+older hosts ignore it. `get_environment_id` reports the active selection, not the
+override used by a previous send.
diff --git a/plugins-external/mcp-server/package.json b/plugins-external/mcp-server/package.json
new file mode 100644
index 0000000..80e5ef6
--- /dev/null
+++ b/plugins-external/mcp-server/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@yaak/mcp-server",
+  "displayName": "MCP Server",
+  "version": "0.2.1",
+  "private": true,
+  "description": "Expose Yaak functionality via Model Context Protocol",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins-external/mcp-server"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "@hono/mcp": "^0.3.2",
+    "@hono/node-server": "^2.0.10",
+    "@modelcontextprotocol/sdk": "^1.26.0",
+    "hono": "^4.13.5",
+    "zod": "^4.6.2"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "typescript": "^5.9.3"
+  },
+  "minYaakVersion": "2026.1.0"
+}
diff --git a/plugins-external/mcp-server/src/index.ts b/plugins-external/mcp-server/src/index.ts
new file mode 100644
index 0000000..01c15a9
--- /dev/null
+++ b/plugins-external/mcp-server/src/index.ts
@@ -0,0 +1,36 @@
+import type { Context, PluginDefinition } from "@yaakapp/api";
+import { createMcpServer } from "./server.js";
+
+const serverPort = parseInt(process.env.YAAK_PLUGIN_MCP_SERVER_PORT ?? "64343", 10);
+
+let mcpServer: Awaited<ReturnType<typeof createMcpServer>> | null = null;
+
+export const plugin: PluginDefinition = {
+  async init(ctx: Context) {
+    // Start the server after waiting, so there's an active window open to do things
+    // like show the startup toast.
+    console.log("Initializing MCP Server plugin");
+    setTimeout(async () => {
+      try {
+        mcpServer = createMcpServer({ yaak: ctx }, serverPort);
+      } catch (err) {
+        console.error("Failed to start MCP server:", err);
+        void ctx.toast.show({
+          message: `Failed to start MCP Server: ${err instanceof Error ? err.message : String(err)}`,
+          icon: "alert_triangle",
+          color: "danger",
+          timeout: 10000,
+        });
+      }
+    }, 5000);
+  },
+
+  async dispose() {
+    console.log("Disposing MCP Server plugin");
+
+    if (mcpServer) {
+      await mcpServer.close();
+      mcpServer = null;
+    }
+  },
+};
diff --git a/plugins-external/mcp-server/src/server.ts b/plugins-external/mcp-server/src/server.ts
new file mode 100644
index 0000000..d1f3e3c
--- /dev/null
+++ b/plugins-external/mcp-server/src/server.ts
@@ -0,0 +1,72 @@
+import { StreamableHTTPTransport } from "@hono/mcp";
+import { serve } from "@hono/node-server";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { Hono } from "hono";
+import { registerFolderTools } from "./tools/folder.js";
+import { registerHttpRequestTools } from "./tools/httpRequest.js";
+import { registerToastTools } from "./tools/toast.js";
+import { registerWindowTools } from "./tools/window.js";
+import { registerWorkspaceTools } from "./tools/workspace.js";
+import type { McpServerContext } from "./types.js";
+
+export function createMcpServer(ctx: McpServerContext, port: number) {
+  console.log("Creating MCP server on port", port);
+  const mcpServer = new McpServer({
+    name: "yaak-mcp-server",
+    version: "0.1.0",
+  });
+
+  // Register all tools
+  registerToastTools(mcpServer, ctx);
+  registerHttpRequestTools(mcpServer, ctx);
+  registerFolderTools(mcpServer, ctx);
+  registerWindowTools(mcpServer, ctx);
+  registerWorkspaceTools(mcpServer, ctx);
+
+  const app = new Hono();
+  const transport = new StreamableHTTPTransport();
+
+  app.all("/mcp", async (c) => {
+    if (!mcpServer.isConnected()) {
+      // Connect the mcp with the transport
+      await mcpServer.connect(transport);
+      void ctx.yaak.toast.show({
+        message: `MCP Server connected`,
+        icon: "info",
+        color: "info",
+        timeout: 5000,
+      });
+    }
+    return transport.handleRequest(c);
+  });
+
+  const honoServer = serve(
+    {
+      port,
+      hostname: "127.0.0.1",
+      fetch: app.fetch,
+    },
+    (info) => {
+      console.log("Started MCP server on ", info.address);
+      void ctx.yaak.toast.show({
+        message: `MCP Server running on http://127.0.0.1:${info.port}`,
+        icon: "info",
+        color: "secondary",
+        timeout: 10000,
+      });
+    },
+  );
+
+  return {
+    server: mcpServer,
+    close: async () => {
+      await new Promise<void>((resolve, reject) => {
+        honoServer.close((err) => {
+          if (err) reject(err);
+          else resolve();
+        });
+      });
+      await mcpServer.close();
+    },
+  };
+}
diff --git a/plugins-external/mcp-server/src/tools/folder.ts b/plugins-external/mcp-server/src/tools/folder.ts
new file mode 100644
index 0000000..38aacfa
--- /dev/null
+++ b/plugins-external/mcp-server/src/tools/folder.ts
@@ -0,0 +1,148 @@
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import * as z from "zod";
+import type { McpServerContext } from "../types.js";
+import { getWorkspaceContext } from "./helpers.js";
+import {
+  authenticationSchema,
+  authenticationTypeSchema,
+  headersSchema,
+  workspaceIdSchema,
+} from "./schemas.js";
+
+export function registerFolderTools(server: McpServer, ctx: McpServerContext) {
+  server.registerTool(
+    "list_folders",
+    {
+      title: "List Folders",
+      description: "List all folders in a workspace",
+      inputSchema: {
+        workspaceId: workspaceIdSchema,
+      },
+    },
+    async ({ workspaceId }) => {
+      const workspaceCtx = await getWorkspaceContext(ctx, workspaceId);
+      const folders = await workspaceCtx.yaak.folder.list();
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: JSON.stringify(folders, null, 2),
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerTool(
+    "get_folder",
+    {
+      title: "Get Folder",
+      description: "Get details of a specific folder by ID",
+      inputSchema: {
+        id: z.string().describe("The folder ID"),
+        workspaceId: workspaceIdSchema,
+      },
+    },
+    async ({ id, workspaceId }) => {
+      const workspaceCtx = await getWorkspaceContext(ctx, workspaceId);
+      const folder = await workspaceCtx.yaak.folder.getById({ id });
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: JSON.stringify(folder, null, 2),
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerTool(
+    "create_folder",
+    {
+      title: "Create Folder",
+      description: "Create a new folder in a workspace",
+      inputSchema: {
+        workspaceId: workspaceIdSchema,
+        name: z.string().describe("Folder name"),
+        folderId: z.string().optional().describe("Parent folder ID (for nested folders)"),
+        description: z.string().optional().describe("Folder description"),
+        sortPriority: z.number().optional().describe("Sort priority for ordering"),
+        headers: headersSchema.describe("Default headers to apply to requests in this folder"),
+        authenticationType: authenticationTypeSchema,
+        authentication: authenticationSchema,
+      },
+    },
+    async ({ workspaceId: ogWorkspaceId, ...args }) => {
+      const workspaceCtx = await getWorkspaceContext(ctx, ogWorkspaceId);
+      const workspaceId = await workspaceCtx.yaak.window.workspaceId();
+      if (!workspaceId) {
+        throw new Error("No workspace is open");
+      }
+
+      const folder = await workspaceCtx.yaak.folder.create({
+        workspaceId: workspaceId,
+        ...args,
+      });
+
+      return {
+        content: [{ type: "text" as const, text: JSON.stringify(folder, null, 2) }],
+      };
+    },
+  );
+
+  server.registerTool(
+    "update_folder",
+    {
+      title: "Update Folder",
+      description: "Update an existing folder",
+      inputSchema: {
+        id: z.string().describe("Folder ID to update"),
+        workspaceId: workspaceIdSchema,
+        name: z.string().optional().describe("Folder name"),
+        folderId: z.string().optional().describe("Parent folder ID (for nested folders)"),
+        description: z.string().optional().describe("Folder description"),
+        sortPriority: z.number().optional().describe("Sort priority for ordering"),
+        headers: headersSchema.describe("Default headers to apply to requests in this folder"),
+        authenticationType: authenticationTypeSchema,
+        authentication: authenticationSchema,
+      },
+    },
+    async ({ id, workspaceId, ...updates }) => {
+      const workspaceCtx = await getWorkspaceContext(ctx, workspaceId);
+      // Fetch existing folder to merge with updates
+      const existing = await workspaceCtx.yaak.folder.getById({ id });
+      if (!existing) {
+        throw new Error(`Folder with ID ${id} not found`);
+      }
+      // Merge existing fields with updates
+      const folder = await workspaceCtx.yaak.folder.update({
+        ...existing,
+        ...updates,
+        id,
+      });
+      return {
+        content: [{ type: "text" as const, text: JSON.stringify(folder, null, 2) }],
+      };
+    },
+  );
+
+  server.registerTool(
+    "delete_folder",
+    {
+      title: "Delete Folder",
+      description: "Delete a folder by ID",
+      inputSchema: {
+        id: z.string().describe("Folder ID to delete"),
+      },
+    },
+    async ({ id }) => {
+      const folder = await ctx.yaak.folder.delete({ id });
+      return {
+        content: [{ type: "text" as const, text: `Deleted: ${folder.name} (${folder.id})` }],
+      };
+    },
+  );
+}
diff --git a/plugins-external/mcp-server/src/tools/helpers.ts b/plugins-external/mcp-server/src/tools/helpers.ts
new file mode 100644
index 0000000..66dd546
--- /dev/null
+++ b/plugins-external/mcp-server/src/tools/helpers.ts
@@ -0,0 +1,32 @@
+import type { McpServerContext } from "../types.js";
+
+export async function getWorkspaceContext(
+  ctx: McpServerContext,
+  workspaceId?: string,
+): Promise<McpServerContext> {
+  const workspaces = await ctx.yaak.workspace.list();
+
+  if (!workspaceId && workspaces.length > 1) {
+    const workspaceList = workspaces.map((w, i) => `${i + 1}. ${w.name} (ID: ${w.id})`).join("\n");
+    throw new Error(
+      `Multiple workspaces are open. Please specify which workspace to use.\n\n` +
+        `Currently open workspaces:\n${workspaceList}\n\n` +
+        `You can use the list_workspaces tool to get workspace IDs, then use other tools ` +
+        `with the workspace context. For example, ask the user which workspace they want ` +
+        `to work with by presenting them with the numbered list above.`,
+    );
+  }
+
+  const workspace = workspaceId ? workspaces.find((w) => w.id === workspaceId) : workspaces[0];
+  if (!workspace) {
+    const workspaceList = workspaces.map((w) => `- ${w.name} (ID: ${w.id})`).join("\n");
+    throw new Error(
+      `Workspace with ID "${workspaceId}" not found.\n\n` +
+        `Available workspaces:\n${workspaceList}`,
+    );
+  }
+
+  return {
+    yaak: ctx.yaak.workspace.withContext(workspace),
+  };
+}
diff --git a/plugins-external/mcp-server/src/tools/httpRequest.test.ts b/plugins-external/mcp-server/src/tools/httpRequest.test.ts
new file mode 100644
index 0000000..0b6cdd5
--- /dev/null
+++ b/plugins-external/mcp-server/src/tools/httpRequest.test.ts
@@ -0,0 +1,98 @@
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { InMemoryTransport } from "@modelcontextprotocol/sdk/inMemory.js";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import type { Context } from "@yaakapp/api";
+import { afterEach, expect, test, vi } from "vite-plus/test";
+import { registerHttpRequestTools } from "./httpRequest";
+
+const cleanups: Array<() => Promise<void>> = [];
+afterEach(async () => {
+  for (const cleanup of cleanups.splice(0)) await cleanup();
+});
+
+async function fixture({ missing = false, sendError = false } = {}) {
+  const httpRequest = { id: "rq_test", workspaceId: "wk_test", url: "http://localhost/echo" };
+  const send = vi.fn(async (_args: { httpRequest: unknown; environmentId?: string }) => {
+    if (sendError) throw new Error("Environment not found");
+    return { httpResponse: { id: "rs_test", status: 200 } };
+  });
+  // Only the host is mocked; calls go through the real MCP client, schema and transport.
+  const yaak = {
+    workspace: {
+      list: async () => [{ id: "wk_test", name: "Test Workspace" }],
+      withContext: () => yaak,
+    },
+    httpRequest: { getById: async () => (missing ? null : httpRequest), send },
+  };
+  const server = new McpServer({ name: "yaak-test", version: "0.0.0" });
+  registerHttpRequestTools(server, { yaak: yaak as unknown as Context });
+  const client = new Client({ name: "test", version: "0.0.0" });
+  const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
+  await server.connect(serverTransport);
+  await client.connect(clientTransport);
+  cleanups.push(async () => {
+    await client.close();
+    await server.close();
+  });
+  return { client, send, httpRequest };
+}
+
+test("forwards the advertised environmentId to the host", async () => {
+  const { client, send, httpRequest } = await fixture();
+  const { tools } = await client.listTools();
+  expect(
+    tools.find((tool) => tool.name === "send_http_request")?.inputSchema.properties,
+  ).toHaveProperty("environmentId");
+  const result = await client.callTool({
+    name: "send_http_request",
+    arguments: { id: httpRequest.id, workspaceId: "wk_test", environmentId: "ev_staging" },
+  });
+  expect(result.isError).toBeFalsy();
+  expect(send).toHaveBeenCalledExactlyOnceWith({ httpRequest, environmentId: "ev_staging" });
+});
+
+test("leaves the environment unspecified when omitted", async () => {
+  const { client, send, httpRequest } = await fixture();
+  const result = await client.callTool({
+    name: "send_http_request",
+    arguments: { id: httpRequest.id },
+  });
+  expect(result.isError).toBeFalsy();
+  expect(send).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({ httpRequest }));
+  expect(send.mock.calls[0]?.[0]).not.toHaveProperty("environmentId", expect.any(String));
+});
+
+test("does not send a missing request", async () => {
+  const { client, send } = await fixture({ missing: true });
+  const result = await client.callTool({
+    name: "send_http_request",
+    arguments: { id: "rq_missing" },
+  });
+  expect(result.isError).toBe(true);
+  expect(send).not.toHaveBeenCalled();
+});
+
+test("returns host environment errors to the MCP client", async () => {
+  const { client } = await fixture({ sendError: true });
+  const result = await client.callTool({
+    name: "send_http_request",
+    arguments: { id: "rq_test", environmentId: "ev_missing" },
+  });
+  expect(result.isError).toBe(true);
+  expect(result.content).toEqual([{ type: "text", text: "Environment not found" }]);
+});
+
+test("keeps concurrent environment overrides separate", async () => {
+  const { client, send, httpRequest } = await fixture();
+  await Promise.all(
+    ["ev_a", "ev_b"].map((environmentId) =>
+      client.callTool({
+        name: "send_http_request",
+        arguments: { id: httpRequest.id, environmentId },
+      }),
+    ),
+  );
+  expect(send).toHaveBeenCalledTimes(2);
+  expect(send).toHaveBeenCalledWith({ httpRequest, environmentId: "ev_a" });
+  expect(send).toHaveBeenCalledWith({ httpRequest, environmentId: "ev_b" });
+});
diff --git a/plugins-external/mcp-server/src/tools/httpRequest.ts b/plugins-external/mcp-server/src/tools/httpRequest.ts
new file mode 100644
index 0000000..647692c
--- /dev/null
+++ b/plugins-external/mcp-server/src/tools/httpRequest.ts
@@ -0,0 +1,201 @@
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import * as z from "zod";
+import type { McpServerContext } from "../types.js";
+import { getWorkspaceContext } from "./helpers.js";
+import {
+  authenticationSchema,
+  authenticationTypeSchema,
+  bodySchema,
+  bodyTypeSchema,
+  headersSchema,
+  urlParametersSchema,
+  workspaceIdSchema,
+} from "./schemas.js";
+
+export function registerHttpRequestTools(server: McpServer, ctx: McpServerContext) {
+  server.registerTool(
+    "list_http_requests",
+    {
+      title: "List HTTP Requests",
+      description: "List all HTTP requests in a workspace",
+      inputSchema: {
+        workspaceId: workspaceIdSchema,
+      },
+    },
+    async ({ workspaceId }) => {
+      const workspaceCtx = await getWorkspaceContext(ctx, workspaceId);
+      const requests = await workspaceCtx.yaak.httpRequest.list();
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: JSON.stringify(requests, null, 2),
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerTool(
+    "get_http_request",
+    {
+      title: "Get HTTP Request",
+      description: "Get details of a specific HTTP request by ID",
+      inputSchema: {
+        id: z.string().describe("The HTTP request ID"),
+        workspaceId: workspaceIdSchema,
+      },
+    },
+    async ({ id, workspaceId }) => {
+      const workspaceCtx = await getWorkspaceContext(ctx, workspaceId);
+      const request = await workspaceCtx.yaak.httpRequest.getById({ id });
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: JSON.stringify(request, null, 2),
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerTool(
+    "send_http_request",
+    {
+      title: "Send HTTP Request",
+      description: "Send an HTTP request and get the response",
+      inputSchema: {
+        id: z.string().describe("The HTTP request ID to send"),
+        environmentId: z
+          .string()
+          .optional()
+          .describe("Environment ID for this send only; defaults to the active environment"),
+        workspaceId: workspaceIdSchema,
+      },
+    },
+    async ({ id, workspaceId, environmentId }) => {
+      const workspaceCtx = await getWorkspaceContext(ctx, workspaceId);
+      const httpRequest = await workspaceCtx.yaak.httpRequest.getById({ id });
+      if (httpRequest == null) {
+        throw new Error(`HTTP request with ID ${id} not found`);
+      }
+
+      const { httpResponse: response } = await workspaceCtx.yaak.httpRequest.send({
+        httpRequest,
+        environmentId,
+      });
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: JSON.stringify(response, null, 2),
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerTool(
+    "create_http_request",
+    {
+      title: "Create HTTP Request",
+      description: "Create a new HTTP request",
+      inputSchema: {
+        workspaceId: workspaceIdSchema,
+        name: z
+          .string()
+          .optional()
+          .describe("Request name (empty string to auto-generate from URL)"),
+        url: z.string().describe("Request URL"),
+        method: z.string().optional().describe("HTTP method (defaults to GET)"),
+        folderId: z.string().optional().describe("Parent folder ID"),
+        description: z.string().optional().describe("Request description"),
+        headers: headersSchema.describe("Request headers"),
+        urlParameters: urlParametersSchema,
+        bodyType: bodyTypeSchema,
+        body: bodySchema,
+        authenticationType: authenticationTypeSchema,
+        authentication: authenticationSchema,
+      },
+    },
+    async ({ workspaceId: ogWorkspaceId, ...args }) => {
+      const workspaceCtx = await getWorkspaceContext(ctx, ogWorkspaceId);
+      const workspaceId = await workspaceCtx.yaak.window.workspaceId();
+      if (!workspaceId) {
+        throw new Error("No workspace is open");
+      }
+
+      const httpRequest = await workspaceCtx.yaak.httpRequest.create({
+        workspaceId: workspaceId,
+        ...args,
+      });
+
+      return {
+        content: [{ type: "text" as const, text: JSON.stringify(httpRequest, null, 2) }],
+      };
+    },
+  );
+
+  server.registerTool(
+    "update_http_request",
+    {
+      title: "Update HTTP Request",
+      description: "Update an existing HTTP request",
+      inputSchema: {
+        id: z.string().describe("HTTP request ID to update"),
+        workspaceId: workspaceIdSchema,
+        name: z.string().optional().describe("Request name"),
+        url: z.string().optional().describe("Request URL"),
+        method: z.string().optional().describe("HTTP method"),
+        folderId: z.string().optional().describe("Parent folder ID"),
+        description: z.string().optional().describe("Request description"),
+        headers: headersSchema.describe("Request headers"),
+        urlParameters: urlParametersSchema,
+        bodyType: bodyTypeSchema,
+        body: bodySchema,
+        authenticationType: authenticationTypeSchema,
+        authentication: authenticationSchema,
+      },
+    },
+    async ({ id, workspaceId, ...updates }) => {
+      const workspaceCtx = await getWorkspaceContext(ctx, workspaceId);
+      // Fetch existing request to merge with updates
+      const existing = await workspaceCtx.yaak.httpRequest.getById({ id });
+      if (!existing) {
+        throw new Error(`HTTP request with ID ${id} not found`);
+      }
+      // Merge existing fields with updates
+      const httpRequest = await workspaceCtx.yaak.httpRequest.update({
+        ...existing,
+        ...updates,
+        id,
+      });
+      return {
+        content: [{ type: "text" as const, text: JSON.stringify(httpRequest, null, 2) }],
+      };
+    },
+  );
+
+  server.registerTool(
+    "delete_http_request",
+    {
+      title: "Delete HTTP Request",
+      description: "Delete an HTTP request by ID",
+      inputSchema: {
+        id: z.string().describe("HTTP request ID to delete"),
+      },
+    },
+    async ({ id }) => {
+      const httpRequest = await ctx.yaak.httpRequest.delete({ id });
+      return {
+        content: [
+          { type: "text" as const, text: `Deleted: ${httpRequest.name} (${httpRequest.id})` },
+        ],
+      };
+    },
+  );
+}
diff --git a/plugins-external/mcp-server/src/tools/schemas.ts b/plugins-external/mcp-server/src/tools/schemas.ts
new file mode 100644
index 0000000..12d6543
--- /dev/null
+++ b/plugins-external/mcp-server/src/tools/schemas.ts
@@ -0,0 +1,67 @@
+import * as z from "zod";
+
+export const workspaceIdSchema = z
+  .string()
+  .optional()
+  .describe("Workspace ID (required if multiple workspaces are open)");
+
+export const headersSchema = z
+  .array(
+    z.object({
+      name: z.string(),
+      value: z.string(),
+      enabled: z.boolean().default(true),
+    }),
+  )
+  .optional();
+
+export const urlParametersSchema = z
+  .array(
+    z.object({
+      name: z.string(),
+      value: z.string(),
+      enabled: z.boolean().default(true),
+    }),
+  )
+  .optional()
+  .describe("URL query parameters");
+
+export const bodyTypeSchema = z
+  .string()
+  .optional()
+  .describe(
+    'Body type. Supported values: "binary", "graphql", "application/x-www-form-urlencoded", "multipart/form-data", or any text-based type (e.g., "application/json", "text/plain")',
+  );
+
+export const bodySchema = z
+  .record(z.string(), z.any())
+  .optional()
+  .describe(
+    "Body content object. Structure varies by bodyType:\n" +
+      '- "binary": { filePath: "/path/to/file" }\n' +
+      '- "graphql": { query: "{ users { name } }", variables: "{\\"id\\": \\"123\\"}" }\n' +
+      '- "application/x-www-form-urlencoded": { form: [{ name: "key", value: "val", enabled: true }] }\n' +
+      '- "multipart/form-data": { form: [{ name: "field", value: "text", file: "/path/to/file", enabled: true }] }\n' +
+      '- text-based (application/json, etc.): { text: "raw body content" }',
+  );
+
+export const authenticationTypeSchema = z
+  .string()
+  .optional()
+  .describe(
+    'Authentication type. Common values: "basic", "bearer", "oauth2", "apikey", "jwt", "awsv4", "oauth1", "ntlm", "none". Use null to inherit from parent.',
+  );
+
+export const authenticationSchema = z
+  .record(z.string(), z.any())
+  .optional()
+  .describe(
+    "Authentication configuration object. Structure varies by authenticationType:\n" +
+      '- "basic": { username: "user", password: "pass" }\n' +
+      '- "bearer": { token: "abc123", prefix: "Bearer" }\n' +
+      '- "oauth2": { clientId: "...", clientSecret: "...", grantType: "authorization_code", authorizationUrl: "...", accessTokenUrl: "...", scope: "...", ... }\n' +
+      '- "apikey": { location: "header" | "query", key: "X-API-Key", value: "..." }\n' +
+      '- "jwt": { algorithm: "HS256", secret: "...", payload: "{ ... }" }\n' +
+      '- "awsv4": { accessKeyId: "...", secretAccessKey: "...", service: "sts", region: "us-east-1", sessionToken: "..." }\n' +
+      '- "none": {}',
+  );
diff --git a/plugins-external/mcp-server/src/tools/toast.ts b/plugins-external/mcp-server/src/tools/toast.ts
new file mode 100644
index 0000000..416648d
--- /dev/null
+++ b/plugins-external/mcp-server/src/tools/toast.ts
@@ -0,0 +1,59 @@
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import type { Color, Icon } from "@yaakapp/api";
+import * as z from "zod";
+import type { McpServerContext } from "../types.js";
+
+const ICON_VALUES = [
+  "alert_triangle",
+  "check",
+  "check_circle",
+  "chevron_down",
+  "copy",
+  "info",
+  "pin",
+  "search",
+  "trash",
+] as const satisfies readonly Icon[];
+
+const COLOR_VALUES = [
+  "primary",
+  "secondary",
+  "info",
+  "success",
+  "notice",
+  "warning",
+  "danger",
+] as const satisfies readonly Color[];
+
+export function registerToastTools(server: McpServer, ctx: McpServerContext) {
+  server.registerTool(
+    "show_toast",
+    {
+      title: "Show Toast",
+      description: "Show a toast notification in Yaak",
+      inputSchema: {
+        message: z.string().describe("The message to display"),
+        icon: z.enum(ICON_VALUES).optional().describe("Icon name"),
+        color: z.enum(COLOR_VALUES).optional().describe("Toast color"),
+        timeout: z.number().optional().describe("Timeout in milliseconds"),
+      },
+    },
+    async ({ message, icon, color, timeout }) => {
+      await ctx.yaak.toast.show({
+        message,
+        icon,
+        color,
+        timeout,
+      });
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: `✓ Toast shown: "${message}"`,
+          },
+        ],
+      };
+    },
+  );
+}
diff --git a/plugins-external/mcp-server/src/tools/window.ts b/plugins-external/mcp-server/src/tools/window.ts
new file mode 100644
index 0000000..8164dc8
--- /dev/null
+++ b/plugins-external/mcp-server/src/tools/window.ts
@@ -0,0 +1,47 @@
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import type { McpServerContext } from "../types.js";
+import { getWorkspaceContext } from "./helpers.js";
+
+export function registerWindowTools(server: McpServer, ctx: McpServerContext) {
+  server.registerTool(
+    "get_workspace_id",
+    {
+      title: "Get Workspace ID",
+      description: "Get the current workspace ID",
+    },
+    async () => {
+      const workspaceCtx = await getWorkspaceContext(ctx);
+      const workspaceId = await workspaceCtx.yaak.window.workspaceId();
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: workspaceId || "No workspace open",
+          },
+        ],
+      };
+    },
+  );
+
+  server.registerTool(
+    "get_environment_id",
+    {
+      title: "Get Environment ID",
+      description: "Get the current environment ID",
+    },
+    async () => {
+      const workspaceCtx = await getWorkspaceContext(ctx);
+      const environmentId = await workspaceCtx.yaak.window.environmentId();
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: environmentId || "No environment selected",
+          },
+        ],
+      };
+    },
+  );
+}
diff --git a/plugins-external/mcp-server/src/tools/workspace.ts b/plugins-external/mcp-server/src/tools/workspace.ts
new file mode 100644
index 0000000..b1b629c
--- /dev/null
+++ b/plugins-external/mcp-server/src/tools/workspace.ts
@@ -0,0 +1,24 @@
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import type { McpServerContext } from "../types.js";
+
+export function registerWorkspaceTools(server: McpServer, ctx: McpServerContext) {
+  server.registerTool(
+    "list_workspaces",
+    {
+      title: "List Workspaces",
+      description: "List all open workspaces in Yaak",
+    },
+    async () => {
+      const workspaces = await ctx.yaak.workspace.list();
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: JSON.stringify(workspaces, null, 2),
+          },
+        ],
+      };
+    },
+  );
+}
diff --git a/plugins-external/mcp-server/src/types.ts b/plugins-external/mcp-server/src/types.ts
new file mode 100644
index 0000000..72082f9
--- /dev/null
+++ b/plugins-external/mcp-server/src/types.ts
@@ -0,0 +1,5 @@
+import type { Context } from "@yaakapp/api";
+
+export interface McpServerContext {
+  yaak: Context;
+}
diff --git a/plugins-external/mcp-server/tsconfig.json b/plugins-external/mcp-server/tsconfig.json
new file mode 100644
index 0000000..c82552e
--- /dev/null
+++ b/plugins-external/mcp-server/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler"
+  }
+}
diff --git a/plugins/.gitignore b/plugins/.gitignore
new file mode 100644
index 0000000..5c644e1
--- /dev/null
+++ b/plugins/.gitignore
@@ -0,0 +1 @@
+*/build
diff --git a/plugins/action-copy-curl/README.md b/plugins/action-copy-curl/README.md
new file mode 100644
index 0000000..e2625f2
--- /dev/null
+++ b/plugins/action-copy-curl/README.md
@@ -0,0 +1,68 @@
+# Copy as cUrl
+
+A request action plugin for Yaak that converts HTTP requests into [curl](https://curl.se)
+commands, making it easy to share, debug, and execute requests outside Yaak.
+
+![Screenshot of context menu](screenshot.png)
+
+## Overview
+
+This plugin adds a 'Copy as Curl' action to HTTP requests, converting any request into its
+equivalent curl command. This is useful for debugging, sharing requests with team members,
+and executing requests in terminal environments where `curl` is available.
+
+## How It Works
+
+The plugin analyzes the given HTTP request and generates a properly formatted curl command
+that includes:
+
+- HTTP method (GET, POST, PUT, DELETE, etc.)
+- Request URL with query parameters
+- Headers (including authentication headers)
+- Request body (for POST, PUT, PATCH requests)
+- Authentication credentials
+
+## Usage
+
+1. Configure an HTTP request as usual in Yaak
+2. Right-click on the request in the sidebar
+3. Select 'Copy as Curl'
+4. The command is copied to your clipboard
+5. Share or execute the command
+
+## Generated Curl Examples
+
+### Simple GET Request
+
+```bash
+curl -X GET 'https://api.example.com/users' \
+  --header 'Accept: application/json'
+```
+
+### POST Request with JSON Data
+
+```bash
+curl -X POST 'https://api.example.com/users' \
+  --header 'Content-Type: application/json' \
+  --header 'Accept: application/json' \
+  --data '{
+    "name": "John Doe",
+    "email": "john@example.com"
+  }'
+```
+
+### Request with Multi-part Form Data
+
+```bash
+curl -X POST 'yaak.app' \
+  --header 'Content-Type: multipart/form-data' \
+  --form 'hello=world' \
+  --form file=@/path/to/file.json
+```
+
+### Request with Authentication
+
+```bash
+curl -X GET 'https://api.example.com/protected' \
+  --user 'username:password'
+```
diff --git a/plugins/action-copy-curl/package.json b/plugins/action-copy-curl/package.json
new file mode 100644
index 0000000..3e7ee11
--- /dev/null
+++ b/plugins/action-copy-curl/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@yaak/action-copy-curl",
+  "displayName": "Copy as Curl",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Copy request as a curl command",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/action-copy-curl"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  }
+}
diff --git a/plugins/action-copy-curl/src/index.ts b/plugins/action-copy-curl/src/index.ts
new file mode 100644
index 0000000..1efbaf3
--- /dev/null
+++ b/plugins/action-copy-curl/src/index.ts
@@ -0,0 +1,179 @@
+import type { HttpRequest, PluginDefinition } from "@yaakapp/api";
+
+const NEWLINE = "\\\n ";
+
+export const plugin: PluginDefinition = {
+  httpRequestActions: [
+    {
+      label: "Copy as Curl",
+      icon: "copy",
+      async onSelect(ctx, args) {
+        const rendered_request = await ctx.httpRequest.render({
+          httpRequest: args.httpRequest,
+          purpose: "send",
+        });
+        const data = await convertToCurl(rendered_request);
+        await ctx.clipboard.copyText(data);
+        await ctx.toast.show({
+          message: "Command copied to clipboard",
+          icon: "copy",
+          color: "success",
+        });
+      },
+    },
+  ],
+};
+
+export async function convertToCurl(request: Partial<HttpRequest>) {
+  const xs = ["curl"];
+
+  // Add method and URL all on first line
+  if (request.method) xs.push("-X", request.method);
+
+  // Build final URL with parameters (compatible with old curl)
+  let finalUrl = request.url || "";
+  const urlParams = (request.urlParameters ?? []).filter(onlyEnabled);
+  if (urlParams.length > 0) {
+    // Build url
+    const [base, hash] = finalUrl.split("#");
+    const separator = base?.includes("?") ? "&" : "?";
+    const queryString = urlParams
+      .map((p) => `${encodeURIComponent(p.name)}=${encodeURIComponent(p.value)}`)
+      .join("&");
+    finalUrl = base + separator + queryString + (hash ? `#${hash}` : "");
+  }
+
+  // Add API key authentication
+  if (request.authenticationType === "apikey") {
+    if (request.authentication?.location === "query") {
+      const sep = finalUrl.includes("?") ? "&" : "?";
+      finalUrl = [
+        finalUrl,
+        sep,
+        encodeURIComponent(request.authentication?.key ?? "token"),
+        "=",
+        encodeURIComponent(request.authentication?.value ?? ""),
+      ].join("");
+    } else {
+      request.headers = request.headers ?? [];
+      request.headers.push({
+        name: request.authentication?.key ?? "X-Api-Key",
+        value: request.authentication?.value ?? "",
+      });
+    }
+  }
+
+  xs.push(quote(finalUrl));
+  xs.push(NEWLINE);
+
+  // Add headers
+  for (const h of (request.headers ?? []).filter(onlyEnabled)) {
+    xs.push("--header", quote(`${h.name}: ${h.value}`));
+    xs.push(NEWLINE);
+  }
+
+  // Add form params
+  const type = request.bodyType ?? "none";
+  if (
+    (type === "multipart/form-data" || type === "application/x-www-form-urlencoded") &&
+    Array.isArray(request.body?.form)
+  ) {
+    const flag = request.bodyType === "multipart/form-data" ? "--form" : "--data";
+    for (const p of (request.body?.form ?? []).filter(onlyEnabled)) {
+      if (p.file) {
+        let v = `${p.name}=@${p.file}`;
+        v += p.contentType ? `;type=${p.contentType}` : "";
+        // A bare `;` separates commands and a path can hold spaces, so this
+        // argument needs quoting like every other one.
+        xs.push(flag, quote(v));
+      } else {
+        xs.push(flag, quote(`${p.name}=${p.value}`));
+      }
+      xs.push(NEWLINE);
+    }
+  } else if (type === "graphql" && typeof request.body?.query === "string") {
+    const body = {
+      query: request.body.query || "",
+      variables: maybeParseJSON(request.body.variables, undefined),
+      operationName: request.body.operationName || undefined,
+    };
+    xs.push("--data", quote(JSON.stringify(body)));
+    xs.push(NEWLINE);
+  } else if (type !== "none" && typeof request.body?.text === "string") {
+    xs.push("--data", quote(request.body.text));
+    xs.push(NEWLINE);
+  }
+
+  // Add basic/digest authentication
+  if (request.authentication?.disabled !== true) {
+    if (request.authenticationType === "basic" || request.authenticationType === "digest") {
+      if (request.authenticationType === "digest") xs.push("--digest");
+      xs.push(
+        "--user",
+        quote(
+          `${request.authentication?.username ?? ""}:${request.authentication?.password ?? ""}`,
+        ),
+      );
+      xs.push(NEWLINE);
+    }
+
+    // Add bearer authentication
+    if (request.authenticationType === "bearer") {
+      const value =
+        `${request.authentication?.prefix ?? "Bearer"} ${request.authentication?.token ?? ""}`.trim();
+      xs.push("--header", quote(`Authorization: ${value}`));
+      xs.push(NEWLINE);
+    }
+
+    if (request.authenticationType === "auth-aws-sig-v4") {
+      xs.push(
+        "--aws-sigv4",
+        [
+          "aws",
+          "amz",
+          request.authentication?.region ?? "",
+          request.authentication?.service ?? "",
+        ].join(":"),
+      );
+      xs.push(NEWLINE);
+      xs.push(
+        "--user",
+        quote(
+          `${request.authentication?.accessKeyId ?? ""}:${request.authentication?.secretAccessKey ?? ""}`,
+        ),
+      );
+      if (request.authentication?.sessionToken) {
+        xs.push(NEWLINE);
+        xs.push("--header", quote(`X-Amz-Security-Token: ${request.authentication.sessionToken}`));
+      }
+      xs.push(NEWLINE);
+    }
+  }
+
+  // Remove trailing newline
+  if (xs[xs.length - 1] === NEWLINE) {
+    xs.splice(xs.length - 1, 1);
+  }
+
+  return xs.join(" ");
+}
+
+function quote(arg: string): string {
+  // A single-quoted POSIX string takes no escapes, so `\'` does not close it:
+  // the string ends one character early and the rest of the command is left
+  // dangling. Step out of the quotes, emit an escaped quote, step back in.
+  const escaped = arg.replace(/'/g, `'\\''`);
+  return `'${escaped}'`;
+}
+
+function onlyEnabled(v: { name?: string; enabled?: boolean }): boolean {
+  return v.enabled !== false && !!v.name;
+}
+
+function maybeParseJSON<T>(v: string, fallback: T) {
+  try {
+    return JSON.parse(v);
+  } catch {
+    return fallback;
+  }
+}
diff --git a/plugins/action-copy-curl/tests/index.test.ts b/plugins/action-copy-curl/tests/index.test.ts
new file mode 100644
index 0000000..3f2e167
--- /dev/null
+++ b/plugins/action-copy-curl/tests/index.test.ts
@@ -0,0 +1,470 @@
+import { describe, expect, test } from "vite-plus/test";
+import { convertToCurl } from "../src";
+
+describe("exporter-curl", () => {
+  test("Exports GET with params", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        urlParameters: [
+          { name: "a", value: "aaa" },
+          { name: "b", value: "bbb", enabled: true },
+          { name: "c", value: "ccc", enabled: false },
+        ],
+      }),
+    ).toEqual([`curl 'https://yaak.app?a=aaa&b=bbb'`].join(" \\n  "));
+  });
+
+  test("Exports GET with params and hash", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app/path#section",
+        urlParameters: [
+          { name: "a", value: "aaa" },
+          { name: "b", value: "bbb", enabled: true },
+          { name: "c", value: "ccc", enabled: false },
+        ],
+      }),
+    ).toEqual([`curl 'https://yaak.app/path?a=aaa&b=bbb#section'`].join(" \\n  "));
+  });
+
+  test("Exports POST with url form data", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        method: "POST",
+        bodyType: "application/x-www-form-urlencoded",
+        body: {
+          form: [
+            { name: "a", value: "aaa" },
+            { name: "b", value: "bbb", enabled: true },
+            { name: "c", value: "ccc", enabled: false },
+          ],
+        },
+      }),
+    ).toEqual(
+      [`curl -X POST 'https://yaak.app'`, `--data 'a=aaa'`, `--data 'b=bbb'`].join(" \\\n  "),
+    );
+  });
+
+  test("Exports POST with GraphQL data", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        method: "POST",
+        bodyType: "graphql",
+        body: {
+          query: "{foo,bar}",
+          variables: '{"a": "aaa", "b": "bbb"}',
+        },
+      }),
+    ).toEqual(
+      [
+        `curl -X POST 'https://yaak.app'`,
+        `--data '{"query":"{foo,bar}","variables":{"a":"aaa","b":"bbb"}}'`,
+      ].join(" \\\n  "),
+    );
+  });
+
+  test("Exports POST with GraphQL operation name", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        method: "POST",
+        bodyType: "graphql",
+        body: {
+          query: "query Foo { foo } query Bar { bar }",
+          operationName: "Foo",
+        },
+      }),
+    ).toEqual(
+      [
+        `curl -X POST 'https://yaak.app'`,
+        `--data '{"query":"query Foo { foo } query Bar { bar }","operationName":"Foo"}'`,
+      ].join(" \\\n  "),
+    );
+  });
+
+  test("Exports POST with GraphQL data no variables", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        method: "POST",
+        bodyType: "graphql",
+        body: {
+          query: "{foo,bar}",
+        },
+      }),
+    ).toEqual(
+      [`curl -X POST 'https://yaak.app'`, `--data '{"query":"{foo,bar}"}'`].join(" \\\n  "),
+    );
+  });
+
+  test("Exports PUT with multipart form", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        method: "PUT",
+        bodyType: "multipart/form-data",
+        body: {
+          form: [
+            { name: "a", value: "aaa" },
+            { name: "b", value: "bbb", enabled: true },
+            { name: "c", value: "ccc", enabled: false },
+            { name: "f", file: "/foo/bar.png", contentType: "image/png" },
+          ],
+        },
+      }),
+    ).toEqual(
+      [
+        `curl -X PUT 'https://yaak.app'`,
+        `--form 'a=aaa'`,
+        `--form 'b=bbb'`,
+        "--form 'f=@/foo/bar.png;type=image/png'",
+      ].join(" \\\n  "),
+    );
+  });
+
+  test("Exports JSON body", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        method: "POST",
+        bodyType: "application/json",
+        body: {
+          text: `{"foo":"bar's"}`,
+        },
+        headers: [{ name: "Content-Type", value: "application/json" }],
+      }),
+    ).toEqual(
+      [
+        `curl -X POST 'https://yaak.app'`,
+        `--header 'Content-Type: application/json'`,
+        `--data '{"foo":"bar'\\''s"}'`,
+      ].join(" \\\n  "),
+    );
+  });
+
+  test("Quotes an apostrophe so the command still parses", async () => {
+    // POSIX single quotes take no escapes: `\'` ends the string one
+    // character early and everything after it is left dangling, so the copied
+    // command is a syntax error rather than a request.
+    const command = await convertToCurl({
+      url: "https://yaak.app/it's",
+      method: "POST",
+      bodyType: "application/json",
+      body: { text: `{"note":"don't stop"}` },
+      headers: [{ name: "X-Note", value: "it's fine" }],
+    });
+
+    expect(command).toEqual(
+      [
+        `curl -X POST 'https://yaak.app/it'\\''s'`,
+        `--header 'X-Note: it'\\''s fine'`,
+        `--data '{"note":"don'\\''t stop"}'`,
+      ].join(" \\\n  "),
+    );
+  });
+
+  test("Quotes a file form field so its type suffix survives", async () => {
+    // A bare `;` separates commands, so an unquoted `f=@x.png;type=image/png`
+    // reaches curl as `f=@x.png` and the rest runs as its own command.
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        method: "POST",
+        bodyType: "multipart/form-data",
+        body: { form: [{ name: "f", file: "/my files/a.png", contentType: "image/png" }] },
+      }),
+    ).toEqual(
+      [`curl -X POST 'https://yaak.app'`, `--form 'f=@/my files/a.png;type=image/png'`].join(
+        " \\\n  ",
+      ),
+    );
+  });
+  test("Exports multi-line JSON body", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        method: "POST",
+        bodyType: "application/json",
+        body: {
+          text: `{"foo":"bar",\n"baz":"qux"}`,
+        },
+        headers: [{ name: "Content-Type", value: "application/json" }],
+      }),
+    ).toEqual(
+      [
+        `curl -X POST 'https://yaak.app'`,
+        `--header 'Content-Type: application/json'`,
+        `--data '{"foo":"bar",\n"baz":"qux"}'`,
+      ].join(" \\\n  "),
+    );
+  });
+
+  test("Exports headers", async () => {
+    expect(
+      await convertToCurl({
+        headers: [
+          { name: "a", value: "aaa" },
+          { name: "b", value: "bbb", enabled: true },
+          { name: "c", value: "ccc", enabled: false },
+        ],
+      }),
+    ).toEqual([`curl ''`, `--header 'a: aaa'`, `--header 'b: bbb'`].join(" \\\n  "));
+  });
+
+  test("Basic auth", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "basic",
+        authentication: {
+          username: "user",
+          password: "pass",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app'`, `--user 'user:pass'`].join(" \\\n  "));
+  });
+
+  test("Basic auth disabled", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "basic",
+        authentication: {
+          disabled: true,
+          username: "user",
+          password: "pass",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app'`].join(" \\\n  "));
+  });
+
+  test("Broken basic auth", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "basic",
+        authentication: {},
+      }),
+    ).toEqual([`curl 'https://yaak.app'`, `--user ':'`].join(" \\\n  "));
+  });
+
+  test("Digest auth", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "digest",
+        authentication: {
+          username: "user",
+          password: "pass",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app'`, `--digest --user 'user:pass'`].join(" \\\n  "));
+  });
+
+  test("Bearer auth", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "bearer",
+        authentication: {
+          token: "tok",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app'`, `--header 'Authorization: Bearer tok'`].join(" \\\n  "));
+  });
+
+  test("Bearer auth with custom prefix", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "bearer",
+        authentication: {
+          token: "abc123",
+          prefix: "Token",
+        },
+      }),
+    ).toEqual(
+      [`curl 'https://yaak.app'`, `--header 'Authorization: Token abc123'`].join(" \\\n  "),
+    );
+  });
+
+  test("Bearer auth with empty prefix", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "bearer",
+        authentication: {
+          token: "xyz789",
+          prefix: "",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app'`, `--header 'Authorization: xyz789'`].join(" \\\n  "));
+  });
+
+  test("Broken bearer auth", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "bearer",
+        authentication: {
+          username: "user",
+          password: "pass",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app'`, `--header 'Authorization: Bearer'`].join(" \\\n  "));
+  });
+
+  test("AWS v4 auth", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "auth-aws-sig-v4",
+        authentication: {
+          accessKeyId: "ak",
+          secretAccessKey: "sk",
+          sessionToken: "",
+          region: "us-east-1",
+          service: "s3",
+        },
+      }),
+    ).toEqual(
+      [`curl 'https://yaak.app'`, "--aws-sigv4 aws:amz:us-east-1:s3", `--user 'ak:sk'`].join(
+        " \\\n  ",
+      ),
+    );
+  });
+
+  test("AWS v4 auth with session", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "auth-aws-sig-v4",
+        authentication: {
+          accessKeyId: "ak",
+          secretAccessKey: "sk",
+          sessionToken: "st",
+          region: "us-east-1",
+          service: "s3",
+        },
+      }),
+    ).toEqual(
+      [
+        `curl 'https://yaak.app'`,
+        "--aws-sigv4 aws:amz:us-east-1:s3",
+        `--user 'ak:sk'`,
+        `--header 'X-Amz-Security-Token: st'`,
+      ].join(" \\\n  "),
+    );
+  });
+
+  test("API key auth header", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "apikey",
+        authentication: {
+          location: "header",
+          key: "X-Header",
+          value: "my-token",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app'`, `--header 'X-Header: my-token'`].join(" \\\n  "));
+  });
+
+  test("API key auth header query", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app?hi=there",
+        urlParameters: [{ name: "param", value: "hi" }],
+        authenticationType: "apikey",
+        authentication: {
+          location: "query",
+          key: "foo",
+          value: "bar",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app?hi=there¶m=hi&foo=bar'`].join(" \\\n  "));
+  });
+
+  test("API key auth header query with params", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        urlParameters: [{ name: "param", value: "hi" }],
+        authenticationType: "apikey",
+        authentication: {
+          location: "query",
+          key: "foo",
+          value: "bar",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app?param=hi&foo=bar'`].join(" \\\n  "));
+  });
+
+  test("API key auth header default", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "apikey",
+        authentication: {
+          location: "header",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app'`, `--header 'X-Api-Key: '`].join(" \\\n  "));
+  });
+
+  test("API key auth query", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        authenticationType: "apikey",
+        authentication: {
+          location: "query",
+          key: "foo",
+          value: "bar-baz",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app?foo=bar-baz'`].join(" \\\n  "));
+  });
+
+  test("API key auth query with existing", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app?foo=bar&baz=qux",
+        authenticationType: "apikey",
+        authentication: {
+          location: "query",
+          key: "hi",
+          value: "there",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app?foo=bar&baz=qux&hi=there'`].join(" \\\n  "));
+  });
+
+  test("API key auth query default", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app?foo=bar&baz=qux",
+        authenticationType: "apikey",
+        authentication: {
+          location: "query",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app?foo=bar&baz=qux&token='`].join(" \\\n  "));
+  });
+
+  test("Stale body data", async () => {
+    expect(
+      await convertToCurl({
+        url: "https://yaak.app",
+        bodyType: "none",
+        body: {
+          text: "ignore me",
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app'`].join(" \\\n  "));
+  });
+});
diff --git a/plugins/action-copy-curl/tsconfig.json b/plugins/action-copy-curl/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/action-copy-curl/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/action-copy-grpcurl/README.md b/plugins/action-copy-grpcurl/README.md
new file mode 100644
index 0000000..23355f7
--- /dev/null
+++ b/plugins/action-copy-grpcurl/README.md
@@ -0,0 +1,75 @@
+# Copy as gRPCurl
+
+An HTTP request action plugin that converts gRPC requests
+into [gRPCurl](https://github.com/fullstorydev/grpcurl) commands, enabling easy sharing,
+debugging, and execution of gRPC calls outside Yaak.
+
+![Screenshot of context menu](screenshot.png)
+
+## Overview
+
+This plugin adds a "Copy as gRPCurl" action to gRPC requests, converting any gRPC request
+into its equivalent executable command. This is useful for debugging gRPC services,
+sharing requests with team members, or executing gRPC calls in terminal environments where
+`grpcurl` is available.
+
+## How It Works
+
+The plugin analyzes your gRPC request configuration and generates a properly formatted
+`grpcurl` command that includes:
+
+- gRPC service and method names
+- Server address and port
+- Request message data (JSON format)
+- Metadata (headers)
+- Authentication credentials
+- Protocol buffer definitions
+
+## Usage
+
+1. Configure a gRPC request as usual in Yaak
+2. Right-click on the request sidebar item
+3. Select "Copy as gRPCurl" from the available actions
+4. The command is copied to your clipboard
+5. Share or execute the command
+
+## Generated gRPCurl Examples
+
+### Simple Unary Call
+
+```bash
+grpcurl -plaintext \
+  -d '{"name": "John Doe"}' \
+  localhost:9090 \
+  user.UserService/GetUser
+```
+
+### Call with Metadata
+
+```bash
+grpcurl -plaintext \
+  -H "authorization: Bearer my-token" \
+  -H "x-api-version: v1" \
+  -d '{"user_id": "12345"}' \
+  api.example.com:443 \
+  user.UserService/GetUserProfile
+```
+
+### Call with TLS
+
+```bash
+grpcurl \
+  -d '{"query": "search term"}' \
+  secure-api.example.com:443 \
+  search.SearchService/Search
+```
+
+### Call with Proto Files
+
+```bash
+grpcurl -import-path /path/to/protos \
+  -proto /other/path/to/user.proto \
+  -d '{"email": "user@example.com"}' \
+  localhost:9090 \
+  user.UserService/CreateUser
+```
diff --git a/plugins/action-copy-grpcurl/package.json b/plugins/action-copy-grpcurl/package.json
new file mode 100644
index 0000000..332773f
--- /dev/null
+++ b/plugins/action-copy-grpcurl/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@yaak/action-copy-grpcurl",
+  "displayName": "Copy as gRPCurl",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Copy gRPC request as a grpcurl command",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/action-copy-grpcurl"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  }
+}
diff --git a/plugins/action-copy-grpcurl/src/index.ts b/plugins/action-copy-grpcurl/src/index.ts
new file mode 100644
index 0000000..3223298
--- /dev/null
+++ b/plugins/action-copy-grpcurl/src/index.ts
@@ -0,0 +1,158 @@
+import path from "node:path";
+import type { GrpcRequest, PluginDefinition } from "@yaakapp/api";
+
+const NEWLINE = "\\\n ";
+
+export const plugin: PluginDefinition = {
+  grpcRequestActions: [
+    {
+      label: "Copy as gRPCurl",
+      icon: "copy",
+      async onSelect(ctx, args) {
+        const rendered_request = await ctx.grpcRequest.render({
+          grpcRequest: args.grpcRequest,
+          purpose: "send",
+        });
+        const data = await convert(rendered_request, args.protoFiles);
+        await ctx.clipboard.copyText(data);
+        await ctx.toast.show({
+          message: "Command copied to clipboard",
+          icon: "copy",
+          color: "success",
+        });
+      },
+    },
+  ],
+};
+
+export async function convert(request: Partial<GrpcRequest>, allProtoFiles: string[]) {
+  const xs = ["grpcurl"];
+
+  if (request.url?.startsWith("http://")) {
+    xs.push("-plaintext");
+  }
+
+  const protoIncludes = allProtoFiles.filter((f) => !f.endsWith(".proto"));
+  const protoFiles = allProtoFiles.filter((f) => f.endsWith(".proto"));
+
+  const inferredIncludes = new Set<string>();
+  for (const f of protoFiles) {
+    const protoDir = findParentProtoDir(f);
+    if (protoDir) {
+      inferredIncludes.add(protoDir);
+    } else {
+      inferredIncludes.add(path.posix.join(f, ".."));
+      inferredIncludes.add(path.posix.join(f, "..", ".."));
+    }
+  }
+
+  for (const f of protoIncludes) {
+    xs.push("-import-path", quote(f));
+    xs.push(NEWLINE);
+  }
+
+  for (const f of inferredIncludes.values()) {
+    xs.push("-import-path", quote(f));
+    xs.push(NEWLINE);
+  }
+
+  for (const f of protoFiles) {
+    xs.push("-proto", quote(f));
+    xs.push(NEWLINE);
+  }
+
+  // Add headers
+  for (const h of (request.metadata ?? []).filter(onlyEnabled)) {
+    xs.push("-H", quote(`${h.name}: ${h.value}`));
+    xs.push(NEWLINE);
+  }
+
+  // Add basic authentication
+  if (request.authentication?.disabled !== true) {
+    if (request.authenticationType === "basic") {
+      const user = request.authentication?.username ?? "";
+      const pass = request.authentication?.password ?? "";
+      const encoded = btoa(`${user}:${pass}`);
+      xs.push("-H", quote(`Authorization: Basic ${encoded}`));
+      xs.push(NEWLINE);
+    } else if (request.authenticationType === "bearer") {
+      // Add bearer authentication
+      xs.push("-H", quote(`Authorization: Bearer ${request.authentication?.token ?? ""}`));
+      xs.push(NEWLINE);
+    } else if (request.authenticationType === "apikey") {
+      if (request.authentication?.location === "query") {
+        const sep = request.url?.includes("?") ? "&" : "?";
+        request.url = [
+          request.url,
+          sep,
+          encodeURIComponent(request.authentication?.key ?? "token"),
+          "=",
+          encodeURIComponent(request.authentication?.value ?? ""),
+        ].join("");
+      } else {
+        xs.push(
+          "-H",
+          quote(
+            `${request.authentication?.key ?? "X-Api-Key"}: ${request.authentication?.value ?? ""}`,
+          ),
+        );
+      }
+      xs.push(NEWLINE);
+    }
+  }
+
+  // Add form params
+  if (request.message) {
+    xs.push("-d", quote(request.message));
+    xs.push(NEWLINE);
+  }
+
+  // Add the server address
+  if (request.url) {
+    const server = request.url.replace(/^https?:\/\//, ""); // remove protocol
+    xs.push(server);
+    xs.push(NEWLINE);
+  }
+
+  // Add service + method
+  if (request.service && request.method) {
+    xs.push(`${request.service}/${request.method}`);
+    xs.push(NEWLINE);
+  }
+
+  // Remove trailing newline
+  if (xs[xs.length - 1] === NEWLINE) {
+    xs.splice(xs.length - 1, 1);
+  }
+
+  return xs.join(" ");
+}
+
+function quote(arg: string): string {
+  // A single-quoted POSIX string takes no escapes, so `\'` does not close it:
+  // the string ends one character early and the rest of the command is left
+  // dangling. Step out of the quotes, emit an escaped quote, step back in.
+  const escaped = arg.replace(/'/g, `'\\''`);
+  return `'${escaped}'`;
+}
+
+function onlyEnabled(v: { name?: string; enabled?: boolean }): boolean {
+  return v.enabled !== false && !!v.name;
+}
+
+function findParentProtoDir(startPath: string): string | null {
+  let dir = path.resolve(startPath);
+
+  while (true) {
+    if (path.basename(dir) === "proto") {
+      return dir;
+    }
+
+    const parent = path.dirname(dir);
+    if (parent === dir) {
+      return null; // Reached root
+    }
+
+    dir = parent;
+  }
+}
diff --git a/plugins/action-copy-grpcurl/tests/index.test.ts b/plugins/action-copy-grpcurl/tests/index.test.ts
new file mode 100644
index 0000000..9cec88c
--- /dev/null
+++ b/plugins/action-copy-grpcurl/tests/index.test.ts
@@ -0,0 +1,195 @@
+import { describe, expect, test } from "vite-plus/test";
+import { convert } from "../src";
+
+describe("exporter-curl", () => {
+  test("Simple example", async () => {
+    expect(
+      await convert(
+        {
+          url: "https://yaak.app",
+        },
+        [],
+      ),
+    ).toEqual(["grpcurl yaak.app"].join(" \\\n  "));
+  });
+  test("Basic metadata", async () => {
+    expect(
+      await convert(
+        {
+          url: "https://yaak.app",
+          metadata: [
+            { name: "aaa", value: "AAA" },
+            { enabled: true, name: "bbb", value: "BBB" },
+            { enabled: false, name: "disabled", value: "ddd" },
+          ],
+        },
+        [],
+      ),
+    ).toEqual([`grpcurl -H 'aaa: AAA'`, `-H 'bbb: BBB'`, "yaak.app"].join(" \\\n  "));
+  });
+  test("Basic auth", async () => {
+    expect(
+      await convert(
+        {
+          url: "https://yaak.app",
+          authenticationType: "basic",
+          authentication: {
+            username: "user",
+            password: "pass",
+          },
+        },
+        [],
+      ),
+    ).toEqual([`grpcurl -H 'Authorization: Basic dXNlcjpwYXNz'`, "yaak.app"].join(" \\\n  "));
+  });
+
+  test("API key auth", async () => {
+    expect(
+      await convert(
+        {
+          url: "https://yaak.app",
+          authenticationType: "apikey",
+          authentication: {
+            key: "X-Token",
+            value: "tok",
+          },
+        },
+        [],
+      ),
+    ).toEqual([`grpcurl -H 'X-Token: tok'`, "yaak.app"].join(" \\\n  "));
+  });
+
+  test("API key auth", async () => {
+    expect(
+      await convert(
+        {
+          url: "https://yaak.app",
+          authenticationType: "apikey",
+          authentication: {
+            location: "query",
+            key: "token",
+            value: "tok 1",
+          },
+        },
+        [],
+      ),
+    ).toEqual(["grpcurl", "yaak.app?token=tok%201"].join(" \\\n  "));
+  });
+
+  test("Single proto file", async () => {
+    expect(await convert({ url: "https://yaak.app" }, ["/foo/bar/baz.proto"])).toEqual(
+      [
+        `grpcurl -import-path '/foo/bar'`,
+        `-import-path '/foo'`,
+        `-proto '/foo/bar/baz.proto'`,
+        "yaak.app",
+      ].join(" \\\n  "),
+    );
+  });
+  test("Multiple proto files, same dir", async () => {
+    expect(
+      await convert({ url: "https://yaak.app" }, ["/foo/bar/aaa.proto", "/foo/bar/bbb.proto"]),
+    ).toEqual(
+      [
+        `grpcurl -import-path '/foo/bar'`,
+        `-import-path '/foo'`,
+        `-proto '/foo/bar/aaa.proto'`,
+        `-proto '/foo/bar/bbb.proto'`,
+        "yaak.app",
+      ].join(" \\\n  "),
+    );
+  });
+  test("Multiple proto files, different dir", async () => {
+    expect(
+      await convert({ url: "https://yaak.app" }, ["/aaa/bbb/ccc.proto", "/xxx/yyy/zzz.proto"]),
+    ).toEqual(
+      [
+        `grpcurl -import-path '/aaa/bbb'`,
+        `-import-path '/aaa'`,
+        `-import-path '/xxx/yyy'`,
+        `-import-path '/xxx'`,
+        `-proto '/aaa/bbb/ccc.proto'`,
+        `-proto '/xxx/yyy/zzz.proto'`,
+        "yaak.app",
+      ].join(" \\\n  "),
+    );
+  });
+  test("Single include dir", async () => {
+    expect(await convert({ url: "https://yaak.app" }, ["/aaa/bbb"])).toEqual(
+      [`grpcurl -import-path '/aaa/bbb'`, "yaak.app"].join(" \\\n  "),
+    );
+  });
+  test("Multiple include dir", async () => {
+    expect(await convert({ url: "https://yaak.app" }, ["/aaa/bbb", "/xxx/yyy"])).toEqual(
+      [`grpcurl -import-path '/aaa/bbb'`, `-import-path '/xxx/yyy'`, "yaak.app"].join(" \\\n  "),
+    );
+  });
+  test("Mixed proto and dirs", async () => {
+    expect(
+      await convert({ url: "https://yaak.app" }, ["/aaa/bbb", "/xxx/yyy", "/foo/bar.proto"]),
+    ).toEqual(
+      [
+        `grpcurl -import-path '/aaa/bbb'`,
+        `-import-path '/xxx/yyy'`,
+        `-import-path '/foo'`,
+        `-import-path '/'`,
+        `-proto '/foo/bar.proto'`,
+        "yaak.app",
+      ].join(" \\\n  "),
+    );
+  });
+  test("Sends data", async () => {
+    expect(
+      await convert(
+        {
+          url: "https://yaak.app",
+          message: JSON.stringify({ foo: "bar", baz: 1.0 }, null, 2),
+        },
+        ["/foo.proto"],
+      ),
+    ).toEqual(
+      [
+        `grpcurl -import-path '/'`,
+        `-proto '/foo.proto'`,
+        `-d '{\n  "foo": "bar",\n  "baz": 1\n}'`,
+        "yaak.app",
+      ].join(" \\\n  "),
+    );
+  });
+
+  test("Sends data with unresolved template tags", async () => {
+    expect(
+      await convert(
+        {
+          url: "https://yaak.app",
+          message: '{"timestamp": ${[ faker "timestamp" ]}, "foo": "bar"}',
+        },
+        ["/foo.proto"],
+      ),
+    ).toEqual(
+      [
+        `grpcurl -import-path '/'`,
+        `-proto '/foo.proto'`,
+        `-d '{"timestamp": \${[ faker "timestamp" ]}, "foo": "bar"}'`,
+        "yaak.app",
+      ].join(" \\\n  "),
+    );
+  });
+
+  test("Quotes an apostrophe so the command still parses", async () => {
+    // POSIX single quotes take no escapes: `\'` ends the string one
+    // character early and leaves the rest of the command dangling.
+    const command = await convert(
+      {
+        url: "https://yaak.app",
+        service: "Service",
+        method: "Method",
+        message: `{"note":"don't stop"}`,
+        metadata: [{ name: "x-note", value: "it's fine" }],
+      },
+      [],
+    );
+    expect(command).toContain(`'{"note":"don'\\''t stop"}'`);
+    expect(command).toContain(`'x-note: it'\\''s fine'`);
+  });
+});
diff --git a/plugins/action-copy-grpcurl/tsconfig.json b/plugins/action-copy-grpcurl/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/action-copy-grpcurl/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/action-send-folder/package.json b/plugins/action-send-folder/package.json
new file mode 100644
index 0000000..34d4dd7
--- /dev/null
+++ b/plugins/action-send-folder/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@yaak/action-send-folder",
+  "displayName": "Send All",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Send all HTTP requests in a folder sequentially in tree order",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/action-send-folder"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/action-send-folder/src/index.ts b/plugins/action-send-folder/src/index.ts
new file mode 100644
index 0000000..05ffae8
--- /dev/null
+++ b/plugins/action-send-folder/src/index.ts
@@ -0,0 +1,99 @@
+import type { PluginDefinition } from "@yaakapp/api";
+
+export const plugin: PluginDefinition = {
+  folderActions: [
+    {
+      label: "Send All",
+      icon: "send_horizontal",
+      async onSelect(ctx, args) {
+        const targetFolder = args.folder;
+
+        // Get all folders and HTTP requests
+        const [allFolders, allRequests] = await Promise.all([
+          ctx.folder.list(),
+          ctx.httpRequest.list(),
+        ]);
+
+        // Build the send order to match tree ordering:
+        // sort siblings by sortPriority then updatedAt, and traverse folders depth-first.
+        const compareByOrder = (
+          a: Pick<(typeof allFolders)[number], "sortPriority" | "updatedAt">,
+          b: Pick<(typeof allFolders)[number], "sortPriority" | "updatedAt">,
+        ) => {
+          if (a.sortPriority === b.sortPriority) {
+            return a.updatedAt > b.updatedAt ? 1 : -1;
+          }
+          return a.sortPriority - b.sortPriority;
+        };
+
+        const childrenByFolderId = new Map<
+          string,
+          Array<(typeof allFolders)[number] | (typeof allRequests)[number]>
+        >();
+        for (const folder of allFolders) {
+          if (folder.folderId == null) continue;
+          const children = childrenByFolderId.get(folder.folderId) ?? [];
+          children.push(folder);
+          childrenByFolderId.set(folder.folderId, children);
+        }
+        for (const request of allRequests) {
+          if (request.folderId == null) continue;
+          const children = childrenByFolderId.get(request.folderId) ?? [];
+          children.push(request);
+          childrenByFolderId.set(request.folderId, children);
+        }
+
+        const requestsToSend: typeof allRequests = [];
+        const collectRequests = (folderId: string) => {
+          const children = (childrenByFolderId.get(folderId) ?? []).slice().sort(compareByOrder);
+          for (const child of children) {
+            if (child.model === "folder") {
+              collectRequests(child.id);
+            } else if (child.model === "http_request") {
+              requestsToSend.push(child);
+            }
+          }
+        };
+        collectRequests(targetFolder.id);
+
+        if (requestsToSend.length === 0) {
+          await ctx.toast.show({
+            message: "No requests in folder",
+            icon: "info",
+            color: "info",
+          });
+          return;
+        }
+
+        // Send requests sequentially in the calculated folder order.
+        let successCount = 0;
+        let errorCount = 0;
+
+        for (const request of requestsToSend) {
+          try {
+            await ctx.httpRequest.send({ httpRequest: request });
+            successCount++;
+          } catch (error) {
+            errorCount++;
+            console.error(`Failed to send request ${request.id}:`, error);
+          }
+        }
+
+        // Show summary toast
+        if (errorCount === 0) {
+          await ctx.toast.show({
+            message: `Sent ${successCount} request${successCount !== 1 ? "s" : ""}`,
+            icon: "send_horizontal",
+            color: "success",
+          });
+        } else {
+          await ctx.toast.show({
+            message: `Sent ${successCount}, failed ${errorCount}`,
+            icon: "alert_triangle",
+            color: "warning",
+          });
+        }
+      },
+    },
+  ],
+};
diff --git a/plugins/action-send-folder/tsconfig.json b/plugins/action-send-folder/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/action-send-folder/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/auth-apikey/package.json b/plugins/auth-apikey/package.json
new file mode 100644
index 0000000..9423be0
--- /dev/null
+++ b/plugins/auth-apikey/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@yaak/auth-apikey",
+  "displayName": "API Key Authentication",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Authenticate requests using an API key",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-apikey"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/auth-apikey/src/index.ts b/plugins/auth-apikey/src/index.ts
new file mode 100644
index 0000000..bc8e415
--- /dev/null
+++ b/plugins/auth-apikey/src/index.ts
@@ -0,0 +1,54 @@
+import type { PluginDefinition } from "@yaakapp/api";
+
+export const plugin: PluginDefinition = {
+  authentication: {
+    name: "apikey",
+    label: "API Key",
+    shortLabel: "API Key",
+    args: [
+      {
+        type: "select",
+        name: "location",
+        label: "Behavior",
+        defaultValue: "header",
+        options: [
+          { label: "Insert Header", value: "header" },
+          { label: "Append Query Parameter", value: "query" },
+        ],
+      },
+      {
+        type: "text",
+        name: "key",
+        label: "Key",
+        dynamic: (_ctx, { values }) => {
+          return values.location === "query"
+            ? {
+                label: "Parameter Name",
+                description: "The name of the query parameter to add to the request",
+              }
+            : {
+                label: "Header Name",
+                description: "The name of the header to add to the request",
+              };
+        },
+      },
+      {
+        type: "text",
+        name: "value",
+        label: "API Key",
+        optional: true,
+        password: true,
+      },
+    ],
+    async onApply(_ctx, { values }) {
+      const key = String(values.key ?? "");
+      const value = String(values.value ?? "");
+      const location = String(values.location);
+
+      if (location === "query") {
+        return { setQueryParameters: [{ name: key, value }] };
+      }
+      return { setHeaders: [{ name: key, value }] };
+    },
+  },
+};
diff --git a/plugins/auth-apikey/tsconfig.json b/plugins/auth-apikey/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/auth-apikey/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/auth-aws/README.md b/plugins/auth-aws/README.md
new file mode 100644
index 0000000..df62698
--- /dev/null
+++ b/plugins/auth-aws/README.md
@@ -0,0 +1,49 @@
+# AWS Signature Version 4 Auth
+
+A plugin for authenticating AWS-compatible requests using the
+[AWS Signature Version 4 signing process](https://docs.aws.amazon.com/general/latest/gr/signature-version-4.html).  
+This enables secure, signed requests to AWS services (or any S3-compatible APIs like
+Cloudflare R2).
+
+![Screenshot of AWS SigV4 UI](screenshot.png)
+
+## Overview
+
+This plugin provides AWS Signature authentication for API requests in Yaak. SigV4 is used
+by nearly all AWS APIs to verify the authenticity and integrity of requests using
+cryptographic signatures.
+
+With this plugin, you can securely sign requests to AWS services such as S3, STS, Lambda,
+API Gateway, DynamoDB, and more. You can also authenticate against S3-compatible services
+like **Cloudflare R2**, **MinIO**, or **Wasabi**.
+
+## How AWS Signature Version 4 Works
+
+SigV4 signs requests by creating a hash of key request components (method, URL, headers,
+and optionally the payload) using your AWS credentials. The resulting HMAC signature is
+added in the `Authorization` header along with credential scope metadata.
+
+Example header:
+
+```
+Authorization: AWS4-HMAC-SHA256 Credential=AKIA…/20251011/us-east-1/s3/aws4_request, SignedHeaders=host;x-amz-date, Signature=abcdef123456…
+```
+
+Each request must include a timestamp (`X-Amz-Date`) and may include a session token if
+using temporary credentials.
+
+## Configuration
+
+The plugin presents the following fields:
+
+- **Access Key ID** – Your AWS access key identifier
+- **Secret Access Key** – The secret associated with the access key
+- **Session Token** _(optional)_ – Used for temporary or assumed-role credentials (treated as secret)
+- **Region** – AWS region (e.g., `us-east-1`)
+- **Service** – AWS service identifier (e.g., `sts`, `s3`, `execute-api`)
+
+## Usage
+
+1. Configure a request, folder, or workspace to use **AWS SigV4 Authentication**
+2. Enter your AWS credentials and target service/region
+3. The plugin will automatically sign outgoing requests with valid SigV4 headers
diff --git a/plugins/auth-aws/package.json b/plugins/auth-aws/package.json
new file mode 100644
index 0000000..62983c9
--- /dev/null
+++ b/plugins/auth-aws/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@yaak/auth-aws",
+  "displayName": "AWS SigV4",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Authenticate requests using AWS SigV4 signing",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-aws"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "aws4": "^1.13.2"
+  },
+  "devDependencies": {
+    "@types/aws4": "^1.11.6"
+  }
+}
diff --git a/plugins/auth-aws/src/index.ts b/plugins/auth-aws/src/index.ts
new file mode 100644
index 0000000..5d5560b
--- /dev/null
+++ b/plugins/auth-aws/src/index.ts
@@ -0,0 +1,89 @@
+import { URL } from "node:url";
+import type { PluginDefinition } from "@yaakapp/api";
+import type { CallHttpAuthenticationResponse } from "@yaakapp-internal/plugins";
+import type { Request } from "aws4";
+import aws4 from "aws4";
+
+export const plugin: PluginDefinition = {
+  authentication: {
+    name: "awsv4",
+    label: "AWS Signature",
+    shortLabel: "AWS v4",
+    args: [
+      { name: "accessKeyId", label: "Access Key ID", type: "text", password: true },
+      {
+        name: "secretAccessKey",
+        label: "Secret Access Key",
+        type: "text",
+        password: true,
+      },
+      {
+        name: "service",
+        label: "Service Name",
+        type: "text",
+        defaultValue: "sts",
+        placeholder: "sts",
+        description: "The service that is receiving the request (sts, s3, sqs, ...)",
+      },
+      {
+        name: "region",
+        label: "Region",
+        type: "text",
+        placeholder: "us-east-1",
+        description: "The region that is receiving the request (defaults to us-east-1)",
+        optional: true,
+      },
+      {
+        name: "sessionToken",
+        label: "Session Token",
+        type: "text",
+        password: true,
+        optional: true,
+        description: "Only required if you are using temporary credentials",
+      },
+    ],
+    onApply(_ctx, { values, ...args }): CallHttpAuthenticationResponse {
+      const accessKeyId = String(values.accessKeyId || "");
+      const secretAccessKey = String(values.secretAccessKey || "");
+      const sessionToken = String(values.sessionToken || "") || undefined;
+
+      const url = new URL(args.url);
+
+      const headers: NonNullable<Request["headers"]> = {};
+      for (const headerName of ["content-type", "host", "x-amz-date", "x-amz-security-token"]) {
+        const v = args.headers.find((h) => h.name.toLowerCase() === headerName);
+        if (v != null) {
+          headers[headerName] = v.value;
+        }
+      }
+
+      const signature = aws4.sign(
+        {
+          host: url.host,
+          method: args.method,
+          path: url.pathname + (url.search || ""),
+          service: String(values.service || "sts"),
+          region: values.region ? String(values.region) : undefined,
+          headers,
+          body: args.body ?? undefined,
+          doNotEncodePath: true,
+        },
+        {
+          accessKeyId,
+          secretAccessKey,
+          sessionToken,
+        },
+      );
+
+      if (signature.headers == null) {
+        return {};
+      }
+
+      return {
+        setHeaders: Object.entries(signature.headers)
+          .filter(([name]) => name !== "content-type") // Don't add this because we already have it
+          .map(([name, value]) => ({ name, value: String(value || "") })),
+      };
+    },
+  },
+};
diff --git a/plugins/auth-aws/tsconfig.json b/plugins/auth-aws/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/auth-aws/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/auth-basic/README.md b/plugins/auth-basic/README.md
new file mode 100644
index 0000000..438e2b2
--- /dev/null
+++ b/plugins/auth-basic/README.md
@@ -0,0 +1,44 @@
+# Basic Authentication
+
+A simple Basic Authentication plugin that implements HTTP Basic Auth according
+to [RFC 7617](https://datatracker.ietf.org/doc/html/rfc7617), enabling secure
+authentication with username and password credentials.
+
+![Screenshot of basic auth UI](screenshot.png)
+
+## Overview
+
+This plugin provides HTTP Basic Authentication support for API requests in Yaak. Basic
+Auth is one of the most widely supported authentication methods, making it ideal for APIs
+that require simple username/password authentication without the complexity of OAuth
+flows.
+
+## How Basic Authentication Works
+
+Basic Authentication encodes your username and password credentials using Base64 encoding
+and sends them in the `Authorization` header with each request. The format is:
+
+```
+Authorization: Basic <base64-encoded-credentials>
+```
+
+Where `<base64-encoded-credentials>` is the Base64 encoding of `username:password`.
+
+## Configuration
+
+The plugin presents two fields:
+
+- **Username**: Username or user identifier
+- **Password**: Password or authentication token
+
+## Usage
+
+1. Configure the request, folder, or workspace to use Basic Authentication
+2. Enter your username and password in the authentication configuration
+3. The plugin will automatically add the proper `Authorization` header to your requests
+
+## Troubleshooting
+
+- **401 Unauthorized**: Verify your username and password are correct
+- **403 Forbidden**: Check if your account has the necessary permissions
+- **Connection Issues**: Ensure you're using HTTPS for secure transmission
diff --git a/plugins/auth-basic/package.json b/plugins/auth-basic/package.json
new file mode 100644
index 0000000..3b11780
--- /dev/null
+++ b/plugins/auth-basic/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@yaak/auth-basic",
+  "displayName": "Basic Authentication",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Authenticate requests using Basic Auth",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-basic"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  }
+}
diff --git a/plugins/auth-basic/src/index.ts b/plugins/auth-basic/src/index.ts
new file mode 100644
index 0000000..63ac213
--- /dev/null
+++ b/plugins/auth-basic/src/index.ts
@@ -0,0 +1,30 @@
+import type { PluginDefinition } from "@yaakapp/api";
+
+export const plugin: PluginDefinition = {
+  authentication: {
+    name: "basic",
+    label: "Basic Auth",
+    shortLabel: "Basic",
+    args: [
+      {
+        type: "text",
+        name: "username",
+        label: "Username",
+        optional: true,
+      },
+      {
+        type: "text",
+        name: "password",
+        label: "Password",
+        optional: true,
+        password: true,
+      },
+    ],
+    async onApply(_ctx, { values }) {
+      const username = values.username ?? "";
+      const password = values.password ?? "";
+      const value = `Basic ${Buffer.from(`${username}:${password}`).toString("base64")}`;
+      return { setHeaders: [{ name: "Authorization", value }] };
+    },
+  },
+};
diff --git a/plugins/auth-basic/tests/index.test.ts b/plugins/auth-basic/tests/index.test.ts
new file mode 100644
index 0000000..f56bf03
--- /dev/null
+++ b/plugins/auth-basic/tests/index.test.ts
@@ -0,0 +1,87 @@
+import type { Context } from "@yaakapp/api";
+import { describe, expect, test } from "vite-plus/test";
+import { plugin } from "../src";
+
+const ctx = {} as Context;
+
+describe("auth-basic", () => {
+  test("Both username and password", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { username: "user", password: "pass" },
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({
+      setHeaders: [
+        { name: "Authorization", value: `Basic ${Buffer.from("user:pass").toString("base64")}` },
+      ],
+    });
+  });
+
+  test("Empty password", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { username: "apikey", password: "" },
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({
+      setHeaders: [
+        { name: "Authorization", value: `Basic ${Buffer.from("apikey:").toString("base64")}` },
+      ],
+    });
+  });
+
+  test("Missing password (undefined)", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { username: "apikey" },
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({
+      setHeaders: [
+        { name: "Authorization", value: `Basic ${Buffer.from("apikey:").toString("base64")}` },
+      ],
+    });
+  });
+
+  test("Missing username (undefined)", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { password: "secret" },
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({
+      setHeaders: [
+        { name: "Authorization", value: `Basic ${Buffer.from(":secret").toString("base64")}` },
+      ],
+    });
+  });
+
+  test("No values (both undefined)", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: {},
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({
+      setHeaders: [
+        { name: "Authorization", value: `Basic ${Buffer.from(":").toString("base64")}` },
+      ],
+    });
+  });
+});
diff --git a/plugins/auth-basic/tsconfig.json b/plugins/auth-basic/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/auth-basic/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/auth-bearer/README.md b/plugins/auth-bearer/README.md
new file mode 100644
index 0000000..e936679
--- /dev/null
+++ b/plugins/auth-bearer/README.md
@@ -0,0 +1,47 @@
+# Bearer Token Authentication Plugin
+
+A Bearer Token authentication plugin for Yaak that
+implements [RFC 6750](https://datatracker.ietf.org/doc/html/rfc6750), enabling secure API
+access using tokens, API keys, and other bearer credentials.
+
+![Screenshot of bearer auth UI](screenshot.png)
+
+## Overview
+
+This plugin provides Bearer Token authentication support for your API requests in Yaak.
+Bearer Token authentication is widely used in modern APIs, especially those following REST
+principles and OAuth 2.0 standards. It's the preferred method for APIs that issue access
+tokens, API keys, or other bearer credentials.
+
+## How Bearer Token Authentication Works
+
+Bearer Token authentication sends your token in the `Authorization` header with each
+request using the Bearer scheme:
+
+```
+Authorization: Bearer <your-token>
+```
+
+The token is transmitted as-is without any additional encoding, making it simple and
+efficient for API authentication.
+
+## Configuration
+
+The plugin requires only one field:
+
+- **Token**: Your bearer token, access token, API key, or other credential
+- **Prefix**: The prefix to use for the Authorization header, which will be of the
+  format "<PREFIX> <TOKEN>"
+
+## Usage
+
+1. Configure the request, folder, or workspace to use Bearer Authentication
+2. Enter the token and optional prefix in the authentication configuration
+3. The plugin will automatically add the proper `Authorization` header to your requests
+
+## Troubleshooting
+
+- **401 Unauthorized**: Verify your token is valid and not expired
+- **403 Forbidden**: Check if your token has the necessary permissions/scopes
+- **Invalid Token Format**: Ensure you're using the complete token without truncation
+- **Token Expiration**: Refresh or regenerate expired tokens
diff --git a/plugins/auth-bearer/package.json b/plugins/auth-bearer/package.json
new file mode 100644
index 0000000..260bc07
--- /dev/null
+++ b/plugins/auth-bearer/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@yaak/auth-bearer",
+  "displayName": "Bearer Authentication",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Authenticate requests using bearer authentication",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-bearer"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  }
+}
diff --git a/plugins/auth-bearer/src/index.ts b/plugins/auth-bearer/src/index.ts
new file mode 100644
index 0000000..c1c893b
--- /dev/null
+++ b/plugins/auth-bearer/src/index.ts
@@ -0,0 +1,39 @@
+import type { PluginDefinition } from "@yaakapp/api";
+import type { CallHttpAuthenticationRequest } from "@yaakapp-internal/plugins";
+
+export const plugin: PluginDefinition = {
+  authentication: {
+    name: "bearer",
+    label: "Bearer Token",
+    shortLabel: "Bearer",
+    args: [
+      {
+        type: "text",
+        name: "token",
+        label: "Token",
+        optional: true,
+        password: true,
+      },
+      {
+        type: "text",
+        name: "prefix",
+        label: "Prefix",
+        optional: true,
+        placeholder: "",
+        defaultValue: "Bearer",
+        description:
+          'The prefix to use for the Authorization header, which will be of the format "<PREFIX> <TOKEN>".',
+      },
+    ],
+    async onApply(_ctx, { values }) {
+      return { setHeaders: [generateAuthorizationHeader(values)] };
+    },
+  },
+};
+
+function generateAuthorizationHeader(values: CallHttpAuthenticationRequest["values"]) {
+  const token = String(values.token || "").trim();
+  const prefix = String(values.prefix || "").trim();
+  const value = `${prefix} ${token}`.trim();
+  return { name: "Authorization", value };
+}
diff --git a/plugins/auth-bearer/tests/index.test.ts b/plugins/auth-bearer/tests/index.test.ts
new file mode 100644
index 0000000..a46653c
--- /dev/null
+++ b/plugins/auth-bearer/tests/index.test.ts
@@ -0,0 +1,67 @@
+import type { Context } from "@yaakapp/api";
+import { describe, expect, test } from "vite-plus/test";
+import { plugin } from "../src";
+
+const ctx = {} as Context;
+
+describe("auth-bearer", () => {
+  test("No values", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: {},
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({ setHeaders: [{ name: "Authorization", value: "" }] });
+  });
+
+  test("Only token", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { token: "my-token" },
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({ setHeaders: [{ name: "Authorization", value: "my-token" }] });
+  });
+
+  test("Only prefix", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { prefix: "Hello" },
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({ setHeaders: [{ name: "Authorization", value: "Hello" }] });
+  });
+
+  test("Prefix and token", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { prefix: "Hello", token: "my-token" },
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({ setHeaders: [{ name: "Authorization", value: "Hello my-token" }] });
+  });
+
+  test("Extra spaces", async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { prefix: "\t Hello  ", token: " \nmy-token  " },
+        headers: [],
+        url: "https://yaak.app",
+        method: "POST",
+        contextId: "111",
+      }),
+    ).toEqual({ setHeaders: [{ name: "Authorization", value: "Hello my-token" }] });
+  });
+});
diff --git a/plugins/auth-bearer/tsconfig.json b/plugins/auth-bearer/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/auth-bearer/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/auth-digest/README.md b/plugins/auth-digest/README.md
new file mode 100644
index 0000000..90dd01d
--- /dev/null
+++ b/plugins/auth-digest/README.md
@@ -0,0 +1,56 @@
+# Digest Authentication
+
+An HTTP Digest Authentication plugin that implements
+[RFC 7616](https://datatracker.ietf.org/doc/html/rfc7616), with fallback to the
+older [RFC 2617](https://datatracker.ietf.org/doc/html/rfc2617) and
+[RFC 2069](https://datatracker.ietf.org/doc/html/rfc2069) behaviour that many
+servers still speak.
+
+## Overview
+
+Digest Authentication proves you know a password without ever putting it on the
+wire. The server issues a one-time `nonce`, and the client answers with a hash
+over the credentials, the nonce and the request itself.
+
+## How it works
+
+Because the digest is computed over a server-issued nonce, the challenge has to
+be fetched before the real request can be signed. On each send, the plugin:
+
+1. Sends an unauthenticated probe of the same method and URL, carrying no
+   headers of its own so it cannot authorize anything
+2. Reads the `WWW-Authenticate: Digest …` challenge from the `401` response
+3. Computes the response hash and returns the `Authorization` header
+
+## Configuration
+
+- **Username**: Username or user identifier
+- **Password**: Password or authentication token
+- **Realm** (advanced): Only needed when the server offers more than one realm.
+  Leave it empty and the first challenge the server prefers is used.
+
+## Supported challenges
+
+| Feature    | Supported                                                     |
+| ---------- | ------------------------------------------------------------- |
+| Algorithm  | `MD5`, `MD5-sess`, `SHA-256`, `SHA-256-sess`                  |
+| `qop`      | `auth`, `auth-int`, and challenges that omit `qop` (RFC 2069) |
+| `opaque`   | Echoed back when the server sends one                         |
+| `userhash` | Declined with `userhash=false`                                |
+
+`auth-int` is used when the server offers it and Yaak has the request body in
+hand. Bodies that are streamed from disk or above the size Yaak passes to auth
+plugins aren't available to hash, so those requests use `auth` instead.
+
+Credentials are normalized to Unicode NFC before hashing, per RFC 7616 §4.
+Usernames outside ASCII are sent as an RFC 5987 extended value (`username*`).
+
+## Troubleshooting
+
+- **Server did not offer Digest authentication**: The endpoint answered the probe
+  with a different scheme, or with no `WWW-Authenticate` header at all. Check the
+  URL, and whether the endpoint requires auth in the first place.
+- **Unsupported Digest algorithm**: The server asked for an algorithm this plugin
+  doesn't implement, such as `SHA-512-256`.
+- **401 Unauthorized**: Verify the username and password. If the server offers
+  several realms, set the Realm field to the one your account belongs to.
diff --git a/plugins/auth-digest/package.json b/plugins/auth-digest/package.json
new file mode 100644
index 0000000..7eb09dc
--- /dev/null
+++ b/plugins/auth-digest/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@yaak/auth-digest",
+  "displayName": "Digest Authentication",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Authenticate requests using HTTP Digest authentication",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-digest"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  }
+}
diff --git a/plugins/auth-digest/src/digest.ts b/plugins/auth-digest/src/digest.ts
new file mode 100644
index 0000000..85d9aab
--- /dev/null
+++ b/plugins/auth-digest/src/digest.ts
@@ -0,0 +1,294 @@
+import { createHash } from "node:crypto";
+
+/** A single challenge from a `WWW-Authenticate` header. */
+export interface AuthChallenge {
+  scheme: string;
+  params: Record<string, string>;
+  /** The `token68` form (`NTLM TlRMTVNT…`), which carries no parameters. */
+  token68?: string;
+}
+
+export interface DigestChallenge {
+  realm: string;
+  nonce: string;
+  opaque?: string;
+  qop?: string[];
+  /** Echoed back verbatim, so it must keep the server's own spelling. */
+  algorithm?: string;
+  stale: boolean;
+  userhash: boolean;
+}
+
+export interface DigestAuthorizationOptions {
+  username: string;
+  password: string;
+  method: string;
+  uri: string;
+  body: string | null;
+  challenge: DigestChallenge;
+  cnonce: string;
+  nc: number;
+}
+
+const TOKEN = "[!#$%&'*+\\-.^_`|~0-9A-Za-z]+";
+const PARAM_RE = new RegExp(`^(${TOKEN})\\s*=\\s*([\\s\\S]*)$`);
+const SCHEME_RE = new RegExp(`^(${TOKEN})(?:\\s+([\\s\\S]*))?$`);
+const TOKEN68_RE = /^[A-Za-z0-9\-._~+/]+=*$/;
+
+const SUPPORTED_ALGORITHMS = ["MD5", "MD5-sess", "SHA-256", "SHA-256-sess"];
+const SUPPORTED_QOPS = ["auth", "auth-int"];
+
+/**
+ * Split a header value on commas that aren't inside a quoted string. Both
+ * challenges and their parameters are comma-separated, so this yields a flat
+ * list that {@link parseChallenges} re-groups.
+ */
+function splitOnCommas(value: string): string[] {
+  const parts: string[] = [];
+  let current = "";
+  let quoted = false;
+
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i]!;
+    if (quoted && char === "\\" && i + 1 < value.length) {
+      current += char + value[++i]!;
+    } else if (char === '"') {
+      quoted = !quoted;
+      current += char;
+    } else if (char === "," && !quoted) {
+      parts.push(current);
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  parts.push(current);
+
+  return parts.map((p) => p.trim()).filter((p) => p !== "");
+}
+
+function unquote(value: string): string {
+  const trimmed = value.trim();
+  if (trimmed.length >= 2 && trimmed.startsWith('"') && trimmed.endsWith('"')) {
+    return trimmed.slice(1, -1).replace(/\\([\s\S])/g, "$1");
+  }
+  return trimmed;
+}
+
+export function parseChallenges(headerValues: string[]): AuthChallenge[] {
+  const challenges: AuthChallenge[] = [];
+
+  for (const headerValue of headerValues) {
+    let current: AuthChallenge | null = null;
+
+    for (const part of splitOnCommas(headerValue)) {
+      const param = PARAM_RE.exec(part);
+      if (param != null && current != null) {
+        current.params[param[1]!.toLowerCase()] = unquote(param[2]!);
+        continue;
+      }
+
+      const scheme = SCHEME_RE.exec(part);
+      if (scheme == null) continue;
+
+      current = { scheme: scheme[1]!, params: {} };
+      challenges.push(current);
+
+      const rest = scheme[2]?.trim();
+      if (rest == null || rest === "") continue;
+
+      if (TOKEN68_RE.test(rest)) {
+        current.token68 = rest;
+        continue;
+      }
+
+      const firstParam = PARAM_RE.exec(rest);
+      if (firstParam != null) {
+        current.params[firstParam[1]!.toLowerCase()] = unquote(firstParam[2]!);
+      }
+    }
+  }
+
+  return challenges;
+}
+
+export function toDigestChallenge(params: Record<string, string>): DigestChallenge {
+  const qop = params.qop
+    ?.split(",")
+    .map((v) => v.trim().toLowerCase())
+    .filter(Boolean);
+
+  return {
+    realm: params.realm ?? "",
+    nonce: params.nonce ?? "",
+    opaque: params.opaque,
+    qop: qop == null || qop.length === 0 ? undefined : qop,
+    algorithm: params.algorithm,
+    stale: params.stale?.toLowerCase() === "true",
+    userhash: params.userhash?.toLowerCase() === "true",
+  };
+}
+
+/**
+ * `MD5`, `MD5-sess`, `SHA-256` and `SHA-256-sess`, tolerating the `SHA256`
+ * spelling some servers use. Returns null for anything else.
+ */
+function resolveAlgorithm(algorithm: string | undefined): { hash: string; sess: boolean } | null {
+  const value = (algorithm ?? "MD5").trim().toLowerCase();
+  const sess = value.endsWith("-sess");
+  const base = (sess ? value.slice(0, -"-sess".length) : value).replace(/-/g, "");
+  if (base === "md5") return { hash: "md5", sess };
+  if (base === "sha256") return { hash: "sha256", sess };
+  return null;
+}
+
+function unsupportedAlgorithmError(algorithm: string | undefined): Error {
+  return new Error(
+    `Unsupported Digest algorithm: ${algorithm ?? "MD5"}. ` +
+      `Supported algorithms are ${SUPPORTED_ALGORITHMS.join(", ")}`,
+  );
+}
+
+function unsupportedQopError(qop: string[]): Error {
+  return new Error(
+    `Unsupported Digest qop: ${qop.join(", ")}. Supported values are ${SUPPORTED_QOPS.join(" and ")}`,
+  );
+}
+
+/**
+ * Everything that would stop this challenge from being answered, or null if it
+ * can be. Selection asks the whole question at once so a challenge that fails
+ * on any count is passed over for the next one the server offered, rather than
+ * chosen and then failed on later.
+ */
+function challengeProblem(challenge: DigestChallenge): Error | null {
+  if (resolveAlgorithm(challenge.algorithm) == null) {
+    return unsupportedAlgorithmError(challenge.algorithm);
+  }
+  if (challenge.nonce === "") {
+    return new Error('Digest challenge is missing the required "nonce" parameter');
+  }
+  if (challenge.qop != null && !challenge.qop.some((q) => SUPPORTED_QOPS.includes(q))) {
+    return unsupportedQopError(challenge.qop);
+  }
+  return null;
+}
+
+/**
+ * Pick the challenge to answer. Servers list challenges strongest-first
+ * (RFC 7616 §3.7), so the first one we can compute is the one to use.
+ */
+export function selectDigestChallenge(
+  challenges: AuthChallenge[],
+  realm?: string,
+): DigestChallenge {
+  const digestChallenges = challenges.filter((c) => c.scheme.toLowerCase() === "digest");
+
+  if (digestChallenges.length === 0) {
+    const offered = challenges.map((c) => c.scheme).join(", ");
+    throw new Error(
+      offered === ""
+        ? "Server did not offer Digest authentication (no WWW-Authenticate header in the response)"
+        : `Server did not offer Digest authentication. It offered: ${offered}`,
+    );
+  }
+
+  const inRealm =
+    realm == null || realm === ""
+      ? digestChallenges
+      : digestChallenges.filter((c) => c.params.realm === realm);
+
+  if (inRealm.length === 0) {
+    const offered = digestChallenges.map((c) => JSON.stringify(c.params.realm ?? "")).join(", ");
+    throw new Error(`Server did not offer a Digest realm named "${realm}". It offered: ${offered}`);
+  }
+
+  const candidates = inRealm.map((c) => toDigestChallenge(c.params));
+  const answerable = candidates.find((c) => challengeProblem(c) == null);
+  if (answerable == null) throw challengeProblem(candidates[0]!);
+
+  return answerable;
+}
+
+/**
+ * Prefer `auth-int` only when the body is in hand, since its digest covers the
+ * exact bytes sent. A body offered as `null` is either an empty one or one Yaak
+ * didn't hand over (too large, or streamed from a file), and the two are
+ * indistinguishable from here. When `auth-int` is all the server offers it is
+ * still used, hashing the empty body: that is exactly right for the empty case
+ * and no worse than refusing outright for the other.
+ */
+function selectQop(qop: string[], body: string | null): "auth" | "auth-int" {
+  if (qop.includes("auth-int") && (body != null || !qop.includes("auth"))) return "auth-int";
+  if (qop.includes("auth")) return "auth";
+  throw unsupportedQopError(qop);
+}
+
+function quote(value: string): string {
+  return `"${value.replace(/(["\\])/g, "\\$1")}"`;
+}
+
+/** RFC 5987 `ext-value`, used for usernames that a quoted-string can't carry. */
+function encodeExtended(value: string): string {
+  const encoded = encodeURIComponent(value).replace(
+    /['()*]/g,
+    (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`,
+  );
+  return `UTF-8''${encoded}`;
+}
+
+export function buildDigestAuthorization(options: DigestAuthorizationOptions): string {
+  const { method, uri, body, challenge, cnonce, nc } = options;
+
+  // RFC 7616 §4 hashes credentials in Normalization Form C, so a name typed as
+  // a combining sequence digests the same as its precomposed spelling.
+  const username = options.username.normalize("NFC");
+  const password = options.password.normalize("NFC");
+
+  const algorithm = resolveAlgorithm(challenge.algorithm);
+  if (algorithm == null) throw unsupportedAlgorithmError(challenge.algorithm);
+
+  const hash = (value: string) => createHash(algorithm.hash).update(value, "utf8").digest("hex");
+  const qop = challenge.qop == null ? null : selectQop(challenge.qop, body);
+  const ncHex = nc.toString(16).padStart(8, "0");
+
+  const secret = hash(`${username}:${challenge.realm}:${password}`);
+  const ha1 = algorithm.sess ? hash(`${secret}:${challenge.nonce}:${cnonce}`) : secret;
+  const ha2 =
+    qop === "auth-int" ? hash(`${method}:${uri}:${hash(body ?? "")}`) : hash(`${method}:${uri}`);
+
+  // Without qop the server speaks RFC 2069, where the client contributes nothing
+  // to the digest and so must not send cnonce, nc or qop back.
+  const response =
+    qop == null
+      ? hash(`${ha1}:${challenge.nonce}:${ha2}`)
+      : hash(`${ha1}:${challenge.nonce}:${ncHex}:${cnonce}:${qop}:${ha2}`);
+
+  const params: string[] = [];
+  params.push(
+    /^[\x20-\x7E]*$/.test(username)
+      ? `username=${quote(username)}`
+      : `username*=${encodeExtended(username)}`,
+  );
+  params.push(`realm=${quote(challenge.realm)}`);
+  params.push(`uri=${quote(uri)}`);
+  if (challenge.algorithm != null) params.push(`algorithm=${challenge.algorithm}`);
+  params.push(`nonce=${quote(challenge.nonce)}`);
+  if (qop != null) {
+    params.push(`nc=${ncHex}`);
+    params.push(`cnonce=${quote(cnonce)}`);
+    params.push(`qop=${qop}`);
+  }
+  params.push(`response=${quote(response)}`);
+  if (challenge.opaque != null) params.push(`opaque=${quote(challenge.opaque)}`);
+  if (challenge.userhash) params.push("userhash=false");
+
+  return `Digest ${params.join(", ")}`;
+}
+
+/** The origin-form request-target the digest is computed over. */
+export function requestTarget(url: string): string {
+  const absolute = /^[a-zA-Z][a-zA-Z0-9+\-.]*:\/\//.test(url) ? url : `http://${url}`;
+  const parsed = new URL(absolute);
+  return `${parsed.pathname}${parsed.search}`;
+}
diff --git a/plugins/auth-digest/src/index.ts b/plugins/auth-digest/src/index.ts
new file mode 100644
index 0000000..67f235d
--- /dev/null
+++ b/plugins/auth-digest/src/index.ts
@@ -0,0 +1,75 @@
+import { randomBytes } from "node:crypto";
+import type { PluginDefinition } from "@yaakapp/api";
+
+import {
+  buildDigestAuthorization,
+  parseChallenges,
+  requestTarget,
+  selectDigestChallenge,
+} from "./digest";
+
+export const plugin: PluginDefinition = {
+  authentication: {
+    name: "digest",
+    label: "Digest Auth",
+    shortLabel: "Digest",
+    args: [
+      {
+        type: "text",
+        name: "username",
+        label: "Username",
+        optional: true,
+      },
+      {
+        type: "text",
+        name: "password",
+        label: "Password",
+        optional: true,
+        password: true,
+      },
+      {
+        type: "accordion",
+        label: "Advanced",
+        inputs: [
+          {
+            type: "text",
+            name: "realm",
+            label: "Realm",
+            optional: true,
+            description: "Only needed when the server offers more than one realm",
+          },
+        ],
+      },
+    ],
+    async onApply(ctx, { values, method, url, body }) {
+      const username = values.username ? String(values.username) : "";
+      const password = values.password ? String(values.password) : "";
+      const realm = values.realm ? String(values.realm) : undefined;
+
+      // Digest needs a server-issued nonce, so the challenge has to be provoked
+      // before the real request can be signed. The probe carries nothing but the
+      // method and URL: a cookie or an API key header would let it authorize the
+      // very operation it is only meant to ask permission for, and there is no
+      // telling a routing header from a credential by looking at it.
+      const { httpResponse } = await ctx.httpRequest.send({ httpRequest: { method, url } });
+
+      const headerValues = httpResponse.headers
+        .filter((h) => h.name.toLowerCase() === "www-authenticate")
+        .map((h) => h.value);
+
+      const challenge = selectDigestChallenge(parseChallenges(headerValues), realm);
+      const value = buildDigestAuthorization({
+        username,
+        password,
+        method,
+        uri: requestTarget(url),
+        body,
+        challenge,
+        cnonce: randomBytes(16).toString("hex"),
+        nc: 1,
+      });
+
+      return { setHeaders: [{ name: "Authorization", value }] };
+    },
+  },
+};
diff --git a/plugins/auth-digest/tests/digest.test.ts b/plugins/auth-digest/tests/digest.test.ts
new file mode 100644
index 0000000..1f39de4
--- /dev/null
+++ b/plugins/auth-digest/tests/digest.test.ts
@@ -0,0 +1,390 @@
+import { describe, expect, test } from "vite-plus/test";
+import {
+  buildDigestAuthorization,
+  parseChallenges,
+  requestTarget,
+  selectDigestChallenge,
+  toDigestChallenge,
+} from "../src/digest";
+
+function paramOf(header: string, name: string): string | undefined {
+  return parseChallenges([header])[0]?.params[name];
+}
+
+describe("parseChallenges", () => {
+  test("parses quoted and unquoted parameters", () => {
+    expect(parseChallenges(['Digest realm="test", algorithm=MD5, stale=TRUE'])).toEqual([
+      { scheme: "Digest", params: { realm: "test", algorithm: "MD5", stale: "TRUE" } },
+    ]);
+  });
+
+  test("keeps commas and escapes inside quoted values", () => {
+    expect(paramOf('Digest qop="auth,auth-int", realm="a \\"quoted\\" realm"', "qop")).toEqual(
+      "auth,auth-int",
+    );
+    expect(paramOf('Digest qop="auth,auth-int", realm="a \\"quoted\\" realm"', "realm")).toEqual(
+      'a "quoted" realm',
+    );
+  });
+
+  test("tolerates whitespace around the equals sign", () => {
+    expect(paramOf('Digest realm = "test"', "realm")).toEqual("test");
+  });
+
+  test("splits multiple challenges in a single header", () => {
+    expect(parseChallenges(['Basic realm="a", Digest realm="b", nonce="n"'])).toEqual([
+      { scheme: "Basic", params: { realm: "a" } },
+      { scheme: "Digest", params: { realm: "b", nonce: "n" } },
+    ]);
+  });
+
+  test("collects challenges across repeated headers", () => {
+    expect(parseChallenges(['Digest realm="a"', "Negotiate"]).map((c) => c.scheme)).toEqual([
+      "Digest",
+      "Negotiate",
+    ]);
+  });
+
+  test("captures token68 credentials rather than reading them as parameters", () => {
+    expect(parseChallenges(["NTLM TlRMTVNTUAACAAAAAA=="])).toEqual([
+      { scheme: "NTLM", params: {}, token68: "TlRMTVNTUAACAAAAAA==" },
+    ]);
+  });
+
+  test("lower-cases parameter names", () => {
+    expect(paramOf('Digest Realm="test", NONCE="n"', "realm")).toEqual("test");
+    expect(paramOf('Digest Realm="test", NONCE="n"', "nonce")).toEqual("n");
+  });
+});
+
+describe("toDigestChallenge", () => {
+  test("splits qop and reads the boolean flags", () => {
+    const challenge = toDigestChallenge(
+      parseChallenges(['Digest realm="r", nonce="n", qop=" auth , AUTH-INT ", stale=true'])[0]!
+        .params,
+    );
+    expect(challenge.qop).toEqual(["auth", "auth-int"]);
+    expect(challenge.stale).toBe(true);
+    expect(challenge.userhash).toBe(false);
+  });
+
+  test("treats a missing qop as absent rather than empty", () => {
+    expect(toDigestChallenge(parseChallenges(['Digest realm="r", nonce="n"'])[0]!.params).qop).toBe(
+      undefined,
+    );
+  });
+
+  test("reads userhash", () => {
+    expect(
+      toDigestChallenge(parseChallenges(['Digest realm="r", nonce="n", userhash=TRUE'])[0]!.params)
+        .userhash,
+    ).toBe(true);
+  });
+});
+
+describe("selectDigestChallenge", () => {
+  const md5 = 'Digest realm="a", nonce="n1", algorithm=MD5';
+  const sha = 'Digest realm="b", nonce="n2", algorithm=SHA-256';
+
+  test("takes the first Digest challenge the server prefers", () => {
+    expect(selectDigestChallenge(parseChallenges([sha, md5])).nonce).toEqual("n2");
+  });
+
+  test("skips challenges whose algorithm is not supported", () => {
+    const unsupported = 'Digest realm="c", nonce="n0", algorithm=SHA-512-256';
+    expect(selectDigestChallenge(parseChallenges([unsupported, md5])).nonce).toEqual("n1");
+  });
+
+  test("skips challenges whose qop cannot be answered", () => {
+    const unanswerable = 'Digest realm="c", nonce="n0", qop="auth-conf"';
+    expect(selectDigestChallenge(parseChallenges([unanswerable, md5])).nonce).toEqual("n1");
+  });
+
+  test("skips challenges that carry no nonce", () => {
+    expect(selectDigestChallenge(parseChallenges(['Digest realm="c"', md5])).nonce).toEqual("n1");
+  });
+
+  test("reports the first challenge's problem when none can be answered", () => {
+    expect(() =>
+      selectDigestChallenge(
+        parseChallenges(['Digest realm="c", nonce="n", qop="auth-conf"', 'Digest realm="d"']),
+      ),
+    ).toThrow("Unsupported Digest qop: auth-conf");
+  });
+
+  test("matches the case-insensitive scheme name", () => {
+    expect(selectDigestChallenge(parseChallenges(['digest realm="a", nonce="n1"'])).nonce).toEqual(
+      "n1",
+    );
+  });
+
+  test("selects by realm when one is given", () => {
+    expect(selectDigestChallenge(parseChallenges([sha, md5]), "a").nonce).toEqual("n1");
+  });
+
+  test("errors when the requested realm is not offered", () => {
+    expect(() => selectDigestChallenge(parseChallenges([sha, md5]), "nope")).toThrow(
+      'Server did not offer a Digest realm named "nope". It offered: "b", "a"',
+    );
+  });
+
+  test("errors when the server offers no Digest challenge", () => {
+    expect(() => selectDigestChallenge(parseChallenges(['Basic realm="a"', "Negotiate"]))).toThrow(
+      "Server did not offer Digest authentication. It offered: Basic, Negotiate",
+    );
+  });
+
+  test("errors when the response carries no challenge at all", () => {
+    expect(() => selectDigestChallenge(parseChallenges([]))).toThrow(
+      "no WWW-Authenticate header in the response",
+    );
+  });
+
+  test("errors when no offered algorithm is supported", () => {
+    expect(() =>
+      selectDigestChallenge(
+        parseChallenges(['Digest realm="c", nonce="n", algorithm=SHA-512-256']),
+      ),
+    ).toThrow("Unsupported Digest algorithm: SHA-512-256");
+  });
+
+  test("errors when the challenge has no nonce", () => {
+    expect(() => selectDigestChallenge(parseChallenges(['Digest realm="c"']))).toThrow(
+      'Digest challenge is missing the required "nonce" parameter',
+    );
+  });
+});
+
+// https://datatracker.ietf.org/doc/html/rfc7616#section-3.9.1
+describe("RFC 7616 §3.9.1 worked example", () => {
+  const headers = [
+    'Digest realm="http-auth@example.org", qop="auth, auth-int", algorithm=SHA-256, ' +
+      'nonce="7ypf/xlj9XXwfDPEoM4URrv/xwf94BcCAzFZH4GiTo0v", ' +
+      'opaque="FQhe/qaU925kfnzjCev0ciny7QMkPqMAFRtzCUYo5tdS"',
+    'Digest realm="http-auth@example.org", qop="auth, auth-int", algorithm=MD5, ' +
+      'nonce="7ypf/xlj9XXwfDPEoM4URrv/xwf94BcCAzFZH4GiTo0v", ' +
+      'opaque="FQhe/qaU925kfnzjCev0ciny7QMkPqMAFRtzCUYo5tdS"',
+  ];
+  const common = {
+    username: "Mufasa",
+    password: "Circle of Life",
+    method: "GET",
+    uri: "/dir/index.html",
+    body: null,
+    cnonce: "f2/wE4q74E6zIJEtWaHKaf5wv/H5QzzpXusqGemxURZJ",
+    nc: 1,
+  };
+
+  test("SHA-256", () => {
+    expect(
+      buildDigestAuthorization({
+        ...common,
+        challenge: selectDigestChallenge(parseChallenges(headers)),
+      }),
+    ).toEqual(
+      'Digest username="Mufasa", realm="http-auth@example.org", uri="/dir/index.html", ' +
+        'algorithm=SHA-256, nonce="7ypf/xlj9XXwfDPEoM4URrv/xwf94BcCAzFZH4GiTo0v", ' +
+        'nc=00000001, cnonce="f2/wE4q74E6zIJEtWaHKaf5wv/H5QzzpXusqGemxURZJ", qop=auth, ' +
+        'response="753927fa0e85d155564e2e272a28d1802ca10daf4496794697cf8db5856cb6c1", ' +
+        'opaque="FQhe/qaU925kfnzjCev0ciny7QMkPqMAFRtzCUYo5tdS"',
+    );
+  });
+
+  test("MD5", () => {
+    expect(
+      buildDigestAuthorization({
+        ...common,
+        challenge: selectDigestChallenge(parseChallenges([headers[1]!])),
+      }),
+    ).toEqual(
+      'Digest username="Mufasa", realm="http-auth@example.org", uri="/dir/index.html", ' +
+        'algorithm=MD5, nonce="7ypf/xlj9XXwfDPEoM4URrv/xwf94BcCAzFZH4GiTo0v", ' +
+        'nc=00000001, cnonce="f2/wE4q74E6zIJEtWaHKaf5wv/H5QzzpXusqGemxURZJ", qop=auth, ' +
+        'response="8ca523f5e9506fed4657c9700eebdbec", ' +
+        'opaque="FQhe/qaU925kfnzjCev0ciny7QMkPqMAFRtzCUYo5tdS"',
+    );
+  });
+});
+
+// https://datatracker.ietf.org/doc/html/rfc2617#section-3.5
+describe("RFC 2617 §3.5 worked example", () => {
+  test("MD5 with qop=auth", () => {
+    const challenge = selectDigestChallenge(
+      parseChallenges([
+        'Digest realm="testrealm@host.com", qop="auth,auth-int", ' +
+          'nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093", opaque="5ccc069c403ebaf9f0171e9517f40e41"',
+      ]),
+    );
+    expect(
+      buildDigestAuthorization({
+        username: "Mufasa",
+        password: "Circle Of Life",
+        method: "GET",
+        uri: "/dir/index.html",
+        body: null,
+        challenge,
+        cnonce: "0a4f113b",
+        nc: 1,
+      }),
+    ).toContain('response="6629fae49393a05397450978507c4ef1"');
+  });
+});
+
+describe("buildDigestAuthorization", () => {
+  const base = {
+    username: "user",
+    password: "pass",
+    method: "POST",
+    uri: "/api",
+    body: null as string | null,
+    cnonce: "abc123",
+    nc: 1,
+  };
+
+  test("omits the client's contribution when the server offers no qop", () => {
+    const header = buildDigestAuthorization({
+      ...base,
+      challenge: selectDigestChallenge(parseChallenges(['Digest realm="r", nonce="n"'])),
+    });
+    expect(header).not.toContain("qop=");
+    expect(header).not.toContain("cnonce=");
+    expect(header).not.toContain("nc=");
+    // MD5(HA1:nonce:HA2), per RFC 2069.
+    expect(header).toContain('response="24644771b8983deed818b83aeb3ac381"');
+  });
+
+  test("omits algorithm when the challenge did not name one", () => {
+    expect(
+      buildDigestAuthorization({
+        ...base,
+        challenge: selectDigestChallenge(parseChallenges(['Digest realm="r", nonce="n"'])),
+      }),
+    ).not.toContain("algorithm=");
+  });
+
+  test("uses auth-int over the body when the server offers it", () => {
+    const header = buildDigestAuthorization({
+      ...base,
+      body: '{"a":1}',
+      challenge: selectDigestChallenge(
+        parseChallenges(['Digest realm="r", nonce="n", qop="auth,auth-int"']),
+      ),
+    });
+    expect(header).toContain("qop=auth-int");
+  });
+
+  test("falls back to auth when no body was handed over", () => {
+    expect(
+      buildDigestAuthorization({
+        ...base,
+        challenge: selectDigestChallenge(
+          parseChallenges(['Digest realm="r", nonce="n", qop="auth,auth-int"']),
+        ),
+      }),
+    ).toContain("qop=auth");
+  });
+
+  test("uses auth-int over an empty body when it is the only qop offered", () => {
+    expect(
+      buildDigestAuthorization({
+        ...base,
+        challenge: selectDigestChallenge(
+          parseChallenges(['Digest realm="r", nonce="n", qop="auth-int"']),
+        ),
+      }),
+    ).toContain("qop=auth-int");
+  });
+
+  test("rejects a qop it cannot compute", () => {
+    expect(() =>
+      buildDigestAuthorization({
+        ...base,
+        challenge: selectDigestChallenge(
+          parseChallenges(['Digest realm="r", nonce="n", qop="auth-conf"']),
+        ),
+      }),
+    ).toThrow("Unsupported Digest qop: auth-conf");
+  });
+
+  test("mixes the cnonce into HA1 for -sess algorithms", () => {
+    const sess = buildDigestAuthorization({
+      ...base,
+      challenge: selectDigestChallenge(
+        parseChallenges(['Digest realm="r", nonce="n", qop=auth, algorithm=MD5-sess']),
+      ),
+    });
+    const plain = buildDigestAuthorization({
+      ...base,
+      challenge: selectDigestChallenge(
+        parseChallenges(['Digest realm="r", nonce="n", qop=auth, algorithm=MD5']),
+      ),
+    });
+    expect(sess).toContain("algorithm=MD5-sess");
+    expect(sess).not.toEqual(plain);
+  });
+
+  test("declines userhash when the server advertises it", () => {
+    expect(
+      buildDigestAuthorization({
+        ...base,
+        challenge: selectDigestChallenge(
+          parseChallenges(['Digest realm="r", nonce="n", qop=auth, userhash=true']),
+        ),
+      }),
+    ).toContain("userhash=false");
+  });
+
+  test("escapes quotes in the credentials it echoes back", () => {
+    expect(
+      buildDigestAuthorization({
+        ...base,
+        username: 'a"b',
+        challenge: selectDigestChallenge(parseChallenges(['Digest realm="r", nonce="n"'])),
+      }),
+    ).toContain('username="a\\"b"');
+  });
+
+  test("normalizes credentials to NFC before hashing", () => {
+    const challenge = selectDigestChallenge(parseChallenges(['Digest realm="r", nonce="n"']));
+    // "Jäsøn" spelled with a combining diaeresis rather than a precomposed "ä".
+    const decomposed = buildDigestAuthorization({
+      ...base,
+      username: "Ja\u0308s\u00f8n",
+      password: "pa\u0308ss",
+      challenge,
+    });
+    const precomposed = buildDigestAuthorization({
+      ...base,
+      username: "J\u00e4s\u00f8n",
+      password: "p\u00e4ss",
+      challenge,
+    });
+    expect(decomposed).toEqual(precomposed);
+  });
+
+  test("sends a non-ASCII username as an RFC 5987 extended value", () => {
+    expect(
+      buildDigestAuthorization({
+        ...base,
+        username: "Jäsøn Doe",
+        challenge: selectDigestChallenge(parseChallenges(['Digest realm="r", nonce="n"'])),
+      }),
+    ).toContain("username*=UTF-8''J%C3%A4s%C3%B8n%20Doe");
+  });
+});
+
+describe("requestTarget", () => {
+  test("keeps the path and query", () => {
+    expect(requestTarget("https://example.org/dir/index.html?a=b&c=d")).toEqual(
+      "/dir/index.html?a=b&c=d",
+    );
+  });
+
+  test("uses a bare slash when there is no path", () => {
+    expect(requestTarget("https://example.org")).toEqual("/");
+  });
+
+  test("handles a URL with no scheme", () => {
+    expect(requestTarget("localhost:8080/thing")).toEqual("/thing");
+  });
+});
diff --git a/plugins/auth-digest/tests/index.test.ts b/plugins/auth-digest/tests/index.test.ts
new file mode 100644
index 0000000..dd700e4
--- /dev/null
+++ b/plugins/auth-digest/tests/index.test.ts
@@ -0,0 +1,375 @@
+import { createHash } from "node:crypto";
+import { createServer, type Server } from "node:http";
+import type { AddressInfo } from "node:net";
+import type { Context } from "@yaakapp/api";
+import { afterEach, describe, expect, test, vi } from "vite-plus/test";
+import { plugin } from "../src";
+
+function apply(ctx: Context, values: Record<string, string>, over: Partial<ApplyArgs> = {}) {
+  return plugin.authentication!.onApply(ctx, {
+    values,
+    headers: [],
+    url: "https://example.org/dir/index.html?a=b",
+    method: "GET",
+    body: null,
+    contextId: "ctx",
+    ...over,
+  });
+}
+
+type ApplyArgs = Parameters<NonNullable<typeof plugin.authentication>["onApply"]>[1];
+
+function ctxRespondingWith(headers: Array<{ name: string; value: string }>): {
+  ctx: Context;
+  send: ReturnType<typeof vi.fn>;
+} {
+  const send = vi.fn().mockResolvedValue({ httpResponse: { headers } });
+  return { ctx: { httpRequest: { send } } as unknown as Context, send };
+}
+
+describe("auth-digest onApply", () => {
+  test("probes with the same method and URL, without credentials or body", async () => {
+    const { ctx, send } = ctxRespondingWith([
+      { name: "WWW-Authenticate", value: 'Digest realm="r", nonce="n", qop=auth' },
+    ]);
+
+    await apply(ctx, { username: "user", password: "pass" }, { method: "POST", body: "hello" });
+
+    expect(send).toHaveBeenCalledWith({
+      httpRequest: { method: "POST", url: "https://example.org/dir/index.html?a=b" },
+    });
+  });
+
+  test("keeps credential-bearing headers off the probe", async () => {
+    const { ctx, send } = ctxRespondingWith([
+      { name: "WWW-Authenticate", value: 'Digest realm="r", nonce="n", qop=auth' },
+    ]);
+
+    await apply(
+      ctx,
+      { username: "user", password: "pass" },
+      {
+        method: "DELETE",
+        headers: [
+          { name: "Cookie", value: "session=abc" },
+          { name: "X-Api-Key", value: "secret" },
+          { name: "Authorization", value: "Bearer stale" },
+        ],
+      },
+    );
+
+    expect(send).toHaveBeenCalledWith({
+      httpRequest: { method: "DELETE", url: "https://example.org/dir/index.html?a=b" },
+    });
+  });
+
+  test("signs the request-target rather than the whole URL", async () => {
+    const { ctx } = ctxRespondingWith([
+      { name: "WWW-Authenticate", value: 'Digest realm="r", nonce="n", qop=auth' },
+    ]);
+
+    const result = await apply(ctx, { username: "user", password: "pass" });
+
+    expect(result.setHeaders?.[0]?.name).toEqual("Authorization");
+    expect(result.setHeaders?.[0]?.value).toContain('uri="/dir/index.html?a=b"');
+  });
+
+  test("uses a fresh cnonce on every apply", async () => {
+    const { ctx } = ctxRespondingWith([
+      { name: "WWW-Authenticate", value: 'Digest realm="r", nonce="n", qop=auth' },
+    ]);
+
+    const first = await apply(ctx, { username: "user", password: "pass" });
+    const second = await apply(ctx, { username: "user", password: "pass" });
+
+    expect(first.setHeaders?.[0]?.value).not.toEqual(second.setHeaders?.[0]?.value);
+  });
+
+  test("treats missing credentials as empty strings", async () => {
+    const { ctx } = ctxRespondingWith([
+      { name: "www-authenticate", value: 'Digest realm="r", nonce="n"' },
+    ]);
+
+    expect((await apply(ctx, {})).setHeaders?.[0]?.value).toContain('username=""');
+  });
+
+  test("fails clearly when the server does not offer Digest", async () => {
+    const { ctx } = ctxRespondingWith([{ name: "WWW-Authenticate", value: 'Basic realm="r"' }]);
+
+    await expect(apply(ctx, { username: "user", password: "pass" })).rejects.toThrow(
+      "Server did not offer Digest authentication. It offered: Basic",
+    );
+  });
+
+  test("selects the realm the user configured", async () => {
+    const { ctx } = ctxRespondingWith([
+      { name: "WWW-Authenticate", value: 'Digest realm="one", nonce="n1"' },
+      { name: "WWW-Authenticate", value: 'Digest realm="two", nonce="n2"' },
+    ]);
+
+    expect(
+      (await apply(ctx, { username: "user", password: "pass", realm: "two" })).setHeaders?.[0]
+        ?.value,
+    ).toContain('nonce="n2"');
+  });
+});
+
+function nextComma(value: string, from: number): number {
+  const index = value.indexOf(",", from);
+  return index < 0 ? value.length : index;
+}
+
+/**
+ * Read `Digest name=value, name="value"` credentials by scanning, rather than
+ * with a global regex: a repeated character class in front of the `=` backtracks
+ * quadratically over a long run of the characters it accepts.
+ */
+function parseCredentials(header: string): Record<string, string> {
+  const params: Record<string, string> = {};
+  let i = header.indexOf(" ") + 1;
+
+  while (i < header.length) {
+    const equals = header.indexOf("=", i);
+    if (equals < 0) break;
+
+    const name = header.slice(i, equals).trim().toLowerCase();
+    i = equals + 1;
+
+    let value = "";
+    if (header[i] === '"') {
+      for (i++; i < header.length && header[i] !== '"'; i++) {
+        if (header[i] === "\\") i++;
+        value += header[i];
+      }
+      i++;
+    } else {
+      const end = nextComma(header, i);
+      value = header.slice(i, end).trim();
+      i = end;
+    }
+
+    params[name] = value;
+    i = nextComma(header, i) + 1;
+  }
+
+  return params;
+}
+
+/**
+ * A minimally correct Digest server, hashing inline rather than through the
+ * plugin's own helpers so the round trip can't agree with itself on a mistake.
+ */
+function startDigestServer(config: {
+  username: string;
+  password: string;
+  realm: string;
+  nonce: string;
+  algorithm?: string;
+  qop?: string;
+  /** Offer a second, unrelated realm ahead of the real one. */
+  decoyRealm?: string;
+}): Promise<{ url: string; close: () => Promise<void> }> {
+  const hashName = (config.algorithm ?? "MD5").toLowerCase().startsWith("sha-256")
+    ? "sha256"
+    : "md5";
+  const sess = (config.algorithm ?? "").toLowerCase().endsWith("-sess");
+  const hash = (value: string) => createHash(hashName).update(value, "utf8").digest("hex");
+
+  const server: Server = createServer((req, res) => {
+    const chunks: Buffer[] = [];
+    req.on("data", (chunk: Buffer) => chunks.push(chunk));
+    req.on("end", () => {
+      const authorization = req.headers.authorization;
+      if (authorization == null || !authorization.startsWith("Digest ")) {
+        const challenge = [
+          `Digest realm="${config.realm}"`,
+          `nonce="${config.nonce}"`,
+          `algorithm=${config.algorithm ?? "MD5"}`,
+          config.qop == null ? null : `qop="${config.qop}"`,
+          'opaque="0p4qu3"',
+        ]
+          .filter(Boolean)
+          .join(", ");
+        res.setHeader(
+          "WWW-Authenticate",
+          config.decoyRealm == null
+            ? [challenge]
+            : [
+                `Digest realm="${config.decoyRealm}", nonce="wrong-nonce", algorithm=MD5`,
+                challenge,
+              ],
+        );
+        res.writeHead(401).end("unauthorized");
+        return;
+      }
+
+      const params = parseCredentials(authorization);
+
+      const secret = hash(`${config.username}:${config.realm}:${config.password}`);
+      const ha1 = sess ? hash(`${secret}:${params.nonce}:${params.cnonce}`) : secret;
+      const ha2 =
+        params.qop === "auth-int"
+          ? hash(`${req.method}:${params.uri}:${hash(Buffer.concat(chunks).toString("utf8"))}`)
+          : hash(`${req.method}:${params.uri}`);
+      const expected =
+        params.qop == null
+          ? hash(`${ha1}:${params.nonce}:${ha2}`)
+          : hash(`${ha1}:${params.nonce}:${params.nc}:${params.cnonce}:${params.qop}:${ha2}`);
+
+      const ok =
+        params.username === config.username &&
+        params.realm === config.realm &&
+        params.nonce === config.nonce &&
+        params.uri === req.url &&
+        params.opaque === "0p4qu3" &&
+        params.response === expected;
+
+      res.writeHead(ok ? 200 : 401).end(ok ? "welcome" : "denied");
+    });
+  });
+
+  return new Promise((resolve) => {
+    server.listen(0, "127.0.0.1", () => {
+      const { port } = server.address() as AddressInfo;
+      resolve({
+        url: `http://127.0.0.1:${port}`,
+        close: () => new Promise<void>((done) => server.close(() => done())),
+      });
+    });
+  });
+}
+
+/** Sends for real, so the plugin sees the headers a live server actually returns. */
+function realContext(): Context {
+  return {
+    httpRequest: {
+      async send({ httpRequest }: { httpRequest: { method?: string; url?: string } }) {
+        const res = await fetch(httpRequest.url!, { method: httpRequest.method });
+        await res.text();
+        return {
+          httpResponse: {
+            headers: [...res.headers].map(([name, value]) => ({ name, value })),
+          },
+        };
+      },
+    },
+  } as unknown as Context;
+}
+
+describe("auth-digest against a live server", () => {
+  let close: (() => Promise<void>) | null = null;
+
+  afterEach(async () => {
+    await close?.();
+    close = null;
+  });
+
+  for (const algorithm of ["MD5", "MD5-sess", "SHA-256", "SHA-256-sess"]) {
+    test(`authenticates with algorithm=${algorithm}`, async () => {
+      const server = await startDigestServer({
+        username: "Mufasa",
+        password: "Circle of Life",
+        realm: "http-auth@example.org",
+        nonce: "7ypf/xlj9XXwfDPEoM4URrv",
+        algorithm,
+        qop: "auth",
+      });
+      close = server.close;
+
+      const url = `${server.url}/dir/index.html?a=b`;
+      const result = await plugin.authentication!.onApply(realContext(), {
+        values: { username: "Mufasa", password: "Circle of Life" },
+        headers: [],
+        url,
+        method: "GET",
+        body: null,
+        contextId: "ctx",
+      });
+
+      const res = await fetch(url, {
+        headers: { Authorization: result.setHeaders![0]!.value },
+      });
+      expect([res.status, await res.text()]).toEqual([200, "welcome"]);
+    });
+  }
+
+  test("authenticates a POST body with qop=auth-int", async () => {
+    const body = '{"hello":"world"}';
+    const server = await startDigestServer({
+      username: "user",
+      password: "pass",
+      realm: "api@example.org",
+      nonce: "n0nc3",
+      algorithm: "SHA-256",
+      qop: "auth,auth-int",
+    });
+    close = server.close;
+
+    const url = `${server.url}/submit`;
+    const result = await plugin.authentication!.onApply(realContext(), {
+      values: { username: "user", password: "pass" },
+      headers: [],
+      url,
+      method: "POST",
+      body,
+      contextId: "ctx",
+    });
+
+    expect(result.setHeaders![0]!.value).toContain("qop=auth-int");
+
+    const res = await fetch(url, {
+      method: "POST",
+      body,
+      headers: { Authorization: result.setHeaders![0]!.value },
+    });
+    expect([res.status, await res.text()]).toEqual([200, "welcome"]);
+  });
+
+  test("authenticates against an RFC 2069 server that offers no qop", async () => {
+    const server = await startDigestServer({
+      username: "user",
+      password: "pass",
+      realm: "legacy@example.org",
+      nonce: "old-nonce",
+    });
+    close = server.close;
+
+    const url = `${server.url}/legacy`;
+    const result = await plugin.authentication!.onApply(realContext(), {
+      values: { username: "user", password: "pass" },
+      headers: [],
+      url,
+      method: "GET",
+      body: null,
+      contextId: "ctx",
+    });
+
+    const res = await fetch(url, { headers: { Authorization: result.setHeaders![0]!.value } });
+    expect([res.status, await res.text()]).toEqual([200, "welcome"]);
+  });
+
+  test("picks the configured realm out of several the server offers", async () => {
+    const server = await startDigestServer({
+      username: "user",
+      password: "pass",
+      realm: "second@example.org",
+      nonce: "n0nc3",
+      qop: "auth",
+      decoyRealm: "first@example.org",
+    });
+    close = server.close;
+
+    const url = `${server.url}/multi`;
+    const result = await plugin.authentication!.onApply(realContext(), {
+      values: { username: "user", password: "pass", realm: "second@example.org" },
+      headers: [],
+      url,
+      method: "GET",
+      body: null,
+      contextId: "ctx",
+    });
+
+    const res = await fetch(url, { headers: { Authorization: result.setHeaders![0]!.value } });
+    expect(res.status).toEqual(200);
+  });
+});
diff --git a/plugins/auth-digest/tsconfig.json b/plugins/auth-digest/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/auth-digest/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/auth-jwt/README.md b/plugins/auth-jwt/README.md
new file mode 100644
index 0000000..3498543
--- /dev/null
+++ b/plugins/auth-jwt/README.md
@@ -0,0 +1,54 @@
+# JSON Web Token (JWT) Authentication
+
+A [JSON Web Token](https://datatracker.ietf.org/doc/html/rfc7519) (JWT) authentication
+plugin that supports token generation, signing, and automatic header management.
+
+![Screenshot of JWT auth UI](screenshot.png)
+
+## Overview
+
+This plugin provides JWT authentication support for API requests. JWT is a compact,
+URL-safe means of representing claims between two parties, commonly used for
+authentication and information exchange in modern web applications and APIs.
+
+## How JWT Authentication Works
+
+JWT authentication involves creating a signed token containing claims about the user or
+application. The token is sent in the `Authorization` header:
+
+```
+Authorization: Bearer <jwt-token>
+```
+
+A JWT consists of three parts separated by dots:
+
+- **Header**: Contains the token type and signing algorithm
+- **Payload**: Contains the claims (user data, permissions, expiration, etc.)
+- **Signature**: Ensures the token hasn't been tampered with
+
+## Usage
+
+1. Configure the request, folder, or workspace to use JWT Authentication
+2. Set up your signing algorithm and secret/key
+3. Add custom JWT header fields if needed
+4. Configure the required claims for your JWT payload
+5. The plugin will generate, sign, and include the JWT in your requests
+
+## Common Use Cases
+
+JWT authentication is commonly used for:
+
+- **Microservices Authentication**: Service-to-service communication
+- **API Gateway Integration**: Authenticating with API gateways
+- **Single Sign-On (SSO)**: Sharing authentication across applications
+- **Stateless Authentication**: No server-side session storage required
+- **Mobile App APIs**: Secure authentication for mobile applications
+- **Third-party Integrations**: Authenticating with external services
+
+## Troubleshooting
+
+- **Invalid Signature**: Check your secret/key and algorithm configuration
+- **Token Expired**: Verify expiration time settings
+- **Invalid Claims**: Ensure required claims are properly configured
+- **Algorithm Mismatch**: Verify the algorithm matches what the API expects
+- **Key Format Issues**: Ensure RSA keys are in the correct PEM format
diff --git a/plugins/auth-jwt/package.json b/plugins/auth-jwt/package.json
new file mode 100644
index 0000000..1d0e438
--- /dev/null
+++ b/plugins/auth-jwt/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@yaak/auth-jwt",
+  "displayName": "JSON Web Tokens",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Authenticate requests using JSON web tokens (JWT)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-jwt"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "jsonwebtoken": "^9.0.2"
+  },
+  "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.7"
+  }
+}
diff --git a/plugins/auth-jwt/src/index.ts b/plugins/auth-jwt/src/index.ts
new file mode 100644
index 0000000..0c4bc6e
--- /dev/null
+++ b/plugins/auth-jwt/src/index.ts
@@ -0,0 +1,148 @@
+import type { PluginDefinition } from "@yaakapp/api";
+import jwt from "jsonwebtoken";
+
+const algorithms = [
+  "HS256",
+  "HS384",
+  "HS512",
+  "RS256",
+  "RS384",
+  "RS512",
+  "PS256",
+  "PS384",
+  "PS512",
+  "ES256",
+  "ES384",
+  "ES512",
+  "none",
+] as const;
+
+const defaultAlgorithm = algorithms[0];
+
+export const plugin: PluginDefinition = {
+  authentication: {
+    name: "jwt",
+    label: "JWT Bearer",
+    shortLabel: "JWT",
+    args: [
+      {
+        type: "select",
+        name: "algorithm",
+        label: "Algorithm",
+        hideLabel: true,
+        defaultValue: defaultAlgorithm,
+        options: algorithms.map((value) => ({ label: value === "none" ? "None" : value, value })),
+      },
+      {
+        type: "text",
+        name: "secret",
+        label: "Secret or Private Key",
+        password: true,
+        optional: true,
+        multiLine: true,
+      },
+      {
+        type: "checkbox",
+        name: "secretBase64",
+        label: "Secret is base64 encoded",
+      },
+      {
+        type: "editor",
+        name: "payload",
+        label: "JWT Payload",
+        language: "json",
+        defaultValue: '{\n  "foo": "bar"\n}',
+        placeholder: "{ }",
+      },
+      {
+        type: "accordion",
+        label: "Advanced",
+        inputs: [
+          {
+            type: "editor",
+            name: "headers",
+            label: "JWT Header",
+            description: "Merged with auto-generated header fields like alg (e.g., kid)",
+            language: "json",
+            defaultValue: "{}",
+            placeholder: "{ }",
+            optional: true,
+          },
+          {
+            type: "select",
+            name: "location",
+            label: "Behavior",
+            defaultValue: "header",
+            options: [
+              { label: "Insert Header", value: "header" },
+              { label: "Append Query Parameter", value: "query" },
+            ],
+          },
+          {
+            type: "h_stack",
+            inputs: [
+              {
+                type: "text",
+                name: "name",
+                label: "Header Name",
+                defaultValue: "Authorization",
+                optional: true,
+                description: "The name of the header to add to the request",
+              },
+              {
+                type: "text",
+                name: "headerPrefix",
+                label: "Header Prefix",
+                optional: true,
+                defaultValue: "Bearer",
+              },
+            ],
+            dynamic(_ctx, args) {
+              if (args.values.location === "query") {
+                return {
+                  hidden: true,
+                };
+              }
+            },
+          },
+          {
+            type: "text",
+            name: "name",
+            label: "Parameter Name",
+            description: "The name of the query parameter to add to the request",
+            defaultValue: "token",
+            optional: true,
+            dynamic(_ctx, args) {
+              if (args.values.location !== "query") {
+                return {
+                  hidden: true,
+                };
+              }
+            },
+          },
+        ],
+      },
+    ],
+    async onApply(_ctx, { values }) {
+      const { algorithm, secret: _secret, secretBase64, payload, headers } = values;
+      const secret = secretBase64 ? Buffer.from(`${_secret}`, "base64") : `${_secret}`;
+
+      const parsedHeaders = headers ? JSON.parse(`${headers}`) : undefined;
+
+      const token = jwt.sign(`${payload}`, secret, {
+        algorithm: algorithm as (typeof algorithms)[number],
+        // Extra header fields are merged with the auto-generated header (which includes alg)
+        header: parsedHeaders as jwt.JwtHeader | undefined,
+      });
+
+      if (values.location === "query") {
+        const paramName = String(values.name || "token");
+        return { setQueryParameters: [{ name: paramName, value: token }] };
+      }
+      const headerPrefix = values.headerPrefix != null ? values.headerPrefix : "Bearer";
+      const headerName = String(values.name || "Authorization");
+      const headerValue = `${headerPrefix} ${token}`.trim();
+      return { setHeaders: [{ name: headerName, value: headerValue }] };
+    },
+  },
+};
diff --git a/plugins/auth-jwt/tsconfig.json b/plugins/auth-jwt/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/auth-jwt/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/auth-ntlm/package.json b/plugins/auth-ntlm/package.json
new file mode 100644
index 0000000..6348eee
--- /dev/null
+++ b/plugins/auth-ntlm/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@yaak/auth-ntlm",
+  "displayName": "NTLM Authentication",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Authenticate requests using NTLM authentication",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-ntlm"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  },
+  "dependencies": {
+    "httpntlm": "^1.8.13"
+  }
+}
diff --git a/plugins/auth-ntlm/src/index.ts b/plugins/auth-ntlm/src/index.ts
new file mode 100644
index 0000000..f787de0
--- /dev/null
+++ b/plugins/auth-ntlm/src/index.ts
@@ -0,0 +1,94 @@
+import type { PluginDefinition } from "@yaakapp/api";
+
+import { ntlm } from "httpntlm";
+
+function extractNtlmChallenge(headers: Array<{ name: string; value: string }>): string | null {
+  const authValues = headers
+    .filter((h) => h.name.toLowerCase() === "www-authenticate")
+    .flatMap((h) => h.value.split(","))
+    .map((v) => v.trim())
+    .filter(Boolean);
+
+  return authValues.find((v) => /^NTLM\s+\S+/i.test(v)) ?? null;
+}
+
+export const plugin: PluginDefinition = {
+  authentication: {
+    name: "windows",
+    label: "NTLM Auth",
+    shortLabel: "NTLM",
+    args: [
+      {
+        type: "banner",
+        color: "info",
+        inputs: [
+          {
+            type: "markdown",
+            content:
+              "NTLM is still in beta. Please submit any issues to [Feedback](https://yaak.app/feedback).",
+          },
+        ],
+      },
+      {
+        type: "text",
+        name: "username",
+        label: "Username",
+        optional: true,
+      },
+      {
+        type: "text",
+        name: "password",
+        label: "Password",
+        optional: true,
+        password: true,
+      },
+      {
+        type: "accordion",
+        label: "Advanced",
+        inputs: [
+          { name: "domain", label: "Domain", type: "text", optional: true },
+          { name: "workstation", label: "Workstation", type: "text", optional: true },
+        ],
+      },
+    ],
+    async onApply(ctx, { values, method, url }) {
+      const username = values.username ? String(values.username) : undefined;
+      const password = values.password ? String(values.password) : undefined;
+      const domain = values.domain ? String(values.domain) : undefined;
+      const workstation = values.workstation ? String(values.workstation) : undefined;
+
+      const options = {
+        url,
+        username,
+        password,
+        workstation,
+        domain,
+      };
+
+      const type1 = ntlm.createType1Message(options);
+
+      const { httpResponse: negotiateResponse } = await ctx.httpRequest.send({
+        httpRequest: {
+          method,
+          url,
+          headers: [
+            { name: "Authorization", value: type1 },
+            { name: "Connection", value: "keep-alive" },
+          ],
+        },
+      });
+
+      const ntlmChallenge = extractNtlmChallenge(negotiateResponse.headers);
+      if (ntlmChallenge == null) {
+        throw new Error("Unable to find NTLM challenge in WWW-Authenticate response headers");
+      }
+
+      const type2 = ntlm.parseType2Message(ntlmChallenge, (err: Error | null) => {
+        if (err != null) throw err;
+      });
+      const type3 = ntlm.createType3Message(type2, options);
+
+      return { setHeaders: [{ name: "Authorization", value: type3 }] };
+    },
+  },
+};
diff --git a/plugins/auth-ntlm/src/modules.d.ts b/plugins/auth-ntlm/src/modules.d.ts
new file mode 100644
index 0000000..68a4916
--- /dev/null
+++ b/plugins/auth-ntlm/src/modules.d.ts
@@ -0,0 +1 @@
+declare module "httpntlm";
diff --git a/plugins/auth-ntlm/tests/index.test.ts b/plugins/auth-ntlm/tests/index.test.ts
new file mode 100644
index 0000000..2c44757
--- /dev/null
+++ b/plugins/auth-ntlm/tests/index.test.ts
@@ -0,0 +1,89 @@
+import type { Context } from "@yaakapp/api";
+import { beforeEach, describe, expect, test, vi } from "vite-plus/test";
+
+const ntlmMock = vi.hoisted(() => ({
+  createType1Message: vi.fn(),
+  parseType2Message: vi.fn(),
+  createType3Message: vi.fn(),
+}));
+
+vi.mock("httpntlm", () => ({ ntlm: ntlmMock }));
+
+import { plugin } from "../src";
+
+describe("auth-ntlm", () => {
+  beforeEach(() => {
+    ntlmMock.createType1Message.mockReset();
+    ntlmMock.parseType2Message.mockReset();
+    ntlmMock.createType3Message.mockReset();
+    ntlmMock.createType1Message.mockReturnValue("NTLM TYPE1");
+    // oxlint-disable-next-line no-explicit-any
+    ntlmMock.parseType2Message.mockReturnValue({} as any);
+    ntlmMock.createType3Message.mockReturnValue("NTLM TYPE3");
+  });
+
+  test("uses NTLM challenge when Negotiate and NTLM headers are separate", async () => {
+    const send = vi.fn().mockResolvedValue({
+      httpResponse: {
+        headers: [
+          { name: "WWW-Authenticate", value: "Negotiate" },
+          { name: "WWW-Authenticate", value: "NTLM TlRMTVNTUAACAAAAAA==" },
+        ],
+      },
+    });
+    const ctx = { httpRequest: { send } } as unknown as Context;
+
+    const result = await plugin.authentication?.onApply(ctx, {
+      values: {},
+      headers: [],
+      url: "https://example.local/resource",
+      method: "GET",
+      contextId: "ctx",
+    });
+
+    expect(ntlmMock.parseType2Message).toHaveBeenCalledWith(
+      "NTLM TlRMTVNTUAACAAAAAA==",
+      expect.any(Function),
+    );
+    expect(result).toEqual({ setHeaders: [{ name: "Authorization", value: "NTLM TYPE3" }] });
+  });
+
+  test("uses NTLM challenge when auth schemes are comma-separated in one header", async () => {
+    const send = vi.fn().mockResolvedValue({
+      httpResponse: {
+        headers: [{ name: "www-authenticate", value: "Negotiate, NTLM TlRMTVNTUAACAAAAAA==" }],
+      },
+    });
+    const ctx = { httpRequest: { send } } as unknown as Context;
+
+    await plugin.authentication?.onApply(ctx, {
+      values: {},
+      headers: [],
+      url: "https://example.local/resource",
+      method: "GET",
+      contextId: "ctx",
+    });
+
+    expect(ntlmMock.parseType2Message).toHaveBeenCalledWith(
+      "NTLM TlRMTVNTUAACAAAAAA==",
+      expect.any(Function),
+    );
+  });
+
+  test("throws a clear error when NTLM challenge is missing", async () => {
+    const send = vi.fn().mockResolvedValue({
+      httpResponse: { headers: [{ name: "WWW-Authenticate", value: "Negotiate" }] },
+    });
+    const ctx = { httpRequest: { send } } as unknown as Context;
+
+    await expect(
+      plugin.authentication?.onApply(ctx, {
+        values: {},
+        headers: [],
+        url: "https://example.local/resource",
+        method: "GET",
+        contextId: "ctx",
+      }),
+    ).rejects.toThrow("Unable to find NTLM challenge in WWW-Authenticate response headers");
+  });
+});
diff --git a/plugins/auth-ntlm/tsconfig.json b/plugins/auth-ntlm/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/auth-ntlm/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/auth-oauth1/package.json b/plugins/auth-oauth1/package.json
new file mode 100644
index 0000000..6277ec1
--- /dev/null
+++ b/plugins/auth-oauth1/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@yaak/auth-oauth1",
+  "displayName": "OAuth 1.0",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Authenticate requests using OAuth 1.0a",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-oauth1"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  },
+  "dependencies": {
+    "oauth-1.0a": "^2.2.6"
+  }
+}
diff --git a/plugins/auth-oauth1/src/index.ts b/plugins/auth-oauth1/src/index.ts
new file mode 100644
index 0000000..25e19b4
--- /dev/null
+++ b/plugins/auth-oauth1/src/index.ts
@@ -0,0 +1,217 @@
+import crypto from "node:crypto";
+import type { Context, GetHttpAuthenticationConfigRequest, PluginDefinition } from "@yaakapp/api";
+import OAuth from "oauth-1.0a";
+
+const signatures = {
+  HMAC_SHA1: "HMAC-SHA1",
+  HMAC_SHA256: "HMAC-SHA256",
+  HMAC_SHA512: "HMAC-SHA512",
+  RSA_SHA1: "RSA-SHA1",
+  RSA_SHA256: "RSA-SHA256",
+  RSA_SHA512: "RSA-SHA512",
+  PLAINTEXT: "PLAINTEXT",
+} as const;
+const defaultSig = signatures.HMAC_SHA1;
+
+const pkSigs = Object.values(signatures).filter((k) => k.startsWith("RSA-"));
+const nonPkSigs = Object.values(signatures).filter((k) => !pkSigs.includes(k));
+
+type SigMethod = (typeof signatures)[keyof typeof signatures];
+
+function hiddenIfNot(
+  sigMethod: SigMethod[],
+  ...other: ((values: GetHttpAuthenticationConfigRequest["values"]) => boolean)[]
+) {
+  return (_ctx: Context, { values }: GetHttpAuthenticationConfigRequest) => {
+    const hasGrantType = sigMethod.find((t) => t === String(values.signatureMethod ?? defaultSig));
+    const hasOtherBools = other.every((t) => t(values));
+    const show = hasGrantType && hasOtherBools;
+    return { hidden: !show };
+  };
+}
+
+export const plugin: PluginDefinition = {
+  authentication: {
+    name: "oauth1",
+    label: "OAuth 1.0",
+    shortLabel: "OAuth 1",
+    args: [
+      {
+        type: "banner",
+        color: "info",
+        inputs: [
+          {
+            type: "markdown",
+            content:
+              "OAuth 1.0 is still in beta. Please submit any issues to [Feedback](https://yaak.app/feedback).",
+          },
+        ],
+      },
+      {
+        name: "signatureMethod",
+        label: "Signature Method",
+        type: "select",
+        defaultValue: defaultSig,
+        options: Object.values(signatures).map((v) => ({ label: v, value: v })),
+      },
+      { name: "consumerKey", label: "Consumer Key", type: "text", password: true, optional: true },
+      {
+        name: "consumerSecret",
+        label: "Consumer Secret",
+        type: "text",
+        password: true,
+        optional: true,
+      },
+      {
+        name: "tokenKey",
+        label: "Access Token",
+        type: "text",
+        password: true,
+        optional: true,
+      },
+      {
+        name: "tokenSecret",
+        label: "Token Secret",
+        type: "text",
+        password: true,
+        optional: true,
+        dynamic: hiddenIfNot(nonPkSigs),
+      },
+      {
+        name: "privateKey",
+        label: "Private Key (RSA-SHA1)",
+        type: "text",
+        multiLine: true,
+        optional: true,
+        password: true,
+        placeholder:
+          "-----BEGIN RSA PRIVATE KEY-----\nPrivate key in PEM format\n-----END RSA PRIVATE KEY-----",
+        dynamic: hiddenIfNot(pkSigs),
+      },
+      {
+        type: "accordion",
+        label: "Advanced",
+        inputs: [
+          { name: "callback", label: "Callback Url", type: "text", optional: true },
+          { name: "verifier", label: "Verifier", type: "text", optional: true, password: true },
+          { name: "timestamp", label: "Timestamp", type: "text", optional: true },
+          { name: "nonce", label: "Nonce", type: "text", optional: true },
+          {
+            name: "version",
+            label: "OAuth Version",
+            type: "text",
+            optional: true,
+            defaultValue: "1.0",
+          },
+          { name: "realm", label: "Realm", type: "text", optional: true },
+        ],
+      },
+    ],
+
+    onApply(
+      _ctx,
+      { values, method, url },
+    ): {
+      setHeaders?: { name: string; value: string }[];
+      setQueryParameters?: { name: string; value: string }[];
+    } {
+      const consumerKey = String(values.consumerKey || "");
+      const consumerSecret = String(values.consumerSecret || "");
+
+      const signatureMethod = String(values.signatureMethod || signatures.HMAC_SHA1) as SigMethod;
+      const version = String(values.version || "1.0");
+      const realm = String(values.realm || "") || undefined;
+
+      const oauth = new OAuth({
+        consumer: { key: consumerKey, secret: consumerSecret },
+        signature_method: signatureMethod,
+        version,
+        hash_function: hashFunction(signatureMethod),
+        realm,
+      });
+
+      if (pkSigs.includes(signatureMethod)) {
+        oauth.getSigningKey = (tokenSecret?: string) => tokenSecret || "";
+      }
+
+      const requestUrl = new URL(url);
+
+      // Base request options passed to oauth-1.0a
+      const requestData: Omit<OAuth.RequestOptions, "data"> & {
+        data: Record<string, string | string[]>;
+      } = {
+        method,
+        url: requestUrl.toString(),
+        includeBodyHash: false,
+        data: {},
+      };
+
+      // (1) Include existing query params in signature base string
+      for (const key of requestUrl.searchParams.keys()) {
+        if (key.startsWith("oauth_")) continue;
+        const all = requestUrl.searchParams.getAll(key);
+        const first = all[0];
+        if (first == null) continue;
+        requestData.data[key] = all.length > 1 ? all : first;
+      }
+
+      // (2) Manual oauth_* overrides
+      if (values.callback) requestData.data.oauth_callback = String(values.callback);
+      if (values.nonce) requestData.data.oauth_nonce = String(values.nonce);
+      if (values.timestamp) requestData.data.oauth_timestamp = String(values.timestamp);
+      if (values.verifier) requestData.data.oauth_verifier = String(values.verifier);
+
+      let token: OAuth.Token | { key: string } | { secret: string } | undefined;
+
+      if (pkSigs.includes(signatureMethod)) {
+        token = {
+          key: String(values.tokenKey || ""),
+          secret: String(values.privateKey || ""),
+        };
+      } else if (values.tokenKey && values.tokenSecret) {
+        token = { key: String(values.tokenKey), secret: String(values.tokenSecret) };
+      } else if (values.tokenKey) {
+        token = { key: String(values.tokenKey) };
+      } else if (values.tokenSecret) {
+        // The secret still joins the signing key without an access token;
+        // leaving `key` out keeps oauth_token out of the header entirely
+        token = { secret: String(values.tokenSecret) };
+      }
+
+      const authParams = oauth.authorize(requestData, token as OAuth.Token | undefined);
+      const { Authorization } = oauth.toHeader(authParams);
+      return { setHeaders: [{ name: "Authorization", value: Authorization }] };
+    },
+  },
+};
+
+function hashFunction(signatureMethod: SigMethod) {
+  switch (signatureMethod) {
+    case signatures.HMAC_SHA1:
+      return (base: string, key: string) =>
+        crypto.createHmac("sha1", key).update(base).digest("base64");
+    case signatures.HMAC_SHA256:
+      return (base: string, key: string) =>
+        crypto.createHmac("sha256", key).update(base).digest("base64");
+    case signatures.HMAC_SHA512:
+      return (base: string, key: string) =>
+        crypto.createHmac("sha512", key).update(base).digest("base64");
+    case signatures.RSA_SHA1:
+      return (base: string, privateKey: string) =>
+        crypto.createSign("RSA-SHA1").update(base).sign(privateKey, "base64");
+    case signatures.RSA_SHA256:
+      return (base: string, privateKey: string) =>
+        crypto.createSign("RSA-SHA256").update(base).sign(privateKey, "base64");
+    case signatures.RSA_SHA512:
+      return (base: string, privateKey: string) =>
+        crypto.createSign("RSA-SHA512").update(base).sign(privateKey, "base64");
+    case signatures.PLAINTEXT:
+      // RFC 5849 3.4.4: the PLAINTEXT signature IS the signing key,
+      // `encoded(consumer secret)&encoded(token secret)`. Returning the base
+      // string put the whole percent-encoded request into oauth_signature.
+      return (_base: string, key: string) => key;
+    default:
+      return (base: string, key: string) =>
+        crypto.createHmac("sha1", key).update(base).digest("base64");
+  }
+}
diff --git a/plugins/auth-oauth1/tests/plaintext.test.ts b/plugins/auth-oauth1/tests/plaintext.test.ts
new file mode 100644
index 0000000..e82aacb
--- /dev/null
+++ b/plugins/auth-oauth1/tests/plaintext.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, test } from "vite-plus/test";
+import { plugin } from "../src";
+
+function sign(values: Record<string, string>): string {
+  const result = plugin.authentication!.onApply!(
+    {} as never,
+    {
+      values,
+      method: "GET",
+      url: "https://api.example.com/resource",
+    } as never,
+  ) as { setHeaders: { name: string; value: string }[] };
+  const header = result.setHeaders[0]!.value;
+  const match = header.match(/oauth_signature="([^"]*)"/);
+  return decodeURIComponent(match![1]!);
+}
+
+describe("PLAINTEXT signature", () => {
+  const base = {
+    signatureMethod: "PLAINTEXT",
+    consumerKey: "ck",
+    consumerSecret: "cs",
+    nonce: "abc123",
+    timestamp: "1700000000",
+  };
+
+  // RFC 5849 3.4.4: the PLAINTEXT signature is the signing key itself --
+  // encoded(consumer secret) "&" encoded(token secret) -- not the base string.
+  test("is the signing key, not the signature base string", () => {
+    expect(sign({ ...base, tokenKey: "tk", tokenSecret: "ts" })).toBe("cs&ts");
+  });
+
+  test("keeps the trailing separator when there is no token secret", () => {
+    expect(sign(base)).toBe("cs&");
+  });
+
+  test("includes the token secret without an access token, omitting oauth_token", () => {
+    const result = plugin.authentication!.onApply!(
+      {} as never,
+      {
+        values: { ...base, tokenSecret: "ts" },
+        method: "GET",
+        url: "https://api.example.com/resource",
+      } as never,
+    ) as { setHeaders: { name: string; value: string }[] };
+    const header = result.setHeaders[0]!.value;
+    const match = header.match(/oauth_signature="([^"]*)"/);
+    expect(decodeURIComponent(match![1]!)).toBe("cs&ts");
+    expect(header).not.toContain("oauth_token=");
+  });
+
+  test("percent-encodes reserved characters in the secrets", () => {
+    expect(sign({ ...base, consumerSecret: "c s", tokenKey: "tk", tokenSecret: "t&s" })).toBe(
+      "c%20s&t%26s",
+    );
+  });
+});
diff --git a/plugins/auth-oauth1/tsconfig.json b/plugins/auth-oauth1/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/auth-oauth1/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/auth-oauth2/README.md b/plugins/auth-oauth2/README.md
new file mode 100644
index 0000000..8f0e30b
--- /dev/null
+++ b/plugins/auth-oauth2/README.md
@@ -0,0 +1,74 @@
+# OAuth 2.0 Authentication
+
+An [OAuth 2.0](https://datatracker.ietf.org/doc/html/rfc6749) authentication plugin that
+supports multiple grant types and flows, enabling secure API authentication with OAuth 2.0
+providers.
+
+![Screenshot of OAuth 2.0 auth UI](screenshot.png)
+
+## Overview
+
+This plugin implements OAuth 2.0 authentication for requests, supporting the most common
+OAuth 2.0 grant types used in modern API integrations. It handles token management,
+automatic refresh, and [PKCE](https://datatracker.ietf.org/doc/html/rfc7636) (Proof Key
+for Code Exchange) for enhanced security.
+
+## Supported Grant Types
+
+### Authorization Code Flow
+
+The most secure and commonly used OAuth 2.0 flow for web applications.
+
+- Standard Authorization Code flow
+- Optional PKCE (Proof Key for Code Exchange) for enhanced security
+- Supports automatic token refresh
+
+### Client Credentials Flow
+
+Ideal for server-to-server authentication where no user interaction is required.
+
+### Implicit Flow
+
+Legacy flow for single-page applications (deprecated but still supported):
+
+- Direct access token retrieval
+- No refresh token support
+- Suitable for legacy integrations
+
+### Resource Owner Password Credentials Flow
+
+Direct username/password authentication.
+
+- User credentials are exchanged directly for tokens
+- Should only be used with trusted applications
+- Supports automatic token refresh
+
+## Features
+
+- **Automatic Token Management**: Handles token storage, expiration, and refresh
+  automatically
+- **PKCE Support**: Enhanced security for Authorization Code flow
+- **Token Persistence**: Stores tokens between sessions
+- **Flexible Configuration**: Supports custom authorization and token endpoints
+- **Scope Management**: Configure required OAuth scopes for your API
+- **Custom Parameters**: Add headers and params to the authorization, token, and refresh
+  requests, replacing generated entries of the same name
+- **Error Handling**: Comprehensive error handling and user feedback
+
+## Usage
+
+1. Configure the request, folder, or workspace to use OAuth 2.0 Authentication
+2. Select the appropriate grant type for your use case
+3. Fill in the required OAuth 2.0 parameters from your API provider
+4. The plugin will handle the authentication flow and token management automatically
+
+## Compatibility
+
+This plugin is compatible with OAuth 2.0 providers including:
+
+- Google APIs
+- Microsoft Graph
+- GitHub API
+- Auth0
+- Okta
+- And many other OAuth 2.0 compliant services
diff --git a/plugins/auth-oauth2/package.json b/plugins/auth-oauth2/package.json
new file mode 100644
index 0000000..f36330c
--- /dev/null
+++ b/plugins/auth-oauth2/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@yaak/auth-oauth2",
+  "displayName": "OAuth 2.0",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Authenticate requests using OAuth 2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-oauth2"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  },
+  "dependencies": {
+    "jsonwebtoken": "^9.0.2"
+  },
+  "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.7"
+  }
+}
diff --git a/plugins/auth-oauth2/src/callbackServer.ts b/plugins/auth-oauth2/src/callbackServer.ts
new file mode 100644
index 0000000..b40b476
--- /dev/null
+++ b/plugins/auth-oauth2/src/callbackServer.ts
@@ -0,0 +1,345 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+import http from "node:http";
+import type { Context } from "@yaakapp/api";
+
+export const HOSTED_CALLBACK_URL_BASE = "https://oauth.yaak.app/redirect";
+export const DEFAULT_LOCALHOST_PORT = 8765;
+const CALLBACK_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes
+
+/** Singleton: only one callback server runs at a time across all OAuth flows. */
+let activeServer: CallbackServerResult | null = null;
+
+export interface CallbackServerResult {
+  /** The port the server is listening on */
+  port: number;
+  /** The full redirect URI to register with the OAuth provider */
+  redirectUri: string;
+  /** Promise that resolves with the callback URL when received */
+  waitForCallback: () => Promise<string>;
+  /** Stop the server */
+  stop: () => void;
+}
+
+/**
+ * Start a local HTTP server to receive OAuth callbacks.
+ * Only one server runs at a time — if a previous server is still active,
+ * it is stopped before starting the new one.
+ * Returns the port, redirect URI, and a promise that resolves when the callback is received.
+ */
+export function startCallbackServer(options: {
+  /** Specific port to use, or 0 for random available port */
+  port?: number;
+  /** Path for the callback endpoint */
+  path?: string;
+  /** Timeout in milliseconds (default 5 minutes) */
+  timeoutMs?: number;
+}): Promise<CallbackServerResult> {
+  // Stop any previously active server before starting a new one
+  if (activeServer) {
+    console.log("[oauth2] Stopping previous callback server before starting new one");
+    activeServer.stop();
+    activeServer = null;
+  }
+
+  const { port = 0, path = "/callback", timeoutMs = CALLBACK_TIMEOUT_MS } = options;
+
+  return new Promise((resolve, reject) => {
+    let callbackResolve: ((url: string) => void) | null = null;
+    let callbackReject: ((err: Error) => void) | null = null;
+    let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
+    let stopped = false;
+
+    const server = http.createServer((req: IncomingMessage, res: ServerResponse) => {
+      const reqUrl = new URL(req.url ?? "/", `http://${req.headers.host}`);
+
+      // Only handle the callback path
+      if (reqUrl.pathname !== path && reqUrl.pathname !== `${path}/`) {
+        res.writeHead(404, { "Content-Type": "text/plain" });
+        res.end("Not Found");
+        return;
+      }
+
+      if (req.method === "POST") {
+        // POST: read JSON body with the final callback URL and resolve
+        let body = "";
+        req.on("data", (chunk: Buffer) => {
+          body += chunk.toString();
+        });
+        req.on("end", () => {
+          try {
+            const { url: callbackUrl } = JSON.parse(body);
+            if (!callbackUrl || typeof callbackUrl !== "string") {
+              res.writeHead(400, { "Content-Type": "text/plain" });
+              res.end("Missing url in request body");
+              return;
+            }
+
+            // Send success response
+            res.writeHead(200, { "Content-Type": "text/plain" });
+            res.end("OK");
+
+            // Resolve the callback promise
+            if (callbackResolve) {
+              callbackResolve(callbackUrl);
+              callbackResolve = null;
+              callbackReject = null;
+            }
+
+            // Stop the server after a short delay to ensure response is sent
+            setTimeout(() => stopServer(), 100);
+          } catch {
+            res.writeHead(400, { "Content-Type": "text/plain" });
+            res.end("Invalid JSON");
+          }
+        });
+        return;
+      }
+
+      // GET: serve intermediate page that reads the fragment and POSTs back
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.end(getFragmentForwardingHtml());
+    });
+
+    server.on("error", (err: Error) => {
+      if (!stopped) {
+        reject(err);
+      }
+    });
+
+    const stopServer = () => {
+      if (stopped) return;
+      stopped = true;
+
+      // Clear the singleton reference
+      if (activeServer?.stop === stopServer) {
+        activeServer = null;
+      }
+
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+        timeoutHandle = null;
+      }
+
+      server.close();
+
+      if (callbackReject) {
+        callbackReject(new Error("Callback server stopped"));
+        callbackResolve = null;
+        callbackReject = null;
+      }
+    };
+
+    server.listen(port, "127.0.0.1", () => {
+      const address = server.address();
+      if (!address || typeof address === "string") {
+        reject(new Error("Failed to get server address"));
+        return;
+      }
+
+      const actualPort = address.port;
+      const redirectUri = `http://127.0.0.1:${actualPort}${path}`;
+
+      console.log(`[oauth2] Callback server listening on ${redirectUri}`);
+
+      const result: CallbackServerResult = {
+        port: actualPort,
+        redirectUri,
+        waitForCallback: () => {
+          return new Promise<string>((res, rej) => {
+            if (stopped) {
+              rej(new Error("Callback server already stopped"));
+              return;
+            }
+
+            callbackResolve = res;
+            callbackReject = rej;
+
+            // Set timeout
+            timeoutHandle = setTimeout(() => {
+              if (callbackReject) {
+                callbackReject(new Error("Authorization timed out"));
+                callbackResolve = null;
+                callbackReject = null;
+              }
+              stopServer();
+            }, timeoutMs);
+          });
+        },
+        stop: stopServer,
+      };
+
+      activeServer = result;
+      resolve(result);
+    });
+  });
+}
+
+/**
+ * Build the redirect URI for the hosted callback page.
+ * The port is encoded in the URL path so the hosted page can redirect
+ * to the local server without relying on query params (which some OAuth
+ * providers strip). The default port is omitted for a cleaner URL.
+ */
+export function buildHostedCallbackRedirectUri(localPort: number): string {
+  if (localPort === DEFAULT_LOCALHOST_PORT) {
+    return HOSTED_CALLBACK_URL_BASE;
+  }
+  return `${HOSTED_CALLBACK_URL_BASE}/${localPort}`;
+}
+
+/**
+ * Stop the active callback server if one is running.
+ * Called during plugin dispose to ensure the server is cleaned up before the process exits.
+ */
+export function stopActiveServer(): void {
+  if (activeServer) {
+    console.log("[oauth2] Stopping active callback server during dispose");
+    activeServer.stop();
+    activeServer = null;
+  }
+}
+
+/**
+ * Open an authorization URL in the system browser, start a local callback server,
+ * and wait for the OAuth provider to redirect back.
+ *
+ * Returns the raw callback URL and the redirect URI that was registered with the
+ * OAuth provider (needed for token exchange).
+ */
+export async function getRedirectUrlViaExternalBrowser(
+  ctx: Context,
+  authorizationUrl: URL,
+  options: {
+    callbackType: "localhost" | "hosted";
+    callbackPort?: number;
+  },
+): Promise<{ callbackUrl: string; redirectUri: string }> {
+  const { callbackType, callbackPort } = options;
+
+  const port = callbackPort ?? DEFAULT_LOCALHOST_PORT;
+
+  console.log(`[oauth2] Starting callback server (type: ${callbackType}, port: ${port})`);
+
+  const server = await startCallbackServer({
+    port,
+    path: "/callback",
+  });
+
+  try {
+    // Determine the redirect URI to send to the OAuth provider
+    let oauthRedirectUri: string;
+
+    if (callbackType === "hosted") {
+      oauthRedirectUri = buildHostedCallbackRedirectUri(server.port);
+      console.log("[oauth2] Using hosted callback redirect:", oauthRedirectUri);
+    } else {
+      oauthRedirectUri = server.redirectUri;
+      console.log("[oauth2] Using localhost callback redirect:", oauthRedirectUri);
+    }
+
+    // Set the redirect URI on the authorization URL
+    authorizationUrl.searchParams.set("redirect_uri", oauthRedirectUri);
+
+    const authorizationUrlStr = authorizationUrl.toString();
+    console.log("[oauth2] Opening external browser:", authorizationUrlStr);
+
+    // Show toast to inform user
+    await ctx.toast.show({
+      message: "Opening browser for authorization...",
+      icon: "info",
+      timeout: 3000,
+    });
+
+    // Open the system browser
+    await ctx.window.openExternalUrl(authorizationUrlStr);
+
+    // Wait for the callback
+    console.log("[oauth2] Waiting for callback on", server.redirectUri);
+    const callbackUrl = await server.waitForCallback();
+
+    console.log("[oauth2] Received callback:", callbackUrl);
+
+    return { callbackUrl, redirectUri: oauthRedirectUri };
+  } finally {
+    server.stop();
+  }
+}
+
+/**
+ * Intermediate HTML page that reads the URL fragment and _fragment query param,
+ * reconstructs a proper OAuth callback URL, and POSTs it back to the server.
+ *
+ * Handles three cases:
+ * - Localhost implicit: fragment is in location.hash (e.g. #access_token=...)
+ * - Hosted implicit: fragment was converted to ?_fragment=... by the hosted redirect page
+ * - Auth code: no fragment, code is already in query params
+ */
+function getFragmentForwardingHtml(): string {
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <title>Yaak</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background: hsl(244,23%,14%);
+      color: hsl(245,23%,85%);
+    }
+    .container { text-align: center; }
+    .logo { display: block; width: 100px; height: 100px; margin: 0 auto 32px; border-radius: 50%; }
+    h1 { font-size: 28px; font-weight: 600; margin-bottom: 12px; }
+    p { font-size: 16px; color: hsl(245,18%,58%); }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <svg class="logo" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(649.94,712.03,-712.03,649.94,179.25,220.59)"><stop offset="0" stop-color="#4cc48c"/><stop offset=".5" stop-color="#476cc9"/><stop offset="1" stop-color="#ba1ab7"/></linearGradient></defs><rect x="0" y="0" width="1024" height="1024" fill="url(#g)"/><g transform="matrix(0.822,0,0,0.822,91.26,91.26)"><path d="M766.775,105.176C902.046,190.129 992.031,340.639 992.031,512C992.031,706.357 876.274,873.892 710,949.361C684.748,838.221 632.417,791.074 538.602,758.96C536.859,790.593 545.561,854.983 522.327,856.611C477.951,859.719 321.557,782.368 310.75,710.135C300.443,641.237 302.536,535.834 294.475,482.283C86.974,483.114 245.65,303.256 245.65,303.256L261.925,368.357L294.475,368.357C294.475,368.357 298.094,296.03 310.75,286.981C326.511,275.713 366.457,254.592 473.502,254.431C519.506,190.629 692.164,133.645 766.775,105.176ZM603.703,352.082C598.577,358.301 614.243,384.787 623.39,401.682C639.967,432.299 672.34,459.32 760.231,456.739C780.796,456.135 808.649,456.743 831.555,448.316C919.689,369.191 665.548,260.941 652.528,270.706C629.157,288.235 677.433,340.481 685.079,352.082C663.595,350.818 630.521,352.121 603.703,352.082ZM515.817,516.822C491.026,516.822 470.898,536.949 470.898,561.741C470.898,586.532 491.026,606.66 515.817,606.66C540.609,606.66 560.736,586.532 560.736,561.741C560.736,536.949 540.609,516.822 515.817,516.822ZM656.608,969.83C610.979,984.25 562.391,992.031 512,992.031C247.063,992.031 31.969,776.937 31.969,512C31.969,247.063 247.063,31.969 512,31.969C581.652,31.969 647.859,46.835 707.634,73.574C674.574,86.913 627.224,104.986 620,103.081C343.573,30.201 98.64,283.528 98.64,511.993C98.64,761.842 376.244,989.043 627.831,910C637.21,907.053 645.743,936.753 656.608,969.83Z" fill="#fff"/></g></svg>
+    <h1 id="title">Authorizing...</h1>
+    <p id="message">Please wait</p>
+  </div>
+  <script>
+  (function() {
+    var title = document.getElementById('title');
+    var message = document.getElementById('message');
+    var url = new URL(window.location.href);
+    var fragment = window.location.hash;
+    var fragmentParam = url.searchParams.get('_fragment');
+
+    // Build the final callback URL:
+    // 1. If _fragment query param exists (from hosted redirect), convert it back to a real fragment
+    // 2. If location.hash exists (direct localhost implicit), use it as-is
+    // 3. Otherwise (auth code flow), use the URL as-is with query params
+    if (fragmentParam) {
+      url.searchParams.delete('_fragment');
+      url.hash = fragmentParam;
+    } else if (fragment && fragment.length > 1) {
+      url.hash = fragment;
+    }
+
+    // POST the final URL back to the callback server
+    fetch(url.pathname, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url: url.toString() })
+    }).then(function(res) {
+      if (res.ok) {
+        title.textContent = 'Authorization Complete';
+        message.textContent = 'You may close this tab and return to Yaak';
+      } else {
+        title.textContent = 'Authorization Failed';
+        message.textContent = 'Something went wrong. Please try again.';
+      }
+    }).catch(function() {
+      title.textContent = 'Authorization Failed';
+      message.textContent = 'Something went wrong. Please try again.';
+    });
+  })();
+  </script>
+</body>
+</html>`;
+}
diff --git a/plugins/auth-oauth2/src/customParams.ts b/plugins/auth-oauth2/src/customParams.ts
new file mode 100644
index 0000000..e1a9c3b
--- /dev/null
+++ b/plugins/auth-oauth2/src/customParams.ts
@@ -0,0 +1,121 @@
+import type { JsonPrimitive } from "@yaakapp/api";
+
+export interface NameValue {
+  name: string;
+  value: string;
+}
+
+/** Custom entries for a single outgoing request */
+export interface CustomRequestParams {
+  headers: NameValue[];
+  body: NameValue[];
+}
+
+export interface CustomParams {
+  /** Query parameters appended to the authorization URL */
+  authorizationQuery: NameValue[];
+  token: CustomRequestParams;
+  /** Already merged over `token`, so the refresh request only reads this */
+  refresh: CustomRequestParams;
+}
+
+export const NO_CUSTOM_PARAMS: CustomParams = {
+  authorizationQuery: [],
+  token: { headers: [], body: [] },
+  refresh: { headers: [], body: [] },
+};
+
+/**
+ * A key_value form input stores its rows as a JSON-encoded array of pairs. The
+ * whole string goes through the template engine before it reaches the plugin,
+ * so a row's value can be a template.
+ */
+export function parsePairs(value: JsonPrimitive | undefined): NameValue[] {
+  if (value == null || value === "") return [];
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(String(value));
+  } catch {
+    console.log("[oauth2] Ignoring custom parameters that failed to parse");
+    return [];
+  }
+
+  if (!Array.isArray(parsed)) return [];
+
+  const pairs: NameValue[] = [];
+  for (const row of parsed) {
+    if (row == null || typeof row !== "object") continue;
+    const { name, value, enabled } = row as { name?: unknown; value?: unknown; enabled?: unknown };
+    if (enabled === false) continue;
+    const trimmedName = typeof name === "string" ? name.trim() : "";
+    if (trimmedName === "") continue;
+    pairs.push({ name: trimmedName, value: rowValue(value) });
+  }
+
+  return pairs;
+}
+
+/** The pair editor writes strings, but a hand-edited file may hold any primitive */
+function rowValue(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return "";
+}
+
+/**
+ * Read every custom parameter list off the auth form.
+ *
+ * Token entries also apply to the refresh request, so the refresh lists are the
+ * token lists with the refresh-specific rows merged over them.
+ */
+export function readCustomParams(values: Record<string, JsonPrimitive | undefined>): CustomParams {
+  const tokenHeaders = parsePairs(values.tokenHeaders);
+  const tokenBody = parsePairs(values.tokenBodyParams);
+
+  return {
+    authorizationQuery: parsePairs(values.authorizationParams),
+    token: { headers: tokenHeaders, body: tokenBody },
+    refresh: {
+      headers: mergeHeaders(tokenHeaders, parsePairs(values.refreshHeaders)),
+      body: mergeFormParams(tokenBody, parsePairs(values.refreshBodyParams)),
+    },
+  };
+}
+
+/**
+ * Custom entries win over generated ones of the same name: every generated
+ * entry the custom list names is dropped, then the custom list is appended.
+ * Dropping by name rather than replacing in place means two custom rows sharing
+ * a name both survive, which repeatable headers and params rely on.
+ */
+function mergeByName<T extends NameValue>(
+  generated: T[],
+  custom: NameValue[],
+  { caseInsensitive }: { caseInsensitive: boolean },
+): (T | NameValue)[] {
+  if (custom.length === 0) return generated;
+
+  const normalize = (name: string) => (caseInsensitive ? name.toLowerCase() : name);
+  const overridden = new Set(custom.map((c) => normalize(c.name)));
+
+  return [...generated.filter((g) => !overridden.has(normalize(g.name))), ...custom];
+}
+
+export function mergeHeaders<T extends NameValue>(generated: T[], custom: NameValue[]) {
+  return mergeByName(generated, custom, { caseInsensitive: true });
+}
+
+export function mergeFormParams<T extends NameValue>(generated: T[], custom: NameValue[]) {
+  return mergeByName(generated, custom, { caseInsensitive: false });
+}
+
+/** Apply custom query parameters to an authorization URL, in place */
+export function applyQueryParams(url: URL, custom: NameValue[]) {
+  for (const name of new Set(custom.map((c) => c.name))) {
+    url.searchParams.delete(name);
+  }
+  for (const { name, value } of custom) {
+    url.searchParams.append(name, value);
+  }
+}
diff --git a/plugins/auth-oauth2/src/fetchAccessToken.ts b/plugins/auth-oauth2/src/fetchAccessToken.ts
new file mode 100644
index 0000000..9b7372d
--- /dev/null
+++ b/plugins/auth-oauth2/src/fetchAccessToken.ts
@@ -0,0 +1,104 @@
+import type { Context, HttpRequest, HttpUrlParameter } from "@yaakapp/api";
+import type { CustomRequestParams } from "./customParams";
+import { mergeFormParams, mergeHeaders } from "./customParams";
+import type { AccessTokenRawResponse } from "./store";
+
+export async function fetchAccessToken(
+  ctx: Context,
+  args: {
+    clientId: string;
+    grantType: string;
+    accessTokenUrl: string;
+    scope: string | null;
+    audience: string | null;
+    params: HttpUrlParameter[];
+    custom?: CustomRequestParams;
+  } & ({ clientAssertion: string } | { clientSecret: string; credentialsInBody: boolean }),
+): Promise<AccessTokenRawResponse> {
+  const { clientId, grantType, accessTokenUrl, scope, audience, params, custom } = args;
+  console.log("[oauth2] Getting access token", accessTokenUrl);
+  const httpRequest: Partial<HttpRequest> = {
+    method: "POST",
+    url: accessTokenUrl,
+    bodyType: "application/x-www-form-urlencoded",
+    body: {
+      form: [{ name: "grant_type", value: grantType }, ...params],
+    },
+    headers: [
+      { name: "User-Agent", value: "yaak" },
+      {
+        name: "Accept",
+        value: "application/x-www-form-urlencoded, application/json",
+      },
+      { name: "Content-Type", value: "application/x-www-form-urlencoded" },
+    ],
+  };
+
+  // RFC 6749 §4.1.3 doesn't define scope for the authorization code token
+  // request, so strict servers (OpenIddict) reject it outright. Scope belongs on
+  // the authorize request, which already sends it. Every other grant does define
+  // it: §4.3.2 password, §4.4.2 client credentials, §6 refresh.
+  if (scope && grantType !== "authorization_code") {
+    httpRequest.body?.form.push({ name: "scope", value: scope });
+  }
+  if (audience) httpRequest.body?.form.push({ name: "audience", value: audience });
+
+  if ("clientAssertion" in args) {
+    httpRequest.body?.form.push({ name: "client_id", value: clientId });
+    httpRequest.body?.form.push({
+      name: "client_assertion_type",
+      value: "urn:ietf:params:oauth:client-assertion-type:jwt-bearer",
+    });
+    httpRequest.body?.form.push({
+      name: "client_assertion",
+      value: args.clientAssertion,
+    });
+  } else if (args.credentialsInBody) {
+    httpRequest.body?.form.push({ name: "client_id", value: clientId });
+    httpRequest.body?.form.push({
+      name: "client_secret",
+      value: args.clientSecret,
+    });
+  } else {
+    const value = `Basic ${Buffer.from(`${clientId}:${args.clientSecret}`).toString("base64")}`;
+    httpRequest.headers?.push({ name: "Authorization", value });
+  }
+
+  // Merged last so custom entries override the credential headers and params above
+  if (custom) {
+    httpRequest.headers = mergeHeaders(httpRequest.headers ?? [], custom.headers);
+    httpRequest.body = { form: mergeFormParams(httpRequest.body?.form ?? [], custom.body) };
+  }
+
+  httpRequest.authenticationType = "none"; // Don't inherit workspace auth
+  const { httpResponse: resp, body: responseBody } = await ctx.httpRequest.send({ httpRequest });
+
+  console.log("[oauth2] Got access token response", resp.status);
+
+  if (resp.error) {
+    throw new Error(`Failed to fetch access token: ${resp.error}`);
+  }
+
+  // A token request is sent ad-hoc, with no id, so nothing saves the response
+  // and this body is the only copy of it. An empty one parses to {} below,
+  // which is what reading a missing file used to give.
+  const body = await responseBody.text();
+
+  if (resp.status < 200 || resp.status >= 300) {
+    throw new Error(`Failed to fetch access token with status=${resp.status} and body=${body}`);
+  }
+
+  // oxlint-disable-next-line no-explicit-any
+  let response: any;
+  try {
+    response = JSON.parse(body);
+  } catch {
+    response = Object.fromEntries(new URLSearchParams(body));
+  }
+
+  if (response.error) {
+    throw new Error(`Failed to fetch access token with ${response.error}`);
+  }
+
+  return response;
+}
diff --git a/plugins/auth-oauth2/src/getOrRefreshAccessToken.ts b/plugins/auth-oauth2/src/getOrRefreshAccessToken.ts
new file mode 100644
index 0000000..abc38f2
--- /dev/null
+++ b/plugins/auth-oauth2/src/getOrRefreshAccessToken.ts
@@ -0,0 +1,128 @@
+import type { Context, HttpRequest } from "@yaakapp/api";
+import type { CustomRequestParams } from "./customParams";
+import { mergeFormParams, mergeHeaders } from "./customParams";
+import type { AccessToken, AccessTokenRawResponse, TokenStoreArgs } from "./store";
+import { deleteToken, getToken, storeToken } from "./store";
+import { isTokenExpired } from "./util";
+
+export async function getOrRefreshAccessToken(
+  ctx: Context,
+  tokenArgs: TokenStoreArgs,
+  {
+    scope,
+    accessTokenUrl,
+    credentialsInBody,
+    clientId,
+    clientSecret,
+    tokenName,
+    forceRefresh,
+    custom,
+  }: {
+    scope: string | null;
+    accessTokenUrl: string;
+    credentialsInBody: boolean;
+    clientId: string;
+    clientSecret: string;
+    tokenName?: "access_token" | "id_token";
+    forceRefresh?: boolean;
+    custom?: CustomRequestParams;
+  },
+): Promise<AccessToken | null> {
+  const token = await getToken(ctx, tokenArgs);
+  if (token == null) {
+    return null;
+  }
+
+  const isExpired = isTokenExpired(token, tokenName);
+
+  // Return the current access token if it's still valid
+  if (!isExpired && !forceRefresh) {
+    return token;
+  }
+
+  // Token is expired, but there's no refresh token :(
+  if (!token.response.refresh_token) {
+    return null;
+  }
+
+  // Access token is expired, so get a new one
+  const httpRequest: Partial<HttpRequest> = {
+    method: "POST",
+    url: accessTokenUrl,
+    bodyType: "application/x-www-form-urlencoded",
+    body: {
+      form: [
+        { name: "grant_type", value: "refresh_token" },
+        { name: "refresh_token", value: token.response.refresh_token },
+      ],
+    },
+    headers: [
+      { name: "User-Agent", value: "yaak" },
+      { name: "Accept", value: "application/x-www-form-urlencoded, application/json" },
+      { name: "Content-Type", value: "application/x-www-form-urlencoded" },
+    ],
+  };
+
+  if (scope) httpRequest.body?.form.push({ name: "scope", value: scope });
+
+  if (credentialsInBody) {
+    httpRequest.body?.form.push({ name: "client_id", value: clientId });
+    httpRequest.body?.form.push({ name: "client_secret", value: clientSecret });
+  } else {
+    const value = `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString("base64")}`;
+    httpRequest.headers?.push({ name: "Authorization", value });
+  }
+
+  // Merged last so custom entries override the credential headers and params above
+  if (custom) {
+    httpRequest.headers = mergeHeaders(httpRequest.headers ?? [], custom.headers);
+    httpRequest.body = { form: mergeFormParams(httpRequest.body?.form ?? [], custom.body) };
+  }
+
+  httpRequest.authenticationType = "none"; // Don't inherit workspace auth
+  const { httpResponse: resp, body: responseBody } = await ctx.httpRequest.send({ httpRequest });
+
+  if (resp.error) {
+    throw new Error(`Failed to refresh access token: ${resp.error}`);
+  }
+
+  if (resp.status >= 400 && resp.status < 500) {
+    // Client errors (4xx) indicate the refresh token is invalid, expired, or revoked
+    // Delete the token and return null to trigger a fresh authorization flow
+    console.log("[oauth2] Refresh token request failed with client error, deleting token");
+    await deleteToken(ctx, tokenArgs);
+    return null;
+  }
+
+  // Sent ad-hoc, so this body came back with the response rather than being
+  // saved anywhere to read later.
+  const body = await responseBody.text();
+
+  console.log("[oauth2] Got refresh token response", resp.status);
+
+  if (resp.status < 200 || resp.status >= 300) {
+    throw new Error(`Failed to refresh access token with status=${resp.status} and body=${body}`);
+  }
+
+  // oxlint-disable-next-line no-explicit-any
+  let response: any;
+  try {
+    response = JSON.parse(body);
+  } catch {
+    response = Object.fromEntries(new URLSearchParams(body));
+  }
+
+  if (response.error) {
+    throw new Error(
+      `Failed to fetch access token with ${response.error} -> ${response.error_description}`,
+    );
+  }
+
+  const newResponse: AccessTokenRawResponse = {
+    ...response,
+    // Assign a new one or keep the old one,
+    refresh_token: response.refresh_token ?? token.response.refresh_token,
+  };
+
+  return storeToken(ctx, tokenArgs, newResponse, tokenName);
+}
diff --git a/plugins/auth-oauth2/src/grants/authorizationCode.ts b/plugins/auth-oauth2/src/grants/authorizationCode.ts
new file mode 100644
index 0000000..54f8ace
--- /dev/null
+++ b/plugins/auth-oauth2/src/grants/authorizationCode.ts
@@ -0,0 +1,218 @@
+import { createHash, randomBytes } from "node:crypto";
+import type { Context } from "@yaakapp/api";
+import { getRedirectUrlViaExternalBrowser } from "../callbackServer";
+import type { CustomParams } from "../customParams";
+import { applyQueryParams, NO_CUSTOM_PARAMS } from "../customParams";
+import { fetchAccessToken } from "../fetchAccessToken";
+import { getOrRefreshAccessToken } from "../getOrRefreshAccessToken";
+import type { AccessToken, TokenStoreArgs } from "../store";
+import { getDataDirKey, storeToken } from "../store";
+import { extractCode } from "../util";
+
+export const PKCE_SHA256 = "S256";
+export const PKCE_PLAIN = "plain";
+export const DEFAULT_PKCE_METHOD = PKCE_SHA256;
+
+export type CallbackType = "localhost" | "hosted";
+
+export interface ExternalBrowserOptions {
+  useExternalBrowser: boolean;
+  callbackType: CallbackType;
+  /** Port for localhost callback (only used when callbackType is 'localhost') */
+  callbackPort?: number;
+}
+
+export async function getAuthorizationCode(
+  ctx: Context,
+  contextId: string,
+  {
+    authorizationUrl: authorizationUrlRaw,
+    accessTokenUrl,
+    clientId,
+    clientSecret,
+    redirectUri,
+    scope,
+    state,
+    audience,
+    credentialsInBody,
+    pkce,
+    tokenName,
+    externalBrowser,
+    customParams = NO_CUSTOM_PARAMS,
+  }: {
+    authorizationUrl: string;
+    accessTokenUrl: string;
+    clientId: string;
+    clientSecret: string;
+    redirectUri: string | null;
+    scope: string | null;
+    state: string | null;
+    audience: string | null;
+    credentialsInBody: boolean;
+    pkce: {
+      challengeMethod: string;
+      codeVerifier: string;
+    } | null;
+    tokenName: "access_token" | "id_token";
+    externalBrowser?: ExternalBrowserOptions;
+    customParams?: CustomParams;
+  },
+): Promise<AccessToken> {
+  const tokenArgs: TokenStoreArgs = {
+    contextId,
+    clientId,
+    accessTokenUrl,
+    authorizationUrl: authorizationUrlRaw,
+  };
+
+  const token = await getOrRefreshAccessToken(ctx, tokenArgs, {
+    accessTokenUrl,
+    scope,
+    clientId,
+    clientSecret,
+    credentialsInBody,
+    tokenName,
+    custom: customParams.refresh,
+  });
+  if (token != null) {
+    return token;
+  }
+
+  let authorizationUrl: URL;
+  try {
+    authorizationUrl = new URL(`${authorizationUrlRaw ?? ""}`);
+  } catch {
+    throw new Error(`Invalid authorization URL "${authorizationUrlRaw}"`);
+  }
+  authorizationUrl.searchParams.set("response_type", "code");
+  authorizationUrl.searchParams.set("client_id", clientId);
+  if (scope) authorizationUrl.searchParams.set("scope", scope);
+  if (state) authorizationUrl.searchParams.set("state", state);
+  if (audience) authorizationUrl.searchParams.set("audience", audience);
+  if (pkce) {
+    authorizationUrl.searchParams.set(
+      "code_challenge",
+      pkceCodeChallenge(pkce.codeVerifier, pkce.challengeMethod),
+    );
+    authorizationUrl.searchParams.set("code_challenge_method", pkce.challengeMethod);
+  }
+
+  // Applied before redirect_uri, which belongs to the callback flow rather than
+  // to the user: overriding it would send the code somewhere nothing listens
+  applyQueryParams(authorizationUrl, customParams.authorizationQuery);
+
+  let code: string;
+  let actualRedirectUri: string | null = redirectUri;
+
+  // Use external browser flow if enabled
+  if (externalBrowser?.useExternalBrowser) {
+    const result = await getRedirectUrlViaExternalBrowser(ctx, authorizationUrl, {
+      callbackType: externalBrowser.callbackType,
+      callbackPort: externalBrowser.callbackPort,
+    });
+    // Pass null to skip redirect URI matching — the callback came from our own local server
+    const extractedCode = extractCode(result.callbackUrl, null);
+    if (!extractedCode) {
+      throw new Error("No authorization code found in callback URL");
+    }
+    code = extractedCode;
+    actualRedirectUri = result.redirectUri;
+  } else {
+    // Use embedded browser flow (original behavior)
+    if (redirectUri) {
+      authorizationUrl.searchParams.set("redirect_uri", redirectUri);
+    }
+    code = await getCodeViaEmbeddedBrowser(ctx, contextId, authorizationUrl, redirectUri);
+  }
+
+  console.log("[oauth2] Code found");
+  const response = await fetchAccessToken(ctx, {
+    grantType: "authorization_code",
+    accessTokenUrl,
+    clientId,
+    clientSecret,
+    scope,
+    audience,
+    credentialsInBody,
+    params: [
+      { name: "code", value: code },
+      ...(pkce ? [{ name: "code_verifier", value: pkce.codeVerifier }] : []),
+      ...(actualRedirectUri ? [{ name: "redirect_uri", value: actualRedirectUri }] : []),
+    ],
+    custom: customParams.token,
+  });
+
+  return storeToken(ctx, tokenArgs, response, tokenName);
+}
+
+/**
+ * Get authorization code using the embedded browser window.
+ * This is the original flow that monitors navigation events.
+ */
+async function getCodeViaEmbeddedBrowser(
+  ctx: Context,
+  contextId: string,
+  authorizationUrl: URL,
+  redirectUri: string | null,
+): Promise<string> {
+  const dataDirKey = await getDataDirKey(ctx, contextId);
+  const authorizationUrlStr = authorizationUrl.toString();
+  console.log("[oauth2] Authorizing via embedded browser", authorizationUrlStr);
+
+  // oxlint-disable-next-line no-async-promise-executor -- Required for this pattern
+  return new Promise<string>(async (resolve, reject) => {
+    let foundCode = false;
+    const { close } = await ctx.window.openUrl({
+      dataDirKey,
+      url: authorizationUrlStr,
+      label: "oauth-authorization-url",
+      async onClose() {
+        if (!foundCode) {
+          reject(new Error("Authorization window closed"));
+        }
+      },
+      async onNavigate({ url: urlStr }) {
+        let code: string | null;
+        try {
+          code = extractCode(urlStr, redirectUri);
+        } catch (err) {
+          reject(err);
+          close();
+          return;
+        }
+
+        if (!code) {
+          return;
+        }
+
+        foundCode = true;
+        close();
+        resolve(code);
+      },
+    });
+  });
+}
+
+export function genPkceCodeVerifier() {
+  return encodeForPkce(randomBytes(32));
+}
+
+function pkceCodeChallenge(verifier: string, method: string) {
+  if (method === "plain") {
+    return verifier;
+  }
+
+  const hash = encodeForPkce(createHash("sha256").update(verifier).digest());
+  return hash
+    .replace(/=/g, "") // Remove padding '='
+    .replace(/\+/g, "-") // Replace '+' with '-'
+    .replace(/\//g, "_"); // Replace '/' with '_'
+}
+
+function encodeForPkce(bytes: Buffer) {
+  return bytes
+    .toString("base64")
+    .replace(/=/g, "") // Remove padding '='
+    .replace(/\+/g, "-") // Replace '+' with '-'
+    .replace(/\//g, "_"); // Replace '/' with '_'
+}
diff --git a/plugins/auth-oauth2/src/grants/clientCredentials.ts b/plugins/auth-oauth2/src/grants/clientCredentials.ts
new file mode 100644
index 0000000..222e479
--- /dev/null
+++ b/plugins/auth-oauth2/src/grants/clientCredentials.ts
@@ -0,0 +1,175 @@
+import { createPrivateKey, randomUUID } from "node:crypto";
+import type { Context } from "@yaakapp/api";
+import jwt, { type Algorithm } from "jsonwebtoken";
+import type { CustomParams } from "../customParams";
+import { NO_CUSTOM_PARAMS } from "../customParams";
+import { fetchAccessToken } from "../fetchAccessToken";
+import type { TokenStoreArgs } from "../store";
+import { getToken, storeToken } from "../store";
+import { isTokenExpired } from "../util";
+
+export const jwtAlgorithms = [
+  "HS256",
+  "HS384",
+  "HS512",
+  "RS256",
+  "RS384",
+  "RS512",
+  "PS256",
+  "PS384",
+  "PS512",
+  "ES256",
+  "ES384",
+  "ES512",
+  "none",
+] as const;
+
+export const defaultJwtAlgorithm = jwtAlgorithms[0];
+
+/**
+ * Build a signed JWT for the client_assertion parameter (RFC 7523).
+ *
+ * The `secret` value is auto-detected as one of:
+ *   - **JWK** – a JSON string containing a private-key object (has a `kty` field).
+ *   - **PEM** – a string whose trimmed form starts with `-----`.
+ *   - **HMAC secret** – anything else, used as-is for HS* algorithms.
+ */
+function buildClientAssertionJwt(params: {
+  clientId: string;
+  accessTokenUrl: string;
+  secret: string;
+  algorithm: Algorithm;
+}): string {
+  const { clientId, accessTokenUrl, secret, algorithm } = params;
+
+  const isHmac = algorithm.startsWith("HS") || algorithm === "none";
+
+  // Resolve the signing key depending on format
+  let signingKey: jwt.Secret;
+  let kid: string | undefined;
+
+  const trimmed = secret.trim();
+
+  if (isHmac) {
+    // HMAC algorithms use the raw secret (string or Buffer)
+    signingKey = secret;
+  } else if (trimmed.startsWith("{")) {
+    // Looks like JSON - treat as JWK. There is surely a better way to detect JWK vs a raw secret, but this should work in most cases.
+    // oxlint-disable-next-line no-explicit-any
+    let jwk: any;
+    try {
+      jwk = JSON.parse(trimmed);
+    } catch {
+      throw new Error("Client Assertion secret looks like JSON but is not valid");
+    }
+
+    kid = jwk?.kid;
+    signingKey = createPrivateKey({ key: jwk, format: "jwk" });
+  } else if (trimmed.startsWith("-----")) {
+    // PEM-encoded key
+    signingKey = createPrivateKey({ key: trimmed, format: "pem" });
+  } else {
+    throw new Error(
+      "Client Assertion secret must be a JWK JSON object, a PEM-encoded key " +
+        "(starting with -----), or a raw secret for HMAC algorithms.",
+    );
+  }
+
+  const now = Math.floor(Date.now() / 1000);
+  const payload = {
+    iss: clientId,
+    sub: clientId,
+    aud: accessTokenUrl,
+    iat: now,
+    exp: now + 300, // 5 minutes
+    jti: randomUUID(),
+  };
+
+  // Build the JWT header; include "kid" when available
+  const header: jwt.JwtHeader = { alg: algorithm, typ: "JWT" };
+  if (kid) {
+    header.kid = kid;
+  }
+
+  return jwt.sign(JSON.stringify(payload), signingKey, {
+    algorithm: algorithm as jwt.Algorithm,
+    header,
+  });
+}
+
+export async function getClientCredentials(
+  ctx: Context,
+  contextId: string,
+  {
+    accessTokenUrl,
+    clientId,
+    clientSecret,
+    scope,
+    audience,
+    credentialsInBody,
+    clientAssertionSecret,
+    clientAssertionSecretBase64,
+    clientCredentialsMethod,
+    clientAssertionAlgorithm,
+    customParams = NO_CUSTOM_PARAMS,
+  }: {
+    accessTokenUrl: string;
+    clientId: string;
+    clientSecret: string;
+    scope: string | null;
+    audience: string | null;
+    credentialsInBody: boolean;
+    clientAssertionSecret: string;
+    clientAssertionSecretBase64: boolean;
+    clientCredentialsMethod: string;
+    clientAssertionAlgorithm: string;
+    customParams?: CustomParams;
+  },
+) {
+  const tokenArgs: TokenStoreArgs = {
+    contextId,
+    clientId,
+    accessTokenUrl,
+    authorizationUrl: null,
+  };
+  const token = await getToken(ctx, tokenArgs);
+  if (token && !isTokenExpired(token)) {
+    return token;
+  }
+
+  const common: Omit<
+    Parameters<typeof fetchAccessToken>[1],
+    "clientAssertion" | "clientSecret" | "credentialsInBody"
+  > = {
+    grantType: "client_credentials",
+    accessTokenUrl,
+    audience,
+    clientId,
+    scope,
+    params: [],
+    custom: customParams.token,
+  };
+
+  const fetchParams: Parameters<typeof fetchAccessToken>[1] =
+    clientCredentialsMethod === "client_assertion"
+      ? {
+          ...common,
+          clientAssertion: buildClientAssertionJwt({
+            clientId,
+            algorithm: clientAssertionAlgorithm as Algorithm,
+            accessTokenUrl,
+            secret: clientAssertionSecretBase64
+              ? Buffer.from(clientAssertionSecret, "base64").toString("utf-8")
+              : clientAssertionSecret,
+          }),
+        }
+      : {
+          ...common,
+          clientSecret,
+          credentialsInBody,
+        };
+
+  const response = await fetchAccessToken(ctx, fetchParams);
+
+  return storeToken(ctx, tokenArgs, response);
+}
diff --git a/plugins/auth-oauth2/src/grants/implicit.ts b/plugins/auth-oauth2/src/grants/implicit.ts
new file mode 100644
index 0000000..ebbf210
--- /dev/null
+++ b/plugins/auth-oauth2/src/grants/implicit.ts
@@ -0,0 +1,207 @@
+import type { Context } from "@yaakapp/api";
+import { getRedirectUrlViaExternalBrowser } from "../callbackServer";
+import type { CustomParams } from "../customParams";
+import { applyQueryParams, NO_CUSTOM_PARAMS } from "../customParams";
+import type { AccessToken, AccessTokenRawResponse } from "../store";
+import { getDataDirKey, getToken, storeToken } from "../store";
+import { isTokenExpired } from "../util";
+import type { ExternalBrowserOptions } from "./authorizationCode";
+
+export async function getImplicit(
+  ctx: Context,
+  contextId: string,
+  {
+    authorizationUrl: authorizationUrlRaw,
+    responseType,
+    clientId,
+    redirectUri,
+    scope,
+    state,
+    audience,
+    tokenName,
+    externalBrowser,
+    customParams = NO_CUSTOM_PARAMS,
+  }: {
+    authorizationUrl: string;
+    responseType: string;
+    clientId: string;
+    redirectUri: string | null;
+    scope: string | null;
+    state: string | null;
+    audience: string | null;
+    tokenName: "access_token" | "id_token";
+    externalBrowser?: ExternalBrowserOptions;
+    customParams?: CustomParams;
+  },
+): Promise<AccessToken> {
+  const tokenArgs = {
+    contextId,
+    clientId,
+    accessTokenUrl: null,
+    authorizationUrl: authorizationUrlRaw,
+  };
+  const token = await getToken(ctx, tokenArgs);
+  if (token != null && !isTokenExpired(token, tokenName)) {
+    return token;
+  }
+
+  let authorizationUrl: URL;
+  try {
+    authorizationUrl = new URL(`${authorizationUrlRaw ?? ""}`);
+  } catch {
+    throw new Error(`Invalid authorization URL "${authorizationUrlRaw}"`);
+  }
+  authorizationUrl.searchParams.set("response_type", responseType);
+  authorizationUrl.searchParams.set("client_id", clientId);
+  if (scope) authorizationUrl.searchParams.set("scope", scope);
+  if (state) authorizationUrl.searchParams.set("state", state);
+  if (audience) authorizationUrl.searchParams.set("audience", audience);
+  if (responseType.includes("id_token")) {
+    authorizationUrl.searchParams.set(
+      "nonce",
+      String(Math.floor(Math.random() * 9999999999999) + 1),
+    );
+  }
+
+  // Applied before redirect_uri, which belongs to the callback flow rather than
+  // to the user: overriding it would send the token somewhere nothing listens
+  applyQueryParams(authorizationUrl, customParams.authorizationQuery);
+
+  let newToken: AccessToken;
+
+  // Use external browser flow if enabled
+  if (externalBrowser?.useExternalBrowser) {
+    const result = await getRedirectUrlViaExternalBrowser(ctx, authorizationUrl, {
+      callbackType: externalBrowser.callbackType,
+      callbackPort: externalBrowser.callbackPort,
+    });
+    newToken = await extractImplicitToken(ctx, result.callbackUrl, tokenArgs, tokenName);
+  } else {
+    // Use embedded browser flow (original behavior)
+    if (redirectUri) {
+      authorizationUrl.searchParams.set("redirect_uri", redirectUri);
+    }
+    newToken = await getTokenViaEmbeddedBrowser(
+      ctx,
+      contextId,
+      authorizationUrl,
+      tokenArgs,
+      tokenName,
+    );
+  }
+
+  return newToken;
+}
+
+/**
+ * Get token using the embedded browser window.
+ * This is the original flow that monitors navigation events.
+ */
+async function getTokenViaEmbeddedBrowser(
+  ctx: Context,
+  contextId: string,
+  authorizationUrl: URL,
+  tokenArgs: {
+    contextId: string;
+    clientId: string;
+    accessTokenUrl: null;
+    authorizationUrl: string;
+  },
+  tokenName: "access_token" | "id_token",
+): Promise<AccessToken> {
+  const dataDirKey = await getDataDirKey(ctx, contextId);
+  const authorizationUrlStr = authorizationUrl.toString();
+  console.log("[oauth2] Authorizing via embedded browser (implicit)", authorizationUrlStr);
+
+  // oxlint-disable-next-line no-async-promise-executor -- Required for this pattern
+  return new Promise<AccessToken>(async (resolve, reject) => {
+    let foundAccessToken = false;
+    const { close } = await ctx.window.openUrl({
+      dataDirKey,
+      url: authorizationUrlStr,
+      label: "oauth-authorization-url",
+      async onClose() {
+        if (!foundAccessToken) {
+          reject(new Error("Authorization window closed"));
+        }
+      },
+      async onNavigate({ url: urlStr }) {
+        const url = new URL(urlStr);
+        if (url.searchParams.has("error")) {
+          return reject(Error(`Failed to authorize: ${url.searchParams.get("error")}`));
+        }
+
+        const hash = url.hash.slice(1);
+        const params = new URLSearchParams(hash);
+
+        const accessToken = params.get(tokenName);
+        if (!accessToken) {
+          return;
+        }
+        foundAccessToken = true;
+
+        // Close the window here, because we don't need it anymore
+        close();
+
+        const response = Object.fromEntries(params) as unknown as AccessTokenRawResponse;
+        try {
+          resolve(storeToken(ctx, tokenArgs, response, tokenName));
+        } catch (err) {
+          reject(err);
+        }
+      },
+    });
+  });
+}
+
+/**
+ * Extract the implicit grant token from a callback URL and store it.
+ */
+async function extractImplicitToken(
+  ctx: Context,
+  callbackUrl: string,
+  tokenArgs: {
+    contextId: string;
+    clientId: string;
+    accessTokenUrl: null;
+    authorizationUrl: string;
+  },
+  tokenName: "access_token" | "id_token",
+): Promise<AccessToken> {
+  const url = new URL(callbackUrl);
+
+  // Check for errors
+  if (url.searchParams.has("error")) {
+    throw new Error(`Failed to authorize: ${url.searchParams.get("error")}`);
+  }
+
+  // Extract token from fragment
+  const hash = url.hash.slice(1);
+  const params = new URLSearchParams(hash);
+
+  // Also check query params (in case fragment was converted)
+  const accessToken = params.get(tokenName) ?? url.searchParams.get(tokenName);
+  if (!accessToken) {
+    throw new Error(`No ${tokenName} found in callback URL`);
+  }
+
+  // Build response from params (prefer fragment, fall back to query)
+  const response: AccessTokenRawResponse = {
+    access_token: params.get("access_token") ?? url.searchParams.get("access_token") ?? "",
+    token_type: params.get("token_type") ?? url.searchParams.get("token_type") ?? undefined,
+    expires_in: params.has("expires_in")
+      ? parseInt(params.get("expires_in") ?? "0", 10)
+      : url.searchParams.has("expires_in")
+        ? parseInt(url.searchParams.get("expires_in") ?? "0", 10)
+        : undefined,
+    scope: params.get("scope") ?? url.searchParams.get("scope") ?? undefined,
+  };
+
+  // Include id_token if present
+  const idToken = params.get("id_token") ?? url.searchParams.get("id_token");
+  if (idToken) {
+    response.id_token = idToken;
+  }
+
+  return storeToken(ctx, tokenArgs, response, tokenName);
+}
diff --git a/plugins/auth-oauth2/src/grants/password.ts b/plugins/auth-oauth2/src/grants/password.ts
new file mode 100644
index 0000000..0be38dc
--- /dev/null
+++ b/plugins/auth-oauth2/src/grants/password.ts
@@ -0,0 +1,69 @@
+import type { Context } from "@yaakapp/api";
+import type { CustomParams } from "../customParams";
+import { NO_CUSTOM_PARAMS } from "../customParams";
+import { fetchAccessToken } from "../fetchAccessToken";
+import { getOrRefreshAccessToken } from "../getOrRefreshAccessToken";
+import type { AccessToken, TokenStoreArgs } from "../store";
+import { storeToken } from "../store";
+
+export async function getPassword(
+  ctx: Context,
+  contextId: string,
+  {
+    accessTokenUrl,
+    clientId,
+    clientSecret,
+    username,
+    password,
+    credentialsInBody,
+    audience,
+    scope,
+    customParams = NO_CUSTOM_PARAMS,
+  }: {
+    accessTokenUrl: string;
+    clientId: string;
+    clientSecret: string;
+    username: string;
+    password: string;
+    scope: string | null;
+    audience: string | null;
+    credentialsInBody: boolean;
+    customParams?: CustomParams;
+  },
+): Promise<AccessToken> {
+  const tokenArgs: TokenStoreArgs = {
+    contextId,
+    clientId,
+    accessTokenUrl,
+    authorizationUrl: null,
+    username,
+  };
+  const token = await getOrRefreshAccessToken(ctx, tokenArgs, {
+    accessTokenUrl,
+    scope,
+    clientId,
+    clientSecret,
+    credentialsInBody,
+    custom: customParams.refresh,
+  });
+  if (token != null) {
+    return token;
+  }
+
+  const response = await fetchAccessToken(ctx, {
+    accessTokenUrl,
+    clientId,
+    clientSecret,
+    scope,
+    audience,
+    grantType: "password",
+    credentialsInBody,
+    params: [
+      { name: "username", value: username },
+      { name: "password", value: password },
+    ],
+    custom: customParams.token,
+  });
+
+  return storeToken(ctx, tokenArgs, response);
+}
diff --git a/plugins/auth-oauth2/src/index.ts b/plugins/auth-oauth2/src/index.ts
new file mode 100644
index 0000000..5531e1f
--- /dev/null
+++ b/plugins/auth-oauth2/src/index.ts
@@ -0,0 +1,680 @@
+import type {
+  Context,
+  FormInputSelectOption,
+  GetHttpAuthenticationConfigRequest,
+  JsonPrimitive,
+  PluginDefinition,
+} from "@yaakapp/api";
+import type { Algorithm } from "jsonwebtoken";
+import {
+  buildHostedCallbackRedirectUri,
+  DEFAULT_LOCALHOST_PORT,
+  stopActiveServer,
+} from "./callbackServer";
+import { readCustomParams } from "./customParams";
+import {
+  type CallbackType,
+  DEFAULT_PKCE_METHOD,
+  genPkceCodeVerifier,
+  getAuthorizationCode,
+  PKCE_PLAIN,
+  PKCE_SHA256,
+} from "./grants/authorizationCode";
+import {
+  defaultJwtAlgorithm,
+  getClientCredentials,
+  jwtAlgorithms,
+} from "./grants/clientCredentials";
+import { getImplicit } from "./grants/implicit";
+import { getPassword } from "./grants/password";
+import type { AccessToken, TokenStoreArgs } from "./store";
+import { deleteToken, getToken, resetDataDirKey } from "./store";
+
+type GrantType = "authorization_code" | "implicit" | "password" | "client_credentials";
+
+const grantTypes: FormInputSelectOption[] = [
+  { label: "Authorization Code", value: "authorization_code" },
+  { label: "Implicit", value: "implicit" },
+  { label: "Resource Owner Password Credential", value: "password" },
+  { label: "Client Credentials", value: "client_credentials" },
+];
+
+const defaultGrantType = grantTypes[0]?.value;
+
+function hiddenIfNot(
+  grantTypes: GrantType[],
+  ...other: ((values: GetHttpAuthenticationConfigRequest["values"]) => boolean)[]
+) {
+  return (_ctx: Context, { values }: GetHttpAuthenticationConfigRequest) => {
+    const hasGrantType = grantTypes.find((t) => t === String(values.grantType ?? defaultGrantType));
+    const hasOtherBools = other.every((t) => t(values));
+    const show = hasGrantType && hasOtherBools;
+    return { hidden: !show };
+  };
+}
+
+const authorizationUrls = [
+  "https://github.com/login/oauth/authorize",
+  "https://account.box.com/api/oauth2/authorize",
+  "https://accounts.google.com/o/oauth2/v2/auth",
+  "https://api.imgur.com/oauth2/authorize",
+  "https://bitly.com/oauth/authorize",
+  "https://gitlab.example.com/oauth/authorize",
+  "https://medium.com/m/oauth/authorize",
+  "https://public-api.wordpress.com/oauth2/authorize",
+  "https://slack.com/oauth/authorize",
+  "https://todoist.com/oauth/authorize",
+  "https://www.dropbox.com/oauth2/authorize",
+  "https://www.linkedin.com/oauth/v2/authorization",
+  "https://MY_SHOP.myshopify.com/admin/oauth/access_token",
+  "https://appcenter.intuit.com/app/connect/oauth2/authorize",
+];
+
+const accessTokenUrls = [
+  "https://github.com/login/oauth/access_token",
+  "https://api-ssl.bitly.com/oauth/access_token",
+  "https://api.box.com/oauth2/token",
+  "https://api.dropboxapi.com/oauth2/token",
+  "https://api.imgur.com/oauth2/token",
+  "https://api.medium.com/v1/tokens",
+  "https://gitlab.example.com/oauth/token",
+  "https://public-api.wordpress.com/oauth2/token",
+  "https://slack.com/api/oauth.access",
+  "https://todoist.com/oauth/access_token",
+  "https://www.googleapis.com/oauth2/v4/token",
+  "https://www.linkedin.com/oauth/v2/accessToken",
+  "https://MY_SHOP.myshopify.com/admin/oauth/authorize",
+  "https://oauth.platform.intuit.com/oauth2/v1/tokens/bearer",
+];
+
+export const plugin: PluginDefinition = {
+  dispose() {
+    stopActiveServer();
+  },
+  authentication: {
+    name: "oauth2",
+    label: "OAuth 2.0",
+    shortLabel: "OAuth 2",
+    actions: [
+      {
+        label: "Copy Current Token",
+        async onSelect(ctx, { contextId, values }) {
+          const tokenArgs: TokenStoreArgs = {
+            contextId,
+            authorizationUrl: stringArg(values, "authorizationUrl"),
+            accessTokenUrl: stringArg(values, "accessTokenUrl"),
+            clientId: stringArg(values, "clientId"),
+            username: usernameArg(values),
+          };
+          const token = await getToken(ctx, tokenArgs);
+          if (token == null) {
+            await ctx.toast.show({
+              message: "No token to copy",
+              color: "warning",
+            });
+          } else {
+            await ctx.clipboard.copyText(token.response.access_token);
+            await ctx.toast.show({
+              message: "Token copied to clipboard",
+              icon: "copy",
+              color: "success",
+            });
+          }
+        },
+      },
+      {
+        label: "Delete Token",
+        async onSelect(ctx, { contextId, values }) {
+          const tokenArgs: TokenStoreArgs = {
+            contextId,
+            authorizationUrl: stringArg(values, "authorizationUrl"),
+            accessTokenUrl: stringArg(values, "accessTokenUrl"),
+            clientId: stringArg(values, "clientId"),
+            username: usernameArg(values),
+          };
+          if (await deleteToken(ctx, tokenArgs)) {
+            await ctx.toast.show({
+              message: "Token deleted",
+              color: "success",
+            });
+          } else {
+            await ctx.toast.show({
+              message: "No token to delete",
+              color: "warning",
+            });
+          }
+        },
+      },
+      {
+        label: "Clear Window Session",
+        async onSelect(ctx, { contextId }) {
+          await resetDataDirKey(ctx, contextId);
+        },
+      },
+    ],
+    args: [
+      {
+        type: "select",
+        name: "grantType",
+        label: "Grant Type",
+        defaultValue: defaultGrantType,
+        options: grantTypes,
+      },
+      {
+        type: "select",
+        name: "clientCredentialsMethod",
+        label: "Authentication Method",
+        description:
+          '"Client Secret" sends client_secret. \n' + '"Client Assertion" sends a signed JWT.',
+        defaultValue: "client_secret",
+        options: [
+          { label: "Client Secret", value: "client_secret" },
+          { label: "Client Assertion", value: "client_assertion" },
+        ],
+        dynamic: hiddenIfNot(["client_credentials"]),
+      },
+      {
+        type: "text",
+        name: "clientId",
+        label: "Client ID",
+        optional: true,
+      },
+      {
+        type: "text",
+        name: "clientSecret",
+        label: "Client Secret",
+        optional: true,
+        password: true,
+        dynamic: hiddenIfNot(
+          ["authorization_code", "password", "client_credentials"],
+          (values) => values.clientCredentialsMethod === "client_secret",
+        ),
+      },
+      {
+        type: "select",
+        name: "clientAssertionAlgorithm",
+        label: "JWT Algorithm",
+        defaultValue: defaultJwtAlgorithm,
+        options: jwtAlgorithms.map((value) => ({
+          label: value === "none" ? "None" : value,
+          value,
+        })),
+        dynamic: hiddenIfNot(
+          ["client_credentials"],
+          ({ clientCredentialsMethod }) => clientCredentialsMethod === "client_assertion",
+        ),
+      },
+      {
+        type: "text",
+        name: "clientAssertionSecret",
+        label: "JWT Secret",
+        description:
+          "Can be HMAC, PEM or JWK. Make sure you pick the correct algorithm type above.",
+        password: true,
+        optional: true,
+        multiLine: true,
+        dynamic: hiddenIfNot(
+          ["client_credentials"],
+          ({ clientCredentialsMethod }) => clientCredentialsMethod === "client_assertion",
+        ),
+      },
+      {
+        type: "checkbox",
+        name: "clientAssertionSecretBase64",
+        label: "JWT secret is base64 encoded",
+        dynamic: hiddenIfNot(
+          ["client_credentials"],
+          ({ clientCredentialsMethod }) => clientCredentialsMethod === "client_assertion",
+        ),
+      },
+      {
+        type: "text",
+        name: "authorizationUrl",
+        optional: true,
+        label: "Authorization URL",
+        dynamic: hiddenIfNot(["authorization_code", "implicit"]),
+        placeholder: authorizationUrls[0],
+        completionOptions: authorizationUrls.map((url) => ({
+          label: url,
+          value: url,
+        })),
+      },
+      {
+        type: "text",
+        name: "accessTokenUrl",
+        optional: true,
+        label: "Access Token URL",
+        placeholder: accessTokenUrls[0],
+        dynamic: hiddenIfNot(["authorization_code", "password", "client_credentials"]),
+        completionOptions: accessTokenUrls.map((url) => ({
+          label: url,
+          value: url,
+        })),
+      },
+      {
+        type: "banner",
+        inputs: [
+          {
+            type: "checkbox",
+            name: "useExternalBrowser",
+            label: "Use External Browser",
+            description:
+              "Open authorization URL in your system browser instead of the embedded browser. " +
+              "Useful when the OAuth provider blocks embedded browsers or you need existing browser sessions.",
+            dynamic: hiddenIfNot(["authorization_code", "implicit"]),
+          },
+          {
+            type: "text",
+            name: "redirectUri",
+            label: "Redirect URI (can be any valid URL)",
+            placeholder: "https://mysite.example.com/oauth/callback",
+            description:
+              "URI the OAuth provider redirects to after authorization. Yaak intercepts this automatically in its embedded browser so any valid URI will work.",
+            optional: true,
+            dynamic: hiddenIfNot(
+              ["authorization_code", "implicit"],
+              ({ useExternalBrowser }) => !useExternalBrowser,
+            ),
+          },
+          {
+            type: "h_stack",
+            inputs: [
+              {
+                type: "select",
+                name: "callbackType",
+                label: "Callback Type",
+                description:
+                  '"Hosted Redirect" uses an external Yaak-hosted endpoint. "Localhost" starts a local server to receive the callback.',
+                defaultValue: "hosted",
+                options: [
+                  { label: "Hosted Redirect", value: "hosted" },
+                  { label: "Localhost", value: "localhost" },
+                ],
+                dynamic: hiddenIfNot(
+                  ["authorization_code", "implicit"],
+                  ({ useExternalBrowser }) => !!useExternalBrowser,
+                ),
+              },
+              {
+                type: "text",
+                name: "callbackPort",
+                label: "Callback Port",
+                placeholder: `${DEFAULT_LOCALHOST_PORT}`,
+                description:
+                  "Port for the local callback server. Defaults to " +
+                  DEFAULT_LOCALHOST_PORT +
+                  " if empty.",
+                optional: true,
+                dynamic: hiddenIfNot(
+                  ["authorization_code", "implicit"],
+                  ({ useExternalBrowser }) => !!useExternalBrowser,
+                ),
+              },
+            ],
+          },
+          {
+            type: "banner",
+            color: "info",
+            inputs: [
+              {
+                type: "markdown",
+                content: "Redirect URI to Register",
+                async dynamic(_ctx, { values }) {
+                  const grantType = String(values.grantType ?? defaultGrantType);
+                  const useExternalBrowser = !!values.useExternalBrowser;
+                  const callbackType = (stringArg(values, "callbackType") ||
+                    "localhost") as CallbackType;
+
+                  // Only show for authorization_code and implicit with external browser enabled
+                  if (
+                    !["authorization_code", "implicit"].includes(grantType) ||
+                    !useExternalBrowser
+                  ) {
+                    return { hidden: true };
+                  }
+
+                  // Compute the redirect URI based on callback type
+                  const port = intArg(values, "callbackPort") || DEFAULT_LOCALHOST_PORT;
+                  let redirectUri: string;
+                  if (callbackType === "hosted") {
+                    redirectUri = buildHostedCallbackRedirectUri(port);
+                  } else {
+                    redirectUri = `http://127.0.0.1:${port}/callback`;
+                  }
+
+                  return {
+                    hidden: false,
+                    content: `Register \`${redirectUri}\` as a redirect URI with your OAuth provider.`,
+                  };
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: "text",
+        name: "state",
+        label: "State",
+        optional: true,
+        dynamic: hiddenIfNot(["authorization_code", "implicit"]),
+      },
+      { type: "text", name: "scope", label: "Scope", optional: true },
+      { type: "text", name: "audience", label: "Audience", optional: true },
+      {
+        type: "select",
+        name: "tokenName",
+        label: "Token for authorization",
+        description:
+          'Select which token to send in the "Authorization: Bearer" header. Most APIs expect ' +
+          "access_token, but some (like OpenID Connect) require id_token.",
+        defaultValue: "access_token",
+        options: [
+          { label: "access_token", value: "access_token" },
+          { label: "id_token", value: "id_token" },
+        ],
+        dynamic: hiddenIfNot(["authorization_code", "implicit"]),
+      },
+      {
+        type: "banner",
+        inputs: [
+          {
+            type: "checkbox",
+            name: "usePkce",
+            label: "Use PKCE",
+            dynamic: hiddenIfNot(["authorization_code"]),
+          },
+          {
+            type: "select",
+            name: "pkceChallengeMethod",
+            label: "Code Challenge Method",
+            options: [
+              { label: "SHA-256", value: PKCE_SHA256 },
+              { label: "Plain", value: PKCE_PLAIN },
+            ],
+            defaultValue: DEFAULT_PKCE_METHOD,
+            dynamic: hiddenIfNot(["authorization_code"], ({ usePkce }) => !!usePkce),
+          },
+          {
+            type: "text",
+            name: "pkceCodeChallenge",
+            label: "Code Verifier",
+            placeholder: "Automatically generated when not set",
+            optional: true,
+            dynamic: hiddenIfNot(["authorization_code"], ({ usePkce }) => !!usePkce),
+          },
+        ],
+      },
+      {
+        type: "h_stack",
+        inputs: [
+          {
+            type: "text",
+            name: "username",
+            label: "Username",
+            optional: true,
+            dynamic: hiddenIfNot(["password"]),
+          },
+          {
+            type: "text",
+            name: "password",
+            label: "Password",
+            password: true,
+            optional: true,
+            dynamic: hiddenIfNot(["password"]),
+          },
+        ],
+      },
+      {
+        type: "select",
+        name: "responseType",
+        label: "Response Type",
+        defaultValue: "token",
+        options: [
+          { label: "Access Token", value: "token" },
+          { label: "ID Token", value: "id_token" },
+          { label: "ID and Access Token", value: "id_token token" },
+        ],
+        dynamic: hiddenIfNot(["implicit"]),
+      },
+      {
+        type: "accordion",
+        label: "Advanced",
+        inputs: [
+          {
+            type: "text",
+            name: "headerName",
+            label: "Header Name",
+            defaultValue: "Authorization",
+          },
+          {
+            type: "text",
+            name: "headerPrefix",
+            label: "Header Prefix",
+            optional: true,
+            defaultValue: "Bearer",
+          },
+          {
+            type: "select",
+            name: "credentials",
+            label: "Send Credentials",
+            defaultValue: "body",
+            options: [
+              { label: "In Request Body", value: "body" },
+              { label: "As Basic Authentication", value: "basic" },
+            ],
+            dynamic: (_ctx: Context, { values }: GetHttpAuthenticationConfigRequest) => ({
+              hidden:
+                values.grantType === "client_credentials" &&
+                values.clientCredentialsMethod === "client_assertion",
+            }),
+          },
+          {
+            type: "key_value",
+            name: "authorizationParams",
+            label: "Authorization Params",
+            description: "Query params appended to the authorization URL.",
+            optional: true,
+            dynamic: hiddenIfNot(["authorization_code", "implicit"]),
+          },
+          {
+            type: "key_value",
+            name: "tokenHeaders",
+            label: "Token Headers",
+            description:
+              "Headers sent with the token request, and when refreshing unless overridden.",
+            optional: true,
+            dynamic: hiddenIfNot(["authorization_code", "password", "client_credentials"]),
+          },
+          {
+            type: "key_value",
+            name: "tokenBodyParams",
+            label: "Token Body Params",
+            description:
+              "Form params sent with the token request, and when refreshing unless overridden.",
+            optional: true,
+            dynamic: hiddenIfNot(["authorization_code", "password", "client_credentials"]),
+          },
+          {
+            type: "key_value",
+            name: "refreshHeaders",
+            label: "Refresh Headers",
+            description: "Headers sent only when refreshing the token.",
+            optional: true,
+            dynamic: hiddenIfNot(["authorization_code", "password"]),
+          },
+          {
+            type: "key_value",
+            name: "refreshBodyParams",
+            label: "Refresh Body Params",
+            description: "Form params sent only when refreshing the token.",
+            optional: true,
+            dynamic: hiddenIfNot(["authorization_code", "password"]),
+          },
+        ],
+      },
+      {
+        type: "accordion",
+        label: "Access Token Response",
+        inputs: [],
+        async dynamic(ctx, { contextId, values }) {
+          const tokenArgs: TokenStoreArgs = {
+            contextId,
+            authorizationUrl: stringArg(values, "authorizationUrl"),
+            accessTokenUrl: stringArg(values, "accessTokenUrl"),
+            clientId: stringArg(values, "clientId"),
+            username: usernameArg(values),
+          };
+          const token = await getToken(ctx, tokenArgs);
+          if (token == null) {
+            return { hidden: true };
+          }
+          return {
+            label: "Access Token Response",
+            inputs: [
+              {
+                type: "editor",
+                name: "response",
+                defaultValue: JSON.stringify(token.response, null, 2),
+                hideLabel: true,
+                readOnly: true,
+                language: "json",
+              },
+            ],
+          };
+        },
+      },
+    ],
+    async onApply(ctx, { values, contextId }) {
+      const headerPrefix = stringArg(values, "headerPrefix");
+      const grantType = stringArg(values, "grantType") as GrantType;
+      const credentialsInBody = values.credentials === "body";
+      const customParams = readCustomParams(values);
+      const tokenName = values.tokenName === "id_token" ? "id_token" : "access_token";
+
+      // Build external browser options if enabled
+      const useExternalBrowser = !!values.useExternalBrowser;
+      const externalBrowserOptions = useExternalBrowser
+        ? {
+            useExternalBrowser: true,
+            callbackType: (stringArg(values, "callbackType") || "localhost") as CallbackType,
+            callbackPort: intArg(values, "callbackPort") ?? undefined,
+          }
+        : undefined;
+
+      let token: AccessToken;
+      if (grantType === "authorization_code") {
+        const authorizationUrl = stringArg(values, "authorizationUrl");
+        const accessTokenUrl = stringArg(values, "accessTokenUrl");
+        token = await getAuthorizationCode(ctx, contextId, {
+          accessTokenUrl:
+            accessTokenUrl === "" || accessTokenUrl.match(/^https?:\/\//)
+              ? accessTokenUrl
+              : `https://${accessTokenUrl}`,
+          authorizationUrl:
+            authorizationUrl === "" || authorizationUrl.match(/^https?:\/\//)
+              ? authorizationUrl
+              : `https://${authorizationUrl}`,
+          clientId: stringArg(values, "clientId"),
+          clientSecret: stringArg(values, "clientSecret"),
+          redirectUri: stringArgOrNull(values, "redirectUri"),
+          scope: stringArgOrNull(values, "scope"),
+          audience: stringArgOrNull(values, "audience"),
+          state: stringArgOrNull(values, "state"),
+          credentialsInBody,
+          pkce: values.usePkce
+            ? {
+                challengeMethod: stringArg(values, "pkceChallengeMethod") || DEFAULT_PKCE_METHOD,
+                codeVerifier: stringArg(values, "pkceCodeVerifier") || genPkceCodeVerifier(),
+              }
+            : null,
+          tokenName: tokenName,
+          externalBrowser: externalBrowserOptions,
+          customParams,
+        });
+      } else if (grantType === "implicit") {
+        const authorizationUrl = stringArg(values, "authorizationUrl");
+        token = await getImplicit(ctx, contextId, {
+          authorizationUrl: authorizationUrl.match(/^https?:\/\//)
+            ? authorizationUrl
+            : `https://${authorizationUrl}`,
+          clientId: stringArg(values, "clientId"),
+          redirectUri: stringArgOrNull(values, "redirectUri"),
+          responseType: stringArg(values, "responseType"),
+          scope: stringArgOrNull(values, "scope"),
+          audience: stringArgOrNull(values, "audience"),
+          state: stringArgOrNull(values, "state"),
+          tokenName: tokenName,
+          externalBrowser: externalBrowserOptions,
+          customParams,
+        });
+      } else if (grantType === "client_credentials") {
+        const accessTokenUrl = stringArg(values, "accessTokenUrl");
+        token = await getClientCredentials(ctx, contextId, {
+          accessTokenUrl: accessTokenUrl.match(/^https?:\/\//)
+            ? accessTokenUrl
+            : `https://${accessTokenUrl}`,
+          clientId: stringArg(values, "clientId"),
+          clientAssertionAlgorithm: stringArg(values, "clientAssertionAlgorithm") as Algorithm,
+          clientSecret: stringArg(values, "clientSecret"),
+          clientCredentialsMethod: stringArg(values, "clientCredentialsMethod"),
+          clientAssertionSecret: stringArg(values, "clientAssertionSecret"),
+          clientAssertionSecretBase64: !!values.clientAssertionSecretBase64,
+          scope: stringArgOrNull(values, "scope"),
+          audience: stringArgOrNull(values, "audience"),
+          credentialsInBody,
+          customParams,
+        });
+      } else if (grantType === "password") {
+        const accessTokenUrl = stringArg(values, "accessTokenUrl");
+        token = await getPassword(ctx, contextId, {
+          accessTokenUrl: accessTokenUrl.match(/^https?:\/\//)
+            ? accessTokenUrl
+            : `https://${accessTokenUrl}`,
+          clientId: stringArg(values, "clientId"),
+          clientSecret: stringArg(values, "clientSecret"),
+          username: stringArg(values, "username"),
+          password: stringArg(values, "password"),
+          scope: stringArgOrNull(values, "scope"),
+          audience: stringArgOrNull(values, "audience"),
+          credentialsInBody,
+          customParams,
+        });
+      } else {
+        throw new Error(`Invalid grant type ${String(grantType)}`);
+      }
+
+      const headerName = stringArg(values, "headerName") || "Authorization";
+      const headerValue = `${headerPrefix} ${token.response[tokenName] ?? ""}`.trim();
+      return { setHeaders: [{ name: headerName, value: headerValue }] };
+    },
+  },
+};
+
+function stringArgOrNull(
+  values: Record<string, JsonPrimitive | undefined>,
+  name: string,
+): string | null {
+  const arg = values[name];
+  if (arg == null || arg === "") return null;
+  return `${arg}`;
+}
+
+/** Only the password grant stores its token under a username, so the others must not key by one */
+function usernameArg(values: Record<string, JsonPrimitive | undefined>): string | null {
+  const grantType = String(values.grantType ?? defaultGrantType);
+  return grantType === "password" ? stringArgOrNull(values, "username") : null;
+}
+
+function stringArg(values: Record<string, JsonPrimitive | undefined>, name: string): string {
+  const arg = stringArgOrNull(values, name);
+  if (!arg) return "";
+  return arg;
+}
+
+function intArg(values: Record<string, JsonPrimitive | undefined>, name: string): number | null {
+  const arg = values[name];
+  if (arg == null || arg === "") return null;
+  const num = parseInt(`${arg}`, 10);
+  return Number.isNaN(num) ? null : num;
+}
diff --git a/plugins/auth-oauth2/src/store.ts b/plugins/auth-oauth2/src/store.ts
new file mode 100644
index 0000000..6f55c74
--- /dev/null
+++ b/plugins/auth-oauth2/src/store.ts
@@ -0,0 +1,86 @@
+import { createHash } from "node:crypto";
+import type { Context } from "@yaakapp/api";
+import { jwtExpiresAt } from "./util";
+
+export async function storeToken(
+  ctx: Context,
+  args: TokenStoreArgs,
+  response: AccessTokenRawResponse,
+  tokenName: "access_token" | "id_token" = "access_token",
+) {
+  if (!response[tokenName]) {
+    throw new Error(`${tokenName} not found in response ${Object.keys(response).join(", ")}`);
+  }
+
+  // Prefer expires_in from the response, falling back to the JWT's own exp claim
+  const expiresAt = response.expires_in
+    ? Date.now() + response.expires_in * 1000
+    : jwtExpiresAt(response[tokenName]);
+  const token: AccessToken = {
+    response,
+    expiresAt,
+  };
+  await ctx.store.set<AccessToken>(tokenStoreKey(args), token);
+  return token;
+}
+
+export async function getToken(ctx: Context, args: TokenStoreArgs) {
+  return ctx.store.get<AccessToken>(tokenStoreKey(args));
+}
+
+export async function deleteToken(ctx: Context, args: TokenStoreArgs) {
+  return ctx.store.delete(tokenStoreKey(args));
+}
+
+export async function resetDataDirKey(ctx: Context, contextId: string) {
+  const key = new Date().toISOString();
+  return ctx.store.set<string>(dataDirStoreKey(contextId), key);
+}
+
+export async function getDataDirKey(ctx: Context, contextId: string) {
+  const key = (await ctx.store.get<string>(dataDirStoreKey(contextId))) ?? "default";
+  return `${contextId}::${key}`;
+}
+
+export interface TokenStoreArgs {
+  contextId: string;
+  clientId: string;
+  accessTokenUrl: string | null;
+  authorizationUrl: string | null;
+  username?: string | null;
+}
+
+/**
+ * Generate a store key to use based on some arguments. The arguments will be normalized a bit to
+ * account for slight variations (like domains with and without a protocol scheme).
+ */
+function tokenStoreKey(args: TokenStoreArgs) {
+  const hash = createHash("md5");
+  if (args.contextId) hash.update(args.contextId.trim());
+  if (args.clientId) hash.update(args.clientId.trim());
+  if (args.accessTokenUrl) hash.update(args.accessTokenUrl.trim().replace(/^https?:\/\//, ""));
+  if (args.authorizationUrl) hash.update(args.authorizationUrl.trim().replace(/^https?:\/\//, ""));
+  if (args.username) hash.update(args.username);
+  const key = hash.digest("hex");
+  return ["token", key].join("::");
+}
+
+function dataDirStoreKey(contextId: string) {
+  return ["data_dir", contextId].join("::");
+}
+
+export interface AccessToken {
+  response: AccessTokenRawResponse;
+  expiresAt: number | null;
+}
+
+export interface AccessTokenRawResponse {
+  access_token: string;
+  id_token?: string;
+  token_type?: string;
+  expires_in?: number;
+  refresh_token?: string;
+  error?: string;
+  error_description?: string;
+  scope?: string;
+}
diff --git a/plugins/auth-oauth2/src/util.ts b/plugins/auth-oauth2/src/util.ts
new file mode 100644
index 0000000..0dd5529
--- /dev/null
+++ b/plugins/auth-oauth2/src/util.ts
@@ -0,0 +1,112 @@
+import jwt from "jsonwebtoken";
+import type { AccessToken } from "./store";
+
+export function isTokenExpired(
+  token: AccessToken,
+  tokenName: "access_token" | "id_token" = "access_token",
+) {
+  // Fall back to the JWT's own exp claim for tokens stored without an expiry
+  // (eg. from a token response that had no expires_in). Decode the same token
+  // that gets sent as the credential.
+  const expiresAt = token.expiresAt ?? jwtExpiresAt(token.response[tokenName]);
+  return expiresAt != null && Date.now() > expiresAt;
+}
+
+/**
+ * Get the expiry timestamp (ms) from a JWT's `exp` claim, or null if the token
+ * is not a JWT or has no `exp`.
+ */
+export function jwtExpiresAt(token: string | undefined): number | null {
+  if (!token) return null;
+
+  try {
+    const payload = jwt.decode(token);
+    if (payload != null && typeof payload === "object" && typeof payload.exp === "number") {
+      return payload.exp * 1000;
+    }
+  } catch {
+    // Opaque (non-JWT) token
+  }
+
+  return null;
+}
+
+export function extractCode(urlStr: string, redirectUri: string | null): string | null {
+  const url = new URL(urlStr);
+
+  if (!urlMatchesRedirect(url, redirectUri)) {
+    console.log("[oauth2] URL does not match redirect origin/path; skipping.");
+    return null;
+  }
+
+  // Prefer query param; fall back to fragment if query lacks it
+
+  const query = url.searchParams;
+  const queryError = query.get("error");
+  const queryDesc = query.get("error_description");
+  const queryUri = query.get("error_uri");
+
+  let hashParams: URLSearchParams | null = null;
+  if (url.hash && url.hash.length > 1) {
+    hashParams = new URLSearchParams(url.hash.slice(1));
+  }
+  const hashError = hashParams?.get("error");
+  const hashDesc = hashParams?.get("error_description");
+  const hashUri = hashParams?.get("error_uri");
+
+  const error = queryError || hashError;
+  if (error) {
+    const desc = queryDesc || hashDesc;
+    const uri = queryUri || hashUri;
+    let message = `Failed to authorize: ${error}`;
+    if (desc) message += ` (${desc})`;
+    if (uri) message += ` [${uri}]`;
+    throw new Error(message);
+  }
+
+  const queryCode = query.get("code");
+  if (queryCode) return queryCode;
+
+  const hashCode = hashParams?.get("code");
+  if (hashCode) return hashCode;
+
+  console.log("[oauth2] Code not found");
+  return null;
+}
+
+export function urlMatchesRedirect(url: URL, redirectUrl: string | null): boolean {
+  if (!redirectUrl) return true;
+
+  let redirect: URL;
+  try {
+    redirect = new URL(redirectUrl);
+  } catch {
+    console.log("[oauth2] Invalid redirect URI; skipping.");
+    return false;
+  }
+
+  const sameProtocol = url.protocol === redirect.protocol;
+
+  const sameHost = url.hostname.toLowerCase() === redirect.hostname.toLowerCase();
+
+  const normalizePort = (u: URL) =>
+    (u.protocol === "https:" && (!u.port || u.port === "443")) ||
+    (u.protocol === "http:" && (!u.port || u.port === "80"))
+      ? ""
+      : u.port;
+
+  const samePort = normalizePort(url) === normalizePort(redirect);
+
+  const normPath = (p: string) => {
+    const withLeading = p.startsWith("/") ? p : `/${p}`;
+    // strip trailing slashes, keep root as "/"
+    return withLeading.replace(/\/+$/g, "") || "/";
+  };
+
+  // Require redirect path to be a prefix of the navigated URL path
+  const urlPath = normPath(url.pathname);
+  const redirectPath = normPath(redirect.pathname);
+  const pathMatches = urlPath === redirectPath || urlPath.startsWith(`${redirectPath}/`);
+
+  return sameProtocol && sameHost && samePort && pathMatches;
+}
diff --git a/plugins/auth-oauth2/tests/authorizationCode.test.ts b/plugins/auth-oauth2/tests/authorizationCode.test.ts
new file mode 100644
index 0000000..f167066
--- /dev/null
+++ b/plugins/auth-oauth2/tests/authorizationCode.test.ts
@@ -0,0 +1,137 @@
+import type { HttpRequest } from "@yaakapp/api";
+import { describe, expect, test } from "vite-plus/test";
+import { readCustomParams } from "../src/customParams";
+import { getAuthorizationCode } from "../src/grants/authorizationCode";
+
+const REDIRECT_URI = "https://app.example.com/callback";
+
+/**
+ * Drives the embedded-browser flow: records the authorization URL the plugin
+ * opens, then navigates straight to the redirect with a code.
+ */
+function createMockContext() {
+  const opened: string[] = [];
+  const sent: Partial<HttpRequest>[] = [];
+  const values = new Map<string, unknown>();
+
+  const ctx = {
+    store: {
+      async set<T>(key: string, value: T) {
+        values.set(key, value);
+      },
+      async get<T>(key: string) {
+        return values.get(key) as T | undefined;
+      },
+    },
+    window: {
+      async openUrl({
+        url,
+        onNavigate,
+      }: {
+        url: string;
+        onNavigate: (e: { url: string }) => Promise<void>;
+      }) {
+        opened.push(url);
+        // Deferred because onNavigate closes the window it is handed back from
+        setTimeout(() => onNavigate({ url: `${REDIRECT_URI}?code=code-123` }), 0);
+        return { close() {} };
+      },
+    },
+    httpRequest: {
+      async send({ httpRequest }: { httpRequest: Partial<HttpRequest> }) {
+        sent.push(httpRequest);
+        return {
+          httpResponse: { status: 200, error: null },
+          body: {
+            async text() {
+              return JSON.stringify({ access_token: "token-123" });
+            },
+          },
+        };
+      },
+    },
+  } as never;
+
+  return { ctx, opened, sent };
+}
+
+const baseArgs = {
+  authorizationUrl: "https://auth.example.com/authorize",
+  accessTokenUrl: "https://auth.example.com/token",
+  clientId: "client-123",
+  clientSecret: "secret",
+  redirectUri: REDIRECT_URI,
+  scope: "openid",
+  state: null,
+  audience: null,
+  credentialsInBody: true,
+  pkce: null,
+  tokenName: "access_token" as const,
+};
+
+function pairs(...rows: { name: string; value: string; enabled?: boolean }[]) {
+  return JSON.stringify(rows.map((r) => ({ enabled: true, ...r })));
+}
+
+describe("authorization code custom parameters", () => {
+  test("puts custom authorization params on the authorize URL", async () => {
+    const { ctx, opened } = createMockContext();
+
+    await getAuthorizationCode(ctx, "request-1", {
+      ...baseArgs,
+      customParams: readCustomParams({
+        authorizationParams: pairs(
+          { name: "prompt", value: "consent" },
+          { name: "realm", value: "employees" },
+          { name: "skipped", value: "nope", enabled: false },
+        ),
+      }),
+    });
+
+    const url = new URL(opened[0]!);
+    expect(url.searchParams.get("prompt")).toBe("consent");
+    expect(url.searchParams.get("realm")).toBe("employees");
+    expect(url.searchParams.has("skipped")).toBe(false);
+    // Generated params are still there
+    expect(url.searchParams.get("response_type")).toBe("code");
+    expect(url.searchParams.get("client_id")).toBe("client-123");
+    expect(url.searchParams.get("scope")).toBe("openid");
+    expect(url.searchParams.get("redirect_uri")).toBe(REDIRECT_URI);
+  });
+
+  test("keeps the flow's redirect_uri when a custom param tries to change it", async () => {
+    const { ctx, opened } = createMockContext();
+
+    await getAuthorizationCode(ctx, "request-1", {
+      ...baseArgs,
+      customParams: readCustomParams({
+        authorizationParams: pairs({ name: "redirect_uri", value: "https://evil.example.com" }),
+      }),
+    });
+
+    expect(new URL(opened[0]!).searchParams.get("redirect_uri")).toBe(REDIRECT_URI);
+  });
+
+  test("sends custom token entries with the exchange that follows", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await getAuthorizationCode(ctx, "request-1", {
+      ...baseArgs,
+      customParams: readCustomParams({
+        tokenHeaders: pairs(
+          { name: "Origin", value: "https://app.example.com" },
+          { name: "X-Skipped", value: "nope", enabled: false },
+        ),
+        tokenBodyParams: pairs({ name: "realm", value: "employees" }),
+      }),
+    });
+
+    const headers = sent[0]!.headers ?? [];
+    expect(headers).toContainEqual({ name: "Origin", value: "https://app.example.com" });
+    expect(headers.map((h: { name: string }) => h.name)).not.toContain("X-Skipped");
+
+    const form = sent[0]!.body?.form ?? [];
+    expect(form).toContainEqual({ name: "realm", value: "employees" });
+    expect(form).toContainEqual({ name: "code", value: "code-123" });
+  });
+});
diff --git a/plugins/auth-oauth2/tests/customParams.test.ts b/plugins/auth-oauth2/tests/customParams.test.ts
new file mode 100644
index 0000000..ff0fbf3
--- /dev/null
+++ b/plugins/auth-oauth2/tests/customParams.test.ts
@@ -0,0 +1,164 @@
+import { describe, expect, test } from "vite-plus/test";
+import {
+  applyQueryParams,
+  mergeFormParams,
+  mergeHeaders,
+  parsePairs,
+  readCustomParams,
+} from "../src/customParams";
+
+function pairs(...rows: { name: string; value: string; enabled?: boolean }[]) {
+  return JSON.stringify(rows.map((r) => ({ enabled: true, ...r })));
+}
+
+describe("parsePairs", () => {
+  test("reads enabled rows", () => {
+    expect(parsePairs(pairs({ name: "Origin", value: "https://app.example.com" }))).toEqual([
+      { name: "Origin", value: "https://app.example.com" },
+    ]);
+  });
+
+  test("skips disabled rows", () => {
+    const value = pairs(
+      { name: "Origin", value: "https://app.example.com" },
+      { name: "X-Debug", value: "1", enabled: false },
+    );
+
+    expect(parsePairs(value).map((p) => p.name)).toEqual(["Origin"]);
+  });
+
+  test("skips rows without a name", () => {
+    expect(parsePairs(pairs({ name: "  ", value: "ignored" }))).toEqual([]);
+  });
+
+  test("trims names and keeps empty values", () => {
+    expect(parsePairs(pairs({ name: " realm ", value: "" }))).toEqual([
+      { name: "realm", value: "" },
+    ]);
+  });
+
+  test("returns nothing for missing or malformed input", () => {
+    expect(parsePairs(undefined)).toEqual([]);
+    expect(parsePairs("")).toEqual([]);
+    expect(parsePairs("not json")).toEqual([]);
+    expect(parsePairs('{"name":"Origin"}')).toEqual([]);
+  });
+});
+
+describe("merge precedence", () => {
+  const generated = [
+    { name: "User-Agent", value: "yaak" },
+    { name: "Content-Type", value: "application/x-www-form-urlencoded" },
+  ];
+
+  test("keeps generated entries that are not overridden", () => {
+    const merged = mergeHeaders(generated, [{ name: "Origin", value: "https://app.example.com" }]);
+
+    expect(merged).toEqual([...generated, { name: "Origin", value: "https://app.example.com" }]);
+  });
+
+  test("replaces generated headers by name, ignoring case", () => {
+    const merged = mergeHeaders(generated, [{ name: "content-type", value: "application/json" }]);
+
+    expect(merged).toEqual([
+      { name: "User-Agent", value: "yaak" },
+      { name: "content-type", value: "application/json" },
+    ]);
+  });
+
+  test("keeps repeated custom entries of the same name", () => {
+    const merged = mergeHeaders(generated, [
+      { name: "X-Trace", value: "a" },
+      { name: "X-Trace", value: "b" },
+    ]);
+
+    expect(merged.filter((h) => h.name === "X-Trace")).toHaveLength(2);
+  });
+
+  test("matches form params case-sensitively", () => {
+    const merged = mergeFormParams(
+      [{ name: "scope", value: "openid" }],
+      [{ name: "Scope", value: "other" }],
+    );
+
+    expect(merged).toEqual([
+      { name: "scope", value: "openid" },
+      { name: "Scope", value: "other" },
+    ]);
+  });
+});
+
+describe("applyQueryParams", () => {
+  test("appends custom params and overrides generated ones", () => {
+    const url = new URL("https://auth.example.com/authorize?client_id=abc&scope=openid");
+
+    applyQueryParams(url, [
+      { name: "scope", value: "openid email" },
+      { name: "realm", value: "employees" },
+    ]);
+
+    expect(url.searchParams.get("client_id")).toBe("abc");
+    expect(url.searchParams.getAll("scope")).toEqual(["openid email"]);
+    expect(url.searchParams.get("realm")).toBe("employees");
+  });
+
+  test("keeps repeated custom params", () => {
+    const url = new URL("https://auth.example.com/authorize");
+
+    applyQueryParams(url, [
+      { name: "resource", value: "one" },
+      { name: "resource", value: "two" },
+    ]);
+
+    expect(url.searchParams.getAll("resource")).toEqual(["one", "two"]);
+  });
+});
+
+describe("readCustomParams", () => {
+  test("sends token entries on the refresh request too", () => {
+    const custom = readCustomParams({
+      tokenHeaders: pairs({ name: "Origin", value: "https://app.example.com" }),
+      tokenBodyParams: pairs({ name: "realm", value: "employees" }),
+    });
+
+    expect(custom.refresh.headers).toEqual([{ name: "Origin", value: "https://app.example.com" }]);
+    expect(custom.refresh.body).toEqual([{ name: "realm", value: "employees" }]);
+  });
+
+  test("lets a refresh entry override the token entry of the same name", () => {
+    const custom = readCustomParams({
+      tokenHeaders: pairs({ name: "Origin", value: "https://app.example.com" }),
+      refreshHeaders: pairs({ name: "origin", value: "https://refresh.example.com" }),
+      tokenBodyParams: pairs({ name: "realm", value: "employees" }),
+      refreshBodyParams: pairs({ name: "realm", value: "service" }),
+    });
+
+    // The token request is unaffected by the refresh-only entries
+    expect(custom.token.headers).toEqual([{ name: "Origin", value: "https://app.example.com" }]);
+    expect(custom.token.body).toEqual([{ name: "realm", value: "employees" }]);
+
+    expect(custom.refresh.headers).toEqual([
+      { name: "origin", value: "https://refresh.example.com" },
+    ]);
+    expect(custom.refresh.body).toEqual([{ name: "realm", value: "service" }]);
+  });
+
+  test("reads authorization params separately", () => {
+    const custom = readCustomParams({
+      authorizationParams: pairs({ name: "prompt", value: "consent" }),
+    });
+
+    expect(custom.authorizationQuery).toEqual([{ name: "prompt", value: "consent" }]);
+    expect(custom.token.headers).toEqual([]);
+  });
+
+  test("is empty when nothing is configured", () => {
+    const custom = readCustomParams({ clientId: "abc" });
+
+    expect(custom).toEqual({
+      authorizationQuery: [],
+      token: { headers: [], body: [] },
+      refresh: { headers: [], body: [] },
+    });
+  });
+});
diff --git a/plugins/auth-oauth2/tests/fetchAccessToken.test.ts b/plugins/auth-oauth2/tests/fetchAccessToken.test.ts
new file mode 100644
index 0000000..8f02d2b
--- /dev/null
+++ b/plugins/auth-oauth2/tests/fetchAccessToken.test.ts
@@ -0,0 +1,198 @@
+import type { HttpRequest } from "@yaakapp/api";
+import { describe, expect, test } from "vite-plus/test";
+import { fetchAccessToken } from "../src/fetchAccessToken";
+
+/**
+ * Captures the request handed to ctx.httpRequest.send so tests can assert on the
+ * form body, and replies with a minimal successful token response.
+ */
+function createMockContext() {
+  const sent: Partial<HttpRequest>[] = [];
+
+  const ctx = {
+    httpRequest: {
+      async send({ httpRequest }: { httpRequest: Partial<HttpRequest> }) {
+        sent.push(httpRequest);
+        return {
+          httpResponse: { status: 200, error: null },
+          body: {
+            async text() {
+              return JSON.stringify({ access_token: "token-123" });
+            },
+          },
+        };
+      },
+    },
+  } as never;
+
+  return { ctx, sent };
+}
+
+function formNames(httpRequest: Partial<HttpRequest>) {
+  return (httpRequest.body?.form ?? []).map((p: { name: string }) => p.name);
+}
+
+function formValue(httpRequest: Partial<HttpRequest>, name: string) {
+  return (httpRequest.body?.form ?? []).find((p: { name: string }) => p.name === name)?.value;
+}
+
+function headerValue(httpRequest: Partial<HttpRequest>, name: string) {
+  return (httpRequest.headers ?? []).find(
+    (h: { name: string }) => h.name.toLowerCase() === name.toLowerCase(),
+  )?.value;
+}
+
+const baseArgs = {
+  clientId: "client-123",
+  accessTokenUrl: "https://auth.example.com/token",
+  scope: "openid profile",
+  audience: null,
+  clientSecret: "secret",
+  credentialsInBody: true,
+  params: [],
+};
+
+describe("fetchAccessToken scope handling", () => {
+  test("omits scope for the authorization code grant", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await fetchAccessToken(ctx, {
+      ...baseArgs,
+      grantType: "authorization_code",
+      params: [{ name: "code", value: "abc" }],
+    });
+
+    expect(formNames(sent[0]!)).not.toContain("scope");
+    // The rest of the request is untouched
+    expect(formValue(sent[0]!, "grant_type")).toBe("authorization_code");
+    expect(formValue(sent[0]!, "code")).toBe("abc");
+  });
+
+  test("sends scope for the client credentials grant", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await fetchAccessToken(ctx, { ...baseArgs, grantType: "client_credentials" });
+
+    expect(formValue(sent[0]!, "scope")).toBe("openid profile");
+  });
+
+  test("sends scope for the password grant", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await fetchAccessToken(ctx, { ...baseArgs, grantType: "password" });
+
+    expect(formValue(sent[0]!, "scope")).toBe("openid profile");
+  });
+
+  test("still sends audience for the authorization code grant", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await fetchAccessToken(ctx, {
+      ...baseArgs,
+      grantType: "authorization_code",
+      audience: "https://api.example.com",
+    });
+
+    expect(formValue(sent[0]!, "audience")).toBe("https://api.example.com");
+    expect(formNames(sent[0]!)).not.toContain("scope");
+  });
+});
+
+describe("fetchAccessToken custom parameters", () => {
+  test("sends a custom header with the token request", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await fetchAccessToken(ctx, {
+      ...baseArgs,
+      grantType: "authorization_code",
+      custom: {
+        headers: [{ name: "Origin", value: "https://app.example.com" }],
+        body: [],
+      },
+    });
+
+    expect(headerValue(sent[0]!, "Origin")).toBe("https://app.example.com");
+  });
+
+  test("keeps the generated headers that are not overridden", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await fetchAccessToken(ctx, {
+      ...baseArgs,
+      grantType: "client_credentials",
+      credentialsInBody: false,
+      custom: {
+        headers: [{ name: "Origin", value: "https://app.example.com" }],
+        body: [],
+      },
+    });
+
+    expect(headerValue(sent[0]!, "User-Agent")).toBe("yaak");
+    expect(headerValue(sent[0]!, "Content-Type")).toBe("application/x-www-form-urlencoded");
+    expect(headerValue(sent[0]!, "Accept")).toBe(
+      "application/x-www-form-urlencoded, application/json",
+    );
+    // Basic credentials still go out untouched
+    expect(headerValue(sent[0]!, "Authorization")).toMatch(/^Basic /);
+  });
+
+  test("replaces a generated header of the same name", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await fetchAccessToken(ctx, {
+      ...baseArgs,
+      grantType: "client_credentials",
+      credentialsInBody: false,
+      custom: {
+        headers: [
+          { name: "content-type", value: "application/json" },
+          { name: "Authorization", value: "Custom abc123" },
+        ],
+        body: [],
+      },
+    });
+
+    const contentTypes = (sent[0]!.headers ?? []).filter(
+      (h: { name: string }) => h.name.toLowerCase() === "content-type",
+    );
+    expect(contentTypes).toEqual([{ name: "content-type", value: "application/json" }]);
+    expect(headerValue(sent[0]!, "Authorization")).toBe("Custom abc123");
+  });
+
+  test("sends custom body params in the form-encoded body", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await fetchAccessToken(ctx, {
+      ...baseArgs,
+      grantType: "password",
+      params: [{ name: "username", value: "alice" }],
+      custom: {
+        headers: [],
+        body: [{ name: "realm", value: "employees" }],
+      },
+    });
+
+    expect(sent[0]!.bodyType).toBe("application/x-www-form-urlencoded");
+    expect(formValue(sent[0]!, "realm")).toBe("employees");
+    // Generated params survive alongside it
+    expect(formValue(sent[0]!, "grant_type")).toBe("password");
+    expect(formValue(sent[0]!, "username")).toBe("alice");
+    expect(formValue(sent[0]!, "client_id")).toBe("client-123");
+  });
+
+  test("replaces a generated body param of the same name", async () => {
+    const { ctx, sent } = createMockContext();
+
+    await fetchAccessToken(ctx, {
+      ...baseArgs,
+      grantType: "client_credentials",
+      custom: {
+        headers: [],
+        body: [{ name: "scope", value: "custom-scope" }],
+      },
+    });
+
+    expect(formNames(sent[0]!).filter((n: string) => n === "scope")).toHaveLength(1);
+    expect(formValue(sent[0]!, "scope")).toBe("custom-scope");
+  });
+});
diff --git a/plugins/auth-oauth2/tests/getOrRefreshAccessToken.test.ts b/plugins/auth-oauth2/tests/getOrRefreshAccessToken.test.ts
new file mode 100644
index 0000000..4ab8251
--- /dev/null
+++ b/plugins/auth-oauth2/tests/getOrRefreshAccessToken.test.ts
@@ -0,0 +1,141 @@
+import type { HttpRequest } from "@yaakapp/api";
+import { describe, expect, test } from "vite-plus/test";
+import { getOrRefreshAccessToken } from "../src/getOrRefreshAccessToken";
+import type { TokenStoreArgs } from "../src/store";
+import { storeToken } from "../src/store";
+
+/**
+ * Captures the refresh request handed to ctx.httpRequest.send and replies with
+ * a minimal successful token response.
+ */
+function createMockContext() {
+  const sent: Partial<HttpRequest>[] = [];
+  const values = new Map<string, unknown>();
+
+  const ctx = {
+    store: {
+      async set<T>(key: string, value: T) {
+        values.set(key, value);
+      },
+      async get<T>(key: string) {
+        return values.get(key) as T | undefined;
+      },
+      async delete(key: string) {
+        return values.delete(key);
+      },
+    },
+    httpRequest: {
+      async send({ httpRequest }: { httpRequest: Partial<HttpRequest> }) {
+        sent.push(httpRequest);
+        return {
+          httpResponse: { status: 200, error: null },
+          body: {
+            async text() {
+              return JSON.stringify({ access_token: "refreshed-token" });
+            },
+          },
+        };
+      },
+    },
+  } as never;
+
+  return { ctx, sent };
+}
+
+const tokenArgs: TokenStoreArgs = {
+  contextId: "request-1",
+  clientId: "client-123",
+  accessTokenUrl: "https://auth.example.com/token",
+  authorizationUrl: null,
+};
+
+const refreshArgs = {
+  accessTokenUrl: "https://auth.example.com/token",
+  scope: "openid",
+  clientId: "client-123",
+  clientSecret: "secret",
+  credentialsInBody: true,
+  forceRefresh: true,
+};
+
+function headerValue(httpRequest: Partial<HttpRequest>, name: string) {
+  return (httpRequest.headers ?? []).find(
+    (h: { name: string }) => h.name.toLowerCase() === name.toLowerCase(),
+  )?.value;
+}
+
+function formValue(httpRequest: Partial<HttpRequest>, name: string) {
+  return (httpRequest.body?.form ?? []).find((p: { name: string }) => p.name === name)?.value;
+}
+
+async function seedToken(ctx: never) {
+  await storeToken(ctx, tokenArgs, {
+    access_token: "old-token",
+    refresh_token: "refresh-123",
+  });
+}
+
+describe("getOrRefreshAccessToken custom parameters", () => {
+  test("sends custom headers and body params with the refresh request", async () => {
+    const { ctx, sent } = createMockContext();
+    await seedToken(ctx);
+
+    const token = await getOrRefreshAccessToken(ctx, tokenArgs, {
+      ...refreshArgs,
+      custom: {
+        headers: [{ name: "Origin", value: "https://app.example.com" }],
+        body: [{ name: "realm", value: "employees" }],
+      },
+    });
+
+    expect(token?.response.access_token).toBe("refreshed-token");
+    expect(headerValue(sent[0]!, "Origin")).toBe("https://app.example.com");
+    expect(formValue(sent[0]!, "realm")).toBe("employees");
+    // Generated entries survive
+    expect(headerValue(sent[0]!, "User-Agent")).toBe("yaak");
+    expect(formValue(sent[0]!, "grant_type")).toBe("refresh_token");
+    expect(formValue(sent[0]!, "refresh_token")).toBe("refresh-123");
+    expect(formValue(sent[0]!, "client_secret")).toBe("secret");
+  });
+
+  test("replaces generated entries of the same name", async () => {
+    const { ctx, sent } = createMockContext();
+    await seedToken(ctx);
+
+    await getOrRefreshAccessToken(ctx, tokenArgs, {
+      ...refreshArgs,
+      custom: {
+        headers: [{ name: "user-agent", value: "custom-agent" }],
+        body: [{ name: "scope", value: "custom-scope" }],
+      },
+    });
+
+    const userAgents = (sent[0]!.headers ?? []).filter(
+      (h: { name: string }) => h.name.toLowerCase() === "user-agent",
+    );
+    expect(userAgents).toEqual([{ name: "user-agent", value: "custom-agent" }]);
+
+    const scopes = (sent[0]!.body?.form ?? []).filter((p: { name: string }) => p.name === "scope");
+    expect(scopes).toEqual([{ name: "scope", value: "custom-scope" }]);
+  });
+
+  test("sends the generated request untouched with no custom parameters", async () => {
+    const { ctx, sent } = createMockContext();
+    await seedToken(ctx);
+
+    await getOrRefreshAccessToken(ctx, tokenArgs, refreshArgs);
+
+    expect((sent[0]!.headers ?? []).map((h: { name: string }) => h.name)).toEqual([
+      "User-Agent",
+      "Accept",
+      "Content-Type",
+    ]);
+    expect((sent[0]!.body?.form ?? []).map((p: { name: string }) => p.name)).toEqual([
+      "grant_type",
+      "refresh_token",
+      "scope",
+      "client_id",
+      "client_secret",
+    ]);
+  });
+});
diff --git a/plugins/auth-oauth2/tests/store.test.ts b/plugins/auth-oauth2/tests/store.test.ts
new file mode 100644
index 0000000..65c0423
--- /dev/null
+++ b/plugins/auth-oauth2/tests/store.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, test } from "vite-plus/test";
+import type { TokenStoreArgs } from "../src/store";
+import { getToken, storeToken } from "../src/store";
+
+function createMockContext() {
+  const values = new Map<string, unknown>();
+
+  return {
+    store: {
+      async set<T>(key: string, value: T) {
+        values.set(key, value);
+      },
+      async get<T>(key: string) {
+        return values.get(key) as T | undefined;
+      },
+    },
+  } as never;
+}
+
+describe("token store", () => {
+  test("separates password grant tokens when the username changes", async () => {
+    const ctx = createMockContext();
+
+    const aliceArgs: TokenStoreArgs = {
+      contextId: "request-1",
+      clientId: "client-123",
+      accessTokenUrl: "https://auth.example.com/token",
+      authorizationUrl: null,
+      username: "alice@example.com",
+    };
+    const bobArgs: TokenStoreArgs = { ...aliceArgs, username: "bob@example.com" };
+
+    await storeToken(ctx, aliceArgs, { access_token: "alice-token" });
+
+    expect((await getToken(ctx, aliceArgs))?.response.access_token).toBe("alice-token");
+    expect(await getToken(ctx, bobArgs)).toBeUndefined();
+  });
+
+  test("keeps the same key for grants without a username", async () => {
+    const ctx = createMockContext();
+
+    const args: TokenStoreArgs = {
+      contextId: "request-1",
+      clientId: "client-123",
+      accessTokenUrl: "https://auth.example.com/token",
+      authorizationUrl: null,
+    };
+
+    await storeToken(ctx, args, { access_token: "cc-token" });
+
+    expect((await getToken(ctx, { ...args, username: null }))?.response.access_token).toBe(
+      "cc-token",
+    );
+    expect((await getToken(ctx, { ...args, username: "" }))?.response.access_token).toBe("cc-token");
+  });
+});
diff --git a/plugins/auth-oauth2/tests/util.test.ts b/plugins/auth-oauth2/tests/util.test.ts
new file mode 100644
index 0000000..7e9de0d
--- /dev/null
+++ b/plugins/auth-oauth2/tests/util.test.ts
@@ -0,0 +1,162 @@
+import jwt from "jsonwebtoken";
+import { describe, expect, test } from "vite-plus/test";
+import { extractCode, isTokenExpired, jwtExpiresAt } from "../src/util";
+
+describe("extractCode", () => {
+  test("extracts code from query when same origin + path", () => {
+    const url = "https://app.example.com/cb?code=abc123&state=xyz";
+    const redirect = "https://app.example.com/cb";
+    expect(extractCode(url, redirect)).toBe("abc123");
+  });
+
+  test("extracts code from query with weird path", () => {
+    const url = "https://app.example.com/cbwithextra?code=abc123&state=xyz";
+    const redirect = "https://app.example.com/cb";
+    expect(extractCode(url, redirect)).toBeNull();
+  });
+
+  test("allows trailing slash differences", () => {
+    expect(extractCode("https://app.example.com/cb/?code=abc", "https://app.example.com/cb")).toBe(
+      "abc",
+    );
+    expect(extractCode("https://app.example.com/cb?code=abc", "https://app.example.com/cb/")).toBe(
+      "abc",
+    );
+  });
+
+  test("treats default ports as equal (https:443, http:80)", () => {
+    expect(
+      extractCode("https://app.example.com/cb?code=abc", "https://app.example.com:443/cb"),
+    ).toBe("abc");
+    expect(extractCode("http://app.example.com/cb?code=abc", "http://app.example.com:80/cb")).toBe(
+      "abc",
+    );
+  });
+
+  test("rejects different port", () => {
+    expect(
+      extractCode("https://app.example.com/cb?code=abc", "https://app.example.com:8443/cb"),
+    ).toBeNull();
+  });
+
+  test("rejects different hostname (including subdomain changes)", () => {
+    expect(
+      extractCode("https://evil.example.com/cb?code=abc", "https://app.example.com/cb"),
+    ).toBeNull();
+  });
+
+  test("requires path to start with redirect path (ignoring query/hash)", () => {
+    // same origin but wrong path -> null
+    expect(
+      extractCode("https://app.example.com/other?code=abc", "https://app.example.com/cb"),
+    ).toBeNull();
+
+    // deeper subpath under the redirect path -> allowed (prefix match)
+    expect(
+      extractCode("https://app.example.com/cb/deep?code=abc", "https://app.example.com/cb"),
+    ).toBe("abc");
+  });
+
+  test("works with custom schemes", () => {
+    expect(extractCode("myapp://cb?code=abc", "myapp://cb")).toBe("abc");
+  });
+
+  test("prefers query over fragment when both present", () => {
+    const url = "https://app.example.com/cb?code=queryCode#code=hashCode";
+    const redirect = "https://app.example.com/cb";
+    expect(extractCode(url, redirect)).toBe("queryCode");
+  });
+
+  test("extracts code from fragment when query lacks code", () => {
+    const url = "https://app.example.com/cb#code=fromHash&state=xyz";
+    const redirect = "https://app.example.com/cb";
+    expect(extractCode(url, redirect)).toBe("fromHash");
+  });
+
+  test("returns null if no code present (query or fragment)", () => {
+    const url = "https://app.example.com/cb?state=only";
+    const redirect = "https://app.example.com/cb";
+    expect(extractCode(url, redirect)).toBeNull();
+  });
+
+  test("returns null when provider reports an error", () => {
+    const url = "https://app.example.com/cb?error=access_denied&error_description=oopsy";
+    const redirect = "https://app.example.com/cb";
+    expect(() => extractCode(url, redirect)).toThrow("Failed to authorize: access_denied");
+  });
+
+  test("when redirectUri is null, extracts code from any URL", () => {
+    expect(extractCode("https://random.example.com/whatever?code=abc", null)).toBe("abc");
+  });
+
+  test("handles extra params gracefully", () => {
+    const url = "https://app.example.com/cb?foo=1&bar=2&code=abc&baz=3";
+    const redirect = "https://app.example.com/cb";
+    expect(extractCode(url, redirect)).toBe("abc");
+  });
+
+  test("ignores fragment noise when code is in query", () => {
+    const url = "https://app.example.com/cb?code=abc#some=thing";
+    const redirect = "https://app.example.com/cb";
+    expect(extractCode(url, redirect)).toBe("abc");
+  });
+
+  // If you decide NOT to support fragment-based codes, flip these to expect null or mark as .skip
+  test("supports fragment-only code for response_mode=fragment providers", () => {
+    const url = "https://app.example.com/cb#state=xyz&code=abc";
+    const redirect = "https://app.example.com/cb";
+    expect(extractCode(url, redirect)).toBe("abc");
+  });
+});
+
+describe("isTokenExpired", () => {
+  const jwtWithExp = (expSecondsFromNow: number) =>
+    jwt.sign({ exp: Math.floor(Date.now() / 1000) + expSecondsFromNow }, "test-secret");
+
+  test("uses stored expiresAt when present", () => {
+    expect(isTokenExpired({ response: { access_token: "x" }, expiresAt: Date.now() - 1000 })).toBe(
+      true,
+    );
+    expect(isTokenExpired({ response: { access_token: "x" }, expiresAt: Date.now() + 10000 })).toBe(
+      false,
+    );
+  });
+
+  test("falls back to JWT exp claim when expiresAt is null", () => {
+    expect(
+      isTokenExpired({ response: { access_token: jwtWithExp(-60) }, expiresAt: null }),
+    ).toBe(true);
+    expect(
+      isTokenExpired({ response: { access_token: jwtWithExp(60) }, expiresAt: null }),
+    ).toBe(false);
+  });
+
+  test("treats opaque tokens without expiresAt as non-expiring", () => {
+    expect(isTokenExpired({ response: { access_token: "opaque-token" }, expiresAt: null })).toBe(
+      false,
+    );
+  });
+
+  test("checks the token that is used as the credential", () => {
+    // Expired id_token credential is not masked by an opaque access_token
+    const token = {
+      response: { access_token: "opaque-token", id_token: jwtWithExp(-60) },
+      expiresAt: null,
+    };
+    expect(isTokenExpired(token, "id_token")).toBe(true);
+    expect(isTokenExpired(token, "access_token")).toBe(false);
+  });
+});
+
+describe("jwtExpiresAt", () => {
+  test("extracts exp claim in milliseconds", () => {
+    const exp = Math.floor(Date.now() / 1000) + 300;
+    expect(jwtExpiresAt(jwt.sign({ exp }, "test-secret"))).toBe(exp * 1000);
+  });
+
+  test("returns null for non-JWT or missing tokens", () => {
+    expect(jwtExpiresAt("not-a-jwt")).toBeNull();
+    expect(jwtExpiresAt(undefined)).toBeNull();
+    expect(jwtExpiresAt(jwt.sign({ foo: "bar" }, "test-secret"))).toBeNull();
+  });
+});
diff --git a/plugins/auth-oauth2/tsconfig.json b/plugins/auth-oauth2/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/auth-oauth2/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/filter-jsonpath/README.md b/plugins/filter-jsonpath/README.md
new file mode 100644
index 0000000..cf16351
--- /dev/null
+++ b/plugins/filter-jsonpath/README.md
@@ -0,0 +1,59 @@
+# JSONPath
+
+A filter plugin that enables [JSONPath](https://en.wikipedia.org/wiki/JSONPath)
+extraction and filtering for JSON responses, making it easy to extract specific values
+from complex JSON structures.
+
+![Screenshot of JSONPath filtering](screenshot.png)
+
+## Overview
+
+This plugin provides JSONPath filtering for responses in Yaak. JSONPath is a query
+language for JSON, similar to XPath for XML, that provides the ability to extract data
+from JSON documents using a simple, expressive syntax. This is useful for working with
+complex API responses where you need to only view a small subset of response data.
+
+## How JSONPath Works
+
+JSONPath uses a dot-notation syntax to navigate JSON structures:
+
+- `$` - Root element
+- `.` - Child element
+- `..` - Recursive descent
+- `*` - Wildcard
+- `[]` - Array index or filter
+
+## JSONPath Syntax Examples
+
+### Basic Navigation
+
+```
+$.store.book[0].title          # First book title
+$.store.book[*].author         # All book authors
+$.store.book[-1]               # Last book
+$.store.book[0,1]              # First two books
+$.store.book[0:2]              # First two books (slice)
+```
+
+### Filtering
+
+```
+$.store.book[?(@.price < 10)]           # Books under $10
+$.store.book[?(@.author == 'Tolkien')]  # Books by Tolkien
+$.store.book[?(@.category == 'fiction')] # Fiction books
+```
+
+### Recursive Search
+
+```
+$..author                      # All authors anywhere in the document
+$..book[2]                     # Third book anywhere
+$..price                       # All prices in the document
+```
+
+## Usage
+
+1. Make an API request that returns JSON data
+2. Below the response body, click the filter icon
+3. Enter a JSONPath expression
+4. View the extracted data in the results panel
diff --git a/plugins/filter-jsonpath/package.json b/plugins/filter-jsonpath/package.json
new file mode 100644
index 0000000..9989dde
--- /dev/null
+++ b/plugins/filter-jsonpath/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@yaak/filter-jsonpath",
+  "displayName": "JSONPath Filter",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Filter JSON response data using JSONPath expressions",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/filter-jsonpath"
+  },
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  },
+  "dependencies": {
+    "@yaakapp-internal/lib": "^1.0.0",
+    "jsonpath-plus": "^10.3.0"
+  },
+  "devDependencies": {
+    "@types/jsonpath": "^0.2.4"
+  }
+}
diff --git a/plugins/filter-jsonpath/src/index.ts b/plugins/filter-jsonpath/src/index.ts
new file mode 100644
index 0000000..0060341
--- /dev/null
+++ b/plugins/filter-jsonpath/src/index.ts
@@ -0,0 +1,39 @@
+import type { PluginDefinition } from "@yaakapp/api";
+import { jsonPathToSegments } from "@yaakapp-internal/lib/jsonPath";
+import { JSONPath } from "jsonpath-plus";
+
+export const plugin: PluginDefinition = {
+  filter: {
+    name: "JSONPath",
+    description: "Filter JSONPath",
+    onFilter(_ctx, args) {
+      const parsed = JSON.parse(args.payload);
+      try {
+        // jsonpath-plus doesn't decode JSON-quoted keys reliably and can treat
+        // their contents as operators. Only complete literal paths take this
+        // route; all other expressions retain the library's existing behavior.
+        const segments = args.filter.includes('["') ? jsonPathToSegments(args.filter) : null;
+        let filtered: unknown;
+        if (segments != null) {
+          let value: unknown = parsed;
+          for (const segment of segments) {
+            const key = segment.kind === "key" ? segment.key : segment.index;
+            if (value == null || !Object.prototype.hasOwnProperty.call(value, key)) {
+              return { content: "[]" };
+            }
+            value = (value as Record<string, unknown>)[key];
+          }
+          filtered = [value];
+        } else {
+          filtered = JSONPath({ path: args.filter, json: parsed });
+        }
+        return { content: JSON.stringify(filtered, null, 2) };
+      } catch (err) {
+        return {
+          content: "",
+          error: `Invalid filter: ${err instanceof Error ? err.message : String(err)}`,
+        };
+      }
+    },
+  },
+};
diff --git a/plugins/filter-jsonpath/tests/breadcrumbs.test.ts b/plugins/filter-jsonpath/tests/breadcrumbs.test.ts
new file mode 100644
index 0000000..d7e1c7f
--- /dev/null
+++ b/plugins/filter-jsonpath/tests/breadcrumbs.test.ts
@@ -0,0 +1,130 @@
+import { forceParsing } from "@codemirror/language";
+import { EditorState } from "@codemirror/state";
+import { jsonc } from "@shopify/lang-jsonc";
+import { JSONPath } from "jsonpath-plus";
+import { describe, expect, test } from "vite-plus/test";
+import {
+  jsonPathSegmentsAt,
+  jsonPathToSegments,
+  segmentsToJsonPath,
+} from "../../../apps/yaak-client/components/core/Editor/json/jsonPath";
+import { plugin } from "../src";
+
+async function filter(json: unknown, path: string) {
+  const result = await plugin.filter!.onFilter({} as never, {
+    payload: JSON.stringify(json),
+    filter: path,
+    mimeType: "application/json",
+  });
+  expect(result.error).toBeUndefined();
+  return JSON.parse(result.content);
+}
+
+/** Exercise the caret path and expression the breadcrumb button actually sends. */
+function breadcrumb(json: unknown) {
+  const doc = JSON.stringify(json, null, 2);
+  const state = EditorState.create({ doc, extensions: [jsonc()] });
+  forceParsing({ state } as never, doc.length, 5000);
+  const segments = jsonPathSegmentsAt(state, doc.indexOf('"needle-value"') + 4);
+  expect(segments).not.toBeNull();
+  const path = segmentsToJsonPath(segments ?? []);
+  expect(jsonPathToSegments(path)).toEqual(segments);
+  return path;
+}
+
+describe("breadcrumb paths through the real filter plugin", () => {
+  test.each([
+    "identifier",
+    "a.b",
+    "space key",
+    "",
+    'quote"key',
+    "single'key",
+    "back\\slash",
+    "bracket]key",
+    "combined\"\\]'key",
+    "*",
+    "..",
+    "$",
+    "^",
+    "~",
+    "a,b",
+    "0:2",
+    "?(true)",
+    "(@.length-1)",
+    "@number()",
+    "`key",
+    "x)]y",
+    "x)']y",
+    "semi;colon",
+    "percent%@%key",
+    "line\nbreak\t\u0000",
+    "emoji 🤔",
+    "lone surrogate \ud800",
+    "__proto__",
+    "constructor",
+  ])("selects the literal key %j, not an operator or expression", async (key) => {
+    const json = Object.fromEntries([
+      [key, "needle-value"],
+      ["decoy", "wrong-value"],
+    ]);
+    expect(await filter(json, breadcrumb(json))).toEqual(["needle-value"]);
+  });
+
+  test("nested unusual keys and arrays round-trip and filter at every crumb", async () => {
+    const inner = Object.fromEntries([["inner'\\]", { "": "needle-value" }]]);
+    const json = { outer: Object.fromEntries([['quote"key', ["decoy", inner]]]) };
+    const path = breadcrumb(json);
+    const segments = jsonPathToSegments(path)!;
+    expect(await filter(json, path)).toEqual(["needle-value"]);
+    expect(await filter(json, segmentsToJsonPath(segments, 4))).toEqual([{ "": "needle-value" }]);
+    expect(await filter(json, segmentsToJsonPath(segments, 3))).toEqual([inner]);
+    expect(await filter(json, segmentsToJsonPath(segments, 2))).toEqual([["decoy", inner]]);
+    expect(await filter(json, segmentsToJsonPath(segments, 1))).toEqual([json.outer]);
+    expect(await filter(json, segmentsToJsonPath(segments, 0))).toEqual([json]);
+  });
+
+  test("root arrays and quoted numeric object keys remain distinct", async () => {
+    const json = ["decoy", { "01": { "1": "needle-value" } }];
+    expect(await filter(json, breadcrumb(json))).toEqual(["needle-value"]);
+    expect(await filter(json, '$[1]["01"]["missing"]')).toEqual([]);
+  });
+
+  test.each([null, false, 0, "", [1, 2], { value: 3 }])(
+    "retains the matched value %j",
+    async (value) => {
+      expect(await filter({ 'quote"key': value }, '$["quote\\\"key"]')).toEqual([value]);
+    },
+  );
+
+  test("only follows own properties, while allowing actual prototype-named JSON keys", async () => {
+    const json = JSON.parse('{"a.b":{"__proto__":{"constructor":"own-value"}}}');
+    expect(await filter(json, '$["a.b"].__proto__.constructor')).toEqual(["own-value"]);
+    expect(await filter(json, '$["a.b"].constructor')).toEqual([]);
+    expect(await filter(json, '$["a.b"].__proto__.toString')).toEqual([]);
+    expect(await filter(json, '$["a.b"].__proto__.constructor.__proto__')).toEqual([]);
+  });
+});
+
+describe("existing JSONPath expressions", () => {
+  const json = { items: [{ id: 1 }, { id: 2 }, { id: 3 }], "space key": 4 };
+  test.each([
+    ["$", [json]],
+    ["$.items[1].id", [2]],
+    ['$["space key"]', [4]],
+    ["$['space key']", [4]],
+    ["$.items[*].id", [1, 2, 3]],
+    ["$..id", [1, 2, 3]],
+    ["$.items[0:2].id", [1, 2]],
+    ["$.items[0,2].id", [1, 3]],
+    ["$.items[?(@.id > 1)].id", [2, 3]],
+    ['$.items[?(@["id"] > 1)].id', [2, 3]],
+    ["$.items[(@.length-1)].id", [3]],
+    ['$["items"][*].id', [1, 2, 3]],
+    ['$["items"].$', [json.items]],
+    ["$.missing", []],
+  ])("preserves %s", async (path, expected) => {
+    expect(await filter(json, path as string)).toEqual(expected);
+    expect(await filter(json, path as string)).toEqual(JSONPath({ path: path as string, json }));
+  });
+});
diff --git a/plugins/filter-jsonpath/tsconfig.json b/plugins/filter-jsonpath/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/filter-jsonpath/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/filter-xpath/package.json b/plugins/filter-xpath/package.json
new file mode 100644
index 0000000..f468b1a
--- /dev/null
+++ b/plugins/filter-xpath/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaak/filter-xpath",
+  "displayName": "XPath Filter",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Filter response XML data using XPath expressions",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "@xmldom/xmldom": "^0.9.12",
+    "xpath": "^0.0.34"
+  }
+}
diff --git a/plugins/filter-xpath/src/index.ts b/plugins/filter-xpath/src/index.ts
new file mode 100644
index 0000000..09213db
--- /dev/null
+++ b/plugins/filter-xpath/src/index.ts
@@ -0,0 +1,28 @@
+/* oxlint-disable no-base-to-string */
+import { DOMParser } from "@xmldom/xmldom";
+import type { PluginDefinition } from "@yaakapp/api";
+import xpath from "xpath";
+
+export const plugin: PluginDefinition = {
+  filter: {
+    name: "XPath",
+    description: "Filter XPath",
+    onFilter(_ctx, args) {
+      // oxlint-disable-next-line no-explicit-any
+      const doc: any = new DOMParser().parseFromString(args.payload, "text/xml");
+      try {
+        const result = xpath.select(args.filter, doc, false);
+        if (Array.isArray(result)) {
+          return { content: result.map((r) => String(r)).join("\n") };
+        }
+        // Not sure what cases this happens in (?)
+        return { content: String(result) };
+      } catch (err) {
+        return {
+          content: "",
+          error: `Invalid filter: ${err instanceof Error ? err.message : String(err)}`,
+        };
+      }
+    },
+  },
+};
diff --git a/plugins/filter-xpath/tsconfig.json b/plugins/filter-xpath/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/filter-xpath/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/importer-curl/package.json b/plugins/importer-curl/package.json
new file mode 100644
index 0000000..9ee7689
--- /dev/null
+++ b/plugins/importer-curl/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaak/importer-curl",
+  "displayName": "cURL Importer",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Import requests from cURL commands",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  },
+  "dependencies": {
+    "shlex": "^3.0.0"
+  }
+}
diff --git a/plugins/importer-curl/src/graphql.ts b/plugins/importer-curl/src/graphql.ts
new file mode 100644
index 0000000..21743b5
--- /dev/null
+++ b/plugins/importer-curl/src/graphql.ts
@@ -0,0 +1,117 @@
+type GraphQLDetectionSignal = {
+  score: number;
+  requiresGraphQLDocument?: boolean;
+};
+
+export type GraphQLJsonBody = {
+  query: string;
+  variables?: string;
+  operationName?: string;
+};
+
+type GraphQLJsonBodyArgs = {
+  mimeType: string | null;
+  text: string;
+  url: string;
+};
+
+export function isGraphQLJsonBody(args: GraphQLJsonBodyArgs): boolean {
+  return parseGraphQLJsonBody(args) != null;
+}
+
+export function parseGraphQLJsonBody({
+  mimeType,
+  text,
+  url,
+}: GraphQLJsonBodyArgs): GraphQLJsonBody | null {
+  if (mimeType !== "application/json") {
+    return null;
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return null;
+  }
+
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    return null;
+  }
+
+  const body = parsed as Record<string, unknown>;
+  if (typeof body.query !== "string") {
+    return null;
+  }
+
+  if (hasExtraGraphQLEnvelopeFields(body)) {
+    return null;
+  }
+
+  const signals = getGraphQLDetectionSignals(body, url);
+  const score = signals.reduce((total, signal) => total + signal.score, 0);
+  const hasGraphQLDocument = signals.some((signal) => signal.requiresGraphQLDocument);
+  if (!hasGraphQLDocument || score < 4) {
+    return null;
+  }
+
+  const result: GraphQLJsonBody = { query: body.query };
+  if (body.variables != null) {
+    result.variables =
+      typeof body.variables === "string" ? body.variables : JSON.stringify(body.variables, null, 2);
+  }
+  if (typeof body.operationName === "string") {
+    result.operationName = body.operationName;
+  }
+
+  return result;
+}
+
+function hasExtraGraphQLEnvelopeFields(body: Record<string, unknown>): boolean {
+  const allowedKeys = new Set(["query", "variables", "operationName"]);
+  return Object.keys(body).some((key) => !allowedKeys.has(key));
+}
+
+function getGraphQLDetectionSignals(
+  body: Record<string, unknown>,
+  url: string,
+): GraphQLDetectionSignal[] {
+  const signals: GraphQLDetectionSignal[] = [];
+  const query = body.query as string;
+  const urlPath = getUrlPath(url).toLowerCase();
+
+  if (/\b(graphql|gql)\b/.test(urlPath)) {
+    signals.push({ score: 2 });
+  }
+
+  if (/^(query|mutation|subscription|fragment)\b/.test(query.trim())) {
+    signals.push({ score: 3 });
+  } else if (/^\{[\s\S]*\}$/.test(query.trim())) {
+    signals.push({ score: 3, requiresGraphQLDocument: true });
+  }
+
+  if (/\{[\s\S]*\}/.test(query)) {
+    signals.push({ score: 1, requiresGraphQLDocument: true });
+  }
+
+  if (typeof body.operationName === "string" && body.operationName.trim() !== "") {
+    signals.push({ score: 1 });
+  }
+
+  if (
+    body.variables != null &&
+    (typeof body.variables === "object" || typeof body.variables === "string")
+  ) {
+    signals.push({ score: 1 });
+  }
+
+  return signals;
+}
+
+function getUrlPath(url: string): string {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return url;
+  }
+}
diff --git a/plugins/importer-curl/src/index.ts b/plugins/importer-curl/src/index.ts
new file mode 100644
index 0000000..72f4b92
--- /dev/null
+++ b/plugins/importer-curl/src/index.ts
@@ -0,0 +1,775 @@
+import type {
+  Context,
+  Environment,
+  Folder,
+  HttpRequest,
+  HttpUrlParameter,
+  PluginDefinition,
+  Workspace,
+} from "@yaakapp/api";
+import { split } from "shlex";
+import { parseGraphQLJsonBody } from "./graphql";
+
+type AtLeast<T, K extends keyof T> = Partial<T> & Pick<T, K>;
+
+interface ExportResources {
+  workspaces: AtLeast<Workspace, "name" | "id" | "model">[];
+  environments: AtLeast<Environment, "name" | "id" | "model" | "workspaceId">[];
+  httpRequests: AtLeast<HttpRequest, "name" | "id" | "model" | "workspaceId">[];
+  folders: AtLeast<Folder, "name" | "id" | "model" | "workspaceId">[];
+}
+
+const DATA_FLAGS = ["d", "data", "data-raw", "data-urlencode", "data-binary", "data-ascii"];
+const SUPPORTED_FLAGS = [
+  ["cookie", "b"],
+  ["d", "data"], // Add url encoded data
+  ["data-ascii"],
+  ["data-binary"],
+  ["data-raw"],
+  ["data-urlencode"],
+  ["digest"], // Apply auth as digest
+  ["form", "F"], // Add multipart data
+  ["get", "G"], // Put the post data in the URL
+  ["header", "H"],
+  ["request", "X"], // Request method
+  ["url"], // Specify the URL explicitly
+  ["url-query"],
+  ["user", "u"], // Authentication
+  DATA_FLAGS,
+].flat();
+
+const BOOLEAN_FLAGS = ["G", "get", "digest"];
+
+// Short flags that consume a value, derived so this stays in step with the
+// tables above.
+const VALUE_SHORT_FLAGS = SUPPORTED_FLAGS.flat().filter(
+  (name) => name.length === 1 && !BOOLEAN_FLAGS.includes(name),
+);
+
+/**
+ * Expand a short-flag token into separate arguments.
+ *
+ * curl reads a short cluster left to right, one option per character, until an
+ * option that takes a value — that one swallows the rest of the cluster. So
+ * `-XPOST` is `-X POST`, but `-fsSL` is four boolean flags rather than `-f`
+ * plus a value. Splitting unconditionally after the first character left
+ * `sSL` as a positional argument, and the first positional is read as the URL:
+ * `curl -fsSL https://example.com` imported with a URL of `sSL`.
+ */
+function expandShortFlags(token: string): string[] {
+  if (!token.startsWith("-") || token.startsWith("--") || token.length <= 2) {
+    return [token];
+  }
+
+  const expanded: string[] = [];
+  for (let i = 1; i < token.length; i++) {
+    const name = token[i] ?? "";
+    expanded.push(`-${name}`);
+
+    if (VALUE_SHORT_FLAGS.includes(name)) {
+      const value = token.slice(i + 1);
+      if (value) {
+        expanded.push(value);
+      }
+      break;
+    }
+  }
+
+  return expanded;
+}
+
+type FlagValue = string | boolean;
+
+type FlagsByName = Record<string, FlagValue[]>;
+
+export const plugin: PluginDefinition = {
+  importer: {
+    name: "cURL",
+    description: "Import cURL commands",
+    onImport(_ctx: Context, args: { text: string }) {
+      // oxlint-disable-next-line no-explicit-any
+      return convertCurl(args.text) as any;
+    },
+  },
+};
+
+/**
+ * Splits raw input into individual shell command strings.
+ * Handles line continuations, semicolons, and newline-separated curl commands.
+ */
+function splitCommands(rawData: string): string[] {
+  // Join line continuations (backslash-newline, and backslash-CRLF for
+  // Windows). Trailing spaces or tabs after the backslash are common when a
+  // command is copied from a terminal or a doc, and the shell treats
+  // "\ <newline>" as an escaped space rather than a continuation, so accept
+  // them here to keep the pasted command in one piece.
+  const joined = rawData.replace(/\\[ \t]*\r?\n/g, " ");
+
+  // Count consecutive backslashes immediately before position i.
+  // An even count means the quote at i is NOT escaped; odd means it IS escaped.
+  function isEscaped(i: number): boolean {
+    let backslashes = 0;
+    let j = i - 1;
+    while (j >= 0 && joined[j] === "\\") {
+      backslashes++;
+      j--;
+    }
+    return backslashes % 2 !== 0;
+  }
+
+  // Split on semicolons and newlines to separate commands
+  const commands: string[] = [];
+  let current = "";
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inDollarQuote = false;
+
+  for (let i = 0; i < joined.length; i++) {
+    if (joined[i] === undefined) break; // Make TS happy
+
+    const ch = joined[i];
+    const next = joined[i + 1];
+
+    // Track quoting state to avoid splitting inside quoted strings
+    if (!inDoubleQuote && !inDollarQuote && ch === "'" && !inSingleQuote) {
+      inSingleQuote = true;
+      current += ch;
+      continue;
+    }
+    if (inSingleQuote && ch === "'") {
+      inSingleQuote = false;
+      current += ch;
+      continue;
+    }
+    if (!inSingleQuote && !inDollarQuote && ch === '"' && !inDoubleQuote) {
+      inDoubleQuote = true;
+      current += ch;
+      continue;
+    }
+    if (inDoubleQuote && ch === '"' && !isEscaped(i)) {
+      inDoubleQuote = false;
+      current += ch;
+      continue;
+    }
+    if (!inSingleQuote && !inDoubleQuote && !inDollarQuote && ch === "$" && next === "'") {
+      inDollarQuote = true;
+      current += ch + next;
+      i++; // Skip the opening quote
+      continue;
+    }
+    if (inDollarQuote && ch === "'" && !isEscaped(i)) {
+      inDollarQuote = false;
+      current += ch;
+      continue;
+    }
+
+    const inQuote = inSingleQuote || inDoubleQuote || inDollarQuote;
+
+    // Split on ;, newline, or CRLF when not inside quotes and not escaped
+    if (
+      !inQuote &&
+      !isEscaped(i) &&
+      (ch === ";" || ch === "\n" || (ch === "\r" && next === "\n"))
+    ) {
+      if (ch === "\r") i++; // Skip the \n in \r\n
+      if (current.trim()) {
+        commands.push(current.trim());
+      }
+      current = "";
+      continue;
+    }
+
+    current += ch;
+  }
+
+  if (current.trim()) {
+    commands.push(current.trim());
+  }
+
+  return commands;
+}
+
+export function convertCurl(rawData: string) {
+  if (!rawData.match(/^\s*curl /)) {
+    return null;
+  }
+
+  const commands: string[][] = splitCommands(rawData).map((cmd) => {
+    const tokens = split(cmd);
+    return tokens.flatMap(expandShortFlags);
+  });
+
+  const workspace: ExportResources["workspaces"][0] = {
+    model: "workspace",
+    id: generateId("workspace"),
+    name: "Curl Import",
+  };
+
+  const requests: ExportResources["httpRequests"] = commands
+    .filter((command) => command[0] === "curl")
+    .map((v) => importCommand(v, workspace.id));
+
+  return {
+    resources: {
+      httpRequests: requests,
+      workspaces: [workspace],
+    },
+  };
+}
+
+interface ExtractedAuthentication {
+  authenticationType: string | null;
+  authentication: Record<string, string>;
+  filteredHeaders: HttpUrlParameter[]; // headers without authorization
+}
+
+function extractAuthenticationFromHeaders(headers: HttpUrlParameter[]): ExtractedAuthentication {
+  const authorizationHeaderIndex = headers.findIndex(
+    (h) => h.name.toLowerCase() === "authorization",
+  );
+
+  const authorizationHeader = headers[authorizationHeaderIndex];
+  if (authorizationHeader == null) {
+    return {
+      authenticationType: null,
+      authentication: {},
+      filteredHeaders: headers,
+    };
+  }
+
+  const value = authorizationHeader.value.trim();
+  const spaceIndex = value.indexOf(" ");
+
+  if (spaceIndex <= 0) {
+    return {
+      authenticationType: null,
+      authentication: {},
+      filteredHeaders: headers,
+    };
+  }
+
+  const scheme = value.slice(0, spaceIndex).toLowerCase();
+  const credentials = value.slice(spaceIndex + 1).trim();
+
+  // Bearer authentication (RFC 6750)
+  if (scheme === "bearer") {
+    const filteredHeaders = headers.filter((_, i) => i !== authorizationHeaderIndex);
+    return {
+      authenticationType: "bearer",
+      authentication: { token: credentials, prefix: "Bearer" },
+      filteredHeaders,
+    };
+  }
+
+  // Basic authentication (RFC 7617)
+  if (scheme === "basic") {
+    try {
+      const decoded = Buffer.from(credentials, "base64").toString();
+      const colonIndex = decoded.indexOf(":");
+      if (colonIndex > 0) {
+        const filteredHeaders = headers.filter((_, i) => i !== authorizationHeaderIndex);
+        return {
+          authenticationType: "basic",
+          authentication: {
+            username: decoded.slice(0, colonIndex),
+            password: decoded.slice(colonIndex + 1),
+          },
+          filteredHeaders,
+        };
+      }
+    } catch {
+      // Invalid base64, keep header as-is
+    }
+  }
+
+  return {
+    authenticationType: null,
+    authentication: {},
+    filteredHeaders: headers,
+  };
+}
+
+function importCommand(parseEntries: string[], workspaceId: string) {
+  // ~~~~~~~~~~~~~~~~~~~~~ //
+  // Collect all the flags //
+  // ~~~~~~~~~~~~~~~~~~~~~ //
+  const flagsByName: FlagsByName = {};
+  const singletons: string[] = [];
+
+  // Start at 1 so we can skip the ^curl part
+  for (let i = 1; i < parseEntries.length; i++) {
+    let parseEntry = parseEntries[i];
+    if (typeof parseEntry === "string") {
+      parseEntry = parseEntry.trim();
+    }
+
+    if (typeof parseEntry === "string" && parseEntry.match(/^-{1,2}[\w-]+/)) {
+      const isSingleDash = parseEntry[0] === "-" && parseEntry[1] !== "-";
+      let name = parseEntry.replace(/^-{1,2}/, "");
+
+      if (!SUPPORTED_FLAGS.includes(name)) {
+        continue;
+      }
+
+      let value: string | boolean;
+      const nextEntry = parseEntries[i + 1];
+      const hasValue = !BOOLEAN_FLAGS.includes(name);
+      // Check if nextEntry looks like a flag:
+      // - Single dash followed by a letter: -X, -H, -d
+      // - Double dash followed by a letter: --data-raw, --header
+      // This prevents mistaking data that starts with dashes (like multipart boundaries ------) as flags
+      const nextEntryIsFlag =
+        typeof nextEntry === "string" &&
+        (nextEntry.match(/^-[a-zA-Z]/) || nextEntry.match(/^--[a-zA-Z]/));
+      if (isSingleDash && name.length > 1) {
+        // Handle squished arguments like -XPOST
+        value = name.slice(1);
+        name = name.slice(0, 1);
+      } else if (typeof nextEntry === "string" && hasValue && !nextEntryIsFlag) {
+        // Next arg is not a flag, so assign it as the value
+        value = nextEntry;
+        i++; // Skip next one
+      } else {
+        value = true;
+      }
+
+      flagsByName[name] = flagsByName[name] || [];
+      flagsByName[name]?.push(value);
+    } else if (parseEntry) {
+      singletons.push(parseEntry);
+    }
+  }
+
+  // ~~~~~~~~~~~~~~~~~ //
+  // Build the request //
+  // ~~~~~~~~~~~~~~~~~ //
+
+  const urlArg = getPairValue(flagsByName, (singletons[0] as string) || "", ["url"]);
+  const [baseUrl, search] = splitOnce(urlArg, "?");
+  const urlParameters: HttpUrlParameter[] =
+    search?.split("&").map((p) => {
+      const v = splitOnce(p, "=");
+      return {
+        name: decodeURIComponent(v[0] ?? ""),
+        value: decodeURIComponent(v[1] ?? ""),
+        enabled: true,
+      };
+    }) ?? [];
+
+  const url = baseUrl ?? urlArg;
+
+  // Query params
+  for (const p of flagsByName["url-query"] ?? []) {
+    if (typeof p !== "string") {
+      continue;
+    }
+    // splitOnce: a query value may itself contain "=" (a base64 payload, a
+    // nested filter), and only the first one separates name from value.
+    const [name, value] = splitOnce(p, "=");
+    urlParameters.push({
+      name: name ?? "",
+      value: value ?? "",
+      enabled: true,
+    });
+  }
+
+  // Authentication
+  const [username, password] = getPairValue(flagsByName, "", ["u", "user"]).split(/:(.*)$/);
+
+  const isDigest = getPairValue(flagsByName, false, ["digest"]);
+  const authenticationType = username ? (isDigest ? "digest" : "basic") : null;
+  const authentication = username
+    ? {
+        username: username.trim(),
+        password: (password ?? "").trim(),
+      }
+    : {};
+
+  // Headers
+  const headers = [
+    ...((flagsByName.header as string[] | undefined) || []),
+    ...((flagsByName.H as string[] | undefined) || []),
+  ].map((header) => {
+    const [name, value] = header.split(/:(.*)$/);
+    // remove final colon from header name if present
+    if (!value) {
+      return {
+        name: (name ?? "").trim().replace(/;$/, ""),
+        value: "",
+        enabled: true,
+      };
+    }
+    return {
+      name: (name ?? "").trim(),
+      value: value.trim(),
+      enabled: true,
+    };
+  });
+
+  // Cookies
+  const cookieHeaderValue = [
+    ...((flagsByName.cookie as string[] | undefined) || []),
+    ...((flagsByName.b as string[] | undefined) || []),
+  ]
+    .map((str) => {
+      const name = str.split("=", 1)[0];
+      const value = str.replace(`${name}=`, "");
+      return `${name}=${value}`;
+    })
+    .join("; ");
+
+  // Convert cookie value to header
+  const existingCookieHeader = headers.find((header) => header.name.toLowerCase() === "cookie");
+
+  if (cookieHeaderValue && existingCookieHeader) {
+    // Has existing cookie header, so let's update it
+    existingCookieHeader.value += `; ${cookieHeaderValue}`;
+  } else if (cookieHeaderValue) {
+    // No existing cookie header, so let's make a new one
+    headers.push({
+      name: "Cookie",
+      value: cookieHeaderValue,
+      enabled: true,
+    });
+  }
+
+  // Extract authentication from Authorization headers (Bearer/Basic)
+  const {
+    authenticationType: extractedAuthenticationType,
+    authentication: extractedAuthentication,
+    filteredHeaders,
+  } = extractAuthenticationFromHeaders(headers);
+
+  // Use extracted authentication from header if found, otherwise fall back to -u/--user parsing
+  const finalAuthenticationType = extractedAuthenticationType || authenticationType;
+  const finalAuthentication = extractedAuthenticationType
+    ? extractedAuthentication
+    : authentication;
+
+  // Body (Text or Blob)
+  const contentTypeHeader = filteredHeaders.find(
+    (header) => header.name.toLowerCase() === "content-type",
+  );
+  const mimeType = contentTypeHeader ? contentTypeHeader.value.split(";")[0]?.trim() : null;
+
+  // Extract boundary from Content-Type header for multipart parsing
+  const boundaryMatch = contentTypeHeader?.value.match(/boundary=([^\s;]+)/i);
+  const boundary = boundaryMatch?.[1];
+
+  // Get raw data from --data-raw flags (before splitting by &)
+  const rawDataValues = [
+    ...((flagsByName["data-raw"] as string[] | undefined) || []),
+    ...((flagsByName.d as string[] | undefined) || []),
+    ...((flagsByName.data as string[] | undefined) || []),
+    ...((flagsByName["data-binary"] as string[] | undefined) || []),
+    ...((flagsByName["data-ascii"] as string[] | undefined) || []),
+  ];
+
+  // Check if this is multipart form data in --data-raw (Chrome DevTools format)
+  let multipartFormDataFromRaw:
+    | { name: string; value?: string; file?: string; enabled: boolean }[]
+    | null = null;
+  if (mimeType === "multipart/form-data" && boundary && rawDataValues.length > 0) {
+    const rawBody = rawDataValues.join("");
+    multipartFormDataFromRaw = parseMultipartFormData(rawBody, boundary);
+  }
+
+  const dataParameters = pairsToDataParameters(flagsByName);
+
+  // Body (Multipart Form Data from -F flags)
+  const formDataParams = [
+    ...((flagsByName.form as string[] | undefined) || []),
+    ...((flagsByName.F as string[] | undefined) || []),
+  ].map((str) => {
+    // splitOnce for the same reason as --url-query above: base64 padding
+    // ("...==") and any value containing "=" must survive intact.
+    const parts = splitOnce(str, "=");
+    const name = parts[0] ?? "";
+    const value = parts[1] ?? "";
+    const item: { name: string; value?: string; file?: string; enabled: boolean } = {
+      name,
+      enabled: true,
+    };
+
+    if (value.indexOf("@") === 0) {
+      item.file = value.slice(1);
+    } else {
+      item.value = value;
+    }
+
+    return item;
+  });
+
+  // Body
+  let body = {};
+  let bodyType: string | null = null;
+  const bodyAsGET = getPairValue(flagsByName, false, ["G", "get"]);
+  const hasDataBody = dataParameters.length > 0 && !bodyAsGET;
+  const hasFormBody = multipartFormDataFromRaw != null || formDataParams.length > 0;
+
+  if (multipartFormDataFromRaw) {
+    // Handle multipart form data parsed from --data-raw (Chrome DevTools format)
+    bodyType = "multipart/form-data";
+    body = {
+      form: multipartFormDataFromRaw,
+    };
+  } else if (dataParameters.length > 0 && bodyAsGET) {
+    // `-G` moves the data into the query string, and Yaak encodes url
+    // parameters on send exactly as it encodes the form body below, so this
+    // needs the same decode -- otherwise a `--data-urlencode` value arrives
+    // here already encoded and goes out encoded twice.
+    urlParameters.push(
+      ...dataParameters.map((parameter) => ({
+        ...parameter,
+        name: decodePercentEncoding(parameter.name),
+        value: decodePercentEncoding(parameter.value),
+      })),
+    );
+  } else if (
+    dataParameters.length > 0 &&
+    (mimeType == null || mimeType === "application/x-www-form-urlencoded")
+  ) {
+    bodyType = mimeType ?? "application/x-www-form-urlencoded";
+    body = {
+      form: dataParameters.map((parameter) => ({
+        ...parameter,
+        name: decodePercentEncoding(parameter.name),
+        value: decodePercentEncoding(parameter.value),
+      })),
+    };
+    filteredHeaders.push({
+      name: "Content-Type",
+      value: "application/x-www-form-urlencoded",
+      enabled: true,
+    });
+  } else if (dataParameters.length > 0) {
+    const text = dataParameters
+      .map(({ name, value }) => (name && value ? `${name}=${value}` : name || value))
+      .join("&");
+    const graphqlBody = parseGraphQLJsonBody({ mimeType, text, url });
+
+    if (graphqlBody != null) {
+      bodyType = "graphql";
+      body = graphqlBody;
+    } else if (
+      mimeType === "application/json" ||
+      mimeType === "text/xml" ||
+      mimeType === "text/plain"
+    ) {
+      bodyType = mimeType;
+      body = { text };
+    } else {
+      bodyType = "other";
+      body = { text };
+    }
+  } else if (formDataParams.length) {
+    bodyType = mimeType ?? "multipart/form-data";
+    body = {
+      form: formDataParams,
+    };
+    if (mimeType == null) {
+      filteredHeaders.push({
+        name: "Content-Type",
+        value: "multipart/form-data",
+        enabled: true,
+      });
+    }
+  }
+
+  // Method
+  let method = getPairValue(flagsByName, "", ["X", "request"]).toUpperCase();
+
+  if (method === "") {
+    method = hasDataBody || hasFormBody ? "POST" : "GET";
+  }
+
+  const request: ExportResources["httpRequests"][0] = {
+    id: generateId("http_request"),
+    model: "http_request",
+    workspaceId,
+    name: "",
+    urlParameters,
+    url,
+    method,
+    headers: filteredHeaders,
+    authentication: finalAuthentication,
+    authenticationType: finalAuthenticationType,
+    body,
+    bodyType,
+    folderId: null,
+    sortPriority: 0,
+  };
+
+  return request;
+}
+
+interface DataParameter {
+  name: string;
+  value: string;
+  contentType?: string;
+  filePath?: string;
+  enabled?: boolean;
+}
+
+/**
+ * Decode a percent-encoded form value, keeping it as-is when it is not one.
+ *
+ * Yaak's form editor holds decoded values and re-encodes them on send, so a
+ * `-d` value has to be decoded on the way in. But curl sends that value
+ * verbatim and does not require it to be valid percent-encoding: `a=100%` is
+ * an ordinary form value, and `decodeURIComponent` throws URIError on it,
+ * which failed the whole import rather than that one parameter.
+ */
+function decodePercentEncoding(value: string | undefined): string {
+  const text = value || "";
+  try {
+    return decodeURIComponent(text);
+  } catch {
+    // Mixed: some of it is percent-encoded and some of it is a stray `%`.
+    // Returning the whole string untouched would leave the encoded part to be
+    // encoded a second time on send, so decode each valid run on its own and
+    // leave the stray byte alone. A run rather than a single escape, because a
+    // non-ASCII character is several escapes that only decode together.
+    return text.replace(/(%[0-9A-Fa-f]{2})+/g, (run) => {
+      try {
+        return decodeURIComponent(run);
+      } catch {
+        return run;
+      }
+    });
+  }
+}
+function pairsToDataParameters(keyedPairs: FlagsByName): DataParameter[] {
+  const dataParameters: DataParameter[] = [];
+
+  for (const flagName of DATA_FLAGS) {
+    const pairs = keyedPairs[flagName];
+
+    if (!pairs || pairs.length === 0) {
+      continue;
+    }
+
+    for (const p of pairs) {
+      if (typeof p !== "string") continue;
+      // `-d` content really is `&`-separated, so splitting it is right. But
+      // `--data-urlencode` encodes its whole argument — an `&` inside it is
+      // data curl percent-encodes, not a separator, so splitting there turned
+      // one parameter into several and changed what the request sends.
+      const params = flagName === "data-urlencode" ? [p] : p.split("&");
+      for (const param of params) {
+        const [name, value] = splitOnce(param, "=");
+        if (param.startsWith("@")) {
+          // Yaak doesn't support files in url-encoded data, so
+          dataParameters.push({
+            name: name ?? "",
+            value: "",
+            filePath: param.slice(1),
+            enabled: true,
+          });
+        } else {
+          dataParameters.push({
+            name: name ?? "",
+            value: flagName === "data-urlencode" ? encodeURIComponent(value ?? "") : (value ?? ""),
+            enabled: true,
+          });
+        }
+      }
+    }
+  }
+
+  return dataParameters;
+}
+
+const getPairValue = <T extends string | boolean>(
+  pairsByName: FlagsByName,
+  defaultValue: T,
+  names: string[],
+) => {
+  for (const name of names) {
+    if (pairsByName[name]?.length) {
+      return pairsByName[name]?.[0] as T;
+    }
+  }
+
+  return defaultValue;
+};
+
+function splitOnce(str: string, sep: string): string[] {
+  const index = str.indexOf(sep);
+  if (index > -1) {
+    return [str.slice(0, index), str.slice(index + 1)];
+  }
+  return [str];
+}
+
+/**
+ * Parses multipart form data from a raw body string
+ * Used when Chrome DevTools exports a cURL with --data-raw containing multipart data
+ */
+function parseMultipartFormData(
+  rawBody: string,
+  boundary: string,
+): { name: string; value?: string; file?: string; enabled: boolean }[] | null {
+  const results: { name: string; value?: string; file?: string; enabled: boolean }[] = [];
+
+  // The boundary in the body typically has -- prefix
+  const boundaryMarker = `--${boundary}`;
+  const parts = rawBody.split(boundaryMarker);
+
+  for (const part of parts) {
+    // Skip empty parts and the closing boundary marker
+    if (!part || part.trim() === "--" || part.trim() === "--\r\n") {
+      continue;
+    }
+
+    // Each part has headers and content separated by \r\n\r\n
+    const headerContentSplit = part.indexOf("\r\n\r\n");
+    if (headerContentSplit === -1) {
+      continue;
+    }
+
+    const headerSection = part.slice(0, headerContentSplit);
+    let content = part.slice(headerContentSplit + 4); // Skip \r\n\r\n
+
+    // Remove trailing \r\n from content
+    if (content.endsWith("\r\n")) {
+      content = content.slice(0, -2);
+    }
+
+    // Parse Content-Disposition header to get name and filename
+    const contentDispositionMatch = headerSection.match(
+      /Content-Disposition:\s*form-data;\s*name="([^"]+)"(?:;\s*filename="([^"]+)")?/i,
+    );
+
+    if (!contentDispositionMatch) {
+      continue;
+    }
+
+    const name = contentDispositionMatch[1] ?? "";
+    const filename = contentDispositionMatch[2];
+
+    const item: { name: string; value?: string; file?: string; enabled: boolean } = {
+      name,
+      enabled: true,
+    };
+
+    if (filename) {
+      // This is a file upload field
+      item.file = filename;
+    } else {
+      // This is a regular text field
+      item.value = content;
+    }
+
+    results.push(item);
+  }
+
+  return results.length > 0 ? results : null;
+}
+
+const idCount: Partial<Record<string, number>> = {};
+
+function generateId(model: string): string {
+  idCount[model] = (idCount[model] ?? -1) + 1;
+  return `GENERATE_ID::${model.toUpperCase()}_${idCount[model]}`;
+}
diff --git a/plugins/importer-curl/tests/graphql.test.ts b/plugins/importer-curl/tests/graphql.test.ts
new file mode 100644
index 0000000..756ae61
--- /dev/null
+++ b/plugins/importer-curl/tests/graphql.test.ts
@@ -0,0 +1,146 @@
+import { describe, expect, test } from "vite-plus/test";
+import { isGraphQLJsonBody, parseGraphQLJsonBody } from "../src/graphql";
+
+describe("isGraphQLJsonBody", () => {
+  test("detects named query documents without a GraphQL URL", () => {
+    const args = {
+      mimeType: "application/json",
+      text: JSON.stringify({
+        query: "query Search($id: ID!) { node(id: $id) { id } }",
+        variables: { id: "123" },
+        operationName: "Search",
+      }),
+      url: "https://api.example.com/search",
+    };
+
+    expect(isGraphQLJsonBody(args)).toBe(true);
+    expect(parseGraphQLJsonBody(args)).toEqual({
+      query: "query Search($id: ID!) { node(id: $id) { id } }",
+      variables: '{\n  "id": "123"\n}',
+      operationName: "Search",
+    });
+  });
+
+  test("detects mutation documents", () => {
+    expect(
+      isGraphQLJsonBody({
+        mimeType: "application/json",
+        text: JSON.stringify({ query: "mutation Save { saveThing { id } }" }),
+        url: "https://api.example.com",
+      }),
+    ).toBe(true);
+  });
+
+  test("detects anonymous selection set documents", () => {
+    expect(
+      isGraphQLJsonBody({
+        mimeType: "application/json",
+        text: JSON.stringify({ query: "{ viewer { id email } }" }),
+        url: "https://api.example.com",
+      }),
+    ).toBe(true);
+  });
+
+  test("detects document bodies on GraphQL-looking paths", () => {
+    expect(
+      isGraphQLJsonBody({
+        mimeType: "application/json",
+        text: JSON.stringify({ query: "query Search { viewer { id } }", operationName: "Search" }),
+        url: "https://api.example.com/v1/graphql",
+      }),
+    ).toBe(true);
+  });
+
+  test("does not detect incomplete operation documents even on GraphQL-looking paths", () => {
+    expect(
+      isGraphQLJsonBody({
+        mimeType: "application/json",
+        text: JSON.stringify({ query: "query Search", operationName: "Search" }),
+        url: "https://api.example.com/graphql",
+      }),
+    ).toBe(false);
+  });
+
+  test("does not detect plain JSON query fields even on GraphQL-looking paths", () => {
+    expect(
+      isGraphQLJsonBody({
+        mimeType: "application/json",
+        text: JSON.stringify({ query: "SearchQueryInput!" }),
+        url: "https://api.example.com/graphql",
+      }),
+    ).toBe(false);
+  });
+
+  test("does not use variables and operationName alone as enough evidence", () => {
+    expect(
+      isGraphQLJsonBody({
+        mimeType: "application/json",
+        text: JSON.stringify({
+          query: "SearchQueryInput!",
+          variables: { id: "123" },
+          operationName: "Search",
+        }),
+        url: "https://api.example.com",
+      }),
+    ).toBe(false);
+  });
+
+  test("detects bodies with string variables without parsing them", () => {
+    const args = {
+      mimeType: "application/json",
+      text: JSON.stringify({
+        query: "query Search($id: ID!) { node(id: $id) { id } }",
+        variables: '{ "id": "123" }',
+      }),
+      url: "https://api.example.com",
+    };
+
+    expect(isGraphQLJsonBody(args)).toBe(true);
+    expect(parseGraphQLJsonBody(args)).toEqual({
+      query: "query Search($id: ID!) { node(id: $id) { id } }",
+      variables: '{ "id": "123" }',
+    });
+  });
+
+  test("does not detect GraphQL envelopes with extra fields", () => {
+    const args = {
+      mimeType: "application/json",
+      text: JSON.stringify({
+        query: "query Search($id: ID!) { node(id: $id) { id } }",
+        variables: { id: "123" },
+        extensions: { persistedQuery: { version: 1, sha256Hash: "abc123" } },
+      }),
+      url: "https://api.example.com/graphql",
+    };
+
+    expect(isGraphQLJsonBody(args)).toBe(false);
+    expect(parseGraphQLJsonBody(args)).toBeNull();
+  });
+
+  test("ignores invalid JSON and non-object JSON", () => {
+    expect(
+      isGraphQLJsonBody({
+        mimeType: "application/json",
+        text: "not json",
+        url: "https://api.example.com/graphql",
+      }),
+    ).toBe(false);
+    expect(
+      isGraphQLJsonBody({
+        mimeType: "application/json",
+        text: "[]",
+        url: "https://api.example.com/graphql",
+      }),
+    ).toBe(false);
+  });
+
+  test("ignores non-JSON MIME types", () => {
+    expect(
+      isGraphQLJsonBody({
+        mimeType: "text/plain",
+        text: JSON.stringify({ query: "query Search { viewer { id } }" }),
+        url: "https://api.example.com/graphql",
+      }),
+    ).toBe(false);
+  });
+});
diff --git a/plugins/importer-curl/tests/index.test.ts b/plugins/importer-curl/tests/index.test.ts
new file mode 100644
index 0000000..79f3819
--- /dev/null
+++ b/plugins/importer-curl/tests/index.test.ts
@@ -0,0 +1,1026 @@
+import type { HttpRequest, Workspace } from "@yaakapp/api";
+import { describe, expect, test } from "vite-plus/test";
+import { convertCurl } from "../src";
+
+describe("importer-curl", () => {
+  test("Imports basic GET", () => {
+    expect(convertCurl("curl https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+          }),
+        ],
+      },
+    });
+  });
+
+  // A short cluster is one option per character until one that takes a value.
+  // `-fsSL` is four boolean flags, so nothing in it is a positional argument --
+  // the URL used to come out as "sSL".
+  test("Imports combined short flags", () => {
+    expect(convertCurl("curl -fsSL https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports a combined short cluster ending in a value flag", () => {
+    expect(convertCurl("curl -sSXPOST https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Explicit URL", () => {
+    expect(convertCurl("curl --url https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Missing URL", () => {
+    expect(convertCurl("curl -X POST")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            method: "POST",
+          }),
+        ],
+      },
+    });
+  });
+
+  test("URL between", () => {
+    expect(convertCurl("curl -v https://yaak.app -X POST")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Random flags", () => {
+    expect(convertCurl("curl --random -Z -Y -S --foo https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports --request method", () => {
+    expect(convertCurl("curl --request POST https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports -XPOST method", () => {
+    expect(convertCurl("curl -XPOST --request POST https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports multiple requests", () => {
+    expect(
+      convertCurl('curl \\\n  https://yaak.app\necho "foo"\ncurl example.com;curl foo.com'),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({ url: "https://yaak.app" }),
+          baseRequest({ url: "example.com" }),
+          baseRequest({ url: "foo.com" }),
+        ],
+      },
+    });
+  });
+
+  // A trailing space after the continuation backslash is invisible in most
+  // editors but used to stop the join, so the quoted body split across
+  // lines and the parser failed with "Got EOF while in a quoted string".
+  test("Imports line continuations with trailing whitespace after the backslash", () => {
+    expect(
+      convertCurl(
+        "curl -X POST https://yaak.app \\ \n  -H 'Content-Type: application/json' \\\t\n  --data '{\"a\":1}' \\ \r\n  -H 'Accept: application/json'",
+      ),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+            headers: [
+              { name: "Content-Type", value: "application/json", enabled: true },
+              { name: "Accept", value: "application/json", enabled: true },
+            ],
+            bodyType: "application/json",
+            body: { text: '{"a":1}' },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports with Windows CRLF line endings", () => {
+    expect(convertCurl("curl \\\r\n  -X POST \\\r\n  https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [baseRequest({ url: "https://yaak.app", method: "POST" })],
+      },
+    });
+  });
+
+  test("Throws on malformed quotes", () => {
+    expect(() => convertCurl('curl -X POST -F "a=aaa" -F b=bbb" https://yaak.app')).toThrow();
+  });
+
+  test("Imports form data", () => {
+    expect(convertCurl('curl -X POST -F "a=aaa" -F b=bbb -F f=@filepath https://yaak.app')).toEqual(
+      {
+        resources: {
+          workspaces: [baseWorkspace()],
+          httpRequests: [
+            baseRequest({
+              method: "POST",
+              url: "https://yaak.app",
+              headers: [
+                {
+                  name: "Content-Type",
+                  value: "multipart/form-data",
+                  enabled: true,
+                },
+              ],
+              bodyType: "multipart/form-data",
+              body: {
+                form: [
+                  { enabled: true, name: "a", value: "aaa" },
+                  { enabled: true, name: "b", value: "bbb" },
+                  { enabled: true, name: "f", file: "filepath" },
+                ],
+              },
+            }),
+          ],
+        },
+      },
+    );
+  });
+
+  test("Imports data params as form url-encoded", () => {
+    expect(convertCurl("curl -d a -d b -d c=ccc https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            method: "POST",
+            url: "https://yaak.app",
+            bodyType: "application/x-www-form-urlencoded",
+            headers: [
+              {
+                name: "Content-Type",
+                value: "application/x-www-form-urlencoded",
+                enabled: true,
+              },
+            ],
+            body: {
+              form: [
+                { name: "a", value: "", enabled: true },
+                { name: "b", value: "", enabled: true },
+                { name: "c", value: "ccc", enabled: true },
+              ],
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports combined data params as form url-encoded", () => {
+    expect(convertCurl(`curl -d 'a=aaa&b=bbb&c' https://yaak.app`)).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            method: "POST",
+            url: "https://yaak.app",
+            bodyType: "application/x-www-form-urlencoded",
+            headers: [
+              {
+                name: "Content-Type",
+                value: "application/x-www-form-urlencoded",
+                enabled: true,
+              },
+            ],
+            body: {
+              form: [
+                { name: "a", value: "aaa", enabled: true },
+                { name: "b", value: "bbb", enabled: true },
+                { name: "c", value: "", enabled: true },
+              ],
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Keeps an --data-urlencode value whole", () => {
+    // curl encodes the whole argument, so the `&` and the second `=` are data it
+    // percent-encodes, not separators. Splitting on them made two parameters
+    // out of one, and Yaak then re-sent `q=a&b=c` where curl sends
+    // `q=a%26b%3Dc`. One parameter here re-encodes back to what curl sends.
+    expect(convertCurl(`curl --data-urlencode 'q=a&b=c' https://yaak.app`)).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            method: "POST",
+            url: "https://yaak.app",
+            bodyType: "application/x-www-form-urlencoded",
+            headers: [
+              {
+                name: "Content-Type",
+                value: "application/x-www-form-urlencoded",
+                enabled: true,
+              },
+            ],
+            body: {
+              form: [{ name: "q", value: "a&b=c", enabled: true }],
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports a data value that is not valid percent-encoding", () => {
+    // curl sends a `-d` value verbatim and does not require it to decode, so
+    // a lone `%` is an ordinary form value. decodeURIComponent threw URIError
+    // on it and failed the whole import.
+    expect(convertCurl(`curl -d 'a=100%' https://yaak.app`)).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            method: "POST",
+            url: "https://yaak.app",
+            bodyType: "application/x-www-form-urlencoded",
+            headers: [
+              {
+                name: "Content-Type",
+                value: "application/x-www-form-urlencoded",
+                enabled: true,
+              },
+            ],
+            body: {
+              form: [{ name: "a", value: "100%", enabled: true }],
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Keeps a valid escape decoded when the value also holds a stray percent", () => {
+    // Handing the whole value back untouched would leave `%25` to be encoded a
+    // second time on send, so each valid run decodes on its own.
+    expect(convertCurl(`curl -d 'a=50%25 and 100%' https://yaak.app`)).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            method: "POST",
+            url: "https://yaak.app",
+            bodyType: "application/x-www-form-urlencoded",
+            headers: [
+              {
+                name: "Content-Type",
+                value: "application/x-www-form-urlencoded",
+                enabled: true,
+              },
+            ],
+            body: {
+              form: [{ name: "a", value: "50% and 100%", enabled: true }],
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Decodes -G --data-urlencode into the query string", () => {
+    // `-G` puts the data in the query string, which is encoded on send just
+    // like the form body, so the value has to arrive here decoded or it goes
+    // out encoded twice.
+    expect(convertCurl(`curl -G --data-urlencode 'q=a&b' https://yaak.app`)).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            urlParameters: [{ name: "q", value: "a&b", enabled: true }],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports data params as text", () => {
+    expect(
+      convertCurl("curl -H Content-Type:text/plain -d a -d b -d c=ccc https://yaak.app"),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            method: "POST",
+            url: "https://yaak.app",
+            headers: [{ name: "Content-Type", value: "text/plain", enabled: true }],
+            bodyType: "text/plain",
+            body: { text: "a&b&c=ccc" },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports post data into URL", () => {
+    expect(convertCurl("curl -G https://api.stripe.com/v1/payment_links -d limit=3")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            method: "GET",
+            url: "https://api.stripe.com/v1/payment_links",
+            urlParameters: [
+              {
+                enabled: true,
+                name: "limit",
+                value: "3",
+              },
+            ],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports multi-line JSON", () => {
+    expect(
+      convertCurl(
+        `curl -H Content-Type:application/json -d $'{\n  "foo":"bar"\n}' https://yaak.app`,
+      ),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            method: "POST",
+            url: "https://yaak.app",
+            headers: [{ name: "Content-Type", value: "application/json", enabled: true }],
+            bodyType: "application/json",
+            body: { text: '{\n  "foo":"bar"\n}' },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports multiple headers", () => {
+    expect(
+      convertCurl("curl -H Foo:bar --header Name -H AAA:bbb -H :ccc https://yaak.app"),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            headers: [
+              { name: "Name", value: "", enabled: true },
+              { name: "Foo", value: "bar", enabled: true },
+              { name: "AAA", value: "bbb", enabled: true },
+              { name: "", value: "ccc", enabled: true },
+            ],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports basic auth", () => {
+    expect(convertCurl("curl --user user:pass https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            authenticationType: "basic",
+            authentication: {
+              username: "user",
+              password: "pass",
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports digest auth", () => {
+    expect(convertCurl("curl --digest --user user:pass https://yaak.app")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            authenticationType: "digest",
+            authentication: {
+              username: "user",
+              password: "pass",
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports Bearer token from Authorization header", () => {
+    expect(convertCurl('curl -H "Authorization: Bearer token123" https://yaak.app')).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            authenticationType: "bearer",
+            authentication: {
+              token: "token123",
+              prefix: "Bearer",
+            },
+            headers: [],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Trims whitespace before Bearer token from Authorization header", () => {
+    expect(convertCurl('curl -H "Authorization: Bearer    token123" https://yaak.app')).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            authenticationType: "bearer",
+            authentication: {
+              token: "token123",
+              prefix: "Bearer",
+            },
+            headers: [],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports Basic auth from Authorization header (base64 decoded)", () => {
+    expect(
+      convertCurl('curl -H "Authorization: Basic dXNlcjpwYXNzd29yZA==" https://yaak.app'),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            authenticationType: "basic",
+            authentication: {
+              username: "user",
+              password: "password",
+            },
+            headers: [],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Authorization header takes precedence over -u flag", () => {
+    expect(
+      convertCurl('curl -u admin:secret -H "Authorization: Bearer token123" https://yaak.app'),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            authenticationType: "bearer",
+            authentication: {
+              token: "token123",
+              prefix: "Bearer",
+            },
+            headers: [],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Authorization header extraction is case-insensitive", () => {
+    expect(convertCurl('curl -H "authorization: bearer lowercaseToken" https://yaak.app')).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            authenticationType: "bearer",
+            authentication: {
+              token: "lowercaseToken",
+              prefix: "Bearer",
+            },
+            headers: [],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Preserves other headers when extracting Authorization", () => {
+    expect(
+      convertCurl('curl -H "Authorization: Bearer token123" -H "X-Custom: value" https://yaak.app'),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            authenticationType: "bearer",
+            authentication: {
+              token: "token123",
+              prefix: "Bearer",
+            },
+            headers: [{ name: "X-Custom", value: "value", enabled: true }],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Invalid base64 in Basic auth keeps header in headers", () => {
+    expect(
+      convertCurl('curl -H "Authorization: Basic not-valid-base64!!!" https://yaak.app'),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            headers: [{ name: "Authorization", value: "Basic not-valid-base64!!!", enabled: true }],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports cookie as header", () => {
+    expect(convertCurl('curl --cookie "foo=bar" https://yaak.app')).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            headers: [{ name: "Cookie", value: "foo=bar", enabled: true }],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports query params", () => {
+    expect(convertCurl('curl "https://yaak.app" --url-query foo=bar --url-query baz=qux')).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            urlParameters: [
+              { name: "foo", value: "bar", enabled: true },
+              { name: "baz", value: "qux", enabled: true },
+            ],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports query params from the URL", () => {
+    expect(convertCurl('curl "https://yaak.app?foo=bar&baz=a%20a"')).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            urlParameters: [
+              { name: "foo", value: "bar", enabled: true },
+              { name: "baz", value: "a a", enabled: true },
+            ],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports weird body", () => {
+    expect(convertCurl(`curl 'https://yaak.app' -X POST --data-raw 'foo=bar=baz'`)).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+            bodyType: "application/x-www-form-urlencoded",
+            body: {
+              form: [{ name: "foo", value: "bar=baz", enabled: true }],
+            },
+            headers: [
+              {
+                enabled: true,
+                name: "Content-Type",
+                value: "application/x-www-form-urlencoded",
+              },
+            ],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports data with Unicode escape sequences", () => {
+    expect(
+      convertCurl(
+        `curl 'https://yaak.app' -H 'Content-Type: application/json' --data-raw $'{"query":"SearchQueryInput\\u0021"}' -X POST`,
+      ),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+            headers: [{ name: "Content-Type", value: "application/json", enabled: true }],
+            bodyType: "application/json",
+            body: { text: '{"query":"SearchQueryInput!"}' },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports GraphQL JSON data as a GraphQL request", () => {
+    expect(
+      convertCurl(
+        `curl 'https://yaak.app/graphql' -H 'Content-Type: application/json' --data-raw $'{"query":"query Search($id: ID\\u0021) { node(id: $id) { id } }","variables":{"id":"123"}}'`,
+      ),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app/graphql",
+            method: "POST",
+            headers: [{ name: "Content-Type", value: "application/json", enabled: true }],
+            bodyType: "graphql",
+            body: {
+              query: "query Search($id: ID!) { node(id: $id) { id } }",
+              variables: '{\n  "id": "123"\n}',
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports GraphQL JSON with extensions as JSON", () => {
+    expect(
+      convertCurl(
+        `curl 'https://yaak.app/graphql' -H 'Content-Type: application/json' --data-raw $'{"query":"query Search($id: ID\\u0021) { node(id: $id) { id } }","extensions":{"persistedQuery":{"version":1,"sha256Hash":"abc123"}}}'`,
+      ),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app/graphql",
+            method: "POST",
+            headers: [{ name: "Content-Type", value: "application/json", enabled: true }],
+            bodyType: "application/json",
+            body: {
+              text: '{"query":"query Search($id: ID!) { node(id: $id) { id } }","extensions":{"persistedQuery":{"version":1,"sha256Hash":"abc123"}}}',
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports data with multiple escape sequences", () => {
+    expect(
+      convertCurl(
+        `curl 'https://yaak.app' --data-raw $'Line1\\nLine2\\tTab\\u0021Exclamation' -X POST`,
+      ),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+            bodyType: "application/x-www-form-urlencoded",
+            body: {
+              form: [{ name: "Line1\nLine2\tTab!Exclamation", value: "", enabled: true }],
+            },
+            headers: [
+              {
+                enabled: true,
+                name: "Content-Type",
+                value: "application/x-www-form-urlencoded",
+              },
+            ],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports multipart form data from --data-raw (Chrome DevTools format)", () => {
+    // This is the format Chrome DevTools uses when copying a multipart form submission as cURL
+    const curlCommand = `curl 'http://localhost:8080/system' \
+  -H 'Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryHwsXKi4rKA6P5VBd' \
+  --data-raw $'------WebKitFormBoundaryHwsXKi4rKA6P5VBd\r\nContent-Disposition: form-data; name="username"\r\n\r\njsgj\r\n------WebKitFormBoundaryHwsXKi4rKA6P5VBd\r\nContent-Disposition: form-data; name="password"\r\n\r\n654321\r\n------WebKitFormBoundaryHwsXKi4rKA6P5VBd\r\nContent-Disposition: form-data; name="captcha"; filename="test.xlsx"\r\nContent-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\r\n\r\n\r\n------WebKitFormBoundaryHwsXKi4rKA6P5VBd--\r\n'`;
+
+    expect(convertCurl(curlCommand)).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "http://localhost:8080/system",
+            method: "POST",
+            headers: [
+              {
+                name: "Content-Type",
+                value: "multipart/form-data; boundary=----WebKitFormBoundaryHwsXKi4rKA6P5VBd",
+                enabled: true,
+              },
+            ],
+            bodyType: "multipart/form-data",
+            body: {
+              form: [
+                { name: "username", value: "jsgj", enabled: true },
+                { name: "password", value: "654321", enabled: true },
+                { name: "captcha", file: "test.xlsx", enabled: true },
+              ],
+            },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports JSON body with newlines in $quotes", () => {
+    expect(
+      convertCurl(
+        `curl 'https://yaak.app' -H 'Content-Type: application/json' --data-raw $'{\\n  "foo": "bar",\\n  "baz": "qux"\\n}' -X POST`,
+      ),
+    ).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+            headers: [{ name: "Content-Type", value: "application/json", enabled: true }],
+            bodyType: "application/json",
+            body: { text: '{\n  "foo": "bar",\n  "baz": "qux"\n}' },
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Handles double-quoted string ending with even backslashes before semicolon", () => {
+    // "C:\\" has two backslashes which escape each other, so the closing " is real.
+    // The ; after should split into a second command.
+    expect(convertCurl('curl -d "C:\\\\" https://yaak.app;curl https://example.com')).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+            bodyType: "application/x-www-form-urlencoded",
+            body: {
+              form: [{ name: "C:\\", value: "", enabled: true }],
+            },
+            headers: [
+              {
+                name: "Content-Type",
+                value: "application/x-www-form-urlencoded",
+                enabled: true,
+              },
+            ],
+          }),
+          baseRequest({ url: "https://example.com" }),
+        ],
+      },
+    });
+  });
+
+  test("Handles $quoted string ending with a literal backslash before semicolon", () => {
+    // $'C:\\\\' has two backslashes which become one literal backslash.
+    // The closing ' must not be misinterpreted as escaped.
+    // The ; after should split into a second command.
+    expect(convertCurl("curl -d $'C:\\\\' https://yaak.app;curl https://example.com")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            method: "POST",
+            bodyType: "application/x-www-form-urlencoded",
+            body: {
+              form: [{ name: "C:\\", value: "", enabled: true }],
+            },
+            headers: [
+              {
+                name: "Content-Type",
+                value: "application/x-www-form-urlencoded",
+                enabled: true,
+              },
+            ],
+          }),
+          baseRequest({ url: "https://example.com" }),
+        ],
+      },
+    });
+  });
+
+  test("Imports $quoted header with escaped single quotes", () => {
+    expect(convertCurl(`curl https://yaak.app -H $'X-Custom: it\\'s a test'`)).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            headers: [{ name: "X-Custom", value: "it's a test", enabled: true }],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Does not split on escaped semicolon outside quotes", () => {
+    // In shell, \; is a literal semicolon and should not split commands.
+    // This should be treated as a single curl command with the URL "https://yaak.app?a=1;b=2"
+    expect(convertCurl("curl https://yaak.app?a=1\\;b=2")).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "https://yaak.app",
+            urlParameters: [{ name: "a", value: "1;b=2", enabled: true }],
+          }),
+        ],
+      },
+    });
+  });
+
+  test("Imports multipart form data with text-only fields from --data-raw", () => {
+    const curlCommand = `curl 'http://example.com/api' \
+  -H 'Content-Type: multipart/form-data; boundary=----FormBoundary123' \
+  --data-raw $'------FormBoundary123\r\nContent-Disposition: form-data; name="field1"\r\n\r\nvalue1\r\n------FormBoundary123\r\nContent-Disposition: form-data; name="field2"\r\n\r\nvalue2\r\n------FormBoundary123--\r\n'`;
+
+    expect(convertCurl(curlCommand)).toEqual({
+      resources: {
+        workspaces: [baseWorkspace()],
+        httpRequests: [
+          baseRequest({
+            url: "http://example.com/api",
+            method: "POST",
+            headers: [
+              {
+                name: "Content-Type",
+                value: "multipart/form-data; boundary=----FormBoundary123",
+                enabled: true,
+              },
+            ],
+            bodyType: "multipart/form-data",
+            body: {
+              form: [
+                { name: "field1", value: "value1", enabled: true },
+                { name: "field2", value: "value2", enabled: true },
+              ],
+            },
+          }),
+        ],
+      },
+    });
+  });
+  test("Keeps an = inside a --url-query value", () => {
+    const imported = convertCurl(
+      'curl --url-query "filter=type=book" --url-query "t=eyJhIjoxfQ==" https://yaak.app',
+    );
+    expect(imported.resources.httpRequests?.[0]?.urlParameters).toEqual([
+      { enabled: true, name: "filter", value: "type=book" },
+      { enabled: true, name: "t", value: "eyJhIjoxfQ==" },
+    ]);
+  });
+
+  test("Keeps an = inside a form value", () => {
+    const imported = convertCurl('curl -F "t=eyJhIjoxfQ==" -F "q=a=b" https://yaak.app');
+    expect(imported.resources.httpRequests?.[0]?.body?.form).toEqual([
+      { enabled: true, name: "t", value: "eyJhIjoxfQ==" },
+      { enabled: true, name: "q", value: "a=b" },
+    ]);
+  });
+
+  test("Emits no source keys", () => {
+    expect(convertCurl("curl https://yaak.app")).not.toHaveProperty("sourceKeys");
+  });
+});
+
+const idCount: Partial<Record<string, number>> = {};
+
+function baseRequest(mergeWith: Partial<HttpRequest>) {
+  idCount.http_request = (idCount.http_request ?? -1) + 1;
+  return {
+    id: `GENERATE_ID::HTTP_REQUEST_${idCount.http_request}`,
+    model: "http_request",
+    authentication: {},
+    authenticationType: null,
+    body: {},
+    bodyType: null,
+    folderId: null,
+    headers: [],
+    method: "GET",
+    name: "",
+    sortPriority: 0,
+    url: "",
+    urlParameters: [],
+    workspaceId: `GENERATE_ID::WORKSPACE_${idCount.workspace}`,
+    ...mergeWith,
+  };
+}
+
+function baseWorkspace(mergeWith: Partial<Workspace> = {}) {
+  idCount.workspace = (idCount.workspace ?? -1) + 1;
+  return {
+    id: `GENERATE_ID::WORKSPACE_${idCount.workspace}`,
+    model: "workspace",
+    name: "Curl Import",
+    ...mergeWith,
+  };
+}
diff --git a/plugins/importer-curl/tsconfig.json b/plugins/importer-curl/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/importer-curl/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/importer-insomnia/package.json b/plugins/importer-insomnia/package.json
new file mode 100644
index 0000000..3266a05
--- /dev/null
+++ b/plugins/importer-insomnia/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@yaak/importer-insomnia",
+  "displayName": "Insomnia Importer",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Import data from Insomnia",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  },
+  "dependencies": {
+    "yaml": "^2.8.3"
+  }
+}
diff --git a/plugins/importer-insomnia/src/common.ts b/plugins/importer-insomnia/src/common.ts
new file mode 100644
index 0000000..4d2d270
--- /dev/null
+++ b/plugins/importer-insomnia/src/common.ts
@@ -0,0 +1,147 @@
+/* oxlint-disable no-explicit-any */
+
+export function isJSObject(obj: unknown) {
+  return Object.prototype.toString.call(obj) === "[object Object]";
+}
+
+export function isJSString(obj: unknown) {
+  return Object.prototype.toString.call(obj) === "[object String]";
+}
+
+export function convertId(id: string): string {
+  if (id.startsWith("GENERATE_ID::")) {
+    return id;
+  }
+  return `GENERATE_ID::${id}`;
+}
+
+export function createSourceKeys() {
+  const keys: Record<string, string> = {};
+  return {
+    /** Convert a resource's own document ID, keeping it as that resource's source key. */
+    own(id: string): string {
+      const converted = convertId(id);
+      keys[converted] = id;
+      return converted;
+    },
+    all: (): Record<string, string> => keys,
+  };
+}
+
+export type SourceKeys = ReturnType<typeof createSourceKeys>;
+
+export function importHttpBodyAndHeaders(obj: any) {
+  const { headers } = importHeaders(obj);
+  const { body, bodyType } = importHttpBody(obj.body);
+  const mimeType = typeof obj.body?.mimeType === "string" ? obj.body.mimeType.trim() : "";
+
+  if (
+    bodyType != null &&
+    mimeType !== "" &&
+    !headers.some((header: { name: string }) => header.name.toLowerCase() === "content-type")
+  ) {
+    headers.push({ enabled: true, name: "Content-Type", value: mimeType });
+  }
+
+  return { body, bodyType, headers };
+}
+
+export function importHeaders(obj: any) {
+  const headers = (obj.headers ?? [])
+    .map((header: any) => ({
+      enabled: !header.disabled,
+      name: header.name ?? "",
+      value: header.value ?? "",
+    }))
+    .filter(({ name, value }: any) => name !== "" || value !== "");
+  return { headers } as const;
+}
+
+function importHttpBody(rawBody: any) {
+  const mimeType = typeof rawBody?.mimeType === "string" ? rawBody.mimeType.trim() : "";
+  const normalizedMimeType = mimeType.split(";", 1)[0]?.toLowerCase() ?? "";
+
+  if (normalizedMimeType === "application/octet-stream") {
+    return { bodyType: "binary", body: { filePath: rawBody.fileName ?? "" } };
+  }
+
+  if (normalizedMimeType === "application/x-www-form-urlencoded") {
+    return {
+      bodyType: "application/x-www-form-urlencoded",
+      body: {
+        form: (rawBody.params ?? []).map((parameter: any) => ({
+          enabled: !parameter.disabled,
+          name: parameter.name ?? "",
+          value: parameter.value ?? "",
+        })),
+      },
+    };
+  }
+
+  if (normalizedMimeType === "multipart/form-data") {
+    return {
+      bodyType: "multipart/form-data",
+      body: {
+        form: (rawBody.params ?? []).map((parameter: any) => ({
+          enabled: !parameter.disabled,
+          name: parameter.name ?? "",
+          value: parameter.value ?? "",
+          file: parameter.fileName ?? null,
+        })),
+      },
+    };
+  }
+
+  if (normalizedMimeType === "application/graphql") {
+    return { bodyType: "graphql", body: { text: rawBody.text ?? "" } };
+  }
+
+  if (normalizedMimeType === "application/json" || normalizedMimeType.endsWith("+json")) {
+    return { bodyType: "application/json", body: { text: rawBody.text ?? "" } };
+  }
+
+  if (
+    normalizedMimeType === "text/xml" ||
+    normalizedMimeType === "application/xml" ||
+    normalizedMimeType.endsWith("+xml")
+  ) {
+    return { bodyType: "text/xml", body: { text: rawBody.text ?? "" } };
+  }
+
+  if (typeof rawBody?.text === "string") {
+    return { bodyType: "other", body: { text: rawBody.text } };
+  }
+
+  return { bodyType: null, body: {} };
+}
+
+export function deleteUndefinedAttrs<T>(obj: T): T {
+  if (Array.isArray(obj) && obj != null) {
+    return obj.map(deleteUndefinedAttrs) as T;
+  }
+  if (typeof obj === "object" && obj != null) {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .filter(([, v]) => v !== undefined)
+        .map(([k, v]) => [k, deleteUndefinedAttrs(v)]),
+    ) as T;
+  }
+  return obj;
+}
+
+/** Recursively render all nested object properties */
+export function convertTemplateSyntax<T>(obj: T): T {
+  if (typeof obj === "string") {
+    // oxlint-disable-next-line no-template-curly-in-string -- Yaak template syntax
+    return obj.replaceAll(/{{\s*(_\.)?([^}]+)\s*}}/g, "${[$2]}") as T;
+  }
+  if (Array.isArray(obj) && obj != null) {
+    return obj.map(convertTemplateSyntax) as T;
+  }
+  if (typeof obj === "object" && obj != null) {
+    return Object.fromEntries(
+      Object.entries(obj).map(([k, v]) => [k, convertTemplateSyntax(v)]),
+    ) as T;
+  }
+  return obj;
+}
diff --git a/plugins/importer-insomnia/src/index.ts b/plugins/importer-insomnia/src/index.ts
new file mode 100644
index 0000000..cd54fc7
--- /dev/null
+++ b/plugins/importer-insomnia/src/index.ts
@@ -0,0 +1,37 @@
+import type { Context, PluginDefinition } from "@yaakapp/api";
+import YAML from "yaml";
+import { deleteUndefinedAttrs, isJSObject } from "./common";
+import { convertInsomniaV4 } from "./v4";
+import { convertInsomniaV5 } from "./v5";
+
+export const plugin: PluginDefinition = {
+  importer: {
+    name: "Insomnia",
+    description: "Import Insomnia workspaces",
+    async onImport(_ctx: Context, args: { text: string }) {
+      return convertInsomnia(args.text);
+    },
+  },
+};
+
+export function convertInsomnia(contents: string) {
+  let parsed: unknown;
+
+  try {
+    parsed = JSON.parse(contents);
+  } catch {
+    // Fall through
+  }
+
+  try {
+    parsed = parsed ?? YAML.parse(contents);
+  } catch {
+    // Fall through
+  }
+
+  if (!isJSObject(parsed)) return null;
+
+  const result = convertInsomniaV5(parsed) ?? convertInsomniaV4(parsed);
+
+  return deleteUndefinedAttrs(result);
+}
diff --git a/plugins/importer-insomnia/src/v4.ts b/plugins/importer-insomnia/src/v4.ts
new file mode 100644
index 0000000..2f698fd
--- /dev/null
+++ b/plugins/importer-insomnia/src/v4.ts
@@ -0,0 +1,190 @@
+/* oxlint-disable no-explicit-any */
+import type { PartialImportResources } from "@yaakapp/api";
+import {
+  convertId,
+  convertTemplateSyntax,
+  createSourceKeys,
+  importHttpBodyAndHeaders,
+  isJSObject,
+  type SourceKeys,
+} from "./common";
+
+export function convertInsomniaV4(parsed: any) {
+  if (!Array.isArray(parsed.resources)) return null;
+
+  const keys = createSourceKeys();
+  const resources: PartialImportResources = {
+    environments: [],
+    folders: [],
+    grpcRequests: [],
+    httpRequests: [],
+    websocketRequests: [],
+    workspaces: [],
+  };
+
+  // Import workspaces
+  const workspacesToImport = parsed.resources.filter(
+    (r: any) => isJSObject(r) && r._type === "workspace",
+  );
+  for (const w of workspacesToImport) {
+    resources.workspaces.push({
+      id: keys.own(w._id),
+      createdAt: w.created ? new Date(w.created).toISOString().replace("Z", "") : undefined,
+      updatedAt: w.updated ? new Date(w.updated).toISOString().replace("Z", "") : undefined,
+      model: "workspace",
+      name: w.name,
+      description: w.description || undefined,
+    });
+    const environmentsToImport = parsed.resources.filter(
+      (r: any) => isJSObject(r) && r._type === "environment",
+    );
+    resources.environments.push(
+      ...environmentsToImport.map((r: any) => importEnvironment(r, w._id, keys)),
+    );
+
+    const nextFolder = (parentId: string) => {
+      const children = parsed.resources.filter((r: any) => r.parentId === parentId);
+      for (const child of children) {
+        if (!isJSObject(child)) continue;
+
+        if (child._type === "request_group") {
+          resources.folders.push(importFolder(child, w._id, keys));
+          nextFolder(child._id);
+        } else if (child._type === "request") {
+          resources.httpRequests.push(importHttpRequest(child, w._id, keys));
+        } else if (child._type === "grpc_request") {
+          resources.grpcRequests.push(importGrpcRequest(child, w._id, keys));
+        }
+      }
+    };
+
+    // Import folders
+    nextFolder(w._id);
+  }
+
+  // Filter out any `null` values
+  resources.httpRequests = resources.httpRequests.filter(Boolean);
+  resources.grpcRequests = resources.grpcRequests.filter(Boolean);
+  resources.environments = resources.environments.filter(Boolean);
+  resources.workspaces = resources.workspaces.filter(Boolean);
+
+  return { resources: convertTemplateSyntax(resources), sourceKeys: keys.all() };
+}
+
+function importHttpRequest(
+  r: any,
+  workspaceId: string,
+  keys: SourceKeys,
+): PartialImportResources["httpRequests"][0] {
+  let authenticationType: string | null = null;
+  let authentication = {};
+  if (r.authentication.type === "bearer") {
+    authenticationType = "bearer";
+    authentication = {
+      token: r.authentication.token,
+    };
+  } else if (r.authentication.type === "basic") {
+    authenticationType = "basic";
+    authentication = {
+      username: r.authentication.username,
+      password: r.authentication.password,
+    };
+  }
+
+  return {
+    id: keys.own(r.meta?.id ?? r._id),
+    createdAt: r.created ? new Date(r.created).toISOString().replace("Z", "") : undefined,
+    updatedAt: r.modified ? new Date(r.modified).toISOString().replace("Z", "") : undefined,
+    workspaceId: convertId(workspaceId),
+    folderId: r.parentId === workspaceId ? null : convertId(r.parentId),
+    model: "http_request",
+    sortPriority: r.metaSortKey,
+    name: r.name,
+    description: r.description || undefined,
+    url: r.url,
+    urlParameters: (r.parameters ?? []).map((p: any) => ({
+      enabled: !p.disabled,
+      name: p.name ?? "",
+      value: p.value ?? "",
+    })),
+    ...importHttpBodyAndHeaders(r),
+    authentication,
+    authenticationType,
+    method: r.method,
+  };
+}
+
+function importGrpcRequest(
+  r: any,
+  workspaceId: string,
+  keys: SourceKeys,
+): PartialImportResources["grpcRequests"][0] {
+  const parts = r.protoMethodName.split("/").filter((p: any) => p !== "");
+  const service = parts[0] ?? null;
+  const method = parts[1] ?? null;
+
+  return {
+    id: keys.own(r.meta?.id ?? r._id),
+    createdAt: r.created ? new Date(r.created).toISOString().replace("Z", "") : undefined,
+    updatedAt: r.modified ? new Date(r.modified).toISOString().replace("Z", "") : undefined,
+    workspaceId: convertId(workspaceId),
+    folderId: r.parentId === workspaceId ? null : convertId(r.parentId),
+    model: "grpc_request",
+    sortPriority: r.metaSortKey,
+    name: r.name,
+    description: r.description || undefined,
+    url: r.url,
+    service,
+    method,
+    message: r.body?.text ?? "",
+    metadata: (r.metadata ?? [])
+      .map((h: any) => ({
+        enabled: !h.disabled,
+        name: h.name ?? "",
+        value: h.value ?? "",
+      }))
+      .filter(({ name, value }: any) => name !== "" || value !== ""),
+  };
+}
+
+function importFolder(
+  f: any,
+  workspaceId: string,
+  keys: SourceKeys,
+): PartialImportResources["folders"][0] {
+  return {
+    id: keys.own(f._id),
+    createdAt: f.created ? new Date(f.created).toISOString().replace("Z", "") : undefined,
+    updatedAt: f.modified ? new Date(f.modified).toISOString().replace("Z", "") : undefined,
+    folderId: f.parentId === workspaceId ? null : convertId(f.parentId),
+    workspaceId: convertId(workspaceId),
+    description: f.description || undefined,
+    model: "folder",
+    name: f.name,
+  };
+}
+
+function importEnvironment(
+  e: any,
+  workspaceId: string,
+  keys: SourceKeys,
+  isParentOg?: boolean,
+): PartialImportResources["environments"][0] {
+  const isParent = isParentOg ?? e.parentId === workspaceId;
+  return {
+    id: keys.own(e._id),
+    createdAt: e.created ? new Date(e.created).toISOString().replace("Z", "") : undefined,
+    updatedAt: e.modified ? new Date(e.modified).toISOString().replace("Z", "") : undefined,
+    workspaceId: convertId(workspaceId),
+    sortPriority: e.metaSortKey,
+    parentModel: isParent ? "workspace" : "environment",
+    parentId: null,
+    model: "environment",
+    name: e.name,
+    variables: Object.entries(e.data).map(([name, value]) => ({
+      enabled: true,
+      name,
+      value: String(value),
+    })),
+  };
+}
diff --git a/plugins/importer-insomnia/src/v5.ts b/plugins/importer-insomnia/src/v5.ts
new file mode 100644
index 0000000..e47ca8e
--- /dev/null
+++ b/plugins/importer-insomnia/src/v5.ts
@@ -0,0 +1,285 @@
+/* oxlint-disable no-explicit-any */
+import type { PartialImportResources } from "@yaakapp/api";
+import {
+  convertId,
+  convertTemplateSyntax,
+  createSourceKeys,
+  importHeaders,
+  importHttpBodyAndHeaders,
+  isJSObject,
+  type SourceKeys,
+} from "./common";
+
+export function convertInsomniaV5(parsed: any) {
+  // Assert parsed is object
+  if (parsed == null || typeof parsed !== "object") {
+    return null;
+  }
+
+  if (!("collection" in parsed) || !Array.isArray(parsed.collection)) {
+    return null;
+  }
+
+  const keys = createSourceKeys();
+  const resources: PartialImportResources = {
+    environments: [],
+    folders: [],
+    grpcRequests: [],
+    httpRequests: [],
+    websocketRequests: [],
+    workspaces: [],
+  };
+
+  // Import workspaces
+  const meta = ("meta" in parsed ? parsed.meta : {}) as Record<string, any>;
+  resources.workspaces.push({
+    id: keys.own(meta.id ?? "collection"),
+    createdAt: meta.created ? new Date(meta.created).toISOString().replace("Z", "") : undefined,
+    updatedAt: meta.modified ? new Date(meta.modified).toISOString().replace("Z", "") : undefined,
+    model: "workspace",
+    name: parsed.name,
+    description: meta.description || undefined,
+    ...importHeaders(parsed),
+    ...importAuthentication(parsed),
+  });
+
+  // Import environments
+  resources.environments.push(
+    importEnvironment(parsed.environments, meta.id, keys, true),
+    ...(parsed.environments.subEnvironments ?? []).map((r: any) =>
+      importEnvironment(r, meta.id, keys),
+    ),
+  );
+
+  // Import folders
+  const nextFolder = (children: any[], parentId: string) => {
+    for (const child of children ?? []) {
+      if (!isJSObject(child)) continue;
+
+      if (Array.isArray(child.children)) {
+        const { folder, environment } = importFolder(child, meta.id, parentId, keys);
+        resources.folders.push(folder);
+        if (environment) resources.environments.push(environment);
+        nextFolder(child.children, child.meta.id);
+      } else if (child.method) {
+        resources.httpRequests.push(importHttpRequest(child, meta.id, parentId, keys));
+      } else if (child.protoFileId) {
+        resources.grpcRequests.push(importGrpcRequest(child, meta.id, parentId, keys));
+      } else if (child.url) {
+        resources.websocketRequests.push(importWebsocketRequest(child, meta.id, parentId, keys));
+      }
+    }
+  };
+
+  // Import folders
+  nextFolder(parsed.collection ?? [], meta.id);
+
+  // Filter out any `null` values
+  resources.httpRequests = resources.httpRequests.filter(Boolean);
+  resources.grpcRequests = resources.grpcRequests.filter(Boolean);
+  resources.environments = resources.environments.filter(Boolean);
+  resources.workspaces = resources.workspaces.filter(Boolean);
+
+  return { resources: convertTemplateSyntax(resources), sourceKeys: keys.all() };
+}
+
+function importHttpRequest(
+  r: any,
+  workspaceId: string,
+  parentId: string,
+  keys: SourceKeys,
+): PartialImportResources["httpRequests"][0] {
+  const id = r.meta?.id ?? r._id;
+  const created = r.meta?.created ?? r.created;
+  const updated = r.meta?.modified ?? r.updated;
+  const sortKey = r.meta?.sortKey ?? r.sortKey;
+
+  return {
+    id: keys.own(id),
+    workspaceId: convertId(workspaceId),
+    createdAt: created ? new Date(created).toISOString().replace("Z", "") : undefined,
+    updatedAt: updated ? new Date(updated).toISOString().replace("Z", "") : undefined,
+    folderId: parentId === workspaceId ? null : convertId(parentId),
+    sortPriority: sortKey,
+    model: "http_request",
+    name: r.name,
+    description: r.meta?.description || undefined,
+    url: r.url,
+    urlParameters: (r.parameters ?? []).map((p: any) => ({
+      enabled: !p.disabled,
+      name: p.name ?? "",
+      value: p.value ?? "",
+    })),
+    ...importHttpBodyAndHeaders(r),
+    method: r.method,
+    ...importAuthentication(r),
+  };
+}
+
+function importGrpcRequest(
+  r: any,
+  workspaceId: string,
+  parentId: string,
+  keys: SourceKeys,
+): PartialImportResources["grpcRequests"][0] {
+  const id = r.meta?.id ?? r._id;
+  const created = r.meta?.created ?? r.created;
+  const updated = r.meta?.modified ?? r.updated;
+  const sortKey = r.meta?.sortKey ?? r.sortKey;
+
+  const parts = r.protoMethodName.split("/").filter((p: any) => p !== "");
+  const service = parts[0] ?? null;
+  const method = parts[1] ?? null;
+
+  return {
+    model: "grpc_request",
+    id: keys.own(id),
+    workspaceId: convertId(workspaceId),
+    createdAt: created ? new Date(created).toISOString().replace("Z", "") : undefined,
+    updatedAt: updated ? new Date(updated).toISOString().replace("Z", "") : undefined,
+    folderId: parentId === workspaceId ? null : convertId(parentId),
+    sortPriority: sortKey,
+    name: r.name,
+    description: r.description || undefined,
+    url: r.url,
+    service,
+    method,
+    message: r.body?.text ?? "",
+    metadata: (r.metadata ?? [])
+      .map((h: any) => ({
+        enabled: !h.disabled,
+        name: h.name ?? "",
+        value: h.value ?? "",
+      }))
+      .filter(({ name, value }: any) => name !== "" || value !== ""),
+  };
+}
+
+function importWebsocketRequest(
+  r: any,
+  workspaceId: string,
+  parentId: string,
+  keys: SourceKeys,
+): PartialImportResources["websocketRequests"][0] {
+  const id = r.meta?.id ?? r._id;
+  const created = r.meta?.created ?? r.created;
+  const updated = r.meta?.modified ?? r.updated;
+  const sortKey = r.meta?.sortKey ?? r.sortKey;
+
+  return {
+    model: "websocket_request",
+    id: keys.own(id),
+    workspaceId: convertId(workspaceId),
+    createdAt: created ? new Date(created).toISOString().replace("Z", "") : undefined,
+    updatedAt: updated ? new Date(updated).toISOString().replace("Z", "") : undefined,
+    folderId: parentId === workspaceId ? null : convertId(parentId),
+    sortPriority: sortKey,
+    name: r.name,
+    description: r.description || undefined,
+    url: r.url,
+    message: r.body?.text ?? "",
+    ...importHeaders(r),
+    ...importAuthentication(r),
+  };
+}
+
+function importAuthentication(obj: any) {
+  let authenticationType: string | null = null;
+  let authentication = {};
+  if (obj.authentication?.type === "bearer") {
+    authenticationType = "bearer";
+    authentication = {
+      token: obj.authentication.token,
+    };
+  } else if (obj.authentication?.type === "basic") {
+    authenticationType = "basic";
+    authentication = {
+      username: obj.authentication.username,
+      password: obj.authentication.password,
+    };
+  }
+
+  return { authenticationType, authentication } as const;
+}
+
+function importFolder(
+  f: any,
+  workspaceId: string,
+  parentId: string,
+  keys: SourceKeys,
+): {
+  folder: PartialImportResources["folders"][0];
+  environment: PartialImportResources["environments"][0] | null;
+} {
+  const id = f.meta?.id ?? f._id;
+  const created = f.meta?.created ?? f.created;
+  const updated = f.meta?.modified ?? f.updated;
+  const sortKey = f.meta?.sortKey ?? f.sortKey;
+
+  let environment: PartialImportResources["environments"][0] | null = null;
+  if (Object.keys(f.environment ?? {}).length > 0) {
+    environment = {
+      id: keys.own(`${id}folder`),
+      createdAt: created ? new Date(created).toISOString().replace("Z", "") : undefined,
+      updatedAt: updated ? new Date(updated).toISOString().replace("Z", "") : undefined,
+      workspaceId: convertId(workspaceId),
+      public: true,
+      parentModel: "folder",
+      parentId: convertId(id),
+      model: "environment",
+      name: "Folder Environment",
+      variables: Object.entries(f.environment ?? {}).map(([name, value]) => ({
+        enabled: true,
+        name,
+        value: String(value),
+      })),
+    };
+  }
+
+  return {
+    folder: {
+      model: "folder",
+      id: keys.own(id),
+      createdAt: created ? new Date(created).toISOString().replace("Z", "") : undefined,
+      updatedAt: updated ? new Date(updated).toISOString().replace("Z", "") : undefined,
+      folderId: parentId === workspaceId ? null : convertId(parentId),
+      sortPriority: sortKey,
+      workspaceId: convertId(workspaceId),
+      description: f.description || undefined,
+      name: f.name,
+      ...importAuthentication(f),
+      ...importHeaders(f),
+    },
+    environment,
+  };
+}
+
+function importEnvironment(
+  e: any,
+  workspaceId: string,
+  keys: SourceKeys,
+  isParent?: boolean,
+): PartialImportResources["environments"][0] {
+  const id = e.meta?.id ?? e._id;
+  const created = e.meta?.created ?? e.created;
+  const updated = e.meta?.modified ?? e.updated;
+  const sortKey = e.meta?.sortKey ?? e.sortKey;
+
+  return {
+    id: keys.own(id),
+    createdAt: created ? new Date(created).toISOString().replace("Z", "") : undefined,
+    updatedAt: updated ? new Date(updated).toISOString().replace("Z", "") : undefined,
+    workspaceId: convertId(workspaceId),
+    public: !e.isPrivate,
+    sortPriority: sortKey,
+    parentModel: isParent ? "workspace" : "environment",
+    parentId: null,
+    model: "environment",
+    name: e.name,
+    variables: Object.entries(e.data ?? {}).map(([name, value]) => ({
+      enabled: true,
+      name,
+      value: String(value),
+    })),
+  };
+}
diff --git a/plugins/importer-insomnia/tests/body.test.ts b/plugins/importer-insomnia/tests/body.test.ts
new file mode 100644
index 0000000..4b51c9f
--- /dev/null
+++ b/plugins/importer-insomnia/tests/body.test.ts
@@ -0,0 +1,91 @@
+import { describe, expect, test } from "vite-plus/test";
+import { importHttpBodyAndHeaders } from "../src/common";
+
+describe("importHttpBodyAndHeaders", () => {
+  test("imports XML text using the native XML body type", () => {
+    const result = importHttpBodyAndHeaders({
+      body: {
+        mimeType: "application/soap+xml; charset=utf-8",
+        text: "<soap:Envelope />",
+      },
+    });
+
+    expect(result).toEqual({
+      bodyType: "text/xml",
+      body: { text: "<soap:Envelope />" },
+      headers: [
+        {
+          enabled: true,
+          name: "Content-Type",
+          value: "application/soap+xml; charset=utf-8",
+        },
+      ],
+    });
+  });
+
+  test("imports vendor JSON using the native JSON body type", () => {
+    const result = importHttpBodyAndHeaders({
+      body: {
+        mimeType: "application/problem+json",
+        text: '{"message":"Nope"}',
+      },
+    });
+
+    expect(result.bodyType).toBe("application/json");
+    expect(result.body).toEqual({ text: '{"message":"Nope"}' });
+  });
+
+  test("imports unknown text using the other body type", () => {
+    const result = importHttpBodyAndHeaders({
+      body: {
+        mimeType: "application/yaml",
+        text: "message: hello",
+      },
+    });
+
+    expect(result).toEqual({
+      bodyType: "other",
+      body: { text: "message: hello" },
+      headers: [
+        {
+          enabled: true,
+          name: "Content-Type",
+          value: "application/yaml",
+        },
+      ],
+    });
+  });
+
+  test("preserves an explicit content type instead of adding a duplicate", () => {
+    const result = importHttpBodyAndHeaders({
+      body: {
+        mimeType: "application/yaml",
+        text: "message: hello",
+      },
+      headers: [
+        {
+          name: "content-type",
+          value: "application/x-yaml",
+        },
+      ],
+    });
+
+    expect(result.headers).toEqual([
+      {
+        enabled: true,
+        name: "content-type",
+        value: "application/x-yaml",
+      },
+    ]);
+  });
+
+  test("imports text without inventing a content type", () => {
+    const result = importHttpBodyAndHeaders({ body: { text: "hello" } });
+
+    expect(result).toEqual({
+      bodyType: "other",
+      body: { text: "hello" },
+      headers: [],
+    });
+  });
+});
diff --git a/plugins/importer-insomnia/tests/fixtures/basic.input.json b/plugins/importer-insomnia/tests/fixtures/basic.input.json
new file mode 100644
index 0000000..cb0568e
--- /dev/null
+++ b/plugins/importer-insomnia/tests/fixtures/basic.input.json
@@ -0,0 +1,187 @@
+{
+  "_type": "export",
+  "__export_format": 4,
+  "__export_date": "2025-01-13T15:19:18.330Z",
+  "__export_source": "insomnia.desktop.app:v10.3.0",
+  "resources": [
+    {
+      "_id": "req_84cd9ae4bd034dd8bb730e856a665cbb",
+      "parentId": "fld_859d1df78261463480b6a3a1419517e3",
+      "modified": 1736781473176,
+      "created": 1736781406672,
+      "url": "{{ _.BASE_URL }}/foo/:id",
+      "name": "New Request",
+      "description": "My description of the request",
+      "method": "GET",
+      "body": {
+        "mimeType": "multipart/form-data",
+        "params": [
+          {
+            "id": "pair_7c86036ae8ef499dbbc0b43d0800c5a3",
+            "name": "form",
+            "value": "data",
+            "description": "",
+            "disabled": false
+          }
+        ]
+      },
+      "parameters": [
+        {
+          "id": "pair_b22f6ff611cd4250a6e405ca7b713d09",
+          "name": "query",
+          "value": "qqq",
+          "description": "",
+          "disabled": false
+        }
+      ],
+      "headers": [
+        {
+          "name": "Content-Type",
+          "value": "multipart/form-data",
+          "id": "pair_4af845963bd14256b98716617971eecd"
+        },
+        {
+          "name": "User-Agent",
+          "value": "insomnia/10.3.0",
+          "id": "pair_535ffd00ce48462cb1b7258832ade65a"
+        },
+        {
+          "id": "pair_ab4b870278e943cba6babf5a73e213e3",
+          "name": "X-Header",
+          "value": "xxxx",
+          "description": "",
+          "disabled": false
+        }
+      ],
+      "authentication": {
+        "type": "basic",
+        "useISO88591": false,
+        "disabled": false,
+        "username": "user",
+        "password": "pass"
+      },
+      "metaSortKey": -1736781406672,
+      "isPrivate": false,
+      "pathParameters": [
+        {
+          "name": "id",
+          "value": "iii"
+        }
+      ],
+      "settingStoreCookies": true,
+      "settingSendCookies": true,
+      "settingDisableRenderRequestBody": false,
+      "settingEncodeUrl": true,
+      "settingRebuildPath": true,
+      "settingFollowRedirects": "global",
+      "_type": "request"
+    },
+    {
+      "_id": "fld_859d1df78261463480b6a3a1419517e3",
+      "parentId": "wrk_d4d92f7c0ee947b89159243506687019",
+      "modified": 1736781404718,
+      "created": 1736781404718,
+      "name": "Top Level",
+      "description": "",
+      "environment": {},
+      "environmentPropertyOrder": null,
+      "metaSortKey": -1736781404718,
+      "environmentType": "kv",
+      "_type": "request_group"
+    },
+    {
+      "_id": "wrk_d4d92f7c0ee947b89159243506687019",
+      "parentId": null,
+      "modified": 1736781343765,
+      "created": 1736781343765,
+      "name": "Dummy",
+      "description": "",
+      "scope": "collection",
+      "_type": "workspace"
+    },
+    {
+      "_id": "env_16c0dec5b77c414ae0e419b8f10c3701300c5900",
+      "parentId": "wrk_d4d92f7c0ee947b89159243506687019",
+      "modified": 1736781355209,
+      "created": 1736781343767,
+      "name": "Base Environment",
+      "data": {
+        "BASE_VAR": "hello"
+      },
+      "dataPropertyOrder": null,
+      "color": null,
+      "isPrivate": false,
+      "metaSortKey": 1736781343767,
+      "environmentType": "kv",
+      "kvPairData": [
+        {
+          "id": "envPair_61c1be66d42241b5a28306d2cd92d3e3",
+          "name": "BASE_VAR",
+          "value": "hello",
+          "type": "str",
+          "enabled": true
+        }
+      ],
+      "_type": "environment"
+    },
+    {
+      "_id": "jar_16c0dec5b77c414ae0e419b8f10c3701300c5900",
+      "parentId": "wrk_d4d92f7c0ee947b89159243506687019",
+      "modified": 1736781343768,
+      "created": 1736781343768,
+      "name": "Default Jar",
+      "cookies": [],
+      "_type": "cookie_jar"
+    },
+    {
+      "_id": "env_799ae3d723ef44af91b4817e5d057e6d",
+      "parentId": "env_16c0dec5b77c414ae0e419b8f10c3701300c5900",
+      "modified": 1736781394705,
+      "created": 1736781358515,
+      "name": "Production",
+      "data": {
+        "BASE_URL": "https://api.yaak.app"
+      },
+      "dataPropertyOrder": null,
+      "color": "#f22c2c",
+      "isPrivate": false,
+      "metaSortKey": 1736781358515,
+      "environmentType": "kv",
+      "kvPairData": [
+        {
+          "id": "envPair_4d97b569b7e845ccbf488e1b26637cbc",
+          "name": "BASE_URL",
+          "value": "https://api.yaak.app",
+          "type": "str",
+          "enabled": true
+        }
+      ],
+      "_type": "environment"
+    },
+    {
+      "_id": "env_030fbfdbb274426ebd78e2e6518f8553",
+      "parentId": "env_16c0dec5b77c414ae0e419b8f10c3701300c5900",
+      "modified": 1736781391078,
+      "created": 1736781374707,
+      "name": "Staging",
+      "data": {
+        "BASE_URL": "https://api.staging.yaak.app"
+      },
+      "dataPropertyOrder": null,
+      "color": "#206fac",
+      "isPrivate": false,
+      "metaSortKey": 1736781358565,
+      "environmentType": "kv",
+      "kvPairData": [
+        {
+          "id": "envPair_4d97b569b7e845ccbf488e1b26637cbc",
+          "name": "BASE_URL",
+          "value": "https://api.staging.yaak.app",
+          "type": "str",
+          "enabled": true
+        }
+      ],
+      "_type": "environment"
+    }
+  ]
+}
diff --git a/plugins/importer-insomnia/tests/fixtures/basic.output.json b/plugins/importer-insomnia/tests/fixtures/basic.output.json
new file mode 100644
index 0000000..b8705d6
--- /dev/null
+++ b/plugins/importer-insomnia/tests/fixtures/basic.output.json
@@ -0,0 +1,144 @@
+{
+  "resources": {
+    "environments": [
+      {
+        "createdAt": "2025-01-13T15:15:43.767",
+        "updatedAt": "2025-01-13T15:15:55.209",
+        "sortPriority": 1736781343767,
+        "parentId": null,
+        "parentModel": "workspace",
+        "id": "GENERATE_ID::env_16c0dec5b77c414ae0e419b8f10c3701300c5900",
+        "model": "environment",
+        "name": "Base Environment",
+        "variables": [
+          {
+            "enabled": true,
+            "name": "BASE_VAR",
+            "value": "hello"
+          }
+        ],
+        "workspaceId": "GENERATE_ID::wrk_d4d92f7c0ee947b89159243506687019"
+      },
+      {
+        "createdAt": "2025-01-13T15:15:58.515",
+        "updatedAt": "2025-01-13T15:16:34.705",
+        "sortPriority": 1736781358515,
+        "parentId": null,
+        "parentModel": "environment",
+        "id": "GENERATE_ID::env_799ae3d723ef44af91b4817e5d057e6d",
+        "model": "environment",
+        "name": "Production",
+        "variables": [
+          {
+            "enabled": true,
+            "name": "BASE_URL",
+            "value": "https://api.yaak.app"
+          }
+        ],
+        "workspaceId": "GENERATE_ID::wrk_d4d92f7c0ee947b89159243506687019"
+      },
+      {
+        "createdAt": "2025-01-13T15:16:14.707",
+        "updatedAt": "2025-01-13T15:16:31.078",
+        "sortPriority": 1736781358565,
+        "parentId": null,
+        "parentModel": "environment",
+        "id": "GENERATE_ID::env_030fbfdbb274426ebd78e2e6518f8553",
+        "model": "environment",
+        "name": "Staging",
+        "variables": [
+          {
+            "enabled": true,
+            "name": "BASE_URL",
+            "value": "https://api.staging.yaak.app"
+          }
+        ],
+        "workspaceId": "GENERATE_ID::wrk_d4d92f7c0ee947b89159243506687019"
+      }
+    ],
+    "folders": [
+      {
+        "createdAt": "2025-01-13T15:16:44.718",
+        "updatedAt": "2025-01-13T15:16:44.718",
+        "folderId": null,
+        "id": "GENERATE_ID::fld_859d1df78261463480b6a3a1419517e3",
+        "model": "folder",
+        "name": "Top Level",
+        "workspaceId": "GENERATE_ID::wrk_d4d92f7c0ee947b89159243506687019"
+      }
+    ],
+    "grpcRequests": [],
+    "httpRequests": [
+      {
+        "authentication": {
+          "password": "pass",
+          "username": "user"
+        },
+        "authenticationType": "basic",
+        "body": {
+          "form": [
+            {
+              "enabled": true,
+              "file": null,
+              "name": "form",
+              "value": "data"
+            }
+          ]
+        },
+        "bodyType": "multipart/form-data",
+        "createdAt": "2025-01-13T15:16:46.672",
+        "sortPriority": -1736781406672,
+        "updatedAt": "2025-01-13T15:17:53.176",
+        "description": "My description of the request",
+        "folderId": "GENERATE_ID::fld_859d1df78261463480b6a3a1419517e3",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Content-Type",
+            "value": "multipart/form-data"
+          },
+          {
+            "enabled": true,
+            "name": "User-Agent",
+            "value": "insomnia/10.3.0"
+          },
+          {
+            "enabled": true,
+            "name": "X-Header",
+            "value": "xxxx"
+          }
+        ],
+        "id": "GENERATE_ID::req_84cd9ae4bd034dd8bb730e856a665cbb",
+        "method": "GET",
+        "model": "http_request",
+        "name": "New Request",
+        "url": "${[BASE_URL ]}/foo/:id",
+        "urlParameters": [
+          {
+            "name": "query",
+            "value": "qqq",
+            "enabled": true
+          }
+        ],
+        "workspaceId": "GENERATE_ID::wrk_d4d92f7c0ee947b89159243506687019"
+      }
+    ],
+    "websocketRequests": [],
+    "workspaces": [
+      {
+        "createdAt": "2025-01-13T15:15:43.765",
+        "id": "GENERATE_ID::wrk_d4d92f7c0ee947b89159243506687019",
+        "model": "workspace",
+        "name": "Dummy"
+      }
+    ]
+  },
+  "sourceKeys": {
+    "GENERATE_ID::env_16c0dec5b77c414ae0e419b8f10c3701300c5900": "env_16c0dec5b77c414ae0e419b8f10c3701300c5900",
+    "GENERATE_ID::env_799ae3d723ef44af91b4817e5d057e6d": "env_799ae3d723ef44af91b4817e5d057e6d",
+    "GENERATE_ID::env_030fbfdbb274426ebd78e2e6518f8553": "env_030fbfdbb274426ebd78e2e6518f8553",
+    "GENERATE_ID::fld_859d1df78261463480b6a3a1419517e3": "fld_859d1df78261463480b6a3a1419517e3",
+    "GENERATE_ID::req_84cd9ae4bd034dd8bb730e856a665cbb": "req_84cd9ae4bd034dd8bb730e856a665cbb",
+    "GENERATE_ID::wrk_d4d92f7c0ee947b89159243506687019": "wrk_d4d92f7c0ee947b89159243506687019"
+  }
+}
diff --git a/plugins/importer-insomnia/tests/fixtures/version-5-minimal.input.yaml b/plugins/importer-insomnia/tests/fixtures/version-5-minimal.input.yaml
new file mode 100644
index 0000000..87a3bf0
--- /dev/null
+++ b/plugins/importer-insomnia/tests/fixtures/version-5-minimal.input.yaml
@@ -0,0 +1,74 @@
+type: collection.insomnia.rest/5.0
+name: Debugging
+meta:
+  id: wrk_9717dd1c9e0c4b2e9ed6d2abcf3bd45c
+  created: 1747197924902
+  modified: 1747197924902
+collection:
+  - name: My Folder
+    meta:
+      id: fld_296933ea4ea84783a775d199997e9be7
+      created: 1747414092298
+      modified: 1747414142427
+      sortKey: -1747414092298
+    children:
+      - url: https://httpbin.org/post
+        name: New Request
+        meta:
+          id: req_9a80320365ac4509ade406359dbc6a71
+          created: 1747197928502
+          modified: 1747414129313
+          isPrivate: false
+          sortKey: -1747414129276
+        method: GET
+        headers:
+          - name: User-Agent
+            value: insomnia/11.1.0
+            id: pair_6ae87d1620a9494f8e5b29cd9f92d087
+        settings:
+          renderRequestBody: true
+          encodeUrl: true
+          followRedirects: global
+          cookies:
+            send: true
+            store: true
+          rebuildPath: true
+    headers:
+      - id: pair_f2b330e3914f4c11b209318aef94325c
+        name: foo
+        value: bar
+        disabled: false
+    environment:
+      folder_env_var: testing
+  - name: New Request
+    meta:
+      id: req_e3f8cdbd58784a539dd4c1e127d73451
+      created: 1747414160497
+      modified: 1747414160497
+      isPrivate: false
+      sortKey: -1747414160498
+    method: GET
+    headers:
+      - name: User-Agent
+        value: insomnia/11.1.0
+    settings:
+      renderRequestBody: true
+      encodeUrl: true
+      followRedirects: global
+      cookies:
+        send: true
+        store: true
+      rebuildPath: true
+cookieJar:
+  name: Default Jar
+  meta:
+    id: jar_e46dc73e8ccda30ca132153e8f11183bd08119ce
+    created: 1747197924904
+    modified: 1747197924904
+environments:
+  name: Base Environment
+  meta:
+    id: env_e46dc73e8ccda30ca132153e8f11183bd08119ce
+    created: 1747197924903
+    modified: 1747197924903
+    isPrivate: false
diff --git a/plugins/importer-insomnia/tests/fixtures/version-5-minimal.output.json b/plugins/importer-insomnia/tests/fixtures/version-5-minimal.output.json
new file mode 100644
index 0000000..949d661
--- /dev/null
+++ b/plugins/importer-insomnia/tests/fixtures/version-5-minimal.output.json
@@ -0,0 +1,128 @@
+{
+  "resources": {
+    "environments": [
+      {
+        "createdAt": "2025-05-14T04:45:24.903",
+        "id": "GENERATE_ID::env_e46dc73e8ccda30ca132153e8f11183bd08119ce",
+        "model": "environment",
+        "name": "Base Environment",
+        "public": true,
+        "updatedAt": "2025-05-14T04:45:24.903",
+        "variables": [],
+        "workspaceId": "GENERATE_ID::wrk_9717dd1c9e0c4b2e9ed6d2abcf3bd45c",
+        "parentId": null,
+        "parentModel": "workspace"
+      },
+      {
+        "createdAt": "2025-05-16T16:48:12.298",
+        "id": "GENERATE_ID::fld_296933ea4ea84783a775d199997e9be7folder",
+        "model": "environment",
+        "name": "Folder Environment",
+        "parentId": "GENERATE_ID::fld_296933ea4ea84783a775d199997e9be7",
+        "parentModel": "folder",
+        "public": true,
+        "updatedAt": "2025-05-16T16:49:02.427",
+        "variables": [
+          {
+            "enabled": true,
+            "name": "folder_env_var",
+            "value": "testing"
+          }
+        ],
+        "workspaceId": "GENERATE_ID::wrk_9717dd1c9e0c4b2e9ed6d2abcf3bd45c"
+      }
+    ],
+    "folders": [
+      {
+        "createdAt": "2025-05-16T16:48:12.298",
+        "folderId": null,
+        "id": "GENERATE_ID::fld_296933ea4ea84783a775d199997e9be7",
+        "model": "folder",
+        "name": "My Folder",
+        "sortPriority": -1747414092298,
+        "updatedAt": "2025-05-16T16:49:02.427",
+        "workspaceId": "GENERATE_ID::wrk_9717dd1c9e0c4b2e9ed6d2abcf3bd45c",
+        "authentication": {},
+        "authenticationType": null,
+        "headers": [
+          {
+            "enabled": true,
+            "name": "foo",
+            "value": "bar"
+          }
+        ]
+      }
+    ],
+    "grpcRequests": [],
+    "httpRequests": [
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "createdAt": "2025-05-14T04:45:28.502",
+        "folderId": "GENERATE_ID::fld_296933ea4ea84783a775d199997e9be7",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "User-Agent",
+            "value": "insomnia/11.1.0"
+          }
+        ],
+        "id": "GENERATE_ID::req_9a80320365ac4509ade406359dbc6a71",
+        "method": "GET",
+        "model": "http_request",
+        "name": "New Request",
+        "sortPriority": -1747414129276,
+        "updatedAt": "2025-05-16T16:48:49.313",
+        "url": "https://httpbin.org/post",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::wrk_9717dd1c9e0c4b2e9ed6d2abcf3bd45c"
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "createdAt": "2025-05-16T16:49:20.497",
+        "folderId": null,
+        "headers": [
+          {
+            "enabled": true,
+            "name": "User-Agent",
+            "value": "insomnia/11.1.0"
+          }
+        ],
+        "id": "GENERATE_ID::req_e3f8cdbd58784a539dd4c1e127d73451",
+        "method": "GET",
+        "model": "http_request",
+        "name": "New Request",
+        "sortPriority": -1747414160498,
+        "updatedAt": "2025-05-16T16:49:20.497",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::wrk_9717dd1c9e0c4b2e9ed6d2abcf3bd45c"
+      }
+    ],
+    "websocketRequests": [],
+    "workspaces": [
+      {
+        "createdAt": "2025-05-14T04:45:24.902",
+        "id": "GENERATE_ID::wrk_9717dd1c9e0c4b2e9ed6d2abcf3bd45c",
+        "model": "workspace",
+        "name": "Debugging",
+        "updatedAt": "2025-05-14T04:45:24.902",
+        "authentication": {},
+        "authenticationType": null,
+        "headers": []
+      }
+    ]
+  },
+  "sourceKeys": {
+    "GENERATE_ID::env_e46dc73e8ccda30ca132153e8f11183bd08119ce": "env_e46dc73e8ccda30ca132153e8f11183bd08119ce",
+    "GENERATE_ID::fld_296933ea4ea84783a775d199997e9be7folder": "fld_296933ea4ea84783a775d199997e9be7folder",
+    "GENERATE_ID::fld_296933ea4ea84783a775d199997e9be7": "fld_296933ea4ea84783a775d199997e9be7",
+    "GENERATE_ID::req_9a80320365ac4509ade406359dbc6a71": "req_9a80320365ac4509ade406359dbc6a71",
+    "GENERATE_ID::req_e3f8cdbd58784a539dd4c1e127d73451": "req_e3f8cdbd58784a539dd4c1e127d73451",
+    "GENERATE_ID::wrk_9717dd1c9e0c4b2e9ed6d2abcf3bd45c": "wrk_9717dd1c9e0c4b2e9ed6d2abcf3bd45c"
+  }
+}
diff --git a/plugins/importer-insomnia/tests/fixtures/version-5.input.yaml b/plugins/importer-insomnia/tests/fixtures/version-5.input.yaml
new file mode 100644
index 0000000..a55abd6
--- /dev/null
+++ b/plugins/importer-insomnia/tests/fixtures/version-5.input.yaml
@@ -0,0 +1,146 @@
+type: collection.insomnia.rest/5.0
+name: Dummy
+meta:
+  id: wrk_c1eacfa750a04f3ea9985ef28043fa53
+  created: 1746799305927
+  modified: 1746843054272
+  description: This is the description
+collection:
+  - name: Top Level
+    meta:
+      id: fld_42eb2e2bb22b4cedacbd3d057634e80c
+      created: 1736781404718
+      modified: 1736781404718
+      sortKey: -1736781404718
+    children:
+      - url: "{{ _.BASE_URL }}/foo/:id"
+        name: New Request
+        meta:
+          id: req_d72fff2a6b104b91a2ebe9de9edd2785
+          created: 1736781406672
+          modified: 1736781473176
+          isPrivate: false
+          description: My description of the request
+          sortKey: -1736781406672
+        method: GET
+        body:
+          mimeType: multipart/form-data
+          params:
+            - id: pair_7c86036ae8ef499dbbc0b43d0800c5a3
+              name: form
+              value: data
+              disabled: false
+        parameters:
+          - id: pair_b22f6ff611cd4250a6e405ca7b713d09
+            name: query
+            value: qqq
+            disabled: false
+        headers:
+          - name: Content-Type
+            value: multipart/form-data
+            id: pair_4af845963bd14256b98716617971eecd
+          - name: User-Agent
+            value: insomnia/10.3.0
+            id: pair_535ffd00ce48462cb1b7258832ade65a
+          - id: pair_ab4b870278e943cba6babf5a73e213e3
+            name: X-Header
+            value: xxxx
+            disabled: false
+          - id: pair_ab4b870278e943cba6babf5a73e213e3
+            name: "{{ _.ApiHeaderName }}"
+            value: "{{ _.ApiKey }}"
+            disabled: false
+        authentication:
+          type: basic
+          useISO88591: false
+          disabled: false
+          username: user
+          password: pass
+        settings:
+          renderRequestBody: true
+          encodeUrl: true
+          followRedirects: global
+          cookies:
+            send: true
+            store: true
+          rebuildPath: true
+        pathParameters:
+          - name: id
+            value: iii
+  - url: grpcb.in:9000
+    name: New Request
+    meta:
+      id: greq_06d659324df94504a4d64632be7106b3
+      created: 1746799344864
+      modified: 1746799544082
+      isPrivate: false
+      sortKey: -1746799344864
+    body:
+      text: |-
+        {
+        	"greeting": "Greg"
+        }
+    protoFileId: pf_9d45b0dfaccc4bcc9d930746716786c5
+    protoMethodName: /hello.HelloService/SayHello
+    reflectionApi:
+      enabled: false
+      url: https://buf.build
+      module: buf.build/connectrpc/eliza
+  - url: wss://echo.websocket.org
+    name: New WebSocket Request
+    meta:
+      id: ws-req_5d1a4c7c79494743962e5176f6add270
+      created: 1746799553909
+      modified: 1746887120958
+      sortKey: -1746799553909
+    settings:
+      encodeUrl: true
+      followRedirects: global
+      cookies:
+        send: true
+        store: true
+    authentication:
+      type: basic
+      useISO88591: false
+      disabled: false
+      username: user
+      password: password
+    headers:
+      - name: User-Agent
+        value: insomnia/11.1.0
+cookieJar:
+  name: Default Jar
+  meta:
+    id: jar_663d5741b072441aa2709a6113371510
+    created: 1736781343768
+    modified: 1736781343768
+environments:
+  name: Base Environment
+  meta:
+    id: env_20945044d3c8497ca8b717bef750987e
+    created: 1736781343767
+    modified: 1736781355209
+    isPrivate: false
+  data:
+    BASE_VAR: hello
+  subEnvironments:
+    - name: Production
+      meta:
+        id: env_6f7728bb7fc04d558d668e954d756ea2
+        created: 1736781358515
+        modified: 1736781394705
+        isPrivate: false
+        sortKey: 1736781358515
+      data:
+        BASE_URL: https://api.yaak.app
+      color: "#f22c2c"
+    - name: Staging
+      meta:
+        id: env_976a8b6eb5d44fb6a20150f65c32d243
+        created: 1736781374707
+        modified: 1736781391078
+        isPrivate: false
+        sortKey: 1736781358565
+      data:
+        BASE_URL: https://api.staging.yaak.app
+      color: "#206fac"
diff --git a/plugins/importer-insomnia/tests/fixtures/version-5.output.json b/plugins/importer-insomnia/tests/fixtures/version-5.output.json
new file mode 100644
index 0000000..1cff2ce
--- /dev/null
+++ b/plugins/importer-insomnia/tests/fixtures/version-5.output.json
@@ -0,0 +1,203 @@
+{
+  "resources": {
+    "environments": [
+      {
+        "createdAt": "2025-01-13T15:15:43.767",
+        "updatedAt": "2025-01-13T15:15:55.209",
+        "public": true,
+        "id": "GENERATE_ID::env_20945044d3c8497ca8b717bef750987e",
+        "model": "environment",
+        "name": "Base Environment",
+        "parentId": null,
+        "parentModel": "workspace",
+        "variables": [
+          {
+            "enabled": true,
+            "name": "BASE_VAR",
+            "value": "hello"
+          }
+        ],
+        "workspaceId": "GENERATE_ID::wrk_c1eacfa750a04f3ea9985ef28043fa53"
+      },
+      {
+        "createdAt": "2025-01-13T15:15:58.515",
+        "updatedAt": "2025-01-13T15:16:34.705",
+        "public": true,
+        "id": "GENERATE_ID::env_6f7728bb7fc04d558d668e954d756ea2",
+        "model": "environment",
+        "name": "Production",
+        "parentId": null,
+        "parentModel": "environment",
+        "sortPriority": 1736781358515,
+        "variables": [
+          {
+            "enabled": true,
+            "name": "BASE_URL",
+            "value": "https://api.yaak.app"
+          }
+        ],
+        "workspaceId": "GENERATE_ID::wrk_c1eacfa750a04f3ea9985ef28043fa53"
+      },
+      {
+        "createdAt": "2025-01-13T15:16:14.707",
+        "updatedAt": "2025-01-13T15:16:31.078",
+        "public": true,
+        "parentId": null,
+        "parentModel": "environment",
+        "id": "GENERATE_ID::env_976a8b6eb5d44fb6a20150f65c32d243",
+        "model": "environment",
+        "name": "Staging",
+        "sortPriority": 1736781358565,
+        "variables": [
+          {
+            "enabled": true,
+            "name": "BASE_URL",
+            "value": "https://api.staging.yaak.app"
+          }
+        ],
+        "workspaceId": "GENERATE_ID::wrk_c1eacfa750a04f3ea9985ef28043fa53"
+      }
+    ],
+    "folders": [
+      {
+        "createdAt": "2025-01-13T15:16:44.718",
+        "updatedAt": "2025-01-13T15:16:44.718",
+        "folderId": null,
+        "id": "GENERATE_ID::fld_42eb2e2bb22b4cedacbd3d057634e80c",
+        "model": "folder",
+        "name": "Top Level",
+        "sortPriority": -1736781404718,
+        "workspaceId": "GENERATE_ID::wrk_c1eacfa750a04f3ea9985ef28043fa53",
+        "authentication": {},
+        "authenticationType": null,
+        "headers": []
+      }
+    ],
+    "grpcRequests": [
+      {
+        "model": "grpc_request",
+        "createdAt": "2025-05-09T14:02:24.864",
+        "folderId": null,
+        "id": "GENERATE_ID::greq_06d659324df94504a4d64632be7106b3",
+        "message": "{\n\t\"greeting\": \"Greg\"\n}",
+        "metadata": [],
+        "method": "SayHello",
+        "name": "New Request",
+        "service": "hello.HelloService",
+        "sortPriority": -1746799344864,
+        "updatedAt": "2025-05-09T14:05:44.082",
+        "url": "grpcb.in:9000",
+        "workspaceId": "GENERATE_ID::wrk_c1eacfa750a04f3ea9985ef28043fa53"
+      }
+    ],
+    "httpRequests": [
+      {
+        "authentication": {
+          "password": "pass",
+          "username": "user"
+        },
+        "authenticationType": "basic",
+        "body": {
+          "form": [
+            {
+              "enabled": true,
+              "file": null,
+              "name": "form",
+              "value": "data"
+            }
+          ]
+        },
+        "bodyType": "multipart/form-data",
+        "createdAt": "2025-01-13T15:16:46.672",
+        "updatedAt": "2025-01-13T15:17:53.176",
+        "description": "My description of the request",
+        "folderId": "GENERATE_ID::fld_42eb2e2bb22b4cedacbd3d057634e80c",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Content-Type",
+            "value": "multipart/form-data"
+          },
+          {
+            "enabled": true,
+            "name": "User-Agent",
+            "value": "insomnia/10.3.0"
+          },
+          {
+            "enabled": true,
+            "name": "X-Header",
+            "value": "xxxx"
+          },
+          {
+            "enabled": true,
+            "name": "${[ApiHeaderName ]}",
+            "value": "${[ApiKey ]}"
+          }
+        ],
+        "id": "GENERATE_ID::req_d72fff2a6b104b91a2ebe9de9edd2785",
+        "method": "GET",
+        "model": "http_request",
+        "name": "New Request",
+        "sortPriority": -1736781406672,
+        "url": "${[BASE_URL ]}/foo/:id",
+        "urlParameters": [
+          {
+            "name": "query",
+            "value": "qqq",
+            "enabled": true
+          }
+        ],
+        "workspaceId": "GENERATE_ID::wrk_c1eacfa750a04f3ea9985ef28043fa53"
+      }
+    ],
+    "websocketRequests": [
+      {
+        "id": "GENERATE_ID::ws-req_5d1a4c7c79494743962e5176f6add270",
+        "createdAt": "2025-05-09T14:05:53.909",
+        "updatedAt": "2025-05-10T14:25:20.958",
+        "message": "",
+        "model": "websocket_request",
+        "name": "New WebSocket Request",
+        "sortPriority": -1746799553909,
+        "authenticationType": "basic",
+        "authentication": {
+          "password": "password",
+          "username": "user"
+        },
+        "folderId": null,
+        "headers": [
+          {
+            "enabled": true,
+            "name": "User-Agent",
+            "value": "insomnia/11.1.0"
+          }
+        ],
+        "url": "wss://echo.websocket.org",
+        "workspaceId": "GENERATE_ID::wrk_c1eacfa750a04f3ea9985ef28043fa53"
+      }
+    ],
+    "workspaces": [
+      {
+        "createdAt": "2025-05-09T14:01:45.927",
+        "updatedAt": "2025-05-10T02:10:54.272",
+        "description": "This is the description",
+        "id": "GENERATE_ID::wrk_c1eacfa750a04f3ea9985ef28043fa53",
+        "model": "workspace",
+        "name": "Dummy",
+        "authentication": {},
+        "authenticationType": null,
+        "headers": []
+      }
+    ]
+  },
+  "sourceKeys": {
+    "GENERATE_ID::env_20945044d3c8497ca8b717bef750987e": "env_20945044d3c8497ca8b717bef750987e",
+    "GENERATE_ID::env_6f7728bb7fc04d558d668e954d756ea2": "env_6f7728bb7fc04d558d668e954d756ea2",
+    "GENERATE_ID::env_976a8b6eb5d44fb6a20150f65c32d243": "env_976a8b6eb5d44fb6a20150f65c32d243",
+    "GENERATE_ID::fld_42eb2e2bb22b4cedacbd3d057634e80c": "fld_42eb2e2bb22b4cedacbd3d057634e80c",
+    "GENERATE_ID::greq_06d659324df94504a4d64632be7106b3": "greq_06d659324df94504a4d64632be7106b3",
+    "GENERATE_ID::req_d72fff2a6b104b91a2ebe9de9edd2785": "req_d72fff2a6b104b91a2ebe9de9edd2785",
+    "GENERATE_ID::ws-req_5d1a4c7c79494743962e5176f6add270": "ws-req_5d1a4c7c79494743962e5176f6add270",
+    "GENERATE_ID::wrk_c1eacfa750a04f3ea9985ef28043fa53": "wrk_c1eacfa750a04f3ea9985ef28043fa53"
+  }
+}
diff --git a/plugins/importer-insomnia/tests/index.test.ts b/plugins/importer-insomnia/tests/index.test.ts
new file mode 100644
index 0000000..26fc824
--- /dev/null
+++ b/plugins/importer-insomnia/tests/index.test.ts
@@ -0,0 +1,67 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { describe, expect, test } from "vite-plus/test";
+import YAML from "yaml";
+import { convertInsomnia } from "../src";
+
+describe("importer-yaak", () => {
+  const p = path.join(__dirname, "fixtures");
+  const fixtures = fs.readdirSync(p);
+
+  for (const fixture of fixtures) {
+    if (fixture.includes(".output")) {
+      continue;
+    }
+
+    test(`Imports ${fixture}`, () => {
+      const contents = fs.readFileSync(path.join(p, fixture), "utf-8");
+      const expected = fs.readFileSync(
+        path.join(p, fixture.replace(/.input\..*/, ".output.json")),
+        "utf-8",
+      );
+      const result = convertInsomnia(contents);
+      // console.log(JSON.stringify(result, null, 2))
+      expect(result).toEqual(parseJsonOrYaml(expected));
+    });
+  }
+
+  test("Keys resources by their Insomnia _id, unchanged by a rename", () => {
+    const collection = (requestName: string) =>
+      YAML.stringify({
+        type: "collection.insomnia.rest/5.0",
+        name: "Keys",
+        meta: { id: "wrk_1" },
+        environments: { meta: { id: "env_1" }, name: "Base", data: {} },
+        collection: [
+          {
+            meta: { id: "fld_1" },
+            name: "Folder",
+            children: [
+              {
+                meta: { id: "req_1" },
+                name: requestName,
+                method: "GET",
+                url: "https://yaak.app",
+              },
+            ],
+          },
+        ],
+      });
+
+    const before = convertInsomnia(collection("Original"));
+    const after = convertInsomnia(collection("Renamed"));
+
+    expect(before?.sourceKeys?.[before.resources.httpRequests[0]!.id]).toBe("req_1");
+    expect(after?.sourceKeys?.[after.resources.httpRequests[0]!.id]).toBe("req_1");
+    expect(before?.sourceKeys?.[before.resources.folders[0]!.id]).toBe("fld_1");
+    expect(before?.sourceKeys?.[before.resources.workspaces[0]!.id]).toBe("wrk_1");
+  });
+});
+
+function parseJsonOrYaml(text: string): unknown {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return YAML.parse(text);
+  }
+}
diff --git a/plugins/importer-insomnia/tsconfig.json b/plugins/importer-insomnia/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/importer-insomnia/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/importer-openapi/package.json b/plugins/importer-openapi/package.json
new file mode 100644
index 0000000..6d27c32
--- /dev/null
+++ b/plugins/importer-openapi/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@yaak/importer-openapi",
+  "displayName": "OpenAPI Importer",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Import API specifications from OpenAPI/Swagger format",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests",
+    "test:roundtrip": "node tests/roundtrip.mjs"
+  },
+  "dependencies": {
+    "yaml": "^2.8.3"
+  }
+}
diff --git a/plugins/importer-openapi/src/index.ts b/plugins/importer-openapi/src/index.ts
new file mode 100644
index 0000000..302c04b
--- /dev/null
+++ b/plugins/importer-openapi/src/index.ts
@@ -0,0 +1,2268 @@
+import type {
+  Context,
+  Environment,
+  Folder,
+  HttpRequest,
+  HttpRequestHeader,
+  HttpUrlParameter,
+  PartialImportResources,
+  PluginDefinition,
+  Workspace,
+} from "@yaakapp/api";
+import type { ImportPluginResponse } from "@yaakapp/api/lib/plugins/ImporterPlugin";
+import YAML from "yaml";
+
+type AtLeast<T, K extends keyof T> = Partial<T> & Pick<T, K>;
+type UnknownRecord = Record<string, unknown>;
+type ImportResources = {
+  workspaces: AtLeast<Workspace, "name" | "id" | "model" | "authentication">[];
+  environments: AtLeast<Environment, "name" | "id" | "model" | "workspaceId" | "variables">[];
+  folders: AtLeast<Folder, "name" | "id" | "model" | "workspaceId">[];
+  httpRequests: AtLeast<HttpRequest, "name" | "id" | "model" | "workspaceId">[];
+};
+type ImportedAuthentication = Pick<HttpRequest, "authentication" | "authenticationType"> & {
+  headers: HttpRequestHeader[];
+  urlParameters: HttpUrlParameter[];
+};
+type AuthenticationVariableRegistry = Map<string, { name: string; value: string }>;
+type OAuthVariableNames = { clientId: string; clientSecret: string; redirectUri: string };
+type ServerOverrideVariable = { name: string; value: string };
+
+const HTTP_METHODS = ["delete", "get", "head", "options", "patch", "post", "put", "query", "trace"];
+const BODY_CONTENT_TYPE_PREFERENCE = [
+  "application/json",
+  "application/x-www-form-urlencoded",
+  "multipart/form-data",
+  "application/xml",
+  "text/plain",
+];
+const MAX_EXAMPLE_DEPTH = 8;
+const MAX_SCHEMA_RESOLUTION_DEPTH = MAX_EXAMPLE_DEPTH;
+const MAX_EXAMPLE_PROPERTIES = 25;
+const MAX_DESCRIPTION_ITEMS = 40;
+const MAX_NAME_LENGTH = 100;
+
+export const plugin: PluginDefinition = {
+  importer: {
+    name: "OpenAPI",
+    description: "Import OpenAPI collections",
+    onImport(_ctx: Context, args: { text: string }) {
+      return convertOpenApi(args.text);
+    },
+  },
+};
+
+export async function convertOpenApi(contents: string): Promise<ImportPluginResponse | undefined> {
+  const spec = parseSpec(contents);
+  if (!isOpenApiSpec(spec)) return undefined;
+
+  const importState = new ImportState(spec);
+  const workspace: ImportResources["workspaces"][0] = {
+    model: "workspace",
+    id: importState.generateId("workspace"),
+    name: stringAt(spec.info, "title") ?? "OpenAPI Import",
+    description: importInfoDescription(toRecord(spec.info)),
+    authentication: {},
+  };
+
+  const resources: ImportResources = {
+    workspaces: [workspace],
+    environments: [],
+    folders: [],
+    httpRequests: [],
+  };
+  const authenticationVariables: AuthenticationVariableRegistry = new Map();
+  const oauthVariablesByScheme = buildOAuthVariablesByScheme(importState, spec);
+  const serverOverrides = new Map<string, ServerOverrideVariable>();
+  const baseUrl = importBaseUrl(spec);
+  const serverEnvironments = importServerEnvironments(spec);
+  // A local spec has no document URL against which OpenAPI's implicit "/"
+  // server can resolve. Keep the shared variable even when its initial value
+  // is empty so users can configure the host once instead of editing requests.
+  const requestBaseUrl = "${[baseUrl]}";
+  resources.environments.push({
+    model: "environment",
+    id: importState.generateId("environment"),
+    workspaceId: workspace.id,
+    name: "Global Variables",
+    variables: [{ name: "baseUrl", value: baseUrl }],
+    parentModel: "workspace",
+    parentId: null,
+    sortPriority: importState.nextSortPriority(),
+  });
+
+  // Spec-level security is the default for every operation, which is exactly
+  // Yaak's inheritance model: it lives on the workspace, and only operations
+  // that declare their own security carry per-request authentication. API keys
+  // materialized as headers or query parameters go onto inheriting requests
+  // individually — workspace headers would also reach operations that override
+  // or disable security, leaking the credential to endpoints that opted out.
+  const workspaceAuthentication = importAuthentication({
+    authenticationVariables,
+    importState,
+    oauthVariablesByScheme,
+    security: spec.security,
+    spec,
+    useDynamicServerUrls: serverEnvironments.length > 1,
+  });
+  workspace.authentication = workspaceAuthentication.authentication;
+  workspace.authenticationType = workspaceAuthentication.authenticationType;
+
+  const folderIdsByTag = new Map<string, string>();
+  const routeLabels = new Map<string, string>();
+  const sourceKeys: Record<string, string> = {};
+  for (const tag of toArray(spec.tags)) {
+    const tagRecord = toRecord(tag);
+    const name = stringAt(tagRecord, "name");
+    if (name == null || folderIdsByTag.has(name)) continue;
+
+    const folder: ImportResources["folders"][0] = {
+      model: "folder",
+      id: importState.generateId("folder"),
+      workspaceId: workspace.id,
+      name,
+      description: importTagDescription(tagRecord),
+      folderId: null,
+      sortPriority: importState.nextSortPriority(),
+    };
+    resources.folders.push(folder);
+    folderIdsByTag.set(name, folder.id);
+    sourceKeys[folder.id] = tagSourceKey(name);
+  }
+
+  for (const [rawPath, rawPathItem] of Object.entries(toRecord(spec.paths))) {
+    const pathItem = importState.resolve(rawPathItem);
+    if (!isRecord(pathItem)) continue;
+
+    const pathParameters = toArray(pathItem.parameters);
+    for (const { method, operation } of pathItemOperations(pathItem, importState)) {
+      const folderId = findOrCreateFolderId({
+        folderIdsByTag,
+        importState,
+        operation,
+        resources,
+        sourceKeys,
+        workspaceId: workspace.id,
+      });
+
+      const request = importOperation({
+        importState,
+        inheritedAuthentication: workspaceAuthentication,
+        method,
+        operation,
+        oauthVariablesByScheme,
+        path: rawPath,
+        pathItem,
+        pathParameters,
+        requestBaseUrl,
+        serverOverrides,
+        useDynamicServerUrls: serverEnvironments.length > 1,
+        spec,
+        workspaceId: workspace.id,
+        folderId,
+        authenticationVariables,
+      });
+      routeLabels.set(request.id, `${method.toUpperCase()} ${rawPath}`);
+      sourceKeys[request.id] = operationSourceKey(
+        stringAt(operation, "operationId"),
+        method,
+        rawPath,
+      );
+      resources.httpRequests.push(request);
+    }
+  }
+
+  const authenticationConfigs = [workspace, ...resources.httpRequests];
+  if (authenticationConfigs.some((model) => model.authenticationType === "oauth2")) {
+    const variableNames = new Set(
+      [...oauthVariablesByScheme.values()].flatMap(({ clientId, clientSecret }) => [
+        clientId,
+        clientSecret,
+      ]),
+    );
+    // Only redirect-based grants reference the redirect variable, so don't
+    // create it for specs that import as client_credentials or password
+    for (const { redirectUri } of oauthVariablesByScheme.values()) {
+      const used = authenticationConfigs.some(
+        (model) =>
+          model.authenticationType === "oauth2" &&
+          Object.values(toRecord(model.authentication)).some(
+            (value) => typeof value === "string" && value.includes(templateVariable(redirectUri)),
+          ),
+      );
+      if (used) variableNames.add(redirectUri);
+    }
+    if (
+      authenticationConfigs.some(
+        (model) =>
+          model.authenticationType === "oauth2" &&
+          Object.values(toRecord(model.authentication)).some(
+            (value) =>
+              typeof value === "string" && value.includes(templateVariable("baseUrlOrigin")),
+          ),
+      )
+    ) {
+      variableNames.add("baseUrlOrigin");
+    }
+    resources.environments[0]?.variables.push(
+      ...[...variableNames].map((name) => ({ name, value: "" })),
+    );
+  }
+
+  if (resources.httpRequests.length === 0) return undefined;
+
+  const baseEnvironment = resources.environments[0];
+  if (baseEnvironment == null) return undefined;
+  baseEnvironment.variables.push(...authenticationVariables.values());
+
+  const environmentSpecificVariables = baseEnvironment.variables;
+  baseEnvironment.variables = [...serverOverrides.values()];
+  resources.environments.push(
+    ...serverEnvironments.map(({ name, url }) => ({
+      model: "environment" as const,
+      id: importState.generateId("environment"),
+      workspaceId: workspace.id,
+      name,
+      variables: environmentSpecificVariables.map((variable) => ({
+        ...variable,
+        value:
+          variable.name === "baseUrl"
+            ? url
+            : variable.name === "baseUrlOrigin"
+              ? serverUrlOrigin(url)
+              : variable.value,
+      })),
+      parentModel: "environment" as const,
+      parentId: null,
+      sortPriority: importState.nextSortPriority(),
+    })),
+  );
+
+  disambiguateNames(resources.httpRequests, routeLabels);
+
+  return {
+    resources: deleteUndefinedAttrs({
+      environments: resources.environments,
+      folders: resources.folders,
+      grpcRequests: [],
+      httpRequests: resources.httpRequests,
+      websocketRequests: [],
+      workspaces: resources.workspaces,
+    }) as PartialImportResources,
+    sourceKeys,
+  };
+}
+
+/** OpenAPI 3.2 adds QUERY plus a map for extension HTTP methods. */
+function pathItemOperations(
+  pathItem: UnknownRecord,
+  importState: ImportState,
+): { method: string; operation: UnknownRecord }[] {
+  const operations = HTTP_METHODS.flatMap((method) => {
+    const operation = importState.resolve(pathItem[method]);
+    return isRecord(operation) ? [{ method, operation }] : [];
+  });
+
+  for (const [method, rawOperation] of Object.entries(toRecord(pathItem.additionalOperations))) {
+    if (HTTP_METHODS.includes(method.toLowerCase())) continue;
+    const operation = importState.resolve(rawOperation);
+    if (isRecord(operation)) operations.push({ method, operation });
+  }
+  return operations;
+}
+
+/**
+ * Two operations sharing a summary are indistinguishable once imported, so the
+ * colliding ones get their route appended. Names that are already unique within
+ * their folder are left alone.
+ */
+function disambiguateNames(
+  requests: ImportResources["httpRequests"],
+  routeLabels: Map<string, string>,
+): void {
+  const counts = new Map<string, number>();
+  for (const request of requests) {
+    const key = `${request.folderId ?? ""} ${request.name}`;
+    counts.set(key, (counts.get(key) ?? 0) + 1);
+  }
+
+  for (const request of requests) {
+    const key = `${request.folderId ?? ""} ${request.name}`;
+    const routeLabel = routeLabels.get(request.id);
+    if ((counts.get(key) ?? 0) < 2 || routeLabel == null) continue;
+    if (request.name === routeLabel) continue;
+    request.name = `${request.name} (${routeLabel})`;
+  }
+}
+
+function importOperation({
+  importState,
+  inheritedAuthentication,
+  method,
+  operation,
+  oauthVariablesByScheme,
+  path,
+  pathItem,
+  pathParameters,
+  requestBaseUrl,
+  serverOverrides,
+  useDynamicServerUrls,
+  spec,
+  workspaceId,
+  folderId,
+  authenticationVariables,
+}: {
+  importState: ImportState;
+  inheritedAuthentication: ImportedAuthentication;
+  method: string;
+  operation: UnknownRecord;
+  oauthVariablesByScheme: Map<string, OAuthVariableNames>;
+  path: string;
+  pathItem: UnknownRecord;
+  pathParameters: unknown[];
+  requestBaseUrl: string;
+  serverOverrides: Map<string, ServerOverrideVariable>;
+  useDynamicServerUrls: boolean;
+  spec: UnknownRecord;
+  workspaceId: string;
+  folderId: string | null;
+  authenticationVariables: AuthenticationVariableRegistry;
+}): ImportResources["httpRequests"][0] {
+  importState.beginOperation();
+  const parameters = mergeParameters({
+    importState,
+    pathParameters,
+    operationParameters: toArray(operation.parameters),
+  });
+  const body = importBody({ importState, operation, parameters, spec });
+  // Operations without their own security inherit the workspace's (null
+  // authenticationType), the same way an operation inherits spec security
+  const hasOwnSecurity = Array.isArray(operation.security);
+  const authentication = hasOwnSecurity
+    ? importAuthentication({
+        authenticationVariables,
+        importState,
+        oauthVariablesByScheme,
+        security: operation.security,
+        spec,
+        useDynamicServerUrls,
+      })
+    : {
+        ...emptyAuthentication(),
+        headers: inheritedAuthentication.headers,
+        urlParameters: inheritedAuthentication.urlParameters,
+      };
+  const url = buildOperationUrl(
+    operationBaseUrl({ operation, pathItem, requestBaseUrl, serverOverrides }),
+    path,
+    parameters,
+    importState,
+  );
+  const urlParameters = [
+    ...importUrlParameters({ importState, parameters, path }),
+    ...authentication.urlParameters,
+  ];
+  const headers = mergeHeaders(
+    authentication.headers,
+    importHeaderParameters({ importState, parameters }),
+    importCookieHeader({ importState, parameters }),
+    body.headers,
+    importAcceptHeader({ importState, operation, spec }),
+  );
+  const {
+    headers: _authenticationHeaders,
+    urlParameters: _authenticationParameters,
+    ...auth
+  } = authentication;
+
+  // Built after everything else, so it can report the refs they left unresolved
+  const description = importOperationDescription({
+    importState,
+    operation,
+    parameters,
+    bodyContentType: body.bodyType,
+  });
+
+  return {
+    model: "http_request",
+    id: importState.generateId("http_request"),
+    workspaceId,
+    folderId,
+    name: importOperationName(operation, method, path),
+    description,
+    method: method.toUpperCase(),
+    url,
+    urlParameters,
+    headers,
+    body: body.body,
+    bodyType: body.bodyType,
+    sortPriority: importState.nextSortPriority(),
+    ...auth,
+  };
+}
+
+/**
+ * A parameter is identified by its name and location, and an operation may
+ * redeclare one from its path item to change it. Keeping both copies would
+ * import the stale one alongside the override, so the operation's wins.
+ */
+function mergeParameters({
+  importState,
+  pathParameters,
+  operationParameters,
+}: {
+  importState: ImportState;
+  pathParameters: unknown[];
+  operationParameters: unknown[];
+}): unknown[] {
+  const merged: unknown[] = [];
+  const indexByKey = new Map<string, number>();
+
+  for (const parameter of [...pathParameters, ...operationParameters]) {
+    const resolved = importState.resolve(parameter);
+    const name = stringAt(resolved, "name");
+    const location = stringAt(resolved, "in");
+    // Anything missing an identity can't be matched up, so it is kept as-is
+    if (name == null || location == null) {
+      merged.push(resolved);
+      continue;
+    }
+
+    const key = `${location} ${name}`;
+    const existing = indexByKey.get(key);
+    if (existing == null) {
+      indexByKey.set(key, merged.length);
+      merged.push(resolved);
+    } else {
+      merged[existing] = resolved;
+    }
+  }
+
+  return merged;
+}
+
+/** Operation-level `servers` beat path-level, which beat the spec-level base URL */
+function operationBaseUrl({
+  operation,
+  pathItem,
+  requestBaseUrl,
+  serverOverrides,
+}: {
+  operation: UnknownRecord;
+  pathItem: UnknownRecord;
+  requestBaseUrl: string;
+  serverOverrides: Map<string, ServerOverrideVariable>;
+}): string {
+  for (const servers of [operation.servers, pathItem.servers]) {
+    const override = toArray(servers)
+      .map((s) => interpolateServerUrl(toRecord(s)))
+      .find((url) => url.length > 0);
+    if (override != null) {
+      let variable = serverOverrides.get(override);
+      if (variable == null) {
+        const suffix = serverOverrides.size === 0 ? "" : String(serverOverrides.size + 1);
+        variable = { name: `serverUrl${suffix}`, value: override };
+        serverOverrides.set(override, variable);
+      }
+      return `\${[${variable.name}]}`;
+    }
+  }
+  return requestBaseUrl;
+}
+
+/**
+ * Swagger 2.0 declares response types up front in `produces`; OpenAPI 3 only
+ * lists them per response, so successful responses stand in. Both become an
+ * Accept header, which is what the Postman-based importer used to produce.
+ */
+function importAcceptHeader({
+  importState,
+  operation,
+  spec,
+}: {
+  importState: ImportState;
+  operation: UnknownRecord;
+  spec: UnknownRecord;
+}): HttpRequestHeader[] {
+  const produces =
+    toArray(operation.produces ?? spec.produces).find((c): c is string => typeof c === "string") ??
+    successResponseContentType(importState, operation);
+  // `*/*` is what a request accepts by default, so stating it just adds noise
+  if (produces == null || produces === "*/*") return [];
+  return [{ enabled: true, name: "Accept", value: produces }];
+}
+
+/** The content type of the first successful response, by the usual preference */
+function successResponseContentType(
+  importState: ImportState,
+  operation: UnknownRecord,
+): string | null {
+  for (const [status, response] of Object.entries(toRecord(operation.responses))) {
+    if (!status.startsWith("2") && status !== "default") continue;
+
+    const content = toRecord(toRecord(importState.resolve(response)).content);
+    const contentType = chooseContentType(Object.keys(content));
+    if (contentType != null) return contentType;
+  }
+  return null;
+}
+
+function parseSpec(contents: string): unknown {
+  try {
+    return JSON.parse(contents);
+  } catch {
+    // Fall through to YAML.
+  }
+
+  try {
+    return YAML.parse(contents);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The spec requires string versions, but unquoted YAML like `swagger: 2.0`
+ * parses as a number and such documents are common enough to accept.
+ */
+function isOpenApiSpec(value: unknown): value is UnknownRecord {
+  const spec = toRecord(value);
+  const openapi = versionString(spec.openapi);
+  return isRecord(spec.paths) && (/^3(\.|$)/.test(openapi ?? "") || isSwagger2(spec));
+}
+
+function isSwagger2(spec: UnknownRecord): boolean {
+  const swagger = versionString(spec.swagger);
+  return swagger === "2.0" || swagger === "2";
+}
+
+function versionString(value: unknown): string | undefined {
+  if (typeof value === "string") return value;
+  if (typeof value === "number") return String(value);
+  return undefined;
+}
+
+function importInfoDescription(info: UnknownRecord): string | undefined {
+  const parts = [
+    stringAt(info, "description"),
+    stringAt(info, "termsOfService")
+      ? `Terms of service: ${stringAt(info, "termsOfService")}`
+      : null,
+    isRecord(info.contact) && stringAt(info.contact, "email")
+      ? `Contact: ${stringAt(info.contact, "email")}`
+      : null,
+    isRecord(info.license) && stringAt(info.license, "name")
+      ? `License: ${stringAt(info.license, "name")}${
+          stringAt(info.license, "url") ? ` (${stringAt(info.license, "url")})` : ""
+        }`
+      : null,
+  ].filter(isPresent);
+  return parts.length > 0 ? parts.join("\n\n") : undefined;
+}
+
+function importTagDescription(tag: UnknownRecord): string | undefined {
+  const externalDocs = toRecord(tag.externalDocs);
+  const parts = [
+    stringAt(tag, "description"),
+    stringAt(externalDocs, "url")
+      ? `${stringAt(externalDocs, "description") ?? "External docs"}: ${stringAt(externalDocs, "url")}`
+      : null,
+  ].filter(isPresent);
+  return parts.length > 0 ? parts.join("\n\n") : undefined;
+}
+
+function importOperationName(operation: UnknownRecord, method: string, path: string): string {
+  return (
+    stringAt(operation, "summary") ??
+    stringAt(operation, "operationId") ??
+    firstLine(stringAt(operation, "description")) ??
+    `${method.toUpperCase()} ${path}`
+  );
+}
+
+/**
+ * Some specs describe an operation without ever summarizing it, and the opening
+ * line is a far better name than the method and path. Paragraphs are left to the
+ * description, since a name that long is no easier to scan than the path.
+ */
+function firstLine(value: string | undefined): string | undefined {
+  const line = value
+    ?.split("\n")
+    .find((l) => l.trim().length > 0)
+    ?.trim();
+  if (line == null || line.length > MAX_NAME_LENGTH) return undefined;
+  return line;
+}
+
+function importOperationDescription({
+  importState,
+  operation,
+  parameters,
+  bodyContentType,
+}: {
+  importState: ImportState;
+  operation: UnknownRecord;
+  parameters: unknown[];
+  bodyContentType: string | null;
+}): string | undefined {
+  const parts: string[] = [];
+  const summary = stringAt(operation, "summary");
+  const description = stringAt(operation, "description");
+  const operationId = stringAt(operation, "operationId");
+
+  // Leads the description, since it changes whether the request should be used at all
+  if (operation.deprecated === true) {
+    parts.push("Deprecated.");
+  }
+
+  if (description != null) {
+    parts.push(description);
+  } else if (summary != null) {
+    parts.push(summary);
+  }
+
+  if (operationId != null) {
+    parts.push(`Operation ID: ${operationId}`);
+  }
+
+  const parameterDescriptions = parameters
+    .map((p) => importState.resolve(p))
+    .filter(isRecord)
+    .slice(0, MAX_DESCRIPTION_ITEMS)
+    .map((p) => {
+      const name = stringAt(p, "name") ?? "parameter";
+      const location = stringAt(p, "in") ?? "unknown";
+      const required = p.required === true ? ", required" : "";
+      const description = stringAt(p, "description");
+      return `- ${name} (${location}${required})${description ? `: ${description}` : ""}`;
+    });
+  if (parameterDescriptions.length > 0) {
+    parts.push(["Parameters:", ...parameterDescriptions].join("\n"));
+  }
+
+  const requestBody = importState.resolve(operation.requestBody);
+  if (isRecord(requestBody)) {
+    const content = toRecord(requestBody.content);
+    const contentTypes = Object.keys(content);
+    const bodyLines = [
+      stringAt(requestBody, "description"),
+      bodyContentType ? `Selected content type: ${bodyContentType}` : null,
+      contentTypes.length > 0 ? `Available content types: ${contentTypes.join(", ")}` : null,
+    ].filter(isPresent);
+    if (bodyLines.length > 0) {
+      parts.push(["Request body:", ...bodyLines].join("\n"));
+    }
+  }
+
+  const responseDescriptions = Object.entries(toRecord(operation.responses))
+    .slice(0, MAX_DESCRIPTION_ITEMS)
+    .map(([status, response]) => {
+      const responseRecord = toRecord(importState.resolve(response));
+      return `- ${status}: ${stringAt(responseRecord, "description") ?? ""}`.trimEnd();
+    });
+  if (responseDescriptions.length > 0) {
+    parts.push(["Responses:", ...responseDescriptions].join("\n"));
+  }
+
+  const externalDocs = toRecord(operation.externalDocs);
+  if (stringAt(externalDocs, "url")) {
+    parts.push(
+      `${stringAt(externalDocs, "description") ?? "External docs"}: ${stringAt(externalDocs, "url")}`,
+    );
+  }
+
+  // Without this the parts these refs describe just come out blank
+  const unresolvedRefs = importState.unresolvedRefs().slice(0, MAX_DESCRIPTION_ITEMS);
+  if (unresolvedRefs.length > 0) {
+    parts.push(
+      [
+        "Unresolved references (point outside this document, so the parts they describe were left empty):",
+        ...unresolvedRefs.map((ref) => `- ${ref}`),
+      ].join("\n"),
+    );
+  }
+
+  return parts.length > 0 ? parts.join("\n\n") : undefined;
+}
+
+function findOrCreateFolderId({
+  folderIdsByTag,
+  importState,
+  operation,
+  resources,
+  sourceKeys,
+  workspaceId,
+}: {
+  folderIdsByTag: Map<string, string>;
+  importState: ImportState;
+  operation: UnknownRecord;
+  resources: ImportResources;
+  sourceKeys: Record<string, string>;
+  workspaceId: string;
+}): string | null {
+  const tag = toArray(operation.tags).find((t): t is string => typeof t === "string");
+  if (tag == null) return null;
+
+  const existingFolderId = folderIdsByTag.get(tag);
+  if (existingFolderId != null) return existingFolderId;
+
+  const folder: ImportResources["folders"][0] = {
+    model: "folder",
+    id: importState.generateId("folder"),
+    workspaceId,
+    name: tag,
+    folderId: null,
+    sortPriority: importState.nextSortPriority(),
+  };
+  resources.folders.push(folder);
+  folderIdsByTag.set(tag, folder.id);
+  sourceKeys[folder.id] = tagSourceKey(tag);
+  return folder.id;
+}
+
+function operationSourceKey(operationId: string | undefined, method: string, path: string): string {
+  return operationId != null && operationId !== ""
+    ? `op:${operationId}`
+    : `route:${method.toUpperCase()} ${path}`;
+}
+
+function tagSourceKey(tag: string): string {
+  return `tag:${tag}`;
+}
+
+/**
+ * Yaak's `:name` placeholders only substitute when they span a whole path
+ * segment and hold a single plain value. Templates elsewhere in a segment
+ * (like `/report.{format}`), styled ones (label, matrix), and array or object
+ * values get their serialized example inlined instead — a placeholder row
+ * cannot express them, and its leftover parameter would leak into the query
+ * string.
+ */
+function buildOperationUrl(
+  baseUrl: string,
+  path: string,
+  parameters: unknown[],
+  importState: ImportState,
+): string {
+  let serializedPath = path;
+  for (const rawParameter of parameters) {
+    const parameter = importState.resolve(rawParameter);
+    if (!isRecord(parameter) || !shouldInlinePathParameter(parameter, importState, path)) continue;
+
+    const name = stringAt(parameter, "name") ?? "";
+    if (name.length === 0) continue;
+    const value = parameterExampleValue(parameter, importState);
+    const serialized = isRecord(parameter.content)
+      ? encodePathComponent(serializeContentParameter(parameter, importState))
+      : serializePathParameter(name, value, parameter, encodePathComponent);
+    // A missing example stays a visible template rather than vanishing
+    if (serialized.length === 0) continue;
+    serializedPath = serializedPath.replaceAll(`{${name}}`, serialized);
+  }
+  return joinUrlParts(baseUrl, serializedPath.replaceAll(/(^|\/){([^}/]+)}(?=[/?#:]|$)/g, "$1:$2"));
+}
+
+function shouldInlinePathParameter(
+  parameter: UnknownRecord,
+  importState: ImportState,
+  path: string,
+): boolean {
+  if (stringAt(parameter, "in") !== "path") return false;
+  const name = stringAt(parameter, "name") ?? "";
+  const template = `{${name}}`;
+  const matchingSegments = path.split("/").filter((segment) => segment.includes(template));
+  // A `:name` placeholder matches from the segment start up to a literal `:`,
+  // so `{id}` and `{id}:cancel` stay placeholders while `report.{format}` can't
+  const placeholderExpressible = matchingSegments.every(
+    (segment) =>
+      segment === template || (segment.startsWith(template) && segment[template.length] === ":"),
+  );
+  if (matchingSegments.length === 0 || !placeholderExpressible) return true;
+  if (isRecord(parameter.content)) return false;
+  const value = parameterExampleValue(parameter, importState);
+  const style = stringAt(parameter, "style");
+  return style === "label" || style === "matrix" || Array.isArray(value) || isRecord(value);
+}
+
+function encodePathComponent(value: unknown): string {
+  return encodeURIComponent(stringifyExampleValue(value)).replace(
+    /[!'()*]/g,
+    (character) => `%${character.charCodeAt(0).toString(16).toUpperCase()}`,
+  );
+}
+
+function importBaseUrl(spec: UnknownRecord): string {
+  const openApiServer = toArray(spec.servers)
+    .map((s) => toRecord(s))
+    .map((s) => interpolateServerUrl(s))
+    .find((url) => url.length > 0);
+  if (openApiServer != null) return openApiServer;
+
+  const host = stringAt(spec, "host");
+  if (host == null) return stringAt(spec, "basePath") ?? "";
+
+  const scheme = toArray(spec.schemes).find((s): s is string => typeof s === "string") ?? "https";
+  return trimTrailingSlashes(joinUrlParts(`${scheme}://${host}`, stringAt(spec, "basePath") ?? ""));
+}
+
+function importServerEnvironments(spec: UnknownRecord): { name: string; url: string }[] {
+  const servers = toArray(spec.servers)
+    .map(toRecord)
+    .map((server, index) => ({
+      name: stringAt(server, "description")?.trim() || `Server ${index + 1}`,
+      url: interpolateServerUrl(server),
+    }))
+    .filter(({ url }) => url.length > 0);
+  if (servers.length === 0) {
+    const hasSwaggerServer =
+      isSwagger2(spec) && (stringAt(spec, "host") != null || stringAt(spec, "basePath") != null);
+    return [
+      {
+        name: hasSwaggerServer ? "Server 1" : "Default",
+        url: hasSwaggerServer ? importBaseUrl(spec) : "",
+      },
+    ];
+  }
+
+  const nameCounts = new Map<string, number>();
+  return servers.map((server) => {
+    const count = (nameCounts.get(server.name) ?? 0) + 1;
+    nameCounts.set(server.name, count);
+    return { ...server, name: count === 1 ? server.name : `${server.name} ${count}` };
+  });
+}
+
+function serverUrlOrigin(value: string): string {
+  try {
+    const origin = new URL(value).origin;
+    return origin === "null" ? "" : origin;
+  } catch {
+    if (!value.startsWith("//")) return "";
+    try {
+      return `//${new URL(`https:${value}`).host}`;
+    } catch {
+      return "";
+    }
+  }
+}
+
+/**
+ * Request URLs are `${[baseUrl]}/path`, so a trailing slash here would put a
+ * double slash on the wire. Trimming also turns a bare `/` server into "",
+ * which renders the same URLs without a protocol-relative `//path`.
+ */
+function interpolateServerUrl(server: UnknownRecord): string {
+  let url = stringAt(server, "url") ?? "";
+  for (const [name, variable] of Object.entries(toRecord(server.variables))) {
+    url = url.replaceAll(`{${name}}`, stringifyExampleValue(toRecord(variable).default));
+  }
+  return trimTrailingSlashes(url);
+}
+
+function joinUrlParts(baseUrl: string, path: string): string {
+  if (baseUrl.length === 0) return path;
+  return `${trimTrailingSlashes(baseUrl)}/${trimLeadingSlashes(path)}`;
+}
+
+function trimLeadingSlashes(value: string): string {
+  let index = 0;
+  while (value[index] === "/") index++;
+  return value.slice(index);
+}
+
+function trimTrailingSlashes(value: string): string {
+  let index = value.length;
+  while (value[index - 1] === "/") index--;
+  return value.slice(0, index);
+}
+
+function importUrlParameters({
+  importState,
+  parameters,
+  path,
+}: {
+  importState: ImportState;
+  parameters: unknown[];
+  path: string;
+}): HttpUrlParameter[] {
+  return parameters
+    .map((p) => importState.resolve(p))
+    .filter(isRecord)
+    .filter((p) => stringAt(p, "in") === "query" || stringAt(p, "in") === "path")
+    .flatMap((p) => serializeUrlParameter(p, importState, path))
+    .filter(({ name }) => name.length > 0);
+}
+
+function serializeUrlParameter(
+  parameter: UnknownRecord,
+  importState: ImportState,
+  path: string,
+): HttpUrlParameter[] {
+  const name = stringAt(parameter, "name") ?? "";
+  const location = stringAt(parameter, "in");
+  // Path parameters are required by definition, and a disabled one would
+  // leave the literal `:name` in the sent URL even for sloppy specs that
+  // omit `required: true`
+  const enabled = parameter.required === true || location === "path";
+  const value = parameterExampleValue(parameter, importState);
+  if (isRecord(parameter.content)) {
+    return [
+      {
+        enabled,
+        name: location === "path" ? `:${name}` : name,
+        value: serializeContentParameter(parameter, importState),
+      },
+    ];
+  }
+  if (location === "path") {
+    if (shouldInlinePathParameter(parameter, importState, path)) return [];
+    const serialized = serializePathParameter(name, value, parameter);
+    // An empty path segment makes a URL that matches nothing, so the name at
+    // least keeps the request sendable and shows what belongs there
+    return [{ enabled, name: `:${name}`, value: serialized.length > 0 ? serialized : name }];
+  }
+
+  if (isRecord(value)) {
+    const entries = Object.entries(value);
+    const style = stringAt(parameter, "style") ?? "form";
+    const explode = parameter.explode !== false;
+    if (style === "deepObject") {
+      return entries.map(([key, entryValue]) => ({
+        enabled,
+        name: `${name}[${key}]`,
+        value: stringifyExampleValue(entryValue),
+      }));
+    }
+    if (style === "form" && explode) {
+      return entries.map(([key, entryValue]) => ({
+        enabled,
+        name: key,
+        value: stringifyExampleValue(entryValue),
+      }));
+    }
+    const separator = style === "spaceDelimited" ? " " : style === "pipeDelimited" ? "|" : ",";
+    return [{ enabled, name, value: entries.flat().map(stringifyExampleValue).join(separator) }];
+  }
+
+  if (Array.isArray(value)) {
+    const { separator } = queryArraySerialization(parameter);
+    if (separator == null) {
+      return value.map((entryValue) => ({
+        enabled,
+        name,
+        value: stringifyExampleValue(entryValue),
+      }));
+    }
+    return [{ enabled, name, value: value.map(stringifyExampleValue).join(separator) }];
+  }
+
+  return [{ enabled, name, value: stringifyExampleValue(value) }];
+}
+
+/**
+ * OpenAPI 3 query arrays default to form/explode, one parameter per item;
+ * Swagger 2 defaults to comma-separated unless collectionFormat says otherwise.
+ * A null separator means repeated parameters.
+ */
+function queryArraySerialization(parameter: UnknownRecord): { separator: string | null } {
+  const collectionFormat = stringAt(parameter, "collectionFormat");
+  if (collectionFormat != null || parameter.schema == null) {
+    if (collectionFormat === "multi") return { separator: null };
+    return {
+      separator: { csv: ",", ssv: " ", tsv: "\t", pipes: "|" }[collectionFormat ?? "csv"] ?? ",",
+    };
+  }
+  const style = stringAt(parameter, "style");
+  if (style === "spaceDelimited") return { separator: " " };
+  if (style === "pipeDelimited") return { separator: "|" };
+  return parameter.explode === false ? { separator: "," } : { separator: null };
+}
+
+// The spec says header parameters with these names SHALL be ignored; Accept and
+// Content-Type come from the operation's media types, Authorization from its
+// security requirements
+const IGNORED_HEADER_PARAMETERS = new Set(["accept", "authorization", "content-type"]);
+
+function importHeaderParameters({
+  importState,
+  parameters,
+}: {
+  importState: ImportState;
+  parameters: unknown[];
+}): HttpRequestHeader[] {
+  return parameters
+    .map((p) => importState.resolve(p))
+    .filter(isRecord)
+    .filter((p) => stringAt(p, "in") === "header")
+    .filter((p) => !IGNORED_HEADER_PARAMETERS.has((stringAt(p, "name") ?? "").toLowerCase()))
+    .map((p) => ({
+      enabled: p.required === true,
+      name: stringAt(p, "name") ?? "",
+      value: serializeParameterValue(p, importState),
+    }))
+    .filter(({ name }) => name.length > 0);
+}
+
+/**
+ * Yaak has no cookie parameter row, so each cookie parameter becomes its own
+ * Cookie header. Rows stay individually toggleable and the send path merges
+ * the enabled ones into a single header.
+ */
+function importCookieHeader({
+  importState,
+  parameters,
+}: {
+  importState: ImportState;
+  parameters: unknown[];
+}): HttpRequestHeader[] {
+  return parameters
+    .map((p) => importState.resolve(p))
+    .filter(isRecord)
+    .filter((p) => stringAt(p, "in") === "cookie")
+    .map((p) => ({
+      enabled: p.required === true,
+      name: "Cookie",
+      value: serializeCookieParameter(p, importState),
+    }))
+    .filter(({ value }) => value.length > 0);
+}
+
+function serializeCookieParameter(parameter: UnknownRecord, importState: ImportState): string {
+  const name = stringAt(parameter, "name") ?? "";
+  if (name.length === 0) return "";
+  if (isRecord(parameter.content)) {
+    return `${name}=${serializeContentParameter(parameter, importState)}`;
+  }
+
+  const value = parameterExampleValue(parameter, importState);
+  const explode = parameter.explode !== false;
+  // Exploded pairs are cookie pairs, which RFC 6265 separates with "; "
+  if (Array.isArray(value)) {
+    return explode
+      ? value.map((entryValue) => `${name}=${stringifyExampleValue(entryValue)}`).join("; ")
+      : `${name}=${value.map(stringifyExampleValue).join(",")}`;
+  }
+  if (isRecord(value)) {
+    const entries = Object.entries(value);
+    return explode
+      ? entries.map(([key, entryValue]) => `${key}=${stringifyExampleValue(entryValue)}`).join("; ")
+      : `${name}=${entries.flat().map(stringifyExampleValue).join(",")}`;
+  }
+  return `${name}=${stringifyExampleValue(value)}`;
+}
+
+function serializeParameterValue(parameter: UnknownRecord, importState: ImportState): string {
+  if (isRecord(parameter.content)) return serializeContentParameter(parameter, importState);
+  return serializeSimpleParameter(parameterExampleValue(parameter, importState), parameter);
+}
+
+/** A parameter described by a media type serializes as that media type */
+function serializeContentParameter(parameter: UnknownRecord, importState: ImportState): string {
+  const [contentType, rawMediaType] = Object.entries(toRecord(parameter.content))[0] ?? [];
+  const value = mediaTypeExample(toRecord(rawMediaType), importState);
+  return contentType?.toLowerCase().includes("json")
+    ? (JSON.stringify(value) ?? "")
+    : stringifyExampleValue(value);
+}
+
+function serializePathParameter(
+  name: string,
+  value: unknown,
+  parameter: UnknownRecord,
+  serializeValue: (value: unknown) => string = stringifyExampleValue,
+): string {
+  const style = stringAt(parameter, "style") ?? "simple";
+  const explode = parameter.explode === true;
+  const values = Array.isArray(value)
+    ? value.map(serializeValue)
+    : isRecord(value)
+      ? Object.entries(value).flatMap(([key, entryValue]) => [
+          serializeValue(key),
+          serializeValue(entryValue),
+        ])
+      : [serializeValue(value)];
+
+  if (style === "label") {
+    if (explode && isRecord(value)) {
+      return `.${Object.entries(value)
+        .map(([key, entryValue]) => `${serializeValue(key)}=${serializeValue(entryValue)}`)
+        .join(".")}`;
+    }
+    return `.${values.join(explode ? "." : ",")}`;
+  }
+  if (style === "matrix") {
+    if (explode && Array.isArray(value)) {
+      return value.map((entryValue) => `;${name}=${serializeValue(entryValue)}`).join("");
+    }
+    if (explode && isRecord(value)) {
+      return Object.entries(value)
+        .map(([key, entryValue]) => `;${serializeValue(key)}=${serializeValue(entryValue)}`)
+        .join("");
+    }
+    return `;${name}=${values.join(",")}`;
+  }
+  return serializeSimpleParameter(value, parameter, serializeValue);
+}
+
+function serializeSimpleParameter(
+  value: unknown,
+  parameter: UnknownRecord,
+  serializeValue: (value: unknown) => string = stringifyExampleValue,
+): string {
+  if (Array.isArray(value)) return value.map(serializeValue).join(",");
+  if (isRecord(value)) {
+    const entries = Object.entries(value);
+    return parameter.explode === true
+      ? entries
+          .map(([key, entryValue]) => `${serializeValue(key)}=${serializeValue(entryValue)}`)
+          .join(",")
+      : entries.flat().map(serializeValue).join(",");
+  }
+  return serializeValue(value);
+}
+
+function parameterExampleValue(parameter: UnknownRecord, importState: ImportState): unknown {
+  const directExample = firstPresent(
+    parameter.example,
+    firstExampleValue(parameter.examples, importState),
+  );
+  if (directExample != null) return directExample;
+  if (isRecord(parameter.content)) {
+    const mediaType = toRecord(Object.values(parameter.content)[0]);
+    return mediaTypeExample(mediaType, importState);
+  }
+  // Swagger 2 parameters carry the schema keywords (type, items, default)
+  // directly on the parameter object
+  return schemaToExample(parameter.schema ?? parameter, importState);
+}
+
+function parameterExample(parameter: UnknownRecord, importState: ImportState): string {
+  return serializeSimpleParameter(parameterExampleValue(parameter, importState), parameter);
+}
+
+function importBody({
+  importState,
+  operation,
+  parameters,
+  spec,
+}: {
+  importState: ImportState;
+  operation: UnknownRecord;
+  parameters: unknown[];
+  spec: UnknownRecord;
+}): {
+  headers: HttpRequestHeader[];
+  body: Record<string, unknown>;
+  bodyType: string | null;
+} {
+  const openApiRequestBody = importState.resolve(operation.requestBody);
+  if (isRecord(openApiRequestBody)) {
+    return importBodyFromContent(importState, toRecord(openApiRequestBody.content));
+  }
+
+  const bodyParameter = parameters
+    .map((p) => importState.resolve(p))
+    .find((p) => isRecord(p) && stringAt(p, "in") === "body");
+  if (isRecord(bodyParameter)) {
+    const contentType =
+      toArray(operation.consumes ?? spec.consumes).find(
+        (c): c is string => typeof c === "string",
+      ) ?? "application/json";
+    const schema = importState.resolveSchema(bodyParameter.schema);
+    const isBinary = stringAt(schema, "format") === "binary";
+    return {
+      headers: [{ enabled: true, name: "Content-Type", value: contentType }],
+      bodyType: isBinary ? "binary" : yaakBodyType(contentType),
+      body: isBinary
+        ? {}
+        : {
+            text: formatMediaTypeBody(
+              contentType,
+              schemaToExample(schema, importState),
+              schema,
+              importState,
+            ),
+          },
+    };
+  }
+
+  const formParameters = parameters
+    .map((p) => importState.resolve(p))
+    .filter(isRecord)
+    .filter((p) => stringAt(p, "in") === "formData");
+  if (formParameters.length > 0) {
+    const contentType =
+      toArray(operation.consumes ?? spec.consumes).find(
+        (c): c is string => typeof c === "string",
+      ) ??
+      (formParameters.some((p) => stringAt(p, "type") === "file")
+        ? "multipart/form-data"
+        : "application/x-www-form-urlencoded");
+    return {
+      headers: [{ enabled: true, name: "Content-Type", value: contentType }],
+      bodyType: contentType,
+      body: {
+        form: formParameters.map((p) => {
+          const base = {
+            enabled: p.required === true,
+            name: stringAt(p, "name") ?? "",
+          };
+          return stringAt(p, "type") === "file"
+            ? { ...base, file: "" }
+            : { ...base, value: parameterExample(p, importState) };
+        }),
+      },
+    };
+  }
+
+  return { headers: [], body: {}, bodyType: null };
+}
+
+function importBodyFromContent(importState: ImportState, content: UnknownRecord) {
+  const contentType = chooseContentType(Object.keys(content));
+  if (contentType == null) return { headers: [], body: {}, bodyType: null };
+
+  const mediaType = toRecord(content[contentType]);
+  const bodyType = yaakBodyType(contentType);
+
+  if (bodyType === "application/x-www-form-urlencoded" || bodyType === "multipart/form-data") {
+    const example = mediaTypeExample(mediaType, importState);
+    return {
+      headers: [{ enabled: true, name: "Content-Type", value: contentType }],
+      bodyType,
+      body: {
+        form: schemaToFormParameters(
+          mediaType.schema,
+          importState,
+          isRecord(example) ? example : undefined,
+        ),
+      },
+    };
+  }
+
+  const schema = importState.resolveSchema(mediaType.schema);
+  const isBinary = bodyType === "binary" || stringAt(schema, "format") === "binary";
+
+  return {
+    headers: [{ enabled: true, name: "Content-Type", value: contentType }],
+    bodyType: isBinary ? "binary" : bodyType,
+    body: isBinary
+      ? {}
+      : {
+          text: formatMediaTypeBody(
+            contentType,
+            mediaTypeExample(mediaType, importState),
+            schema,
+            importState,
+          ),
+        },
+  };
+}
+
+function chooseContentType(contentTypes: string[]): string | null {
+  const jsonType = contentTypes.find((contentType) => mediaTypeOf(contentType).endsWith("+json"));
+  for (const preference of BODY_CONTENT_TYPE_PREFERENCE) {
+    const exact = contentTypes.find((c) => mediaTypeOf(c) === preference);
+    if (exact != null) return exact;
+    // A +json suffix type ranks with JSON, ahead of the other preferences
+    if (preference === "application/json" && jsonType != null) return jsonType;
+  }
+  return contentTypes[0] ?? null;
+}
+
+function formatMediaTypeBody(
+  contentType: string,
+  example: unknown,
+  schema: unknown,
+  importState: ImportState,
+): string {
+  const mediaType = mediaTypeOf(contentType);
+  if (mediaType === "application/xml" || mediaType === "text/xml" || mediaType.endsWith("+xml")) {
+    return typeof example === "string"
+      ? example
+      : valueToXml(example, schema, importState, "root", true);
+  }
+  if (mediaType === "application/json" || mediaType.endsWith("+json")) {
+    // A string example may be pre-serialized JSON; otherwise it needs quoting
+    // to be a valid JSON document
+    if (typeof example === "string") {
+      try {
+        JSON.parse(example);
+        return example;
+      } catch {
+        return JSON.stringify(example);
+      }
+    }
+    return JSON.stringify(example, null, 2) ?? "";
+  }
+  return formatBodyText(example);
+}
+
+function valueToXml(
+  value: unknown,
+  schema: unknown,
+  importState: ImportState,
+  elementName: string,
+  isDocumentRoot = false,
+): string {
+  const resolvedSchema = toRecord(importState.resolveSchema(schema));
+  const schemaXml = toRecord(resolvedSchema.xml);
+  if (Array.isArray(value)) {
+    const itemSchema = importState.resolveSchema(resolvedSchema.items);
+    const shouldWrap = schemaXml.wrapped === true || isDocumentRoot;
+    const itemName =
+      stringAt(toRecord(itemSchema).xml, "name") ??
+      (shouldWrap ? (stringAt(schemaXml, "name") ?? elementName) : elementName);
+    const items = value.map((item) => valueToXml(item, itemSchema, importState, itemName)).join("");
+    return shouldWrap ? xmlElement(elementName, schemaXml, items) : items;
+  }
+  if (isRecord(value)) {
+    const properties = toRecord(resolvedSchema.properties);
+    const entries = Object.entries(value).map(([name, propertyValue]) => {
+      const propertySchema = toRecord(importState.resolveSchema(properties[name]));
+      return { name, propertyValue, propertySchema, xml: toRecord(propertySchema.xml) };
+    });
+    const usedPrefixes = new Set(["xml", "xmlns"]);
+    const prefixesByNamespace = new Map<string, string>();
+    for (const xml of [schemaXml, ...entries.map(({ xml }) => xml)]) {
+      const namespace = stringAt(xml, "namespace");
+      const prefix = stringAt(xml, "prefix");
+      if (prefix == null || prefix.length === 0) continue;
+      usedPrefixes.add(prefix);
+      if (namespace != null && namespace.length > 0 && !prefixesByNamespace.has(namespace)) {
+        prefixesByNamespace.set(namespace, prefix);
+      }
+    }
+    const attributes: string[] = [];
+    const attributeNamespaces: UnknownRecord[] = [];
+    const children: string[] = [];
+    for (const { name, propertyValue, propertySchema, xml } of entries) {
+      if (xml.attribute === true) {
+        const attributeXml = qualifyXmlAttribute(xml, usedPrefixes, prefixesByNamespace);
+        attributes.push(
+          `${qualifiedXmlName(name, attributeXml)}="${escapeXml(stringifyExampleValue(propertyValue))}"`,
+        );
+        attributeNamespaces.push(attributeXml);
+      } else {
+        children.push(valueToXml(propertyValue, propertySchema, importState, name));
+      }
+    }
+    return xmlElement(elementName, schemaXml, children.join(""), attributes, attributeNamespaces);
+  }
+  return xmlElement(elementName, schemaXml, escapeXml(stringifyExampleValue(value)));
+}
+
+function xmlElement(
+  fallbackName: string,
+  xml: UnknownRecord,
+  content: string,
+  attributes: string[] = [],
+  additionalNamespaces: UnknownRecord[] = [],
+): string {
+  const name = qualifiedXmlName(fallbackName, xml);
+  const namespaces = new Map<string, string>();
+  for (const metadata of [xml, ...additionalNamespaces]) {
+    const namespace = stringAt(metadata, "namespace");
+    if (namespace == null || namespace.length === 0) continue;
+    const prefix = stringAt(metadata, "prefix");
+    namespaces.set(prefix == null || prefix.length === 0 ? "xmlns" : `xmlns:${prefix}`, namespace);
+  }
+  const namespaceAttributes = [...namespaces].map(
+    ([attribute, namespace]) => `${attribute}="${escapeXml(namespace)}"`,
+  );
+  const attributeText = [...namespaceAttributes, ...attributes].join(" ");
+  const openingTag = attributeText.length > 0 ? `<${name} ${attributeText}>` : `<${name}>`;
+  return `${openingTag}${content}</${name}>`;
+}
+
+function qualifyXmlAttribute(
+  xml: UnknownRecord,
+  usedPrefixes: Set<string>,
+  prefixesByNamespace: Map<string, string>,
+): UnknownRecord {
+  const namespace = stringAt(xml, "namespace");
+  const declaredPrefix = stringAt(xml, "prefix");
+  if (namespace != null && namespace.length === 0) {
+    const { prefix: _prefix, ...unqualifiedXml } = xml;
+    return unqualifiedXml;
+  }
+  if (namespace == null || (declaredPrefix != null && declaredPrefix.length > 0)) return xml;
+
+  // Namespaced attributes need a prefix to be well-formed, so reuse the
+  // namespace's existing prefix or mint one
+  const existingPrefix = prefixesByNamespace.get(namespace);
+  if (existingPrefix != null) return { ...xml, prefix: existingPrefix };
+
+  let suffix = 1;
+  while (usedPrefixes.has(`ns${suffix}`)) suffix++;
+  const generatedPrefix = `ns${suffix}`;
+  usedPrefixes.add(generatedPrefix);
+  prefixesByNamespace.set(namespace, generatedPrefix);
+  return { ...xml, prefix: generatedPrefix };
+}
+
+function qualifiedXmlName(fallbackName: string, xml: UnknownRecord): string {
+  const name = stringAt(xml, "name") ?? fallbackName;
+  const prefix = stringAt(xml, "prefix");
+  return prefix == null || prefix.length === 0 ? name : `${prefix}:${name}`;
+}
+
+function escapeXml(value: string): string {
+  return value
+    .replaceAll("&", "&")
+    .replaceAll("<", "<")
+    .replaceAll(">", ">")
+    .replaceAll('"', """)
+    .replaceAll("'", "'");
+}
+
+function mediaTypeOf(contentType: string): string {
+  return contentType.toLowerCase().split(";")[0]?.trim() ?? "";
+}
+
+/**
+ * Yaak's body editors key off a fixed set of body types, while the Content-Type
+ * header keeps the spec's exact media type. Anything unrecognized becomes
+ * "other", the app's plain-text body with an explicit Content-Type.
+ */
+function yaakBodyType(contentType: string): string {
+  const mediaType = mediaTypeOf(contentType);
+  if (mediaType === "application/json" || mediaType.endsWith("+json")) return "application/json";
+  if (mediaType === "application/xml" || mediaType === "text/xml" || mediaType.endsWith("+xml")) {
+    return "text/xml";
+  }
+  if (mediaType === "application/x-www-form-urlencoded" || mediaType === "multipart/form-data") {
+    return mediaType;
+  }
+  if (mediaType === "application/octet-stream") return "binary";
+  return "other";
+}
+
+function mediaTypeExample(mediaType: UnknownRecord, importState: ImportState): unknown {
+  const directExample = firstPresent(
+    mediaType.example,
+    firstExampleValue(mediaType.examples, importState),
+  );
+  if (directExample != null) return directExample;
+  return schemaToExample(mediaType.schema, importState);
+}
+
+function schemaToFormParameters(
+  schema: unknown,
+  importState: ImportState,
+  example?: UnknownRecord,
+) {
+  const resolvedSchema = toRecord(importState.resolveSchema(schema));
+  const required = toArray(resolvedSchema.required).filter(
+    (name): name is string => typeof name === "string",
+  );
+  const properties = Object.entries(toRecord(resolvedSchema.properties))
+    .filter(([, property]) => toRecord(importState.resolveSchema(property)).readOnly !== true)
+    .slice(0, MAX_EXAMPLE_PROPERTIES);
+
+  return properties.map(([name, property]) => {
+    const resolvedProperty = toRecord(importState.resolveSchema(property));
+    const propertyExample = example?.[name] ?? schemaToExample(resolvedProperty, importState);
+    const base = {
+      enabled: required.includes(name),
+      name,
+    };
+    if (stringAt(resolvedProperty, "format") === "binary") {
+      return { ...base, file: "" };
+    }
+    return { ...base, value: stringifyExampleValue(propertyExample) };
+  });
+}
+
+function schemaToExample(
+  schema: unknown,
+  importState: ImportState,
+  depth = 0,
+  visitedRefs = new Set<string>(),
+): unknown {
+  if (depth > MAX_EXAMPLE_DEPTH) return {};
+
+  const schemaRecord = toRecord(schema);
+  const ref = stringAt(schemaRecord, "$ref");
+  const closesReferenceCycle = ref != null && visitedRefs.has(ref);
+  const nextVisitedRefs = new Set(visitedRefs);
+  if (ref != null) nextVisitedRefs.add(ref);
+
+  const resolved = importState.resolveSchema(schema, visitedRefs);
+  if (!isRecord(resolved)) return "";
+  if (closesReferenceCycle && Object.keys(resolved).length === 0) return {};
+
+  const explicitExample = firstPresent(
+    resolved.example,
+    firstExampleValue(resolved.examples, importState),
+    resolved.const,
+    resolved.default,
+  );
+  if (explicitExample != null) return coerceToDeclaredType(explicitExample, resolved);
+
+  const enumValues = toArray(resolved.enum);
+  if (enumValues.length > 0) return enumValues[0];
+
+  const propertyExample = schemaPropertiesToExample(resolved, importState, depth, nextVisitedRefs);
+  const allOf = toArray(resolved.allOf);
+  if (allOf.length > 0) {
+    const compositionExample = allOf.reduce<UnknownRecord>((merged, childSchema) => {
+      const childExample = schemaToExample(childSchema, importState, depth + 1, nextVisitedRefs);
+      return isRecord(childExample) ? mergeExampleRecords(merged, childExample) : merged;
+    }, {});
+    return mergeExampleRecords(compositionExample, propertyExample);
+  }
+
+  const oneOf = toArray(resolved.oneOf);
+  const anyOf = toArray(resolved.anyOf);
+  if (oneOf.length > 0 || anyOf.length > 0) {
+    const compositionExample = schemaToExample(
+      oneOf[0] ?? anyOf[0],
+      importState,
+      depth + 1,
+      nextVisitedRefs,
+    );
+    return Object.keys(propertyExample).length > 0
+      ? mergeExampleRecords(isRecord(compositionExample) ? compositionExample : {}, propertyExample)
+      : compositionExample;
+  }
+
+  const type = inferSchemaType(resolved);
+  if (type === "array") {
+    return [schemaToExample(resolved.items, importState, depth + 1, nextVisitedRefs)];
+  }
+  if (type === "object") return propertyExample;
+  if (type === "integer" || type === "number") return 0;
+  if (type === "boolean") return false;
+  return FORMAT_EXAMPLES[stringAt(resolved, "format") ?? ""] ?? "";
+}
+
+/** Request examples omit readOnly properties, which only appear in responses */
+function schemaPropertiesToExample(
+  schema: UnknownRecord,
+  importState: ImportState,
+  depth: number,
+  visitedRefs: Set<string>,
+): UnknownRecord {
+  const required = toArray(schema.required).filter(
+    (name): name is string => typeof name === "string",
+  );
+  const properties = Object.entries(toRecord(schema.properties))
+    .filter(([, property]) => toRecord(importState.resolveSchema(property)).readOnly !== true)
+    .sort(([a], [b]) => {
+      const aRequired = required.includes(a);
+      const bRequired = required.includes(b);
+      return aRequired === bRequired ? 0 : aRequired ? -1 : 1;
+    });
+
+  return Object.fromEntries(
+    properties
+      .slice(0, MAX_EXAMPLE_PROPERTIES)
+      .map(([name, property]) => [
+        name,
+        schemaToExample(property, importState, depth + 1, visitedRefs),
+      ]),
+  );
+}
+
+function mergeExampleRecords(base: UnknownRecord, overlay: UnknownRecord): UnknownRecord {
+  const merged = { ...base };
+  for (const [name, value] of Object.entries(overlay)) {
+    const baseValue = merged[name];
+    merged[name] =
+      isRecord(baseValue) && isRecord(value) ? mergeExampleRecords(baseValue, value) : value;
+  }
+  return merged;
+}
+
+const FORMAT_EXAMPLES: Record<string, string> = {
+  "date-time": "2026-01-01T00:00:00Z",
+  date: "2026-01-01",
+  email: "user@example.com",
+  hostname: "example.com",
+  ipv4: "127.0.0.1",
+  ipv6: "::1",
+  uri: "https://example.com",
+  url: "https://example.com",
+  uuid: "00000000-0000-0000-0000-000000000000",
+};
+
+/**
+ * YAML coerces unquoted scalars, so specs routinely carry `example: 12345` on a
+ * `type: string` field. Sending the number fails the spec's own schema, and the
+ * declared type is the author's stated intent.
+ */
+function coerceToDeclaredType(example: unknown, schema: UnknownRecord): unknown {
+  const rawType = schema.type;
+  const declared =
+    typeof rawType === "string"
+      ? rawType
+      : Array.isArray(rawType)
+        ? rawType.find((t) => t !== "null")
+        : null;
+
+  if (declared === "string" && (typeof example === "number" || typeof example === "boolean")) {
+    return String(example);
+  }
+  if (
+    (declared === "integer" || declared === "number") &&
+    typeof example === "string" &&
+    example.trim() !== "" &&
+    Number.isFinite(Number(example))
+  ) {
+    return Number(example);
+  }
+  return example;
+}
+
+function inferSchemaType(schema: UnknownRecord): string {
+  const rawType = schema.type;
+  if (typeof rawType === "string") return rawType;
+  if (Array.isArray(rawType)) {
+    const nonNullType = rawType.find((t) => t !== "null");
+    if (typeof nonNullType === "string") return nonNullType;
+  }
+  if (isRecord(schema.properties) || isRecord(schema.additionalProperties)) return "object";
+  if (schema.items != null) return "array";
+  return "string";
+}
+
+/**
+ * Security Requirement Objects are ordered alternatives, so the first one this
+ * importer can represent wins. That makes `[{bearer}, {}]` import the bearer
+ * auth the author listed first, while `[{}, {bearer}]` imports as anonymous.
+ */
+function importAuthentication({
+  authenticationVariables,
+  importState,
+  oauthVariablesByScheme,
+  security,
+  spec,
+  useDynamicServerUrls,
+}: {
+  authenticationVariables: AuthenticationVariableRegistry;
+  importState: ImportState;
+  oauthVariablesByScheme: Map<string, OAuthVariableNames>;
+  security: unknown;
+  spec: UnknownRecord;
+  useDynamicServerUrls: boolean;
+}): ImportedAuthentication {
+  if (!Array.isArray(security)) return emptyAuthentication();
+  if (security.length === 0) {
+    return { ...emptyAuthentication(), authenticationType: "none" };
+  }
+
+  const schemes = {
+    ...toRecord(toRecord(spec.components).securitySchemes),
+    ...toRecord(spec.securityDefinitions),
+  };
+  for (const rawRequirement of security) {
+    if (!isRecord(rawRequirement)) continue;
+    if (Object.keys(rawRequirement).length === 0) {
+      return { ...emptyAuthentication(), authenticationType: "none" };
+    }
+
+    const imported = importSecurityRequirement({
+      authenticationVariables,
+      importState,
+      oauthVariablesByScheme,
+      requirement: rawRequirement,
+      schemes,
+      spec,
+      useDynamicServerUrls,
+    });
+    if (imported != null) return imported;
+  }
+
+  // Declared security this importer cannot represent (e.g. mutualTLS alone)
+  // should not fall back to inheriting some other authentication
+  return { ...emptyAuthentication(), authenticationType: "none" };
+}
+
+function importSecurityRequirement({
+  authenticationVariables,
+  importState,
+  oauthVariablesByScheme,
+  requirement,
+  schemes,
+  spec,
+  useDynamicServerUrls,
+}: {
+  authenticationVariables: AuthenticationVariableRegistry;
+  importState: ImportState;
+  oauthVariablesByScheme: Map<string, OAuthVariableNames>;
+  requirement: UnknownRecord;
+  schemes: UnknownRecord;
+  spec: UnknownRecord;
+  useDynamicServerUrls: boolean;
+}): ImportedAuthentication | null {
+  const entries = Object.entries(requirement);
+  const headers: HttpRequestHeader[] = [];
+  const urlParameters: HttpUrlParameter[] = [];
+  let primaryAuthentication: Pick<HttpRequest, "authentication" | "authenticationType"> | null =
+    null;
+
+  for (const [schemeName, rawScopes] of entries) {
+    const scheme = toRecord(importState.resolve(schemes[schemeName]));
+    const type = stringAt(scheme, "type");
+    if (type === "apiKey") {
+      const variable = registerAuthenticationVariable(authenticationVariables, schemeName, "key");
+      if (entries.length === 1) {
+        primaryAuthentication = {
+          authenticationType: "apikey",
+          authentication: importApiKey(scheme, schemeName, variable),
+        };
+      } else {
+        materializeApiKey(scheme, schemeName, variable, headers, urlParameters);
+      }
+      continue;
+    }
+
+    let candidate: Pick<HttpRequest, "authentication" | "authenticationType"> | null = null;
+    if (type === "oauth2") {
+      candidate = importOAuth2(
+        scheme,
+        rawScopes,
+        importBaseUrl(spec),
+        oauthVariablesByScheme.get(schemeName) ?? {
+          clientId: "oauth_client_id",
+          clientSecret: "oauth_client_secret",
+          redirectUri: "oauth_redirect_uri",
+        },
+        useDynamicServerUrls,
+      );
+    } else if (type === "openIdConnect") {
+      const token = registerAuthenticationVariable(authenticationVariables, schemeName, "token");
+      candidate = {
+        authenticationType: "bearer",
+        authentication: { token: templateVariable(token), prefix: "Bearer" },
+      };
+    } else if (type === "basic" || (type === "http" && schemeIs(scheme, "basic"))) {
+      const username = registerAuthenticationVariable(
+        authenticationVariables,
+        schemeName,
+        "username",
+      );
+      const password = registerAuthenticationVariable(
+        authenticationVariables,
+        schemeName,
+        "password",
+      );
+      candidate = {
+        authenticationType: "basic",
+        authentication: {
+          username: templateVariable(username),
+          password: templateVariable(password),
+        },
+      };
+    } else if (type === "http" && schemeIs(scheme, "bearer")) {
+      const token = registerAuthenticationVariable(authenticationVariables, schemeName, "token");
+      candidate = {
+        authenticationType: "bearer",
+        authentication: { token: templateVariable(token), prefix: "Bearer" },
+      };
+    }
+
+    // A requirement is an AND. Yaak can combine one auth plugin with explicit
+    // API-key parameters, but cannot represent two auth plugins on one request.
+    if (candidate == null || primaryAuthentication != null) return null;
+    primaryAuthentication = candidate;
+  }
+
+  return {
+    ...(primaryAuthentication ?? {
+      authenticationType: entries.length > 1 ? "none" : null,
+      authentication: {},
+    }),
+    headers,
+    urlParameters,
+  };
+}
+
+function emptyAuthentication(): ImportedAuthentication {
+  return {
+    authenticationType: null,
+    authentication: {},
+    headers: [],
+    urlParameters: [],
+  };
+}
+
+function schemeIs(scheme: UnknownRecord, name: string): boolean {
+  return stringAt(scheme, "scheme")?.toLowerCase() === name;
+}
+
+/**
+ * The API key auth plugin can only write a header or a query parameter, so a
+ * cookie key becomes the Cookie header it would have ended up in, pre-filled
+ * with its name. Sending it as a header named after the cookie would just fail.
+ */
+function importApiKey(
+  scheme: UnknownRecord,
+  schemeName: string,
+  variableName: string,
+): Record<string, string> {
+  const key = stringAt(scheme, "name") ?? schemeName;
+  const location = stringAt(scheme, "in");
+  const value = templateVariable(variableName);
+
+  if (location === "cookie") {
+    return { location: "header", key: "Cookie", value: `${key}=${value}` };
+  }
+  return { location: location === "query" ? "query" : "header", key, value };
+}
+
+function materializeApiKey(
+  scheme: UnknownRecord,
+  schemeName: string,
+  variableName: string,
+  headers: HttpRequestHeader[],
+  urlParameters: HttpUrlParameter[],
+): void {
+  const key = stringAt(scheme, "name") ?? schemeName;
+  const location = stringAt(scheme, "in");
+  const value = templateVariable(variableName);
+  if (location === "query") {
+    urlParameters.push({ enabled: true, name: key, value });
+  } else if (location === "cookie") {
+    headers.push({ enabled: true, name: "Cookie", value: `${key}=${value}` });
+  } else {
+    headers.push({ enabled: true, name: key, value });
+  }
+}
+
+function registerAuthenticationVariable(
+  variables: AuthenticationVariableRegistry,
+  schemeName: string,
+  field: string,
+): string {
+  const identity = JSON.stringify([schemeName, field]);
+  const existing = variables.get(identity);
+  if (existing != null) return existing.name;
+
+  const schemePart = schemeName
+    .replaceAll(/([a-z0-9])([A-Z])/g, "$1_$2")
+    .replaceAll(/[^a-zA-Z0-9]+/g, "_")
+    .replaceAll(/^_+|_+$/g, "")
+    .toLowerCase();
+  const baseName = `auth_${schemePart || "security"}_${field}`;
+  let name = baseName;
+  let suffix = 2;
+  const names = new Set([...variables.values()].map((variable) => variable.name));
+  while (names.has(name)) {
+    name = `${baseName}_${suffix++}`;
+  }
+  variables.set(identity, { name, value: "" });
+  return name;
+}
+
+function templateVariable(name: string): string {
+  return `\${[${name}]}`;
+}
+
+/**
+ * Maps an OpenAPI 3.x `flows` object or a Swagger 2.0 `flow` string onto the
+ * grant types the OAuth 2.0 auth plugin understands. Returns null when the
+ * scheme declares no flow this importer can map, so the caller keeps looking.
+ */
+function importOAuth2(
+  scheme: UnknownRecord,
+  rawScopes: unknown,
+  baseUrl: string,
+  variableNames: OAuthVariableNames,
+  useDynamicServerUrls: boolean,
+): Pick<HttpRequest, "authentication" | "authenticationType"> | null {
+  const scope = toArray(rawScopes)
+    .filter((s): s is string => typeof s === "string")
+    .join(" ");
+
+  const flows = toRecord(scheme.flows);
+  const swagger2Flow = stringAt(scheme, "flow");
+  const candidates: { grantType: string; flow: UnknownRecord }[] = [
+    { grantType: "authorization_code", flow: toRecord(flows.authorizationCode) },
+    { grantType: "client_credentials", flow: toRecord(flows.clientCredentials) },
+    { grantType: "password", flow: toRecord(flows.password) },
+    { grantType: "implicit", flow: toRecord(flows.implicit) },
+  ];
+
+  // Swagger 2.0 puts the URLs on the scheme itself and names the flow differently
+  if (swagger2Flow != null) {
+    const grantType = {
+      accessCode: "authorization_code",
+      application: "client_credentials",
+      implicit: "implicit",
+      password: "password",
+    }[swagger2Flow];
+    if (grantType == null) return null;
+    candidates.unshift({ grantType, flow: scheme });
+  }
+
+  for (const { grantType, flow } of candidates) {
+    const authorizationUrl = resolveOAuthUrl(
+      stringAt(flow, "authorizationUrl"),
+      baseUrl,
+      useDynamicServerUrls,
+    );
+    const accessTokenUrl = resolveOAuthUrl(
+      stringAt(flow, "tokenUrl"),
+      baseUrl,
+      useDynamicServerUrls,
+    );
+    if (authorizationUrl == null && accessTokenUrl == null) continue;
+
+    const grantPatch =
+      grantType === "authorization_code"
+        ? {
+            authorizationUrl,
+            accessTokenUrl,
+            clientSecret: templateVariable(variableNames.clientSecret),
+            redirectUri: templateVariable(variableNames.redirectUri),
+          }
+        : grantType === "implicit"
+          ? {
+              authorizationUrl,
+              redirectUri: templateVariable(variableNames.redirectUri),
+            }
+          : grantType === "password"
+            ? {
+                accessTokenUrl,
+                clientSecret: templateVariable(variableNames.clientSecret),
+                username: "",
+                password: "",
+              }
+            : {
+                accessTokenUrl,
+                clientSecret: templateVariable(variableNames.clientSecret),
+              };
+
+    return {
+      authenticationType: "oauth2",
+      authentication: {
+        grantType,
+        clientId: templateVariable(variableNames.clientId),
+        headerPrefix: "Bearer",
+        ...(scope.length > 0 ? { scope } : {}),
+        ...grantPatch,
+      },
+    };
+  }
+
+  return null;
+}
+
+function resolveOAuthUrl(
+  value: string | undefined,
+  baseUrl: string,
+  useDynamicServerUrls: boolean,
+): string | undefined {
+  if (value == null) return undefined;
+  try {
+    return new URL(value).toString();
+  } catch {
+    // Relative endpoint; resolve it against the API base below.
+  }
+
+  if (value.startsWith("//")) return value;
+  if (useDynamicServerUrls) {
+    return value.startsWith("/")
+      ? `${templateVariable("baseUrlOrigin")}${value}`
+      : joinUrlParts(templateVariable("baseUrl"), value);
+  }
+
+  if (baseUrl.length > 0) {
+    try {
+      return new URL(value, `${trimTrailingSlashes(baseUrl)}/`).toString();
+    } catch {
+      // A path-only server has no origin to resolve against. Preserve whether
+      // the OAuth endpoint is relative to that path or to the eventual origin.
+    }
+  }
+
+  try {
+    const placeholderOrigin = "https://openapi-import.invalid";
+    const relativeBase = new URL(`${trimTrailingSlashes(baseUrl)}/`, placeholderOrigin);
+    const resolved = new URL(value, relativeBase);
+    return `${templateVariable("baseUrlOrigin")}${resolved.pathname}${resolved.search}${resolved.hash}`;
+  } catch {
+    return joinUrlParts(templateVariable("baseUrlOrigin"), value);
+  }
+}
+
+function buildOAuthVariablesByScheme(
+  importState: ImportState,
+  spec: UnknownRecord,
+): Map<string, OAuthVariableNames> {
+  const schemes = {
+    ...toRecord(toRecord(spec.components).securitySchemes),
+    ...toRecord(spec.securityDefinitions),
+  };
+  const oauthSchemeNames = Object.entries(schemes)
+    .filter(([, scheme]) => stringAt(importState.resolve(scheme), "type") === "oauth2")
+    .map(([name]) => name);
+  const usedPrefixes = new Set<string>();
+
+  return new Map(
+    oauthSchemeNames.map((schemeName) => {
+      const basePrefix =
+        oauthSchemeNames.length === 1
+          ? "oauth"
+          : `oauth_${schemeName.replaceAll(/[^a-zA-Z0-9_]+/g, "_").replaceAll(/^_+|_+$/g, "") || "auth"}`;
+      let prefix = basePrefix;
+      let suffix = 2;
+      while (usedPrefixes.has(prefix)) prefix = `${basePrefix}_${suffix++}`;
+      usedPrefixes.add(prefix);
+      return [
+        schemeName,
+        {
+          clientId: `${prefix}_client_id`,
+          clientSecret: `${prefix}_client_secret`,
+          redirectUri: `${prefix}_redirect_uri`,
+        },
+      ];
+    }),
+  );
+}
+
+/** Earlier groups win on a name collision; Cookie rows all pass through since the send path merges them */
+function mergeHeaders(...headerGroups: HttpRequestHeader[][]): HttpRequestHeader[] {
+  const headers: HttpRequestHeader[] = [];
+  for (const group of headerGroups) {
+    const namesFromEarlierGroups = new Set(headers.map((header) => header.name.toLowerCase()));
+    for (const header of group) {
+      const name = header.name.toLowerCase();
+      if (name === "cookie" || !namesFromEarlierGroups.has(name)) {
+        headers.push(header);
+      }
+    }
+  }
+  return headers;
+}
+
+function formatBodyText(example: unknown): string {
+  return typeof example === "string" ? example : JSON.stringify(example, null, 2);
+}
+
+function stringifyExampleValue(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return JSON.stringify(value);
+}
+
+/**
+ * `examples` is a map of (possibly `$ref`) Example objects on media types and
+ * parameters, but a plain array of values on OpenAPI 3.1 schemas.
+ */
+function firstExampleValue(examples: unknown, importState: ImportState): unknown {
+  if (Array.isArray(examples)) return examples[0];
+  const firstExample = importState.resolve(Object.values(toRecord(examples))[0]);
+  if (isRecord(firstExample) && "value" in firstExample) return firstExample.value;
+  return firstExample;
+}
+
+function firstPresent(...values: unknown[]): unknown {
+  return values.find((value) => value !== undefined && value !== null);
+}
+
+function stringAt(record: unknown, key: string): string | undefined {
+  const value = toRecord(record)[key];
+  return typeof value === "string" ? value : undefined;
+}
+
+function toArray(value: unknown): unknown[] {
+  return Array.isArray(value) ? value : [];
+}
+
+function toRecord(value: unknown): UnknownRecord {
+  return isRecord(value) ? value : {};
+}
+
+function isRecord(value: unknown): value is UnknownRecord {
+  return value != null && typeof value === "object" && !Array.isArray(value);
+}
+
+function isPresent<T>(value: T | null | undefined): value is T {
+  return value != null && value !== "";
+}
+
+function deleteUndefinedAttrs<T>(obj: T): T {
+  if (Array.isArray(obj) && obj != null) {
+    return obj.map(deleteUndefinedAttrs) as T;
+  }
+  if (typeof obj === "object" && obj != null) {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .filter(([, v]) => v !== undefined)
+        .map(([k, v]) => [k, deleteUndefinedAttrs(v)]),
+    ) as T;
+  }
+  return obj;
+}
+
+class ImportState {
+  readonly #spec: UnknownRecord;
+  readonly #idCount: Partial<Record<string, number>> = {};
+  #sortPriority = 0;
+  #unresolvedRefs = new Set<string>();
+
+  constructor(spec: UnknownRecord) {
+    this.#spec = spec;
+  }
+
+  generateId(model: string): string {
+    this.#idCount[model] = (this.#idCount[model] ?? -1) + 1;
+    return `GENERATE_ID::${model.toUpperCase()}_${this.#idCount[model]}`;
+  }
+
+  nextSortPriority(): number {
+    return this.#sortPriority++;
+  }
+
+  /** Starts collecting unresolved refs for a single operation */
+  beginOperation(): void {
+    this.#unresolvedRefs = new Set();
+  }
+
+  /** Refs seen since `beginOperation` that point outside this document */
+  unresolvedRefs(): string[] {
+    return [...this.#unresolvedRefs];
+  }
+
+  resolve(value: unknown, visitedRefs = new Set<string>()): unknown {
+    if (!isRecord(value) || typeof value.$ref !== "string") return value;
+    if (visitedRefs.has(value.$ref)) return {};
+
+    const nextVisitedRefs = new Set(visitedRefs);
+    nextVisitedRefs.add(value.$ref);
+
+    // Refs into other documents can't be followed without fetching them, so
+    // record them and let the operation description report what went missing
+    if (!value.$ref.startsWith("#/")) {
+      this.#unresolvedRefs.add(value.$ref);
+      return value;
+    }
+
+    return this.resolve(this.#resolveLocalReference(value.$ref), nextVisitedRefs);
+  }
+
+  /** Schema Objects allow `$ref` siblings in OpenAPI 3.1 and later. */
+  resolveSchema(value: unknown, visitedRefs = new Set<string>(), compositionDepth = 0): unknown {
+    if (!isRecord(value)) return value;
+
+    let resolved: unknown = value;
+    const structureVisitedRefs = new Set(visitedRefs);
+    const siblingLayers: UnknownRecord[] = [];
+    while (isRecord(resolved) && typeof resolved.$ref === "string") {
+      const ref = resolved.$ref;
+      const siblings = Object.fromEntries(
+        Object.entries(resolved).filter(([key]) => key !== "$ref"),
+      );
+      if (structureVisitedRefs.has(ref)) {
+        resolved = siblings;
+        break;
+      }
+      if (!ref.startsWith("#/")) {
+        this.#unresolvedRefs.add(ref);
+        break;
+      }
+
+      structureVisitedRefs.add(ref);
+      siblingLayers.push(siblings);
+      resolved = this.#resolveLocalReference(ref);
+    }
+    if (!isRecord(resolved)) return resolved;
+
+    let merged: UnknownRecord = resolved;
+    for (let index = siblingLayers.length - 1; index >= 0; index--) {
+      merged = this.#mergeSchemaObjects(merged, siblingLayers[index] ?? {});
+    }
+    return this.#mergeAllOfStructure(merged, structureVisitedRefs, compositionDepth);
+  }
+
+  #mergeAllOfStructure(
+    schema: UnknownRecord,
+    visitedRefs: Set<string>,
+    depth: number,
+  ): UnknownRecord {
+    if (depth > MAX_SCHEMA_RESOLUTION_DEPTH) return schema;
+    const allOf = toArray(schema.allOf);
+    if (allOf.length === 0) return schema;
+
+    const composed = allOf.reduce<UnknownRecord>((merged, childSchema) => {
+      const child = this.resolveSchema(childSchema, new Set(visitedRefs), depth + 1);
+      if (!isRecord(child)) return merged;
+      const childStructure = Object.fromEntries(
+        Object.entries(child).filter(([key]) => key !== "allOf"),
+      );
+      return this.#mergeSchemaObjects(merged, childStructure);
+    }, {});
+    return this.#mergeSchemaObjects(composed, schema);
+  }
+
+  #mergeSchemaObjects(base: UnknownRecord, overlay: UnknownRecord, depth = 0): UnknownRecord {
+    const merged: UnknownRecord = { ...base, ...overlay };
+    if (depth > MAX_SCHEMA_RESOLUTION_DEPTH) return merged;
+
+    const baseProperties = toRecord(base.properties);
+    const overlayProperties = toRecord(overlay.properties);
+    const propertyNames = new Set([
+      ...Object.keys(baseProperties),
+      ...Object.keys(overlayProperties),
+    ]);
+    if (propertyNames.size > 0) {
+      merged.properties = Object.fromEntries(
+        [...propertyNames].map((name) => {
+          const baseProperty = baseProperties[name];
+          const overlayProperty = overlayProperties[name];
+          if (isRecord(baseProperty) && isRecord(overlayProperty)) {
+            return [name, this.#mergeSchemaObjects(baseProperty, overlayProperty, depth + 1)];
+          }
+          return [name, overlayProperty ?? baseProperty];
+        }),
+      );
+    }
+
+    const baseRequired = toArray(base.required).filter(
+      (name): name is string => typeof name === "string",
+    );
+    const overlayRequired = toArray(overlay.required).filter(
+      (name): name is string => typeof name === "string",
+    );
+    if (baseRequired.length > 0 || overlayRequired.length > 0) {
+      merged.required = [...new Set([...baseRequired, ...overlayRequired])];
+    }
+
+    const baseAllOf = toArray(base.allOf);
+    const overlayAllOf = toArray(overlay.allOf);
+    if (baseAllOf.length > 0 && overlayAllOf.length > 0) {
+      merged.allOf = [...baseAllOf, ...overlayAllOf];
+    }
+    if (isRecord(base.xml) && isRecord(overlay.xml)) {
+      merged.xml = { ...base.xml, ...overlay.xml };
+    }
+    if (isRecord(base.items) && isRecord(overlay.items)) {
+      merged.items = this.#mergeSchemaObjects(base.items, overlay.items, depth + 1);
+    }
+    if (isRecord(base.additionalProperties) && isRecord(overlay.additionalProperties)) {
+      merged.additionalProperties = this.#mergeSchemaObjects(
+        base.additionalProperties,
+        overlay.additionalProperties,
+        depth + 1,
+      );
+    }
+
+    return merged;
+  }
+
+  #resolveLocalReference(ref: string): unknown {
+    return ref
+      .slice(2)
+      .split("/")
+      .map((part) => part.replaceAll("~1", "/").replaceAll("~0", "~"))
+      .reduce<unknown>(
+        (current, part) =>
+          Array.isArray(current) ? current[Number(part)] : toRecord(current)[part],
+        this.#spec,
+      );
+  }
+}
diff --git a/plugins/importer-openapi/tests/__snapshots__/index.test.ts.snap b/plugins/importer-openapi/tests/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000..73b04a3
--- /dev/null
+++ b/plugins/importer-openapi/tests/__snapshots__/index.test.ts.snap
@@ -0,0 +1,2947 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`importer-openapi > Snapshots real-world fixture apis-guru.yaml 1`] = `
+{
+  "resources": {
+    "environments": [
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_0",
+        "model": "environment",
+        "name": "Global Variables",
+        "parentId": null,
+        "parentModel": "workspace",
+        "sortPriority": 0,
+        "variables": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_1",
+        "model": "environment",
+        "name": "Server 1",
+        "parentId": null,
+        "parentModel": "environment",
+        "sortPriority": 9,
+        "variables": [
+          {
+            "name": "baseUrl",
+            "value": "https://api.apis.guru/v2",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "folders": [
+      {
+        "description": "Actions relating to APIs in the collection",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_0",
+        "model": "folder",
+        "name": "APIs",
+        "sortPriority": 1,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "grpcRequests": [],
+    "httpRequests": [
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "List all APIs in the directory.
+Returns links to the OpenAPI definitions for each API in the directory.
+If API exist in multiple versions \`preferred\` one is explicitly marked.
+Some basic info from the OpenAPI definition is cached inside each object.
+This allows you to generate some simple views without needing to fetch the OpenAPI definition for each API.
+
+
+Operation ID: listAPIs
+
+Responses:
+- 200: OK",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Accept",
+            "value": "application/json",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_0",
+        "method": "GET",
+        "model": "http_request",
+        "name": "List all APIs",
+        "sortPriority": 2,
+        "url": "\${[baseUrl]}/list.json",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Some basic metrics for the entire directory.
+Just stunning numbers to put on a front page and are intended purely for WoW effect :)
+
+
+Operation ID: getMetrics
+
+Responses:
+- 200: OK",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Accept",
+            "value": "application/json",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_1",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Get basic metrics",
+        "sortPriority": 3,
+        "url": "\${[baseUrl]}/metrics.json",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "List all the providers in the directory
+
+
+Operation ID: getProviders
+
+Responses:
+- 200: OK",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Accept",
+            "value": "application/json",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_2",
+        "method": "GET",
+        "model": "http_request",
+        "name": "List all providers",
+        "sortPriority": 4,
+        "url": "\${[baseUrl]}/providers.json",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns the API entry for one specific version of an API where there is no serviceName.
+
+Operation ID: getAPI
+
+Parameters:
+- provider (path, required)
+- api (path, required)
+
+Responses:
+- 200: OK",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Accept",
+            "value": "application/json",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_3",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Retrieve one version of a particular API",
+        "sortPriority": 5,
+        "url": "\${[baseUrl]}/specs/:provider/2.1.0.json",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":provider",
+            "value": "apis.guru",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns the API entry for one specific version of an API where there is a serviceName.
+
+Operation ID: getServiceAPI
+
+Parameters:
+- provider (path, required)
+- service (path, required)
+- api (path, required)
+
+Responses:
+- 200: OK",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Accept",
+            "value": "application/json",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_4",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Retrieve one version of a particular API with a serviceName.",
+        "sortPriority": 6,
+        "url": "\${[baseUrl]}/specs/:provider/:service/2.1.0.json",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":provider",
+            "value": "apis.guru",
+          },
+          {
+            "enabled": true,
+            "name": ":service",
+            "value": "graph",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "List all APIs in the directory for a particular providerName
+Returns links to the individual API entry for each API.
+
+
+Operation ID: getProvider
+
+Parameters:
+- provider (path, required)
+
+Responses:
+- 200: OK",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Accept",
+            "value": "application/json",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_5",
+        "method": "GET",
+        "model": "http_request",
+        "name": "List all APIs for a particular provider",
+        "sortPriority": 7,
+        "url": "\${[baseUrl]}/apis.guru.json",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "List all serviceNames in the directory for a particular providerName
+
+
+Operation ID: getServices
+
+Parameters:
+- provider (path, required)
+
+Responses:
+- 200: OK",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Accept",
+            "value": "application/json",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_6",
+        "method": "GET",
+        "model": "http_request",
+        "name": "List all serviceNames for a particular provider",
+        "sortPriority": 8,
+        "url": "\${[baseUrl]}/:provider/services.json",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":provider",
+            "value": "apis.guru",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "websocketRequests": [],
+    "workspaces": [
+      {
+        "authentication": {},
+        "authenticationType": "none",
+        "description": "Wikipedia for Web APIs. Repository of API definitions in OpenAPI format.
+**Warning**: If you want to be notified about changes in advance please join our [Slack channel](https://join.slack.com/t/mermade/shared_invite/zt-g78g7xir-MLE_CTCcXCdfJfG3CJe9qA).
+Client sample: [[Demo]](https://apis.guru/simple-ui) [[Repo]](https://github.com/APIs-guru/simple-ui)
+
+
+Contact: mike.ralphson@gmail.com
+
+License: CC0 1.0 (https://github.com/APIs-guru/openapi-directory#licenses)",
+        "id": "GENERATE_ID::WORKSPACE_0",
+        "model": "workspace",
+        "name": "APIs.guru",
+      },
+    ],
+  },
+  "sourceKeys": {
+    "GENERATE_ID::FOLDER_0": "tag:APIs",
+    "GENERATE_ID::HTTP_REQUEST_0": "op:listAPIs",
+    "GENERATE_ID::HTTP_REQUEST_1": "op:getMetrics",
+    "GENERATE_ID::HTTP_REQUEST_2": "op:getProviders",
+    "GENERATE_ID::HTTP_REQUEST_3": "op:getAPI",
+    "GENERATE_ID::HTTP_REQUEST_4": "op:getServiceAPI",
+    "GENERATE_ID::HTTP_REQUEST_5": "op:getProvider",
+    "GENERATE_ID::HTTP_REQUEST_6": "op:getServices",
+  },
+}
+`;
+
+exports[`importer-openapi > Snapshots real-world fixture httpbin.yaml 1`] = `
+{
+  "resources": {
+    "environments": [
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_0",
+        "model": "environment",
+        "name": "Global Variables",
+        "parentId": null,
+        "parentModel": "workspace",
+        "sortPriority": 0,
+        "variables": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_1",
+        "model": "environment",
+        "name": "Server 1",
+        "parentId": null,
+        "parentModel": "environment",
+        "sortPriority": 90,
+        "variables": [
+          {
+            "name": "baseUrl",
+            "value": "https://httpbin.org",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "folders": [
+      {
+        "description": "Testing different HTTP verbs",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_0",
+        "model": "folder",
+        "name": "HTTP Methods",
+        "sortPriority": 1,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Auth methods",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_1",
+        "model": "folder",
+        "name": "Auth",
+        "sortPriority": 2,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Generates responses with given status code",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_2",
+        "model": "folder",
+        "name": "Status codes",
+        "sortPriority": 3,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Inspect the request data",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_3",
+        "model": "folder",
+        "name": "Request inspection",
+        "sortPriority": 4,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Inspect the response data like caching and headers",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_4",
+        "model": "folder",
+        "name": "Response inspection",
+        "sortPriority": 5,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Returns responses in different data formats",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_5",
+        "model": "folder",
+        "name": "Response formats",
+        "sortPriority": 6,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Generates random and dynamic data",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_6",
+        "model": "folder",
+        "name": "Dynamic data",
+        "sortPriority": 7,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Creates, reads and deletes Cookies",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_7",
+        "model": "folder",
+        "name": "Cookies",
+        "sortPriority": 8,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Returns different image formats",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_8",
+        "model": "folder",
+        "name": "Images",
+        "sortPriority": 9,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Returns different redirect responses",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_9",
+        "model": "folder",
+        "name": "Redirects",
+        "sortPriority": 10,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "description": "Returns anything that is passed to request",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_10",
+        "model": "folder",
+        "name": "Anything",
+        "sortPriority": 11,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "grpcRequests": [],
+    "httpRequests": [
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Absolutely 302 Redirects n times.
+
+Parameters:
+- n (path, required)
+
+Responses:
+- 302: A redirection.",
+        "folderId": "GENERATE_ID::FOLDER_9",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_0",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Absolutely 302 Redirects n times.",
+        "sortPriority": 12,
+        "url": "\${[baseUrl]}/absolute-redirect/:n",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":n",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_1",
+        "method": "DELETE",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (DELETE /anything)",
+        "sortPriority": 13,
+        "url": "\${[baseUrl]}/anything",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_2",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (GET /anything)",
+        "sortPriority": 14,
+        "url": "\${[baseUrl]}/anything",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_3",
+        "method": "PATCH",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (PATCH /anything)",
+        "sortPriority": 15,
+        "url": "\${[baseUrl]}/anything",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_4",
+        "method": "POST",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (POST /anything)",
+        "sortPriority": 16,
+        "url": "\${[baseUrl]}/anything",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_5",
+        "method": "PUT",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (PUT /anything)",
+        "sortPriority": 17,
+        "url": "\${[baseUrl]}/anything",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_6",
+        "method": "TRACE",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (TRACE /anything)",
+        "sortPriority": 18,
+        "url": "\${[baseUrl]}/anything",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Parameters:
+- anything (path, required): Automatically added
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_7",
+        "method": "DELETE",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (DELETE /anything/{anything})",
+        "sortPriority": 19,
+        "url": "\${[baseUrl]}/anything/:anything",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":anything",
+            "value": "anything",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Parameters:
+- anything (path, required): Automatically added
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_8",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (GET /anything/{anything})",
+        "sortPriority": 20,
+        "url": "\${[baseUrl]}/anything/:anything",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":anything",
+            "value": "anything",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Parameters:
+- anything (path, required): Automatically added
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_9",
+        "method": "PATCH",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (PATCH /anything/{anything})",
+        "sortPriority": 21,
+        "url": "\${[baseUrl]}/anything/:anything",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":anything",
+            "value": "anything",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Parameters:
+- anything (path, required): Automatically added
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_10",
+        "method": "POST",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (POST /anything/{anything})",
+        "sortPriority": 22,
+        "url": "\${[baseUrl]}/anything/:anything",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":anything",
+            "value": "anything",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Parameters:
+- anything (path, required): Automatically added
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_11",
+        "method": "PUT",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (PUT /anything/{anything})",
+        "sortPriority": 23,
+        "url": "\${[baseUrl]}/anything/:anything",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":anything",
+            "value": "anything",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns anything passed in request data.
+
+Parameters:
+- anything (path, required): Automatically added
+
+Responses:
+- 200: Anything passed in request",
+        "folderId": "GENERATE_ID::FOLDER_10",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_12",
+        "method": "TRACE",
+        "model": "http_request",
+        "name": "Returns anything passed in request data. (TRACE /anything/{anything})",
+        "sortPriority": 24,
+        "url": "\${[baseUrl]}/anything/:anything",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":anything",
+            "value": "anything",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Decodes base64url-encoded string.
+
+Parameters:
+- value (path, required)
+
+Responses:
+- 200: Decoded base64 content.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_13",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Decodes base64url-encoded string.",
+        "sortPriority": 25,
+        "url": "\${[baseUrl]}/base64/:value",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":value",
+            "value": "SFRUUEJJTiBpcyBhd2Vzb21l",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Prompts the user for authorization using HTTP Basic Auth.
+
+Parameters:
+- user (path, required)
+- passwd (path, required)
+
+Responses:
+- 200: Sucessful authentication.
+- 401: Unsuccessful authentication.",
+        "folderId": "GENERATE_ID::FOLDER_1",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_14",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Prompts the user for authorization using HTTP Basic Auth. (GET /basic-auth/{user}/{passwd})",
+        "sortPriority": 26,
+        "url": "\${[baseUrl]}/basic-auth/:user/:passwd",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":user",
+            "value": "user",
+          },
+          {
+            "enabled": true,
+            "name": ":passwd",
+            "value": "passwd",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Prompts the user for authorization using bearer authentication.
+
+Parameters:
+- Authorization (header)
+
+Responses:
+- 200: Sucessful authentication.
+- 401: Unsuccessful authentication.",
+        "folderId": "GENERATE_ID::FOLDER_1",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_15",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Prompts the user for authorization using bearer authentication.",
+        "sortPriority": 27,
+        "url": "\${[baseUrl]}/bearer",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns Brotli-encoded data.
+
+Responses:
+- 200: Brotli-encoded data.",
+        "folderId": "GENERATE_ID::FOLDER_5",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_16",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns Brotli-encoded data.",
+        "sortPriority": 28,
+        "url": "\${[baseUrl]}/brotli",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns n random bytes generated with given seed
+
+Parameters:
+- n (path, required)
+
+Responses:
+- 200: Bytes.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_17",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns n random bytes generated with given seed",
+        "sortPriority": 29,
+        "url": "\${[baseUrl]}/bytes/:n",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":n",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a 304 if an If-Modified-Since header or If-None-Match is present. Returns the same as a GET otherwise.
+
+Parameters:
+- If-Modified-Since (header)
+- If-None-Match (header)
+
+Responses:
+- 200: Cached response
+- 304: Modified",
+        "folderId": "GENERATE_ID::FOLDER_4",
+        "headers": [
+          {
+            "enabled": false,
+            "name": "If-Modified-Since",
+            "value": "",
+          },
+          {
+            "enabled": false,
+            "name": "If-None-Match",
+            "value": "",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_18",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a 304 if an If-Modified-Since header or If-None-Match is present. Returns the same as a GET otherwise.",
+        "sortPriority": 30,
+        "url": "\${[baseUrl]}/cache",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Sets a Cache-Control header for n seconds.
+
+Parameters:
+- value (path, required)
+
+Responses:
+- 200: Cache control set",
+        "folderId": "GENERATE_ID::FOLDER_4",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_19",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Sets a Cache-Control header for n seconds.",
+        "sortPriority": 31,
+        "url": "\${[baseUrl]}/cache/:value",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":value",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns cookie data.
+
+Responses:
+- 200: Set cookies.",
+        "folderId": "GENERATE_ID::FOLDER_7",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_20",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns cookie data.",
+        "sortPriority": 32,
+        "url": "\${[baseUrl]}/cookies",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Deletes cookie(s) as provided by the query string and redirects to cookie list.
+
+Parameters:
+- freeform (query)
+
+Responses:
+- 200: Redirect to cookie list",
+        "folderId": "GENERATE_ID::FOLDER_7",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_21",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Deletes cookie(s) as provided by the query string and redirects to cookie list.",
+        "sortPriority": 33,
+        "url": "\${[baseUrl]}/cookies/delete",
+        "urlParameters": [
+          {
+            "enabled": false,
+            "name": "freeform",
+            "value": "",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Sets cookie(s) as provided by the query string and redirects to cookie list.
+
+Parameters:
+- freeform (query)
+
+Responses:
+- 200: Redirect to cookie list",
+        "folderId": "GENERATE_ID::FOLDER_7",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_22",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Sets cookie(s) as provided by the query string and redirects to cookie list.",
+        "sortPriority": 34,
+        "url": "\${[baseUrl]}/cookies/set",
+        "urlParameters": [
+          {
+            "enabled": false,
+            "name": "freeform",
+            "value": "",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Sets a cookie and redirects to cookie list.
+
+Parameters:
+- name (path, required)
+- value (path, required)
+
+Responses:
+- 200: Set cookies and redirects to cookie list.",
+        "folderId": "GENERATE_ID::FOLDER_7",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_23",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Sets a cookie and redirects to cookie list.",
+        "sortPriority": 35,
+        "url": "\${[baseUrl]}/cookies/set/:name/:value",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":name",
+            "value": "name",
+          },
+          {
+            "enabled": true,
+            "name": ":value",
+            "value": "value",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns Deflate-encoded data.
+
+Responses:
+- 200: Defalte-encoded data.",
+        "folderId": "GENERATE_ID::FOLDER_5",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_24",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns Deflate-encoded data.",
+        "sortPriority": 36,
+        "url": "\${[baseUrl]}/deflate",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a delayed response (max of 10 seconds).
+
+Parameters:
+- delay (path, required)
+
+Responses:
+- 200: A delayed response.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_25",
+        "method": "DELETE",
+        "model": "http_request",
+        "name": "Returns a delayed response (max of 10 seconds). (DELETE /delay/{delay})",
+        "sortPriority": 37,
+        "url": "\${[baseUrl]}/delay/:delay",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":delay",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a delayed response (max of 10 seconds).
+
+Parameters:
+- delay (path, required)
+
+Responses:
+- 200: A delayed response.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_26",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a delayed response (max of 10 seconds). (GET /delay/{delay})",
+        "sortPriority": 38,
+        "url": "\${[baseUrl]}/delay/:delay",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":delay",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a delayed response (max of 10 seconds).
+
+Parameters:
+- delay (path, required)
+
+Responses:
+- 200: A delayed response.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_27",
+        "method": "PATCH",
+        "model": "http_request",
+        "name": "Returns a delayed response (max of 10 seconds). (PATCH /delay/{delay})",
+        "sortPriority": 39,
+        "url": "\${[baseUrl]}/delay/:delay",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":delay",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a delayed response (max of 10 seconds).
+
+Parameters:
+- delay (path, required)
+
+Responses:
+- 200: A delayed response.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_28",
+        "method": "POST",
+        "model": "http_request",
+        "name": "Returns a delayed response (max of 10 seconds). (POST /delay/{delay})",
+        "sortPriority": 40,
+        "url": "\${[baseUrl]}/delay/:delay",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":delay",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a delayed response (max of 10 seconds).
+
+Parameters:
+- delay (path, required)
+
+Responses:
+- 200: A delayed response.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_29",
+        "method": "PUT",
+        "model": "http_request",
+        "name": "Returns a delayed response (max of 10 seconds). (PUT /delay/{delay})",
+        "sortPriority": 41,
+        "url": "\${[baseUrl]}/delay/:delay",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":delay",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a delayed response (max of 10 seconds).
+
+Parameters:
+- delay (path, required)
+
+Responses:
+- 200: A delayed response.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_30",
+        "method": "TRACE",
+        "model": "http_request",
+        "name": "Returns a delayed response (max of 10 seconds). (TRACE /delay/{delay})",
+        "sortPriority": 42,
+        "url": "\${[baseUrl]}/delay/:delay",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":delay",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "The request's DELETE parameters.
+
+Responses:
+- 200: The request's DELETE parameters.",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_31",
+        "method": "DELETE",
+        "model": "http_request",
+        "name": "The request's DELETE parameters.",
+        "sortPriority": 43,
+        "url": "\${[baseUrl]}/delete",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns page denied by robots.txt rules.
+
+Responses:
+- 200: Denied message",
+        "folderId": "GENERATE_ID::FOLDER_5",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_32",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns page denied by robots.txt rules.",
+        "sortPriority": 44,
+        "url": "\${[baseUrl]}/deny",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Prompts the user for authorization using Digest Auth.
+
+Parameters:
+- qop (path, required): auth or auth-int
+- user (path, required)
+- passwd (path, required)
+
+Responses:
+- 200: Sucessful authentication.
+- 401: Unsuccessful authentication.",
+        "folderId": "GENERATE_ID::FOLDER_1",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_33",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Prompts the user for authorization using Digest Auth.",
+        "sortPriority": 45,
+        "url": "\${[baseUrl]}/digest-auth/:qop/:user/:passwd",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":qop",
+            "value": "qop",
+          },
+          {
+            "enabled": true,
+            "name": ":user",
+            "value": "user",
+          },
+          {
+            "enabled": true,
+            "name": ":passwd",
+            "value": "passwd",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Prompts the user for authorization using Digest Auth + Algorithm.
+
+Parameters:
+- qop (path, required): auth or auth-int
+- user (path, required)
+- passwd (path, required)
+- algorithm (path, required): MD5, SHA-256, SHA-512
+
+Responses:
+- 200: Sucessful authentication.
+- 401: Unsuccessful authentication.",
+        "folderId": "GENERATE_ID::FOLDER_1",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_34",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Prompts the user for authorization using Digest Auth + Algorithm. (GET /digest-auth/{qop}/{user}/{passwd}/{algorithm})",
+        "sortPriority": 46,
+        "url": "\${[baseUrl]}/digest-auth/:qop/:user/:passwd/:algorithm",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":qop",
+            "value": "qop",
+          },
+          {
+            "enabled": true,
+            "name": ":user",
+            "value": "user",
+          },
+          {
+            "enabled": true,
+            "name": ":passwd",
+            "value": "passwd",
+          },
+          {
+            "enabled": true,
+            "name": ":algorithm",
+            "value": "MD5",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "allow settings the stale_after argument.
+
+
+Parameters:
+- qop (path, required): auth or auth-int
+- user (path, required)
+- passwd (path, required)
+- algorithm (path, required): MD5, SHA-256, SHA-512
+- stale_after (path, required)
+
+Responses:
+- 200: Sucessful authentication.
+- 401: Unsuccessful authentication.",
+        "folderId": "GENERATE_ID::FOLDER_1",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_35",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Prompts the user for authorization using Digest Auth + Algorithm. (GET /digest-auth/{qop}/{user}/{passwd}/{algorithm}/{stale_after})",
+        "sortPriority": 47,
+        "url": "\${[baseUrl]}/digest-auth/:qop/:user/:passwd/:algorithm/:stale_after",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":qop",
+            "value": "qop",
+          },
+          {
+            "enabled": true,
+            "name": ":user",
+            "value": "user",
+          },
+          {
+            "enabled": true,
+            "name": ":passwd",
+            "value": "passwd",
+          },
+          {
+            "enabled": true,
+            "name": ":algorithm",
+            "value": "MD5",
+          },
+          {
+            "enabled": true,
+            "name": ":stale_after",
+            "value": "never",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Drips data over a duration after an optional initial delay.
+
+Parameters:
+- duration (query): The amount of time (in seconds) over which to drip each byte
+- numbytes (query): The number of bytes to respond with
+- code (query): The response code that will be returned
+- delay (query): The amount of time (in seconds) to delay before responding
+
+Responses:
+- 200: A dripped response.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_36",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Drips data over a duration after an optional initial delay.",
+        "sortPriority": 48,
+        "url": "\${[baseUrl]}/drip",
+        "urlParameters": [
+          {
+            "enabled": false,
+            "name": "duration",
+            "value": "2",
+          },
+          {
+            "enabled": false,
+            "name": "numbytes",
+            "value": "10",
+          },
+          {
+            "enabled": false,
+            "name": "code",
+            "value": "200",
+          },
+          {
+            "enabled": false,
+            "name": "delay",
+            "value": "2",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a UTF-8 encoded body.
+
+Responses:
+- 200: Encoded UTF-8 content.",
+        "folderId": "GENERATE_ID::FOLDER_5",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_37",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a UTF-8 encoded body.",
+        "sortPriority": 49,
+        "url": "\${[baseUrl]}/encoding/utf8",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Assumes the resource has the given etag and responds to If-None-Match and If-Match headers appropriately.
+
+Parameters:
+- If-None-Match (header)
+- If-Match (header)
+- etag (path, required): Automatically added
+
+Responses:
+- 200: Normal response
+- 412: match",
+        "folderId": "GENERATE_ID::FOLDER_4",
+        "headers": [
+          {
+            "enabled": false,
+            "name": "If-None-Match",
+            "value": "",
+          },
+          {
+            "enabled": false,
+            "name": "If-Match",
+            "value": "",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_38",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Assumes the resource has the given etag and responds to If-None-Match and If-Match headers appropriately.",
+        "sortPriority": 50,
+        "url": "\${[baseUrl]}/etag/:etag",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":etag",
+            "value": "etag",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "The request's query parameters.
+
+Responses:
+- 200: The request's query parameters.",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_39",
+        "method": "GET",
+        "model": "http_request",
+        "name": "The request's query parameters.",
+        "sortPriority": 51,
+        "url": "\${[baseUrl]}/get",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns GZip-encoded data.
+
+Responses:
+- 200: GZip-encoded data.",
+        "folderId": "GENERATE_ID::FOLDER_5",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_40",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns GZip-encoded data.",
+        "sortPriority": 52,
+        "url": "\${[baseUrl]}/gzip",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Return the incoming request's HTTP headers.
+
+Responses:
+- 200: The request's headers.",
+        "folderId": "GENERATE_ID::FOLDER_3",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_41",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Return the incoming request's HTTP headers.",
+        "sortPriority": 53,
+        "url": "\${[baseUrl]}/headers",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Prompts the user for authorization using HTTP Basic Auth.
+
+Parameters:
+- user (path, required)
+- passwd (path, required)
+
+Responses:
+- 200: Sucessful authentication.
+- 404: Unsuccessful authentication.",
+        "folderId": "GENERATE_ID::FOLDER_1",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_42",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Prompts the user for authorization using HTTP Basic Auth. (GET /hidden-basic-auth/{user}/{passwd})",
+        "sortPriority": 54,
+        "url": "\${[baseUrl]}/hidden-basic-auth/:user/:passwd",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":user",
+            "value": "user",
+          },
+          {
+            "enabled": true,
+            "name": ":passwd",
+            "value": "passwd",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a simple HTML document.
+
+Responses:
+- 200: An HTML page.",
+        "folderId": "GENERATE_ID::FOLDER_5",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_43",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a simple HTML document.",
+        "sortPriority": 55,
+        "url": "\${[baseUrl]}/html",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a simple image of the type suggest by the Accept header.
+
+Responses:
+- 200: An image.",
+        "folderId": "GENERATE_ID::FOLDER_8",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_44",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a simple image of the type suggest by the Accept header.",
+        "sortPriority": 56,
+        "url": "\${[baseUrl]}/image",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a simple JPEG image.
+
+Responses:
+- 200: A JPEG image.",
+        "folderId": "GENERATE_ID::FOLDER_8",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_45",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a simple JPEG image.",
+        "sortPriority": 57,
+        "url": "\${[baseUrl]}/image/jpeg",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a simple PNG image.
+
+Responses:
+- 200: A PNG image.",
+        "folderId": "GENERATE_ID::FOLDER_8",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_46",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a simple PNG image.",
+        "sortPriority": 58,
+        "url": "\${[baseUrl]}/image/png",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a simple SVG image.
+
+Responses:
+- 200: An SVG image.",
+        "folderId": "GENERATE_ID::FOLDER_8",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_47",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a simple SVG image.",
+        "sortPriority": 59,
+        "url": "\${[baseUrl]}/image/svg",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a simple WEBP image.
+
+Responses:
+- 200: A WEBP image.",
+        "folderId": "GENERATE_ID::FOLDER_8",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_48",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a simple WEBP image.",
+        "sortPriority": 60,
+        "url": "\${[baseUrl]}/image/webp",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns the requester's IP Address.
+
+Responses:
+- 200: The Requester's IP Address.",
+        "folderId": "GENERATE_ID::FOLDER_3",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_49",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns the requester's IP Address.",
+        "sortPriority": 61,
+        "url": "\${[baseUrl]}/ip",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a simple JSON document.
+
+Responses:
+- 200: An JSON document.",
+        "folderId": "GENERATE_ID::FOLDER_5",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_50",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a simple JSON document.",
+        "sortPriority": 62,
+        "url": "\${[baseUrl]}/json",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Generate a page containing n links to other pages which do the same.
+
+Parameters:
+- n (path, required)
+- offset (path, required)
+
+Responses:
+- 200: HTML links.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_51",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Generate a page containing n links to other pages which do the same.",
+        "sortPriority": 63,
+        "url": "\${[baseUrl]}/links/:n/:offset",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":n",
+            "value": "0",
+          },
+          {
+            "enabled": true,
+            "name": ":offset",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "The request's PATCH parameters.
+
+Responses:
+- 200: The request's PATCH parameters.",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_52",
+        "method": "PATCH",
+        "model": "http_request",
+        "name": "The request's PATCH parameters.",
+        "sortPriority": 64,
+        "url": "\${[baseUrl]}/patch",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "The request's POST parameters.
+
+Responses:
+- 200: The request's POST parameters.",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_53",
+        "method": "POST",
+        "model": "http_request",
+        "name": "The request's POST parameters.",
+        "sortPriority": 65,
+        "url": "\${[baseUrl]}/post",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "The request's PUT parameters.
+
+Responses:
+- 200: The request's PUT parameters.",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_54",
+        "method": "PUT",
+        "model": "http_request",
+        "name": "The request's PUT parameters.",
+        "sortPriority": 66,
+        "url": "\${[baseUrl]}/put",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Streams n random bytes generated with given seed, at given chunk size per packet.
+
+Parameters:
+- numbytes (path, required)
+
+Responses:
+- 200: Bytes.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_55",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Streams n random bytes generated with given seed, at given chunk size per packet. (GET /range/{numbytes})",
+        "sortPriority": 67,
+        "url": "\${[baseUrl]}/range/:numbytes",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":numbytes",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "302/3XX Redirects to the given URL.
+
+Responses:
+- 302: A redirection.",
+        "folderId": "GENERATE_ID::FOLDER_9",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_56",
+        "method": "DELETE",
+        "model": "http_request",
+        "name": "302/3XX Redirects to the given URL. (DELETE /redirect-to)",
+        "sortPriority": 68,
+        "url": "\${[baseUrl]}/redirect-to",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "302/3XX Redirects to the given URL.
+
+Parameters:
+- url (query, required)
+- status_code (query)
+
+Responses:
+- 302: A redirection.",
+        "folderId": "GENERATE_ID::FOLDER_9",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_57",
+        "method": "GET",
+        "model": "http_request",
+        "name": "302/3XX Redirects to the given URL. (GET /redirect-to)",
+        "sortPriority": 69,
+        "url": "\${[baseUrl]}/redirect-to",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": "url",
+            "value": "",
+          },
+          {
+            "enabled": false,
+            "name": "status_code",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "302/3XX Redirects to the given URL.
+
+Responses:
+- 302: A redirection.",
+        "folderId": "GENERATE_ID::FOLDER_9",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_58",
+        "method": "PATCH",
+        "model": "http_request",
+        "name": "302/3XX Redirects to the given URL. (PATCH /redirect-to)",
+        "sortPriority": 70,
+        "url": "\${[baseUrl]}/redirect-to",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {
+          "form": [
+            {
+              "enabled": false,
+              "name": "status_code",
+              "value": "0",
+            },
+            {
+              "enabled": true,
+              "name": "url",
+              "value": "",
+            },
+          ],
+        },
+        "bodyType": "application/x-www-form-urlencoded",
+        "description": "302/3XX Redirects to the given URL.
+
+Request body:
+Selected content type: application/x-www-form-urlencoded
+Available content types: application/x-www-form-urlencoded
+
+Responses:
+- 302: A redirection.",
+        "folderId": "GENERATE_ID::FOLDER_9",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Content-Type",
+            "value": "application/x-www-form-urlencoded",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_59",
+        "method": "POST",
+        "model": "http_request",
+        "name": "302/3XX Redirects to the given URL. (POST /redirect-to)",
+        "sortPriority": 71,
+        "url": "\${[baseUrl]}/redirect-to",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {
+          "form": [
+            {
+              "enabled": false,
+              "name": "status_code",
+              "value": "0",
+            },
+            {
+              "enabled": true,
+              "name": "url",
+              "value": "",
+            },
+          ],
+        },
+        "bodyType": "application/x-www-form-urlencoded",
+        "description": "302/3XX Redirects to the given URL.
+
+Request body:
+Selected content type: application/x-www-form-urlencoded
+Available content types: application/x-www-form-urlencoded
+
+Responses:
+- 302: A redirection.",
+        "folderId": "GENERATE_ID::FOLDER_9",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Content-Type",
+            "value": "application/x-www-form-urlencoded",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_60",
+        "method": "PUT",
+        "model": "http_request",
+        "name": "302/3XX Redirects to the given URL. (PUT /redirect-to)",
+        "sortPriority": 72,
+        "url": "\${[baseUrl]}/redirect-to",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "302/3XX Redirects to the given URL.
+
+Responses:
+- 302: A redirection.",
+        "folderId": "GENERATE_ID::FOLDER_9",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_61",
+        "method": "TRACE",
+        "model": "http_request",
+        "name": "302/3XX Redirects to the given URL. (TRACE /redirect-to)",
+        "sortPriority": 73,
+        "url": "\${[baseUrl]}/redirect-to",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "302 Redirects n times.
+
+Parameters:
+- n (path, required)
+
+Responses:
+- 302: A redirection.",
+        "folderId": "GENERATE_ID::FOLDER_9",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_62",
+        "method": "GET",
+        "model": "http_request",
+        "name": "302 Redirects n times.",
+        "sortPriority": 74,
+        "url": "\${[baseUrl]}/redirect/:n",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":n",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Relatively 302 Redirects n times.
+
+Parameters:
+- n (path, required)
+
+Responses:
+- 302: A redirection.",
+        "folderId": "GENERATE_ID::FOLDER_9",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_63",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Relatively 302 Redirects n times.",
+        "sortPriority": 75,
+        "url": "\${[baseUrl]}/relative-redirect/:n",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":n",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a set of response headers from the query string.
+
+Parameters:
+- freeform (query)
+
+Responses:
+- 200: Response headers",
+        "folderId": "GENERATE_ID::FOLDER_4",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_64",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a set of response headers from the query string. (GET /response-headers)",
+        "sortPriority": 76,
+        "url": "\${[baseUrl]}/response-headers",
+        "urlParameters": [
+          {
+            "enabled": false,
+            "name": "freeform",
+            "value": "",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a set of response headers from the query string.
+
+Parameters:
+- freeform (query)
+
+Responses:
+- 200: Response headers",
+        "folderId": "GENERATE_ID::FOLDER_4",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_65",
+        "method": "POST",
+        "model": "http_request",
+        "name": "Returns a set of response headers from the query string. (POST /response-headers)",
+        "sortPriority": 77,
+        "url": "\${[baseUrl]}/response-headers",
+        "urlParameters": [
+          {
+            "enabled": false,
+            "name": "freeform",
+            "value": "",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns some robots.txt rules.
+
+Responses:
+- 200: Robots file",
+        "folderId": "GENERATE_ID::FOLDER_5",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_66",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns some robots.txt rules.",
+        "sortPriority": 78,
+        "url": "\${[baseUrl]}/robots.txt",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Return status code or random status code if more than one are given
+
+Parameters:
+- codes (path, required)
+
+Responses:
+- 100: Informational responses
+- 200: Success
+- 300: Redirection
+- 400: Client Errors
+- 500: Server Errors",
+        "folderId": "GENERATE_ID::FOLDER_2",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_67",
+        "method": "DELETE",
+        "model": "http_request",
+        "name": "Return status code or random status code if more than one are given (DELETE /status/{codes})",
+        "sortPriority": 79,
+        "url": "\${[baseUrl]}/status/:codes",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":codes",
+            "value": "codes",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Return status code or random status code if more than one are given
+
+Parameters:
+- codes (path, required)
+
+Responses:
+- 100: Informational responses
+- 200: Success
+- 300: Redirection
+- 400: Client Errors
+- 500: Server Errors",
+        "folderId": "GENERATE_ID::FOLDER_2",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_68",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Return status code or random status code if more than one are given (GET /status/{codes})",
+        "sortPriority": 80,
+        "url": "\${[baseUrl]}/status/:codes",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":codes",
+            "value": "codes",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Return status code or random status code if more than one are given
+
+Parameters:
+- codes (path, required)
+
+Responses:
+- 100: Informational responses
+- 200: Success
+- 300: Redirection
+- 400: Client Errors
+- 500: Server Errors",
+        "folderId": "GENERATE_ID::FOLDER_2",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_69",
+        "method": "PATCH",
+        "model": "http_request",
+        "name": "Return status code or random status code if more than one are given (PATCH /status/{codes})",
+        "sortPriority": 81,
+        "url": "\${[baseUrl]}/status/:codes",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":codes",
+            "value": "codes",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Return status code or random status code if more than one are given
+
+Parameters:
+- codes (path, required)
+
+Responses:
+- 100: Informational responses
+- 200: Success
+- 300: Redirection
+- 400: Client Errors
+- 500: Server Errors",
+        "folderId": "GENERATE_ID::FOLDER_2",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_70",
+        "method": "POST",
+        "model": "http_request",
+        "name": "Return status code or random status code if more than one are given (POST /status/{codes})",
+        "sortPriority": 82,
+        "url": "\${[baseUrl]}/status/:codes",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":codes",
+            "value": "codes",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Return status code or random status code if more than one are given
+
+Parameters:
+- codes (path, required)
+
+Responses:
+- 100: Informational responses
+- 200: Success
+- 300: Redirection
+- 400: Client Errors
+- 500: Server Errors",
+        "folderId": "GENERATE_ID::FOLDER_2",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_71",
+        "method": "PUT",
+        "model": "http_request",
+        "name": "Return status code or random status code if more than one are given (PUT /status/{codes})",
+        "sortPriority": 83,
+        "url": "\${[baseUrl]}/status/:codes",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":codes",
+            "value": "codes",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Return status code or random status code if more than one are given
+
+Parameters:
+- codes (path, required)
+
+Responses:
+- 100: Informational responses
+- 200: Success
+- 300: Redirection
+- 400: Client Errors
+- 500: Server Errors",
+        "folderId": "GENERATE_ID::FOLDER_2",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_72",
+        "method": "TRACE",
+        "model": "http_request",
+        "name": "Return status code or random status code if more than one are given (TRACE /status/{codes})",
+        "sortPriority": 84,
+        "url": "\${[baseUrl]}/status/:codes",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":codes",
+            "value": "codes",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Streams n random bytes generated with given seed, at given chunk size per packet.
+
+Parameters:
+- n (path, required)
+
+Responses:
+- 200: Bytes.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_73",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Streams n random bytes generated with given seed, at given chunk size per packet. (GET /stream-bytes/{n})",
+        "sortPriority": 85,
+        "url": "\${[baseUrl]}/stream-bytes/:n",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":n",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Stream n JSON responses
+
+Parameters:
+- n (path, required)
+
+Responses:
+- 200: Streamed JSON responses.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_74",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Stream n JSON responses",
+        "sortPriority": 86,
+        "url": "\${[baseUrl]}/stream/:n",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":n",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Return the incoming requests's User-Agent header.
+
+Responses:
+- 200: The request's User-Agent header.",
+        "folderId": "GENERATE_ID::FOLDER_3",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_75",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Return the incoming requests's User-Agent header.",
+        "sortPriority": 87,
+        "url": "\${[baseUrl]}/user-agent",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Return a UUID4.
+
+Responses:
+- 200: A UUID4.",
+        "folderId": "GENERATE_ID::FOLDER_6",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_76",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Return a UUID4.",
+        "sortPriority": 88,
+        "url": "\${[baseUrl]}/uuid",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Returns a simple XML document.
+
+Responses:
+- 200: An XML document.",
+        "folderId": "GENERATE_ID::FOLDER_5",
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_77",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns a simple XML document.",
+        "sortPriority": 89,
+        "url": "\${[baseUrl]}/xml",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "websocketRequests": [],
+    "workspaces": [
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "description": "A simple HTTP Request & Response Service.<br/> <br/> <b>Run locally: </b> <code>$ docker run -p 80:80 kennethreitz/httpbin</code>
+
+Contact: me@kennethreitz.org",
+        "id": "GENERATE_ID::WORKSPACE_0",
+        "model": "workspace",
+        "name": "httpbin.org",
+      },
+    ],
+  },
+  "sourceKeys": {
+    "GENERATE_ID::FOLDER_0": "tag:HTTP Methods",
+    "GENERATE_ID::FOLDER_1": "tag:Auth",
+    "GENERATE_ID::FOLDER_10": "tag:Anything",
+    "GENERATE_ID::FOLDER_2": "tag:Status codes",
+    "GENERATE_ID::FOLDER_3": "tag:Request inspection",
+    "GENERATE_ID::FOLDER_4": "tag:Response inspection",
+    "GENERATE_ID::FOLDER_5": "tag:Response formats",
+    "GENERATE_ID::FOLDER_6": "tag:Dynamic data",
+    "GENERATE_ID::FOLDER_7": "tag:Cookies",
+    "GENERATE_ID::FOLDER_8": "tag:Images",
+    "GENERATE_ID::FOLDER_9": "tag:Redirects",
+    "GENERATE_ID::HTTP_REQUEST_0": "route:GET /absolute-redirect/{n}",
+    "GENERATE_ID::HTTP_REQUEST_1": "route:DELETE /anything",
+    "GENERATE_ID::HTTP_REQUEST_10": "route:POST /anything/{anything}",
+    "GENERATE_ID::HTTP_REQUEST_11": "route:PUT /anything/{anything}",
+    "GENERATE_ID::HTTP_REQUEST_12": "route:TRACE /anything/{anything}",
+    "GENERATE_ID::HTTP_REQUEST_13": "route:GET /base64/{value}",
+    "GENERATE_ID::HTTP_REQUEST_14": "route:GET /basic-auth/{user}/{passwd}",
+    "GENERATE_ID::HTTP_REQUEST_15": "route:GET /bearer",
+    "GENERATE_ID::HTTP_REQUEST_16": "route:GET /brotli",
+    "GENERATE_ID::HTTP_REQUEST_17": "route:GET /bytes/{n}",
+    "GENERATE_ID::HTTP_REQUEST_18": "route:GET /cache",
+    "GENERATE_ID::HTTP_REQUEST_19": "route:GET /cache/{value}",
+    "GENERATE_ID::HTTP_REQUEST_2": "route:GET /anything",
+    "GENERATE_ID::HTTP_REQUEST_20": "route:GET /cookies",
+    "GENERATE_ID::HTTP_REQUEST_21": "route:GET /cookies/delete",
+    "GENERATE_ID::HTTP_REQUEST_22": "route:GET /cookies/set",
+    "GENERATE_ID::HTTP_REQUEST_23": "route:GET /cookies/set/{name}/{value}",
+    "GENERATE_ID::HTTP_REQUEST_24": "route:GET /deflate",
+    "GENERATE_ID::HTTP_REQUEST_25": "route:DELETE /delay/{delay}",
+    "GENERATE_ID::HTTP_REQUEST_26": "route:GET /delay/{delay}",
+    "GENERATE_ID::HTTP_REQUEST_27": "route:PATCH /delay/{delay}",
+    "GENERATE_ID::HTTP_REQUEST_28": "route:POST /delay/{delay}",
+    "GENERATE_ID::HTTP_REQUEST_29": "route:PUT /delay/{delay}",
+    "GENERATE_ID::HTTP_REQUEST_3": "route:PATCH /anything",
+    "GENERATE_ID::HTTP_REQUEST_30": "route:TRACE /delay/{delay}",
+    "GENERATE_ID::HTTP_REQUEST_31": "route:DELETE /delete",
+    "GENERATE_ID::HTTP_REQUEST_32": "route:GET /deny",
+    "GENERATE_ID::HTTP_REQUEST_33": "route:GET /digest-auth/{qop}/{user}/{passwd}",
+    "GENERATE_ID::HTTP_REQUEST_34": "route:GET /digest-auth/{qop}/{user}/{passwd}/{algorithm}",
+    "GENERATE_ID::HTTP_REQUEST_35": "route:GET /digest-auth/{qop}/{user}/{passwd}/{algorithm}/{stale_after}",
+    "GENERATE_ID::HTTP_REQUEST_36": "route:GET /drip",
+    "GENERATE_ID::HTTP_REQUEST_37": "route:GET /encoding/utf8",
+    "GENERATE_ID::HTTP_REQUEST_38": "route:GET /etag/{etag}",
+    "GENERATE_ID::HTTP_REQUEST_39": "route:GET /get",
+    "GENERATE_ID::HTTP_REQUEST_4": "route:POST /anything",
+    "GENERATE_ID::HTTP_REQUEST_40": "route:GET /gzip",
+    "GENERATE_ID::HTTP_REQUEST_41": "route:GET /headers",
+    "GENERATE_ID::HTTP_REQUEST_42": "route:GET /hidden-basic-auth/{user}/{passwd}",
+    "GENERATE_ID::HTTP_REQUEST_43": "route:GET /html",
+    "GENERATE_ID::HTTP_REQUEST_44": "route:GET /image",
+    "GENERATE_ID::HTTP_REQUEST_45": "route:GET /image/jpeg",
+    "GENERATE_ID::HTTP_REQUEST_46": "route:GET /image/png",
+    "GENERATE_ID::HTTP_REQUEST_47": "route:GET /image/svg",
+    "GENERATE_ID::HTTP_REQUEST_48": "route:GET /image/webp",
+    "GENERATE_ID::HTTP_REQUEST_49": "route:GET /ip",
+    "GENERATE_ID::HTTP_REQUEST_5": "route:PUT /anything",
+    "GENERATE_ID::HTTP_REQUEST_50": "route:GET /json",
+    "GENERATE_ID::HTTP_REQUEST_51": "route:GET /links/{n}/{offset}",
+    "GENERATE_ID::HTTP_REQUEST_52": "route:PATCH /patch",
+    "GENERATE_ID::HTTP_REQUEST_53": "route:POST /post",
+    "GENERATE_ID::HTTP_REQUEST_54": "route:PUT /put",
+    "GENERATE_ID::HTTP_REQUEST_55": "route:GET /range/{numbytes}",
+    "GENERATE_ID::HTTP_REQUEST_56": "route:DELETE /redirect-to",
+    "GENERATE_ID::HTTP_REQUEST_57": "route:GET /redirect-to",
+    "GENERATE_ID::HTTP_REQUEST_58": "route:PATCH /redirect-to",
+    "GENERATE_ID::HTTP_REQUEST_59": "route:POST /redirect-to",
+    "GENERATE_ID::HTTP_REQUEST_6": "route:TRACE /anything",
+    "GENERATE_ID::HTTP_REQUEST_60": "route:PUT /redirect-to",
+    "GENERATE_ID::HTTP_REQUEST_61": "route:TRACE /redirect-to",
+    "GENERATE_ID::HTTP_REQUEST_62": "route:GET /redirect/{n}",
+    "GENERATE_ID::HTTP_REQUEST_63": "route:GET /relative-redirect/{n}",
+    "GENERATE_ID::HTTP_REQUEST_64": "route:GET /response-headers",
+    "GENERATE_ID::HTTP_REQUEST_65": "route:POST /response-headers",
+    "GENERATE_ID::HTTP_REQUEST_66": "route:GET /robots.txt",
+    "GENERATE_ID::HTTP_REQUEST_67": "route:DELETE /status/{codes}",
+    "GENERATE_ID::HTTP_REQUEST_68": "route:GET /status/{codes}",
+    "GENERATE_ID::HTTP_REQUEST_69": "route:PATCH /status/{codes}",
+    "GENERATE_ID::HTTP_REQUEST_7": "route:DELETE /anything/{anything}",
+    "GENERATE_ID::HTTP_REQUEST_70": "route:POST /status/{codes}",
+    "GENERATE_ID::HTTP_REQUEST_71": "route:PUT /status/{codes}",
+    "GENERATE_ID::HTTP_REQUEST_72": "route:TRACE /status/{codes}",
+    "GENERATE_ID::HTTP_REQUEST_73": "route:GET /stream-bytes/{n}",
+    "GENERATE_ID::HTTP_REQUEST_74": "route:GET /stream/{n}",
+    "GENERATE_ID::HTTP_REQUEST_75": "route:GET /user-agent",
+    "GENERATE_ID::HTTP_REQUEST_76": "route:GET /uuid",
+    "GENERATE_ID::HTTP_REQUEST_77": "route:GET /xml",
+    "GENERATE_ID::HTTP_REQUEST_8": "route:GET /anything/{anything}",
+    "GENERATE_ID::HTTP_REQUEST_9": "route:PATCH /anything/{anything}",
+  },
+}
+`;
+
+exports[`importer-openapi > Snapshots real-world fixture nasa-apod.yaml 1`] = `
+{
+  "resources": {
+    "environments": [
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_0",
+        "model": "environment",
+        "name": "Global Variables",
+        "parentId": null,
+        "parentModel": "workspace",
+        "sortPriority": 0,
+        "variables": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_1",
+        "model": "environment",
+        "name": "Server 1",
+        "parentId": null,
+        "parentModel": "environment",
+        "sortPriority": 3,
+        "variables": [
+          {
+            "name": "baseUrl",
+            "value": "https://api.nasa.gov/planetary",
+          },
+          {
+            "name": "auth_api_key_key",
+            "value": "",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_2",
+        "model": "environment",
+        "name": "Server 2",
+        "parentId": null,
+        "parentModel": "environment",
+        "sortPriority": 4,
+        "variables": [
+          {
+            "name": "baseUrl",
+            "value": "http://api.nasa.gov/planetary",
+          },
+          {
+            "name": "auth_api_key_key",
+            "value": "",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "folders": [
+      {
+        "description": "An example tag
+
+Here's a link: https://example.com",
+        "folderId": null,
+        "id": "GENERATE_ID::FOLDER_0",
+        "model": "folder",
+        "name": "request tag",
+        "sortPriority": 1,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "grpcRequests": [],
+    "httpRequests": [
+      {
+        "authentication": {
+          "key": "api_key",
+          "location": "query",
+          "value": "\${[auth_api_key_key]}",
+        },
+        "authenticationType": "apikey",
+        "body": {},
+        "bodyType": null,
+        "description": "Returns the picture of the day
+
+Parameters:
+- date (query): The date of the APOD image to retrieve
+- hd (query): Retrieve the URL for the high resolution image
+
+Responses:
+- 200: successful operation
+- 400: Date must be between Jun 16, 1995 and Mar 28, 2019.",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "headers": [
+          {
+            "enabled": true,
+            "name": "Accept",
+            "value": "application/json",
+          },
+        ],
+        "id": "GENERATE_ID::HTTP_REQUEST_0",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Returns images",
+        "sortPriority": 2,
+        "url": "\${[baseUrl]}/apod",
+        "urlParameters": [
+          {
+            "enabled": false,
+            "name": "date",
+            "value": "",
+          },
+          {
+            "enabled": false,
+            "name": "hd",
+            "value": "false",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "websocketRequests": [],
+    "workspaces": [
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "description": "This endpoint structures the APOD imagery and associated metadata so that it can be repurposed for other applications. In addition, if the concept_tags parameter is set to True, then keywords derived from the image explanation are returned. These keywords could be used as auto-generated hashtags for twitter or instagram feeds; but generally help with discoverability of relevant imagery
+
+Contact: evan.t.yates@nasa.gov
+
+License: Apache 2.0 (http://www.apache.org/licenses/LICENSE-2.0.html)",
+        "id": "GENERATE_ID::WORKSPACE_0",
+        "model": "workspace",
+        "name": "APOD",
+      },
+    ],
+  },
+  "sourceKeys": {
+    "GENERATE_ID::FOLDER_0": "tag:request tag",
+    "GENERATE_ID::HTTP_REQUEST_0": "route:GET /apod",
+  },
+}
+`;
+
+exports[`importer-openapi > Snapshots real-world fixture xkcd.yaml 1`] = `
+{
+  "resources": {
+    "environments": [
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_0",
+        "model": "environment",
+        "name": "Global Variables",
+        "parentId": null,
+        "parentModel": "workspace",
+        "sortPriority": 0,
+        "variables": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_1",
+        "model": "environment",
+        "name": "Server 1",
+        "parentId": null,
+        "parentModel": "environment",
+        "sortPriority": 3,
+        "variables": [
+          {
+            "name": "baseUrl",
+            "value": "http://xkcd.com",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "folders": [],
+    "grpcRequests": [],
+    "httpRequests": [
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Fetch current comic and metadata.
+
+
+Responses:
+- 200: OK",
+        "folderId": null,
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_0",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Fetch current comic and metadata.",
+        "sortPriority": 1,
+        "url": "\${[baseUrl]}/info.0.json",
+        "urlParameters": [],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "body": {},
+        "bodyType": null,
+        "description": "Fetch comics and metadata  by comic id.
+
+
+Parameters:
+- comicId (path, required)
+
+Responses:
+- 200: OK",
+        "folderId": null,
+        "headers": [],
+        "id": "GENERATE_ID::HTTP_REQUEST_1",
+        "method": "GET",
+        "model": "http_request",
+        "name": "Fetch comics and metadata  by comic id.",
+        "sortPriority": 2,
+        "url": "\${[baseUrl]}/:comicId/info.0.json",
+        "urlParameters": [
+          {
+            "enabled": true,
+            "name": ":comicId",
+            "value": "0",
+          },
+        ],
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+      },
+    ],
+    "websocketRequests": [],
+    "workspaces": [
+      {
+        "authentication": {},
+        "authenticationType": null,
+        "description": "Webcomic of romance, sarcasm, math, and language.",
+        "id": "GENERATE_ID::WORKSPACE_0",
+        "model": "workspace",
+        "name": "XKCD",
+      },
+    ],
+  },
+  "sourceKeys": {
+    "GENERATE_ID::HTTP_REQUEST_0": "route:GET /info.0.json",
+    "GENERATE_ID::HTTP_REQUEST_1": "route:GET /{comicId}/info.0.json",
+  },
+}
+`;
diff --git a/plugins/importer-openapi/tests/fixtures/petstore.yaml b/plugins/importer-openapi/tests/fixtures/petstore.yaml
new file mode 100644
index 0000000..2186654
--- /dev/null
+++ b/plugins/importer-openapi/tests/fixtures/petstore.yaml
@@ -0,0 +1,819 @@
+openapi: 3.0.2
+servers:
+  - url: /v3
+info:
+  description: |-
+    This is a sample Pet Store Server based on the OpenAPI 3.0 specification.  You can find out more about
+    Swagger at [http://swagger.io](http://swagger.io). In the third iteration of the pet store, we've switched to the design first approach!
+    You can now help us improve the API whether it's by making changes to the definition itself or to the code.
+    That way, with time, we can improve the API in general, and expose some of the new features in OAS3.
+
+    Some useful links:
+    - [The Pet Store repository](https://github.com/swagger-api/swagger-petstore)
+    - [The source API definition for the Pet Store](https://github.com/swagger-api/swagger-petstore/blob/master/src/main/resources/openapi.yaml)
+  version: 1.0.20-SNAPSHOT
+  title: Swagger Petstore - OpenAPI 3.0
+  termsOfService: "http://swagger.io/terms/"
+  contact:
+    email: apiteam@swagger.io
+  license:
+    name: Apache 2.0
+    url: "http://www.apache.org/licenses/LICENSE-2.0.html"
+tags:
+  - name: pet
+    description: Everything about your Pets
+    externalDocs:
+      description: Find out more
+      url: "http://swagger.io"
+  - name: store
+    description: Access to Petstore orders
+    externalDocs:
+      description: Find out more about our store
+      url: "http://swagger.io"
+  - name: user
+    description: Operations about user
+paths:
+  /pet:
+    post:
+      tags:
+        - pet
+      summary: Add a new pet to the store
+      description: Add a new pet to the store
+      operationId: addPet
+      responses:
+        "200":
+          description: Successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: "#/components/schemas/Pet"
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Pet"
+        "405":
+          description: Invalid input
+      security:
+        - petstore_auth:
+            - "write:pets"
+            - "read:pets"
+      requestBody:
+        description: Create a new pet in the store
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/Pet"
+          application/xml:
+            schema:
+              $ref: "#/components/schemas/Pet"
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: "#/components/schemas/Pet"
+    put:
+      tags:
+        - pet
+      summary: Update an existing pet
+      description: Update an existing pet by Id
+      operationId: updatePet
+      responses:
+        "200":
+          description: Successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: "#/components/schemas/Pet"
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Pet"
+        "400":
+          description: Invalid ID supplied
+        "404":
+          description: Pet not found
+        "405":
+          description: Validation exception
+      security:
+        - petstore_auth:
+            - "write:pets"
+            - "read:pets"
+      requestBody:
+        description: Update an existent pet in the store
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/Pet"
+          application/xml:
+            schema:
+              $ref: "#/components/schemas/Pet"
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: "#/components/schemas/Pet"
+  /pet/findByStatus:
+    get:
+      tags:
+        - pet
+      summary: Finds Pets by status
+      description: Multiple status values can be provided with comma separated strings
+      operationId: findPetsByStatus
+      parameters:
+        - name: status
+          in: query
+          description: Status values that need to be considered for filter
+          required: false
+          explode: true
+          schema:
+            type: string
+            enum:
+              - available
+              - pending
+              - sold
+            default: available
+      responses:
+        "200":
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/Pet"
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/Pet"
+        "400":
+          description: Invalid status value
+      security:
+        - petstore_auth:
+            - "write:pets"
+            - "read:pets"
+  /pet/findByTags:
+    get:
+      tags:
+        - pet
+      summary: Finds Pets by tags
+      description: >-
+        Multiple tags can be provided with comma separated strings. Use tag1,
+        tag2, tag3 for testing.
+      operationId: findPetsByTags
+      parameters:
+        - name: tags
+          in: query
+          description: Tags to filter by
+          required: false
+          explode: true
+          schema:
+            type: array
+            items:
+              type: string
+      responses:
+        "200":
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/Pet"
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/Pet"
+        "400":
+          description: Invalid tag value
+      security:
+        - petstore_auth:
+            - "write:pets"
+            - "read:pets"
+  "/pet/{petId}":
+    get:
+      tags:
+        - pet
+      summary: Find pet by ID
+      description: Returns a single pet
+      operationId: getPetById
+      parameters:
+        - name: petId
+          in: path
+          description: ID of pet to return
+          required: true
+          schema:
+            type: integer
+            format: int64
+      responses:
+        "200":
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: "#/components/schemas/Pet"
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Pet"
+        "400":
+          description: Invalid ID supplied
+        "404":
+          description: Pet not found
+      security:
+        - api_key: []
+        - petstore_auth:
+            - "write:pets"
+            - "read:pets"
+    post:
+      tags:
+        - pet
+      summary: Updates a pet in the store with form data
+      description: ""
+      operationId: updatePetWithForm
+      parameters:
+        - name: petId
+          in: path
+          description: ID of pet that needs to be updated
+          required: true
+          schema:
+            type: integer
+            format: int64
+        - name: name
+          in: query
+          description: Name of pet that needs to be updated
+          schema:
+            type: string
+        - name: status
+          in: query
+          description: Status of pet that needs to be updated
+          schema:
+            type: string
+      responses:
+        "405":
+          description: Invalid input
+      security:
+        - petstore_auth:
+            - "write:pets"
+            - "read:pets"
+    delete:
+      tags:
+        - pet
+      summary: Deletes a pet
+      description: ""
+      operationId: deletePet
+      parameters:
+        - name: api_key
+          in: header
+          description: ""
+          required: false
+          schema:
+            type: string
+        - name: petId
+          in: path
+          description: Pet id to delete
+          required: true
+          schema:
+            type: integer
+            format: int64
+      responses:
+        "400":
+          description: Invalid pet value
+      security:
+        - petstore_auth:
+            - "write:pets"
+            - "read:pets"
+  "/pet/{petId}/uploadImage":
+    post:
+      tags:
+        - pet
+      summary: uploads an image
+      description: ""
+      operationId: uploadFile
+      parameters:
+        - name: petId
+          in: path
+          description: ID of pet to update
+          required: true
+          schema:
+            type: integer
+            format: int64
+        - name: additionalMetadata
+          in: query
+          description: Additional Metadata
+          required: false
+          schema:
+            type: string
+      responses:
+        "200":
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ApiResponse"
+      security:
+        - petstore_auth:
+            - "write:pets"
+            - "read:pets"
+      requestBody:
+        content:
+          application/octet-stream:
+            schema:
+              type: string
+              format: binary
+  /store/inventory:
+    get:
+      tags:
+        - store
+      summary: Returns pet inventories by status
+      description: Returns a map of status codes to quantities
+      operationId: getInventory
+      x-swagger-router-controller: OrderController
+      responses:
+        "200":
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties:
+                  type: integer
+                  format: int32
+      security:
+        - api_key: []
+  /store/order:
+    post:
+      tags:
+        - store
+      summary: Place an order for a pet
+      description: Place a new order in the store
+      operationId: placeOrder
+      x-swagger-router-controller: OrderController
+      responses:
+        "200":
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Order"
+        "405":
+          description: Invalid input
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/Order"
+          application/xml:
+            schema:
+              $ref: "#/components/schemas/Order"
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: "#/components/schemas/Order"
+  "/store/order/{orderId}":
+    get:
+      tags:
+        - store
+      summary: Find purchase order by ID
+      x-swagger-router-controller: OrderController
+      description: >-
+        For valid response try integer IDs with value <= 5 or > 10. Other values
+        will generate exceptions.
+      operationId: getOrderById
+      parameters:
+        - name: orderId
+          in: path
+          description: ID of order that needs to be fetched
+          required: true
+          schema:
+            type: integer
+            format: int64
+      responses:
+        "200":
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: "#/components/schemas/Order"
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Order"
+        "400":
+          description: Invalid ID supplied
+        "404":
+          description: Order not found
+    delete:
+      tags:
+        - store
+      summary: Delete purchase order by ID
+      x-swagger-router-controller: OrderController
+      description: >-
+        For valid response try integer IDs with value < 1000. Anything above
+        1000 or nonintegers will generate API errors
+      operationId: deleteOrder
+      parameters:
+        - name: orderId
+          in: path
+          description: ID of the order that needs to be deleted
+          required: true
+          schema:
+            type: integer
+            format: int64
+      responses:
+        "400":
+          description: Invalid ID supplied
+        "404":
+          description: Order not found
+  /user:
+    post:
+      tags:
+        - user
+      summary: Create user
+      description: This can only be done by the logged in user.
+      operationId: createUser
+      responses:
+        default:
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/User"
+            application/xml:
+              schema:
+                $ref: "#/components/schemas/User"
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/User"
+          application/xml:
+            schema:
+              $ref: "#/components/schemas/User"
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: "#/components/schemas/User"
+        description: Created user object
+  /user/createWithList:
+    post:
+      tags:
+        - user
+      summary: Creates list of users with given input array
+      description: "Creates list of users with given input array"
+      x-swagger-router-controller: UserController
+      operationId: createUsersWithListInput
+      responses:
+        "200":
+          description: Successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: "#/components/schemas/User"
+            application/json:
+              schema:
+                $ref: "#/components/schemas/User"
+        default:
+          description: successful operation
+      requestBody:
+        content:
+          application/json:
+            schema:
+              type: array
+              items:
+                $ref: "#/components/schemas/User"
+  /user/login:
+    get:
+      tags:
+        - user
+      summary: Logs user into the system
+      description: ""
+      operationId: loginUser
+      parameters:
+        - name: username
+          in: query
+          description: The user name for login
+          required: false
+          schema:
+            type: string
+        - name: password
+          in: query
+          description: The password for login in clear text
+          required: false
+          schema:
+            type: string
+      responses:
+        "200":
+          description: successful operation
+          headers:
+            X-Rate-Limit:
+              description: calls per hour allowed by the user
+              schema:
+                type: integer
+                format: int32
+            X-Expires-After:
+              description: date in UTC when token expires
+              schema:
+                type: string
+                format: date-time
+          content:
+            application/xml:
+              schema:
+                type: string
+            application/json:
+              schema:
+                type: string
+        "400":
+          description: Invalid username/password supplied
+  /user/logout:
+    get:
+      tags:
+        - user
+      summary: Logs out current logged in user session
+      description: ""
+      operationId: logoutUser
+      parameters: []
+      responses:
+        default:
+          description: successful operation
+  "/user/{username}":
+    get:
+      tags:
+        - user
+      summary: Get user by user name
+      description: ""
+      operationId: getUserByName
+      parameters:
+        - name: username
+          in: path
+          description: "The name that needs to be fetched. Use user1 for testing. "
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: "#/components/schemas/User"
+            application/json:
+              schema:
+                $ref: "#/components/schemas/User"
+        "400":
+          description: Invalid username supplied
+        "404":
+          description: User not found
+    put:
+      tags:
+        - user
+      summary: Update user
+      x-swagger-router-controller: UserController
+      description: This can only be done by the logged in user.
+      operationId: updateUser
+      parameters:
+        - name: username
+          in: path
+          description: name that needs to be updated
+          required: true
+          schema:
+            type: string
+      responses:
+        default:
+          description: successful operation
+      requestBody:
+        description: Update an existent user in the store
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/User"
+          application/xml:
+            schema:
+              $ref: "#/components/schemas/User"
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: "#/components/schemas/User"
+    delete:
+      tags:
+        - user
+      summary: Delete user
+      description: This can only be done by the logged in user.
+      operationId: deleteUser
+      parameters:
+        - name: username
+          in: path
+          description: The name that needs to be deleted
+          required: true
+          schema:
+            type: string
+      responses:
+        "400":
+          description: Invalid username supplied
+        "404":
+          description: User not found
+externalDocs:
+  description: Find out more about Swagger
+  url: "http://swagger.io"
+components:
+  schemas:
+    Order:
+      x-swagger-router-model: io.swagger.petstore.model.Order
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 10
+        petId:
+          type: integer
+          format: int64
+          example: 198772
+        quantity:
+          type: integer
+          format: int32
+          example: 7
+        shipDate:
+          type: string
+          format: date-time
+        status:
+          type: string
+          description: Order Status
+          enum:
+            - placed
+            - approved
+            - delivered
+          example: approved
+        complete:
+          type: boolean
+      xml:
+        name: order
+      type: object
+    Customer:
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 100000
+        username:
+          type: string
+          example: fehguy
+        address:
+          type: array
+          items:
+            $ref: "#/components/schemas/Address"
+          xml:
+            wrapped: true
+            name: addresses
+      xml:
+        name: customer
+      type: object
+    Address:
+      properties:
+        street:
+          type: string
+          example: 437 Lytton
+        city:
+          type: string
+          example: Palo Alto
+        state:
+          type: string
+          example: CA
+        zip:
+          type: string
+          example: 94301
+      xml:
+        name: address
+      type: object
+    Category:
+      x-swagger-router-model: io.swagger.petstore.model.Category
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 1
+        name:
+          type: string
+          example: Dogs
+      xml:
+        name: category
+      type: object
+    User:
+      x-swagger-router-model: io.swagger.petstore.model.User
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 10
+        username:
+          type: string
+          example: theUser
+        firstName:
+          type: string
+          example: John
+        lastName:
+          type: string
+          example: James
+        email:
+          type: string
+          example: john@email.com
+        password:
+          type: string
+          example: 12345
+        phone:
+          type: string
+          example: 12345
+        userStatus:
+          type: integer
+          format: int32
+          example: 1
+          description: User Status
+      xml:
+        name: user
+      type: object
+    Tag:
+      x-swagger-router-model: io.swagger.petstore.model.Tag
+      properties:
+        id:
+          type: integer
+          format: int64
+        name:
+          type: string
+      xml:
+        name: tag
+      type: object
+    Pet:
+      x-swagger-router-model: io.swagger.petstore.model.Pet
+      required:
+        - name
+        - photoUrls
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 10
+        name:
+          type: string
+          example: doggie
+        category:
+          $ref: "#/components/schemas/Category"
+        photoUrls:
+          type: array
+          xml:
+            wrapped: true
+          items:
+            type: string
+            xml:
+              name: photoUrl
+        tags:
+          type: array
+          xml:
+            wrapped: true
+          items:
+            $ref: "#/components/schemas/Tag"
+            xml:
+              name: tag
+        status:
+          type: string
+          description: pet status in the store
+          enum:
+            - available
+            - pending
+            - sold
+      xml:
+        name: pet
+      type: object
+    ApiResponse:
+      properties:
+        code:
+          type: integer
+          format: int32
+        type:
+          type: string
+        message:
+          type: string
+      xml:
+        name: "##default"
+      type: object
+  requestBodies:
+    Pet:
+      content:
+        application/json:
+          schema:
+            $ref: "#/components/schemas/Pet"
+        application/xml:
+          schema:
+            $ref: "#/components/schemas/Pet"
+      description: Pet object that needs to be added to the store
+    UserArray:
+      content:
+        application/json:
+          schema:
+            type: array
+            items:
+              $ref: "#/components/schemas/User"
+      description: List of user object
+  securitySchemes:
+    petstore_auth:
+      type: oauth2
+      flows:
+        implicit:
+          authorizationUrl: "https://petstore.swagger.io/oauth/authorize"
+          scopes:
+            "write:pets": modify pets in your account
+            "read:pets": read your pets
+    api_key:
+      type: apiKey
+      name: api_key
+      in: header
diff --git a/plugins/importer-openapi/tests/fixtures/real-world/SOURCES.md b/plugins/importer-openapi/tests/fixtures/real-world/SOURCES.md
new file mode 100644
index 0000000..f4bd7af
--- /dev/null
+++ b/plugins/importer-openapi/tests/fixtures/real-world/SOURCES.md
@@ -0,0 +1,8 @@
+# Real-World OpenAPI Fixtures
+
+These fixtures were copied from the public APIs.guru OpenAPI directory:
+
+- `apis-guru.yaml`: https://api.apis.guru/v2/specs/apis.guru/2.2.0/openapi.yaml
+- `httpbin.yaml`: https://api.apis.guru/v2/specs/httpbin.org/0.9.2/openapi.yaml
+- `nasa-apod.yaml`: https://api.apis.guru/v2/specs/nasa.gov/apod/1.0.0/openapi.yaml
+- `xkcd.yaml`: https://api.apis.guru/v2/specs/xkcd.com/1.0.0/openapi.yaml
diff --git a/plugins/importer-openapi/tests/fixtures/real-world/apis-guru.yaml b/plugins/importer-openapi/tests/fixtures/real-world/apis-guru.yaml
new file mode 100644
index 0000000..4dc5db1
--- /dev/null
+++ b/plugins/importer-openapi/tests/fixtures/real-world/apis-guru.yaml
@@ -0,0 +1,399 @@
+openapi: 3.0.0
+servers:
+  - url: https://api.apis.guru/v2
+info:
+  contact:
+    email: mike.ralphson@gmail.com
+    name: APIs.guru
+    url: https://APIs.guru
+  description: |
+    Wikipedia for Web APIs. Repository of API definitions in OpenAPI format.
+    **Warning**: If you want to be notified about changes in advance please join our [Slack channel](https://join.slack.com/t/mermade/shared_invite/zt-g78g7xir-MLE_CTCcXCdfJfG3CJe9qA).
+    Client sample: [[Demo]](https://apis.guru/simple-ui) [[Repo]](https://github.com/APIs-guru/simple-ui)
+  license:
+    name: CC0 1.0
+    url: https://github.com/APIs-guru/openapi-directory#licenses
+  title: APIs.guru
+  version: 2.2.0
+  x-apisguru-categories:
+    - open_data
+    - developer_tools
+  x-logo:
+    url: https://api.apis.guru/v2/cache/logo/https_apis.guru_branding_logo_vertical.svg
+  x-origin:
+    - format: openapi
+      url: https://api.apis.guru/v2/openapi.yaml
+      version: "3.0"
+  x-providerName: apis.guru
+  x-tags:
+    - API
+    - Catalog
+    - Directory
+    - REST
+    - Swagger
+    - OpenAPI
+externalDocs:
+  url: https://github.com/APIs-guru/openapi-directory/blob/master/API.md
+security: []
+tags:
+  - description: Actions relating to APIs in the collection
+    name: APIs
+paths:
+  /list.json:
+    get:
+      description: |
+        List all APIs in the directory.
+        Returns links to the OpenAPI definitions for each API in the directory.
+        If API exist in multiple versions `preferred` one is explicitly marked.
+        Some basic info from the OpenAPI definition is cached inside each object.
+        This allows you to generate some simple views without needing to fetch the OpenAPI definition for each API.
+      operationId: listAPIs
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/APIs"
+          description: OK
+      summary: List all APIs
+      tags:
+        - APIs
+  /metrics.json:
+    get:
+      description: |
+        Some basic metrics for the entire directory.
+        Just stunning numbers to put on a front page and are intended purely for WoW effect :)
+      operationId: getMetrics
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Metrics"
+          description: OK
+      summary: Get basic metrics
+      tags:
+        - APIs
+  /providers.json:
+    get:
+      description: |
+        List all the providers in the directory
+      operationId: getProviders
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    items:
+                      minLength: 1
+                      type: string
+                    minItems: 1
+                    type: array
+                type: object
+          description: OK
+      summary: List all providers
+      tags:
+        - APIs
+  "/specs/{provider}/{api}.json":
+    get:
+      description: Returns the API entry for one specific version of an API where there is no serviceName.
+      operationId: getAPI
+      parameters:
+        - $ref: "#/components/parameters/provider"
+        - $ref: "#/components/parameters/api"
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/API"
+          description: OK
+      summary: Retrieve one version of a particular API
+      tags:
+        - APIs
+  "/specs/{provider}/{service}/{api}.json":
+    get:
+      description: Returns the API entry for one specific version of an API where there is a serviceName.
+      operationId: getServiceAPI
+      parameters:
+        - $ref: "#/components/parameters/provider"
+        - in: path
+          name: service
+          required: true
+          schema:
+            example: graph
+            maxLength: 255
+            minLength: 1
+            type: string
+        - $ref: "#/components/parameters/api"
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/API"
+          description: OK
+      summary: Retrieve one version of a particular API with a serviceName.
+      tags:
+        - APIs
+  "/{provider}.json":
+    get:
+      description: |
+        List all APIs in the directory for a particular providerName
+        Returns links to the individual API entry for each API.
+      operationId: getProvider
+      parameters:
+        - $ref: "#/components/parameters/provider"
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/APIs"
+          description: OK
+      summary: List all APIs for a particular provider
+      tags:
+        - APIs
+  "/{provider}/services.json":
+    get:
+      description: |
+        List all serviceNames in the directory for a particular providerName
+      operationId: getServices
+      parameters:
+        - $ref: "#/components/parameters/provider"
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    items:
+                      minLength: 0
+                      type: string
+                    minItems: 1
+                    type: array
+                type: object
+          description: OK
+      summary: List all serviceNames for a particular provider
+      tags:
+        - APIs
+components:
+  parameters:
+    api:
+      in: path
+      name: api
+      required: true
+      schema:
+        example: 2.1.0
+        maxLength: 255
+        minLength: 1
+        type: string
+    provider:
+      in: path
+      name: provider
+      required: true
+      schema:
+        example: apis.guru
+        maxLength: 255
+        minLength: 1
+        type: string
+  schemas:
+    API:
+      additionalProperties: false
+      description: Meta information about API
+      properties:
+        added:
+          description: Timestamp when the API was first added to the directory
+          format: date-time
+          type: string
+        preferred:
+          description: Recommended version
+          type: string
+        versions:
+          additionalProperties:
+            $ref: "#/components/schemas/ApiVersion"
+          description: List of supported versions of the API
+          minProperties: 1
+          type: object
+      required:
+        - added
+        - preferred
+        - versions
+      type: object
+    APIs:
+      additionalProperties:
+        $ref: "#/components/schemas/API"
+      description: |
+        List of API details.
+        It is a JSON object with API IDs(`<provider>[:<service>]`) as keys.
+      example:
+        googleapis.com:drive:
+          added: 2015-02-22T20:00:45.000Z
+          preferred: v3
+          versions:
+            v2:
+              added: 2015-02-22T20:00:45.000Z
+              info:
+                title: Drive
+                version: v2
+                x-apiClientRegistration:
+                  url: https://console.developers.google.com
+                x-logo:
+                  url: https://api.apis.guru/v2/cache/logo/https_www.gstatic.com_images_icons_material_product_2x_drive_32dp.png
+                x-origin:
+                  format: google
+                  url: https://www.googleapis.com/discovery/v1/apis/drive/v2/rest
+                  version: v1
+                x-preferred: false
+                x-providerName: googleapis.com
+                x-serviceName: drive
+              swaggerUrl: https://api.apis.guru/v2/specs/googleapis.com/drive/v2/swagger.json
+              swaggerYamlUrl: https://api.apis.guru/v2/specs/googleapis.com/drive/v2/swagger.yaml
+              updated: 2016-06-17T00:21:44.000Z
+            v3:
+              added: 2015-12-12T00:25:13.000Z
+              info:
+                title: Drive
+                version: v3
+                x-apiClientRegistration:
+                  url: https://console.developers.google.com
+                x-logo:
+                  url: https://api.apis.guru/v2/cache/logo/https_www.gstatic.com_images_icons_material_product_2x_drive_32dp.png
+                x-origin:
+                  format: google
+                  url: https://www.googleapis.com/discovery/v1/apis/drive/v3/rest
+                  version: v1
+                x-preferred: true
+                x-providerName: googleapis.com
+                x-serviceName: drive
+              swaggerUrl: https://api.apis.guru/v2/specs/googleapis.com/drive/v3/swagger.json
+              swaggerYamlUrl: https://api.apis.guru/v2/specs/googleapis.com/drive/v3/swagger.yaml
+              updated: 2016-06-17T00:21:44.000Z
+      minProperties: 1
+      type: object
+    ApiVersion:
+      additionalProperties: false
+      properties:
+        added:
+          description: Timestamp when the version was added
+          format: date-time
+          type: string
+        externalDocs:
+          description: Copy of `externalDocs` section from OpenAPI definition
+          minProperties: 1
+          type: object
+        info:
+          description: Copy of `info` section from OpenAPI definition
+          minProperties: 1
+          type: object
+        link:
+          description: Link to the individual API entry for this API
+          format: url
+          type: string
+        openapiVer:
+          description: The value of the `openapi` or `swagger` property of the source definition
+          type: string
+        swaggerUrl:
+          description: URL to OpenAPI definition in JSON format
+          format: url
+          type: string
+        swaggerYamlUrl:
+          description: URL to OpenAPI definition in YAML format
+          format: url
+          type: string
+        updated:
+          description: Timestamp when the version was updated
+          format: date-time
+          type: string
+      required:
+        - added
+        - updated
+        - swaggerUrl
+        - swaggerYamlUrl
+        - info
+        - openapiVer
+      type: object
+    Metrics:
+      additionalProperties: false
+      description: List of basic metrics
+      example:
+        datasets: []
+        fixedPct: 22
+        fixes: 81119
+        invalid: 598
+        issues: 28
+        numAPIs: 2501
+        numDrivers: 10
+        numEndpoints: 106448
+        numProviders: 659
+        numSpecs: 3329
+        stars: 2429
+        thisWeek:
+          added: 45
+          updated: 171
+        unofficial: 25
+        unreachable: 123
+      properties:
+        datasets:
+          description: Data used for charting etc
+          items: {}
+          type: array
+        fixedPct:
+          description: Percentage of all APIs where auto fixes have been applied
+          type: integer
+        fixes:
+          description: Total number of fixes applied across all APIs
+          type: integer
+        invalid:
+          description: Number of newly invalid APIs
+          type: integer
+        issues:
+          description: Open GitHub issues on our main repo
+          type: integer
+        numAPIs:
+          description: Number of unique APIs
+          minimum: 1
+          type: integer
+        numDrivers:
+          description: Number of methods of API retrieval
+          type: integer
+        numEndpoints:
+          description: Total number of endpoints inside all definitions
+          minimum: 1
+          type: integer
+        numProviders:
+          description: Number of API providers in directory
+          type: integer
+        numSpecs:
+          description: Number of API definitions including different versions of the same API
+          minimum: 1
+          type: integer
+        stars:
+          description: GitHub stars for our main repo
+          type: integer
+        thisWeek:
+          description: Summary totals for the last 7 days
+          properties:
+            added:
+              description: APIs added in the last week
+              type: integer
+            updated:
+              description: APIs updated in the last week
+              type: integer
+          type: object
+        unofficial:
+          description: Number of unofficial APIs
+          type: integer
+        unreachable:
+          description: Number of unreachable (4XX,5XX status) APIs
+          type: integer
+      required:
+        - numSpecs
+        - numAPIs
+        - numEndpoints
+      type: object
+x-optic-standard: "@febf8ac6-ee67-4565-b45a-5c85a469dca7/Fz6KU3_wMIO5iJ6_VUZ30"
+x-optic-url: https://app.useoptic.com/organizations/febf8ac6-ee67-4565-b45a-5c85a469dca7/apis/_0fKWqUvhs9ssYNkq1k-c
diff --git a/plugins/importer-openapi/tests/fixtures/real-world/httpbin.yaml b/plugins/importer-openapi/tests/fixtures/real-world/httpbin.yaml
new file mode 100644
index 0000000..25e52a2
--- /dev/null
+++ b/plugins/importer-openapi/tests/fixtures/real-world/httpbin.yaml
@@ -0,0 +1,1121 @@
+openapi: 3.0.0
+servers:
+  - url: https://httpbin.org
+info:
+  contact:
+    email: me@kennethreitz.org
+    url: https://kennethreitz.org
+    x-responsibleDeveloper: Kenneth Reitz
+    x-responsibleOrganization: Kenneth Reitz
+  description: "A simple HTTP Request & Response Service.<br/> <br/> <b>Run locally: </b> <code>$ docker run -p 80:80 kennethreitz/httpbin</code>"
+  title: httpbin.org
+  version: 0.9.2
+  x-apisguru-categories:
+    - developer_tools
+  x-origin:
+    - format: swagger
+      url: http://httpbin.org/spec.json
+      version: "2.0"
+  x-providerName: httpbin.org
+  x-logo:
+    url: https://api.apis.guru/v2/cache/logo/https_apis.guru_assets_images_no-logo.svg
+tags:
+  - description: Testing different HTTP verbs
+    name: HTTP Methods
+  - description: Auth methods
+    name: Auth
+  - description: Generates responses with given status code
+    name: Status codes
+  - description: Inspect the request data
+    name: Request inspection
+  - description: Inspect the response data like caching and headers
+    name: Response inspection
+  - description: Returns responses in different data formats
+    name: Response formats
+  - description: Generates random and dynamic data
+    name: Dynamic data
+  - description: Creates, reads and deletes Cookies
+    name: Cookies
+  - description: Returns different image formats
+    name: Images
+  - description: Returns different redirect responses
+    name: Redirects
+  - description: Returns anything that is passed to request
+    name: Anything
+paths:
+  "/absolute-redirect/{n}":
+    get:
+      parameters:
+        - in: path
+          name: n
+          required: true
+          schema:
+            type: integer
+      responses:
+        "302":
+          description: A redirection.
+      summary: Absolutely 302 Redirects n times.
+      tags:
+        - Redirects
+  /anything:
+    delete:
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    get:
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    patch:
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    post:
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    put:
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    trace:
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+  "/anything/{anything}":
+    delete:
+      parameters:
+        - description: Automatically added
+          in: path
+          name: anything
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    get:
+      parameters:
+        - description: Automatically added
+          in: path
+          name: anything
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    patch:
+      parameters:
+        - description: Automatically added
+          in: path
+          name: anything
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    post:
+      parameters:
+        - description: Automatically added
+          in: path
+          name: anything
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    put:
+      parameters:
+        - description: Automatically added
+          in: path
+          name: anything
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+    trace:
+      parameters:
+        - description: Automatically added
+          in: path
+          name: anything
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Anything passed in request
+      summary: Returns anything passed in request data.
+      tags:
+        - Anything
+  "/base64/{value}":
+    get:
+      parameters:
+        - in: path
+          name: value
+          required: true
+          schema:
+            default: SFRUUEJJTiBpcyBhd2Vzb21l
+            type: string
+      responses:
+        "200":
+          description: Decoded base64 content.
+      summary: Decodes base64url-encoded string.
+      tags:
+        - Dynamic data
+  "/basic-auth/{user}/{passwd}":
+    get:
+      parameters:
+        - in: path
+          name: user
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: passwd
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Sucessful authentication.
+        "401":
+          description: Unsuccessful authentication.
+      summary: Prompts the user for authorization using HTTP Basic Auth.
+      tags:
+        - Auth
+  /bearer:
+    get:
+      parameters:
+        - in: header
+          name: Authorization
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Sucessful authentication.
+        "401":
+          description: Unsuccessful authentication.
+      summary: Prompts the user for authorization using bearer authentication.
+      tags:
+        - Auth
+  /brotli:
+    get:
+      responses:
+        "200":
+          description: Brotli-encoded data.
+      summary: Returns Brotli-encoded data.
+      tags:
+        - Response formats
+  "/bytes/{n}":
+    get:
+      parameters:
+        - in: path
+          name: n
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: Bytes.
+      summary: Returns n random bytes generated with given seed
+      tags:
+        - Dynamic data
+  /cache:
+    get:
+      parameters:
+        - in: header
+          name: If-Modified-Since
+          schema:
+            type: string
+        - in: header
+          name: If-None-Match
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Cached response
+        "304":
+          description: Modified
+      summary: Returns a 304 if an If-Modified-Since header or If-None-Match is present. Returns the same as a GET otherwise.
+      tags:
+        - Response inspection
+  "/cache/{value}":
+    get:
+      parameters:
+        - in: path
+          name: value
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: Cache control set
+      summary: Sets a Cache-Control header for n seconds.
+      tags:
+        - Response inspection
+  /cookies:
+    get:
+      responses:
+        "200":
+          description: Set cookies.
+      summary: Returns cookie data.
+      tags:
+        - Cookies
+  /cookies/delete:
+    get:
+      parameters:
+        - allowEmptyValue: true
+          explode: true
+          in: query
+          name: freeform
+          schema:
+            additionalProperties:
+              type: string
+            type: string
+          style: form
+      responses:
+        "200":
+          description: Redirect to cookie list
+      summary: Deletes cookie(s) as provided by the query string and redirects to cookie list.
+      tags:
+        - Cookies
+  /cookies/set:
+    get:
+      parameters:
+        - allowEmptyValue: true
+          explode: true
+          in: query
+          name: freeform
+          schema:
+            additionalProperties:
+              type: string
+            type: string
+          style: form
+      responses:
+        "200":
+          description: Redirect to cookie list
+      summary: Sets cookie(s) as provided by the query string and redirects to cookie list.
+      tags:
+        - Cookies
+  "/cookies/set/{name}/{value}":
+    get:
+      parameters:
+        - in: path
+          name: name
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: value
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Set cookies and redirects to cookie list.
+      summary: Sets a cookie and redirects to cookie list.
+      tags:
+        - Cookies
+  /deflate:
+    get:
+      responses:
+        "200":
+          description: Defalte-encoded data.
+      summary: Returns Deflate-encoded data.
+      tags:
+        - Response formats
+  "/delay/{delay}":
+    delete:
+      parameters:
+        - in: path
+          name: delay
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: A delayed response.
+      summary: Returns a delayed response (max of 10 seconds).
+      tags:
+        - Dynamic data
+    get:
+      parameters:
+        - in: path
+          name: delay
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: A delayed response.
+      summary: Returns a delayed response (max of 10 seconds).
+      tags:
+        - Dynamic data
+    patch:
+      parameters:
+        - in: path
+          name: delay
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: A delayed response.
+      summary: Returns a delayed response (max of 10 seconds).
+      tags:
+        - Dynamic data
+    post:
+      parameters:
+        - in: path
+          name: delay
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: A delayed response.
+      summary: Returns a delayed response (max of 10 seconds).
+      tags:
+        - Dynamic data
+    put:
+      parameters:
+        - in: path
+          name: delay
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: A delayed response.
+      summary: Returns a delayed response (max of 10 seconds).
+      tags:
+        - Dynamic data
+    trace:
+      parameters:
+        - in: path
+          name: delay
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: A delayed response.
+      summary: Returns a delayed response (max of 10 seconds).
+      tags:
+        - Dynamic data
+  /delete:
+    delete:
+      responses:
+        "200":
+          description: The request's DELETE parameters.
+      summary: The request's DELETE parameters.
+      tags:
+        - HTTP Methods
+  /deny:
+    get:
+      responses:
+        "200":
+          description: Denied message
+      summary: Returns page denied by robots.txt rules.
+      tags:
+        - Response formats
+  "/digest-auth/{qop}/{user}/{passwd}":
+    get:
+      parameters:
+        - description: auth or auth-int
+          in: path
+          name: qop
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: user
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: passwd
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Sucessful authentication.
+        "401":
+          description: Unsuccessful authentication.
+      summary: Prompts the user for authorization using Digest Auth.
+      tags:
+        - Auth
+  "/digest-auth/{qop}/{user}/{passwd}/{algorithm}":
+    get:
+      parameters:
+        - description: auth or auth-int
+          in: path
+          name: qop
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: user
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: passwd
+          required: true
+          schema:
+            type: string
+        - description: MD5, SHA-256, SHA-512
+          in: path
+          name: algorithm
+          required: true
+          schema:
+            default: MD5
+            type: string
+      responses:
+        "200":
+          description: Sucessful authentication.
+        "401":
+          description: Unsuccessful authentication.
+      summary: Prompts the user for authorization using Digest Auth + Algorithm.
+      tags:
+        - Auth
+  "/digest-auth/{qop}/{user}/{passwd}/{algorithm}/{stale_after}":
+    get:
+      description: |
+        allow settings the stale_after argument.
+      parameters:
+        - description: auth or auth-int
+          in: path
+          name: qop
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: user
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: passwd
+          required: true
+          schema:
+            type: string
+        - description: MD5, SHA-256, SHA-512
+          in: path
+          name: algorithm
+          required: true
+          schema:
+            default: MD5
+            type: string
+        - in: path
+          name: stale_after
+          required: true
+          schema:
+            default: never
+            type: string
+      responses:
+        "200":
+          description: Sucessful authentication.
+        "401":
+          description: Unsuccessful authentication.
+      summary: Prompts the user for authorization using Digest Auth + Algorithm.
+      tags:
+        - Auth
+  /drip:
+    get:
+      parameters:
+        - description: The amount of time (in seconds) over which to drip each byte
+          in: query
+          name: duration
+          required: false
+          schema:
+            default: 2
+            type: number
+        - description: The number of bytes to respond with
+          in: query
+          name: numbytes
+          required: false
+          schema:
+            default: 10
+            type: integer
+        - description: The response code that will be returned
+          in: query
+          name: code
+          required: false
+          schema:
+            default: 200
+            type: integer
+        - description: The amount of time (in seconds) to delay before responding
+          in: query
+          name: delay
+          required: false
+          schema:
+            default: 2
+            type: number
+      responses:
+        "200":
+          description: A dripped response.
+      summary: Drips data over a duration after an optional initial delay.
+      tags:
+        - Dynamic data
+  /encoding/utf8:
+    get:
+      responses:
+        "200":
+          description: Encoded UTF-8 content.
+      summary: Returns a UTF-8 encoded body.
+      tags:
+        - Response formats
+  "/etag/{etag}":
+    get:
+      parameters:
+        - in: header
+          name: If-None-Match
+          schema:
+            type: string
+        - in: header
+          name: If-Match
+          schema:
+            type: string
+        - description: Automatically added
+          in: path
+          name: etag
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Normal response
+        "412":
+          description: match
+      summary: Assumes the resource has the given etag and responds to If-None-Match and If-Match headers appropriately.
+      tags:
+        - Response inspection
+  /get:
+    get:
+      responses:
+        "200":
+          description: The request's query parameters.
+      summary: The request's query parameters.
+      tags:
+        - HTTP Methods
+  /gzip:
+    get:
+      responses:
+        "200":
+          description: GZip-encoded data.
+      summary: Returns GZip-encoded data.
+      tags:
+        - Response formats
+  /headers:
+    get:
+      responses:
+        "200":
+          description: The request's headers.
+      summary: Return the incoming request's HTTP headers.
+      tags:
+        - Request inspection
+  "/hidden-basic-auth/{user}/{passwd}":
+    get:
+      parameters:
+        - in: path
+          name: user
+          required: true
+          schema:
+            type: string
+        - in: path
+          name: passwd
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Sucessful authentication.
+        "404":
+          description: Unsuccessful authentication.
+      summary: Prompts the user for authorization using HTTP Basic Auth.
+      tags:
+        - Auth
+  /html:
+    get:
+      responses:
+        "200":
+          description: An HTML page.
+      summary: Returns a simple HTML document.
+      tags:
+        - Response formats
+  /image:
+    get:
+      responses:
+        "200":
+          description: An image.
+      summary: Returns a simple image of the type suggest by the Accept header.
+      tags:
+        - Images
+  /image/jpeg:
+    get:
+      responses:
+        "200":
+          description: A JPEG image.
+      summary: Returns a simple JPEG image.
+      tags:
+        - Images
+  /image/png:
+    get:
+      responses:
+        "200":
+          description: A PNG image.
+      summary: Returns a simple PNG image.
+      tags:
+        - Images
+  /image/svg:
+    get:
+      responses:
+        "200":
+          description: An SVG image.
+      summary: Returns a simple SVG image.
+      tags:
+        - Images
+  /image/webp:
+    get:
+      responses:
+        "200":
+          description: A WEBP image.
+      summary: Returns a simple WEBP image.
+      tags:
+        - Images
+  /ip:
+    get:
+      responses:
+        "200":
+          description: The Requester's IP Address.
+      summary: Returns the requester's IP Address.
+      tags:
+        - Request inspection
+  /json:
+    get:
+      responses:
+        "200":
+          description: An JSON document.
+      summary: Returns a simple JSON document.
+      tags:
+        - Response formats
+  "/links/{n}/{offset}":
+    get:
+      parameters:
+        - in: path
+          name: n
+          required: true
+          schema:
+            type: integer
+        - in: path
+          name: offset
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: HTML links.
+      summary: Generate a page containing n links to other pages which do the same.
+      tags:
+        - Dynamic data
+  /patch:
+    patch:
+      responses:
+        "200":
+          description: The request's PATCH parameters.
+      summary: The request's PATCH parameters.
+      tags:
+        - HTTP Methods
+  /post:
+    post:
+      responses:
+        "200":
+          description: The request's POST parameters.
+      summary: The request's POST parameters.
+      tags:
+        - HTTP Methods
+  /put:
+    put:
+      responses:
+        "200":
+          description: The request's PUT parameters.
+      summary: The request's PUT parameters.
+      tags:
+        - HTTP Methods
+  "/range/{numbytes}":
+    get:
+      parameters:
+        - in: path
+          name: numbytes
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: Bytes.
+      summary: Streams n random bytes generated with given seed, at given chunk size per packet.
+      tags:
+        - Dynamic data
+  /redirect-to:
+    delete:
+      responses:
+        "302":
+          description: A redirection.
+      summary: 302/3XX Redirects to the given URL.
+      tags:
+        - Redirects
+    get:
+      parameters:
+        - in: query
+          name: url
+          required: true
+          schema:
+            type: string
+        - in: query
+          name: status_code
+          schema:
+            type: integer
+      responses:
+        "302":
+          description: A redirection.
+      summary: 302/3XX Redirects to the given URL.
+      tags:
+        - Redirects
+    patch:
+      responses:
+        "302":
+          description: A redirection.
+      summary: 302/3XX Redirects to the given URL.
+      tags:
+        - Redirects
+    post:
+      requestBody:
+        $ref: "#/components/requestBodies/postRedirectTo"
+      responses:
+        "302":
+          description: A redirection.
+      summary: 302/3XX Redirects to the given URL.
+      tags:
+        - Redirects
+    put:
+      requestBody:
+        $ref: "#/components/requestBodies/postRedirectTo"
+      responses:
+        "302":
+          description: A redirection.
+      summary: 302/3XX Redirects to the given URL.
+      tags:
+        - Redirects
+    trace:
+      responses:
+        "302":
+          description: A redirection.
+      summary: 302/3XX Redirects to the given URL.
+      tags:
+        - Redirects
+  "/redirect/{n}":
+    get:
+      parameters:
+        - in: path
+          name: n
+          required: true
+          schema:
+            type: integer
+      responses:
+        "302":
+          description: A redirection.
+      summary: 302 Redirects n times.
+      tags:
+        - Redirects
+  "/relative-redirect/{n}":
+    get:
+      parameters:
+        - in: path
+          name: n
+          required: true
+          schema:
+            type: integer
+      responses:
+        "302":
+          description: A redirection.
+      summary: Relatively 302 Redirects n times.
+      tags:
+        - Redirects
+  /response-headers:
+    get:
+      parameters:
+        - allowEmptyValue: true
+          explode: true
+          in: query
+          name: freeform
+          schema:
+            additionalProperties:
+              type: string
+            type: string
+          style: form
+      responses:
+        "200":
+          description: Response headers
+      summary: Returns a set of response headers from the query string.
+      tags:
+        - Response inspection
+    post:
+      parameters:
+        - allowEmptyValue: true
+          explode: true
+          in: query
+          name: freeform
+          schema:
+            additionalProperties:
+              type: string
+            type: string
+          style: form
+      responses:
+        "200":
+          description: Response headers
+      summary: Returns a set of response headers from the query string.
+      tags:
+        - Response inspection
+  /robots.txt:
+    get:
+      responses:
+        "200":
+          description: Robots file
+      summary: Returns some robots.txt rules.
+      tags:
+        - Response formats
+  "/status/{codes}":
+    delete:
+      parameters:
+        - in: path
+          name: codes
+          required: true
+          schema:
+            type: string
+      responses:
+        "100":
+          description: Informational responses
+        "200":
+          description: Success
+        "300":
+          description: Redirection
+        "400":
+          description: Client Errors
+        "500":
+          description: Server Errors
+      summary: Return status code or random status code if more than one are given
+      tags:
+        - Status codes
+    get:
+      parameters:
+        - in: path
+          name: codes
+          required: true
+          schema:
+            type: string
+      responses:
+        "100":
+          description: Informational responses
+        "200":
+          description: Success
+        "300":
+          description: Redirection
+        "400":
+          description: Client Errors
+        "500":
+          description: Server Errors
+      summary: Return status code or random status code if more than one are given
+      tags:
+        - Status codes
+    patch:
+      parameters:
+        - in: path
+          name: codes
+          required: true
+          schema:
+            type: string
+      responses:
+        "100":
+          description: Informational responses
+        "200":
+          description: Success
+        "300":
+          description: Redirection
+        "400":
+          description: Client Errors
+        "500":
+          description: Server Errors
+      summary: Return status code or random status code if more than one are given
+      tags:
+        - Status codes
+    post:
+      parameters:
+        - in: path
+          name: codes
+          required: true
+          schema:
+            type: string
+      responses:
+        "100":
+          description: Informational responses
+        "200":
+          description: Success
+        "300":
+          description: Redirection
+        "400":
+          description: Client Errors
+        "500":
+          description: Server Errors
+      summary: Return status code or random status code if more than one are given
+      tags:
+        - Status codes
+    put:
+      parameters:
+        - in: path
+          name: codes
+          required: true
+          schema:
+            type: string
+      responses:
+        "100":
+          description: Informational responses
+        "200":
+          description: Success
+        "300":
+          description: Redirection
+        "400":
+          description: Client Errors
+        "500":
+          description: Server Errors
+      summary: Return status code or random status code if more than one are given
+      tags:
+        - Status codes
+    trace:
+      parameters:
+        - in: path
+          name: codes
+          required: true
+          schema:
+            type: string
+      responses:
+        "100":
+          description: Informational responses
+        "200":
+          description: Success
+        "300":
+          description: Redirection
+        "400":
+          description: Client Errors
+        "500":
+          description: Server Errors
+      summary: Return status code or random status code if more than one are given
+      tags:
+        - Status codes
+  "/stream-bytes/{n}":
+    get:
+      parameters:
+        - in: path
+          name: n
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: Bytes.
+      summary: Streams n random bytes generated with given seed, at given chunk size per packet.
+      tags:
+        - Dynamic data
+  "/stream/{n}":
+    get:
+      parameters:
+        - in: path
+          name: n
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: Streamed JSON responses.
+      summary: Stream n JSON responses
+      tags:
+        - Dynamic data
+  /user-agent:
+    get:
+      responses:
+        "200":
+          description: The request's User-Agent header.
+      summary: Return the incoming requests's User-Agent header.
+      tags:
+        - Request inspection
+  /uuid:
+    get:
+      responses:
+        "200":
+          description: A UUID4.
+      summary: Return a UUID4.
+      tags:
+        - Dynamic data
+  /xml:
+    get:
+      responses:
+        "200":
+          description: An XML document.
+      summary: Returns a simple XML document.
+      tags:
+        - Response formats
+components:
+  requestBodies:
+    postRedirectTo:
+      content:
+        application/x-www-form-urlencoded:
+          schema:
+            properties:
+              status_code:
+                type: integer
+              url:
+                type: string
+            required:
+              - url
+            type: object
+      required: true
+x-protocol: https
diff --git a/plugins/importer-openapi/tests/fixtures/real-world/nasa-apod.yaml b/plugins/importer-openapi/tests/fixtures/real-world/nasa-apod.yaml
new file mode 100644
index 0000000..172317f
--- /dev/null
+++ b/plugins/importer-openapi/tests/fixtures/real-world/nasa-apod.yaml
@@ -0,0 +1,69 @@
+openapi: 3.0.0
+servers:
+  - url: https://api.nasa.gov/planetary
+  - url: http://api.nasa.gov/planetary
+info:
+  contact:
+    email: evan.t.yates@nasa.gov
+  description: This endpoint structures the APOD imagery and associated metadata so that it can be repurposed for other applications. In addition, if the concept_tags parameter is set to True, then keywords derived from the image explanation are returned. These keywords could be used as auto-generated hashtags for twitter or instagram feeds; but generally help with discoverability of relevant imagery
+  license:
+    name: Apache 2.0
+    url: http://www.apache.org/licenses/LICENSE-2.0.html
+  title: APOD
+  version: 1.0.0
+  x-apisguru-categories:
+    - media
+    - open_data
+  x-origin:
+    - format: swagger
+      url: https://raw.githubusercontent.com/nasa/api-docs/gh-pages/assets/json/APOD
+      version: "2.0"
+  x-providerName: nasa.gov
+  x-serviceName: apod
+  x-logo:
+    url: https://api.apis.guru/v2/cache/logo/https_apis.guru_assets_images_no-logo.svg
+tags:
+  - description: An example tag
+    externalDocs:
+      description: Here's a link
+      url: https://example.com
+    name: request tag
+paths:
+  /apod:
+    get:
+      description: Returns the picture of the day
+      parameters:
+        - description: The date of the APOD image to retrieve
+          in: query
+          name: date
+          required: false
+          schema:
+            type: string
+        - description: Retrieve the URL for the high resolution image
+          in: query
+          name: hd
+          required: false
+          schema:
+            type: boolean
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                items:
+                  x-thing: ok
+                type: array
+          description: successful operation
+        "400":
+          description: Date must be between Jun 16, 1995 and Mar 28, 2019.
+      security:
+        - api_key: []
+      summary: Returns images
+      tags:
+        - request tag
+components:
+  securitySchemes:
+    api_key:
+      in: query
+      name: api_key
+      type: apiKey
diff --git a/plugins/importer-openapi/tests/fixtures/real-world/xkcd.yaml b/plugins/importer-openapi/tests/fixtures/real-world/xkcd.yaml
new file mode 100644
index 0000000..4901633
--- /dev/null
+++ b/plugins/importer-openapi/tests/fixtures/real-world/xkcd.yaml
@@ -0,0 +1,78 @@
+openapi: 3.0.0
+servers:
+  - url: http://xkcd.com/
+info:
+  description: Webcomic of romance, sarcasm, math, and language.
+  title: XKCD
+  version: 1.0.0
+  x-apisguru-categories:
+    - media
+  x-logo:
+    url: https://api.apis.guru/v2/cache/logo/http_imgs.xkcd.com_static_terrible_small_logo.png
+  x-origin:
+    - format: openapi
+      url: https://raw.githubusercontent.com/APIs-guru/unofficial_openapi_specs/master/xkcd.com/1.0.0/openapi.yaml
+      version: "3.0"
+  x-providerName: xkcd.com
+  x-tags:
+    - humor
+    - comics
+  x-unofficialSpec: true
+externalDocs:
+  url: https://xkcd.com/json.html
+paths:
+  /info.0.json:
+    get:
+      description: |
+        Fetch current comic and metadata.
+      responses:
+        "200":
+          content:
+            "*/*":
+              schema:
+                $ref: "#/components/schemas/comic"
+          description: OK
+  "/{comicId}/info.0.json":
+    get:
+      description: |
+        Fetch comics and metadata  by comic id.
+      parameters:
+        - in: path
+          name: comicId
+          required: true
+          schema:
+            type: number
+      responses:
+        "200":
+          content:
+            "*/*":
+              schema:
+                $ref: "#/components/schemas/comic"
+          description: OK
+components:
+  schemas:
+    comic:
+      properties:
+        alt:
+          type: string
+        day:
+          type: string
+        img:
+          type: string
+        link:
+          type: string
+        month:
+          type: string
+        news:
+          type: string
+        num:
+          type: number
+        safe_title:
+          type: string
+        title:
+          type: string
+        transcript:
+          type: string
+        year:
+          type: string
+      type: object
diff --git a/plugins/importer-openapi/tests/index.test.ts b/plugins/importer-openapi/tests/index.test.ts
new file mode 100644
index 0000000..26675f4
--- /dev/null
+++ b/plugins/importer-openapi/tests/index.test.ts
@@ -0,0 +1,2419 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { describe, expect, test } from "vite-plus/test";
+import { convertOpenApi } from "../src";
+
+describe("importer-openapi", () => {
+  const p = path.join(__dirname, "fixtures");
+  const fixtures = fs.readdirSync(p).filter((fixture) => {
+    return fs.statSync(path.join(p, fixture)).isFile();
+  });
+  const realWorldFixturesPath = path.join(p, "real-world");
+  const realWorldFixtures = fs
+    .readdirSync(realWorldFixturesPath)
+    .filter((fixture) => fixture.endsWith(".yaml"));
+
+  test("Imports OpenAPI 3.2 QUERY and additional operations", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.2.0",
+        info: { title: "OpenAPI 3.2 Operations", version: "1.0.0" },
+        paths: {
+          "/resources": {
+            query: { summary: "Query resources", responses: {} },
+            additionalOperations: {
+              COPY: { summary: "Copy resources", responses: {} },
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests).toEqual([
+      expect.objectContaining({
+        method: "QUERY",
+        name: "Query resources",
+        url: "${[baseUrl]}/resources",
+      }),
+      expect.objectContaining({
+        method: "COPY",
+        name: "Copy resources",
+        url: "${[baseUrl]}/resources",
+      }),
+    ]);
+  });
+
+  test("Maps operation description to request description", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Description Test", version: "1.0.0" },
+        paths: {
+          "/klanten": {
+            get: {
+              description: "Lijst van klanten",
+              responses: { "200": { description: "ok" } },
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests).toEqual([
+      expect.objectContaining({
+        description: expect.stringContaining("Lijst van klanten"),
+      }),
+    ]);
+  });
+
+  test("Imports requests directly from OpenAPI details", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Native Import Test", version: "1.0.0" },
+        servers: [
+          { url: "https://api.example.com/{version}", variables: { version: { default: "v1" } } },
+        ],
+        tags: [{ name: "accounts", description: "Account operations" }],
+        paths: {
+          "/accounts/{accountId}/members": {
+            parameters: [
+              {
+                name: "accountId",
+                in: "path",
+                required: true,
+                description: "Account identifier",
+                schema: { type: "string", example: "acct_123" },
+              },
+            ],
+            post: {
+              tags: ["accounts"],
+              summary: "Create member",
+              operationId: "createMember",
+              parameters: [
+                {
+                  name: "include",
+                  in: "query",
+                  description: "Related resources to include",
+                  schema: { type: "string", enum: ["roles"] },
+                },
+                {
+                  name: "X-Trace-Id",
+                  in: "header",
+                  schema: { type: "string", example: "trace-123" },
+                },
+              ],
+              security: [{ tokenAuth: [] }],
+              requestBody: {
+                description: "Member payload",
+                content: {
+                  "application/json": {
+                    schema: { $ref: "#/components/schemas/MemberInput" },
+                  },
+                },
+              },
+              responses: {
+                "201": { description: "Created" },
+              },
+            },
+          },
+        },
+        components: {
+          securitySchemes: {
+            tokenAuth: { type: "http", scheme: "bearer" },
+          },
+          schemas: {
+            MemberInput: {
+              type: "object",
+              required: ["email"],
+              properties: {
+                email: { type: "string", example: "me@example.com" },
+                admin: { type: "boolean", default: false },
+                primaryContact: { $ref: "#/components/schemas/Contact" },
+                secondaryContact: { $ref: "#/components/schemas/Contact" },
+              },
+            },
+            Contact: {
+              type: "object",
+              properties: {
+                name: { type: "string", example: "Taylor" },
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.folders).toEqual([
+      expect.objectContaining({ name: "accounts", description: "Account operations" }),
+    ]);
+    expect(imported?.resources.environments).toEqual([
+      expect.objectContaining({
+        name: "Global Variables",
+        variables: [],
+      }),
+      expect.objectContaining({
+        name: "Server 1",
+        parentModel: "environment",
+        variables: [
+          { name: "baseUrl", value: "https://api.example.com/v1" },
+          { name: "auth_token_auth_token", value: "" },
+        ],
+      }),
+    ]);
+    expect(imported?.resources.httpRequests).toEqual([
+      expect.objectContaining({
+        name: "Create member",
+        method: "POST",
+        url: "${[baseUrl]}/accounts/:accountId/members",
+        authenticationType: "bearer",
+        authentication: { token: "${[auth_token_auth_token]}", prefix: "Bearer" },
+        bodyType: "application/json",
+        body: {
+          text: JSON.stringify(
+            {
+              email: "me@example.com",
+              admin: false,
+              primaryContact: { name: "Taylor" },
+              secondaryContact: { name: "Taylor" },
+            },
+            null,
+            2,
+          ),
+        },
+        headers: expect.arrayContaining([
+          { enabled: false, name: "X-Trace-Id", value: "trace-123" },
+          { enabled: true, name: "Content-Type", value: "application/json" },
+        ]),
+        urlParameters: [
+          { enabled: true, name: ":accountId", value: "acct_123" },
+          { enabled: false, name: "include", value: "roles" },
+        ],
+        description: expect.stringContaining("Operation ID: createMember"),
+      }),
+    ]);
+    expect(imported?.resources.httpRequests[0]?.description).toContain("Member payload");
+    expect(imported?.resources.httpRequests[0]?.description).toContain("201: Created");
+  });
+
+  test("Handles large schemas without the Postman converter path", async () => {
+    const paths: Record<string, unknown> = {};
+    for (let i = 0; i < 500; i++) {
+      paths[`/zones/{zoneId}/resources/${i}`] = {
+        get: {
+          tags: ["zones"],
+          summary: `Read resource ${i}`,
+          parameters: [
+            { name: "zoneId", in: "path", required: true, schema: { type: "string" } },
+            { name: "page", in: "query", schema: { type: "integer", default: 1 } },
+          ],
+          responses: {
+            "200": {
+              description: "OK",
+              content: {
+                "application/json": { schema: { $ref: "#/components/schemas/Resource" } },
+              },
+            },
+          },
+        },
+      };
+    }
+
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Large API", version: "1.0.0" },
+        servers: [{ url: "https://api.example.com/client/v4" }],
+        tags: [{ name: "zones" }],
+        paths,
+        components: {
+          schemas: {
+            Resource: {
+              type: "object",
+              properties: {
+                id: { type: "string" },
+                name: { type: "string" },
+                metadata: { $ref: "#/components/schemas/Metadata" },
+              },
+            },
+            Metadata: {
+              type: "object",
+              properties: {
+                createdOn: { type: "string", format: "date-time" },
+                tags: { type: "array", items: { type: "string" } },
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests.length).toBe(500);
+    expect(imported?.resources.httpRequests[499]).toEqual(
+      expect.objectContaining({
+        name: "Read resource 499",
+        url: "${[baseUrl]}/zones/:zoneId/resources/499",
+      }),
+    );
+    expect(imported?.resources.environments).toEqual([
+      expect.objectContaining({
+        name: "Global Variables",
+        variables: [],
+      }),
+      expect.objectContaining({
+        name: "Server 1",
+        variables: [{ name: "baseUrl", value: "https://api.example.com/client/v4" }],
+      }),
+    ]);
+  });
+
+  test("Skips invalid file", async () => {
+    const imported = await convertOpenApi("{}");
+    expect(imported).toBeUndefined();
+  });
+
+  test("Creates an editable baseUrl variable when OpenAPI omits servers", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Serverless OpenAPI Test", version: "1.0.0" },
+        paths: {
+          "/api/widgets": { get: { responses: {} } },
+        },
+      }),
+    );
+
+    expect(imported?.resources.environments).toEqual([
+      expect.objectContaining({
+        name: "Global Variables",
+        variables: [],
+      }),
+      expect.objectContaining({
+        name: "Default",
+        parentModel: "environment",
+        variables: [{ name: "baseUrl", value: "" }],
+      }),
+    ]);
+    expect(imported?.resources.httpRequests[0]?.url).toBe("${[baseUrl]}/api/widgets");
+  });
+
+  test("Prefers operation and path servers over the spec base URL", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Servers Test", version: "1.0.0" },
+        servers: [{ url: "https://root.example.com" }],
+        paths: {
+          "/root": { get: { responses: {} } },
+          "/path-level": {
+            servers: [{ url: "https://path.example.com" }],
+            get: { responses: {} },
+          },
+          "/operation-level": {
+            servers: [{ url: "https://path.example.com" }],
+            get: { servers: [{ url: "https://operation.example.com" }], responses: {} },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests.map((r) => r.url)).toEqual([
+      "${[baseUrl]}/root",
+      "${[serverUrl]}/path-level",
+      "${[serverUrl2]}/operation-level",
+    ]);
+    expect(imported?.resources.environments).toEqual([
+      expect.objectContaining({
+        name: "Global Variables",
+        variables: [
+          { name: "serverUrl", value: "https://path.example.com" },
+          { name: "serverUrl2", value: "https://operation.example.com" },
+        ],
+      }),
+      expect.objectContaining({
+        name: "Server 1",
+        variables: [{ name: "baseUrl", value: "https://root.example.com" }],
+      }),
+    ]);
+  });
+
+  test("Creates selectable environments for multiple OpenAPI servers", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Server Environments Test", version: "1.0.0" },
+        servers: [
+          { url: "https://api.example.com/v1", description: "Production" },
+          { url: "https://sandbox.example.com/v1", description: "Sandbox" },
+        ],
+        paths: {
+          "/oauth": { get: { security: [{ oauth: [] }], responses: {} } },
+          "/api-key": { get: { security: [{ apiKey: [] }], responses: {} } },
+          "/fixed": {
+            servers: [{ url: "https://fixed.example.com" }],
+            get: { responses: {} },
+          },
+        },
+        components: {
+          securitySchemes: {
+            oauth: {
+              type: "oauth2",
+              flows: {
+                authorizationCode: {
+                  authorizationUrl: "/oauth/authorize",
+                  tokenUrl: "oauth/token",
+                  scopes: {},
+                },
+              },
+            },
+            apiKey: { type: "apiKey", in: "header", name: "X-API-Key" },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.environments).toEqual([
+      expect.objectContaining({
+        name: "Global Variables",
+        variables: [{ name: "serverUrl", value: "https://fixed.example.com" }],
+      }),
+      expect.objectContaining({
+        name: "Production",
+        parentModel: "environment",
+        variables: [
+          { name: "baseUrl", value: "https://api.example.com/v1" },
+          { name: "oauth_client_id", value: "" },
+          { name: "oauth_client_secret", value: "" },
+          { name: "oauth_redirect_uri", value: "" },
+          { name: "baseUrlOrigin", value: "https://api.example.com" },
+          { name: "auth_api_key_key", value: "" },
+        ],
+      }),
+      expect.objectContaining({
+        name: "Sandbox",
+        parentModel: "environment",
+        variables: [
+          { name: "baseUrl", value: "https://sandbox.example.com/v1" },
+          { name: "oauth_client_id", value: "" },
+          { name: "oauth_client_secret", value: "" },
+          { name: "oauth_redirect_uri", value: "" },
+          { name: "baseUrlOrigin", value: "https://sandbox.example.com" },
+          { name: "auth_api_key_key", value: "" },
+        ],
+      }),
+    ]);
+    expect(imported?.resources.httpRequests[0]?.authentication).toEqual(
+      expect.objectContaining({
+        authorizationUrl: "${[baseUrlOrigin]}/oauth/authorize",
+        accessTokenUrl: "${[baseUrl]}/oauth/token",
+      }),
+    );
+  });
+
+  test("Creates variables for path servers without a top-level server", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Path Server Test", version: "1.0.0" },
+        paths: {
+          "/items": {
+            servers: [{ url: "https://path.example.com" }],
+            get: { responses: {} },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.url).toBe("${[serverUrl]}/items");
+    expect(imported?.resources.environments).toEqual([
+      expect.objectContaining({
+        name: "Global Variables",
+        variables: [{ name: "serverUrl", value: "https://path.example.com" }],
+      }),
+      expect.objectContaining({
+        name: "Default",
+        variables: [{ name: "baseUrl", value: "" }],
+      }),
+    ]);
+  });
+
+  test("Imports OpenAPI 3 OAuth2 flows", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "OAuth Test", version: "1.0.0" },
+        paths: {
+          "/a": { get: { security: [{ oauth: ["read", "write"] }], responses: {} } },
+          "/b": { get: { security: [{ implicitOauth: [] }], responses: {} } },
+        },
+        components: {
+          securitySchemes: {
+            oauth: {
+              type: "oauth2",
+              flows: {
+                clientCredentials: { tokenUrl: "https://example.com/token", scopes: {} },
+              },
+            },
+            implicitOauth: {
+              type: "oauth2",
+              flows: {
+                implicit: { authorizationUrl: "https://example.com/authorize", scopes: {} },
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]).toEqual(
+      expect.objectContaining({
+        authenticationType: "oauth2",
+        authentication: {
+          grantType: "client_credentials",
+          clientId: "${[oauth_oauth_client_id]}",
+          clientSecret: "${[oauth_oauth_client_secret]}",
+          headerPrefix: "Bearer",
+          scope: "read write",
+          accessTokenUrl: "https://example.com/token",
+        },
+      }),
+    );
+    expect(imported?.resources.httpRequests[1]).toEqual(
+      expect.objectContaining({
+        authenticationType: "oauth2",
+        authentication: {
+          grantType: "implicit",
+          clientId: "${[oauth_implicitOauth_client_id]}",
+          headerPrefix: "Bearer",
+          authorizationUrl: "https://example.com/authorize",
+          redirectUri: "${[oauth_implicitOauth_redirect_uri]}",
+        },
+      }),
+    );
+    expect(imported?.resources.environments[0]?.variables).toEqual([]);
+    expect(imported?.resources.environments[1]).toEqual(
+      expect.objectContaining({
+        name: "Default",
+        variables: [
+          { name: "baseUrl", value: "" },
+          { name: "oauth_oauth_client_id", value: "" },
+          { name: "oauth_oauth_client_secret", value: "" },
+          { name: "oauth_implicitOauth_client_id", value: "" },
+          { name: "oauth_implicitOauth_client_secret", value: "" },
+          { name: "oauth_implicitOauth_redirect_uri", value: "" },
+        ],
+      }),
+    );
+  });
+
+  test("Uses server environment variables for OAuth2 client credentials", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "OAuth Environment Test", version: "1.0.0" },
+        servers: [{ url: "https://api.example.com" }],
+        paths: {
+          "/users": {
+            get: { security: [{ oauth: ["read"] }], responses: {} },
+            post: { security: [{ oauth: ["write"] }], responses: {} },
+          },
+        },
+        components: {
+          securitySchemes: {
+            oauth: {
+              type: "oauth2",
+              flows: {
+                authorizationCode: {
+                  authorizationUrl: "/oauth/authorize",
+                  tokenUrl: "/oauth/token",
+                  scopes: { read: "Read users", write: "Write users" },
+                },
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.environments).toEqual([
+      expect.objectContaining({ name: "Global Variables", variables: [] }),
+      expect.objectContaining({
+        name: "Server 1",
+        variables: [
+          { name: "baseUrl", value: "https://api.example.com" },
+          { name: "oauth_client_id", value: "" },
+          { name: "oauth_client_secret", value: "" },
+          { name: "oauth_redirect_uri", value: "" },
+        ],
+      }),
+    ]);
+    expect(imported?.resources.httpRequests.map((request) => request.authentication)).toEqual([
+      expect.objectContaining({
+        clientId: "${[oauth_client_id]}",
+        clientSecret: "${[oauth_client_secret]}",
+        authorizationUrl: "https://api.example.com/oauth/authorize",
+        accessTokenUrl: "https://api.example.com/oauth/token",
+      }),
+      expect.objectContaining({
+        clientId: "${[oauth_client_id]}",
+        clientSecret: "${[oauth_client_secret]}",
+      }),
+    ]);
+  });
+
+  test("Uses the server environment origin for OAuth endpoints with a path-only API base", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Path-only OAuth Test", version: "1.0.0" },
+        servers: [{ url: "/api/v1" }],
+        paths: {
+          "/users": { get: { security: [{ oauth: [] }], responses: {} } },
+        },
+        components: {
+          securitySchemes: {
+            oauth: {
+              type: "oauth2",
+              flows: {
+                authorizationCode: {
+                  authorizationUrl: "oauth/authorize",
+                  tokenUrl: "/oauth/token",
+                  scopes: {},
+                },
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.authentication).toEqual(
+      expect.objectContaining({
+        authorizationUrl: "${[baseUrlOrigin]}/api/v1/oauth/authorize",
+        accessTokenUrl: "${[baseUrlOrigin]}/oauth/token",
+      }),
+    );
+    expect(imported?.resources.environments).toEqual([
+      expect.objectContaining({ name: "Global Variables", variables: [] }),
+      expect.objectContaining({
+        name: "Server 1",
+        variables: [
+          { name: "baseUrl", value: "/api/v1" },
+          { name: "oauth_client_id", value: "" },
+          { name: "oauth_client_secret", value: "" },
+          { name: "oauth_redirect_uri", value: "" },
+          { name: "baseUrlOrigin", value: "" },
+        ],
+      }),
+    ]);
+  });
+
+  test("Imports Swagger 2 OAuth2 flows and produces", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        swagger: "2.0",
+        info: { title: "Swagger OAuth Test", version: "1.0.0" },
+        host: "example.com",
+        produces: ["application/json"],
+        paths: { "/a": { get: { security: [{ oauth: ["admin"] }], responses: {} } } },
+        securityDefinitions: {
+          oauth: {
+            type: "oauth2",
+            flow: "accessCode",
+            authorizationUrl: "https://example.com/authorize",
+            tokenUrl: "https://example.com/token",
+            scopes: { admin: "Admin access" },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]).toEqual(
+      expect.objectContaining({
+        authenticationType: "oauth2",
+        authentication: {
+          grantType: "authorization_code",
+          clientId: "${[oauth_client_id]}",
+          clientSecret: "${[oauth_client_secret]}",
+          headerPrefix: "Bearer",
+          scope: "admin",
+          authorizationUrl: "https://example.com/authorize",
+          accessTokenUrl: "https://example.com/token",
+          redirectUri: "${[oauth_redirect_uri]}",
+        },
+        headers: [{ enabled: true, name: "Accept", value: "application/json" }],
+      }),
+    );
+  });
+
+  test("Names operations that only carry a description", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Naming Test", version: "1.0.0" },
+        paths: {
+          "/a": { get: { description: "Fetch the current comic.\nMore detail here.\n" } },
+          "/b": { get: { description: `${"x".repeat(101)}` } },
+          "/c": { get: { summary: "Explicit summary", description: "Ignored" } },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests.map((r) => r.name)).toEqual([
+      "Fetch the current comic.",
+      // Too long to read as a name, so the route is clearer
+      "GET /b",
+      "Explicit summary",
+    ]);
+  });
+
+  test("Disambiguates requests that would share a name", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Duplicate Test", version: "1.0.0" },
+        paths: {
+          "/anything": {
+            get: { summary: "Returns anything" },
+            post: { summary: "Returns anything" },
+          },
+          "/unique": { get: { summary: "Stands alone" } },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests.map((r) => r.name)).toEqual([
+      "Returns anything (GET /anything)",
+      "Returns anything (POST /anything)",
+      "Stands alone",
+    ]);
+  });
+
+  test("Flags deprecated operations", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Deprecated Test", version: "1.0.0" },
+        paths: {
+          "/old": { get: { summary: "Old", deprecated: true, description: "Use /new instead." } },
+          "/new": { get: { summary: "New" } },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.description).toBe(
+      "Deprecated.\n\nUse /new instead.",
+    );
+    expect(imported?.resources.httpRequests[1]?.description).toBe("New");
+  });
+
+  test("Derives an Accept header from OpenAPI 3 responses", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Accept Test", version: "1.0.0" },
+        paths: {
+          "/prefers-json": {
+            get: {
+              responses: {
+                "200": {
+                  description: "ok",
+                  content: { "application/xml": {}, "application/json": {} },
+                },
+              },
+            },
+          },
+          // Only failures describe content, so there is nothing to accept
+          "/errors-only": {
+            get: {
+              responses: { "500": { description: "nope", content: { "application/json": {} } } },
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.headers).toEqual([
+      { enabled: true, name: "Accept", value: "application/json" },
+    ]);
+    expect(imported?.resources.httpRequests[1]?.headers).toEqual([]);
+  });
+
+  test("Lets an operation override a path-level parameter", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Override Test", version: "1.0.0" },
+        paths: {
+          "/a": {
+            parameters: [
+              { name: "page", in: "query", required: false, schema: { example: "path-level" } },
+              { name: "keep", in: "query", required: true, schema: { example: "untouched" } },
+            ],
+            get: {
+              parameters: [
+                // Same name and location as above, so it replaces rather than adds
+                { name: "page", in: "query", required: true, schema: { example: "operation" } },
+                // Same name but a different location, so it is its own parameter
+                { name: "page", in: "header", schema: { example: "header-level" } },
+              ],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.urlParameters).toEqual([
+      { enabled: true, name: "page", value: "operation" },
+      { enabled: true, name: "keep", value: "untouched" },
+    ]);
+    expect(imported?.resources.httpRequests[0]?.headers).toEqual([
+      { enabled: false, name: "page", value: "header-level" },
+    ]);
+  });
+
+  test("Prefers operation-level consumes for Swagger bodies", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        swagger: "2.0",
+        info: { title: "Consumes Test", version: "1.0.0" },
+        host: "example.com",
+        consumes: ["application/json"],
+        paths: {
+          "/a": {
+            post: {
+              consumes: ["application/xml"],
+              parameters: [{ name: "body", in: "body", schema: { type: "object" } }],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]).toEqual(
+      expect.objectContaining({
+        // Yaak's XML body type; the header keeps the spec's media type
+        bodyType: "text/xml",
+        headers: expect.arrayContaining([
+          { enabled: true, name: "Content-Type", value: "application/xml" },
+        ]),
+      }),
+    );
+  });
+
+  test("Imports Swagger 2 basic auth and cookie API keys", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        swagger: "2.0",
+        info: { title: "Auth Test", version: "1.0.0" },
+        host: "example.com",
+        paths: {
+          "/a": { get: { security: [{ basicAuth: [] }], responses: {} } },
+          "/b": { get: { security: [{ cookieKey: [] }], responses: {} } },
+        },
+        securityDefinitions: {
+          basicAuth: { type: "basic" },
+          cookieKey: { type: "apiKey", in: "cookie", name: "session" },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]).toEqual(
+      expect.objectContaining({
+        authenticationType: "basic",
+        authentication: {
+          username: "${[auth_basic_auth_username]}",
+          password: "${[auth_basic_auth_password]}",
+        },
+      }),
+    );
+    // The auth plugin has no cookie location, so it becomes the Cookie header
+    expect(imported?.resources.httpRequests[1]).toEqual(
+      expect.objectContaining({
+        authenticationType: "apikey",
+        authentication: {
+          location: "header",
+          key: "Cookie",
+          value: "session=${[auth_cookie_key_key]}",
+        },
+      }),
+    );
+    expect(imported?.resources.environments).toEqual([
+      expect.objectContaining({
+        name: "Global Variables",
+        variables: [],
+      }),
+      expect.objectContaining({
+        name: "Server 1",
+        variables: [
+          { name: "baseUrl", value: "https://example.com" },
+          { name: "auth_basic_auth_username", value: "" },
+          { name: "auth_basic_auth_password", value: "" },
+          { name: "auth_cookie_key_key", value: "" },
+        ],
+      }),
+    ]);
+  });
+
+  test("Respects the order of security alternatives and explicit auth overrides", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Optional Auth", version: "1.0.0" },
+        security: [{ bearerAuth: [] }],
+        paths: {
+          "/optional-auth-first": {
+            get: { security: [{ bearerAuth: [] }, {}], responses: {} },
+          },
+          "/optional-anonymous-first": {
+            get: { security: [{}, { bearerAuth: [] }], responses: {} },
+          },
+          "/public": { get: { security: [], responses: {} } },
+        },
+        components: {
+          securitySchemes: {
+            bearerAuth: { type: "http", scheme: "bearer" },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.workspaces[0]).toEqual(
+      expect.objectContaining({
+        authenticationType: "bearer",
+        authentication: { token: "${[auth_bearer_auth_token]}", prefix: "Bearer" },
+      }),
+    );
+    expect(imported?.resources.httpRequests).toEqual([
+      // The author listed bearer before the anonymous alternative
+      expect.objectContaining({
+        authenticationType: "bearer",
+        authentication: { token: "${[auth_bearer_auth_token]}", prefix: "Bearer" },
+      }),
+      expect.objectContaining({ authenticationType: "none", authentication: {} }),
+      expect.objectContaining({ authenticationType: "none", authentication: {} }),
+    ]);
+  });
+
+  test("Imports spec-level security as inherited workspace authentication", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Inherited Auth", version: "1.0.0" },
+        security: [{ bearerAuth: [], queryKey: [], headerKey: [] }],
+        paths: {
+          "/inherits": { get: { responses: {} } },
+          "/own-auth": { get: { security: [{ otherKey: [] }], responses: {} } },
+          "/public": { get: { security: [], responses: {} } },
+        },
+        components: {
+          securitySchemes: {
+            bearerAuth: { type: "http", scheme: "bearer" },
+            queryKey: { type: "apiKey", in: "query", name: "api_key" },
+            headerKey: { type: "apiKey", in: "header", name: "X-Tenant" },
+            otherKey: { type: "apiKey", in: "header", name: "X-Other" },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.workspaces[0]).toEqual(
+      expect.objectContaining({
+        authenticationType: "bearer",
+        authentication: { token: "${[auth_bearer_auth_token]}", prefix: "Bearer" },
+      }),
+    );
+    expect(imported?.resources.httpRequests).toEqual([
+      // No authenticationType means inherit; materialized API keys ride along
+      // on the request since headers or parameters at the workspace level
+      // would also reach operations that opted out
+      expect.objectContaining({
+        authentication: {},
+        headers: [{ enabled: true, name: "X-Tenant", value: "${[auth_header_key_key]}" }],
+        urlParameters: [{ enabled: true, name: "api_key", value: "${[auth_query_key_key]}" }],
+      }),
+      expect.objectContaining({
+        authenticationType: "apikey",
+        authentication: expect.objectContaining({ key: "X-Other" }),
+        headers: [],
+        urlParameters: [],
+      }),
+      expect.objectContaining({
+        authenticationType: "none",
+        headers: [],
+        urlParameters: [],
+      }),
+    ]);
+    expect(imported?.resources.httpRequests[0]?.authenticationType).toBeNull();
+  });
+
+  test("Serializes array query parameters per style", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Array Params", version: "1.0.0" },
+        paths: {
+          "/exploded": {
+            get: {
+              parameters: [
+                {
+                  name: "tags",
+                  in: "query",
+                  required: true,
+                  schema: { type: "array", items: { type: "string" }, example: ["a", "b"] },
+                },
+              ],
+              responses: {},
+            },
+          },
+          "/csv": {
+            get: {
+              parameters: [
+                {
+                  name: "ids",
+                  in: "query",
+                  required: true,
+                  explode: false,
+                  schema: { type: "array", example: [1, 2, 3] },
+                },
+              ],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests.map((r) => r.urlParameters)).toEqual([
+      [
+        { enabled: true, name: "tags", value: "a" },
+        { enabled: true, name: "tags", value: "b" },
+      ],
+      [{ enabled: true, name: "ids", value: "1,2,3" }],
+    ]);
+  });
+
+  test("Serializes Swagger 2 array parameters per collectionFormat", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        swagger: "2.0",
+        info: { title: "Swagger Arrays", version: "1.0.0" },
+        host: "example.com",
+        paths: {
+          "/a": {
+            get: {
+              parameters: [
+                {
+                  name: "tags",
+                  in: "query",
+                  required: true,
+                  type: "array",
+                  items: { type: "string", default: "x" },
+                },
+                {
+                  name: "multi",
+                  in: "query",
+                  required: true,
+                  type: "array",
+                  collectionFormat: "multi",
+                  items: { type: "string", enum: ["m1"] },
+                },
+              ],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.urlParameters).toEqual([
+      // Swagger defaults to csv
+      { enabled: true, name: "tags", value: "x" },
+      { enabled: true, name: "multi", value: "m1" },
+    ]);
+  });
+
+  test("Imports AND security requirements without dropping API keys", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Combined Auth", version: "1.0.0" },
+        paths: {
+          "/combined": {
+            get: {
+              security: [{ bearerAuth: [], tenantKey: [], queryKey: [] }],
+              parameters: [
+                {
+                  in: "header",
+                  name: "X-Tenant-Key",
+                  example: "operation-value-must-not-replace-auth",
+                },
+              ],
+              responses: {},
+            },
+          },
+        },
+        components: {
+          securitySchemes: {
+            bearerAuth: { type: "http", scheme: "bearer" },
+            tenantKey: { type: "apiKey", in: "header", name: "X-Tenant-Key" },
+            queryKey: { type: "apiKey", in: "query", name: "api_key" },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests).toEqual([
+      expect.objectContaining({
+        authenticationType: "bearer",
+        authentication: { token: "${[auth_bearer_auth_token]}", prefix: "Bearer" },
+        headers: [{ enabled: true, name: "X-Tenant-Key", value: "${[auth_tenant_key_key]}" }],
+        urlParameters: [{ enabled: true, name: "api_key", value: "${[auth_query_key_key]}" }],
+      }),
+    ]);
+  });
+
+  test("Keeps distinct credentials for security scheme names that normalize alike", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Auth Variable Names", version: "1.0.0" },
+        paths: {
+          "/hyphen": { get: { security: [{ "api-key": [] }], responses: {} } },
+          "/underscore": { get: { security: [{ api_key: [] }], responses: {} } },
+          "/hyphen-again": { get: { security: [{ "api-key": [] }], responses: {} } },
+        },
+        components: {
+          securitySchemes: {
+            "api-key": { type: "apiKey", in: "header", name: "X-Hyphen-Key" },
+            api_key: { type: "apiKey", in: "header", name: "X-Underscore-Key" },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.environments[0]?.variables).toEqual([]);
+    expect(imported?.resources.environments[1]).toEqual(
+      expect.objectContaining({
+        name: "Default",
+        variables: [
+          { name: "baseUrl", value: "" },
+          { name: "auth_api_key_key", value: "" },
+          { name: "auth_api_key_key_2", value: "" },
+        ],
+      }),
+    );
+    expect(imported?.resources.httpRequests).toEqual([
+      expect.objectContaining({
+        authentication: expect.objectContaining({ value: "${[auth_api_key_key]}" }),
+      }),
+      expect.objectContaining({
+        authentication: expect.objectContaining({ value: "${[auth_api_key_key_2]}" }),
+      }),
+      expect.objectContaining({
+        authentication: expect.objectContaining({ value: "${[auth_api_key_key]}" }),
+      }),
+    ]);
+  });
+
+  test("Imports OpenID Connect as bearer authentication", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "OpenID Connect", version: "1.0.0" },
+        paths: { "/me": { get: { security: [{ oidc: [] }], responses: {} } } },
+        components: {
+          securitySchemes: {
+            oidc: {
+              type: "openIdConnect",
+              openIdConnectUrl: "https://accounts.example.com/.well-known/openid-configuration",
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests).toEqual([
+      expect.objectContaining({
+        authenticationType: "bearer",
+        authentication: { token: "${[auth_oidc_token]}", prefix: "Bearer" },
+      }),
+    ]);
+  });
+
+  test("Resolves references that point into arrays", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Array Ref Test", version: "1.0.0" },
+        paths: {
+          "/a": {
+            get: {
+              parameters: [
+                { name: "limit", in: "query", required: true, schema: { example: "42" } },
+              ],
+              responses: {},
+            },
+          },
+          "/b": {
+            get: { parameters: [{ $ref: "#/paths/~1a/get/parameters/0" }], responses: {} },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[1]?.urlParameters).toEqual([
+      { enabled: true, name: "limit", value: "42" },
+    ]);
+  });
+
+  test("Resolves example references and 3.1 example arrays", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Examples Test", version: "1.0.0" },
+        paths: {
+          "/a": {
+            post: {
+              parameters: [
+                { name: "q", in: "query", schema: { type: "string", examples: ["hello"] } },
+              ],
+              requestBody: {
+                content: {
+                  "application/json": {
+                    schema: { type: "object" },
+                    examples: { main: { $ref: "#/components/examples/Main" } },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+        components: { examples: { Main: { value: { x: "from-example" } } } },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: JSON.stringify({ x: "from-example" }, null, 2),
+    });
+    expect(imported?.resources.httpRequests[0]?.urlParameters).toEqual([
+      { enabled: false, name: "q", value: "hello" },
+    ]);
+  });
+
+  test("Keeps template-looking braces in descriptions and examples", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Braces Test", version: "1.0.0" },
+        paths: {
+          "/a": {
+            post: {
+              description: "Use {{placeholders}} in the template",
+              requestBody: {
+                content: {
+                  "application/json": { schema: { type: "string", example: "Hi {{name}}" } },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.description).toContain("{{placeholders}}");
+    // Quoted to be a valid JSON document, braces intact
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({ text: '"Hi {{name}}"' });
+  });
+
+  test("Ignores header parameters the spec reserves for other mechanisms", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Reserved Headers Test", version: "1.0.0" },
+        paths: {
+          "/a": {
+            post: {
+              parameters: [
+                { name: "Content-Type", in: "header", schema: { example: "application/xml" } },
+                { name: "Accept", in: "header", schema: { example: "text/html" } },
+                { name: "Authorization", in: "header", schema: { example: "custom" } },
+                { name: "X-Custom", in: "header", schema: { example: "kept" } },
+              ],
+              requestBody: { content: { "application/json": { schema: { type: "object" } } } },
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.headers).toEqual([
+      { enabled: false, name: "X-Custom", value: "kept" },
+      { enabled: true, name: "Content-Type", value: "application/json" },
+    ]);
+  });
+
+  test("Imports cookie parameters as a Cookie header", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Cookie Test", version: "1.0.0" },
+        paths: {
+          "/a": {
+            get: {
+              parameters: [
+                { name: "session", in: "cookie", required: true, schema: { example: "abc" } },
+                { name: "theme", in: "cookie", schema: { example: "dark" } },
+              ],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    // One row per cookie so each stays toggleable; the send path merges them
+    expect(imported?.resources.httpRequests[0]?.headers).toEqual([
+      { enabled: true, name: "Cookie", value: "session=abc" },
+      { enabled: false, name: "Cookie", value: "theme=dark" },
+    ]);
+  });
+
+  test("Inlines path templates that Yaak placeholders cannot express", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Mid-Segment Test", version: "1.0.0" },
+        paths: {
+          "/report.{format}": {
+            get: {
+              parameters: [
+                { name: "format", in: "path", required: true, schema: { example: "csv" } },
+              ],
+              responses: {},
+            },
+          },
+          "/tasks/{id}:cancel": {
+            post: {
+              parameters: [{ name: "id", in: "path", required: true, schema: { example: "7" } }],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests.map((r) => [r.url, r.urlParameters])).toEqual([
+      ["${[baseUrl]}/report.csv", []],
+      ["${[baseUrl]}/tasks/:id:cancel", [{ enabled: true, name: ":id", value: "7" }]],
+    ]);
+  });
+
+  test("Enables path parameters even when required is omitted", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Sloppy Path Test", version: "1.0.0" },
+        paths: {
+          "/users/{userId}": {
+            get: {
+              parameters: [{ name: "userId", in: "path", schema: { type: "string" } }],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    // No example either, so the name stands in for an empty path segment
+    expect(imported?.resources.httpRequests[0]?.urlParameters).toEqual([
+      { enabled: true, name: ":userId", value: "userId" },
+    ]);
+  });
+
+  test("Coerces examples to the declared schema type", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Coercion Test", version: "1.0.0" },
+        paths: {
+          "/a": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": {
+                    schema: {
+                      type: "object",
+                      properties: {
+                        password: { type: "string", example: 12345 },
+                        count: { type: "integer", example: "3" },
+                        note: { example: 7 },
+                      },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: JSON.stringify({ password: "12345", count: 3, note: 7 }, null, 2),
+    });
+  });
+
+  test("Merges allOf branches with sibling properties", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "AllOf Test", version: "1.0.0" },
+        paths: {
+          "/a": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": {
+                    schema: {
+                      type: "object",
+                      allOf: [{ type: "object", properties: { fromAllOf: { example: "a" } } }],
+                      properties: { sibling: { example: "b" } },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: JSON.stringify({ fromAllOf: "a", sibling: "b" }, null, 2),
+    });
+  });
+
+  test("Accepts unquoted YAML version numbers", async () => {
+    const imported = await convertOpenApi(
+      [
+        "swagger: 2.0",
+        "info:",
+        "  title: Unquoted Test",
+        '  version: "1"',
+        "host: example.com",
+        "paths:",
+        "  /a:",
+        "    get:",
+        "      responses: {}",
+      ].join("\n"),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.url).toBe("${[baseUrl]}/a");
+    // The numeric version must feed server detection too, or the selectable
+    // environment overrides baseUrl with an empty value
+    expect(imported?.resources.environments[1]).toEqual(
+      expect.objectContaining({
+        name: "Server 1",
+        variables: [{ name: "baseUrl", value: "https://example.com" }],
+      }),
+    );
+  });
+
+  test("Normalizes body types to Yaak's editors", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Body Type Test", version: "1.0.0" },
+        paths: {
+          "/vnd-json": {
+            post: {
+              requestBody: {
+                content: { "application/vnd.api+json": { schema: { type: "object" } } },
+              },
+              responses: {},
+            },
+          },
+          "/plain": {
+            post: {
+              requestBody: { content: { "text/plain": { schema: { type: "string" } } } },
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(
+      imported?.resources.httpRequests.map((r) => [r.bodyType, r.headers?.[0]?.value]),
+    ).toEqual([
+      ["application/json", "application/vnd.api+json"],
+      ["other", "text/plain"],
+    ]);
+  });
+
+  test("Trims trailing slashes from server URLs", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Trailing Slash Test", version: "1.0.0" },
+        servers: [{ url: "https://api.example.com/v1/" }],
+        paths: { "/pets": { get: { responses: {} } } },
+      }),
+    );
+
+    expect(imported?.resources.environments[1]?.variables).toEqual([
+      { name: "baseUrl", value: "https://api.example.com/v1" },
+    ]);
+  });
+
+  test("Imports OpenAPI 3.1 schema reference siblings and examples", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Reference Examples", version: "1.0.0" },
+        paths: {
+          "/sibling": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": {
+                    schema: {
+                      $ref: "#/components/schemas/Message",
+                      example: { text: "overridden by sibling" },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+          "/example-ref": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": {
+                    examples: { sample: { $ref: "#/components/examples/Message" } },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+          "/schema-values": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": {
+                    schema: {
+                      type: "object",
+                      properties: {
+                        fromExamples: { type: "string", examples: ["first", "second"] },
+                        fromConst: { const: "fixed" },
+                      },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+          "/sibling-form": {
+            post: {
+              requestBody: {
+                content: {
+                  "multipart/form-data": {
+                    schema: {
+                      $ref: "#/components/schemas/MessageForm",
+                      required: ["extra"],
+                      properties: { extra: { type: "string", default: "sibling" } },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+        components: {
+          schemas: {
+            Message: { type: "object", properties: { text: { default: "base" } } },
+            MessageForm: {
+              $ref: "#/components/schemas/BaseMessageForm",
+              required: ["middle"],
+              properties: {
+                middle: { type: "string", default: "intermediate" },
+                optional: { type: "string", default: "optional" },
+              },
+            },
+            BaseMessageForm: {
+              type: "object",
+              required: ["base"],
+              properties: { base: { type: "string", default: "referenced" } },
+            },
+          },
+          examples: {
+            Message: { value: { text: "resolved example" } },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests.map((request) => request.body)).toEqual([
+      { text: JSON.stringify({ text: "overridden by sibling" }, null, 2) },
+      { text: JSON.stringify({ text: "resolved example" }, null, 2) },
+      { text: JSON.stringify({ fromExamples: "first", fromConst: "fixed" }, null, 2) },
+      {
+        form: [
+          { enabled: true, name: "base", value: "referenced" },
+          { enabled: true, name: "middle", value: "intermediate" },
+          { enabled: false, name: "optional", value: "optional" },
+          { enabled: true, name: "extra", value: "sibling" },
+        ],
+      },
+    ]);
+  });
+
+  test("Merges colliding and composed schema properties", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Composed Schema Examples", version: "1.0.0" },
+        paths: {
+          "/colliding-property": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/xml": {
+                    schema: {
+                      $ref: "#/components/schemas/BasePayload",
+                      properties: {
+                        shared: {
+                          xml: { name: "renamed" },
+                          properties: {
+                            local: { type: "string", default: "sibling" },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+          "/composition-siblings": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": {
+                    schema: {
+                      allOf: [
+                        {
+                          type: "object",
+                          properties: {
+                            shared: {
+                              type: "object",
+                              properties: {
+                                fromBranch: { type: "string", default: "branch" },
+                              },
+                            },
+                            branchOnly: { type: "string", default: "branch" },
+                          },
+                        },
+                      ],
+                      properties: {
+                        shared: {
+                          type: "object",
+                          properties: {
+                            fromSibling: { type: "string", default: "sibling" },
+                          },
+                        },
+                        siblingOnly: { type: "string", default: "sibling" },
+                      },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+          "/composition-form": {
+            post: {
+              requestBody: {
+                content: {
+                  "multipart/form-data": {
+                    schema: {
+                      $ref: "#/components/schemas/ComposedForm",
+                      required: ["siblingField"],
+                      properties: {
+                        siblingField: { type: "string", default: "sibling" },
+                      },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+        components: {
+          schemas: {
+            Shared: {
+              type: "object",
+              xml: { namespace: "urn:shared", prefix: "s" },
+              properties: {
+                inherited: { type: "string", default: "base" },
+              },
+            },
+            BasePayload: {
+              type: "object",
+              xml: { name: "payload" },
+              properties: {
+                shared: {
+                  $ref: "#/components/schemas/Shared",
+                  xml: { name: "base-shared" },
+                },
+              },
+            },
+            ComposedForm: {
+              allOf: [
+                {
+                  type: "object",
+                  required: ["baseField"],
+                  properties: {
+                    baseField: { type: "string", default: "base" },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests.map((request) => request.body)).toEqual([
+      {
+        text:
+          '<payload><s:renamed xmlns:s="urn:shared">' +
+          "<inherited>base</inherited><local>sibling</local>" +
+          "</s:renamed></payload>",
+      },
+      {
+        text: JSON.stringify(
+          {
+            shared: { fromBranch: "branch", fromSibling: "sibling" },
+            branchOnly: "branch",
+            siblingOnly: "sibling",
+          },
+          null,
+          2,
+        ),
+      },
+      {
+        form: [
+          { enabled: true, name: "baseField", value: "base" },
+          { enabled: true, name: "siblingField", value: "sibling" },
+        ],
+      },
+    ]);
+  });
+
+  test("Stops circular schema references when generating examples", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Circular References", version: "1.0.0" },
+        paths: {
+          "/nodes": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": { schema: { $ref: "#/components/schemas/Node" } },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+        components: {
+          schemas: {
+            Node: {
+              type: "object",
+              properties: {
+                name: { type: "string", example: "root" },
+                child: {
+                  $ref: "#/components/schemas/Node",
+                  required: ["relationship"],
+                  properties: {
+                    relationship: { type: "string", example: "nested" },
+                  },
+                },
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: JSON.stringify({ name: "root", child: { relationship: "nested" } }, null, 2),
+    });
+  });
+
+  test("Bounds deeply colliding schema merges", async () => {
+    const depth = 12_000;
+    const nestedSchema = (leaf: string, levels: number) =>
+      '{"type":"object","properties":{"next":'.repeat(levels) + leaf + "}}".repeat(levels);
+    const baseSchema = nestedSchema('{"type":"string","default":"base"}', depth);
+    const siblingProperty = nestedSchema('{"type":"string","example":"sibling"}', depth - 1);
+
+    const imported = await convertOpenApi(
+      '{"openapi":"3.1.0","info":{"title":"Deep Merge","version":"1.0.0"},' +
+        '"paths":{"/deep":{"post":{"requestBody":{"content":{"application/json":' +
+        '{"schema":{"$ref":"#/components/schemas/DeepBase","properties":{"next":' +
+        siblingProperty +
+        '}}}}},"responses":{}}}},"components":{"schemas":{"DeepBase":' +
+        baseSchema +
+        "}}}",
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: JSON.stringify(
+        {
+          next: {
+            next: {
+              next: {
+                next: {
+                  next: {
+                    next: {
+                      next: {
+                        next: {
+                          next: {},
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+        null,
+        2,
+      ),
+    });
+  });
+
+  test("Bounds deeply nested inline allOf schemas", async () => {
+    const depth = 12_000;
+    const schema =
+      '{"allOf":['.repeat(depth) + '{"type":"string","example":"leaf"}' + "]}".repeat(depth);
+    const imported = await convertOpenApi(
+      '{"openapi":"3.1.0","info":{"title":"Deep allOf","version":"1.0.0"},' +
+        '"paths":{"/deep":{"post":{"requestBody":{"content":{"application/json":{"schema":' +
+        schema +
+        '}}},"responses":{}}}}}',
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: JSON.stringify({}, null, 2),
+    });
+  });
+
+  test("Resolves long local reference chains without truncating schemas", async () => {
+    const depth = 12_000;
+    const schemas: Record<string, unknown> = {
+      [`Ref${depth}`]: {
+        type: "object",
+        properties: { target: { type: "string", example: "reached" } },
+      },
+    };
+    for (let index = depth - 1; index >= 0; index--) {
+      schemas[`Ref${index}`] = {
+        $ref: `#/components/schemas/Ref${index + 1}`,
+        ...(index === 1 ? { properties: { middle: { type: "string", example: "sibling" } } } : {}),
+      };
+    }
+
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.1.0",
+        info: { title: "Long Reference Chain", version: "1.0.0" },
+        paths: {
+          "/long-ref": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": {
+                    schema: {
+                      $ref: "#/components/schemas/Ref0",
+                      properties: { outer: { type: "string", example: "request" } },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+        components: { schemas },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: JSON.stringify({ target: "reached", middle: "sibling", outer: "request" }, null, 2),
+    });
+  });
+
+  test("Imports cookie and content-based parameters", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Parameter Test", version: "1.0.0" },
+        paths: {
+          "/items": {
+            get: {
+              parameters: [
+                {
+                  name: "session",
+                  in: "cookie",
+                  required: true,
+                  schema: { type: "string", example: "abc" },
+                },
+                {
+                  name: "debug",
+                  in: "cookie",
+                  schema: { type: "string", example: "verbose" },
+                },
+                {
+                  name: "prefs",
+                  in: "cookie",
+                  required: true,
+                  schema: { type: "object", example: { theme: "dark", lang: "en" } },
+                },
+                {
+                  name: "colors",
+                  in: "cookie",
+                  required: true,
+                  explode: false,
+                  schema: { type: "array", example: ["red", "blue"] },
+                },
+                {
+                  name: "X-Filter",
+                  in: "header",
+                  required: true,
+                  content: { "text/plain": { example: "active" } },
+                },
+              ],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.headers).toEqual([
+      { enabled: true, name: "X-Filter", value: "active" },
+      { enabled: true, name: "Cookie", value: "session=abc" },
+      { enabled: false, name: "Cookie", value: "debug=verbose" },
+      // Cookie pairs separate with "; ", never "&"
+      { enabled: true, name: "Cookie", value: "theme=dark; lang=en" },
+      { enabled: true, name: "Cookie", value: "colors=red,blue" },
+    ]);
+  });
+
+  test("Preserves parameter cookies alongside cookie API-key authentication", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Authenticated Cookie Test", version: "1.0.0" },
+        paths: {
+          "/items": {
+            get: {
+              security: [{ basicAuth: [], cookieKey: [] }],
+              parameters: [
+                {
+                  name: "session",
+                  in: "cookie",
+                  required: true,
+                  schema: { type: "string", example: "abc" },
+                },
+                {
+                  name: "debug",
+                  in: "cookie",
+                  schema: { type: "string", example: "verbose" },
+                },
+              ],
+              responses: {},
+            },
+          },
+        },
+        components: {
+          securitySchemes: {
+            basicAuth: { type: "http", scheme: "basic" },
+            cookieKey: { type: "apiKey", in: "cookie", name: "api_key" },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]).toEqual(
+      expect.objectContaining({
+        authenticationType: "basic",
+        headers: [
+          { enabled: true, name: "Cookie", value: "api_key=${[auth_cookie_key_key]}" },
+          { enabled: true, name: "Cookie", value: "session=abc" },
+          { enabled: false, name: "Cookie", value: "debug=verbose" },
+        ],
+      }),
+    );
+  });
+
+  test("Serializes structured query parameters according to style and explode", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Serialization Test", version: "1.0.0" },
+        paths: {
+          "/items": {
+            get: {
+              parameters: [
+                {
+                  name: "filter",
+                  in: "query",
+                  required: true,
+                  style: "deepObject",
+                  explode: true,
+                  schema: {
+                    type: "object",
+                    properties: {
+                      role: { example: "admin" },
+                      active: { example: true },
+                    },
+                  },
+                },
+                {
+                  name: "tags",
+                  in: "query",
+                  style: "form",
+                  explode: true,
+                  schema: { type: "array", example: ["one", "two"] },
+                },
+              ],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.urlParameters).toEqual([
+      { enabled: true, name: "filter[role]", value: "admin" },
+      { enabled: true, name: "filter[active]", value: "true" },
+      { enabled: false, name: "tags", value: "one" },
+      { enabled: false, name: "tags", value: "two" },
+    ]);
+  });
+
+  test("Emits executable label and matrix path serializations", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Path Serialization Test", version: "1.0.0" },
+        paths: {
+          "/labels/{labels}/matrix/{coordinates}/scalar/{color}/report.{format}": {
+            get: {
+              parameters: [
+                {
+                  name: "labels",
+                  in: "path",
+                  required: true,
+                  style: "label",
+                  explode: true,
+                  schema: { type: "array", example: ["one/two", "three"] },
+                },
+                {
+                  name: "coordinates",
+                  in: "path",
+                  required: true,
+                  style: "matrix",
+                  explode: true,
+                  schema: { type: "object", example: { x: "1;spoof=2", y: 2 } },
+                },
+                {
+                  name: "format",
+                  in: "path",
+                  required: true,
+                  schema: { type: "string", example: "json/evil" },
+                },
+                {
+                  name: "color",
+                  in: "path",
+                  required: true,
+                  style: "label",
+                  schema: { type: "string", example: "blue" },
+                },
+              ],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]).toEqual(
+      expect.objectContaining({
+        url: "${[baseUrl]}/labels/.one%2Ftwo.three/matrix/;x=1%3Bspoof%3D2;y=2/scalar/.blue/report.json%2Fevil",
+        urlParameters: [],
+      }),
+    );
+  });
+
+  test("Serializes request examples according to their media type", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Media Type Test", version: "1.0.0" },
+        paths: {
+          "/xml": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/xml": {
+                    schema: {
+                      type: "object",
+                      xml: { name: "user" },
+                      properties: { name: { type: "string", example: "Ada" } },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+          "/json-string": {
+            post: {
+              requestBody: {
+                content: { "application/json": { schema: { type: "string", example: "hello" } } },
+              },
+              responses: {},
+            },
+          },
+          "/json-preserialized": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": {
+                    schema: { type: "string", example: '{"already": "json"}' },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: "<user><name>Ada</name></user>",
+    });
+    expect(imported?.resources.httpRequests[0]?.bodyType).toBe("text/xml");
+    expect(imported?.resources.httpRequests[1]?.body).toEqual({ text: '"hello"' });
+    expect(imported?.resources.httpRequests[2]?.body).toEqual({ text: '{"already": "json"}' });
+  });
+
+  test("Honors XML array wrapping and namespaces", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "XML Metadata Test", version: "1.0.0" },
+        paths: {
+          "/catalog": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/xml": {
+                    schema: {
+                      type: "object",
+                      xml: { name: "catalog", namespace: "urn:catalog", prefix: "c" },
+                      properties: {
+                        id: {
+                          type: "string",
+                          example: "42",
+                          xml: { attribute: true, namespace: "urn:metadata", prefix: "m" },
+                        },
+                        externalId: {
+                          type: "string",
+                          example: "external",
+                          xml: {
+                            attribute: true,
+                            name: "external-id",
+                            namespace: "urn:external",
+                            prefix: "ns1",
+                          },
+                        },
+                        tenant: {
+                          type: "string",
+                          example: "acme",
+                          xml: { attribute: true, namespace: "urn:tenant" },
+                        },
+                        region: {
+                          type: "string",
+                          example: "west",
+                          xml: { attribute: true, namespace: "urn:tenant" },
+                        },
+                        legacy: {
+                          type: "string",
+                          example: "plain",
+                          xml: { attribute: true, namespace: "", prefix: "unbound" },
+                        },
+                        tags: {
+                          type: "array",
+                          example: ["one", "two"],
+                          xml: {
+                            name: "tags",
+                            namespace: "urn:tags",
+                            prefix: "t",
+                            wrapped: true,
+                          },
+                          items: { type: "string", xml: { name: "tag" } },
+                        },
+                        aliases: {
+                          type: "array",
+                          example: ["Ada", "A"],
+                          xml: { name: "ignored", wrapped: false },
+                          items: {
+                            type: "string",
+                            xml: { name: "alias", namespace: "urn:aliases", prefix: "a" },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+          "/values": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/xml": {
+                    schema: {
+                      type: "array",
+                      example: ["one", "two"],
+                      xml: { name: "values", wrapped: false },
+                      items: { type: "string", xml: { name: "value" } },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text:
+        '<c:catalog xmlns:c="urn:catalog" xmlns:m="urn:metadata" ' +
+        'xmlns:ns1="urn:external" xmlns:ns2="urn:tenant" ' +
+        'm:id="42" ns1:external-id="external" ns2:tenant="acme" ns2:region="west" ' +
+        'legacy="plain">' +
+        '<t:tags xmlns:t="urn:tags"><tag>one</tag><tag>two</tag></t:tags>' +
+        '<a:alias xmlns:a="urn:aliases">Ada</a:alias>' +
+        '<a:alias xmlns:a="urn:aliases">A</a:alias>' +
+        "</c:catalog>",
+    });
+    expect(imported?.resources.httpRequests[1]?.body).toEqual({
+      text: "<values><value>one</value><value>two</value></values>",
+    });
+  });
+
+  test("Omits read-only properties from generated request bodies", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.4",
+        info: { title: "Read Only Test", version: "1.0.0" },
+        paths: {
+          "/users": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": {
+                    schema: {
+                      type: "object",
+                      properties: {
+                        id: { type: "string", readOnly: true, example: "server-id" },
+                        name: { type: "string", example: "Ada" },
+                      },
+                    },
+                  },
+                },
+              },
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: JSON.stringify({ name: "Ada" }, null, 2),
+    });
+  });
+
+  test("Imports Swagger 2 file parameters as file form entries", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        swagger: "2.0",
+        info: { title: "File Upload Test", version: "1.0.0" },
+        host: "example.com",
+        consumes: ["multipart/form-data"],
+        paths: {
+          "/upload": {
+            post: {
+              parameters: [{ name: "upload", in: "formData", required: true, type: "file" }],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      form: [{ enabled: true, name: "upload", file: "" }],
+    });
+  });
+
+  test("Serializes Swagger 2 XML request bodies as XML", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        swagger: "2.0",
+        info: { title: "Swagger XML Test", version: "1.0.0" },
+        host: "example.com",
+        consumes: ["application/xml"],
+        paths: {
+          "/users": {
+            post: {
+              parameters: [
+                {
+                  name: "user",
+                  in: "body",
+                  required: true,
+                  schema: {
+                    type: "object",
+                    xml: { name: "user" },
+                    properties: { name: { type: "string", example: "Ada" } },
+                  },
+                },
+              ],
+              responses: {},
+            },
+          },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.body).toEqual({
+      text: "<user><name>Ada</name></user>",
+    });
+    expect(imported?.resources.httpRequests[0]?.bodyType).toBe("text/xml");
+  });
+
+  test("Reports references that point outside the document", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "External Ref Test", version: "1.0.0" },
+        paths: {
+          "/a": {
+            post: {
+              requestBody: {
+                content: {
+                  "application/json": { schema: { $ref: "./shared.yaml#/components/schemas/Foo" } },
+                },
+              },
+              responses: {},
+            },
+          },
+          "/b": { get: { responses: {} } },
+        },
+      }),
+    );
+
+    expect(imported?.resources.httpRequests[0]?.description).toContain(
+      "./shared.yaml#/components/schemas/Foo",
+    );
+    // The report is per-operation, so an unrelated request stays clean
+    expect(imported?.resources.httpRequests[1]?.description).toBeUndefined();
+  });
+
+  for (const fixture of fixtures) {
+    test(`Imports ${fixture}`, async () => {
+      const contents = fs.readFileSync(path.join(p, fixture), "utf-8");
+      const imported = await convertOpenApi(contents);
+      expect(imported?.resources.workspaces).toEqual([
+        expect.objectContaining({
+          name: "Swagger Petstore - OpenAPI 3.0",
+          description: expect.stringContaining("This is a sample Pet Store Server"),
+        }),
+      ]);
+      expect(imported?.resources.httpRequests.length).toBe(19);
+      expect(imported?.resources.folders.map((f) => f.name)).toEqual(["pet", "store", "user"]);
+    });
+  }
+
+  for (const fixture of realWorldFixtures) {
+    test(`Snapshots real-world fixture ${fixture}`, async () => {
+      const contents = fs.readFileSync(path.join(realWorldFixturesPath, fixture), "utf-8");
+      const imported = await convertOpenApi(contents);
+      expect(imported).toMatchSnapshot();
+    });
+  }
+
+  test("Keys operations by operationId, unchanged by a rename", async () => {
+    const spec = (summary: string) =>
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Keys", version: "1" },
+        paths: {
+          "/pets": {
+            get: { operationId: "listPets", summary, tags: ["pets"], responses: {} },
+          },
+        },
+      });
+
+    const before = await convertOpenApi(spec("List pets"));
+    const after = await convertOpenApi(spec("Fetch every pet"));
+
+    expect(before?.sourceKeys?.[before.resources.httpRequests[0]!.id]).toBe("op:listPets");
+    expect(after?.sourceKeys?.[after.resources.httpRequests[0]!.id]).toBe("op:listPets");
+    expect(before?.sourceKeys?.[before.resources.folders[0]!.id]).toBe("tag:pets");
+  });
+
+  test("Falls back to the route when an operation has no operationId", async () => {
+    const imported = await convertOpenApi(
+      JSON.stringify({
+        openapi: "3.0.0",
+        info: { title: "Keys", version: "1" },
+        paths: { "/pets/{id}": { delete: { summary: "Remove", responses: {} } } },
+      }),
+    );
+
+    expect(imported?.sourceKeys?.[imported.resources.httpRequests[0]!.id]).toBe(
+      "route:DELETE /pets/{id}",
+    );
+  });
+});
diff --git a/plugins/importer-openapi/tests/roundtrip.mjs b/plugins/importer-openapi/tests/roundtrip.mjs
new file mode 100644
index 0000000..5b3637c
--- /dev/null
+++ b/plugins/importer-openapi/tests/roundtrip.mjs
@@ -0,0 +1,306 @@
+// Round-trip harness: import a spec with the local importer plugin, send every
+// request through the real Yaak CLI pipeline against a Prism mock of the same
+// spec, and report Prism's validation verdict for each request.
+//
+// Prism independently validates each incoming request against the spec (paths,
+// required parameters, body schemas, security), so a violation here is an
+// importer bug found by a second OpenAPI implementation rather than a snapshot
+// of our own output.
+//
+// Usage: node tests/roundtrip.mjs [spec.yaml ...]
+//   YAAK_BIN=/path/to/yaak overrides the CLI (defaults to the repo debug build,
+//   which embeds the plugins vendored from this checkout).
+
+import { execFileSync, spawn } from "node:child_process";
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const repoRoot = path.resolve(here, "../../..");
+const yaakBin = process.env.YAAK_BIN ?? path.join(repoRoot, "target/debug/yaak");
+const specs =
+  process.argv.length > 2
+    ? process.argv.slice(2)
+    : [
+        path.join(here, "fixtures/petstore.yaml"),
+        ...fs
+          .readdirSync(path.join(here, "fixtures/real-world"))
+          .filter((f) => f.endsWith(".yaml"))
+          .map((f) => path.join(here, "fixtures/real-world", f)),
+      ];
+
+if (!fs.existsSync(yaakBin)) {
+  console.error(`Yaak CLI not found at ${yaakBin}. Build it with: cargo build -p yaak-cli`);
+  process.exit(2);
+}
+
+// Pinned so local runs and CI judge against the same validator
+const PRISM_PACKAGE = "@stoplight/prism-cli@5.15.11";
+
+// Accepted spec-quality gray zones, not importer bugs. httpbin's required
+// `url` query parameter has no example, and an empty value is preferable to
+// inventing fake query data even though Prism counts it as missing.
+const KNOWN_FLAGS = new Set(["httpbin.yaml GET ${[baseUrl]}/redirect-to"]);
+
+function yaak(dataDir, args) {
+  return execFileSync(yaakBin, ["--data-dir", dataDir, ...args], {
+    encoding: "utf-8",
+    stdio: ["ignore", "pipe", "pipe"],
+  });
+}
+
+function yaakJson(dataDir, args) {
+  return JSON.parse(yaak(dataDir, args));
+}
+
+function listIds(output) {
+  return output
+    .split("\n")
+    .map((line) => line.match(/^(\w+_\w+) - /)?.[1])
+    .filter(Boolean);
+}
+
+async function startPrism(spec, port) {
+  for (let attempt = 0; attempt < 20; attempt++, port++) {
+    const prism = spawn(
+      "npx",
+      ["-y", PRISM_PACKAGE, "mock", "--errors", "-p", String(port), "-h", "127.0.0.1", spec],
+      { stdio: ["ignore", "pipe", "pipe"] },
+    );
+    let log = "";
+    prism.stdout.on("data", (d) => (log += d));
+    prism.stderr.on("data", (d) => (log += d));
+    // Generous: the first run downloads Prism through npx
+    const deadline = Date.now() + 120_000;
+    let failed = false;
+    while (Date.now() < deadline) {
+      if (log.includes("Prism is listening")) return { prism, port, getLog: () => log };
+      if (log.includes("EADDRINUSE") || prism.exitCode != null) {
+        failed = true;
+        break;
+      }
+      await new Promise((r) => setTimeout(r, 200));
+    }
+    prism.kill();
+    if (failed) {
+      // The exit can be observed before its buffered stderr arrives; wait for
+      // the streams to close so the bind error is distinguishable
+      await Promise.race([
+        new Promise((r) => prism.once("close", r)),
+        new Promise((r) => setTimeout(r, 2000)),
+      ]);
+      if (log.includes("EADDRINUSE")) continue;
+      throw new Error(`Prism exited:\n${log}`);
+    }
+    throw new Error(`Prism did not start in time:\n${log}`);
+  }
+  throw new Error("No free port found for Prism");
+}
+
+function pointVariablesAtPrism(variables, prismUrl) {
+  return variables.map((v) => {
+    if (v.name === "baseUrl" || v.name.startsWith("serverUrl")) return { ...v, value: prismUrl };
+    if (v.name === "baseUrlOrigin") return { ...v, value: prismUrl };
+    if (v.value === "") return { ...v, value: "test-value" };
+    return v;
+  });
+}
+
+// Prism reports its verdict in the sl-violations response header. Violations
+// located in the request are importer bugs; violations located in the response
+// mean Prism could not fabricate a spec-valid mock response (the spec's own
+// examples are broken), which says nothing about the import.
+function classify(response, bodyText) {
+  if (response.error) return { verdict: "SEND ERROR", detail: response.error };
+
+  const violationsHeader = (response.headers ?? []).find(
+    (h) => h.name?.toLowerCase() === "sl-violations",
+  );
+  let violations = [];
+  try {
+    violations = JSON.parse(violationsHeader?.value ?? "[]");
+  } catch {}
+  const requestViolations = violations.filter((v) => v.location?.[0] === "request");
+  const detail = requestViolations.map((v) => `${v.location.join(".")}: ${v.message}`).join("; ");
+
+  if (requestViolations.length > 0) return { verdict: "VIOLATION", detail };
+
+  // A spec-defined error response (e.g. an operation whose only response is a
+  // 405) mocks as that status with no Prism error type; only Prism's own error
+  // bodies mark a request Prism could not accept.
+  let body = null;
+  try {
+    body = JSON.parse(bodyText);
+  } catch {}
+  const prismError =
+    typeof body?.type === "string" && body.type.includes("stoplight.io/prism/errors")
+      ? body.type.split("#")[1]
+      : null;
+  if (prismError == null) return { verdict: "ok", detail: "" };
+
+  // Failures to fabricate a mock response say nothing about the request we sent
+  if (prismError === "NO_COMPLEX_OBJECT_TEXT" || prismError === "NO_RESPONSE_DEFINED") {
+    return { verdict: "ok", detail: "" };
+  }
+
+  const bodyViolations = Array.isArray(body.validation)
+    ? body.validation.filter((v) => v.location?.[0] === "request")
+    : [];
+  if (prismError === "VIOLATIONS" && bodyViolations.length === 0) {
+    return { verdict: "ok", detail: "" }; // response-side only
+  }
+  return {
+    verdict:
+      prismError === "VIOLATIONS" || prismError === "UNPROCESSABLE_ENTITY"
+        ? "VIOLATION"
+        : prismError.includes("MATCHED")
+          ? "NO ROUTE"
+          : prismError === "UNAUTHORIZED"
+            ? "SECURITY"
+            : prismError,
+    detail:
+      bodyViolations.map((v) => `${v.location.join(".")}: ${v.message}`).join("; ") ||
+      body.detail ||
+      "",
+  };
+}
+
+let totalProblems = 0;
+let port = 4010;
+
+for (const spec of specs) {
+  const name = path.basename(spec);
+  const dataDir = fs.mkdtempSync(path.join(os.tmpdir(), "yaak-roundtrip-"));
+  console.log(`\n=== ${name} ===`);
+
+  try {
+    yaak(dataDir, ["import", spec]);
+    const workspaceId = listIds(yaak(dataDir, ["workspace", "list"]))[0];
+    if (workspaceId == null) {
+      console.log("  IMPORT PRODUCED NO WORKSPACE");
+      totalProblems++;
+      continue;
+    }
+    // Prism mocks redirect responses without a Location header; following them
+    // would fail the send for a reason unrelated to the import. Workspace-level
+    // OAuth2 gets the same dummy-bearer treatment as request-level below.
+    const workspace = yaakJson(dataDir, ["workspace", "show", workspaceId]);
+    yaak(dataDir, [
+      "workspace",
+      "update",
+      "--json",
+      JSON.stringify({
+        id: workspaceId,
+        settingFollowRedirects: false,
+        ...(workspace.authenticationType === "oauth2"
+          ? {
+              authenticationType: "bearer",
+              authentication: { token: "test-token", prefix: "Bearer" },
+            }
+          : {}),
+      }),
+    ]);
+
+    const { prism, port: boundPort, getLog } = await startPrism(spec, port);
+    port = boundPort + 1;
+    try {
+      const prismUrl = `http://127.0.0.1:${boundPort}`;
+      const environmentIds = listIds(yaak(dataDir, ["environment", "list", workspaceId]));
+      let activeEnvironment = null;
+      for (const id of environmentIds) {
+        const environment = yaakJson(dataDir, ["environment", "show", id]);
+        yaak(dataDir, [
+          "environment",
+          "update",
+          "--json",
+          JSON.stringify({
+            id,
+            variables: pointVariablesAtPrism(environment.variables ?? [], prismUrl),
+          }),
+        ]);
+        if (environment.parentModel === "environment" && activeEnvironment == null) {
+          activeEnvironment = id;
+        }
+      }
+
+      const requestIds = listIds(yaak(dataDir, ["request", "list", workspaceId]));
+      const requests = new Map();
+      for (const id of requestIds) {
+        const request = yaakJson(dataDir, ["request", "show", id]);
+        requests.set(id, request);
+        // OAuth2 would try to fetch a real token; Prism only checks that the
+        // Authorization header is present, so a dummy bearer keeps it satisfied.
+        if (request.authenticationType === "oauth2") {
+          yaak(dataDir, [
+            "request",
+            "update",
+            "--json",
+            JSON.stringify({
+              id,
+              authenticationType: "bearer",
+              authentication: { token: "test-token", prefix: "Bearer" },
+            }),
+          ]);
+        }
+      }
+
+      const sendArgs = ["send", workspaceId];
+      if (activeEnvironment != null) sendArgs.push("-e", activeEnvironment);
+      try {
+        yaak(dataDir, sendArgs);
+      } catch {
+        // Individual send failures surface per-request below.
+      }
+
+      let problems = 0;
+      for (const id of requestIds) {
+        const request = requests.get(id);
+        const label = `${request.method} ${request.url}`;
+        let response = null;
+        let bodyText = "";
+        try {
+          response = yaakJson(dataDir, ["response", "show", id]);
+          try {
+            bodyText = yaak(dataDir, ["response", "body", id]);
+          } catch {}
+        } catch {
+          console.log(`  NEVER SENT   ${label}`);
+          problems++;
+          continue;
+        }
+        const { verdict, detail } = classify(response, bodyText);
+        if (verdict === "ok") continue;
+        if (KNOWN_FLAGS.has(`${name} ${label}`)) {
+          console.log(`  known        ${label}`);
+          continue;
+        }
+        problems++;
+        console.log(`  ${verdict.padEnd(12)} ${label}`);
+        console.log(`               sent: ${response.url ?? "?"}`);
+        if (detail) console.log(`               ${detail}`);
+      }
+
+      const requestCount = requestIds.length;
+      if (problems === 0) {
+        console.log(`  all ${requestCount} requests validated clean against the mock`);
+      } else {
+        console.log(`  ${problems}/${requestCount} requests flagged`);
+        totalProblems += problems;
+      }
+      const inputWarnings = getLog()
+        .split("\n")
+        .filter((l) => l.includes("[VALIDATOR]") && !l.includes("output"));
+      if (inputWarnings.length > 0) {
+        console.log(`  prism validator log lines: ${inputWarnings.length}`);
+      }
+    } finally {
+      prism.kill();
+    }
+  } finally {
+    fs.rmSync(dataDir, { recursive: true, force: true });
+  }
+}
+
+process.exit(totalProblems > 0 ? 1 : 0);
diff --git a/plugins/importer-openapi/tsconfig.json b/plugins/importer-openapi/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/importer-openapi/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/importer-postman-environment/package.json b/plugins/importer-postman-environment/package.json
new file mode 100644
index 0000000..4b57e68
--- /dev/null
+++ b/plugins/importer-postman-environment/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@yaak/importer-postman-environment",
+  "displayName": "Postman Environment Importer",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Import environments from Postman",
+  "main": "./build/index.js",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  }
+}
diff --git a/plugins/importer-postman-environment/src/index.ts b/plugins/importer-postman-environment/src/index.ts
new file mode 100644
index 0000000..5433394
--- /dev/null
+++ b/plugins/importer-postman-environment/src/index.ts
@@ -0,0 +1,135 @@
+/* oxlint-disable no-base-to-string */
+import type {
+  Context,
+  Environment,
+  PartialImportResources,
+  PluginDefinition,
+  Workspace,
+} from "@yaakapp/api";
+import type { ImportPluginResponse } from "@yaakapp/api/lib/plugins/ImporterPlugin";
+
+type AtLeast<T, K extends keyof T> = Partial<T> & Pick<T, K>;
+
+interface ExportResources {
+  workspaces: AtLeast<Workspace, "name" | "id" | "model">[];
+  environments: AtLeast<Environment, "name" | "id" | "model" | "workspaceId">[];
+}
+
+export const plugin: PluginDefinition = {
+  importer: {
+    name: "Postman Environment",
+    description: "Import postman environment exports",
+    onImport(_ctx: Context, args: { text: string }) {
+      return convertPostmanEnvironment(args.text);
+    },
+  },
+};
+
+export function convertPostmanEnvironment(contents: string): ImportPluginResponse | undefined {
+  const root = parseJSONToRecord(contents);
+  if (root == null) return;
+
+  // Validate that it looks like a Postman Environment export
+  const values = toArray<{
+    key?: string;
+    value?: unknown;
+    enabled?: boolean;
+    description?: string;
+    type?: string;
+  }>(root.values);
+  const scope = root._postman_variable_scope;
+  const hasEnvMarkers = typeof scope === "string";
+
+  if (values.length === 0 || (!hasEnvMarkers && typeof root.name !== "string")) {
+    // Not a Postman environment file, skip
+    return;
+  }
+
+  const exportResources: ExportResources = {
+    workspaces: [],
+    environments: [],
+  };
+
+  const envVariables = values
+    .map((v) => ({
+      enabled: v.enabled ?? true,
+      name: String(v.key ?? ""),
+      value: String(v.value),
+      description: v.description ? String(v.description) : null,
+    }))
+    .filter((v) => v.name.length > 0);
+
+  const environment: ExportResources["environments"][0] = {
+    model: "environment",
+    id: generateId("environment"),
+    name: root.name ? String(root.name) : "Environment",
+    workspaceId: "CURRENT_WORKSPACE",
+    parentModel: "environment",
+    parentId: null,
+    variables: envVariables,
+  };
+  exportResources.environments.push(environment);
+
+  const resources = deleteUndefinedAttrs(
+    convertTemplateSyntax(exportResources),
+  ) as PartialImportResources;
+
+  return { resources };
+}
+
+function parseJSONToRecord<T>(jsonStr: string): Record<string, T> | null {
+  try {
+    return toRecord(JSON.parse(jsonStr));
+  } catch {
+    return null;
+  }
+}
+
+function toRecord<T>(value: unknown): Record<string, T> {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    return value as Record<string, T>;
+  }
+  return {} as Record<string, T>;
+}
+
+function toArray<T>(value: unknown): T[] {
+  if (Object.prototype.toString.call(value) === "[object Array]") return value as T[];
+  return [] as T[];
+}
+
+/** Recursively render all nested object properties */
+function convertTemplateSyntax<T>(obj: T): T {
+  if (typeof obj === "string") {
+    return obj.replace(/{{\s*(_\.)?([^}]*)\s*}}/g, (_m, _dot, expr) => `\${[${expr.trim()}]}`) as T;
+  }
+  if (Array.isArray(obj) && obj != null) {
+    return obj.map(convertTemplateSyntax) as T;
+  }
+  if (typeof obj === "object" && obj != null) {
+    return Object.fromEntries(
+      Object.entries(obj as Record<string, unknown>).map(([k, v]) => [k, convertTemplateSyntax(v)]),
+    ) as T;
+  }
+  return obj;
+}
+
+function deleteUndefinedAttrs<T>(obj: T): T {
+  if (Array.isArray(obj) && obj != null) {
+    return obj.map(deleteUndefinedAttrs) as T;
+  }
+  if (typeof obj === "object" && obj != null) {
+    return Object.fromEntries(
+      Object.entries(obj as Record<string, unknown>)
+        .filter(([, v]) => v !== undefined)
+        .map(([k, v]) => [k, deleteUndefinedAttrs(v)]),
+    ) as T;
+  }
+  return obj;
+}
+
+const idCount: Partial<Record<string, number>> = {};
+
+function generateId(model: string): string {
+  idCount[model] = (idCount[model] ?? -1) + 1;
+  return `GENERATE_ID::${model.toUpperCase()}_${idCount[model]}`;
+}
diff --git a/plugins/importer-postman-environment/tests/fixtures/environment.input.json b/plugins/importer-postman-environment/tests/fixtures/environment.input.json
new file mode 100644
index 0000000..4c08ef0
--- /dev/null
+++ b/plugins/importer-postman-environment/tests/fixtures/environment.input.json
@@ -0,0 +1,27 @@
+{
+  "id": "123",
+  "name": "My Environment",
+  "values": [
+    {
+      "key": "baseUrl",
+      "value": "https://api.example.com",
+      "type": "default",
+      "enabled": true
+    },
+    {
+      "key": "token",
+      "value": "{{ access_token }}",
+      "type": "default",
+      "description": "Access token for the API.",
+      "enabled": true
+    },
+    {
+      "key": "disabled",
+      "type": "secret",
+      "value": "hello",
+      "enabled": false
+    }
+  ],
+  "_postman_variable_scope": "environment",
+  "_postman_exported_using": "PostmanRuntime/1.0.0"
+}
diff --git a/plugins/importer-postman-environment/tests/fixtures/environment.output.json b/plugins/importer-postman-environment/tests/fixtures/environment.output.json
new file mode 100644
index 0000000..834a9e7
--- /dev/null
+++ b/plugins/importer-postman-environment/tests/fixtures/environment.output.json
@@ -0,0 +1,35 @@
+{
+  "resources": {
+    "workspaces": [],
+    "environments": [
+      {
+        "id": "GENERATE_ID::ENVIRONMENT_0",
+        "model": "environment",
+        "name": "My Environment",
+        "variables": [
+          {
+            "enabled": true,
+            "description": null,
+            "name": "baseUrl",
+            "value": "https://api.example.com"
+          },
+          {
+            "enabled": true,
+            "description": "Access token for the API.",
+            "name": "token",
+            "value": "${[access_token]}"
+          },
+          {
+            "enabled": false,
+            "description": null,
+            "name": "disabled",
+            "value": "hello"
+          }
+        ],
+        "workspaceId": "CURRENT_WORKSPACE",
+        "parentId": null,
+        "parentModel": "environment"
+      }
+    ]
+  }
+}
diff --git a/plugins/importer-postman-environment/tests/index.test.ts b/plugins/importer-postman-environment/tests/index.test.ts
new file mode 100644
index 0000000..a550e50
--- /dev/null
+++ b/plugins/importer-postman-environment/tests/index.test.ts
@@ -0,0 +1,22 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { describe, expect, test } from "vite-plus/test";
+import { convertPostmanEnvironment } from "../src";
+
+describe("importer-postman-environment", () => {
+  const p = path.join(__dirname, "fixtures");
+  const fixtures = fs.readdirSync(p);
+
+  for (const fixture of fixtures) {
+    if (fixture.includes(".output")) {
+      continue;
+    }
+
+    test(`Imports ${fixture}`, () => {
+      const contents = fs.readFileSync(path.join(p, fixture), "utf-8");
+      const expected = fs.readFileSync(path.join(p, fixture.replace(".input", ".output")), "utf-8");
+      const result = convertPostmanEnvironment(contents);
+      expect(result).toEqual(JSON.parse(expected));
+    });
+  }
+});
diff --git a/plugins/importer-postman-environment/tsconfig.json b/plugins/importer-postman-environment/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/importer-postman-environment/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/importer-postman/package.json b/plugins/importer-postman/package.json
new file mode 100644
index 0000000..6c46a17
--- /dev/null
+++ b/plugins/importer-postman/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@yaak/importer-postman",
+  "displayName": "Postman Importer",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Import collections from Postman",
+  "main": "./build/index.js",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  }
+}
diff --git a/plugins/importer-postman/src/index.ts b/plugins/importer-postman/src/index.ts
new file mode 100644
index 0000000..248241d
--- /dev/null
+++ b/plugins/importer-postman/src/index.ts
@@ -0,0 +1,659 @@
+/* oxlint-disable no-base-to-string */
+import type {
+  Context,
+  Environment,
+  Folder,
+  HttpRequest,
+  HttpRequestHeader,
+  HttpUrlParameter,
+  PartialImportResources,
+  PluginDefinition,
+  Workspace,
+} from "@yaakapp/api";
+import type { ImportPluginResponse } from "@yaakapp/api/lib/plugins/ImporterPlugin";
+
+const POSTMAN_2_1_0_SCHEMA = "https://schema.getpostman.com/json/collection/v2.1.0/collection.json";
+const POSTMAN_2_0_0_SCHEMA = "https://schema.getpostman.com/json/collection/v2.0.0/collection.json";
+const VALID_SCHEMAS = [POSTMAN_2_0_0_SCHEMA, POSTMAN_2_1_0_SCHEMA];
+
+// Both products happen to spell these the same way, but the names are written
+// out so anything Yaak's oauth1 plugin can't offer as a select option lands on
+// the default instead of being passed straight through.
+const OAUTH1_SIGNATURE_METHODS: Record<string, string> = {
+  "HMAC-SHA1": "HMAC-SHA1",
+  "HMAC-SHA256": "HMAC-SHA256",
+  "HMAC-SHA512": "HMAC-SHA512",
+  "RSA-SHA1": "RSA-SHA1",
+  "RSA-SHA256": "RSA-SHA256",
+  "RSA-SHA512": "RSA-SHA512",
+  PLAINTEXT: "PLAINTEXT",
+};
+const DEFAULT_OAUTH1_SIGNATURE_METHOD = "HMAC-SHA1";
+
+// Postman's dynamic variables that a Yaak template function reproduces exactly.
+// The faker-backed ones ({{$randomFirstName}} and friends) have no equivalent and
+// are left alone. Arguments have to be single-quoted; the template parser reads a
+// double-quoted call as raw text.
+const POSTMAN_DYNAMIC_VARIABLES: Record<string, string> = {
+  $guid: "uuid.v4()",
+  $randomUUID: "uuid.v4()",
+  $timestamp: "timestamp.unix()",
+  $isoTimestamp: "timestamp.iso8601()",
+  // Postman's $randomInt is an integer from 0 to 1000
+  $randomInt: "random.range(min='0',max='1000',decimals='0')",
+};
+
+type AtLeast<T, K extends keyof T> = Partial<T> & Pick<T, K>;
+
+interface ExportResources {
+  workspaces: AtLeast<Workspace, "name" | "id" | "model">[];
+  environments: AtLeast<Environment, "name" | "id" | "model" | "workspaceId">[];
+  httpRequests: AtLeast<HttpRequest, "name" | "id" | "model" | "workspaceId">[];
+  folders: AtLeast<Folder, "name" | "id" | "model" | "workspaceId">[];
+}
+
+export const plugin: PluginDefinition = {
+  importer: {
+    name: "Postman",
+    description: "Import postman collections",
+    onImport(_ctx: Context, args: { text: string }) {
+      return convertPostman(args.text);
+    },
+  },
+};
+
+export function convertPostman(contents: string): ImportPluginResponse | undefined {
+  const root = parseJSONToRecord(contents);
+  if (root == null) return;
+
+  const info = toRecord(root.info);
+  const isValidSchema = VALID_SCHEMAS.includes(
+    typeof info.schema === "string" ? info.schema : "n/a",
+  );
+  if (!isValidSchema || !Array.isArray(root.item)) {
+    return;
+  }
+
+  const globalAuth = importAuth(root.auth);
+
+  const sourceKeys: Record<string, string> = {};
+  const trackSourceKey = (modelId: string, v: Record<string, unknown>, prefix: string) => {
+    const id = v.id ?? v._postman_id;
+    if (typeof id === "string" && id !== "") sourceKeys[modelId] = `${prefix}:${id}`;
+  };
+
+  const exportResources: ExportResources = {
+    workspaces: [],
+    environments: [],
+    httpRequests: [],
+    folders: [],
+  };
+
+  const workspace: ExportResources["workspaces"][0] = {
+    model: "workspace",
+    id: generateId("workspace"),
+    name: info.name ? String(info.name) : "Postman Import",
+    description: importDescription(info.description),
+    ...globalAuth,
+  };
+  trackSourceKey(workspace.id, info, "collection");
+  exportResources.workspaces.push(workspace);
+
+  // Create the base environment
+  const environment: ExportResources["environments"][0] = {
+    model: "environment",
+    id: generateId("environment"),
+    name: "Global Variables",
+    workspaceId: workspace.id,
+    parentModel: "workspace",
+    parentId: null,
+    variables:
+      toArray<{ key: string; value: string }>(root.variable).map((v) => ({
+        name: v.key,
+        value: v.value,
+      })) ?? [],
+  };
+  exportResources.environments.push(environment);
+
+  let sortPriorityIndex = 0;
+  const importItem = (v: Record<string, unknown>, folderId: string | null = null) => {
+    if (typeof v.name === "string" && Array.isArray(v.item)) {
+      const folder: ExportResources["folders"][0] = {
+        model: "folder",
+        sortPriority: sortPriorityIndex++,
+        workspaceId: workspace.id,
+        id: generateId("folder"),
+        name: v.name,
+        folderId,
+        ...importAuth(v.auth),
+      };
+      trackSourceKey(folder.id, v, "item");
+      exportResources.folders.push(folder);
+      for (const child of v.item) {
+        importItem(child, folder.id);
+      }
+    } else if (typeof v.name === "string" && "request" in v) {
+      const r = toRecord(v.request);
+      const bodyPatch = importBody(r.body);
+      const requestAuth = importAuth(r.auth);
+
+      const headers: HttpRequestHeader[] = toArray<{
+        key: string;
+        value: string;
+        disabled?: boolean;
+      }>(r.header).map((h) => {
+        return {
+          name: h.key,
+          value: h.value,
+          enabled: !h.disabled,
+        };
+      });
+
+      // Add body headers only if they don't already exist
+      for (const bodyPatchHeader of bodyPatch.headers) {
+        const existingHeader = headers.find(
+          (h) => h.name.toLowerCase() === bodyPatchHeader.name.toLowerCase(),
+        );
+        if (existingHeader) {
+          continue;
+        }
+        headers.push(bodyPatchHeader);
+      }
+
+      const { url, urlParameters } = convertUrl(r.url);
+
+      const request: ExportResources["httpRequests"][0] = {
+        model: "http_request",
+        id: generateId("http_request"),
+        workspaceId: workspace.id,
+        folderId,
+        name: v.name,
+        description: importDescription(r.description),
+        method: typeof r.method === "string" ? r.method : "GET",
+        url,
+        urlParameters,
+        body: bodyPatch.body,
+        bodyType: bodyPatch.bodyType,
+        sortPriority: sortPriorityIndex++,
+        headers,
+        ...requestAuth,
+      };
+      trackSourceKey(request.id, v, "item");
+      exportResources.httpRequests.push(request);
+    } else {
+      console.log("Unknown item", v, folderId);
+    }
+  };
+
+  for (const item of root.item) {
+    importItem(item);
+  }
+
+  const resources = deleteUndefinedAttrs(
+    convertTemplateSyntax(exportResources),
+  ) as PartialImportResources;
+
+  return { resources, sourceKeys };
+}
+
+function convertUrl(rawUrl: unknown): Pick<HttpRequest, "url" | "urlParameters"> {
+  if (typeof rawUrl === "string") {
+    return { url: rawUrl, urlParameters: [] };
+  }
+
+  const url = toRecord(rawUrl);
+
+  let v = "";
+
+  if ("protocol" in url && typeof url.protocol === "string") {
+    v += `${url.protocol}://`;
+  }
+
+  if ("host" in url) {
+    v += `${Array.isArray(url.host) ? url.host.join(".") : String(url.host)}`;
+  }
+
+  if ("port" in url && typeof url.port === "string") {
+    v += `:${url.port}`;
+  }
+
+  if ("path" in url) {
+    if (Array.isArray(url.path) && url.path.length > 0) {
+      v += `/${url.path.join("/")}`;
+    } else if (typeof url.path === "string" && url.path.length > 0) {
+      v += `/${url.path.replace(/^\//, "")}`;
+    }
+  }
+
+  const params: HttpUrlParameter[] = [];
+  if ("query" in url && Array.isArray(url.query) && url.query.length > 0) {
+    for (const query of url.query) {
+      params.push({
+        name: query.key ?? "",
+        value: query.value ?? "",
+        enabled: !query.disabled,
+      });
+    }
+  }
+
+  if ("variable" in url && Array.isArray(url.variable) && url.variable.length > 0) {
+    for (const v of url.variable) {
+      params.push({
+        name: `:${v.key ?? ""}`,
+        value: v.value ?? "",
+        enabled: !v.disabled,
+      });
+    }
+  }
+
+  if ("hash" in url && typeof url.hash === "string") {
+    v += `#${url.hash}`;
+  }
+
+  return { url: v, urlParameters: params };
+}
+
+function importAuth(rawAuth: unknown): Pick<HttpRequest, "authentication" | "authenticationType"> {
+  const auth = toRecord<Record<string, string>>(rawAuth);
+
+  // Helper: Postman stores auth params as an array of { key, value, ... }
+  const pmArrayToObj = (v: unknown): Record<string, unknown> => {
+    if (!Array.isArray(v)) return toRecord(v);
+    const o: Record<string, unknown> = {};
+    for (const i of v) {
+      const ii = toRecord(i);
+      if (typeof ii.key === "string") {
+        o[ii.key] = ii.value;
+      }
+    }
+    return o;
+  };
+
+  const authType: string | undefined = auth.type ? String(auth.type) : undefined;
+
+  if (authType === "noauth") {
+    return {
+      authenticationType: "none",
+      authentication: {},
+    };
+  }
+
+  if ("basic" in auth && authType === "basic") {
+    const b = pmArrayToObj(auth.basic);
+    return {
+      authenticationType: "basic",
+      authentication: {
+        username: String(b.username ?? ""),
+        password: String(b.password ?? ""),
+      },
+    };
+  }
+
+  if ("bearer" in auth && authType === "bearer") {
+    const b = pmArrayToObj(auth.bearer);
+    // Postman uses key "token"
+    return {
+      authenticationType: "bearer",
+      authentication: {
+        token: String(b.token ?? ""),
+      },
+    };
+  }
+
+  if ("digest" in auth && authType === "digest") {
+    const d = pmArrayToObj(auth.digest);
+    return {
+      authenticationType: "digest",
+      authentication: {
+        username: d.username != null ? String(d.username) : undefined,
+        password: d.password != null ? String(d.password) : undefined,
+        realm: d.realm != null ? String(d.realm) : undefined,
+      },
+    };
+  }
+
+  if ("ntlm" in auth && authType === "ntlm") {
+    const n = pmArrayToObj(auth.ntlm);
+    return {
+      authenticationType: "windows",
+      authentication: {
+        username: n.username != null ? String(n.username) : undefined,
+        password: n.password != null ? String(n.password) : undefined,
+        domain: n.domain != null ? String(n.domain) : undefined,
+        workstation: n.workstation != null ? String(n.workstation) : undefined,
+      },
+    };
+  }
+
+  if ("awsv4" in auth && authType === "awsv4") {
+    const a = pmArrayToObj(auth.awsv4);
+    return {
+      authenticationType: "awsv4",
+      authentication: {
+        accessKeyId: a.accessKey != null ? String(a.accessKey) : undefined,
+        secretAccessKey: a.secretKey != null ? String(a.secretKey) : undefined,
+        sessionToken: a.sessionToken != null ? String(a.sessionToken) : undefined,
+        region: a.region != null ? String(a.region) : undefined,
+        service: a.service != null ? String(a.service) : undefined,
+      },
+    };
+  }
+
+  if ("apikey" in auth && authType === "apikey") {
+    const a = pmArrayToObj(auth.apikey);
+    return {
+      authenticationType: "apikey",
+      authentication: {
+        location: a.in === "query" ? "query" : "header",
+        // Postman's "key" is the header/parameter name and its "value" is the
+        // secret, matching Yaak's own apikey auth.
+        key: a.key != null ? String(a.key) : undefined,
+        value: a.value != null ? String(a.value) : undefined,
+      },
+    };
+  }
+
+  if ("jwt" in auth && authType === "jwt") {
+    const a = pmArrayToObj(auth.jwt);
+    return {
+      authenticationType: "jwt",
+      authentication: {
+        algorithm: a.algorithm != null ? String(a.algorithm).toUpperCase() : undefined,
+        secret: a.secret != null ? String(a.secret) : undefined,
+        secretBase64: !!a.isSecretBase64Encoded,
+        payload: a.payload != null ? String(a.payload) : undefined,
+        headerPrefix: a.headerPrefix != null ? String(a.headerPrefix) : undefined,
+        location: a.addTokenTo === "header" ? "header" : "query",
+      },
+    };
+  }
+
+  if ("oauth1" in auth && authType === "oauth1") {
+    const o = pmArrayToObj(auth.oauth1);
+    const signatureMethod =
+      o.signatureMethod != null
+        ? String(o.signatureMethod).toUpperCase()
+        : DEFAULT_OAUTH1_SIGNATURE_METHOD;
+    return {
+      authenticationType: "oauth1",
+      authentication: {
+        signatureMethod:
+          OAUTH1_SIGNATURE_METHODS[signatureMethod] ?? DEFAULT_OAUTH1_SIGNATURE_METHOD,
+        consumerKey: o.consumerKey != null ? String(o.consumerKey) : undefined,
+        consumerSecret: o.consumerSecret != null ? String(o.consumerSecret) : undefined,
+        tokenKey: o.token != null ? String(o.token) : undefined,
+        tokenSecret: o.tokenSecret != null ? String(o.tokenSecret) : undefined,
+        privateKey: o.privateKey != null ? String(o.privateKey) : undefined,
+        callback: o.callback != null ? String(o.callback) : undefined,
+        verifier: o.verifier != null ? String(o.verifier) : undefined,
+        timestamp: o.timestamp != null ? String(o.timestamp) : undefined,
+        nonce: o.nonce != null ? String(o.nonce) : undefined,
+        version: o.version != null ? String(o.version) : undefined,
+        realm: o.realm != null ? String(o.realm) : undefined,
+      },
+    };
+  }
+
+  if ("oauth2" in auth && authType === "oauth2") {
+    const o = pmArrayToObj(auth.oauth2);
+
+    let grantType = o.grant_type ? String(o.grant_type) : "authorization_code";
+    let pkcePatch: Record<string, unknown> = {};
+
+    if (grantType === "authorization_code_with_pkce") {
+      grantType = "authorization_code";
+      pkcePatch =
+        o.grant_type === "authorization_code_with_pkce"
+          ? {
+              usePkce: true,
+              pkceChallengeMethod: o.challengeAlgorithm ?? undefined,
+              pkceCodeVerifier: o.code_verifier != null ? String(o.code_verifier) : undefined,
+            }
+          : {};
+    } else if (grantType === "password_credentials") {
+      grantType = "password";
+    }
+
+    const accessTokenUrl = o.accessTokenUrl != null ? String(o.accessTokenUrl) : undefined;
+    const audience = o.audience != null ? String(o.audience) : undefined;
+    const authorizationUrl = o.authUrl != null ? String(o.authUrl) : undefined;
+    const clientId = o.clientId != null ? String(o.clientId) : undefined;
+    const clientSecret = o.clientSecret != null ? String(o.clientSecret) : undefined;
+    const credentials = o.client_authentication === "body" ? "body" : undefined;
+    const headerPrefix = o.headerPrefix ?? "Bearer";
+    const password = o.password != null ? String(o.password) : undefined;
+    const redirectUri = o.redirect_uri != null ? String(o.redirect_uri) : undefined;
+    const scope = o.scope != null ? String(o.scope) : undefined;
+    const state = o.state != null ? String(o.state) : undefined;
+    const username = o.username != null ? String(o.username) : undefined;
+
+    let grantPatch: Record<string, unknown> = {};
+    if (grantType === "authorization_code") {
+      grantPatch = {
+        clientSecret,
+        authorizationUrl,
+        accessTokenUrl,
+        redirectUri,
+        state,
+        ...pkcePatch,
+      };
+    } else if (grantType === "implicit") {
+      grantPatch = { authorizationUrl, redirectUri, state };
+    } else if (grantType === "password") {
+      grantPatch = { clientSecret, accessTokenUrl, username, password };
+    } else if (grantType === "client_credentials") {
+      grantPatch = { clientSecret, accessTokenUrl };
+    }
+
+    const authentication = {
+      name: "oauth2",
+      grantType,
+      audience,
+      clientId,
+      credentials,
+      headerPrefix,
+      scope,
+      ...grantPatch,
+    } as Record<string, unknown>;
+
+    return { authenticationType: "oauth2", authentication };
+  }
+
+  return { authenticationType: null, authentication: {} };
+}
+
+function importBody(rawBody: unknown): Pick<HttpRequest, "body" | "bodyType" | "headers"> {
+  const body = toRecord(rawBody) as {
+    mode: string;
+    graphql: { query?: string; variables?: string };
+    urlencoded?: { key?: string; value?: string; disabled?: boolean }[];
+    formdata?: {
+      key?: string;
+      value?: string;
+      disabled?: boolean;
+      contentType?: string;
+      src?: string;
+    }[];
+    raw?: string;
+    options?: { raw?: { language?: string } };
+    file?: { src?: string };
+  };
+  if (body.mode === "graphql") {
+    return {
+      headers: [
+        {
+          name: "Content-Type",
+          value: "application/json",
+          enabled: true,
+        },
+      ],
+      bodyType: "graphql",
+      body: {
+        text: JSON.stringify(
+          {
+            query: body.graphql?.query || "",
+            variables: parseJSONToRecord(body.graphql?.variables || "{}"),
+          },
+          null,
+          2,
+        ),
+      },
+    };
+  }
+  if (body.mode === "urlencoded") {
+    return {
+      headers: [
+        {
+          name: "Content-Type",
+          value: "application/x-www-form-urlencoded",
+          enabled: true,
+        },
+      ],
+      bodyType: "application/x-www-form-urlencoded",
+      body: {
+        form: toArray<NonNullable<typeof body.urlencoded>[0]>(body.urlencoded).map((f) => ({
+          enabled: !f.disabled,
+          name: f.key ?? "",
+          value: f.value ?? "",
+        })),
+      },
+    };
+  }
+  if (body.mode === "formdata") {
+    return {
+      headers: [
+        {
+          name: "Content-Type",
+          value: "multipart/form-data",
+          enabled: true,
+        },
+      ],
+      bodyType: "multipart/form-data",
+      body: {
+        form: toArray<NonNullable<typeof body.formdata>[0]>(body.formdata).map((f) =>
+          f.src != null
+            ? {
+                enabled: !f.disabled,
+                contentType: f.contentType ?? null,
+                name: f.key ?? "",
+                file: f.src ?? "",
+              }
+            : {
+                enabled: !f.disabled,
+                name: f.key ?? "",
+                value: f.value ?? "",
+              },
+        ),
+      },
+    };
+  }
+  if (body.mode === "raw") {
+    return {
+      headers: [
+        {
+          name: "Content-Type",
+          value: body.options?.raw?.language === "json" ? "application/json" : "",
+          enabled: true,
+        },
+      ],
+      bodyType: body.options?.raw?.language === "json" ? "application/json" : "other",
+      body: {
+        text: body.raw ?? "",
+      },
+    };
+  }
+  if (body.mode === "file") {
+    return {
+      headers: [],
+      bodyType: "binary",
+      body: {
+        filePath: body.file?.src,
+      },
+    };
+  }
+  return { headers: [], bodyType: null, body: {} };
+}
+
+function parseJSONToRecord<T>(jsonStr: string): Record<string, T> | null {
+  try {
+    return toRecord(JSON.parse(jsonStr));
+  } catch {
+    return null;
+  }
+}
+
+function toRecord<T>(value: unknown): Record<string, T> {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    return value as Record<string, T>;
+  }
+  return {};
+}
+
+function toArray<T>(value: unknown): T[] {
+  if (Object.prototype.toString.call(value) === "[object Array]") return value as T[];
+  return [];
+}
+
+function importDescription(rawDescription: unknown): string | undefined {
+  if (rawDescription == null) {
+    return undefined;
+  }
+
+  if (typeof rawDescription === "string") {
+    return rawDescription;
+  }
+
+  if (typeof rawDescription === "object" && !Array.isArray(rawDescription)) {
+    const description = toRecord(rawDescription);
+    if ("content" in description && description.content != null) {
+      return String(description.content);
+    }
+    return undefined;
+  }
+
+  return String(rawDescription);
+}
+
+/** Recursively render all nested object properties */
+function convertTemplateSyntax<T>(obj: T): T {
+  if (typeof obj === "string") {
+    return obj.replace(/{{\s*(_\.)?([^}]*)\s*}}/g, (_m, _dot, expr) => {
+      const name = String(expr).trim();
+      // hasOwn, so a collection using {{constructor}} doesn't reach Object.prototype
+      if (Object.hasOwn(POSTMAN_DYNAMIC_VARIABLES, name)) {
+        return `\${[${POSTMAN_DYNAMIC_VARIABLES[name]}]}`;
+      }
+      return `\${[${name.replace(/^vault:/, "")}]}`;
+    }) as T;
+  }
+  if (Array.isArray(obj) && obj != null) {
+    return obj.map(convertTemplateSyntax) as T;
+  }
+  if (typeof obj === "object" && obj != null) {
+    return Object.fromEntries(
+      Object.entries(obj).map(([k, v]) => [k, convertTemplateSyntax(v)]),
+    ) as T;
+  }
+  return obj;
+}
+
+function deleteUndefinedAttrs<T>(obj: T): T {
+  if (Array.isArray(obj) && obj != null) {
+    return obj.map(deleteUndefinedAttrs) as T;
+  }
+  if (typeof obj === "object" && obj != null) {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .filter(([, v]) => v !== undefined)
+        .map(([k, v]) => [k, deleteUndefinedAttrs(v)]),
+    ) as T;
+  }
+  return obj;
+}
+
+const idCount: Partial<Record<string, number>> = {};
+
+function generateId(model: string): string {
+  idCount[model] = (idCount[model] ?? -1) + 1;
+  return `GENERATE_ID::${model.toUpperCase()}_${idCount[model]}`;
+}
diff --git a/plugins/importer-postman/tests/fixtures/auth.input.json b/plugins/importer-postman/tests/fixtures/auth.input.json
new file mode 100644
index 0000000..ceadd6c
--- /dev/null
+++ b/plugins/importer-postman/tests/fixtures/auth.input.json
@@ -0,0 +1,1032 @@
+{
+  "info": {
+    "_postman_id": "9e6dfada-256c-49ea-a38f-7d1b05b7ca2d",
+    "name": "Authentication",
+    "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+    "_exporter_id": "18798"
+  },
+  "item": [
+    {
+      "name": "No Auth",
+      "request": {
+        "auth": {
+          "type": "noauth"
+        },
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "https://yaak.app/x/echo",
+          "protocol": "https",
+          "host": ["yaak", "app"],
+          "path": ["x", "echo"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "Inherit",
+      "request": {
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "https://yaak.app/x/echo",
+          "protocol": "https",
+          "host": ["yaak", "app"],
+          "path": ["x", "echo"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "OAuth 2 Auth Code",
+      "protocolProfileBehavior": {
+        "disableBodyPruning": true
+      },
+      "request": {
+        "auth": {
+          "type": "oauth2",
+          "oauth2": [
+            {
+              "key": "grant_type",
+              "value": "authorization_code",
+              "type": "string"
+            },
+            {
+              "key": "headerPrefix",
+              "value": "Bearer",
+              "type": "string"
+            },
+            {
+              "key": "client_authentication",
+              "value": "header",
+              "type": "string"
+            },
+            {
+              "key": "challengeAlgorithm",
+              "value": "S256",
+              "type": "string"
+            },
+            {
+              "key": "refreshTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "state",
+              "value": "state",
+              "type": "string"
+            },
+            {
+              "key": "scope",
+              "value": "scope",
+              "type": "string"
+            },
+            {
+              "key": "code_verifier",
+              "value": "verifier",
+              "type": "string"
+            },
+            {
+              "key": "clientSecret",
+              "value": "clientsecet",
+              "type": "string"
+            },
+            {
+              "key": "clientId",
+              "value": "cliend id",
+              "type": "string"
+            },
+            {
+              "key": "authUrl",
+              "value": "https://github.com/login/oauth/authorize",
+              "type": "string"
+            },
+            {
+              "key": "accessTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "useBrowser",
+              "value": true,
+              "type": "boolean"
+            },
+            {
+              "key": "redirect_uri",
+              "value": "https://callback",
+              "type": "string"
+            },
+            {
+              "key": "tokenName",
+              "value": "name",
+              "type": "string"
+            },
+            {
+              "key": "addTokenTo",
+              "value": "header",
+              "type": "string"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n    \"hello\": \"world\"\n}",
+          "options": {
+            "raw": {
+              "language": "json"
+            }
+          }
+        },
+        "url": {
+          "raw": "{{vault:hello}}",
+          "host": ["{{vault:hello}}"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "OAuth 2 Auth Code (PKCE)",
+      "protocolProfileBehavior": {
+        "disableBodyPruning": true
+      },
+      "request": {
+        "auth": {
+          "type": "oauth2",
+          "oauth2": [
+            {
+              "key": "headerPrefix",
+              "value": "Bearer",
+              "type": "string"
+            },
+            {
+              "key": "client_authentication",
+              "value": "header",
+              "type": "string"
+            },
+            {
+              "key": "challengeAlgorithm",
+              "value": "S256",
+              "type": "string"
+            },
+            {
+              "key": "refreshTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "state",
+              "value": "state",
+              "type": "string"
+            },
+            {
+              "key": "scope",
+              "value": "scope",
+              "type": "string"
+            },
+            {
+              "key": "code_verifier",
+              "value": "verifier",
+              "type": "string"
+            },
+            {
+              "key": "grant_type",
+              "value": "authorization_code_with_pkce",
+              "type": "string"
+            },
+            {
+              "key": "clientSecret",
+              "value": "clientsecet",
+              "type": "string"
+            },
+            {
+              "key": "clientId",
+              "value": "cliend id",
+              "type": "string"
+            },
+            {
+              "key": "authUrl",
+              "value": "https://github.com/login/oauth/authorize",
+              "type": "string"
+            },
+            {
+              "key": "accessTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "useBrowser",
+              "value": true,
+              "type": "boolean"
+            },
+            {
+              "key": "redirect_uri",
+              "value": "https://callback",
+              "type": "string"
+            },
+            {
+              "key": "tokenName",
+              "value": "name",
+              "type": "string"
+            },
+            {
+              "key": "addTokenTo",
+              "value": "header",
+              "type": "string"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n    \"hello\": \"world\"\n}",
+          "options": {
+            "raw": {
+              "language": "json"
+            }
+          }
+        },
+        "url": {
+          "raw": "{{vault:hello}}",
+          "host": ["{{vault:hello}}"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "OAuth 2 Implicit",
+      "protocolProfileBehavior": {
+        "disableBodyPruning": true
+      },
+      "request": {
+        "auth": {
+          "type": "oauth2",
+          "oauth2": [
+            {
+              "key": "client_authentication",
+              "value": "header",
+              "type": "string"
+            },
+            {
+              "key": "redirect_uri",
+              "value": "https://yaak.app/x/echo",
+              "type": "string"
+            },
+            {
+              "key": "useBrowser",
+              "value": false,
+              "type": "boolean"
+            },
+            {
+              "key": "grant_type",
+              "value": "implicit",
+              "type": "string"
+            },
+            {
+              "key": "headerPrefix",
+              "value": "Bearer",
+              "type": "string"
+            },
+            {
+              "key": "challengeAlgorithm",
+              "value": "S256",
+              "type": "string"
+            },
+            {
+              "key": "refreshTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "state",
+              "value": "state",
+              "type": "string"
+            },
+            {
+              "key": "scope",
+              "value": "scope",
+              "type": "string"
+            },
+            {
+              "key": "code_verifier",
+              "value": "verifier",
+              "type": "string"
+            },
+            {
+              "key": "clientSecret",
+              "value": "clientsecet",
+              "type": "string"
+            },
+            {
+              "key": "clientId",
+              "value": "cliend id",
+              "type": "string"
+            },
+            {
+              "key": "authUrl",
+              "value": "https://github.com/login/oauth/authorize",
+              "type": "string"
+            },
+            {
+              "key": "accessTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "tokenName",
+              "value": "name",
+              "type": "string"
+            },
+            {
+              "key": "addTokenTo",
+              "value": "header",
+              "type": "string"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n    \"hello\": \"world\"\n}",
+          "options": {
+            "raw": {
+              "language": "json"
+            }
+          }
+        },
+        "url": {
+          "raw": "{{vault:hello}}",
+          "host": ["{{vault:hello}}"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "OAuth 2 Password",
+      "protocolProfileBehavior": {
+        "disableBodyPruning": true
+      },
+      "request": {
+        "auth": {
+          "type": "oauth2",
+          "oauth2": [
+            {
+              "key": "password",
+              "value": "password",
+              "type": "string"
+            },
+            {
+              "key": "username",
+              "value": "username",
+              "type": "string"
+            },
+            {
+              "key": "clientSecret",
+              "value": "clientsecret",
+              "type": "string"
+            },
+            {
+              "key": "clientId",
+              "value": "clientid",
+              "type": "string"
+            },
+            {
+              "key": "grant_type",
+              "value": "password_credentials",
+              "type": "string"
+            },
+            {
+              "key": "client_authentication",
+              "value": "header",
+              "type": "string"
+            },
+            {
+              "key": "redirect_uri",
+              "value": "https://yaak.app/x/echo",
+              "type": "string"
+            },
+            {
+              "key": "useBrowser",
+              "value": false,
+              "type": "boolean"
+            },
+            {
+              "key": "headerPrefix",
+              "value": "Bearer",
+              "type": "string"
+            },
+            {
+              "key": "challengeAlgorithm",
+              "value": "S256",
+              "type": "string"
+            },
+            {
+              "key": "refreshTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "state",
+              "value": "state",
+              "type": "string"
+            },
+            {
+              "key": "scope",
+              "value": "scope",
+              "type": "string"
+            },
+            {
+              "key": "code_verifier",
+              "value": "verifier",
+              "type": "string"
+            },
+            {
+              "key": "authUrl",
+              "value": "https://github.com/login/oauth/authorize",
+              "type": "string"
+            },
+            {
+              "key": "accessTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "tokenName",
+              "value": "name",
+              "type": "string"
+            },
+            {
+              "key": "addTokenTo",
+              "value": "header",
+              "type": "string"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n    \"hello\": \"world\"\n}",
+          "options": {
+            "raw": {
+              "language": "json"
+            }
+          }
+        },
+        "url": {
+          "raw": "{{vault:hello}}",
+          "host": ["{{vault:hello}}"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "OAuth 2 Client Credentials",
+      "protocolProfileBehavior": {
+        "disableBodyPruning": true
+      },
+      "request": {
+        "auth": {
+          "type": "oauth2",
+          "oauth2": [
+            {
+              "key": "grant_type",
+              "value": "client_credentials",
+              "type": "string"
+            },
+            {
+              "key": "password",
+              "value": "password",
+              "type": "string"
+            },
+            {
+              "key": "username",
+              "value": "username",
+              "type": "string"
+            },
+            {
+              "key": "clientSecret",
+              "value": "clientsecret",
+              "type": "string"
+            },
+            {
+              "key": "clientId",
+              "value": "clientid",
+              "type": "string"
+            },
+            {
+              "key": "client_authentication",
+              "value": "header",
+              "type": "string"
+            },
+            {
+              "key": "redirect_uri",
+              "value": "https://yaak.app/x/echo",
+              "type": "string"
+            },
+            {
+              "key": "useBrowser",
+              "value": false,
+              "type": "boolean"
+            },
+            {
+              "key": "headerPrefix",
+              "value": "Bearer",
+              "type": "string"
+            },
+            {
+              "key": "challengeAlgorithm",
+              "value": "S256",
+              "type": "string"
+            },
+            {
+              "key": "refreshTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "state",
+              "value": "state",
+              "type": "string"
+            },
+            {
+              "key": "scope",
+              "value": "scope",
+              "type": "string"
+            },
+            {
+              "key": "code_verifier",
+              "value": "verifier",
+              "type": "string"
+            },
+            {
+              "key": "authUrl",
+              "value": "https://github.com/login/oauth/authorize",
+              "type": "string"
+            },
+            {
+              "key": "accessTokenUrl",
+              "value": "https://github.com/login/oauth/access_token",
+              "type": "string"
+            },
+            {
+              "key": "tokenName",
+              "value": "name",
+              "type": "string"
+            },
+            {
+              "key": "addTokenTo",
+              "value": "header",
+              "type": "string"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n    \"hello\": \"world\"\n}",
+          "options": {
+            "raw": {
+              "language": "json"
+            }
+          }
+        },
+        "url": {
+          "raw": "{{vault:hello}}",
+          "host": ["{{vault:hello}}"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "AWS V4",
+      "request": {
+        "auth": {
+          "type": "awsv4",
+          "awsv4": [
+            {
+              "key": "sessionToken",
+              "value": "session",
+              "type": "string"
+            },
+            {
+              "key": "service",
+              "value": "s3",
+              "type": "string"
+            },
+            {
+              "key": "region",
+              "value": "us-west-1",
+              "type": "string"
+            },
+            {
+              "key": "secretKey",
+              "value": "secret",
+              "type": "string"
+            },
+            {
+              "key": "accessKey",
+              "value": "access",
+              "type": "string"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "https://yaak.app/x/echo",
+          "protocol": "https",
+          "host": ["yaak", "app"],
+          "path": ["x", "echo"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "API Key",
+      "request": {
+        "auth": {
+          "type": "apikey",
+          "apikey": [
+            {
+              "key": "in",
+              "value": "query",
+              "type": "string"
+            },
+            {
+              "key": "value",
+              "value": "secret-123",
+              "type": "string"
+            },
+            {
+              "key": "key",
+              "value": "X-API-Key",
+              "type": "string"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "https://yaak.app/x/echo",
+          "protocol": "https",
+          "host": ["yaak", "app"],
+          "path": ["x", "echo"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "JWT",
+      "request": {
+        "auth": {
+          "type": "jwt",
+          "jwt": [
+            {
+              "key": "header",
+              "value": "{\n    \"header\": \"foo\"\n}",
+              "type": "string"
+            },
+            {
+              "key": "headerPrefix",
+              "value": "Bearer",
+              "type": "string"
+            },
+            {
+              "key": "payload",
+              "value": "{\n    \"my\": \"payload\"\n}",
+              "type": "string"
+            },
+            {
+              "key": "isSecretBase64Encoded",
+              "value": false,
+              "type": "boolean"
+            },
+            {
+              "key": "secret",
+              "value": "mysecret",
+              "type": "string"
+            },
+            {
+              "key": "algorithm",
+              "value": "HS384",
+              "type": "string"
+            },
+            {
+              "key": "addTokenTo",
+              "value": "header",
+              "type": "string"
+            },
+            {
+              "key": "queryParamKey",
+              "value": "token",
+              "type": "string"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "https://yaak.app/x/echo",
+          "protocol": "https",
+          "host": ["yaak", "app"],
+          "path": ["x", "echo"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "Digest",
+      "request": {
+        "auth": {
+          "type": "digest",
+          "digest": [
+            {
+              "key": "algorithm",
+              "value": "MD5",
+              "type": "string"
+            },
+            {
+              "key": "username",
+              "value": "digest-user",
+              "type": "string"
+            },
+            {
+              "key": "password",
+              "value": "digest-pass",
+              "type": "string"
+            },
+            {
+              "key": "realm",
+              "value": "testrealm@yaak.app",
+              "type": "string"
+            },
+            {
+              "key": "nonce",
+              "value": "dcd98b7102dd2f0e8b11d0f600bfb0c093",
+              "type": "string"
+            },
+            {
+              "key": "nonceCount",
+              "value": "00000001",
+              "type": "string"
+            },
+            {
+              "key": "clientNonce",
+              "value": "0a4f113b",
+              "type": "string"
+            },
+            {
+              "key": "opaque",
+              "value": "5ccc069c403ebaf9f0171e9517f40e41",
+              "type": "string"
+            },
+            {
+              "key": "qop",
+              "value": "auth",
+              "type": "string"
+            },
+            {
+              "key": "disableRetryRequest",
+              "value": true,
+              "type": "boolean"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "https://yaak.app/x/echo",
+          "protocol": "https",
+          "host": ["yaak", "app"],
+          "path": ["x", "echo"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "NTLM",
+      "request": {
+        "auth": {
+          "type": "ntlm",
+          "ntlm": [
+            {
+              "key": "username",
+              "value": "ntlm-user",
+              "type": "string"
+            },
+            {
+              "key": "password",
+              "value": "ntlm-pass",
+              "type": "string"
+            },
+            {
+              "key": "domain",
+              "value": "CORP",
+              "type": "string"
+            },
+            {
+              "key": "workstation",
+              "value": "WORKSTATION-01",
+              "type": "string"
+            },
+            {
+              "key": "disableRetryRequest",
+              "value": true,
+              "type": "boolean"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "https://yaak.app/x/echo",
+          "protocol": "https",
+          "host": ["yaak", "app"],
+          "path": ["x", "echo"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "OAuth 1",
+      "request": {
+        "auth": {
+          "type": "oauth1",
+          "oauth1": [
+            {
+              "key": "consumerKey",
+              "value": "consumer-key",
+              "type": "string"
+            },
+            {
+              "key": "consumerSecret",
+              "value": "consumer-secret",
+              "type": "string"
+            },
+            {
+              "key": "token",
+              "value": "access-token",
+              "type": "string"
+            },
+            {
+              "key": "tokenSecret",
+              "value": "token-secret",
+              "type": "string"
+            },
+            {
+              "key": "signatureMethod",
+              "value": "HMAC-SHA256",
+              "type": "string"
+            },
+            {
+              "key": "timestamp",
+              "value": "1700000000",
+              "type": "string"
+            },
+            {
+              "key": "nonce",
+              "value": "9e6dfada256c",
+              "type": "string"
+            },
+            {
+              "key": "version",
+              "value": "1.0",
+              "type": "string"
+            },
+            {
+              "key": "realm",
+              "value": "yaak.app",
+              "type": "string"
+            },
+            {
+              "key": "callback",
+              "value": "https://yaak.app/x/callback",
+              "type": "string"
+            },
+            {
+              "key": "verifier",
+              "value": "verifier-123",
+              "type": "string"
+            },
+            {
+              "key": "addParamsToHeader",
+              "value": true,
+              "type": "boolean"
+            },
+            {
+              "key": "addEmptyParamsToSign",
+              "value": false,
+              "type": "boolean"
+            },
+            {
+              "key": "includeBodyHash",
+              "value": false,
+              "type": "boolean"
+            }
+          ]
+        },
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "https://yaak.app/x/echo",
+          "protocol": "https",
+          "host": ["yaak", "app"],
+          "path": ["x", "echo"]
+        }
+      },
+      "response": []
+    },
+    {
+      "name": "Folder With Auth",
+      "item": [
+        {
+          "name": "Folder Child Inherit",
+          "request": {
+            "method": "GET",
+            "header": [],
+            "url": {
+              "raw": "https://yaak.app/x/echo",
+              "protocol": "https",
+              "host": ["yaak", "app"],
+              "path": ["x", "echo"]
+            }
+          },
+          "response": []
+        },
+        {
+          "name": "Folder Child No Auth",
+          "request": {
+            "auth": {
+              "type": "noauth"
+            },
+            "method": "GET",
+            "header": [],
+            "url": {
+              "raw": "https://yaak.app/x/echo",
+              "protocol": "https",
+              "host": ["yaak", "app"],
+              "path": ["x", "echo"]
+            }
+          },
+          "response": []
+        }
+      ],
+      "auth": {
+        "type": "bearer",
+        "bearer": [
+          {
+            "key": "token",
+            "value": "folder-token",
+            "type": "string"
+          }
+        ]
+      }
+    }
+  ],
+  "auth": {
+    "type": "basic",
+    "basic": [
+      {
+        "key": "password",
+        "value": "workspace_secret",
+        "type": "string"
+      },
+      {
+        "key": "username",
+        "value": "workspace",
+        "type": "string"
+      }
+    ]
+  },
+  "event": [
+    {
+      "listen": "prerequest",
+      "script": {
+        "type": "text/javascript",
+        "packages": {},
+        "requests": {},
+        "exec": [""]
+      }
+    },
+    {
+      "listen": "test",
+      "script": {
+        "type": "text/javascript",
+        "packages": {},
+        "requests": {},
+        "exec": [""]
+      }
+    }
+  ],
+  "variable": [
+    {
+      "key": "COLLECTION VARIABLE",
+      "value": "collection variable"
+    }
+  ]
+}
diff --git a/plugins/importer-postman/tests/fixtures/auth.output.json b/plugins/importer-postman/tests/fixtures/auth.output.json
new file mode 100644
index 0000000..4196c1f
--- /dev/null
+++ b/plugins/importer-postman/tests/fixtures/auth.output.json
@@ -0,0 +1,421 @@
+{
+  "resources": {
+    "workspaces": [
+      {
+        "model": "workspace",
+        "id": "GENERATE_ID::WORKSPACE_0",
+        "name": "Authentication",
+        "authenticationType": "basic",
+        "authentication": {
+          "username": "workspace",
+          "password": "workspace_secret"
+        }
+      }
+    ],
+    "environments": [
+      {
+        "model": "environment",
+        "id": "GENERATE_ID::ENVIRONMENT_0",
+        "name": "Global Variables",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "parentModel": "workspace",
+        "parentId": null,
+        "variables": [
+          {
+            "name": "COLLECTION VARIABLE",
+            "value": "collection variable"
+          }
+        ]
+      }
+    ],
+    "httpRequests": [
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_0",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "No Auth",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 0,
+        "headers": [],
+        "authenticationType": "none",
+        "authentication": {}
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_1",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "Inherit",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 1,
+        "headers": [],
+        "authenticationType": null,
+        "authentication": {}
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_2",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "OAuth 2 Auth Code",
+        "method": "GET",
+        "url": "${[hello]}",
+        "urlParameters": [],
+        "body": {
+          "text": "{\n    \"hello\": \"world\"\n}"
+        },
+        "bodyType": "application/json",
+        "sortPriority": 2,
+        "headers": [
+          {
+            "name": "Content-Type",
+            "value": "application/json",
+            "enabled": true
+          }
+        ],
+        "authenticationType": "oauth2",
+        "authentication": {
+          "name": "oauth2",
+          "grantType": "authorization_code",
+          "clientId": "cliend id",
+          "headerPrefix": "Bearer",
+          "scope": "scope",
+          "clientSecret": "clientsecet",
+          "authorizationUrl": "https://github.com/login/oauth/authorize",
+          "accessTokenUrl": "https://github.com/login/oauth/access_token",
+          "redirectUri": "https://callback",
+          "state": "state"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_3",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "OAuth 2 Auth Code (PKCE)",
+        "method": "GET",
+        "url": "${[hello]}",
+        "urlParameters": [],
+        "body": {
+          "text": "{\n    \"hello\": \"world\"\n}"
+        },
+        "bodyType": "application/json",
+        "sortPriority": 3,
+        "headers": [
+          {
+            "name": "Content-Type",
+            "value": "application/json",
+            "enabled": true
+          }
+        ],
+        "authenticationType": "oauth2",
+        "authentication": {
+          "name": "oauth2",
+          "grantType": "authorization_code",
+          "clientId": "cliend id",
+          "headerPrefix": "Bearer",
+          "scope": "scope",
+          "clientSecret": "clientsecet",
+          "authorizationUrl": "https://github.com/login/oauth/authorize",
+          "accessTokenUrl": "https://github.com/login/oauth/access_token",
+          "redirectUri": "https://callback",
+          "state": "state",
+          "usePkce": true,
+          "pkceChallengeMethod": "S256",
+          "pkceCodeVerifier": "verifier"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_4",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "OAuth 2 Implicit",
+        "method": "GET",
+        "url": "${[hello]}",
+        "urlParameters": [],
+        "body": {
+          "text": "{\n    \"hello\": \"world\"\n}"
+        },
+        "bodyType": "application/json",
+        "sortPriority": 4,
+        "headers": [
+          {
+            "name": "Content-Type",
+            "value": "application/json",
+            "enabled": true
+          }
+        ],
+        "authenticationType": "oauth2",
+        "authentication": {
+          "name": "oauth2",
+          "grantType": "implicit",
+          "clientId": "cliend id",
+          "headerPrefix": "Bearer",
+          "scope": "scope",
+          "authorizationUrl": "https://github.com/login/oauth/authorize",
+          "redirectUri": "https://yaak.app/x/echo",
+          "state": "state"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_5",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "OAuth 2 Password",
+        "method": "GET",
+        "url": "${[hello]}",
+        "urlParameters": [],
+        "body": {
+          "text": "{\n    \"hello\": \"world\"\n}"
+        },
+        "bodyType": "application/json",
+        "sortPriority": 5,
+        "headers": [
+          {
+            "name": "Content-Type",
+            "value": "application/json",
+            "enabled": true
+          }
+        ],
+        "authenticationType": "oauth2",
+        "authentication": {
+          "name": "oauth2",
+          "grantType": "password",
+          "clientId": "clientid",
+          "headerPrefix": "Bearer",
+          "scope": "scope",
+          "clientSecret": "clientsecret",
+          "accessTokenUrl": "https://github.com/login/oauth/access_token",
+          "username": "username",
+          "password": "password"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_6",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "OAuth 2 Client Credentials",
+        "method": "GET",
+        "url": "${[hello]}",
+        "urlParameters": [],
+        "body": {
+          "text": "{\n    \"hello\": \"world\"\n}"
+        },
+        "bodyType": "application/json",
+        "sortPriority": 6,
+        "headers": [
+          {
+            "name": "Content-Type",
+            "value": "application/json",
+            "enabled": true
+          }
+        ],
+        "authenticationType": "oauth2",
+        "authentication": {
+          "name": "oauth2",
+          "grantType": "client_credentials",
+          "clientId": "clientid",
+          "headerPrefix": "Bearer",
+          "scope": "scope",
+          "clientSecret": "clientsecret",
+          "accessTokenUrl": "https://github.com/login/oauth/access_token"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_7",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "AWS V4",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 7,
+        "headers": [],
+        "authenticationType": "awsv4",
+        "authentication": {
+          "accessKeyId": "access",
+          "secretAccessKey": "secret",
+          "sessionToken": "session",
+          "region": "us-west-1",
+          "service": "s3"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_8",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "API Key",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 8,
+        "headers": [],
+        "authenticationType": "apikey",
+        "authentication": {
+          "location": "query",
+          "key": "X-API-Key",
+          "value": "secret-123"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_9",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "JWT",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 9,
+        "headers": [],
+        "authenticationType": "jwt",
+        "authentication": {
+          "algorithm": "HS384",
+          "secret": "mysecret",
+          "secretBase64": false,
+          "payload": "{\n    \"my\": \"payload\"\n}",
+          "headerPrefix": "Bearer",
+          "location": "header"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_10",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "Digest",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 10,
+        "headers": [],
+        "authenticationType": "digest",
+        "authentication": {
+          "username": "digest-user",
+          "password": "digest-pass",
+          "realm": "testrealm@yaak.app"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_11",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "NTLM",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 11,
+        "headers": [],
+        "authenticationType": "windows",
+        "authentication": {
+          "username": "ntlm-user",
+          "password": "ntlm-pass",
+          "domain": "CORP",
+          "workstation": "WORKSTATION-01"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_12",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": null,
+        "name": "OAuth 1",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 12,
+        "headers": [],
+        "authenticationType": "oauth1",
+        "authentication": {
+          "signatureMethod": "HMAC-SHA256",
+          "consumerKey": "consumer-key",
+          "consumerSecret": "consumer-secret",
+          "tokenKey": "access-token",
+          "tokenSecret": "token-secret",
+          "callback": "https://yaak.app/x/callback",
+          "verifier": "verifier-123",
+          "timestamp": "1700000000",
+          "nonce": "9e6dfada256c",
+          "version": "1.0",
+          "realm": "yaak.app"
+        }
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_13",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "name": "Folder Child Inherit",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 14,
+        "headers": [],
+        "authenticationType": null,
+        "authentication": {}
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_14",
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "folderId": "GENERATE_ID::FOLDER_0",
+        "name": "Folder Child No Auth",
+        "method": "GET",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 15,
+        "headers": [],
+        "authenticationType": "none",
+        "authentication": {}
+      }
+    ],
+    "folders": [
+      {
+        "model": "folder",
+        "sortPriority": 13,
+        "workspaceId": "GENERATE_ID::WORKSPACE_0",
+        "id": "GENERATE_ID::FOLDER_0",
+        "name": "Folder With Auth",
+        "folderId": null,
+        "authenticationType": "bearer",
+        "authentication": {
+          "token": "folder-token"
+        }
+      }
+    ]
+  },
+  "sourceKeys": {
+    "GENERATE_ID::WORKSPACE_0": "collection:9e6dfada-256c-49ea-a38f-7d1b05b7ca2d"
+  }
+}
diff --git a/plugins/importer-postman/tests/fixtures/dynamic-variables.input.json b/plugins/importer-postman/tests/fixtures/dynamic-variables.input.json
new file mode 100644
index 0000000..1e29247
--- /dev/null
+++ b/plugins/importer-postman/tests/fixtures/dynamic-variables.input.json
@@ -0,0 +1,67 @@
+{
+  "info": {
+    "_postman_id": "5c0ffee0-dyn0-4var-9abc-000000000001",
+    "name": "Dynamic Variables",
+    "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
+  },
+  "item": [
+    {
+      "name": "Dynamic Variables",
+      "request": {
+        "method": "POST",
+        "header": [
+          {
+            "key": "X-Request-Id",
+            "value": "{{$guid}}"
+          },
+          {
+            "key": "X-Correlation-Id",
+            "value": "{{$randomUUID}}"
+          },
+          {
+            "key": "X-Sent-At",
+            "value": "{{$timestamp}}"
+          },
+          {
+            "key": "X-Sent-At-Iso",
+            "value": "{{$isoTimestamp}}"
+          },
+          {
+            "key": "X-Spaced",
+            "value": "{{  $guid  }}"
+          },
+          {
+            "key": "X-Faker",
+            "value": "{{$randomFirstName}}"
+          },
+          {
+            "key": "X-Plain",
+            "value": "{{base_url}}"
+          }
+        ],
+        "url": {
+          "raw": "https://yaak.app/x/echo?n={{$randomInt}}",
+          "protocol": "https",
+          "host": ["yaak", "app"],
+          "path": ["x", "echo"],
+          "query": [
+            {
+              "key": "n",
+              "value": "{{$randomInt}}"
+            }
+          ]
+        },
+        "body": {
+          "mode": "raw",
+          "raw": "{\n  \"id\": \"{{$guid}}\",\n  \"at\": {{$timestamp}},\n  \"mixed\": \"{{$guid}}/{{base_url}}\"\n}",
+          "options": {
+            "raw": {
+              "language": "json"
+            }
+          }
+        }
+      },
+      "response": []
+    }
+  ]
+}
diff --git a/plugins/importer-postman/tests/fixtures/dynamic-variables.output.json b/plugins/importer-postman/tests/fixtures/dynamic-variables.output.json
new file mode 100644
index 0000000..a489a62
--- /dev/null
+++ b/plugins/importer-postman/tests/fixtures/dynamic-variables.output.json
@@ -0,0 +1,95 @@
+{
+  "resources": {
+    "workspaces": [
+      {
+        "model": "workspace",
+        "id": "GENERATE_ID::WORKSPACE_1",
+        "name": "Dynamic Variables",
+        "authenticationType": null,
+        "authentication": {}
+      }
+    ],
+    "environments": [
+      {
+        "model": "environment",
+        "id": "GENERATE_ID::ENVIRONMENT_1",
+        "name": "Global Variables",
+        "workspaceId": "GENERATE_ID::WORKSPACE_1",
+        "parentModel": "workspace",
+        "parentId": null,
+        "variables": []
+      }
+    ],
+    "httpRequests": [
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_15",
+        "workspaceId": "GENERATE_ID::WORKSPACE_1",
+        "folderId": null,
+        "name": "Dynamic Variables",
+        "method": "POST",
+        "url": "https://yaak.app/x/echo",
+        "urlParameters": [
+          {
+            "name": "n",
+            "value": "${[random.range(min='0',max='1000',decimals='0')]}",
+            "enabled": true
+          }
+        ],
+        "body": {
+          "text": "{\n  \"id\": \"${[uuid.v4()]}\",\n  \"at\": ${[timestamp.unix()]},\n  \"mixed\": \"${[uuid.v4()]}/${[base_url]}\"\n}"
+        },
+        "bodyType": "application/json",
+        "sortPriority": 0,
+        "headers": [
+          {
+            "name": "X-Request-Id",
+            "value": "${[uuid.v4()]}",
+            "enabled": true
+          },
+          {
+            "name": "X-Correlation-Id",
+            "value": "${[uuid.v4()]}",
+            "enabled": true
+          },
+          {
+            "name": "X-Sent-At",
+            "value": "${[timestamp.unix()]}",
+            "enabled": true
+          },
+          {
+            "name": "X-Sent-At-Iso",
+            "value": "${[timestamp.iso8601()]}",
+            "enabled": true
+          },
+          {
+            "name": "X-Spaced",
+            "value": "${[uuid.v4()]}",
+            "enabled": true
+          },
+          {
+            "name": "X-Faker",
+            "value": "${[$randomFirstName]}",
+            "enabled": true
+          },
+          {
+            "name": "X-Plain",
+            "value": "${[base_url]}",
+            "enabled": true
+          },
+          {
+            "name": "Content-Type",
+            "value": "application/json",
+            "enabled": true
+          }
+        ],
+        "authenticationType": null,
+        "authentication": {}
+      }
+    ],
+    "folders": []
+  },
+  "sourceKeys": {
+    "GENERATE_ID::WORKSPACE_1": "collection:5c0ffee0-dyn0-4var-9abc-000000000001"
+  }
+}
diff --git a/plugins/importer-postman/tests/fixtures/nested.input.json b/plugins/importer-postman/tests/fixtures/nested.input.json
new file mode 100644
index 0000000..221683e
--- /dev/null
+++ b/plugins/importer-postman/tests/fixtures/nested.input.json
@@ -0,0 +1,38 @@
+{
+  "info": {
+    "_postman_id": "9e6dfada-256c-49ea-a38f-7d1b05b7ca2d",
+    "name": "New Collection",
+    "schema": "https://schema.getpostman.com/json/collection/v2.0.0/collection.json",
+    "_exporter_id": "18798"
+  },
+  "item": [
+    {
+      "name": "Top Folder",
+      "item": [
+        {
+          "name": "Nested Folder",
+          "item": [
+            {
+              "name": "Request 1",
+              "request": {
+                "method": "GET"
+              }
+            }
+          ]
+        },
+        {
+          "name": "Request 2",
+          "request": {
+            "method": "GET"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Request 3",
+      "request": {
+        "method": "GET"
+      }
+    }
+  ]
+}
diff --git a/plugins/importer-postman/tests/fixtures/nested.output.json b/plugins/importer-postman/tests/fixtures/nested.output.json
new file mode 100644
index 0000000..8b888e3
--- /dev/null
+++ b/plugins/importer-postman/tests/fixtures/nested.output.json
@@ -0,0 +1,99 @@
+{
+  "resources": {
+    "workspaces": [
+      {
+        "model": "workspace",
+        "id": "GENERATE_ID::WORKSPACE_2",
+        "name": "New Collection",
+        "authenticationType": null,
+        "authentication": {}
+      }
+    ],
+    "environments": [
+      {
+        "model": "environment",
+        "id": "GENERATE_ID::ENVIRONMENT_2",
+        "name": "Global Variables",
+        "workspaceId": "GENERATE_ID::WORKSPACE_2",
+        "parentModel": "workspace",
+        "parentId": null,
+        "variables": []
+      }
+    ],
+    "httpRequests": [
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_16",
+        "workspaceId": "GENERATE_ID::WORKSPACE_2",
+        "folderId": "GENERATE_ID::FOLDER_2",
+        "name": "Request 1",
+        "method": "GET",
+        "url": "",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 2,
+        "headers": [],
+        "authenticationType": null,
+        "authentication": {}
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_17",
+        "workspaceId": "GENERATE_ID::WORKSPACE_2",
+        "folderId": "GENERATE_ID::FOLDER_1",
+        "name": "Request 2",
+        "method": "GET",
+        "url": "",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 3,
+        "headers": [],
+        "authenticationType": null,
+        "authentication": {}
+      },
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_18",
+        "workspaceId": "GENERATE_ID::WORKSPACE_2",
+        "folderId": null,
+        "name": "Request 3",
+        "method": "GET",
+        "url": "",
+        "urlParameters": [],
+        "body": {},
+        "bodyType": null,
+        "sortPriority": 4,
+        "headers": [],
+        "authenticationType": null,
+        "authentication": {}
+      }
+    ],
+    "folders": [
+      {
+        "model": "folder",
+        "sortPriority": 0,
+        "workspaceId": "GENERATE_ID::WORKSPACE_2",
+        "id": "GENERATE_ID::FOLDER_1",
+        "name": "Top Folder",
+        "folderId": null,
+        "authenticationType": null,
+        "authentication": {}
+      },
+      {
+        "model": "folder",
+        "sortPriority": 1,
+        "workspaceId": "GENERATE_ID::WORKSPACE_2",
+        "id": "GENERATE_ID::FOLDER_2",
+        "name": "Nested Folder",
+        "folderId": "GENERATE_ID::FOLDER_1",
+        "authenticationType": null,
+        "authentication": {}
+      }
+    ]
+  },
+  "sourceKeys": {
+    "GENERATE_ID::WORKSPACE_2": "collection:9e6dfada-256c-49ea-a38f-7d1b05b7ca2d"
+  }
+}
diff --git a/plugins/importer-postman/tests/fixtures/params.input.json b/plugins/importer-postman/tests/fixtures/params.input.json
new file mode 100644
index 0000000..8692071
--- /dev/null
+++ b/plugins/importer-postman/tests/fixtures/params.input.json
@@ -0,0 +1,126 @@
+{
+  "info": {
+    "_postman_id": "9e6dfada-256c-49ea-a38f-7d1b05b7ca2d",
+    "name": "New Collection",
+    "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+    "_exporter_id": "18798"
+  },
+  "item": [
+    {
+      "name": "Form URL",
+      "request": {
+        "auth": {
+          "type": "bearer",
+          "bearer": [
+            {
+              "key": "token",
+              "value": "my-token",
+              "type": "string"
+            }
+          ]
+        },
+        "method": "POST",
+        "header": [
+          {
+            "key": "X-foo",
+            "value": "bar",
+            "description": "description"
+          },
+          {
+            "key": "Disabled",
+            "value": "tnroant",
+            "description": "ntisorantosra",
+            "disabled": true
+          }
+        ],
+        "body": {
+          "mode": "formdata",
+          "formdata": [
+            {
+              "key": "Key",
+              "contentType": "Custom/COntent",
+              "description": "DEscription",
+              "type": "file",
+              "src": "/Users/gschier/Desktop/Screenshot 2024-05-31 at 12.05.11 PM.png"
+            }
+          ]
+        },
+        "url": {
+          "raw": "example.com/:foo/:bar?q=qqq&",
+          "host": ["example", "com"],
+          "path": [":foo", ":bar"],
+          "query": [
+            {
+              "key": "disabled",
+              "value": "secondvalue",
+              "description": "this is disabled",
+              "disabled": true
+            },
+            {
+              "key": "q",
+              "value": "qqq",
+              "description": "hello"
+            },
+            {
+              "key": "",
+              "value": null
+            }
+          ],
+          "variable": [
+            {
+              "key": "foo",
+              "value": "fff",
+              "description": "Description"
+            },
+            {
+              "key": "bar",
+              "value": "bbb",
+              "description": "bbb description"
+            }
+          ]
+        }
+      },
+      "response": []
+    }
+  ],
+  "auth": {
+    "type": "basic",
+    "basic": [
+      {
+        "key": "password",
+        "value": "globalpass",
+        "type": "string"
+      },
+      {
+        "key": "username",
+        "value": "globaluser",
+        "type": "string"
+      }
+    ]
+  },
+  "event": [
+    {
+      "listen": "prerequest",
+      "script": {
+        "type": "text/javascript",
+        "packages": {},
+        "exec": [""]
+      }
+    },
+    {
+      "listen": "test",
+      "script": {
+        "type": "text/javascript",
+        "packages": {},
+        "exec": [""]
+      }
+    }
+  ],
+  "variable": [
+    {
+      "key": "COLLECTION VARIABLE",
+      "value": "collection variable",
+      "type": "string"
+    }
+  ]
+}
diff --git a/plugins/importer-postman/tests/fixtures/params.output.json b/plugins/importer-postman/tests/fixtures/params.output.json
new file mode 100644
index 0000000..ca9cf9b
--- /dev/null
+++ b/plugins/importer-postman/tests/fixtures/params.output.json
@@ -0,0 +1,107 @@
+{
+  "resources": {
+    "workspaces": [
+      {
+        "model": "workspace",
+        "id": "GENERATE_ID::WORKSPACE_3",
+        "name": "New Collection",
+        "authenticationType": "basic",
+        "authentication": {
+          "username": "globaluser",
+          "password": "globalpass"
+        }
+      }
+    ],
+    "environments": [
+      {
+        "model": "environment",
+        "id": "GENERATE_ID::ENVIRONMENT_3",
+        "name": "Global Variables",
+        "workspaceId": "GENERATE_ID::WORKSPACE_3",
+        "parentModel": "workspace",
+        "parentId": null,
+        "variables": [
+          {
+            "name": "COLLECTION VARIABLE",
+            "value": "collection variable"
+          }
+        ]
+      }
+    ],
+    "httpRequests": [
+      {
+        "model": "http_request",
+        "id": "GENERATE_ID::HTTP_REQUEST_19",
+        "workspaceId": "GENERATE_ID::WORKSPACE_3",
+        "folderId": null,
+        "name": "Form URL",
+        "method": "POST",
+        "url": "example.com/:foo/:bar",
+        "urlParameters": [
+          {
+            "name": "disabled",
+            "value": "secondvalue",
+            "enabled": false
+          },
+          {
+            "name": "q",
+            "value": "qqq",
+            "enabled": true
+          },
+          {
+            "name": "",
+            "value": "",
+            "enabled": true
+          },
+          {
+            "name": ":foo",
+            "value": "fff",
+            "enabled": true
+          },
+          {
+            "name": ":bar",
+            "value": "bbb",
+            "enabled": true
+          }
+        ],
+        "body": {
+          "form": [
+            {
+              "enabled": true,
+              "contentType": "Custom/COntent",
+              "name": "Key",
+              "file": "/Users/gschier/Desktop/Screenshot 2024-05-31 at 12.05.11 PM.png"
+            }
+          ]
+        },
+        "bodyType": "multipart/form-data",
+        "sortPriority": 0,
+        "headers": [
+          {
+            "name": "X-foo",
+            "value": "bar",
+            "enabled": true
+          },
+          {
+            "name": "Disabled",
+            "value": "tnroant",
+            "enabled": false
+          },
+          {
+            "name": "Content-Type",
+            "value": "multipart/form-data",
+            "enabled": true
+          }
+        ],
+        "authenticationType": "bearer",
+        "authentication": {
+          "token": "my-token"
+        }
+      }
+    ],
+    "folders": []
+  },
+  "sourceKeys": {
+    "GENERATE_ID::WORKSPACE_3": "collection:9e6dfada-256c-49ea-a38f-7d1b05b7ca2d"
+  }
+}
diff --git a/plugins/importer-postman/tests/index.test.ts b/plugins/importer-postman/tests/index.test.ts
new file mode 100644
index 0000000..90fc211
--- /dev/null
+++ b/plugins/importer-postman/tests/index.test.ts
@@ -0,0 +1,201 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { describe, expect, test } from "vite-plus/test";
+import { convertPostman } from "../src";
+
+describe("importer-postman", () => {
+  const p = path.join(__dirname, "fixtures");
+  const fixtures = fs.readdirSync(p);
+
+  for (const fixture of fixtures) {
+    if (fixture.includes(".output")) {
+      continue;
+    }
+
+    test(`Imports ${fixture}`, () => {
+      const contents = fs.readFileSync(path.join(p, fixture), "utf-8");
+      const expected = fs.readFileSync(path.join(p, fixture.replace(".input", ".output")), "utf-8");
+      const result = convertPostman(contents);
+      // console.log(JSON.stringify(result, null, 2))
+      expect(JSON.stringify(result, null, 2)).toEqual(
+        JSON.stringify(JSON.parse(expected), null, 2),
+      );
+    });
+  }
+
+  test("Imports object descriptions without [object Object]", () => {
+    const result = convertPostman(
+      JSON.stringify({
+        info: {
+          name: "Description Test",
+          schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+        },
+        item: [
+          {
+            name: "Request 1",
+            request: {
+              method: "GET",
+              description: {
+                content: "Lijst van klanten",
+                type: "text/plain",
+              },
+            },
+          },
+        ],
+      }),
+    );
+
+    expect(result?.resources.workspaces).toEqual([
+      expect.objectContaining({
+        name: "Description Test",
+      }),
+    ]);
+    expect(result?.resources.httpRequests).toEqual([
+      expect.objectContaining({
+        name: "Request 1",
+        description: "Lijst van klanten",
+      }),
+    ]);
+  });
+
+  test("Imports url.path when it is a string instead of an array", () => {
+    const result = convertPostman(
+      JSON.stringify({
+        info: {
+          name: "String Path Test",
+          schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+        },
+        item: [
+          {
+            name: "String Path",
+            request: {
+              method: "GET",
+              url: {
+                host: ["example", "com"],
+                path: "foo/bar",
+              },
+            },
+          },
+        ],
+      }),
+    );
+
+    expect(result?.resources.httpRequests).toEqual([
+      expect.objectContaining({
+        name: "String Path",
+        url: "example.com/foo/bar",
+      }),
+    ]);
+  });
+
+  test("Keys items by their Postman ID, unchanged by a rename", () => {
+    const collection = (requestName: string) =>
+      JSON.stringify({
+        info: {
+          _postman_id: "collection-id",
+          name: "Keys",
+          schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+        },
+        item: [
+          {
+            id: "folder-id",
+            name: "Folder",
+            item: [
+              {
+                id: "request-id",
+                name: requestName,
+                request: { method: "GET", url: "https://yaak.app" },
+              },
+            ],
+          },
+        ],
+      });
+
+    const before = convertPostman(collection("Original"));
+    const after = convertPostman(collection("Renamed"));
+
+    const keyOf = (result: ReturnType<typeof convertPostman>, id: string | undefined) =>
+      id == null ? undefined : result?.sourceKeys?.[id];
+
+    expect(keyOf(before, before?.resources.httpRequests[0]?.id)).toBe("item:request-id");
+    expect(keyOf(after, after?.resources.httpRequests[0]?.id)).toBe("item:request-id");
+    expect(keyOf(before, before?.resources.folders[0]?.id)).toBe("item:folder-id");
+    expect(keyOf(before, before?.resources.workspaces[0]?.id)).toBe("collection:collection-id");
+  });
+
+  test("Falls back to the default OAuth 1 signature method for unrecognized ones", () => {
+    const result = convertPostman(
+      JSON.stringify({
+        info: {
+          name: "OAuth 1 Signature",
+          schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+        },
+        item: [
+          {
+            name: "Request",
+            request: {
+              method: "GET",
+              url: "https://yaak.app",
+              auth: {
+                type: "oauth1",
+                oauth1: [{ key: "signatureMethod", value: "HMAC-SHA384" }],
+              },
+            },
+          },
+        ],
+      }),
+    );
+
+    expect(result?.resources.httpRequests).toEqual([
+      expect.objectContaining({
+        authenticationType: "oauth1",
+        authentication: { signatureMethod: "HMAC-SHA1" },
+      }),
+    ]);
+  });
+
+  test("Leaves {{constructor}} alone instead of reaching Object.prototype", () => {
+    const result = convertPostman(
+      JSON.stringify({
+        info: {
+          name: "Prototype Key",
+          schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+        },
+        item: [
+          {
+            name: "Request",
+            request: {
+              method: "GET",
+              url: "https://yaak.app",
+              header: [
+                { key: "X-A", value: "{{constructor}}" },
+                { key: "X-B", value: "{{toString}}" },
+              ],
+            },
+          },
+        ],
+      }),
+    );
+
+    expect(result?.resources.httpRequests[0]?.headers).toEqual([
+      { name: "X-A", value: "${[constructor]}", enabled: true },
+      { name: "X-B", value: "${[toString]}", enabled: true },
+    ]);
+  });
+
+  test("Omits keys for items the collection never identified", () => {
+    const result = convertPostman(
+      JSON.stringify({
+        info: {
+          name: "No IDs",
+          schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+        },
+        item: [{ name: "Request", request: { method: "GET", url: "https://yaak.app" } }],
+      }),
+    );
+
+    const requestId = result?.resources.httpRequests[0]?.id;
+    expect(requestId).toBeDefined();
+    expect(result?.sourceKeys).not.toHaveProperty(requestId as string);
+  });
+});
diff --git a/plugins/importer-postman/tsconfig.json b/plugins/importer-postman/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/importer-postman/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/importer-yaak/package.json b/plugins/importer-yaak/package.json
new file mode 100644
index 0000000..fe898f5
--- /dev/null
+++ b/plugins/importer-yaak/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@yaak/importer-yaak",
+  "displayName": "Yaak Importer",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Import data from Yaak export files",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  }
+}
diff --git a/plugins/importer-yaak/src/index.ts b/plugins/importer-yaak/src/index.ts
new file mode 100644
index 0000000..f423b9e
--- /dev/null
+++ b/plugins/importer-yaak/src/index.ts
@@ -0,0 +1,96 @@
+import type { Environment, PluginDefinition } from "@yaakapp/api";
+
+export const plugin: PluginDefinition = {
+  importer: {
+    name: "Yaak",
+    description: "Yaak official format",
+    onImport(_ctx, args) {
+      return migrateImport(args.text);
+    },
+  },
+};
+
+export function migrateImport(contents: string) {
+  // oxlint-disable-next-line no-explicit-any
+  let parsed: any;
+  try {
+    parsed = JSON.parse(contents);
+  } catch {
+    return undefined;
+  }
+
+  if (!isJSObject(parsed)) {
+    return undefined;
+  }
+
+  const isYaakExport = "yaakSchema" in parsed;
+  if (!isYaakExport) {
+    return;
+  }
+
+  // Migrate v1 to v2 -- changes requests to httpRequests
+  if ("requests" in parsed.resources) {
+    parsed.resources.httpRequests = parsed.resources.requests;
+    parsed.resources.requests = undefined;
+  }
+
+  // Migrate v2 to v3
+  for (const workspace of parsed.resources.workspaces ?? []) {
+    if ("variables" in workspace) {
+      // Create the base environment
+      const baseEnvironment: Partial<Environment> = {
+        id: `GENERATE_ID::base_env_${workspace.id}`,
+        name: "Global Variables",
+        variables: workspace.variables,
+        workspaceId: workspace.id,
+      };
+      parsed.resources.environments = parsed.resources.environments ?? [];
+      parsed.resources.environments.push(baseEnvironment);
+
+      // Delete variables key from the workspace
+      workspace.variables = undefined;
+
+      // Add environmentId to relevant environments
+      for (const environment of parsed.resources.environments) {
+        if (environment.workspaceId === workspace.id && environment.id !== baseEnvironment.id) {
+          environment.environmentId = baseEnvironment.id;
+        }
+      }
+    }
+  }
+
+  // Migrate v3 to v4
+  for (const environment of parsed.resources.environments ?? []) {
+    if ("environmentId" in environment) {
+      environment.base = environment.environmentId == null;
+      environment.environmentId = undefined;
+    }
+  }
+
+  // Migrate v4 to v5
+  for (const environment of parsed.resources.environments ?? []) {
+    if ("base" in environment && environment.base && environment.parentModel == null) {
+      environment.parentModel = "workspace";
+      environment.parentId = null;
+      environment.base = undefined;
+    } else if ("base" in environment && !environment.base && environment.parentModel == null) {
+      environment.parentModel = "environment";
+      environment.parentId = null;
+      environment.base = undefined;
+    }
+  }
+
+  const sourceKeys: Record<string, string> = {};
+  for (const models of Object.values(parsed.resources)) {
+    if (!Array.isArray(models)) continue;
+    for (const model of models) {
+      if (typeof model?.id === "string") sourceKeys[model.id] = model.id;
+    }
+  }
+
+  return { resources: parsed.resources, sourceKeys };
+}
+
+function isJSObject(obj: unknown) {
+  return Object.prototype.toString.call(obj) === "[object Object]";
+}
diff --git a/plugins/importer-yaak/tests/index.test.ts b/plugins/importer-yaak/tests/index.test.ts
new file mode 100644
index 0000000..a7992b3
--- /dev/null
+++ b/plugins/importer-yaak/tests/index.test.ts
@@ -0,0 +1,179 @@
+import { describe, expect, test } from "vite-plus/test";
+import { migrateImport } from "../src";
+
+describe("importer-yaak", () => {
+  test("Skips invalid imports", () => {
+    expect(migrateImport("not JSON")).toBeUndefined();
+    expect(migrateImport("[]")).toBeUndefined();
+    expect(migrateImport(JSON.stringify({ resources: {} }))).toBeUndefined();
+  });
+
+  test("converts schema 1 to 2", () => {
+    const imported = migrateImport(
+      JSON.stringify({
+        yaakSchema: 1,
+        resources: {
+          requests: [],
+        },
+      }),
+    );
+
+    expect(imported).toEqual(
+      expect.objectContaining({
+        resources: {
+          httpRequests: [],
+        },
+      }),
+    );
+  });
+  test("converts schema 2 to 3", () => {
+    const imported = migrateImport(
+      JSON.stringify({
+        yaakSchema: 2,
+        resources: {
+          environments: [
+            {
+              id: "e_1",
+              workspaceId: "w_1",
+              name: "Production",
+              variables: [{ name: "E1", value: "E1!" }],
+            },
+          ],
+          workspaces: [
+            {
+              id: "w_1",
+              variables: [{ name: "W1", value: "W1!" }],
+            },
+          ],
+        },
+      }),
+    );
+
+    expect(imported).toEqual(
+      expect.objectContaining({
+        resources: {
+          workspaces: [
+            {
+              id: "w_1",
+            },
+          ],
+          environments: [
+            {
+              id: "e_1",
+              workspaceId: "w_1",
+              name: "Production",
+              variables: [{ name: "E1", value: "E1!" }],
+              parentModel: "environment",
+              parentId: null,
+            },
+            {
+              id: "GENERATE_ID::base_env_w_1",
+              workspaceId: "w_1",
+              name: "Global Variables",
+              variables: [{ name: "W1", value: "W1!" }],
+            },
+          ],
+        },
+      }),
+    );
+  });
+
+  test("converts schema 4 to 5", () => {
+    const imported = migrateImport(
+      JSON.stringify({
+        yaakSchema: 2,
+        resources: {
+          environments: [
+            {
+              id: "e_1",
+              workspaceId: "w_1",
+              base: false,
+              name: "Production",
+              variables: [{ name: "E1", value: "E1!" }],
+            },
+            {
+              id: "e_1",
+              workspaceId: "w_1",
+              base: true,
+              name: "Global Variables",
+              variables: [{ name: "G1", value: "G1!" }],
+            },
+          ],
+          folders: [
+            {
+              id: "f_1",
+            },
+          ],
+          workspaces: [
+            {
+              id: "w_1",
+            },
+          ],
+        },
+      }),
+    );
+
+    expect(imported).toEqual(
+      expect.objectContaining({
+        resources: {
+          workspaces: [
+            {
+              id: "w_1",
+            },
+          ],
+          folders: [
+            {
+              id: "f_1",
+            },
+          ],
+          environments: [
+            {
+              id: "e_1",
+              workspaceId: "w_1",
+              name: "Production",
+              variables: [{ name: "E1", value: "E1!" }],
+              parentModel: "environment",
+              parentId: null,
+            },
+            {
+              id: "e_1",
+              workspaceId: "w_1",
+              name: "Global Variables",
+              parentModel: "workspace",
+              parentId: null,
+              variables: [{ name: "G1", value: "G1!" }],
+            },
+          ],
+        },
+      }),
+    );
+  });
+
+  test("Keys models by their Yaak ID, unchanged by a rename", () => {
+    const exported = (requestName: string) =>
+      JSON.stringify({
+        yaakSchema: 5,
+        resources: {
+          workspaces: [{ id: "wk_1", model: "workspace", name: "Keys" }],
+          httpRequests: [
+            {
+              id: "rq_1",
+              model: "http_request",
+              workspaceId: "wk_1",
+              name: requestName,
+              url: "https://yaak.app",
+            },
+          ],
+        },
+      });
+
+    expect(migrateImport(exported("Original"))?.sourceKeys).toEqual({
+      wk_1: "wk_1",
+      rq_1: "rq_1",
+    });
+    expect(migrateImport(exported("Renamed"))?.sourceKeys).toEqual({
+      wk_1: "wk_1",
+      rq_1: "rq_1",
+    });
+  });
+});
diff --git a/plugins/importer-yaak/tsconfig.json b/plugins/importer-yaak/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/importer-yaak/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-1password/package.json b/plugins/template-function-1password/package.json
new file mode 100644
index 0000000..846e54d
--- /dev/null
+++ b/plugins/template-function-1password/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@yaak/template-function-1password",
+  "displayName": "1Password Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template function for accessing 1Password secrets",
+  "scripts": {
+    "build": "run-s build:*",
+    "build:1-build": "yaakcli build",
+    "build:2-cpywasm": "cpx \"../../node_modules/@1password/sdk-core/nodejs/core_bg.wasm\" build/",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "@1password/sdk": "^0.5.0"
+  },
+  "devDependencies": {
+    "cpx2": "^9.0.0"
+  }
+}
diff --git a/plugins/template-function-1password/src/index.ts b/plugins/template-function-1password/src/index.ts
new file mode 100644
index 0000000..bc2f2df
--- /dev/null
+++ b/plugins/template-function-1password/src/index.ts
@@ -0,0 +1,283 @@
+import crypto from "node:crypto";
+import type { Client } from "@1password/sdk";
+import { createClient, DesktopAuth } from "@1password/sdk";
+import type { JsonPrimitive, PluginDefinition } from "@yaakapp/api";
+import type { CallTemplateFunctionArgs } from "@yaakapp-internal/plugins";
+
+const _clients: Record<string, Client> = {};
+
+// Cache for API responses to avoid rate limiting
+interface CacheEntry<T> {
+  data: T;
+  expiresAt: number;
+}
+
+type Result<T> = { error: unknown } | T;
+
+const CACHE_TTL_MS = 60 * 1000; // 1 minute cache TTL
+const _cache: Record<string, CacheEntry<unknown>> = {};
+
+async function op(
+  args: CallTemplateFunctionArgs,
+): Promise<Result<{ client: Client; clientHash: string }>> {
+  let authMethod: string | DesktopAuth;
+  let hash: string;
+  switch (args.values.authMethod) {
+    case "desktop": {
+      const account = args.values.token;
+      if (typeof account !== "string" || !account) return { error: "Missing account name" };
+
+      hash = crypto.createHash("sha256").update(`desktop:${account}`).digest("hex");
+      authMethod = new DesktopAuth(account);
+      break;
+    }
+    case "token": {
+      const token = args.values.token;
+      if (typeof token !== "string" || !token) return { error: "Missing service token" };
+
+      hash = crypto.createHash("sha256").update(`token:${token}`).digest("hex");
+      authMethod = token;
+      break;
+    }
+    default:
+      return { error: "Invalid authentication method" };
+  }
+
+  if (!_clients[hash]) {
+    try {
+      _clients[hash] = await createClient({
+        auth: authMethod,
+        integrationName: "Yaak 1Password Plugin",
+        integrationVersion: "v1.0.0",
+      });
+    } catch (e) {
+      return { error: e };
+    }
+  }
+
+  // oxlint-disable-next-line no-non-null-assertion
+  return { client: _clients[hash]!, clientHash: hash };
+}
+
+async function getValue(
+  args: CallTemplateFunctionArgs,
+  vaultId?: JsonPrimitive,
+  itemId?: JsonPrimitive,
+  fieldId?: JsonPrimitive,
+): Promise<Result<{ value: string }>> {
+  const res = await op(args);
+  if ("error" in res) return { error: res.error };
+  const clientHash = res.clientHash;
+  const client = res.client;
+
+  if (!vaultId || typeof vaultId !== "string") {
+    return { error: "No vault specified" };
+  }
+  if (!itemId || typeof itemId !== "string") {
+    return { error: "No item specified" };
+  }
+  if (!fieldId || typeof fieldId !== "string") {
+    return { error: "No field specified" };
+  }
+
+  try {
+    const cacheKey = `${clientHash}:item:${vaultId}:${itemId}:${fieldId}`;
+    let value = getCached<string>(cacheKey);
+
+    if (!value) {
+      value = await client.secrets.resolve(`op://${vaultId}/${itemId}/${fieldId}`);
+      setCache(cacheKey, value);
+    }
+
+    return { value };
+  } catch (e) {
+    return { error: e };
+  }
+}
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "1password.item",
+      description: "Get a secret",
+      previewArgs: ["field"],
+      args: [
+        {
+          type: "h_stack",
+          inputs: [
+            {
+              name: "authMethod",
+              type: "select",
+              label: "Authentication Method",
+              defaultValue: "token",
+              options: [
+                {
+                  label: "Service Account",
+                  value: "token",
+                },
+                {
+                  label: "Desktop App",
+                  value: "desktop",
+                },
+              ],
+            },
+            {
+              name: "token",
+              type: "text",
+              // oxlint-disable-next-line no-template-curly-in-string -- Yaak template syntax
+              defaultValue: "${[1PASSWORD_TOKEN]}",
+              dynamic(_ctx, args) {
+                switch (args.values.authMethod) {
+                  case "desktop":
+                    return {
+                      label: "Account Name",
+                      description:
+                        'Account name can be taken from the sidebar of the 1Password App. Make sure you\'re on the BETA version of the 1Password app and have "Integrate with other apps" enabled in Settings > Developer.',
+                    };
+                  case "token":
+                    return {
+                      label: "Token",
+                      description:
+                        "Token can be generated from the 1Password website by visiting Developer > Service Accounts",
+                      password: true,
+                    };
+                }
+
+                return { hidden: true };
+              },
+            },
+          ],
+        },
+        {
+          name: "vault",
+          label: "Vault",
+          type: "select",
+          options: [],
+          async dynamic(_ctx, args) {
+            const res = await op(args);
+            if ("error" in res) return { hidden: true };
+            const clientHash = res.clientHash;
+            const client = res.client;
+
+            const cacheKey = `${clientHash}:vaults`;
+            const cachedVaults =
+              getCached<Awaited<ReturnType<typeof client.vaults.list>>>(cacheKey);
+            const vaults =
+              cachedVaults ??
+              setCache(cacheKey, await client.vaults.list({ decryptDetails: true }));
+
+            return {
+              options: vaults.map((vault) => {
+                let title = vault.id;
+                if ("title" in vault) {
+                  title = vault.title;
+                } else if ("name" in vault) {
+                  // The SDK returns 'name' instead of 'title' but the bindings still use 'title'
+                  title = (vault as { name: string }).name;
+                }
+
+                return {
+                  label: `${title} (${vault.activeItemCount} Items)`,
+                  value: vault.id,
+                };
+              }),
+            };
+          },
+        },
+        {
+          name: "item",
+          label: "Item",
+          type: "select",
+          options: [],
+          async dynamic(_ctx, args) {
+            const res = await op(args);
+            if ("error" in res) return { hidden: true };
+            const clientHash = res.clientHash;
+            const client = res.client;
+
+            const vaultId = args.values.vault;
+            if (typeof vaultId !== "string") return { hidden: true };
+
+            try {
+              const cacheKey = `${clientHash}:items:${vaultId}`;
+              const cachedItems =
+                getCached<Awaited<ReturnType<typeof client.items.list>>>(cacheKey);
+              const items = cachedItems ?? setCache(cacheKey, await client.items.list(vaultId));
+              return {
+                options: items.map((item) => ({
+                  label: `${item.title} ${item.category}`,
+                  value: item.id,
+                })),
+              };
+            } catch {
+              // Hide as we can't list the items for this vault
+              return { hidden: true };
+            }
+          },
+        },
+        {
+          name: "field",
+          label: "Field",
+          type: "select",
+          options: [],
+          async dynamic(_ctx, args) {
+            const res = await op(args);
+            if ("error" in res) return { hidden: true };
+            const clientHash = res.clientHash;
+            const client = res.client;
+
+            const vaultId = args.values.vault;
+            const itemId = args.values.item;
+            if (typeof vaultId !== "string" || typeof itemId !== "string") {
+              return { hidden: true };
+            }
+
+            try {
+              const cacheKey = `${clientHash}:item:${vaultId}:${itemId}`;
+              const cachedItem = getCached<Awaited<ReturnType<typeof client.items.get>>>(cacheKey);
+              const item =
+                cachedItem ?? setCache(cacheKey, await client.items.get(vaultId, itemId));
+              return {
+                options: item.fields.map((field) => ({ label: field.title, value: field.id })),
+              };
+            } catch {
+              // Hide as we can't find the item within this vault
+              return { hidden: true };
+            }
+          },
+        },
+      ],
+      async onRender(_ctx, args) {
+        const vaultId = args.values.vault;
+        const itemId = args.values.item;
+        const fieldId = args.values.field;
+        const res = await getValue(args, vaultId, itemId, fieldId);
+        if ("error" in res) {
+          throw res.error;
+        }
+
+        return res.value;
+      },
+    },
+  ],
+};
+
+function getCached<T>(key: string): T | undefined {
+  const entry = _cache[key];
+  if (entry && entry.expiresAt > Date.now()) {
+    return entry.data as T;
+  }
+  // Clean up expired entry
+  if (entry) {
+    delete _cache[key];
+  }
+  return undefined;
+}
+
+function setCache<T>(key: string, data: T): T {
+  _cache[key] = {
+    data,
+    expiresAt: Date.now() + CACHE_TTL_MS,
+  };
+  return data;
+}
diff --git a/plugins/template-function-1password/tsconfig.json b/plugins/template-function-1password/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-1password/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-cookie/package.json b/plugins/template-function-cookie/package.json
new file mode 100644
index 0000000..1fd325e
--- /dev/null
+++ b/plugins/template-function-cookie/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaak/template-function-cookie",
+  "displayName": "Cookie Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for working with cookies",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/template-function-cookie/src/index.ts b/plugins/template-function-cookie/src/index.ts
new file mode 100644
index 0000000..05199bb
--- /dev/null
+++ b/plugins/template-function-cookie/src/index.ts
@@ -0,0 +1,37 @@
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "cookie.value",
+      description: "Read the value of a cookie in the jar, by name",
+      previewArgs: ["name"],
+      args: [
+        {
+          type: "text",
+          name: "name",
+          label: "Cookie Name",
+          placeholder: "cookie_name",
+        },
+        {
+          type: "text",
+          name: "domain",
+          label: "Domain",
+          placeholder: "example.com",
+          description: "Optionally filter by domain, useful if multiple cookies with the same name.",
+          optional: true,
+        },
+      ],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        // The legacy name was cookie_name, but we changed it
+        const name = args.values.cookie_name ?? args.values.name;
+        const domain = String(args.values.domain ?? "").trim();
+
+        return ctx.cookies.getValue({
+          name: String(name),
+          ...(domain.length > 0 ? { domain } : {}),
+        });
+      },
+    },
+  ],
+};
diff --git a/plugins/template-function-cookie/tsconfig.json b/plugins/template-function-cookie/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-cookie/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-ctx/package.json b/plugins/template-function-ctx/package.json
new file mode 100644
index 0000000..baf7f14
--- /dev/null
+++ b/plugins/template-function-ctx/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaak/template-function-ctx",
+  "displayName": "Window Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for accessing attributes of the current window",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/template-function-ctx/src/index.ts b/plugins/template-function-ctx/src/index.ts
new file mode 100644
index 0000000..13e78e4
--- /dev/null
+++ b/plugins/template-function-ctx/src/index.ts
@@ -0,0 +1,30 @@
+import type { PluginDefinition } from "@yaakapp/api";
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "ctx.request",
+      description: "Get the ID of the currently active request",
+      args: [],
+      async onRender(ctx) {
+        return ctx.window.requestId();
+      },
+    },
+    {
+      name: "ctx.environment",
+      description: "Get the ID of the currently active environment",
+      args: [],
+      async onRender(ctx) {
+        return ctx.window.environmentId();
+      },
+    },
+    {
+      name: "ctx.workspace",
+      description: "Get the ID of the currently active workspace",
+      args: [],
+      async onRender(ctx) {
+        return ctx.window.workspaceId();
+      },
+    },
+  ],
+};
diff --git a/plugins/template-function-ctx/tsconfig.json b/plugins/template-function-ctx/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-ctx/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-encode/package.json b/plugins/template-function-encode/package.json
new file mode 100644
index 0000000..c11762b
--- /dev/null
+++ b/plugins/template-function-encode/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaak/template-function-encode",
+  "displayName": "Encoding Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for encoding and decoding data",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/template-function-encode/src/index.ts b/plugins/template-function-encode/src/index.ts
new file mode 100644
index 0000000..a100965
--- /dev/null
+++ b/plugins/template-function-encode/src/index.ts
@@ -0,0 +1,62 @@
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "base64.encode",
+      description: "Encode a value to base64",
+      args: [
+        {
+          label: "Encoding",
+          type: "select",
+          name: "encoding",
+          defaultValue: "base64",
+          options: [
+            {
+              label: "Base64",
+              value: "base64",
+            },
+            {
+              label: "Base64 URL-safe",
+              value: "base64url",
+            },
+          ],
+        },
+        { label: "Plain Text", type: "text", name: "value", multiLine: true },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        return Buffer.from(String(args.values.value ?? "")).toString(
+          args.values.encoding === "base64url" ? "base64url" : "base64",
+        );
+      },
+    },
+    {
+      name: "base64.decode",
+      description: "Decode a value from base64",
+      args: [{ label: "Encoded Value", type: "text", name: "value", multiLine: true }],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        return Buffer.from(String(args.values.value ?? ""), "base64").toString("utf-8");
+      },
+    },
+    {
+      name: "url.encode",
+      description: "Encode a value for use in a URL (percent-encoding)",
+      args: [{ label: "Plain Text", type: "text", name: "value", multiLine: true }],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        return encodeURIComponent(String(args.values.value ?? ""));
+      },
+    },
+    {
+      name: "url.decode",
+      description: "Decode a percent-encoded URL value",
+      args: [{ label: "Encoded Value", type: "text", name: "value", multiLine: true }],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        try {
+          return decodeURIComponent(String(args.values.value ?? ""));
+        } catch {
+          return "";
+        }
+      },
+    },
+  ],
+};
diff --git a/plugins/template-function-encode/tsconfig.json b/plugins/template-function-encode/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-encode/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-fs/package.json b/plugins/template-function-fs/package.json
new file mode 100644
index 0000000..6443781
--- /dev/null
+++ b/plugins/template-function-fs/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaak/template-function-fs",
+  "displayName": "File System Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for working with the file system",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/template-function-fs/src/index.ts b/plugins/template-function-fs/src/index.ts
new file mode 100644
index 0000000..8be95e8
--- /dev/null
+++ b/plugins/template-function-fs/src/index.ts
@@ -0,0 +1,51 @@
+import fs from "node:fs";
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+
+const UTF8 = "utf8";
+const options = [
+  { label: "ASCII", value: "ascii" },
+  { label: "UTF-8", value: UTF8 },
+  { label: "UTF-16 LE", value: "utf16le" },
+  { label: "Base64", value: "base64" },
+  { label: "Base64 URL-safe", value: "base64url" },
+  { label: "Latin-1", value: "latin1" },
+  { label: "Hexadecimal", value: "hex" },
+];
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "fs.readFile",
+      description: "Read the contents of a file as utf-8",
+      previewArgs: ["encoding"],
+      args: [
+        { title: "Select File", type: "file", name: "path", label: "File" },
+        {
+          type: "select",
+          name: "encoding",
+          label: "Encoding",
+          defaultValue: UTF8,
+          description: "Specifies how the file's bytes are decoded into text when read",
+          options,
+        },
+        {
+          type: "checkbox",
+          name: "trim",
+          label: "Trim Whitespace",
+          description: "Remove leading and trailing whitespace from the file contents",
+        },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        if (!args.values.path || !args.values.encoding) return null;
+
+        try {
+          const v = await fs.promises.readFile(String(args.values.path ?? ""), {
+            encoding: String(args.values.encoding ?? "utf-8") as BufferEncoding,
+          });
+          return args.values.trim ? v.trim() : v;
+        } catch {
+          return null;
+        }
+      },
+    },
+  ],
+};
diff --git a/plugins/template-function-fs/tsconfig.json b/plugins/template-function-fs/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-fs/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-hash/package.json b/plugins/template-function-hash/package.json
new file mode 100755
index 0000000..954e00b
--- /dev/null
+++ b/plugins/template-function-hash/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaak/template-function-hash",
+  "displayName": "Hash Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for generating hash values",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/template-function-hash/src/index.ts b/plugins/template-function-hash/src/index.ts
new file mode 100755
index 0000000..0e7e958
--- /dev/null
+++ b/plugins/template-function-hash/src/index.ts
@@ -0,0 +1,82 @@
+import { createHash, createHmac } from "node:crypto";
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+
+const algorithms = ["md5", "sha1", "sha256", "sha512"] as const;
+const encodings = ["base64", "hex"] as const;
+
+type TemplateFunctionPlugin = NonNullable<PluginDefinition["templateFunctions"]>[number];
+
+const hashFunctions: TemplateFunctionPlugin[] = algorithms.map((algorithm) => ({
+  name: `hash.${algorithm}`,
+  description: "Hash a value to its hexadecimal representation",
+  args: [
+    {
+      type: "text",
+      name: "input",
+      label: "Input",
+      placeholder: "input text",
+      multiLine: true,
+    },
+    {
+      type: "select",
+      name: "encoding",
+      label: "Encoding",
+      defaultValue: "base64",
+      options: encodings.map((encoding) => ({
+        label: capitalize(encoding),
+        value: encoding,
+      })),
+    },
+  ],
+  async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+    const input = String(args.values.input);
+    const encoding = String(args.values.encoding) as (typeof encodings)[number];
+
+    return createHash(algorithm).update(input, "utf-8").digest(encoding);
+  },
+}));
+
+const hmacFunctions: TemplateFunctionPlugin[] = algorithms.map((algorithm) => ({
+  name: `hmac.${algorithm}`,
+  description: "Compute the HMAC of a value",
+  args: [
+    {
+      type: "text",
+      name: "input",
+      label: "Input",
+      placeholder: "input text",
+      multiLine: true,
+    },
+    {
+      type: "text",
+      name: "key",
+      label: "Key",
+      password: true,
+    },
+    {
+      type: "select",
+      name: "encoding",
+      label: "Encoding",
+      defaultValue: "base64",
+      options: encodings.map((encoding) => ({
+        value: encoding,
+        label: capitalize(encoding),
+      })),
+    },
+  ],
+  async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+    const input = String(args.values.input);
+    const key = String(args.values.key);
+    const encoding = String(args.values.encoding) as (typeof encodings)[number];
+
+    return createHmac(algorithm, key, {}).update(input).digest(encoding);
+  },
+}));
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [...hashFunctions, ...hmacFunctions],
+};
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
diff --git a/plugins/template-function-hash/tsconfig.json b/plugins/template-function-hash/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-hash/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-json/package.json b/plugins/template-function-json/package.json
new file mode 100755
index 0000000..ef0242f
--- /dev/null
+++ b/plugins/template-function-json/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@yaak/template-function-json",
+  "displayName": "JSON Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for working with JSON data",
+  "main": "build/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  },
+  "dependencies": {
+    "jsonpath-plus": "^10.3.0"
+  },
+  "devDependencies": {
+    "@types/jsonpath": "^0.2.4"
+  }
+}
diff --git a/plugins/template-function-json/src/index.ts b/plugins/template-function-json/src/index.ts
new file mode 100755
index 0000000..f978d14
--- /dev/null
+++ b/plugins/template-function-json/src/index.ts
@@ -0,0 +1,154 @@
+import type { XPathResult } from "@yaak/template-function-xml";
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+import { JSONPath } from "jsonpath-plus";
+
+const RETURN_FIRST = "first";
+const RETURN_ALL = "all";
+const RETURN_JOIN = "join";
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "json.jsonpath",
+      description: "Filter JSON-formatted text using JSONPath syntax",
+      previewArgs: ["query"],
+      args: [
+        {
+          type: "editor",
+          name: "input",
+          label: "Input",
+          language: "json",
+          placeholder: '{ "foo": "bar" }',
+        },
+        {
+          type: "h_stack",
+          inputs: [
+            {
+              type: "select",
+              name: "result",
+              label: "Return Format",
+              defaultValue: RETURN_FIRST,
+              options: [
+                { label: "First result", value: RETURN_FIRST },
+                { label: "All results", value: RETURN_ALL },
+                { label: "Join with separator", value: RETURN_JOIN },
+              ],
+            },
+            {
+              name: "join",
+              type: "text",
+              label: "Separator",
+              optional: true,
+              defaultValue: ", ",
+              dynamic(_ctx, args) {
+                return { hidden: args.values.result !== RETURN_JOIN };
+              },
+            },
+          ],
+        },
+        {
+          type: "checkbox",
+          name: "formatted",
+          label: "Pretty Print",
+          description: "Format the output as JSON",
+          dynamic(_ctx, args) {
+            return { hidden: args.values.result === RETURN_JOIN };
+          },
+        },
+        { type: "text", name: "query", label: "Query", placeholder: "$..foo" },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        try {
+          return filterJSONPath(
+            String(args.values.input),
+            String(args.values.query),
+            (args.values.result || RETURN_FIRST) as XPathResult,
+            args.values.join == null ? null : String(args.values.join),
+            Boolean(args.values.formatted),
+          );
+        } catch {
+          return null;
+        }
+      },
+    },
+    {
+      name: "json.escape",
+      description: "Escape a JSON string, useful when using the output in JSON values",
+      args: [
+        {
+          type: "text",
+          name: "input",
+          label: "Input",
+          multiLine: true,
+          placeholder: 'Hello "World"',
+        },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const input = String(args.values.input ?? "");
+        // JSON.stringify produces a spec-correct string literal: it escapes
+        // the backslash and quote this used to handle, and also the control
+        // characters it did not. Slicing off the surrounding quotes leaves
+        // the escaped inner text this function is meant to emit.
+        return JSON.stringify(input).slice(1, -1);
+      },
+    },
+    {
+      name: "json.minify",
+      description: "Remove unnecessary whitespace from a valid JSON string.",
+      args: [
+        {
+          type: "editor",
+          language: "json",
+          name: "input",
+          label: "Input",
+          placeholder: '{ "foo": "bar" }',
+        },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const input = String(args.values.input ?? "");
+        try {
+          return JSON.stringify(JSON.parse(input));
+        } catch {
+          return input;
+        }
+      },
+    },
+  ],
+};
+
+export type JSONPathResult = "first" | "join" | "all";
+
+export function filterJSONPath(
+  body: string,
+  path: string,
+  result: JSONPathResult,
+  join: string | null,
+  formatted = false,
+): string {
+  const parsed = JSON.parse(body);
+  let items = JSONPath({ path, json: parsed });
+
+  if (items == null) {
+    return "";
+  }
+
+  if (!Array.isArray(items)) {
+    // Already good
+  } else if (result === "first") {
+    items = items[0] ?? "";
+  } else if (result === "join") {
+    items = items.map((i) => objToStr(i, false)).join(join ?? "");
+  }
+
+  return objToStr(items, formatted);
+}
+
+function objToStr(o: unknown, formatted = false): string {
+  if (
+    Object.prototype.toString.call(o) === "[object Array]" ||
+    Object.prototype.toString.call(o) === "[object Object]"
+  ) {
+    return formatted ? JSON.stringify(o, null, 2) : JSON.stringify(o);
+  }
+  return String(o);
+}
diff --git a/plugins/template-function-json/tests/escape.test.ts b/plugins/template-function-json/tests/escape.test.ts
new file mode 100644
index 0000000..65d99ba
--- /dev/null
+++ b/plugins/template-function-json/tests/escape.test.ts
@@ -0,0 +1,50 @@
+import type { Context } from "@yaakapp/api";
+import { describe, expect, it } from "vite-plus/test";
+import { plugin } from "../src";
+
+const LF = String.fromCharCode(10);
+const TAB = String.fromCharCode(9);
+const CR = String.fromCharCode(13);
+
+describe("json.escape", () => {
+  const escapeFunction = plugin.templateFunctions?.find((f) => f.name === "json.escape");
+
+  const escape = async (input: string) =>
+    await escapeFunction!.onRender({} as Context, { values: { input } } as never);
+
+  // The point of the function is that the result can be dropped between two
+  // quotes in a JSON document, so that is what these assert.
+  const embeds = (escaped: string | null) => {
+    JSON.parse(`{"k":"${escaped}"}`);
+    return JSON.parse(`{"k":"${escaped}"}`).k;
+  };
+
+  it("should exist", () => {
+    expect(escapeFunction).toBeTruthy();
+  });
+
+  it("escapes a quote", async () => {
+    const input = `say "hi"`;
+    expect(embeds(await escape(input))).toBe(input);
+  });
+
+  it("escapes a backslash", async () => {
+    const input = `a${String.fromCharCode(92)}b`;
+    expect(embeds(await escape(input))).toBe(input);
+  });
+
+  it("escapes a newline", async () => {
+    const input = `line1${LF}line2`;
+    expect(embeds(await escape(input))).toBe(input);
+  });
+
+  it("escapes a tab and a carriage return", async () => {
+    const input = `a${TAB}b${CR}c`;
+    expect(embeds(await escape(input))).toBe(input);
+  });
+
+  it("round-trips a pretty-printed JSON document", async () => {
+    const input = JSON.stringify({ name: `he said "hi"`, items: [1, 2] }, null, 2);
+    expect(embeds(await escape(input))).toBe(input);
+  });
+});
diff --git a/plugins/template-function-json/tsconfig.json b/plugins/template-function-json/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-json/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-prompt/package.json b/plugins/template-function-prompt/package.json
new file mode 100644
index 0000000..7829308
--- /dev/null
+++ b/plugins/template-function-prompt/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@yaak/template-function-prompt",
+  "displayName": "Prompt Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for prompting for user input",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "slugify": "^1.6.6"
+  }
+}
diff --git a/plugins/template-function-prompt/src/index.ts b/plugins/template-function-prompt/src/index.ts
new file mode 100644
index 0000000..b03ae3d
--- /dev/null
+++ b/plugins/template-function-prompt/src/index.ts
@@ -0,0 +1,195 @@
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+import slugify from "slugify";
+
+const STORE_NONE = "none";
+const STORE_FOREVER = "forever";
+const STORE_EXPIRE = "expire";
+
+interface Saved {
+  value: string;
+  createdAt: number;
+}
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "prompt.text",
+      description: "Prompt the user for input when sending a request",
+      previewType: "click",
+      previewArgs: ["label"],
+      args: [
+        {
+          type: "text",
+          name: "label",
+          label: "Label",
+          optional: true,
+          dynamic(_ctx, args) {
+            if (
+              args.values.store === STORE_EXPIRE ||
+              (args.values.store === STORE_FOREVER && !args.values.key)
+            ) {
+              return { optional: false };
+            }
+          },
+        },
+        {
+          type: "select",
+          name: "store",
+          label: "Store Input",
+          defaultValue: STORE_NONE,
+          options: [
+            { label: "Never", value: STORE_NONE },
+            { label: "Expire", value: STORE_EXPIRE },
+            { label: "Forever", value: STORE_FOREVER },
+          ],
+        },
+        {
+          type: "h_stack",
+          dynamic(_ctx, args) {
+            return { hidden: args.values.store === STORE_NONE };
+          },
+          inputs: [
+            {
+              type: "text",
+              name: "namespace",
+              label: "Namespace",
+              // oxlint-disable-next-line no-template-curly-in-string -- Yaak template syntax
+              defaultValue: "${[ctx.workspace()]}",
+              optional: true,
+            },
+            {
+              type: "text",
+              name: "key",
+              label: "Key (defaults to Label)",
+              optional: true,
+              dynamic(_ctx, args) {
+                return { placeholder: String(args.values.label || "") };
+              },
+            },
+            {
+              type: "text",
+              name: "ttl",
+              label: "TTL (seconds)",
+              placeholder: "0",
+              defaultValue: "0",
+              optional: true,
+              dynamic(_ctx, args) {
+                return { hidden: args.values.store !== STORE_EXPIRE };
+              },
+            },
+          ],
+        },
+        {
+          type: "banner",
+          color: "info",
+          inputs: [],
+          dynamic(_ctx, args) {
+            let key: string;
+            try {
+              key = buildKey(args);
+            } catch (err) {
+              return { color: "danger", inputs: [{ type: "markdown", content: String(err) }] };
+            }
+            return {
+              hidden: args.values.store === STORE_NONE,
+              inputs: [
+                {
+                  type: "markdown",
+                  content: [`Value will be saved under: \`${key}\``].join("\n\n"),
+                },
+              ],
+            };
+          },
+        },
+        {
+          type: "accordion",
+          label: "Advanced",
+          inputs: [
+            {
+              type: "text",
+              name: "title",
+              label: "Prompt Title",
+              optional: true,
+              placeholder: "Enter Value",
+            },
+            { type: "text", name: "defaultValue", label: "Default Value", optional: true },
+            { type: "text", name: "placeholder", label: "Input Placeholder", optional: true },
+            { type: "checkbox", name: "password", label: "Mask Value" },
+          ],
+        },
+      ],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        if (args.purpose !== "send") return null;
+
+        if (args.values.store !== STORE_NONE && !args.values.namespace) {
+          throw new Error("Namespace is required when storing values");
+        }
+
+        const existing = await maybeGetValue(ctx, args);
+        if (existing != null) {
+          return existing;
+        }
+
+        const value = await ctx.prompt.text({
+          id: `prompt-${args.values.label ?? "none"}`,
+          label: String(args.values.label || "Value"),
+          title: String(args.values.title ?? "Enter Value"),
+          defaultValue: String(args.values.defaultValue ?? ""),
+          placeholder: String(args.values.placeholder ?? ""),
+          password: Boolean(args.values.password),
+          required: false,
+        });
+
+        if (value == null) {
+          throw new Error("Prompt cancelled");
+        }
+
+        if (args.values.store !== STORE_NONE) {
+          await maybeSetValue(ctx, args, value);
+        }
+
+        return value;
+      },
+    },
+  ],
+};
+
+function buildKey(args: CallTemplateFunctionArgs) {
+  if (!args.values.key && !args.values.label) {
+    throw new Error("A label or key is required when storing values");
+  }
+  return [args.values.namespace, args.values.key || args.values.label]
+    .filter((v) => !!v)
+    .map((v) => slugify(String(v), { lower: true, trim: true }))
+    .join(".");
+}
+
+async function maybeGetValue(ctx: Context, args: CallTemplateFunctionArgs) {
+  if (args.values.store === STORE_NONE) return null;
+
+  const existing = await ctx.store.get<Saved>(buildKey(args));
+  if (existing == null) {
+    return null;
+  }
+
+  if (args.values.store === STORE_FOREVER) {
+    return existing.value;
+  }
+
+  const ttlSeconds = Number.parseInt(String(args.values.ttl), 10) || 0;
+  const ageSeconds = (Date.now() - existing.createdAt) / 1000;
+  if (ageSeconds > ttlSeconds) {
+    ctx.store.delete(buildKey(args)).catch(console.error);
+    return null;
+  }
+
+  return existing.value;
+}
+
+async function maybeSetValue(ctx: Context, args: CallTemplateFunctionArgs, value: string) {
+  if (args.values.store === STORE_NONE) {
+    return;
+  }
+
+  await ctx.store.set<Saved>(buildKey(args), { value, createdAt: Date.now() });
+}
diff --git a/plugins/template-function-prompt/tsconfig.json b/plugins/template-function-prompt/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-prompt/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-random/package.json b/plugins/template-function-random/package.json
new file mode 100644
index 0000000..6d0774e
--- /dev/null
+++ b/plugins/template-function-random/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaak/template-function-random",
+  "displayName": "Random Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for generating random values",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/template-function-random/src/index.ts b/plugins/template-function-random/src/index.ts
new file mode 100644
index 0000000..fc29039
--- /dev/null
+++ b/plugins/template-function-random/src/index.ts
@@ -0,0 +1,44 @@
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "random.range",
+      description: "Generate a random number between two values",
+      previewArgs: ["min", "max"],
+      args: [
+        {
+          type: "text",
+          name: "min",
+          label: "Minimum",
+          defaultValue: "0",
+        },
+        {
+          type: "text",
+          name: "max",
+          label: "Maximum",
+          defaultValue: "1",
+        },
+        {
+          type: "text",
+          name: "decimals",
+          optional: true,
+          label: "Decimal Places",
+        },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const min = args.values.min ? Number.parseInt(String(args.values.min ?? "0"), 10) : 0;
+        const max = args.values.max ? Number.parseInt(String(args.values.max ?? "1"), 10) : 1;
+        const decimals = args.values.decimals
+          ? Number.parseInt(String(args.values.decimals ?? "0"), 10)
+          : null;
+
+        let value = Math.random() * (max - min) + min;
+        if (decimals !== null) {
+          value = Math.round(value * 10 ** decimals) / 10 ** decimals;
+        }
+        return String(value);
+      },
+    },
+  ],
+};
diff --git a/plugins/template-function-random/tsconfig.json b/plugins/template-function-random/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-random/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-regex/package.json b/plugins/template-function-regex/package.json
new file mode 100644
index 0000000..2534d4c
--- /dev/null
+++ b/plugins/template-function-regex/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@yaak/template-function-regex",
+  "displayName": "Regex Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for working with regular expressions",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  }
+}
diff --git a/plugins/template-function-regex/src/index.ts b/plugins/template-function-regex/src/index.ts
new file mode 100644
index 0000000..f004cb6
--- /dev/null
+++ b/plugins/template-function-regex/src/index.ts
@@ -0,0 +1,76 @@
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+import type { TemplateFunctionArg } from "@yaakapp-internal/plugins";
+
+const inputArg: TemplateFunctionArg = {
+  type: "text",
+  name: "input",
+  label: "Input Text",
+  multiLine: true,
+};
+
+const regexArg: TemplateFunctionArg = {
+  type: "text",
+  name: "regex",
+  label: "Regular Expression",
+  placeholder: "\\w+",
+  defaultValue: ".*",
+  description:
+    "A JavaScript regular expression. Use a capture group to reference parts of the match in the replacement.",
+};
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "regex.match",
+      description: "Extract text using a regular expression",
+      args: [inputArg, regexArg],
+      previewArgs: [regexArg.name],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const input = String(args.values.input ?? "");
+        const regex = new RegExp(String(args.values.regex ?? ""));
+
+        const match = input.match(regex);
+        return match?.groups
+          ? (Object.values(match.groups)[0] ?? "")
+          : (match?.[1] ?? match?.[0] ?? "");
+      },
+    },
+    {
+      name: "regex.replace",
+      description: "Replace text using a regular expression",
+      previewArgs: [regexArg.name],
+      args: [
+        inputArg,
+        regexArg,
+        {
+          type: "text",
+          name: "replacement",
+          label: "Replacement Text",
+          placeholder: "hello $1",
+          description:
+            "The replacement text. Use $1, $2, ... to reference capture groups or $& to reference the entire match.",
+        },
+        {
+          type: "text",
+          name: "flags",
+          label: "Flags",
+          placeholder: "g",
+          defaultValue: "g",
+          optional: true,
+          description:
+            "Regular expression flags (g for global, i for case-insensitive, m for multiline, etc.)",
+        },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const input = String(args.values.input ?? "");
+        const replacement = String(args.values.replacement ?? "");
+        const flags = String(args.values.flags || "");
+        const regex = String(args.values.regex);
+
+        if (!regex) return "";
+
+        return input.replace(new RegExp(String(args.values.regex), flags), replacement);
+      },
+    },
+  ],
+};
diff --git a/plugins/template-function-regex/tests/regex.test.ts b/plugins/template-function-regex/tests/regex.test.ts
new file mode 100644
index 0000000..6c8c575
--- /dev/null
+++ b/plugins/template-function-regex/tests/regex.test.ts
@@ -0,0 +1,196 @@
+import type { Context } from "@yaakapp/api";
+import { describe, expect, it } from "vite-plus/test";
+import { plugin } from "../src";
+
+describe("regex.match", () => {
+  const matchFunction = plugin.templateFunctions?.find((f) => f.name === "regex.match");
+
+  it("should exist", () => {
+    expect(matchFunction).toBeDefined();
+  });
+
+  it("should extract first capture group", async () => {
+    const result = await matchFunction?.onRender({} as Context, {
+      values: {
+        regex: "Hello (\\w+)",
+        input: "Hello World",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("World");
+  });
+
+  it("should extract named capture group", async () => {
+    const result = await matchFunction?.onRender({} as Context, {
+      values: {
+        regex: "Hello (?<name>\\w+)",
+        input: "Hello World",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("World");
+  });
+
+  it("should return full match when no capture groups", async () => {
+    const result = await matchFunction?.onRender({} as Context, {
+      values: {
+        regex: "Hello \\w+",
+        input: "Hello World",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("Hello World");
+  });
+
+  it("should return empty string when no match", async () => {
+    const result = await matchFunction?.onRender({} as Context, {
+      values: {
+        regex: "Goodbye",
+        input: "Hello World",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("");
+  });
+
+  it("should return empty string when regex is empty", async () => {
+    const result = await matchFunction?.onRender({} as Context, {
+      values: {
+        regex: "",
+        input: "Hello World",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("");
+  });
+
+  it("should return empty string when input is empty", async () => {
+    const result = await matchFunction?.onRender({} as Context, {
+      values: {
+        regex: "Hello",
+        input: "",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("");
+  });
+});
+
+describe("regex.replace", () => {
+  const replaceFunction = plugin.templateFunctions?.find((f) => f.name === "regex.replace");
+
+  it("should exist", () => {
+    expect(replaceFunction).toBeDefined();
+  });
+
+  it("should replace one occurrence by default", async () => {
+    const result = await replaceFunction?.onRender({} as Context, {
+      values: {
+        regex: "o",
+        input: "Hello World",
+        replacement: "a",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("Hella World");
+  });
+
+  it("should replace with capture groups", async () => {
+    const result = await replaceFunction?.onRender({} as Context, {
+      values: {
+        regex: "(\\w+) (\\w+)",
+        input: "Hello World",
+        replacement: "$2 $1",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("World Hello");
+  });
+
+  it("should replace with full match reference", async () => {
+    const result = await replaceFunction?.onRender({} as Context, {
+      values: {
+        regex: "World",
+        input: "Hello World",
+        replacement: "[$&]",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("Hello [World]");
+  });
+
+  it("should respect flags parameter", async () => {
+    const result = await replaceFunction?.onRender({} as Context, {
+      values: {
+        regex: "hello",
+        input: "Hello World",
+        replacement: "Hi",
+        flags: "i",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("Hi World");
+  });
+
+  it("should handle empty replacement", async () => {
+    const result = await replaceFunction?.onRender({} as Context, {
+      values: {
+        regex: "World",
+        input: "Hello World",
+        replacement: "",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("Hello ");
+  });
+
+  it("should return original input when no match", async () => {
+    const result = await replaceFunction?.onRender({} as Context, {
+      values: {
+        regex: "Goodbye",
+        input: "Hello World",
+        replacement: "Hi",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("Hello World");
+  });
+
+  it("should return empty string when regex is empty", async () => {
+    const result = await replaceFunction?.onRender({} as Context, {
+      values: {
+        regex: "",
+        input: "Hello World",
+        replacement: "Hi",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("");
+  });
+
+  it("should return empty string when input is empty", async () => {
+    const result = await replaceFunction?.onRender({} as Context, {
+      values: {
+        regex: "Hello",
+        input: "",
+        replacement: "Hi",
+      },
+      purpose: "send",
+    });
+    expect(result).toBe("");
+  });
+
+  it("should throw on invalid regex", async () => {
+    const fn = replaceFunction?.onRender({} as Context, {
+      values: {
+        regex: "[",
+        input: "Hello World",
+        replacement: "Hi",
+      },
+      purpose: "send",
+    });
+    await expect(fn).rejects.toThrow(
+      "Invalid regular expression: /[/: Unterminated character class",
+    );
+  });
+});
diff --git a/plugins/template-function-regex/tsconfig.json b/plugins/template-function-regex/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-regex/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-request/package.json b/plugins/template-function-request/package.json
new file mode 100755
index 0000000..1f5e0d3
--- /dev/null
+++ b/plugins/template-function-request/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaak/template-function-request",
+  "displayName": "Request Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for extracting value from requests",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/template-function-request/src/index.ts b/plugins/template-function-request/src/index.ts
new file mode 100755
index 0000000..51de190
--- /dev/null
+++ b/plugins/template-function-request/src/index.ts
@@ -0,0 +1,290 @@
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+import type { AnyModel, HttpUrlParameter } from "@yaakapp-internal/models";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import type { JSONPathResult } from "../../template-function-json";
+import { filterJSONPath } from "../../template-function-json";
+import type { XPathResult } from "../../template-function-xml";
+import { filterXPath } from "../../template-function-xml";
+
+const RETURN_FIRST = "first";
+const RETURN_ALL = "all";
+const RETURN_JOIN = "join";
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "request.body.raw",
+      description: "Access the entire request body, as text",
+      aliases: ["request.body"],
+      args: [
+        {
+          name: "requestId",
+          label: "Http Request",
+          type: "http_request",
+        },
+      ],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const requestId = String(args.values.requestId ?? "n/a");
+        const httpRequest = await ctx.httpRequest.getById({ id: requestId });
+        if (httpRequest == null) return null;
+        return String(
+          await ctx.templates.render({
+            data: httpRequest.body?.text ?? "",
+            purpose: args.purpose,
+          }),
+        );
+      },
+    },
+    {
+      name: "request.body.path",
+      description: "Access a field of the request body using JSONPath or XPath",
+      previewArgs: ["path"],
+      args: [
+        { name: "requestId", label: "Http Request", type: "http_request" },
+        {
+          type: "h_stack",
+          inputs: [
+            {
+              type: "select",
+              name: "result",
+              label: "Return Format",
+              defaultValue: RETURN_FIRST,
+              options: [
+                { label: "First result", value: RETURN_FIRST },
+                { label: "All results", value: RETURN_ALL },
+                { label: "Join with separator", value: RETURN_JOIN },
+              ],
+            },
+            {
+              name: "join",
+              type: "text",
+              label: "Separator",
+              optional: true,
+              defaultValue: ", ",
+              dynamic(_ctx, args) {
+                return { hidden: args.values.result !== RETURN_JOIN };
+              },
+            },
+          ],
+        },
+        {
+          type: "text",
+          name: "path",
+          label: "JSONPath or XPath",
+          placeholder: "$.books[0].id or /books[0]/id",
+          dynamic: async (ctx, args) => {
+            const requestId = String(args.values.requestId ?? "n/a");
+            const httpRequest = await ctx.httpRequest.getById({ id: requestId });
+            if (httpRequest == null) return null;
+
+            const contentType =
+              httpRequest.headers
+                .find((h) => h.name.toLowerCase() === "content-type")
+                ?.value.toLowerCase() ?? "";
+            if (contentType.includes("xml") || contentType?.includes("html")) {
+              return {
+                label: "XPath",
+                placeholder: "/books[0]/id",
+                description: "Enter an XPath expression used to filter the results",
+              };
+            }
+
+            return {
+              label: "JSONPath",
+              placeholder: "$.books[0].id",
+              description: "Enter a JSONPath expression used to filter the results",
+            };
+          },
+        },
+      ],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const requestId = String(args.values.requestId ?? "n/a");
+        const httpRequest = await ctx.httpRequest.getById({ id: requestId });
+        if (httpRequest == null) return null;
+
+        const body = httpRequest.body?.text ?? "";
+
+        try {
+          const result: JSONPathResult =
+            args.values.result === RETURN_ALL
+              ? "all"
+              : args.values.result === RETURN_JOIN
+                ? "join"
+                : "first";
+          return filterJSONPath(
+            body,
+            String(args.values.path || ""),
+            result,
+            args.values.join == null ? null : String(args.values.join),
+          );
+        } catch {
+          // Probably not JSON, try XPath
+        }
+
+        try {
+          const result: XPathResult =
+            args.values.result === RETURN_ALL
+              ? "all"
+              : args.values.result === RETURN_JOIN
+                ? "join"
+                : "first";
+          return filterXPath(
+            body,
+            String(args.values.path || ""),
+            result,
+            args.values.join == null ? null : String(args.values.join),
+          );
+        } catch {
+          // Probably not XML
+        }
+
+        return null; // Bail out
+      },
+    },
+    {
+      name: "request.header",
+      description: "Read the value of a request header, by name",
+      previewArgs: ["header"],
+      args: [
+        {
+          name: "requestId",
+          label: "Http Request",
+          type: "http_request",
+        },
+        {
+          name: "header",
+          label: "Header Name",
+          type: "text",
+          async dynamic(ctx, args) {
+            if (typeof args.values.requestId !== "string") return null;
+
+            const request = await ctx.httpRequest.getById({ id: args.values.requestId });
+            if (request == null) return null;
+
+            const validHeaders = request.headers.filter((h) => h.enabled !== false && h.name);
+            return {
+              placeholder: validHeaders[0]?.name,
+              completionOptions: validHeaders.map<GenericCompletionOption>((h) => ({
+                label: h.name,
+                type: "constant",
+              })),
+            };
+          },
+        },
+      ],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const headerName = String(args.values.header ?? "");
+        const requestId = String(args.values.requestId ?? "n/a");
+        const httpRequest = await ctx.httpRequest.getById({ id: requestId });
+        if (httpRequest == null) return null;
+        const header = httpRequest.headers.find(
+          (h) => h.name.toLowerCase() === headerName.toLowerCase(),
+        );
+        return String(
+          await ctx.templates.render({
+            data: header?.value ?? "",
+            purpose: args.purpose,
+          }),
+        );
+      },
+    },
+    {
+      name: "request.param",
+      description: "Read the value of a query parameter, by name",
+      args: [
+        {
+          name: "requestId",
+          label: "Http Request",
+          type: "http_request",
+        },
+        {
+          name: "param",
+          label: "Param Name",
+          type: "text",
+        },
+      ],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const paramName = String(args.values.param ?? "");
+        const requestId = String(args.values.requestId ?? "n/a");
+        const httpRequest = await ctx.httpRequest.getById({ id: requestId });
+        if (httpRequest == null) return null;
+
+        const renderedUrl = await ctx.templates.render({
+          data: httpRequest.url,
+          purpose: args.purpose,
+        });
+
+        const querystring = renderedUrl.split("?")[1] ?? "";
+        const paramsFromUrl: HttpUrlParameter[] = new URLSearchParams(querystring)
+          .entries()
+          .map(([name, value]): HttpUrlParameter => ({ name, value }))
+          .toArray();
+
+        const allParams = [...paramsFromUrl, ...httpRequest.urlParameters];
+        const allEnabledParams = allParams.filter((p) => p.enabled !== false);
+        const foundParam = allEnabledParams.find((p) => p.name === paramName);
+
+        const renderedValue = await ctx.templates.render({
+          data: foundParam?.value ?? "",
+          purpose: args.purpose,
+        });
+        return renderedValue;
+      },
+    },
+    {
+      name: "request.name",
+      description: "Get the name of a request, or its URL if it has no name",
+      args: [
+        {
+          name: "requestId",
+          label: "Http Request",
+          type: "http_request",
+        },
+      ],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        const requestId = String(args.values.requestId ?? "n/a");
+        const httpRequest = await ctx.httpRequest.getById({ id: requestId });
+        if (httpRequest == null) return null;
+
+        return resolvedModelName(httpRequest);
+      },
+    },
+  ],
+};
+
+// TODO: Use a common function for this, but it fails to build on windows during CI if I try importing it here
+export function resolvedModelName(r: AnyModel | null): string {
+  if (r == null) return "";
+
+  if (!("url" in r) || r.model === "plugin") {
+    return "name" in r ? r.name : "";
+  }
+
+  // Return name if it has one
+  if ("name" in r && r.name) {
+    return r.name;
+  }
+
+  // Replace variable syntax with variable name
+  const withoutVariables = r.url.replace(/\$\{\[\s*([^\]\s]+)\s*]}/g, "$1");
+  if (withoutVariables.trim() === "") {
+    return r.model === "http_request"
+      ? r.bodyType && r.bodyType === "graphql"
+        ? "GraphQL Request"
+        : "HTTP Request"
+      : r.model === "websocket_request"
+        ? "WebSocket Request"
+        : "gRPC Request";
+  }
+
+  // GRPC gets nice short names
+  if (r.model === "grpc_request" && r.service != null && r.method != null) {
+    const shortService = r.service.split(".").pop();
+    return `${shortService}/${r.method}`;
+  }
+
+  // Strip unnecessary protocol
+  const withoutProto = withoutVariables.replace(/^(http|https|ws|wss):\/\//, "");
+
+  return withoutProto;
+}
diff --git a/plugins/template-function-request/tsconfig.json b/plugins/template-function-request/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-request/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-response/package.json b/plugins/template-function-response/package.json
new file mode 100644
index 0000000..f8153ba
--- /dev/null
+++ b/plugins/template-function-response/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@yaak/template-function-response",
+  "displayName": "Response Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for request chaining",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "@yaak/template-function-xml": "*"
+  }
+}
diff --git a/plugins/template-function-response/src/index.ts b/plugins/template-function-response/src/index.ts
new file mode 100644
index 0000000..3397e27
--- /dev/null
+++ b/plugins/template-function-response/src/index.ts
@@ -0,0 +1,335 @@
+import type {
+  CallTemplateFunctionArgs,
+  Context,
+  DynamicTemplateFunctionArg,
+  FormInput,
+  HttpResponse,
+  PluginDefinition,
+  RenderPurpose,
+} from "@yaakapp/api";
+import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
+import type { JSONPathResult } from "../../template-function-json";
+import { filterJSONPath } from "../../template-function-json";
+import type { XPathResult } from "../../template-function-xml";
+import { filterXPath } from "../../template-function-xml";
+
+const BEHAVIOR_TTL = "ttl";
+const BEHAVIOR_ALWAYS = "always";
+const BEHAVIOR_SMART = "smart";
+
+const RETURN_FIRST = "first";
+const RETURN_ALL = "all";
+const RETURN_JOIN = "join";
+
+const behaviorArgs: DynamicTemplateFunctionArg = {
+  type: "h_stack",
+  inputs: [
+    {
+      type: "select",
+      name: "behavior",
+      label: "Sending Behavior",
+      defaultValue: BEHAVIOR_SMART,
+      options: [
+        { label: "When no responses", value: BEHAVIOR_SMART },
+        { label: "Always", value: BEHAVIOR_ALWAYS },
+        { label: "When expired", value: BEHAVIOR_TTL },
+      ],
+    },
+    {
+      type: "text",
+      name: "ttl",
+      label: "TTL (seconds)",
+      placeholder: "0",
+      defaultValue: "0",
+      description:
+        'Resend the request when the latest response is older than this many seconds, or if there are no responses yet. "0" means never expires',
+      dynamic(_ctx, args) {
+        return { hidden: args.values.behavior !== BEHAVIOR_TTL };
+      },
+    },
+  ],
+};
+
+const requestArg: FormInput = {
+  type: "http_request",
+  name: "request",
+  label: "Request",
+  defaultValue: "", // Make it not select the active one by default
+};
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "response.header",
+      description: "Read the value of a response header, by name",
+      previewArgs: ["header"],
+      args: [
+        requestArg,
+        behaviorArgs,
+        {
+          type: "text",
+          name: "header",
+          label: "Header Name",
+          async dynamic(ctx, args) {
+            // Dynamic form config also runs during send-time rendering.
+            // Keep this preview-only to avoid side-effect request sends.
+            if (args.purpose !== "preview") return null;
+
+            const response = await getResponse(ctx, {
+              requestId: String(args.values.request || ""),
+              purpose: args.purpose,
+              behavior: args.values.behavior ? String(args.values.behavior) : null,
+              ttl: String(args.values.ttl || ""),
+            });
+
+            return {
+              placeholder: response?.headers[0]?.name,
+              completionOptions: response?.headers.map<GenericCompletionOption>((h) => ({
+                label: h.name,
+                type: "constant",
+              })),
+            };
+          },
+        },
+      ],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        if (!args.values.request || !args.values.header) return null;
+
+        const response = await getResponse(ctx, {
+          requestId: String(args.values.request || ""),
+          purpose: args.purpose,
+          behavior: args.values.behavior ? String(args.values.behavior) : null,
+          ttl: String(args.values.ttl || ""),
+        });
+        if (response == null) return null;
+
+        const header = response.headers.find(
+          (h) => h.name.toLowerCase() === String(args.values.header ?? "").toLowerCase(),
+        );
+        return header?.value ?? null;
+      },
+    },
+    {
+      name: "response.body.path",
+      description: "Access a field of the response body using JSONPath or XPath",
+      aliases: ["response"],
+      previewArgs: ["path"],
+      args: [
+        requestArg,
+        behaviorArgs,
+        {
+          type: "h_stack",
+          inputs: [
+            {
+              type: "select",
+              name: "result",
+              label: "Return Format",
+              defaultValue: RETURN_FIRST,
+              options: [
+                { label: "First result", value: RETURN_FIRST },
+                { label: "All results", value: RETURN_ALL },
+                { label: "Join with separator", value: RETURN_JOIN },
+              ],
+            },
+            {
+              name: "join",
+              type: "text",
+              label: "Separator",
+              optional: true,
+              defaultValue: ", ",
+              dynamic(_ctx, args) {
+                return { hidden: args.values.result !== RETURN_JOIN };
+              },
+            },
+          ],
+        },
+        {
+          type: "text",
+          name: "path",
+          label: "JSONPath or XPath",
+          placeholder: "$.books[0].id or /books[0]/id",
+          dynamic: async (ctx, args) => {
+            // Dynamic form config also runs during send-time rendering.
+            // Keep this preview-only to avoid side-effect request sends.
+            if (args.purpose !== "preview") return null;
+
+            const resp = await getResponse(ctx, {
+              requestId: String(args.values.request || ""),
+              purpose: "preview",
+              behavior: args.values.behavior ? String(args.values.behavior) : null,
+              ttl: String(args.values.ttl || ""),
+            });
+
+            if (resp == null) {
+              return null;
+            }
+
+            const contentType =
+              resp?.headers
+                .find((h) => h.name.toLowerCase() === "content-type")
+                ?.value.toLowerCase() ?? "";
+            if (contentType.includes("xml") || contentType?.includes("html")) {
+              return {
+                label: "XPath",
+                placeholder: "/books[0]/id",
+                description: "Enter an XPath expression used to filter the results",
+              };
+            }
+
+            return {
+              label: "JSONPath",
+              placeholder: "$.books[0].id",
+              description: "Enter a JSONPath expression used to filter the results",
+            };
+          },
+        },
+      ],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        if (!args.values.request || !args.values.path) return null;
+
+        const response = await getResponse(ctx, {
+          requestId: String(args.values.request || ""),
+          purpose: args.purpose,
+          behavior: args.values.behavior ? String(args.values.behavior) : null,
+          ttl: String(args.values.ttl || ""),
+        });
+        if (response == null) return null;
+
+        const body = await readResponseBody(ctx, response);
+        if (body == null) return null;
+
+        try {
+          const result: JSONPathResult =
+            args.values.result === RETURN_ALL
+              ? "all"
+              : args.values.result === RETURN_JOIN
+                ? "join"
+                : "first";
+          return filterJSONPath(
+            body,
+            String(args.values.path || ""),
+            result,
+            args.values.join == null ? null : String(args.values.join),
+          );
+        } catch {
+          // Probably not JSON, try XPath
+        }
+
+        try {
+          const result: XPathResult =
+            args.values.result === RETURN_ALL
+              ? "all"
+              : args.values.result === RETURN_JOIN
+                ? "join"
+                : "first";
+          return filterXPath(
+            body,
+            String(args.values.path || ""),
+            result,
+            args.values.join == null ? null : String(args.values.join),
+          );
+        } catch {
+          // Probably not XML
+        }
+
+        return null; // Bail out
+      },
+    },
+    {
+      name: "response.body.raw",
+      description: "Access the entire response body, as text",
+      aliases: ["response"],
+      args: [requestArg, behaviorArgs],
+      async onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        if (!args.values.request) return null;
+
+        const response = await getResponse(ctx, {
+          requestId: String(args.values.request || ""),
+          purpose: args.purpose,
+          behavior: args.values.behavior ? String(args.values.behavior) : null,
+          ttl: String(args.values.ttl || ""),
+        });
+        if (response == null) return null;
+
+        return await readResponseBody(ctx, response);
+      },
+    },
+  ],
+};
+
+/**
+ * The response's body as text, or null when there is nothing to read.
+ *
+ * The host is asked for it by response id, so this works wherever the bytes
+ * happen to live — including responses it never recorded, which still get an
+ * id. A body over the runtime's size limit throws rather than coming back
+ * empty, since a template silently rendering to nothing is worse than one that
+ * says why.
+ */
+async function readResponseBody(ctx: Context, response: HttpResponse): Promise<string | null> {
+  // Belt and braces: everything reaching here came from find() or send() and so
+  // has an id. An empty one would just be an unreadable id.
+  if (!response.id) return null;
+
+  const body = await ctx.httpResponse.body({ responseId: response.id });
+  if (body.contentLength === 0) return null;
+
+  return await body.text();
+}
+
+async function getResponse(
+  ctx: Context,
+  {
+    requestId,
+    behavior,
+    purpose,
+    ttl,
+  }: {
+    requestId: string;
+    behavior: string | null;
+    ttl: string | null;
+    purpose: RenderPurpose;
+  },
+): Promise<HttpResponse | null> {
+  if (!requestId) return null;
+
+  const httpRequest = await ctx.httpRequest.getById({ id: requestId ?? "n/a" });
+  if (httpRequest == null) {
+    return null;
+  }
+
+  const responses = await ctx.httpResponse.find({ requestId: httpRequest.id, limit: 1 });
+
+  if (behavior === "never" && responses.length === 0) {
+    return null;
+  }
+
+  let response: HttpResponse | null = responses[0] ?? null;
+
+  // Previews happen a ton, and we don't want to send too many times on "always," so treat
+  // it as "smart" during preview.
+  const finalBehavior = behavior === "always" && purpose === "preview" ? "smart" : behavior;
+
+  // Send if no responses and "smart," or "always"
+  if (
+    (finalBehavior === "smart" && response == null) ||
+    finalBehavior === "always" ||
+    (finalBehavior === BEHAVIOR_TTL && shouldSendExpired(response, ttl))
+  ) {
+    // Explicitly render the request before send (instead of relying on send() to render) so that we can
+    // preserve the render purpose.
+    const renderedHttpRequest = await ctx.httpRequest.render({ httpRequest, purpose });
+    response = (await ctx.httpRequest.send({ httpRequest: renderedHttpRequest })).httpResponse;
+  }
+
+  return response;
+}
+
+function shouldSendExpired(response: HttpResponse | null, ttl: string | null): boolean {
+  if (response == null) return true;
+  const ttlSeconds = Number.parseInt(ttl || "0", 10) || 0;
+  if (ttlSeconds === 0) return false;
+  const nowMillis = Date.now();
+  const respMillis = new Date(`${response.createdAt}Z`).getTime();
+  return respMillis + ttlSeconds * 1000 < nowMillis;
+}
diff --git a/plugins/template-function-response/tsconfig.json b/plugins/template-function-response/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-response/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-timestamp/package.json b/plugins/template-function-timestamp/package.json
new file mode 100755
index 0000000..288009e
--- /dev/null
+++ b/plugins/template-function-timestamp/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@yaak/template-function-timestamp",
+  "displayName": "Timestamp Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for dealing with timestamps",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "test": "vp test --run tests"
+  },
+  "dependencies": {
+    "@date-fns/tz": "^1.4.1",
+    "date-fns": "^4.1.0"
+  }
+}
diff --git a/plugins/template-function-timestamp/src/index.ts b/plugins/template-function-timestamp/src/index.ts
new file mode 100755
index 0000000..f44a263
--- /dev/null
+++ b/plugins/template-function-timestamp/src/index.ts
@@ -0,0 +1,187 @@
+import type { PluginDefinition } from "@yaakapp/api";
+import type { TemplateFunctionArg } from "@yaakapp-internal/plugins";
+
+import type { ContextFn } from "date-fns";
+import {
+  addDays,
+  addHours,
+  addMinutes,
+  addMonths,
+  addSeconds,
+  addYears,
+  format as formatDate,
+  isValid,
+  parseISO,
+  subDays,
+  subHours,
+  subMinutes,
+  subMonths,
+  subSeconds,
+  subYears,
+} from "date-fns";
+
+const dateArg: TemplateFunctionArg = {
+  type: "text",
+  name: "date",
+  label: "Timestamp",
+  optional: true,
+  description:
+    "Can be a timestamp in milliseconds, ISO string, or anything parseable by JS `new Date()`",
+  placeholder: new Date().toISOString(),
+};
+
+const expressionArg: TemplateFunctionArg = {
+  type: "text",
+  name: "expression",
+  label: "Expression",
+  description: "Modification expression (eg. '-5d +2h 3m'). Available units: y, M, d, h, m, s",
+  optional: true,
+  placeholder: "-5d +2h 3m",
+};
+
+const formatArg: TemplateFunctionArg = {
+  name: "format",
+  label: "Format String",
+  description:
+    "date-fns format string to describe the output (eg. \"yyyy-MM-dd 'at' HH:mm:ss\"). " +
+    "Wrap literal text in single quotes to escape it",
+  optional: true,
+  placeholder: "yyyy-MM-dd HH:mm:ss",
+  type: "text",
+};
+
+const formatDocsBanner: TemplateFunctionArg = {
+  type: "banner",
+  color: "info",
+  inputs: [
+    {
+      type: "markdown",
+      content:
+        "Uses [date-fns format tokens](https://date-fns.org/docs/format), " +
+        "not dayjs or Moment. Wrap literal text in single quotes to escape it.",
+    },
+  ],
+};
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "timestamp.unix",
+      description: "Get the timestamp in seconds",
+      args: [dateArg],
+      onRender: async (_ctx, args) => {
+        const d = parseDateString(String(args.values.date ?? ""));
+        return String(Math.floor(d.getTime() / 1000));
+      },
+    },
+    {
+      name: "timestamp.unixMillis",
+      description: "Get the timestamp in milliseconds",
+      args: [dateArg],
+      onRender: async (_ctx, args) => {
+        const d = parseDateString(String(args.values.date ?? ""));
+        return String(d.getTime());
+      },
+    },
+    {
+      name: "timestamp.iso8601",
+      description: "Get the date in ISO8601 format",
+      args: [dateArg],
+      onRender: async (_ctx, args) => {
+        const d = parseDateString(String(args.values.date ?? ""));
+        return d.toISOString();
+      },
+    },
+    {
+      name: "timestamp.format",
+      description: "Format a date using a date-fns format string",
+      args: [formatDocsBanner, dateArg, formatArg],
+      previewArgs: [formatArg.name],
+      onRender: async (_ctx, args) => formatDatetime(args.values),
+    },
+    {
+      name: "timestamp.offset",
+      description: "Get the offset of a date based on an expression",
+      args: [dateArg, expressionArg],
+      previewArgs: [expressionArg.name],
+      onRender: async (_ctx, args) => calculateDatetime(args.values),
+    },
+  ],
+};
+
+function applyDateOp(d: Date, sign: string, amount: number, unit: string): Date {
+  switch (unit) {
+    case "y":
+      return sign === "-" ? subYears(d, amount) : addYears(d, amount);
+    case "M":
+      return sign === "-" ? subMonths(d, amount) : addMonths(d, amount);
+    case "d":
+      return sign === "-" ? subDays(d, amount) : addDays(d, amount);
+    case "h":
+      return sign === "-" ? subHours(d, amount) : addHours(d, amount);
+    case "m":
+      return sign === "-" ? subMinutes(d, amount) : addMinutes(d, amount);
+    case "s":
+      return sign === "-" ? subSeconds(d, amount) : addSeconds(d, amount);
+    default:
+      throw new Error(`Invalid data calculation unit: ${unit}`);
+  }
+}
+
+function parseOp(op: string): { sign: string; amount: number; unit: string } | null {
+  const match = op.match(/^([+-]?)(\d+)([yMdhms])$/);
+  if (!match) {
+    throw new Error(`Invalid date expression: ${op}`);
+  }
+  const [, sign, amount, unit] = match;
+  if (!unit) return null;
+  return { sign: sign ?? "+", amount: Number(amount ?? 0), unit };
+}
+
+function parseDateString(date: string): Date {
+  if (!date.trim()) {
+    return new Date();
+  }
+
+  const isoDate = parseISO(date);
+  if (isValid(isoDate)) {
+    return isoDate;
+  }
+
+  const jsDate = /^\d+(\.\d+)?$/.test(date) ? new Date(Number(date)) : new Date(date);
+  if (isValid(jsDate)) {
+    return jsDate;
+  }
+
+  throw new Error(`Invalid date: ${date}`);
+}
+
+export function calculateDatetime(args: { date?: string; expression?: string }): string {
+  const { date, expression } = args;
+  let jsDate = parseDateString(date ?? "");
+
+  if (expression) {
+    const ops = String(expression)
+      .split(" ")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    for (const op of ops) {
+      const parsed = parseOp(op);
+      if (parsed) {
+        jsDate = applyDateOp(jsDate, parsed.sign, parsed.amount, parsed.unit);
+      }
+    }
+  }
+
+  return jsDate.toISOString();
+}
+
+export function formatDatetime(args: {
+  date?: string;
+  format?: string;
+  in?: ContextFn<Date>;
+}): string {
+  const { date, format } = args;
+  const d = parseDateString(date ?? "");
+  return formatDate(d, String(format || "yyyy-MM-dd HH:mm:ss"), { in: args.in });
+}
diff --git a/plugins/template-function-timestamp/tests/formatDatetime.test.ts b/plugins/template-function-timestamp/tests/formatDatetime.test.ts
new file mode 100644
index 0000000..0617a27
--- /dev/null
+++ b/plugins/template-function-timestamp/tests/formatDatetime.test.ts
@@ -0,0 +1,72 @@
+import { tz } from "@date-fns/tz";
+import { describe, expect, it } from "vite-plus/test";
+import { calculateDatetime, formatDatetime } from "../src";
+
+describe("formatDatetime", () => {
+  it("returns formatted current date", () => {
+    const result = formatDatetime({});
+    expect(result).toMatch(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);
+  });
+
+  it("returns formatted specific date", () => {
+    const result = formatDatetime({ date: "2025-07-13T12:34:56" });
+    expect(result).toBe("2025-07-13 12:34:56");
+  });
+
+  it("returns formatted specific timestamp", () => {
+    const result = formatDatetime({ date: "1752435296000", in: tz("America/Vancouver") });
+    expect(result).toBe("2025-07-13 12:34:56");
+  });
+
+  it("returns formatted specific timestamp with decimals", () => {
+    const result = formatDatetime({ date: "1752435296000.19", in: tz("America/Vancouver") });
+    expect(result).toBe("2025-07-13 12:34:56");
+  });
+
+  it("returns formatted date with custom output", () => {
+    const result = formatDatetime({ date: "2025-07-13T12:34:56", format: "dd/MM/yyyy" });
+    expect(result).toBe("13/07/2025");
+  });
+
+  it("handles invalid date gracefully", () => {
+    expect(() => formatDatetime({ date: "invalid-date" })).toThrow("Invalid date: invalid-date");
+  });
+});
+
+describe("calculateDatetime", () => {
+  it("returns ISO string for current date", () => {
+    const result = calculateDatetime({});
+    expect(result).toMatch(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/);
+  });
+
+  it("returns ISO string for specific date", () => {
+    const result = calculateDatetime({ date: "2025-07-13T12:34:56Z" });
+    expect(result).toBe("2025-07-13T12:34:56.000Z");
+  });
+
+  it("applies calc operations", () => {
+    const result = calculateDatetime({ date: "2025-07-13T12:00:00Z", expression: "+1d 2h" });
+    expect(result).toBe("2025-07-14T14:00:00.000Z");
+  });
+
+  it("applies negative calc operations", () => {
+    const result = calculateDatetime({ date: "2025-07-13T12:00:00Z", expression: "-1d -2h 1m" });
+    expect(result).toBe("2025-07-12T10:01:00.000Z");
+  });
+
+  it("throws error for invalid unit", () => {
+    expect(() => calculateDatetime({ date: "2025-07-13T12:00:00Z", expression: "+1x" })).toThrow(
+      "Invalid date expression: +1x",
+    );
+  });
+  it("throws error for invalid unit weird", () => {
+    expect(() => calculateDatetime({ date: "2025-07-13T12:00:00Z", expression: "+1&#^%" })).toThrow(
+      "Invalid date expression: +1&#^%",
+    );
+  });
+  it("throws error for bad expression", () => {
+    expect(() =>
+      calculateDatetime({ date: "2025-07-13T12:00:00Z", expression: "bad expr" }),
+    ).toThrow("Invalid date expression: bad");
+  });
+});
diff --git a/plugins/template-function-timestamp/tsconfig.json b/plugins/template-function-timestamp/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-timestamp/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-uuid/package.json b/plugins/template-function-uuid/package.json
new file mode 100644
index 0000000..ebeafb2
--- /dev/null
+++ b/plugins/template-function-uuid/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@yaak/template-function-uuid",
+  "displayName": "UUID Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for generating UUIDs",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "uuid": "^14.0.0"
+  }
+}
diff --git a/plugins/template-function-uuid/src/index.ts b/plugins/template-function-uuid/src/index.ts
new file mode 100644
index 0000000..422025e
--- /dev/null
+++ b/plugins/template-function-uuid/src/index.ts
@@ -0,0 +1,81 @@
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+import { v1, v3, v4, v5, v6, v7 } from "uuid";
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "uuid.v1",
+      description: "Generate a UUID V1",
+      args: [],
+      async onRender(): Promise<string | null> {
+        return v1();
+      },
+    },
+    {
+      name: "uuid.v3",
+      description: "Generate a UUID V3",
+      args: [
+        { type: "text", name: "name", label: "Name" },
+        {
+          type: "text",
+          name: "namespace",
+          label: "Namespace UUID",
+          description: "A valid UUID to use as the namespace",
+          placeholder: "24ced880-3bf4-11f0-8329-cd053d577f0e",
+        },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        return v3(String(args.values.name), String(args.values.namespace));
+      },
+    },
+    {
+      name: "uuid.v4",
+      description: "Generate a UUID V4",
+      args: [],
+      async onRender(): Promise<string | null> {
+        return v4();
+      },
+    },
+    {
+      name: "uuid.v5",
+      description: "Generate a UUID V5",
+      args: [
+        { type: "text", name: "name", label: "Name" },
+        { type: "text", name: "namespace", label: "Namespace" },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        return v5(String(args.values.name), String(args.values.namespace));
+      },
+    },
+    {
+      name: "uuid.v6",
+      description: "Generate a UUID V6",
+      args: [
+        {
+          type: "text",
+          name: "timestamp",
+          label: "Timestamp",
+          optional: true,
+          description: "Can be any format that can be parsed by JavaScript new Date(...)",
+          placeholder: "2025-05-28T11:15:00Z",
+        },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        // `timestamp` is optional, so an absent or unparseable value has to fall
+        // back to v6()'s own clock. Handing it NaN msecs is not a fallback: the
+        // uuid package masks NaN down to a zero timestamp (1582-10-15).
+        const timestamp = String(args.values.timestamp ?? "").trim();
+        const msecs = timestamp ? new Date(timestamp).getTime() : Number.NaN;
+        return Number.isNaN(msecs) ? v6() : v6({ msecs });
+      },
+    },
+    {
+      name: "uuid.v7",
+      description: "Generate a UUID V7",
+      args: [],
+      async onRender(): Promise<string | null> {
+        return v7();
+      },
+    },
+  ],
+};
diff --git a/plugins/template-function-uuid/tests/uuid.test.ts b/plugins/template-function-uuid/tests/uuid.test.ts
new file mode 100644
index 0000000..cf66b11
--- /dev/null
+++ b/plugins/template-function-uuid/tests/uuid.test.ts
@@ -0,0 +1,37 @@
+import type { Context } from "@yaakapp/api";
+import { describe, expect, it } from "vite-plus/test";
+import { plugin } from "../src";
+
+// A v6 UUID stores 60 bits of 100-nanosecond intervals since 1582-10-15 in its
+// first three groups, with the version nibble removed.
+function v6Millis(uuid: string): number {
+  const hex = uuid.replace(/-/g, "");
+  const intervals = BigInt(`0x${hex.slice(0, 12)}${hex.slice(13, 16)}`);
+  return Number(intervals / 10000n) - 12219292800000;
+}
+
+describe("uuid.v6", () => {
+  const v6 = plugin.templateFunctions?.find((f) => f.name === "uuid.v6");
+
+  it("uses the current time when no usable timestamp is given", async () => {
+    const inputs = [{}, { timestamp: "" }, { timestamp: null }, { timestamp: "not-a-date" }];
+    for (const values of inputs) {
+      const before = Date.now();
+      const result = await v6?.onRender({} as Context, { values, purpose: "send" });
+      const after = Date.now();
+
+      expect(result).not.toMatch(/^00000000-0000-6/);
+      const millis = v6Millis(result as string);
+      expect(millis).toBeGreaterThanOrEqual(before);
+      expect(millis).toBeLessThanOrEqual(after);
+    }
+  });
+
+  it("embeds a timestamp that is given", async () => {
+    const result = await v6?.onRender({} as Context, {
+      values: { timestamp: "2025-05-28T11:15:00Z" },
+      purpose: "send",
+    });
+    expect(v6Millis(result as string)).toBe(Date.parse("2025-05-28T11:15:00Z"));
+  });
+});
diff --git a/plugins/template-function-uuid/tsconfig.json b/plugins/template-function-uuid/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-uuid/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/template-function-xml/package.json b/plugins/template-function-xml/package.json
new file mode 100644
index 0000000..c54a092
--- /dev/null
+++ b/plugins/template-function-xml/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@yaak/template-function-xml",
+  "displayName": "XML Template Functions",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Template functions for working with XML data",
+  "main": "build/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  },
+  "dependencies": {
+    "@xmldom/xmldom": "^0.9.12",
+    "xpath": "^0.0.34"
+  }
+}
diff --git a/plugins/template-function-xml/src/index.ts b/plugins/template-function-xml/src/index.ts
new file mode 100755
index 0000000..1d3ec5c
--- /dev/null
+++ b/plugins/template-function-xml/src/index.ts
@@ -0,0 +1,87 @@
+/* oxlint-disable no-base-to-string */
+import { DOMParser } from "@xmldom/xmldom";
+import type { CallTemplateFunctionArgs, Context, PluginDefinition } from "@yaakapp/api";
+import xpath from "xpath";
+
+const RETURN_FIRST = "first";
+const RETURN_ALL = "all";
+const RETURN_JOIN = "join";
+
+export const plugin: PluginDefinition = {
+  templateFunctions: [
+    {
+      name: "xml.xpath",
+      description: "Filter XML-formatted text using XPath syntax",
+      previewArgs: ["query"],
+      args: [
+        {
+          type: "text",
+          name: "input",
+          label: "Input",
+          multiLine: true,
+          placeholder: "<foo></foo>",
+        },
+        {
+          type: "h_stack",
+          inputs: [
+            {
+              type: "select",
+              name: "result",
+              label: "Return Format",
+              defaultValue: RETURN_FIRST,
+              options: [
+                { label: "First result", value: RETURN_FIRST },
+                { label: "All results", value: RETURN_ALL },
+                { label: "Join with separator", value: RETURN_JOIN },
+              ],
+            },
+            {
+              name: "join",
+              type: "text",
+              label: "Separator",
+              optional: true,
+              defaultValue: ", ",
+              dynamic(_ctx, args) {
+                return { hidden: args.values.result !== RETURN_JOIN };
+              },
+            },
+          ],
+        },
+        { type: "text", name: "query", label: "Query", placeholder: "//foo" },
+      ],
+      async onRender(_ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null> {
+        try {
+          const result = (args.values.result || RETURN_FIRST) as XPathResult;
+          const join = args.values.join == null ? null : String(args.values.join);
+          return filterXPath(String(args.values.input), String(args.values.query), result, join);
+        } catch {
+          return null;
+        }
+      },
+    },
+  ],
+};
+
+export type XPathResult = "first" | "join" | "all";
+export function filterXPath(
+  body: string,
+  path: string,
+  result: XPathResult,
+  join: string | null,
+): string {
+  // oxlint-disable-next-line no-explicit-any
+  const doc: any = new DOMParser().parseFromString(body, "text/xml");
+  const items = xpath.select(path, doc, false);
+
+  if (!Array.isArray(items)) {
+    return String(items);
+  }
+  if (!Array.isArray(items) || result === "first") {
+    return items[0] != null ? String(items[0].firstChild ?? "") : "";
+  }
+  if (result === "join") {
+    return items.map((item) => String(item.firstChild ?? "")).join(join ?? "");
+  }
+  // Not sure what cases this happens in (?)
+  return String(items);
+}
diff --git a/plugins/template-function-xml/tsconfig.json b/plugins/template-function-xml/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/template-function-xml/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/plugins/themes-yaak/package.json b/plugins/themes-yaak/package.json
new file mode 100644
index 0000000..ddbb686
--- /dev/null
+++ b/plugins/themes-yaak/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@yaak/themes-yaak",
+  "displayName": "Yaak Themes",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Default themes for Yaak",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev"
+  }
+}
diff --git a/plugins/themes-yaak/src/index.ts b/plugins/themes-yaak/src/index.ts
new file mode 100644
index 0000000..26879aa
--- /dev/null
+++ b/plugins/themes-yaak/src/index.ts
@@ -0,0 +1,116 @@
+import type { PluginDefinition } from "@yaakapp/api";
+import { andromeda } from "./themes/andromeda";
+import { atomOneDark } from "./themes/atom-one-dark";
+import { ayuDark, ayuLight, ayuMirage } from "./themes/ayu";
+import { blulocoDark, blulocoLight } from "./themes/bluloco";
+import {
+  catppuccinFrappe,
+  catppuccinLatte,
+  catppuccinMacchiato,
+  catppuccinMocha,
+} from "./themes/catppuccin";
+import { cobalt2 } from "./themes/cobalt2";
+import { dracula } from "./themes/dracula";
+import { everforestDark, everforestLight } from "./themes/everforest";
+import { fleetDark, fleetDarkPurple, fleetLight } from "./themes/fleet";
+import { githubDark, githubLight } from "./themes/github";
+import { githubDarkDimmed } from "./themes/github-dimmed";
+import { gruvbox } from "./themes/gruvbox";
+// Yaak themes
+import { highContrast, highContrastDark } from "./themes/high-contrast";
+import { horizon } from "./themes/horizon";
+import { hotdogStand } from "./themes/hotdog-stand";
+import { materialDarker } from "./themes/material-darker";
+import { materialOcean } from "./themes/material-ocean";
+import { materialPalenight } from "./themes/material-palenight";
+import {
+  monokaiPro,
+  monokaiProClassic,
+  monokaiProMachine,
+  monokaiProOctagon,
+  monokaiProRistretto,
+  monokaiProSpectrum,
+} from "./themes/monokai-pro";
+import { moonlight } from "./themes/moonlight";
+import { lightOwl, nightOwl } from "./themes/night-owl";
+import { noctisAzureus } from "./themes/noctis";
+import { nord, nordLight, nordLightBrighter } from "./themes/nord";
+// VSCode themes
+import { oneDarkPro } from "./themes/one-dark-pro";
+import { pandaSyntax } from "./themes/panda";
+import { relaxing } from "./themes/relaxing";
+import { rosePine, rosePineDawn, rosePineMoon } from "./themes/rose-pine";
+import { shadesOfPurple, shadesOfPurpleSuperDark } from "./themes/shades-of-purple";
+import { slackAubergine } from "./themes/slack";
+import { solarizedDark, solarizedLight } from "./themes/solarized";
+import { synthwave84 } from "./themes/synthwave-84";
+import { tokyoNight, tokyoNightDay, tokyoNightStorm } from "./themes/tokyo-night";
+import { triangle } from "./themes/triangle";
+import { vitesseDark, vitesseLight } from "./themes/vitesse";
+import { winterIsComing } from "./themes/winter-is-coming";
+
+export const plugin: PluginDefinition = {
+  themes: [
+    andromeda,
+    atomOneDark,
+    ayuDark,
+    ayuLight,
+    ayuMirage,
+    blulocoDark,
+    blulocoLight,
+    catppuccinFrappe,
+    catppuccinLatte,
+    catppuccinMacchiato,
+    catppuccinMocha,
+    cobalt2,
+    dracula,
+    everforestDark,
+    everforestLight,
+    fleetDark,
+    fleetDarkPurple,
+    fleetLight,
+    githubDark,
+    githubDarkDimmed,
+    githubLight,
+    gruvbox,
+    highContrast,
+    highContrastDark,
+    horizon,
+    hotdogStand,
+    lightOwl,
+    materialDarker,
+    materialOcean,
+    materialPalenight,
+    monokaiPro,
+    monokaiProClassic,
+    monokaiProMachine,
+    monokaiProOctagon,
+    monokaiProRistretto,
+    monokaiProSpectrum,
+    moonlight,
+    nightOwl,
+    noctisAzureus,
+    nord,
+    nordLight,
+    nordLightBrighter,
+    oneDarkPro,
+    pandaSyntax,
+    relaxing,
+    rosePine,
+    rosePineDawn,
+    rosePineMoon,
+    shadesOfPurple,
+    shadesOfPurpleSuperDark,
+    slackAubergine,
+    solarizedDark,
+    solarizedLight,
+    synthwave84,
+    tokyoNight,
+    tokyoNightDay,
+    tokyoNightStorm,
+    triangle,
+    vitesseDark,
+    vitesseLight,
+    winterIsComing,
+  ],
+};
diff --git a/plugins/themes-yaak/src/themes/andromeda.ts b/plugins/themes-yaak/src/themes/andromeda.ts
new file mode 100644
index 0000000..b762d5a
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/andromeda.ts
@@ -0,0 +1,47 @@
+import type { Theme } from "@yaakapp/api";
+
+export const andromeda: Theme = {
+  id: "andromeda",
+  label: "Andromeda",
+  dark: true,
+  base: {
+    surface: "hsl(251, 25%, 15%)",
+    surfaceHighlight: "hsl(251, 22%, 20%)",
+    text: "hsl(220, 10%, 85%)",
+    textSubtle: "hsl(220, 8%, 60%)",
+    textSubtlest: "hsl(220, 6%, 45%)",
+    primary: "hsl(293, 75%, 68%)",
+    secondary: "hsl(220, 8%, 60%)",
+    info: "hsl(180, 60%, 60%)",
+    success: "hsl(85, 60%, 55%)",
+    notice: "hsl(38, 100%, 65%)",
+    warning: "hsl(25, 95%, 60%)",
+    danger: "hsl(358, 80%, 60%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(251, 25%, 12%)",
+    },
+    sidebar: {
+      surface: "hsl(251, 23%, 13%)",
+      border: "hsl(251, 20%, 18%)",
+    },
+    appHeader: {
+      surface: "hsl(251, 25%, 11%)",
+      border: "hsl(251, 20%, 16%)",
+    },
+    responsePane: {
+      surface: "hsl(251, 23%, 13%)",
+      border: "hsl(251, 20%, 18%)",
+    },
+    button: {
+      primary: "hsl(293, 75%, 61%)",
+      secondary: "hsl(220, 8%, 53%)",
+      info: "hsl(180, 60%, 53%)",
+      success: "hsl(85, 60%, 48%)",
+      notice: "hsl(38, 100%, 58%)",
+      warning: "hsl(25, 95%, 53%)",
+      danger: "hsl(358, 80%, 53%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/atom-one-dark.ts b/plugins/themes-yaak/src/themes/atom-one-dark.ts
new file mode 100644
index 0000000..d449024
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/atom-one-dark.ts
@@ -0,0 +1,47 @@
+import type { Theme } from "@yaakapp/api";
+
+export const atomOneDark: Theme = {
+  id: "atom-one-dark",
+  label: "Atom One Dark",
+  dark: true,
+  base: {
+    surface: "hsl(220, 13%, 18%)",
+    surfaceHighlight: "hsl(219, 13%, 22%)",
+    text: "hsl(219, 14%, 71%)",
+    textSubtle: "hsl(220, 9%, 55%)",
+    textSubtlest: "hsl(220, 8%, 45%)",
+    primary: "hsl(286, 60%, 67%)",
+    secondary: "hsl(220, 9%, 55%)",
+    info: "hsl(207, 82%, 66%)",
+    success: "hsl(95, 38%, 62%)",
+    notice: "hsl(39, 67%, 69%)",
+    warning: "hsl(29, 54%, 61%)",
+    danger: "hsl(355, 65%, 65%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(220, 13%, 14%)",
+    },
+    sidebar: {
+      surface: "hsl(220, 13%, 16%)",
+      border: "hsl(220, 13%, 20%)",
+    },
+    appHeader: {
+      surface: "hsl(220, 13%, 12%)",
+      border: "hsl(220, 13%, 18%)",
+    },
+    responsePane: {
+      surface: "hsl(220, 13%, 16%)",
+      border: "hsl(220, 13%, 20%)",
+    },
+    button: {
+      primary: "hsl(286, 60%, 60%)",
+      secondary: "hsl(220, 9%, 48%)",
+      info: "hsl(207, 82%, 59%)",
+      success: "hsl(95, 38%, 55%)",
+      notice: "hsl(39, 67%, 62%)",
+      warning: "hsl(29, 54%, 54%)",
+      danger: "hsl(355, 65%, 58%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/ayu.ts b/plugins/themes-yaak/src/themes/ayu.ts
new file mode 100644
index 0000000..35f1915
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/ayu.ts
@@ -0,0 +1,122 @@
+import type { Theme } from "@yaakapp/api";
+
+export const ayuDark: Theme = {
+  id: "ayu-dark",
+  label: "Ayu Dark",
+  dark: true,
+  base: {
+    surface: "hsl(220, 25%, 10%)",
+    surfaceHighlight: "hsl(220, 20%, 15%)",
+    text: "hsl(210, 22%, 78%)",
+    textSubtle: "hsl(40, 13%, 50%)",
+    textSubtlest: "hsl(220, 10%, 40%)",
+    primary: "hsl(38, 100%, 56%)",
+    secondary: "hsl(210, 15%, 55%)",
+    info: "hsl(200, 80%, 60%)",
+    success: "hsl(100, 75%, 60%)",
+    notice: "hsl(38, 100%, 56%)",
+    warning: "hsl(25, 100%, 60%)",
+    danger: "hsl(345, 80%, 60%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(220, 25%, 8%)",
+    },
+    sidebar: {
+      surface: "hsl(220, 22%, 12%)",
+      border: "hsl(220, 20%, 16%)",
+    },
+    appHeader: {
+      surface: "hsl(220, 25%, 7%)",
+      border: "hsl(220, 20%, 13%)",
+    },
+    responsePane: {
+      surface: "hsl(220, 22%, 12%)",
+      border: "hsl(220, 20%, 16%)",
+    },
+    button: {
+      primary: "hsl(38, 100%, 50%)",
+      secondary: "hsl(210, 15%, 48%)",
+      info: "hsl(200, 80%, 53%)",
+      success: "hsl(100, 75%, 53%)",
+      notice: "hsl(38, 100%, 50%)",
+      warning: "hsl(25, 100%, 53%)",
+      danger: "hsl(345, 80%, 53%)",
+    },
+  },
+};
+
+export const ayuMirage: Theme = {
+  id: "ayu-mirage",
+  label: "Ayu Mirage",
+  dark: true,
+  base: {
+    surface: "hsl(226, 23%, 17%)",
+    surfaceHighlight: "hsl(226, 20%, 22%)",
+    text: "hsl(212, 15%, 81%)",
+    textSubtle: "hsl(212, 12%, 55%)",
+    textSubtlest: "hsl(212, 10%, 45%)",
+    primary: "hsl(38, 100%, 67%)",
+    secondary: "hsl(212, 12%, 55%)",
+    info: "hsl(200, 80%, 70%)",
+    success: "hsl(100, 50%, 68%)",
+    notice: "hsl(38, 100%, 67%)",
+    warning: "hsl(25, 100%, 70%)",
+    danger: "hsl(345, 80%, 70%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(226, 23%, 14%)",
+    },
+    sidebar: {
+      surface: "hsl(226, 22%, 15%)",
+      border: "hsl(226, 20%, 20%)",
+    },
+    appHeader: {
+      surface: "hsl(226, 23%, 12%)",
+      border: "hsl(226, 20%, 17%)",
+    },
+    responsePane: {
+      surface: "hsl(226, 22%, 15%)",
+      border: "hsl(226, 20%, 20%)",
+    },
+    button: {
+      primary: "hsl(38, 100%, 60%)",
+      info: "hsl(200, 80%, 63%)",
+      success: "hsl(100, 50%, 61%)",
+      notice: "hsl(38, 100%, 60%)",
+      warning: "hsl(25, 100%, 63%)",
+      danger: "hsl(345, 80%, 63%)",
+    },
+  },
+};
+
+export const ayuLight: Theme = {
+  id: "ayu-light",
+  label: "Ayu Light",
+  dark: false,
+  base: {
+    surface: "hsl(40, 22%, 97%)",
+    surfaceHighlight: "hsl(40, 20%, 93%)",
+    text: "hsl(214, 10%, 35%)",
+    textSubtle: "hsl(214, 8%, 50%)",
+    textSubtlest: "hsl(214, 6%, 60%)",
+    primary: "hsl(35, 100%, 45%)",
+    secondary: "hsl(214, 8%, 50%)",
+    info: "hsl(200, 75%, 45%)",
+    success: "hsl(100, 60%, 40%)",
+    notice: "hsl(35, 100%, 45%)",
+    warning: "hsl(22, 100%, 50%)",
+    danger: "hsl(345, 70%, 55%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(40, 20%, 95%)",
+      border: "hsl(40, 15%, 90%)",
+    },
+    appHeader: {
+      surface: "hsl(40, 20%, 93%)",
+      border: "hsl(40, 15%, 88%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/bluloco.ts b/plugins/themes-yaak/src/themes/bluloco.ts
new file mode 100644
index 0000000..62f39b3
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/bluloco.ts
@@ -0,0 +1,77 @@
+import type { Theme } from "@yaakapp/api";
+
+export const blulocoDark: Theme = {
+  id: "bluloco-dark",
+  label: "Bluloco Dark",
+  dark: true,
+  base: {
+    surface: "hsl(230, 20%, 14%)",
+    surfaceHighlight: "hsl(230, 17%, 19%)",
+    text: "hsl(220, 15%, 80%)",
+    textSubtle: "hsl(220, 10%, 55%)",
+    textSubtlest: "hsl(220, 8%, 42%)",
+    primary: "hsl(218, 85%, 65%)",
+    secondary: "hsl(220, 10%, 55%)",
+    info: "hsl(218, 85%, 65%)",
+    success: "hsl(95, 55%, 55%)",
+    notice: "hsl(37, 90%, 60%)",
+    warning: "hsl(22, 85%, 55%)",
+    danger: "hsl(355, 75%, 60%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(230, 20%, 11%)",
+    },
+    sidebar: {
+      surface: "hsl(230, 18%, 12%)",
+      border: "hsl(230, 16%, 17%)",
+    },
+    appHeader: {
+      surface: "hsl(230, 20%, 10%)",
+      border: "hsl(230, 16%, 15%)",
+    },
+    responsePane: {
+      surface: "hsl(230, 18%, 12%)",
+      border: "hsl(230, 16%, 17%)",
+    },
+    button: {
+      primary: "hsl(218, 85%, 58%)",
+      secondary: "hsl(220, 10%, 48%)",
+      info: "hsl(218, 85%, 58%)",
+      success: "hsl(95, 55%, 48%)",
+      notice: "hsl(37, 90%, 53%)",
+      warning: "hsl(22, 85%, 48%)",
+      danger: "hsl(355, 75%, 53%)",
+    },
+  },
+};
+
+export const blulocoLight: Theme = {
+  id: "bluloco-light",
+  label: "Bluloco Light",
+  dark: false,
+  base: {
+    surface: "hsl(0, 0%, 98%)",
+    surfaceHighlight: "hsl(220, 15%, 94%)",
+    text: "hsl(228, 18%, 30%)",
+    textSubtle: "hsl(228, 10%, 48%)",
+    textSubtlest: "hsl(228, 8%, 58%)",
+    primary: "hsl(218, 80%, 48%)",
+    secondary: "hsl(228, 10%, 48%)",
+    info: "hsl(218, 80%, 48%)",
+    success: "hsl(138, 55%, 40%)",
+    notice: "hsl(35, 85%, 45%)",
+    warning: "hsl(22, 80%, 48%)",
+    danger: "hsl(355, 70%, 48%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(220, 15%, 96%)",
+      border: "hsl(220, 12%, 90%)",
+    },
+    appHeader: {
+      surface: "hsl(220, 15%, 94%)",
+      border: "hsl(220, 12%, 88%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/catppuccin.ts b/plugins/themes-yaak/src/themes/catppuccin.ts
new file mode 100644
index 0000000..d5e31e0
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/catppuccin.ts
@@ -0,0 +1,165 @@
+import type { Theme } from "@yaakapp/api";
+
+export const catppuccinFrappe: Theme = {
+  id: "catppuccin-frappe",
+  label: "Catppuccin Frappé",
+  dark: true,
+  base: {
+    surface: "hsl(231,19%,20%)",
+    text: "hsl(227,70%,87%)",
+    textSubtle: "hsl(228,29%,73%)",
+    textSubtlest: "hsl(227,17%,58%)",
+    primary: "hsl(277,59%,76%)",
+    secondary: "hsl(228,39%,80%)",
+    info: "hsl(222,74%,74%)",
+    success: "hsl(96,44%,68%)",
+    notice: "hsl(40,62%,73%)",
+    warning: "hsl(20,79%,70%)",
+    danger: "hsl(359,68%,71%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(240,21%,12%)",
+    },
+    sidebar: {
+      surface: "hsl(229,19%,23%)",
+      border: "hsl(229,19%,27%)",
+    },
+    appHeader: {
+      surface: "hsl(229,20%,17%)",
+      border: "hsl(229,20%,25%)",
+    },
+    responsePane: {
+      surface: "hsl(229,19%,23%)",
+      border: "hsl(229,19%,27%)",
+    },
+    button: {
+      primary: "hsl(277,59%,68%)",
+      secondary: "hsl(228,39%,72%)",
+      info: "hsl(222,74%,67%)",
+      success: "hsl(96,44%,61%)",
+      notice: "hsl(40,62%,66%)",
+      warning: "hsl(20,79%,63%)",
+      danger: "hsl(359,68%,64%)",
+    },
+  },
+};
+
+export const catppuccinMacchiato: Theme = {
+  id: "catppuccin-macchiato",
+  label: "Catppuccin Macchiato",
+  dark: true,
+  base: {
+    surface: "hsl(233,23%,15%)",
+    text: "hsl(227,68%,88%)",
+    textSubtle: "hsl(227,27%,72%)",
+    textSubtlest: "hsl(228,15%,57%)",
+    primary: "hsl(267,83%,80%)",
+    secondary: "hsl(228,39%,80%)",
+    info: "hsl(220,83%,75%)",
+    success: "hsl(105,48%,72%)",
+    notice: "hsl(40,70%,78%)",
+    warning: "hsl(21,86%,73%)",
+    danger: "hsl(351,74%,73%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(240,21%,12%)",
+    },
+    sidebar: {
+      surface: "hsl(232,23%,18%)",
+      border: "hsl(231,23%,22%)",
+    },
+    appHeader: {
+      surface: "hsl(236,23%,12%)",
+      border: "hsl(236,23%,21%)",
+    },
+    responsePane: {
+      surface: "hsl(232,23%,18%)",
+      border: "hsl(231,23%,22%)",
+    },
+    button: {
+      primary: "hsl(267,82%,72%)",
+      secondary: "hsl(228,39%,72%)",
+      info: "hsl(220,83%,68%)",
+      success: "hsl(105,48%,65%)",
+      notice: "hsl(40,70%,70%)",
+      warning: "hsl(21,86%,66%)",
+      danger: "hsl(351,74%,66%)",
+    },
+  },
+};
+
+export const catppuccinMocha: Theme = {
+  id: "catppuccin-mocha",
+  label: "Catppuccin Mocha",
+  dark: true,
+  base: {
+    surface: "hsl(240,21%,12%)",
+    text: "hsl(226,64%,88%)",
+    textSubtle: "hsl(228,24%,72%)",
+    textSubtlest: "hsl(230,13%,55%)",
+    primary: "hsl(267,83%,80%)",
+    secondary: "hsl(227,35%,80%)",
+    info: "hsl(217,92%,76%)",
+    success: "hsl(115,54%,76%)",
+    notice: "hsl(41,86%,83%)",
+    warning: "hsl(23,92%,75%)",
+    danger: "hsl(343,81%,75%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(240,21%,12%)",
+    },
+    sidebar: {
+      surface: "hsl(240,21%,15%)",
+      border: "hsl(240,21%,19%)",
+    },
+    appHeader: {
+      surface: "hsl(240,23%,9%)",
+      border: "hsl(240,22%,18%)",
+    },
+    responsePane: {
+      surface: "hsl(240,21%,15%)",
+      border: "hsl(240,21%,19%)",
+    },
+    button: {
+      primary: "hsl(267,67%,65%)",
+      secondary: "hsl(227,28%,64%)",
+      info: "hsl(217,74%,61%)",
+      success: "hsl(115,43%,61%)",
+      notice: "hsl(41,69%,66%)",
+      warning: "hsl(23,74%,60%)",
+      danger: "hsl(343,65%,60%)",
+    },
+  },
+};
+
+export const catppuccinLatte: Theme = {
+  id: "catppuccin-latte",
+  label: "Catppuccin Latte",
+  dark: false,
+  base: {
+    surface: "hsl(220,23%,95%)",
+    text: "hsl(234,16%,35%)",
+    textSubtle: "hsl(233,10%,47%)",
+    textSubtlest: "hsl(231,10%,59%)",
+    primary: "hsl(266,85%,58%)",
+    secondary: "hsl(233,10%,47%)",
+    info: "hsl(231,97%,72%)",
+    success: "hsl(183,74%,35%)",
+    notice: "hsl(35,77%,49%)",
+    warning: "hsl(22,99%,52%)",
+    danger: "hsl(355,76%,59%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(220,22%,92%)",
+      border: "hsl(220,22%,87%)",
+    },
+    appHeader: {
+      surface: "hsl(220,21%,89%)",
+      border: "hsl(220,22%,87%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/cobalt2.ts b/plugins/themes-yaak/src/themes/cobalt2.ts
new file mode 100644
index 0000000..efabf65
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/cobalt2.ts
@@ -0,0 +1,47 @@
+import type { Theme } from "@yaakapp/api";
+
+export const cobalt2: Theme = {
+  id: "cobalt2",
+  label: "Cobalt2",
+  dark: true,
+  base: {
+    surface: "#193549",
+    surfaceHighlight: "#1f4662",
+    text: "#d2e1f1",
+    textSubtle: "#709ac8",
+    textSubtlest: "#55749e",
+    primary: "#ffc600",
+    secondary: "#819fc3",
+    info: "#0088FF",
+    success: "#3AD900",
+    notice: "#FFEE80",
+    warning: "#FF9D00",
+    danger: "#FF628C",
+  },
+  components: {
+    sidebar: {
+      surface: "#13283a",
+      border: "#102332",
+    },
+    input: {
+      border: "#1f4561",
+    },
+    appHeader: {
+      surface: "#13283a",
+      border: "#112636",
+    },
+    responsePane: {
+      surface: "#13283a",
+      border: "#112636",
+    },
+    button: {
+      primary: "#ffc600",
+      secondary: "#709ac8",
+      info: "#0088FF",
+      success: "#3AD900",
+      notice: "#ecdc6a",
+      warning: "#FF9D00",
+      danger: "#FF628C",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/dracula.ts b/plugins/themes-yaak/src/themes/dracula.ts
new file mode 100644
index 0000000..8f3693a
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/dracula.ts
@@ -0,0 +1,29 @@
+import type { Theme } from "@yaakapp/api";
+
+export const dracula: Theme = {
+  id: "dracula",
+  label: "Dracula",
+  dark: true,
+  base: {
+    surface: "hsl(231,15%,18%)",
+    surfaceHighlight: "hsl(230,15%,24%)",
+    text: "hsl(60,30%,96%)",
+    textSubtle: "hsl(232,14%,65%)",
+    textSubtlest: "hsl(232,14%,50%)",
+    primary: "hsl(265,89%,78%)",
+    secondary: "hsl(225,27%,51%)",
+    info: "hsl(191,97%,77%)",
+    success: "hsl(135,94%,65%)",
+    notice: "hsl(65,92%,76%)",
+    warning: "hsl(31,100%,71%)",
+    danger: "hsl(0,100%,67%)",
+  },
+  components: {
+    sidebar: {
+      backdrop: "hsl(230,15%,24%)",
+    },
+    appHeader: {
+      backdrop: "hsl(235,14%,15%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/everforest.ts b/plugins/themes-yaak/src/themes/everforest.ts
new file mode 100644
index 0000000..6a0c45a
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/everforest.ts
@@ -0,0 +1,77 @@
+import type { Theme } from "@yaakapp/api";
+
+export const everforestDark: Theme = {
+  id: "everforest-dark",
+  label: "Everforest Dark",
+  dark: true,
+  base: {
+    surface: "hsl(150, 8%, 18%)",
+    surfaceHighlight: "hsl(150, 7%, 22%)",
+    text: "hsl(45, 30%, 78%)",
+    textSubtle: "hsl(145, 8%, 55%)",
+    textSubtlest: "hsl(145, 6%, 42%)",
+    primary: "hsl(142, 35%, 60%)",
+    secondary: "hsl(145, 8%, 55%)",
+    info: "hsl(200, 35%, 65%)",
+    success: "hsl(142, 35%, 60%)",
+    notice: "hsl(46, 55%, 68%)",
+    warning: "hsl(24, 55%, 65%)",
+    danger: "hsl(358, 50%, 68%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(150, 8%, 15%)",
+    },
+    sidebar: {
+      surface: "hsl(150, 7%, 16%)",
+      border: "hsl(150, 6%, 20%)",
+    },
+    appHeader: {
+      surface: "hsl(150, 8%, 14%)",
+      border: "hsl(150, 6%, 18%)",
+    },
+    responsePane: {
+      surface: "hsl(150, 7%, 16%)",
+      border: "hsl(150, 6%, 20%)",
+    },
+    button: {
+      primary: "hsl(142, 35%, 53%)",
+      secondary: "hsl(145, 8%, 48%)",
+      info: "hsl(200, 35%, 58%)",
+      success: "hsl(142, 35%, 53%)",
+      notice: "hsl(46, 55%, 61%)",
+      warning: "hsl(24, 55%, 58%)",
+      danger: "hsl(358, 50%, 61%)",
+    },
+  },
+};
+
+export const everforestLight: Theme = {
+  id: "everforest-light",
+  label: "Everforest Light",
+  dark: false,
+  base: {
+    surface: "hsl(40, 32%, 93%)",
+    surfaceHighlight: "hsl(40, 28%, 89%)",
+    text: "hsl(135, 8%, 35%)",
+    textSubtle: "hsl(135, 6%, 45%)",
+    textSubtlest: "hsl(135, 4%, 55%)",
+    primary: "hsl(128, 30%, 45%)",
+    secondary: "hsl(135, 6%, 45%)",
+    info: "hsl(200, 35%, 45%)",
+    success: "hsl(128, 30%, 45%)",
+    notice: "hsl(45, 70%, 40%)",
+    warning: "hsl(22, 60%, 48%)",
+    danger: "hsl(355, 55%, 50%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(40, 30%, 91%)",
+      border: "hsl(40, 25%, 86%)",
+    },
+    appHeader: {
+      surface: "hsl(40, 30%, 89%)",
+      border: "hsl(40, 25%, 84%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/fleet.ts b/plugins/themes-yaak/src/themes/fleet.ts
new file mode 100644
index 0000000..fd63ae5
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/fleet.ts
@@ -0,0 +1,173 @@
+import type { Theme } from "@yaakapp/api";
+
+export const fleetLight: Theme = {
+  id: "fleet-light",
+  label: "Fleet Light",
+  dark: false,
+  base: {
+    surface: "#FFFFFF",
+    surfaceHighlight: "#F8F8F9",
+    surfaceActive: "#EEEFF0",
+    border: "#18191B33",
+    text: "#090909",
+    textSubtle: "#6E747B",
+    textSubtlest: "#898E94",
+    primary: "#1D61BA",
+    secondary: "#6E747B",
+    info: "#4B8DEC",
+    success: "#169068",
+    notice: "#B07203",
+    warning: "#B07203",
+    danger: "#E1465E",
+  },
+  components: {
+    sidebar: {
+      surface: "#EEEFF0",
+      border: "#18191B33",
+    },
+    appHeader: {
+      surface: "#EEEFF0",
+      border: "#18191B33",
+    },
+    responsePane: {
+      surface: "#FFFFFF",
+      border: "#18191B33",
+    },
+    dialog: {
+      surface: "#FFFFFF",
+      border: "#18191B33",
+    },
+    button: {
+      surface: "#F8F8F9",
+      text: "#090909",
+      primary: "#2A7DEB",
+      secondary: "#6E747B",
+      info: "#4B8DEC",
+      success: "#169068",
+      notice: "#B07203",
+      warning: "#B07203",
+      danger: "#E1465E",
+    },
+    editor: {
+      primary: "#5511BF",
+      secondary: "#A31D8D",
+      info: "#14646E",
+      success: "#086E14",
+      notice: "#616605",
+      warning: "#747576",
+      danger: "#1749BD",
+    },
+  },
+};
+
+export const fleetDarkPurple: Theme = {
+  id: "fleet-dark-purple",
+  label: "Fleet Dark Purple",
+  dark: true,
+  base: {
+    surface: "#1C1827",
+    surfaceHighlight: "#262136",
+    surfaceActive: "#3E3852",
+    border: "#3E3852",
+    text: "#E0E1E4",
+    textSubtle: "#E0E1E480",
+    textSubtlest: "#E0E1E44D",
+    primary: "#B174D9",
+    secondary: "#E0E1E480",
+    info: "#4B8DEC",
+    success: "#169068",
+    notice: "#B07203",
+    warning: "#B07203",
+    danger: "#E1465E",
+  },
+  components: {
+    appHeader: {
+      surface: "#13101B",
+      border: "#3E3852",
+    },
+    responsePane: {
+      surface: "#1C1827",
+      border: "#3E3852",
+    },
+    dialog: {
+      surface: "#262136",
+      border: "#3E3852",
+    },
+    button: {
+      surface: "#262136",
+      text: "#E0E1E4",
+      primary: "#A660D4",
+      secondary: "#E0E1E480",
+      info: "#4B8DEC",
+      success: "#169068",
+      notice: "#B07203",
+      warning: "#B07203",
+      danger: "#E1465E",
+    },
+    editor: {
+      primary: "#C7A65D",
+      secondary: "#93A6F5",
+      info: "#E09B70",
+      success: "#62A362",
+      notice: "#85A658",
+      warning: "#7e7d86",
+      danger: "#4DACF0",
+    },
+  },
+};
+
+export const fleetDark: Theme = {
+  id: "fleet-dark",
+  label: "Fleet Dark",
+  dark: true,
+  base: {
+    surface: "#18191B",
+    surfaceHighlight: "#252629",
+    surfaceActive: "#3E4147",
+    border: "#3E4147",
+    text: "#E0E1E4",
+    textSubtle: "#898E94",
+    textSubtlest: "#646B71",
+    primary: "#4B8DEC",
+    secondary: "#898E94",
+    info: "#4B8DEC",
+    success: "#169068",
+    notice: "#B07203",
+    warning: "#B07203",
+    danger: "#E1465E",
+  },
+  components: {
+    appHeader: {
+      surface: "#090909",
+      border: "#3E4147",
+    },
+    responsePane: {
+      surface: "#18191B",
+      border: "#3E4147",
+    },
+    dialog: {
+      surface: "#252629",
+      border: "#3E4147",
+    },
+    button: {
+      surface: "#252629",
+      text: "#E0E1E4",
+      primary: "#2A7DEB",
+      secondary: "#898E94",
+      info: "#4B8DEC",
+      success: "#169068",
+      notice: "#B07203",
+      warning: "#B07203",
+      danger: "#E1465E",
+    },
+    editor: {
+      primary: "#EBC88D",
+      secondary: "#AF9CFF",
+      info: "#82D2CE",
+      success: "#A8C5A0",
+      notice: "#C7A65D",
+      warning: "#909194",
+      danger: "#87C3FF",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/github-dimmed.ts b/plugins/themes-yaak/src/themes/github-dimmed.ts
new file mode 100644
index 0000000..0a1e25a
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/github-dimmed.ts
@@ -0,0 +1,46 @@
+import type { Theme } from "@yaakapp/api";
+
+export const githubDarkDimmed: Theme = {
+  id: "github-dark-dimmed",
+  label: "GitHub Dark Dimmed",
+  dark: true,
+  base: {
+    surface: "hsl(215, 15%, 16%)",
+    surfaceHighlight: "hsl(215, 13%, 20%)",
+    text: "hsl(212, 15%, 78%)",
+    textSubtle: "hsl(212, 10%, 55%)",
+    textSubtlest: "hsl(212, 8%, 42%)",
+    primary: "hsl(212, 80%, 65%)",
+    secondary: "hsl(212, 10%, 55%)",
+    info: "hsl(212, 80%, 65%)",
+    success: "hsl(140, 50%, 50%)",
+    notice: "hsl(42, 75%, 55%)",
+    warning: "hsl(27, 80%, 55%)",
+    danger: "hsl(355, 70%, 55%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(215, 15%, 13%)",
+    },
+    sidebar: {
+      surface: "hsl(215, 14%, 14%)",
+      border: "hsl(215, 12%, 19%)",
+    },
+    appHeader: {
+      surface: "hsl(215, 15%, 12%)",
+      border: "hsl(215, 12%, 17%)",
+    },
+    responsePane: {
+      surface: "hsl(215, 14%, 14%)",
+      border: "hsl(215, 12%, 19%)",
+    },
+    button: {
+      primary: "hsl(212, 80%, 58%)",
+      info: "hsl(212, 80%, 58%)",
+      success: "hsl(140, 50%, 45%)",
+      notice: "hsl(42, 75%, 48%)",
+      warning: "hsl(27, 80%, 48%)",
+      danger: "hsl(355, 70%, 48%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/github.ts b/plugins/themes-yaak/src/themes/github.ts
new file mode 100644
index 0000000..59fd041
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/github.ts
@@ -0,0 +1,55 @@
+import type { Theme } from "@yaakapp/api";
+
+export const githubDark: Theme = {
+  id: "github-dark",
+  label: "GitHub",
+  dark: true,
+  base: {
+    surface: "hsl(213,30%,7%)",
+    surfaceHighlight: "hsl(213,16%,13%)",
+    text: "hsl(212,27%,89%)",
+    textSubtle: "hsl(212,9%,57%)",
+    textSubtlest: "hsl(217,8%,45%)",
+    border: "hsl(215,21%,11%)",
+    primary: "hsl(262,78%,74%)",
+    secondary: "hsl(217,8%,50%)",
+    info: "hsl(215,84%,64%)",
+    success: "hsl(129,48%,52%)",
+    notice: "hsl(39,71%,58%)",
+    warning: "hsl(22,83%,60%)",
+    danger: "hsl(3,83%,65%)",
+  },
+  components: {
+    button: {
+      primary: "hsl(262,79%,71%)",
+      secondary: "hsl(217,8%,45%)",
+      info: "hsl(215,84%,60%)",
+      success: "hsl(129,48%,47%)",
+      notice: "hsl(39,71%,53%)",
+      warning: "hsl(22,83%,56%)",
+      danger: "hsl(3,83%,61%)",
+    },
+  },
+};
+
+export const githubLight: Theme = {
+  id: "github-light",
+  label: "GitHub",
+  dark: false,
+  base: {
+    surface: "hsl(0,0%,100%)",
+    surfaceHighlight: "hsl(210,29%,94%)",
+    text: "hsl(213,13%,14%)",
+    textSubtle: "hsl(212,9%,43%)",
+    textSubtlest: "hsl(203,8%,55%)",
+    border: "hsl(210,15%,92%)",
+    borderSubtle: "hsl(210,15%,92%)",
+    primary: "hsl(261,69%,59%)",
+    secondary: "hsl(212,8%,47%)",
+    info: "hsl(212,92%,48%)",
+    success: "hsl(137,66%,32%)",
+    notice: "hsl(40,100%,40%)",
+    warning: "hsl(24,100%,44%)",
+    danger: "hsl(356,71%,48%)",
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/gruvbox.ts b/plugins/themes-yaak/src/themes/gruvbox.ts
new file mode 100644
index 0000000..ad6d3b9
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/gruvbox.ts
@@ -0,0 +1,21 @@
+import type { Theme } from "@yaakapp/api";
+
+export const gruvbox: Theme = {
+  id: "gruvbox",
+  label: "Gruvbox",
+  dark: true,
+  base: {
+    surface: "hsl(0,0%,16%)",
+    surfaceHighlight: "hsl(20,3%,19%)",
+    text: "hsl(53,74%,91%)",
+    textSubtle: "hsl(39,24%,66%)",
+    textSubtlest: "hsl(30,12%,51%)",
+    primary: "hsl(344,47%,68%)",
+    secondary: "hsl(157,16%,58%)",
+    info: "hsl(104,35%,62%)",
+    success: "hsl(61,66%,44%)",
+    notice: "hsl(42,95%,58%)",
+    warning: "hsl(27,99%,55%)",
+    danger: "hsl(6,96%,59%)",
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/high-contrast.ts b/plugins/themes-yaak/src/themes/high-contrast.ts
new file mode 100644
index 0000000..2d94824
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/high-contrast.ts
@@ -0,0 +1,46 @@
+import type { Theme } from "@yaakapp/api";
+
+export const highContrast: Theme = {
+  id: "high-contrast",
+  label: "High Contrast Light",
+  dark: false,
+  base: {
+    surface: "white",
+    surfaceHighlight: "hsl(218,24%,93%)",
+    text: "black",
+    textSubtle: "hsl(217,24%,40%)",
+    textSubtlest: "hsl(217,24%,40%)",
+    border: "hsl(217,22%,50%)",
+    borderSubtle: "hsl(217,22%,60%)",
+    primary: "hsl(267,67%,47%)",
+    secondary: "hsl(218,18%,53%)",
+    info: "hsl(206,100%,36%)",
+    success: "hsl(155,100%,26%)",
+    notice: "hsl(45,100%,31%)",
+    warning: "hsl(30,99%,34%)",
+    danger: "hsl(334,100%,35%)",
+  },
+};
+
+export const highContrastDark: Theme = {
+  id: "high-contrast-dark",
+  label: "High Contrast Dark",
+  dark: true,
+  base: {
+    surface: "hsl(0,0%,0%)",
+    surfaceHighlight: "hsl(0,0%,20%)",
+    text: "hsl(0,0%,100%)",
+    textSubtle: "hsl(0,0%,90%)",
+    textSubtlest: "hsl(0,0%,80%)",
+    selection: "hsl(276,100%,30%)",
+    surfaceActive: "hsl(276,100%,30%)",
+    border: "hsl(0,0%,60%)",
+    primary: "hsl(266,100%,85%)",
+    secondary: "hsl(242,20%,72%)",
+    info: "hsl(208,100%,83%)",
+    success: "hsl(150,100%,63%)",
+    notice: "hsl(49,100%,77%)",
+    warning: "hsl(28,100%,73%)",
+    danger: "hsl(343,100%,79%)",
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/horizon.ts b/plugins/themes-yaak/src/themes/horizon.ts
new file mode 100644
index 0000000..2d2ec63
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/horizon.ts
@@ -0,0 +1,47 @@
+import type { Theme } from "@yaakapp/api";
+
+export const horizon: Theme = {
+  id: "horizon",
+  label: "Horizon",
+  dark: true,
+  base: {
+    surface: "hsl(220, 16%, 13%)",
+    surfaceHighlight: "hsl(220, 14%, 18%)",
+    text: "hsl(220, 15%, 85%)",
+    textSubtle: "hsl(220, 10%, 55%)",
+    textSubtlest: "hsl(220, 8%, 45%)",
+    primary: "hsl(5, 85%, 68%)",
+    secondary: "hsl(220, 10%, 55%)",
+    info: "hsl(217, 70%, 68%)",
+    success: "hsl(92, 50%, 60%)",
+    notice: "hsl(34, 92%, 70%)",
+    warning: "hsl(20, 90%, 65%)",
+    danger: "hsl(355, 80%, 65%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(220, 16%, 10%)",
+    },
+    sidebar: {
+      surface: "hsl(220, 14%, 15%)",
+      border: "hsl(220, 14%, 19%)",
+    },
+    appHeader: {
+      surface: "hsl(220, 16%, 11%)",
+      border: "hsl(220, 14%, 17%)",
+    },
+    responsePane: {
+      surface: "hsl(220, 14%, 15%)",
+      border: "hsl(220, 14%, 19%)",
+    },
+    button: {
+      primary: "hsl(5, 85%, 61%)",
+      secondary: "hsl(224,8%,53%)",
+      info: "hsl(217, 70%, 61%)",
+      success: "hsl(92, 50%, 53%)",
+      notice: "hsl(34, 92%, 63%)",
+      warning: "hsl(20, 90%, 58%)",
+      danger: "hsl(355, 80%, 58%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/hotdog-stand.ts b/plugins/themes-yaak/src/themes/hotdog-stand.ts
new file mode 100644
index 0000000..faa05b6
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/hotdog-stand.ts
@@ -0,0 +1,58 @@
+import type { Theme } from "@yaakapp/api";
+
+export const hotdogStand: Theme = {
+  id: "hotdog-stand",
+  label: "Hotdog Stand",
+  dark: true,
+  base: {
+    surface: "hsl(0,100%,50%)",
+    surfaceHighlight: "hsl(0,0%,0%)",
+    text: "hsl(0,0%,100%)",
+    textSubtle: "hsl(0,0%,100%)",
+    textSubtlest: "hsl(60,100%,50%)",
+    border: "hsl(0,0%,0%)",
+    primary: "hsl(60,100%,50%)",
+    secondary: "hsl(60,100%,50%)",
+    info: "hsl(60,100%,50%)",
+    success: "hsl(60,100%,50%)",
+    notice: "hsl(60,100%,50%)",
+    warning: "hsl(60,100%,50%)",
+    danger: "hsl(60,100%,50%)",
+  },
+  components: {
+    appHeader: {
+      surface: "hsl(0,0%,0%)",
+      text: "hsl(0,0%,100%)",
+      textSubtle: "hsl(60,100%,50%)",
+      textSubtlest: "hsl(0,100%,50%)",
+    },
+    menu: {
+      surface: "hsl(0,0%,0%)",
+      border: "hsl(0,100%,50%)",
+      surfaceHighlight: "hsl(0,100%,50%)",
+      text: "hsl(0,0%,100%)",
+      textSubtle: "hsl(60,100%,50%)",
+      textSubtlest: "hsl(60,100%,50%)",
+    },
+    button: {
+      surface: "hsl(0,0%,0%)",
+      text: "hsl(0,0%,100%)",
+      primary: "hsl(0,0%,0%)",
+      secondary: "hsl(0,0%,100%)",
+      info: "hsl(0,0%,0%)",
+      success: "hsl(60,100%,50%)",
+      notice: "hsl(60,100%,50%)",
+      warning: "hsl(0,0%,0%)",
+      danger: "hsl(0,100%,50%)",
+    },
+    editor: {
+      primary: "hsl(0,0%,100%)",
+      secondary: "hsl(0,0%,100%)",
+      info: "hsl(0,0%,100%)",
+      success: "hsl(0,0%,100%)",
+      notice: "hsl(60,100%,50%)",
+      warning: "hsl(0,0%,100%)",
+      danger: "hsl(0,0%,100%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/material-darker.ts b/plugins/themes-yaak/src/themes/material-darker.ts
new file mode 100644
index 0000000..3d566a8
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/material-darker.ts
@@ -0,0 +1,39 @@
+import type { Theme } from "@yaakapp/api";
+
+export const materialDarker: Theme = {
+  id: "material-darker",
+  label: "Material Darker",
+  dark: true,
+  base: {
+    surface: "hsl(0, 0%, 13%)",
+    surfaceHighlight: "hsl(0, 0%, 18%)",
+    text: "hsl(0, 0%, 93%)",
+    textSubtle: "hsl(0, 0%, 65%)",
+    textSubtlest: "hsl(0, 0%, 50%)",
+    primary: "hsl(262, 100%, 75%)",
+    secondary: "hsl(0, 0%, 60%)",
+    info: "hsl(224, 100%, 75%)",
+    success: "hsl(84, 60%, 73%)",
+    notice: "hsl(43, 100%, 70%)",
+    warning: "hsl(14, 85%, 70%)",
+    danger: "hsl(1, 77%, 59%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(0, 0%, 11%)",
+      border: "hsl(0, 0%, 16%)",
+    },
+    appHeader: {
+      surface: "hsl(0, 0%, 9%)",
+      border: "hsl(0, 0%, 14%)",
+    },
+    button: {
+      primary: "hsl(262, 100%, 68%)",
+      info: "hsl(224, 100%, 68%)",
+      success: "hsl(84, 60%, 66%)",
+      notice: "hsl(43, 100%, 63%)",
+      warning: "hsl(14, 85%, 63%)",
+      danger: "hsl(1, 77%, 52%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/material-ocean.ts b/plugins/themes-yaak/src/themes/material-ocean.ts
new file mode 100644
index 0000000..dd4ee5b
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/material-ocean.ts
@@ -0,0 +1,43 @@
+import type { Theme } from "@yaakapp/api";
+
+export const materialOcean: Theme = {
+  id: "material-ocean",
+  label: "Material Ocean",
+  dark: true,
+  base: {
+    surface: "hsl(230, 25%, 14%)",
+    surfaceHighlight: "hsl(230, 20%, 18%)",
+    text: "hsl(220, 53%, 85%)",
+    textSubtle: "hsl(228, 12%, 54%)",
+    textSubtlest: "hsl(228, 12%, 42%)",
+    primary: "hsl(262, 100%, 75%)",
+    secondary: "hsl(228, 12%, 60%)",
+    info: "hsl(224, 100%, 75%)",
+    success: "hsl(84, 60%, 73%)",
+    notice: "hsl(43, 100%, 70%)",
+    warning: "hsl(14, 85%, 70%)",
+    danger: "hsl(1, 77%, 59%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(230, 25%, 12%)",
+      border: "hsl(230, 20%, 18%)",
+    },
+    appHeader: {
+      surface: "hsl(230, 25%, 10%)",
+      border: "hsl(230, 20%, 16%)",
+    },
+    responsePane: {
+      surface: "hsl(230, 25%, 12%)",
+      border: "hsl(230, 20%, 18%)",
+    },
+    button: {
+      primary: "hsl(262, 100%, 68%)",
+      info: "hsl(224, 100%, 68%)",
+      success: "hsl(84, 60%, 66%)",
+      notice: "hsl(43, 100%, 63%)",
+      warning: "hsl(14, 85%, 63%)",
+      danger: "hsl(1, 77%, 52%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/material-palenight.ts b/plugins/themes-yaak/src/themes/material-palenight.ts
new file mode 100644
index 0000000..d652f8f
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/material-palenight.ts
@@ -0,0 +1,45 @@
+import type { Theme } from "@yaakapp/api";
+
+export const materialPalenight: Theme = {
+  id: "material-palenight",
+  label: "Material Palenight",
+  dark: true,
+  base: {
+    surface: "#292D3E",
+    surfaceHighlight: "#313850",
+    text: "#BFC7D5",
+    textSubtle: "#697098",
+    textSubtlest: "#4E5579",
+    primary: "#c792ea",
+    secondary: "#697098",
+    info: "#82AAFF",
+    success: "#C3E88D",
+    notice: "#FFCB6B",
+    warning: "#F78C6C",
+    danger: "#ff5572",
+  },
+  components: {
+    dialog: {
+      surface: "#232635",
+    },
+    sidebar: {
+      surface: "#292D3E",
+    },
+    appHeader: {
+      surface: "#282C3D",
+    },
+    responsePane: {
+      surface: "#313850",
+      border: "#3a3f58",
+    },
+    button: {
+      primary: "#c792ea",
+      secondary: "#697098",
+      info: "#82AAFF",
+      success: "#C3E88D",
+      notice: "#FFCB6B",
+      warning: "#F78C6C",
+      danger: "#ff5572",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/monokai-pro.ts b/plugins/themes-yaak/src/themes/monokai-pro.ts
new file mode 100644
index 0000000..bbec71f
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/monokai-pro.ts
@@ -0,0 +1,217 @@
+import type { Theme } from "@yaakapp/api";
+
+export const monokaiPro: Theme = {
+  id: "monokai-pro",
+  label: "Monokai Pro",
+  dark: true,
+  base: {
+    surface: "hsl(285,5%,17%)",
+    text: "hsl(60,25%,98%)",
+    textSubtle: "hsl(0,1%,75%)",
+    textSubtlest: "hsl(300,0%,57%)",
+    primary: "hsl(250,77%,78%)",
+    secondary: "hsl(0,1%,75%)",
+    info: "hsl(186,71%,69%)",
+    success: "hsl(90,59%,66%)",
+    notice: "hsl(45,100%,70%)",
+    warning: "hsl(20,96%,70%)",
+    danger: "hsl(345,100%,69%)",
+  },
+  components: {
+    appHeader: {
+      surface: "hsl(300,5%,13%)",
+      text: "hsl(0,1%,75%)",
+      textSubtle: "hsl(300,0%,57%)",
+      textSubtlest: "hsl(300,1%,44%)",
+    },
+    button: {
+      primary: "hsl(250,77%,70%)",
+      secondary: "hsl(0,1%,68%)",
+      info: "hsl(186,71%,62%)",
+      success: "hsl(90,59%,59%)",
+      notice: "hsl(45,100%,63%)",
+      warning: "hsl(20,96%,63%)",
+      danger: "hsl(345,100%,62%)",
+    },
+  },
+};
+
+export const monokaiProClassic: Theme = {
+  id: "monokai-pro-classic",
+  label: "Monokai Pro Classic",
+  dark: true,
+  base: {
+    surface: "hsl(70,8%,15%)",
+    text: "hsl(69,100%,97%)",
+    textSubtle: "hsl(65,9%,73%)",
+    textSubtlest: "hsl(66,4%,55%)",
+    primary: "hsl(261,100%,75%)",
+    secondary: "hsl(202,8%,72%)",
+    info: "hsl(190,81%,67%)",
+    success: "hsl(80,76%,53%)",
+    notice: "hsl(54,70%,68%)",
+    warning: "hsl(32,98%,56%)",
+    danger: "hsl(338,95%,56%)",
+  },
+  components: {
+    appHeader: {
+      surface: "hsl(72,9%,11%)",
+      text: "hsl(202,8%,72%)",
+      textSubtle: "hsl(213,4%,48%)",
+      textSubtlest: "hsl(223,6%,44%)",
+    },
+    button: {
+      primary: "hsl(261,100%,68%)",
+      secondary: "hsl(202,8%,65%)",
+      info: "hsl(190,81%,60%)",
+      success: "hsl(80,76%,48%)",
+      notice: "hsl(54,71%,61%)",
+      warning: "hsl(32,98%,50%)",
+      danger: "hsl(338,95%,50%)",
+    },
+  },
+};
+
+export const monokaiProMachine: Theme = {
+  id: "monokai-pro-machine",
+  label: "Monokai Pro Machine",
+  dark: true,
+  base: {
+    surface: "hsl(200,16%,18%)",
+    text: "hsl(173,24%,93%)",
+    textSubtle: "hsl(185,6%,57%)",
+    textSubtlest: "hsl(189,6%,45%)",
+    primary: "hsl(258,86%,80%)",
+    secondary: "hsl(175,9%,75%)",
+    info: "hsl(194,81%,72%)",
+    success: "hsl(98,67%,69%)",
+    notice: "hsl(52,100%,72%)",
+    warning: "hsl(28,100%,72%)",
+    danger: "hsl(353,100%,71%)",
+  },
+  components: {
+    appHeader: {
+      surface: "hsl(196,16%,14%)",
+      text: "hsl(202,8%,72%)",
+      textSubtle: "hsl(213,4%,48%)",
+      textSubtlest: "hsl(223,6%,44%)",
+    },
+    button: {
+      primary: "hsl(258,86%,72%)",
+      secondary: "hsl(175,9%,68%)",
+      info: "hsl(194,80%,65%)",
+      success: "hsl(98,67%,62%)",
+      notice: "hsl(52,100%,65%)",
+      warning: "hsl(28,100%,65%)",
+      danger: "hsl(353,100%,64%)",
+    },
+  },
+};
+
+export const monokaiProOctagon: Theme = {
+  id: "monokai-pro-octagon",
+  label: "Monokai Pro Octagon",
+  dark: true,
+  base: {
+    surface: "hsl(233,18%,19%)",
+    text: "hsl(173,24%,93%)",
+    textSubtle: "hsl(202,8%,72%)",
+    textSubtlest: "hsl(213,4%,48%)",
+    primary: "hsl(292,30%,70%)",
+    secondary: "hsl(202,8%,72%)",
+    info: "hsl(155,37%,72%)",
+    success: "hsl(75,60%,61%)",
+    notice: "hsl(44,100%,71%)",
+    warning: "hsl(23,100%,68%)",
+    danger: "hsl(352,100%,70%)",
+  },
+  components: {
+    appHeader: {
+      surface: "hsl(235,18%,14%)",
+      text: "hsl(202,8%,72%)",
+      textSubtle: "hsl(213,4%,48%)",
+      textSubtlest: "hsl(223,6%,44%)",
+    },
+    button: {
+      primary: "hsl(292,26%,63%)",
+      secondary: "hsl(201,7%,65%)",
+      info: "hsl(155,33%,65%)",
+      success: "hsl(75,54%,55%)",
+      notice: "hsl(44,90%,64%)",
+      warning: "hsl(23,90%,61%)",
+      danger: "hsl(352,90%,63%)",
+    },
+  },
+};
+
+export const monokaiProRistretto: Theme = {
+  id: "monokai-pro-ristretto",
+  label: "Monokai Pro Ristretto",
+  dark: true,
+  base: {
+    surface: "hsl(0,9%,16%)",
+    text: "hsl(351,100%,97%)",
+    textSubtle: "hsl(355,9%,74%)",
+    textSubtlest: "hsl(354,4%,56%)",
+    primary: "hsl(239,63%,79%)",
+    secondary: "hsl(355,9%,74%)",
+    info: "hsl(170,53%,69%)",
+    success: "hsl(88,57%,66%)",
+    notice: "hsl(41,92%,70%)",
+    warning: "hsl(13,85%,70%)",
+    danger: "hsl(349,97%,70%)",
+  },
+  components: {
+    appHeader: {
+      surface: "hsl(0,8%,12%)",
+      text: "hsl(355,9%,74%)",
+      textSubtle: "hsl(354,4%,56%)",
+      textSubtlest: "hsl(353,4%,43%)",
+    },
+    button: {
+      primary: "hsl(239,63%,71%)",
+      secondary: "hsl(355,9%,67%)",
+      info: "hsl(170,53%,62%)",
+      success: "hsl(88,57%,59%)",
+      notice: "hsl(41,92%,63%)",
+      warning: "hsl(13,86%,63%)",
+      danger: "hsl(349,97%,63%)",
+    },
+  },
+};
+
+export const monokaiProSpectrum: Theme = {
+  id: "monokai-pro-spectrum",
+  label: "Monokai Pro Spectrum",
+  dark: true,
+  base: {
+    surface: "hsl(0,0%,13%)",
+    text: "hsl(266,100%,97%)",
+    textSubtle: "hsl(264,7%,73%)",
+    textSubtlest: "hsl(266,3%,55%)",
+    primary: "hsl(247,61%,72%)",
+    secondary: "hsl(264,7%,73%)",
+    info: "hsl(188,74%,63%)",
+    success: "hsl(133,54%,66%)",
+    notice: "hsl(51,96%,69%)",
+    warning: "hsl(23,98%,66%)",
+    danger: "hsl(343,96%,68%)",
+  },
+  components: {
+    appHeader: {
+      surface: "hsl(0,0%,10%)",
+      text: "hsl(264,7%,73%)",
+      textSubtle: "hsl(266,3%,55%)",
+      textSubtlest: "hsl(264,2%,41%)",
+    },
+    button: {
+      primary: "hsl(247,61%,65%)",
+      secondary: "hsl(264,7%,66%)",
+      info: "hsl(188,74%,57%)",
+      success: "hsl(133,54%,59%)",
+      notice: "hsl(51,96%,62%)",
+      warning: "hsl(23,98%,59%)",
+      danger: "hsl(343,96%,61%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/moonlight.ts b/plugins/themes-yaak/src/themes/moonlight.ts
new file mode 100644
index 0000000..bb1e1b8
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/moonlight.ts
@@ -0,0 +1,28 @@
+import type { Theme } from "@yaakapp/api";
+
+export const moonlight: Theme = {
+  id: "moonlight",
+  label: "Moonlight",
+  dark: true,
+  base: {
+    surface: "hsl(234,23%,17%)",
+    text: "hsl(225,71%,90%)",
+    textSubtle: "hsl(230,28%,62%)",
+    textSubtlest: "hsl(232,26%,43%)",
+    primary: "hsl(262,100%,82%)",
+    secondary: "hsl(232,18%,65%)",
+    info: "hsl(217,100%,74%)",
+    success: "hsl(174,66%,54%)",
+    notice: "hsl(35,100%,73%)",
+    warning: "hsl(17,100%,71%)",
+    danger: "hsl(356,100%,73%)",
+  },
+  components: {
+    appHeader: {
+      surface: "hsl(233,23%,15%)",
+    },
+    sidebar: {
+      surface: "hsl(233,23%,15%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/night-owl.ts b/plugins/themes-yaak/src/themes/night-owl.ts
new file mode 100644
index 0000000..ea18e2b
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/night-owl.ts
@@ -0,0 +1,78 @@
+import type { Theme } from "@yaakapp/api";
+
+export const nightOwl: Theme = {
+  id: "night-owl",
+  label: "Night Owl",
+  dark: true,
+  base: {
+    surface: "hsl(207, 95%, 8%)",
+    surfaceHighlight: "hsl(207, 50%, 14%)",
+    text: "hsl(213, 50%, 90%)",
+    textSubtle: "hsl(213, 30%, 70%)",
+    textSubtlest: "hsl(213, 20%, 50%)",
+    border: "hsl(207, 50%, 14%)",
+    primary: "hsl(261, 51%, 51%)",
+    secondary: "hsl(213, 30%, 60%)",
+    info: "hsl(220, 100%, 75%)",
+    success: "hsl(145, 100%, 43%)",
+    notice: "hsl(62, 61%, 71%)",
+    warning: "hsl(4, 90%, 58%)",
+    danger: "hsl(4, 90%, 58%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(207, 95%, 6%)",
+    },
+    sidebar: {
+      surface: "hsl(207, 95%, 8%)",
+      border: "hsl(207, 50%, 14%)",
+    },
+    appHeader: {
+      surface: "hsl(207, 95%, 5%)",
+      border: "hsl(207, 50%, 12%)",
+    },
+    responsePane: {
+      surface: "hsl(207, 70%, 10%)",
+      border: "hsl(207, 50%, 14%)",
+    },
+    button: {
+      primary: "hsl(261, 51%, 45%)",
+      secondary: "hsl(213, 30%, 60%)",
+      info: "hsl(220, 100%, 68%)",
+      success: "hsl(145, 100%, 38%)",
+      notice: "hsl(62, 61%, 64%)",
+      warning: "hsl(4, 90%, 52%)",
+      danger: "hsl(4, 90%, 52%)",
+    },
+  },
+};
+
+export const lightOwl: Theme = {
+  id: "light-owl",
+  label: "Light Owl",
+  dark: false,
+  base: {
+    surface: "hsl(0, 0%, 98%)",
+    surfaceHighlight: "hsl(210, 18%, 94%)",
+    text: "hsl(224, 26%, 27%)",
+    textSubtle: "hsl(224, 15%, 45%)",
+    textSubtlest: "hsl(224, 10%, 55%)",
+    primary: "hsl(283, 100%, 41%)",
+    secondary: "hsl(224, 15%, 50%)",
+    info: "hsl(219, 75%, 40%)",
+    success: "hsl(145, 70%, 35%)",
+    notice: "hsl(36, 95%, 40%)",
+    warning: "hsl(0, 55%, 55%)",
+    danger: "hsl(0, 55%, 50%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(210, 20%, 96%)",
+      border: "hsl(210, 15%, 90%)",
+    },
+    appHeader: {
+      surface: "hsl(210, 20%, 94%)",
+      border: "hsl(210, 15%, 88%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/noctis.ts b/plugins/themes-yaak/src/themes/noctis.ts
new file mode 100644
index 0000000..4d1c54b
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/noctis.ts
@@ -0,0 +1,47 @@
+import type { Theme } from "@yaakapp/api";
+
+export const noctisAzureus: Theme = {
+  id: "noctis-azureus",
+  label: "Noctis Azureus",
+  dark: true,
+  base: {
+    surface: "hsl(210, 35%, 14%)",
+    surfaceHighlight: "hsl(210, 30%, 19%)",
+    text: "hsl(180, 45%, 85%)",
+    textSubtle: "hsl(180, 25%, 60%)",
+    textSubtlest: "hsl(180, 18%, 45%)",
+    primary: "hsl(175, 60%, 55%)",
+    secondary: "hsl(200, 70%, 65%)",
+    info: "hsl(200, 70%, 65%)",
+    success: "hsl(85, 55%, 60%)",
+    notice: "hsl(45, 90%, 60%)",
+    warning: "hsl(25, 85%, 58%)",
+    danger: "hsl(355, 75%, 62%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(210, 35%, 11%)",
+    },
+    sidebar: {
+      surface: "hsl(210, 33%, 12%)",
+      border: "hsl(210, 30%, 17%)",
+    },
+    appHeader: {
+      surface: "hsl(210, 35%, 10%)",
+      border: "hsl(210, 30%, 15%)",
+    },
+    responsePane: {
+      surface: "hsl(210, 33%, 12%)",
+      border: "hsl(210, 30%, 17%)",
+    },
+    button: {
+      primary: "hsl(175, 60%, 48%)",
+      secondary: "hsl(200, 70%, 58%)",
+      info: "hsl(200, 70%, 58%)",
+      success: "hsl(85, 55%, 53%)",
+      notice: "hsl(45, 90%, 53%)",
+      warning: "hsl(25, 85%, 51%)",
+      danger: "hsl(355, 75%, 55%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/nord.ts b/plugins/themes-yaak/src/themes/nord.ts
new file mode 100644
index 0000000..ba3b443
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/nord.ts
@@ -0,0 +1,85 @@
+import type { Theme } from "@yaakapp/api";
+
+export const nord: Theme = {
+  id: "nord",
+  label: "Nord",
+  dark: true,
+  base: {
+    surface: "hsl(220,16%,22%)",
+    surfaceHighlight: "hsl(220,14%,28%)",
+    text: "hsl(220,28%,93%)",
+    textSubtle: "hsl(220,26%,90%)",
+    textSubtlest: "hsl(220,24%,86%)",
+    primary: "hsl(193,38%,68%)",
+    secondary: "hsl(210,34%,63%)",
+    info: "hsl(174,25%,69%)",
+    success: "hsl(89,26%,66%)",
+    notice: "hsl(40,66%,73%)",
+    warning: "hsl(17,48%,64%)",
+    danger: "hsl(353,43%,56%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(220,16%,22%)",
+    },
+    appHeader: {
+      surface: "hsl(220,14%,28%)",
+    },
+  },
+};
+
+export const nordLight: Theme = {
+  id: "nord-light",
+  label: "Nord Light",
+  dark: false,
+  base: {
+    surface: "#eceff4",
+    surfaceHighlight: "#e5e9f0",
+    text: "#24292e",
+    textSubtle: "#444d56",
+    textSubtlest: "#586069",
+    primary: "#2188ff",
+    secondary: "#586069",
+    info: "#005cc5",
+    success: "#28a745",
+    notice: "#e36209",
+    warning: "#e36209",
+    danger: "#cb2431",
+  },
+  components: {
+    sidebar: {
+      surface: "#e5e9f0",
+    },
+    appHeader: {
+      surface: "#e5e9f0",
+    },
+  },
+};
+
+export const nordLightBrighter: Theme = {
+  id: "nord-light-brighter",
+  label: "Nord Light Brighter",
+  dark: false,
+  base: {
+    surface: "#ffffff",
+    surfaceHighlight: "#f6f8fa",
+    text: "#24292e",
+    textSubtle: "#444d56",
+    textSubtlest: "#586069",
+    primary: "#2188ff",
+    secondary: "#586069",
+    info: "#005cc5",
+    success: "#28a745",
+    notice: "#e36209",
+    warning: "#e36209",
+    danger: "#cb2431",
+  },
+  components: {
+    sidebar: {
+      surface: "#f6f8fa",
+    },
+    appHeader: {
+      surface: "#f6f8fa",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/one-dark-pro.ts b/plugins/themes-yaak/src/themes/one-dark-pro.ts
new file mode 100644
index 0000000..d8c3e1a
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/one-dark-pro.ts
@@ -0,0 +1,44 @@
+import type { Theme } from "@yaakapp/api";
+
+export const oneDarkPro: Theme = {
+  id: "one-dark-pro",
+  label: "One Dark Pro",
+  dark: true,
+  base: {
+    surface: "hsl(220, 13%, 18%)",
+    surfaceHighlight: "hsl(220, 13%, 22%)",
+    text: "hsl(219, 14%, 71%)",
+    textSubtle: "hsl(219, 10%, 53%)",
+    textSubtlest: "hsl(220, 9%, 45%)",
+    primary: "hsl(286, 60%, 67%)",
+    secondary: "hsl(219, 14%, 60%)",
+    info: "hsl(207, 82%, 66%)",
+    success: "hsl(95, 38%, 62%)",
+    notice: "hsl(39, 67%, 69%)",
+    warning: "hsl(29, 54%, 61%)",
+    danger: "hsl(355, 65%, 65%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(220, 13%, 16%)",
+      border: "hsl(220, 13%, 20%)",
+    },
+    appHeader: {
+      surface: "hsl(220, 13%, 14%)",
+      border: "hsl(220, 13%, 20%)",
+    },
+    responsePane: {
+      surface: "hsl(220, 13%, 16%)",
+      border: "hsl(220, 13%, 20%)",
+    },
+    button: {
+      primary: "hsl(286, 60%, 60%)",
+      secondary: "hsl(219, 14%, 53%)",
+      info: "hsl(207, 82%, 59%)",
+      success: "hsl(95, 38%, 55%)",
+      notice: "hsl(39, 67%, 62%)",
+      warning: "hsl(29, 54%, 54%)",
+      danger: "hsl(355, 65%, 58%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/panda.ts b/plugins/themes-yaak/src/themes/panda.ts
new file mode 100644
index 0000000..aa2fc60
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/panda.ts
@@ -0,0 +1,47 @@
+import type { Theme } from "@yaakapp/api";
+
+export const pandaSyntax: Theme = {
+  id: "panda",
+  label: "Panda Syntax",
+  dark: true,
+  base: {
+    surface: "hsl(225, 15%, 15%)",
+    surfaceHighlight: "hsl(225, 12%, 20%)",
+    text: "hsl(0, 0%, 90%)",
+    textSubtle: "hsl(0, 0%, 65%)",
+    textSubtlest: "hsl(0, 0%, 50%)",
+    primary: "hsl(353, 95%, 70%)",
+    secondary: "hsl(0, 0%, 65%)",
+    info: "hsl(200, 85%, 65%)",
+    success: "hsl(175, 90%, 65%)",
+    notice: "hsl(40, 100%, 65%)",
+    warning: "hsl(40, 100%, 65%)",
+    danger: "hsl(0, 90%, 65%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(225, 15%, 12%)",
+    },
+    sidebar: {
+      surface: "hsl(225, 14%, 13%)",
+      border: "hsl(225, 12%, 18%)",
+    },
+    appHeader: {
+      surface: "hsl(225, 15%, 11%)",
+      border: "hsl(225, 12%, 16%)",
+    },
+    responsePane: {
+      surface: "hsl(225, 14%, 13%)",
+      border: "hsl(225, 12%, 18%)",
+    },
+    button: {
+      primary: "hsl(353, 95%, 63%)",
+      secondary: "hsl(0, 0%, 58%)",
+      info: "hsl(200, 85%, 58%)",
+      success: "hsl(175, 90%, 58%)",
+      notice: "hsl(40, 100%, 58%)",
+      warning: "hsl(40, 100%, 58%)",
+      danger: "hsl(0, 90%, 58%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/relaxing.ts b/plugins/themes-yaak/src/themes/relaxing.ts
new file mode 100644
index 0000000..360b206
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/relaxing.ts
@@ -0,0 +1,18 @@
+import type { Theme } from "@yaakapp/api";
+
+export const relaxing: Theme = {
+  id: "relaxing",
+  label: "Relaxing",
+  dark: true,
+  base: {
+    surface: "hsl(267,33%,17%)",
+    text: "hsl(275,49%,92%)",
+    primary: "hsl(267,84%,81%)",
+    secondary: "hsl(227,35%,80%)",
+    info: "hsl(217,92%,76%)",
+    success: "hsl(115,54%,76%)",
+    notice: "hsl(41,86%,83%)",
+    warning: "hsl(23,92%,75%)",
+    danger: "hsl(343,81%,75%)",
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/rose-pine.ts b/plugins/themes-yaak/src/themes/rose-pine.ts
new file mode 100644
index 0000000..f799b95
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/rose-pine.ts
@@ -0,0 +1,111 @@
+import type { Theme } from "@yaakapp/api";
+
+export const rosePine: Theme = {
+  id: "rose-pine",
+  label: "Rosé Pine",
+  dark: true,
+  base: {
+    surface: "hsl(249,22%,12%)",
+    text: "hsl(245,50%,91%)",
+    textSubtle: "hsl(248,15%,61%)",
+    textSubtlest: "hsl(249,12%,47%)",
+    primary: "hsl(267,57%,78%)",
+    secondary: "hsl(249,12%,47%)",
+    info: "hsl(199,49%,60%)",
+    success: "hsl(180,43%,73%)",
+    notice: "hsl(35,88%,72%)",
+    warning: "hsl(1,74%,79%)",
+    danger: "hsl(343,76%,68%)",
+  },
+  components: {
+    responsePane: {
+      surface: "hsl(247,23%,15%)",
+    },
+    sidebar: {
+      surface: "hsl(247,23%,15%)",
+    },
+    menu: {
+      surface: "hsl(248,21%,26%)",
+      textSubtle: "hsl(248,15%,66%)",
+      textSubtlest: "hsl(249,12%,52%)",
+      border: "hsl(248,21%,35%)",
+      borderSubtle: "hsl(248,21%,33%)",
+    },
+  },
+};
+
+export const rosePineMoon: Theme = {
+  id: "rose-pine-moon",
+  label: "Rosé Pine Moon",
+  dark: true,
+  base: {
+    surface: "hsl(246,24%,17%)",
+    text: "hsl(245,50%,91%)",
+    textSubtle: "hsl(248,15%,61%)",
+    textSubtlest: "hsl(249,12%,47%)",
+    primary: "hsl(267,57%,78%)",
+    secondary: "hsl(248,15%,61%)",
+    info: "hsl(197,48%,60%)",
+    success: "hsl(197,48%,60%)",
+    notice: "hsl(35,88%,72%)",
+    warning: "hsl(2,66%,75%)",
+    danger: "hsl(343,76%,68%)",
+  },
+  components: {
+    responsePane: {
+      surface: "hsl(247,24%,20%)",
+    },
+    sidebar: {
+      surface: "hsl(247,24%,20%)",
+    },
+    menu: {
+      surface: "hsl(248,21%,26%)",
+      textSubtle: "hsl(248,15%,61%)",
+      textSubtlest: "hsl(249,12%,55%)",
+      border: "hsl(248,21%,35%)",
+      borderSubtle: "hsl(248,21%,31%)",
+    },
+  },
+};
+
+export const rosePineDawn: Theme = {
+  id: "rose-pine-dawn",
+  label: "Rosé Pine Dawn",
+  dark: false,
+  base: {
+    surface: "hsl(32,57%,95%)",
+    border: "hsl(10,9%,86%)",
+    surfaceHighlight: "hsl(25,35%,93%)",
+    text: "hsl(248,19%,40%)",
+    textSubtle: "hsl(248,12%,52%)",
+    textSubtlest: "hsl(257,9%,61%)",
+    primary: "hsl(271,27%,56%)",
+    secondary: "hsl(249,12%,47%)",
+    info: "hsl(197,52%,36%)",
+    success: "hsl(188,31%,45%)",
+    notice: "hsl(34,64%,49%)",
+    warning: "hsl(2,47%,64%)",
+    danger: "hsl(343,35%,55%)",
+  },
+  components: {
+    responsePane: {
+      border: "hsl(20,12%,90%)",
+    },
+    sidebar: {
+      border: "hsl(20,12%,90%)",
+    },
+    appHeader: {
+      border: "hsl(20,12%,90%)",
+    },
+    input: {
+      border: "hsl(10,9%,86%)",
+    },
+    dialog: {
+      border: "hsl(20,12%,90%)",
+    },
+    menu: {
+      surface: "hsl(28,40%,92%)",
+      border: "hsl(10,9%,86%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/shades-of-purple.ts b/plugins/themes-yaak/src/themes/shades-of-purple.ts
new file mode 100644
index 0000000..f297397
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/shades-of-purple.ts
@@ -0,0 +1,99 @@
+import type { Theme } from "@yaakapp/api";
+
+export const shadesOfPurple: Theme = {
+  id: "shades-of-purple",
+  label: "Shades of Purple",
+  dark: true,
+  base: {
+    surface: "#2D2B55",
+    surfaceHighlight: "#1F1F41",
+    text: "#FFFFFF",
+    textSubtle: "#A599E9",
+    textSubtlest: "#7E72C4",
+    primary: "#FAD000",
+    secondary: "#A599E9",
+    info: "#80FFBB",
+    success: "#3AD900",
+    notice: "#FAD000",
+    warning: "#FF9D00",
+    danger: "#EC3A37F5",
+  },
+  components: {
+    dialog: {
+      surface: "#1E1E3F",
+    },
+    sidebar: {
+      surface: "#222244",
+      border: "#1E1E3F",
+    },
+    input: {
+      border: "#7E72C4",
+    },
+    appHeader: {
+      surface: "#1E1E3F",
+      border: "#1E1E3F",
+    },
+    responsePane: {
+      surface: "hsl(240,33%,20%)",
+      border: "hsl(240,33%,20%)",
+    },
+    button: {
+      primary: "#FAD000",
+      secondary: "#A599E9",
+      info: "#80FFBB",
+      success: "#3AD900",
+      notice: "#FAD000",
+      warning: "#FF9D00",
+      danger: "#EC3A37F5",
+    },
+  },
+};
+
+export const shadesOfPurpleSuperDark: Theme = {
+  id: "shades-of-purple-super-dark",
+  label: "Shades of Purple (Super Dark)",
+  dark: true,
+  base: {
+    surface: "#191830",
+    surfaceHighlight: "#1F1E3A",
+    text: "#FFFFFF",
+    textSubtle: "#A599E9",
+    textSubtlest: "#7E72C4",
+    primary: "#FAD000",
+    secondary: "#A599E9",
+    info: "#80FFBB",
+    success: "#3AD900",
+    notice: "#FAD000",
+    warning: "#FF9D00",
+    danger: "#EC3A37F5",
+  },
+  components: {
+    dialog: {
+      surface: "#15152b",
+    },
+    input: {
+      border: "#2D2B55",
+    },
+    sidebar: {
+      surface: "#131327",
+      border: "#131327",
+    },
+    appHeader: {
+      surface: "#15152a",
+      border: "#15152a",
+    },
+    responsePane: {
+      surface: "#131327",
+      border: "#131327",
+    },
+    button: {
+      primary: "#FAD000",
+      secondary: "#A599E9",
+      info: "#80FFBB",
+      success: "#3AD900",
+      notice: "#FAD000",
+      warning: "#FF9D00",
+      danger: "#EC3A37F5",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/slack.ts b/plugins/themes-yaak/src/themes/slack.ts
new file mode 100644
index 0000000..08539c3
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/slack.ts
@@ -0,0 +1,47 @@
+import type { Theme } from "@yaakapp/api";
+
+export const slackAubergine: Theme = {
+  id: "slack-aubergine",
+  label: "Slack Aubergine",
+  dark: true,
+  base: {
+    surface: "hsl(270, 25%, 18%)",
+    surfaceHighlight: "hsl(270, 22%, 24%)",
+    text: "hsl(0, 0%, 100%)",
+    textSubtle: "hsl(270, 15%, 75%)",
+    textSubtlest: "hsl(270, 12%, 58%)",
+    primary: "hsl(165, 100%, 40%)",
+    secondary: "hsl(270, 12%, 65%)",
+    info: "hsl(195, 95%, 55%)",
+    success: "hsl(145, 80%, 50%)",
+    notice: "hsl(43, 100%, 55%)",
+    warning: "hsl(43, 100%, 50%)",
+    danger: "hsl(0, 80%, 55%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(270, 25%, 14%)",
+    },
+    sidebar: {
+      surface: "hsl(270, 23%, 15%)",
+      border: "hsl(270, 22%, 22%)",
+    },
+    appHeader: {
+      surface: "hsl(270, 25%, 13%)",
+      border: "hsl(270, 22%, 20%)",
+    },
+    responsePane: {
+      surface: "hsl(270, 23%, 15%)",
+      border: "hsl(270, 22%, 22%)",
+    },
+    button: {
+      primary: "hsl(165, 100%, 35%)",
+      secondary: "hsl(270, 12%, 58%)",
+      info: "hsl(195, 95%, 48%)",
+      success: "hsl(145, 80%, 45%)",
+      notice: "hsl(43, 100%, 48%)",
+      warning: "hsl(43, 100%, 45%)",
+      danger: "hsl(0, 80%, 48%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/solarized.ts b/plugins/themes-yaak/src/themes/solarized.ts
new file mode 100644
index 0000000..ca9c7d8
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/solarized.ts
@@ -0,0 +1,77 @@
+import type { Theme } from "@yaakapp/api";
+
+export const solarizedDark: Theme = {
+  id: "solarized-dark",
+  label: "Solarized Dark",
+  dark: true,
+  base: {
+    surface: "#002b36",
+    surfaceHighlight: "#073642",
+    text: "#839496",
+    textSubtle: "#657b83",
+    textSubtlest: "#586e75",
+    primary: "#268bd2",
+    secondary: "#657b83",
+    info: "#268bd2",
+    success: "#859900",
+    notice: "#b58900",
+    warning: "#cb4b16",
+    danger: "#dc322f",
+  },
+  components: {
+    dialog: {
+      surface: "#002b36",
+    },
+    sidebar: {
+      surface: "#073642",
+      border: "hsl(192,81%,17%)",
+    },
+    appHeader: {
+      surface: "#002b36",
+      border: "hsl(192,81%,16%)",
+    },
+    responsePane: {
+      surface: "#073642",
+      border: "hsl(192,81%,17%)",
+    },
+    button: {
+      primary: "#268bd2",
+      secondary: "#657b83",
+      info: "#268bd2",
+      success: "#859900",
+      notice: "#b58900",
+      warning: "#cb4b16",
+      danger: "#dc322f",
+    },
+  },
+};
+
+export const solarizedLight: Theme = {
+  id: "solarized-light",
+  label: "Solarized Light",
+  dark: false,
+  base: {
+    surface: "#fdf6e3",
+    surfaceHighlight: "#eee8d5",
+    text: "#657b83",
+    textSubtle: "#839496",
+    textSubtlest: "#93a1a1",
+    primary: "#268bd2",
+    secondary: "#839496",
+    info: "#268bd2",
+    success: "#859900",
+    notice: "#b58900",
+    warning: "#cb4b16",
+    danger: "#dc322f",
+  },
+  components: {
+    sidebar: {
+      surface: "#eee8d5",
+      border: "#d3cbb7",
+    },
+    appHeader: {
+      surface: "#eee8d5",
+      border: "#d3cbb7",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/synthwave-84.ts b/plugins/themes-yaak/src/themes/synthwave-84.ts
new file mode 100644
index 0000000..85febf9
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/synthwave-84.ts
@@ -0,0 +1,53 @@
+import type { Theme } from "@yaakapp/api";
+
+export const synthwave84: Theme = {
+  id: "synthwave-84",
+  label: "SynthWave '84",
+  dark: true,
+  base: {
+    surface: "hsl(253, 45%, 15%)",
+    surfaceHighlight: "hsl(253, 40%, 20%)",
+    text: "hsl(300, 50%, 90%)",
+    textSubtle: "hsl(280, 25%, 65%)",
+    textSubtlest: "hsl(280, 20%, 50%)",
+    primary: "hsl(320, 100%, 75%)",
+    secondary: "hsl(280, 20%, 60%)",
+    info: "hsl(177, 100%, 55%)",
+    success: "hsl(83, 100%, 60%)",
+    notice: "hsl(57, 100%, 60%)",
+    warning: "hsl(30, 100%, 60%)",
+    danger: "hsl(340, 100%, 65%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(253, 42%, 18%)",
+      border: "hsl(253, 40%, 22%)",
+    },
+    appHeader: {
+      surface: "hsl(253, 45%, 11%)",
+      border: "hsl(253, 40%, 18%)",
+    },
+    responsePane: {
+      surface: "hsl(253, 42%, 18%)",
+      border: "hsl(253, 40%, 22%)",
+    },
+    button: {
+      primary: "hsl(320, 100%, 68%)",
+      secondary: "hsl(280, 20%, 53%)",
+      info: "hsl(177, 100%, 48%)",
+      success: "hsl(83, 100%, 53%)",
+      notice: "hsl(57, 100%, 53%)",
+      warning: "hsl(30, 100%, 53%)",
+      danger: "hsl(340, 100%, 58%)",
+    },
+    editor: {
+      primary: "hsl(177, 100%, 55%)",
+      secondary: "hsl(280, 20%, 60%)",
+      info: "hsl(320, 100%, 75%)",
+      success: "hsl(83, 100%, 60%)",
+      notice: "hsl(57, 100%, 60%)",
+      warning: "hsl(30, 100%, 60%)",
+      danger: "hsl(340, 100%, 65%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/tokyo-night.ts b/plugins/themes-yaak/src/themes/tokyo-night.ts
new file mode 100644
index 0000000..e99bf2a
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/tokyo-night.ts
@@ -0,0 +1,121 @@
+import type { Theme } from "@yaakapp/api";
+
+export const tokyoNight: Theme = {
+  id: "tokyo-night",
+  label: "Tokyo Night",
+  dark: true,
+  base: {
+    surface: "hsl(235, 21%, 13%)",
+    surfaceHighlight: "hsl(235, 18%, 18%)",
+    text: "hsl(229, 28%, 76%)",
+    textSubtle: "hsl(232, 18%, 52%)",
+    textSubtlest: "hsl(234, 16%, 40%)",
+    primary: "hsl(266, 100%, 78%)",
+    secondary: "hsl(232, 18%, 52%)",
+    info: "hsl(217, 100%, 73%)",
+    success: "hsl(158, 57%, 63%)",
+    notice: "hsl(40, 67%, 65%)",
+    warning: "hsl(25, 75%, 58%)",
+    danger: "hsl(358, 100%, 70%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(235, 21%, 11%)",
+    },
+    sidebar: {
+      surface: "hsl(235, 21%, 11%)",
+      border: "hsl(235, 18%, 16%)",
+    },
+    appHeader: {
+      surface: "hsl(235, 21%, 9%)",
+      border: "hsl(235, 18%, 14%)",
+    },
+    responsePane: {
+      surface: "hsl(235, 21%, 11%)",
+      border: "hsl(235, 18%, 16%)",
+    },
+    button: {
+      primary: "hsl(266, 100%, 71%)",
+      info: "hsl(217, 100%, 66%)",
+      success: "hsl(158, 57%, 56%)",
+      notice: "hsl(40, 67%, 58%)",
+      warning: "hsl(25, 75%, 52%)",
+      danger: "hsl(358, 100%, 63%)",
+    },
+  },
+};
+
+export const tokyoNightStorm: Theme = {
+  id: "tokyo-night-storm",
+  label: "Tokyo Night Storm",
+  dark: true,
+  base: {
+    surface: "hsl(232, 25%, 17%)",
+    surfaceHighlight: "hsl(232, 22%, 22%)",
+    text: "hsl(229, 28%, 76%)",
+    textSubtle: "hsl(232, 18%, 52%)",
+    textSubtlest: "hsl(234, 16%, 40%)",
+    primary: "hsl(266, 100%, 78%)",
+    secondary: "hsl(232, 18%, 52%)",
+    info: "hsl(217, 100%, 73%)",
+    success: "hsl(158, 57%, 63%)",
+    notice: "hsl(40, 67%, 65%)",
+    warning: "hsl(25, 75%, 58%)",
+    danger: "hsl(358, 100%, 70%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(232, 25%, 14%)",
+    },
+    sidebar: {
+      surface: "hsl(232, 25%, 14%)",
+      border: "hsl(232, 22%, 20%)",
+    },
+    appHeader: {
+      surface: "hsl(232, 25%, 12%)",
+      border: "hsl(232, 22%, 18%)",
+    },
+    responsePane: {
+      surface: "hsl(232, 25%, 14%)",
+      border: "hsl(232, 22%, 20%)",
+    },
+    button: {
+      primary: "hsl(266, 100%, 71%)",
+      info: "hsl(217, 100%, 66%)",
+      success: "hsl(158, 57%, 56%)",
+      notice: "hsl(40, 67%, 58%)",
+      warning: "hsl(25, 75%, 52%)",
+      danger: "hsl(358, 100%, 63%)",
+    },
+  },
+};
+
+export const tokyoNightDay: Theme = {
+  id: "tokyo-night-day",
+  label: "Tokyo Night Day",
+  dark: false,
+  base: {
+    surface: "hsl(212, 100%, 98%)",
+    surfaceHighlight: "hsl(212, 60%, 93%)",
+    text: "hsl(233, 26%, 27%)",
+    textSubtle: "hsl(232, 18%, 45%)",
+    textSubtlest: "hsl(232, 12%, 55%)",
+    primary: "hsl(290, 80%, 45%)",
+    secondary: "hsl(232, 18%, 50%)",
+    info: "hsl(217, 88%, 52%)",
+    success: "hsl(160, 75%, 35%)",
+    notice: "hsl(41, 80%, 40%)",
+    warning: "hsl(20, 80%, 48%)",
+    danger: "hsl(359, 65%, 48%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(212, 60%, 95%)",
+      border: "hsl(212, 40%, 88%)",
+    },
+    appHeader: {
+      surface: "hsl(212, 60%, 93%)",
+      border: "hsl(212, 40%, 86%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/triangle.ts b/plugins/themes-yaak/src/themes/triangle.ts
new file mode 100644
index 0000000..e7db0fd
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/triangle.ts
@@ -0,0 +1,44 @@
+import type { Theme } from "@yaakapp/api";
+
+export const triangle: Theme = {
+  id: "triangle",
+  dark: true,
+  label: "Triangle",
+  base: {
+    surface: "rgb(0,0,0)",
+    surfaceHighlight: "rgb(21,21,21)",
+    surfaceActive: "rgb(31,31,31)",
+    text: "rgb(237,237,237)",
+    textSubtle: "rgb(161,161,161)",
+    textSubtlest: "rgb(115,115,115)",
+    border: "rgb(31,31,31)",
+    primary: "rgb(196,114,251)",
+    secondary: "rgb(161,161,161)",
+    info: "rgb(71,168,255)",
+    success: "rgb(0,202,81)",
+    notice: "rgb(255,175,0)",
+    warning: "#FF4C8D",
+    danger: "#fd495a",
+  },
+  components: {
+    editor: {
+      danger: "#FF4C8D",
+      warning: "#fd495a",
+    },
+    dialog: {
+      surface: "rgb(10,10,10)",
+      border: "rgb(31,31,31)",
+    },
+    sidebar: {
+      border: "rgb(31,31,31)",
+    },
+    responsePane: {
+      surface: "rgb(10,10,10)",
+      border: "rgb(31,31,31)",
+    },
+    appHeader: {
+      surface: "rgb(10,10,10)",
+      border: "rgb(31,31,31)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/vitesse.ts b/plugins/themes-yaak/src/themes/vitesse.ts
new file mode 100644
index 0000000..fa52cc4
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/vitesse.ts
@@ -0,0 +1,77 @@
+import type { Theme } from "@yaakapp/api";
+
+export const vitesseDark: Theme = {
+  id: "vitesse-dark",
+  label: "Vitesse Dark",
+  dark: true,
+  base: {
+    surface: "hsl(220, 13%, 10%)",
+    surfaceHighlight: "hsl(220, 12%, 15%)",
+    text: "hsl(220, 10%, 80%)",
+    textSubtle: "hsl(220, 8%, 55%)",
+    textSubtlest: "hsl(220, 6%, 42%)",
+    primary: "hsl(143, 50%, 55%)",
+    secondary: "hsl(220, 8%, 55%)",
+    info: "hsl(214, 60%, 65%)",
+    success: "hsl(143, 50%, 55%)",
+    notice: "hsl(45, 65%, 65%)",
+    warning: "hsl(30, 60%, 60%)",
+    danger: "hsl(355, 60%, 60%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(220, 13%, 7%)",
+    },
+    sidebar: {
+      surface: "hsl(220, 12%, 8%)",
+      border: "hsl(220, 10%, 14%)",
+    },
+    appHeader: {
+      surface: "hsl(220, 13%, 6%)",
+      border: "hsl(220, 10%, 12%)",
+    },
+    responsePane: {
+      surface: "hsl(220, 12%, 8%)",
+      border: "hsl(220, 10%, 14%)",
+    },
+    button: {
+      primary: "hsl(143, 50%, 48%)",
+      secondary: "hsl(220, 8%, 48%)",
+      info: "hsl(214, 60%, 58%)",
+      success: "hsl(143, 50%, 48%)",
+      notice: "hsl(45, 65%, 58%)",
+      warning: "hsl(30, 60%, 53%)",
+      danger: "hsl(355, 60%, 53%)",
+    },
+  },
+};
+
+export const vitesseLight: Theme = {
+  id: "vitesse-light",
+  label: "Vitesse Light",
+  dark: false,
+  base: {
+    surface: "hsl(0, 0%, 100%)",
+    surfaceHighlight: "hsl(40, 20%, 96%)",
+    text: "hsl(0, 0%, 24%)",
+    textSubtle: "hsl(0, 0%, 45%)",
+    textSubtlest: "hsl(0, 0%, 55%)",
+    primary: "hsl(143, 40%, 40%)",
+    secondary: "hsl(0, 0%, 45%)",
+    info: "hsl(214, 50%, 48%)",
+    success: "hsl(143, 40%, 40%)",
+    notice: "hsl(40, 60%, 42%)",
+    warning: "hsl(25, 60%, 48%)",
+    danger: "hsl(345, 50%, 48%)",
+  },
+  components: {
+    sidebar: {
+      surface: "hsl(40, 20%, 97%)",
+      border: "hsl(40, 15%, 92%)",
+    },
+    appHeader: {
+      surface: "hsl(40, 20%, 95%)",
+      border: "hsl(40, 15%, 90%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/src/themes/winter-is-coming.ts b/plugins/themes-yaak/src/themes/winter-is-coming.ts
new file mode 100644
index 0000000..97409cf
--- /dev/null
+++ b/plugins/themes-yaak/src/themes/winter-is-coming.ts
@@ -0,0 +1,47 @@
+import type { Theme } from "@yaakapp/api";
+
+export const winterIsComing: Theme = {
+  id: "winter-is-coming",
+  label: "Winter is Coming",
+  dark: true,
+  base: {
+    surface: "hsl(216, 50%, 10%)",
+    surfaceHighlight: "hsl(216, 40%, 15%)",
+    text: "hsl(210, 20%, 88%)",
+    textSubtle: "hsl(210, 15%, 60%)",
+    textSubtlest: "hsl(210, 10%, 45%)",
+    primary: "hsl(176, 85%, 60%)",
+    secondary: "hsl(210, 15%, 60%)",
+    info: "hsl(210, 65%, 65%)",
+    success: "hsl(100, 65%, 55%)",
+    notice: "hsl(45, 100%, 65%)",
+    warning: "hsl(30, 90%, 55%)",
+    danger: "hsl(350, 100%, 65%)",
+  },
+  components: {
+    dialog: {
+      surface: "hsl(216, 50%, 7%)",
+    },
+    sidebar: {
+      surface: "hsl(216, 45%, 12%)",
+      border: "hsl(216, 40%, 17%)",
+    },
+    appHeader: {
+      surface: "hsl(216, 50%, 8%)",
+      border: "hsl(216, 40%, 14%)",
+    },
+    responsePane: {
+      surface: "hsl(216, 45%, 12%)",
+      border: "hsl(216, 40%, 17%)",
+    },
+    button: {
+      primary: "hsl(176, 85%, 53%)",
+      secondary: "hsl(210, 15%, 53%)",
+      info: "hsl(210, 65%, 58%)",
+      success: "hsl(100, 65%, 48%)",
+      notice: "hsl(45, 100%, 58%)",
+      warning: "hsl(30, 90%, 48%)",
+      danger: "hsl(350, 100%, 58%)",
+    },
+  },
+};
diff --git a/plugins/themes-yaak/tsconfig.json b/plugins/themes-yaak/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/plugins/themes-yaak/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/rustfmt.toml b/rustfmt.toml
new file mode 100644
index 0000000..c044c3e
--- /dev/null
+++ b/rustfmt.toml
@@ -0,0 +1,8 @@
+edition = "2024"
+
+# Widths
+chain_width = 100
+max_width = 100
+single_line_if_else_max_width = 100
+fn_call_width = 100
+struct_lit_width = 100
diff --git a/scripts/.gitignore b/scripts/.gitignore
new file mode 100644
index 0000000..94a37de
--- /dev/null
+++ b/scripts/.gitignore
@@ -0,0 +1 @@
+tmp-*
diff --git a/scripts/create-migration.cjs b/scripts/create-migration.cjs
new file mode 100644
index 0000000..b1505a7
--- /dev/null
+++ b/scripts/create-migration.cjs
@@ -0,0 +1,46 @@
+const fs = require("fs");
+const path = require("path");
+const readline = require("readline");
+const slugify = require("slugify");
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+function generateTimestamp() {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  const hours = String(now.getHours()).padStart(2, "0");
+  const minutes = String(now.getMinutes()).padStart(2, "0");
+  const seconds = String(now.getSeconds()).padStart(2, "0");
+  return `${year}${month}${day}${hours}${minutes}${seconds}`;
+}
+
+async function createMigration() {
+  try {
+    const migrationName = await new Promise((resolve) => {
+      rl.question("Enter migration name: ", resolve);
+    });
+
+    const timestamp = generateTimestamp();
+    const fileName = `${timestamp}_${slugify(String(migrationName), { lower: true })}.sql`;
+    const migrationsDir = path.join(__dirname, "../crates/yaak-models/migrations");
+    const filePath = path.join(migrationsDir, fileName);
+
+    if (!fs.existsSync(migrationsDir)) {
+      fs.mkdirSync(migrationsDir, { recursive: true });
+    }
+
+    fs.writeFileSync(filePath, "-- Add migration SQL here\n");
+    console.log(`Created migration file: ${fileName}`);
+  } catch (error) {
+    console.error("Error creating migration:", error);
+  } finally {
+    rl.close();
+  }
+}
+
+createMigration().catch(console.error);
diff --git a/scripts/extract-archive.cjs b/scripts/extract-archive.cjs
new file mode 100644
index 0000000..2d35805
--- /dev/null
+++ b/scripts/extract-archive.cjs
@@ -0,0 +1,77 @@
+const fs = require("node:fs");
+const path = require("node:path");
+const tar = require("tar");
+const yauzl = require("yauzl");
+
+// Resolve an archive entry against destDir, refusing anything that escapes it.
+function safeJoin(destDir, entryName) {
+  const root = path.resolve(destDir);
+  const resolved = path.resolve(root, entryName);
+  if (resolved !== root && !resolved.startsWith(root + path.sep)) {
+    throw new Error(`Archive entry escapes destination directory: ${entryName}`);
+  }
+  return resolved;
+}
+
+function extractZip(filePath, destDir) {
+  return new Promise((resolve, reject) => {
+    yauzl.open(filePath, { lazyEntries: true }, (err, zip) => {
+      if (err) return reject(err);
+      zip.on("error", reject);
+      zip.on("end", resolve);
+      zip.on("entry", (entry) => {
+        let dst;
+        try {
+          dst = safeJoin(destDir, entry.fileName);
+        } catch (e) {
+          return reject(e);
+        }
+
+        // Unix mode lives in the high 16 bits of the external attributes
+        const rawMode = (entry.externalFileAttributes >>> 16) & 0xffff;
+        const isSymlink = (rawMode & 0o170000) === 0o120000;
+        if (isSymlink) {
+          return reject(new Error(`Refusing to extract symlink from archive: ${entry.fileName}`));
+        }
+
+        if (entry.fileName.endsWith("/")) {
+          fs.mkdirSync(dst, { recursive: true });
+          return zip.readEntry();
+        }
+
+        zip.openReadStream(entry, (err2, stream) => {
+          if (err2) return reject(err2);
+          fs.mkdirSync(path.dirname(dst), { recursive: true });
+          const out = fs.createWriteStream(dst);
+          stream.on("error", reject);
+          out.on("error", reject);
+          out.on("close", () => {
+            const mode = rawMode & 0o7777;
+            if (mode !== 0) fs.chmodSync(dst, mode);
+            zip.readEntry();
+          });
+          stream.pipe(out);
+        });
+      });
+      zip.readEntry();
+    });
+  });
+}
+
+/**
+ * Extract a `.zip` or `.tar.gz` archive into destDir, preserving file modes.
+ * Entries that would land outside destDir are rejected.
+ */
+async function extractArchive(filePath, destDir) {
+  fs.mkdirSync(destDir, { recursive: true });
+  if (filePath.endsWith(".zip")) {
+    await extractZip(filePath, destDir);
+  } else if (filePath.endsWith(".tar.gz") || filePath.endsWith(".tgz")) {
+    // oxlint-disable-next-line await-thenable -- tar.x() returns a promise when `file` is set
+    await tar.x({ file: filePath, cwd: destDir });
+  } else {
+    throw new Error(`Unsupported archive format: ${path.basename(filePath)}`);
+  }
+}
+
+module.exports = { extractArchive };
diff --git a/scripts/git-hooks/post-checkout.mjs b/scripts/git-hooks/post-checkout.mjs
new file mode 100644
index 0000000..b927b18
--- /dev/null
+++ b/scripts/git-hooks/post-checkout.mjs
@@ -0,0 +1,219 @@
+#!/usr/bin/env node
+
+/**
+ * Git post-checkout hook for auto-configuring worktree environments.
+ * This runs after 'git checkout' or 'git worktree add'.
+ *
+ * Args from git:
+ *   process.argv[2] - previous HEAD ref
+ *   process.argv[3] - new HEAD ref
+ *   process.argv[4] - flag (1 = branch checkout, 0 = file checkout)
+ */
+
+import fs from "fs";
+import path from "path";
+import { execSync, execFileSync } from "child_process";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Git supplies three arguments when invoking this as a post-checkout hook. When run directly,
+// assume the caller wants to configure the current worktree instead of requiring placeholder refs.
+const isManualRun = process.argv.length === 2;
+const isBranchCheckout = isManualRun || process.argv[4] === "1";
+
+if (!isBranchCheckout) {
+  process.exit(0);
+}
+
+// Check if we're in a worktree by looking for .git file (not directory)
+const gitPath = path.join(process.cwd(), ".git");
+const isWorktree = fs.existsSync(gitPath) && fs.statSync(gitPath).isFile();
+
+if (!isWorktree) {
+  process.exit(0);
+}
+
+const envLocalPath = path.join(process.cwd(), ".env.local");
+
+// Don't overwrite existing .env.local
+if (fs.existsSync(envLocalPath)) {
+  process.exit(0);
+}
+
+console.log("Detected new worktree - configuring ports in .env.local");
+
+const CLIENT_PORT_BASE = 1420;
+const PROXY_PORT_BASE = 2420; // Keep proxy +1000 from client to avoid cross-app conflicts
+
+// Find the highest worktree index and MCP port in use across all worktrees.
+// Main worktree (first in list) is assumed to use index 0:
+// client=1420, proxy=2420, mcp=64343.
+let maxMcpPort = 64343;
+let maxWorktreeIndex = 0;
+
+try {
+  const worktreeList = execSync("git worktree list --porcelain", {
+    encoding: "utf8",
+  });
+  const worktreePaths = worktreeList
+    .split("\n")
+    .filter((line) => line.startsWith("worktree "))
+    .map((line) => line.replace("worktree ", "").trim());
+
+  // Skip the first worktree (main) since it uses default ports
+  for (let i = 1; i < worktreePaths.length; i++) {
+    const worktreePath = worktreePaths[i];
+    const envPath = path.join(worktreePath, ".env.local");
+
+    if (fs.existsSync(envPath)) {
+      const content = fs.readFileSync(envPath, "utf8");
+
+      const mcpMatch = content.match(/^YAAK_PLUGIN_MCP_SERVER_PORT=(\d+)/m);
+      if (mcpMatch) {
+        const port = parseInt(mcpMatch[1], 10);
+        if (port > maxMcpPort) {
+          maxMcpPort = port;
+        }
+      }
+
+      const clientDevMatch = content.match(/^(?:YAAK_CLIENT_DEV_PORT|YAAK_DEV_PORT)=(\d+)/m);
+      if (clientDevMatch) {
+        const port = parseInt(clientDevMatch[1], 10);
+        const index = port - CLIENT_PORT_BASE;
+        if (index > maxWorktreeIndex) {
+          maxWorktreeIndex = index;
+        }
+      }
+
+      const proxyDevMatch = content.match(/^YAAK_PROXY_DEV_PORT=(\d+)/m);
+      if (proxyDevMatch) {
+        const port = parseInt(proxyDevMatch[1], 10);
+        const index = port - PROXY_PORT_BASE;
+        if (index > maxWorktreeIndex) {
+          maxWorktreeIndex = index;
+        }
+      }
+    }
+  }
+
+  // Increment MCP to get the next available port
+  maxMcpPort++;
+} catch (err) {
+  console.error("Warning: Could not check other worktrees for port conflicts:", err.message);
+  // Continue with default ports
+}
+
+const nextWorktreeIndex = maxWorktreeIndex + 1;
+const nextClientDevPort = CLIENT_PORT_BASE + nextWorktreeIndex;
+const nextProxyDevPort = PROXY_PORT_BASE + nextWorktreeIndex;
+
+// Get worktree name from current directory
+const worktreeName = path.basename(process.cwd());
+
+// Create .env.local with unique ports
+const envContent = `# Auto-generated by git post-checkout hook
+# This file configures ports for this worktree to avoid conflicts
+
+# Vite dev server port for the client app (main worktree uses ${CLIENT_PORT_BASE})
+YAAK_CLIENT_DEV_PORT=${nextClientDevPort}
+
+# Vite dev server port for the proxy app (main worktree uses ${PROXY_PORT_BASE})
+YAAK_PROXY_DEV_PORT=${nextProxyDevPort}
+
+# MCP Server port (main worktree uses 64343)
+YAAK_PLUGIN_MCP_SERVER_PORT=${maxMcpPort}
+`;
+
+fs.writeFileSync(envLocalPath, envContent, "utf8");
+console.log(
+  `Created .env.local with YAAK_CLIENT_DEV_PORT=${nextClientDevPort}, YAAK_PROXY_DEV_PORT=${nextProxyDevPort}, and YAAK_PLUGIN_MCP_SERVER_PORT=${maxMcpPort}`,
+);
+
+// Create tauri.worktree.conf.json with unique app identifier for complete isolation
+// This gives each worktree its own app data directory, avoiding the need for DB path prefixes
+const clientTauriWorktreeConfig = {
+  identifier: `app.yaak.desktop.dev.${worktreeName}`,
+  productName: `Daak (${worktreeName})`,
+};
+
+const clientTauriConfigPath = path.join(
+  process.cwd(),
+  "crates-tauri",
+  "yaak-app-client",
+  "tauri.worktree.conf.json",
+);
+fs.writeFileSync(
+  clientTauriConfigPath,
+  JSON.stringify(clientTauriWorktreeConfig, null, 2) + "\n",
+  "utf8",
+);
+console.log(
+  `Created client tauri.worktree.conf.json with identifier: ${clientTauriWorktreeConfig.identifier}`,
+);
+
+const proxyTauriWorktreeConfig = {
+  identifier: `app.yaak.proxy.dev.${worktreeName}`,
+  productName: `Yaak Proxy (${worktreeName})`,
+};
+
+const proxyTauriConfigPath = path.join(
+  process.cwd(),
+  "crates-tauri",
+  "yaak-app-proxy",
+  "tauri.worktree.conf.json",
+);
+fs.writeFileSync(
+  proxyTauriConfigPath,
+  JSON.stringify(proxyTauriWorktreeConfig, null, 2) + "\n",
+  "utf8",
+);
+console.log(
+  `Created proxy tauri.worktree.conf.json with identifier: ${proxyTauriWorktreeConfig.identifier}`,
+);
+
+// Copy gitignored editor config folders from main worktree (.zed, .vscode, .claude, etc.)
+// This ensures your editor settings, tasks, and configurations are available in the new worktree
+// without needing to manually copy them or commit them to git.
+try {
+  const worktreeList = execSync("git worktree list --porcelain", {
+    encoding: "utf8",
+  });
+  const mainWorktreePath = worktreeList
+    .split("\n")
+    .find((line) => line.startsWith("worktree "))
+    ?.replace("worktree ", "")
+    .trim();
+
+  if (mainWorktreePath) {
+    // Find all .* folders in main worktree root that are gitignored
+    const entries = fs.readdirSync(mainWorktreePath, { withFileTypes: true });
+    const dotFolders = entries
+      .filter((entry) => entry.isDirectory() && entry.name.startsWith("."))
+      .map((entry) => entry.name);
+
+    for (const folder of dotFolders) {
+      const sourcePath = path.join(mainWorktreePath, folder);
+      const destPath = path.join(process.cwd(), folder);
+
+      try {
+        // Check if it's gitignored - run from main worktree directory
+        execFileSync("git", ["check-ignore", "-q", folder], {
+          stdio: "pipe",
+          cwd: mainWorktreePath,
+        });
+
+        // It's gitignored, copy it
+        fs.cpSync(sourcePath, destPath, { recursive: true });
+        console.log(`Copied ${folder} from main worktree`);
+      } catch {
+        // Not gitignored or doesn't exist, skip
+      }
+    }
+  }
+} catch (err) {
+  console.warn("Warning: Could not copy files from main worktree:", err.message);
+  // Continue anyway
+}
+
+console.log("\n✓ Worktree setup complete! Run `npm run init` to install dependencies.");
diff --git a/scripts/install-wasm-pack.cjs b/scripts/install-wasm-pack.cjs
new file mode 100644
index 0000000..8be4c6a
--- /dev/null
+++ b/scripts/install-wasm-pack.cjs
@@ -0,0 +1,18 @@
+const { execSync } = require("node:child_process");
+
+const version = tryExecSync("wasm-pack --version");
+if (version.startsWith("wasm-pack ")) {
+  console.log("wasm-pack already installed");
+  return;
+}
+
+console.log("Installing wasm-pack via cargo...");
+execSync("cargo install wasm-pack --locked", { stdio: "inherit" });
+
+function tryExecSync(cmd) {
+  try {
+    return execSync(cmd, { stdio: "pipe" }).toString("utf-8");
+  } catch {
+    return "";
+  }
+}
diff --git a/scripts/publish-core-plugins.cjs b/scripts/publish-core-plugins.cjs
new file mode 100644
index 0000000..db77b13
--- /dev/null
+++ b/scripts/publish-core-plugins.cjs
@@ -0,0 +1,19 @@
+const { readdirSync } = require("node:fs");
+const path = require("node:path");
+const { execSync } = require("node:child_process");
+
+const pluginsDir = path.join(__dirname, "..", "plugins");
+
+console.log("Publishing core Yaak plugins");
+
+for (const name of readdirSync(pluginsDir)) {
+  const dir = path.join(pluginsDir, name);
+  if (name.startsWith(".")) continue;
+  console.log("Building plugin", dir);
+  execSync("npm run build", { stdio: "inherit", cwd: dir });
+  execSync("yaakcli publish", {
+    stdio: "inherit",
+    cwd: dir,
+    env: { ...process.env, ENVIRONMENT: "development" },
+  });
+}
diff --git a/scripts/replace-version.cjs b/scripts/replace-version.cjs
new file mode 100644
index 0000000..9a739d9
--- /dev/null
+++ b/scripts/replace-version.cjs
@@ -0,0 +1,15 @@
+const path = require("path");
+const fs = require("fs");
+
+const version = process.env.YAAK_VERSION?.replace("v", "");
+if (!version) {
+  throw new Error("YAAK_VERSION environment variable not set");
+}
+
+const tauriConfigPath = path.join(__dirname, "../crates-tauri/yaak-app-client/tauri.conf.json");
+const tauriConfig = JSON.parse(fs.readFileSync(tauriConfigPath, "utf8"));
+
+tauriConfig.version = version;
+
+console.log("Writing version " + version + " to " + tauriConfigPath);
+fs.writeFileSync(tauriConfigPath, JSON.stringify(tauriConfig, null, 2));
diff --git a/scripts/run-build.mjs b/scripts/run-build.mjs
new file mode 100644
index 0000000..9e70033
--- /dev/null
+++ b/scripts/run-build.mjs
@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+/**
+ * Runs a Tauri app build from the app directory so relative config paths and
+ * beforeBuildCommand entries resolve consistently.
+ */
+
+import { spawnSync } from "child_process";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.join(__dirname, "..");
+
+const [appName = "client", ...additionalArgs] = process.argv.slice(2);
+const appConfigs = {
+  client: {
+    appDir: "crates-tauri/yaak-app-client",
+    tauriConfig: "tauri.conf.json",
+  },
+  proxy: {
+    appDir: "crates-tauri/yaak-app-proxy",
+    tauriConfig: "tauri.conf.json",
+  },
+};
+
+const appConfig = appConfigs[appName];
+if (appConfig == null) {
+  console.error(`Unknown Tauri app "${appName}"`);
+  process.exit(1);
+}
+
+// Normalize extra `--config` path args to absolute paths from repo root so
+// callers can keep passing root-relative config files.
+const normalizedAdditionalArgs = [];
+for (let i = 0; i < additionalArgs.length; i++) {
+  const arg = additionalArgs[i];
+  if (arg === "--config" && i + 1 < additionalArgs.length) {
+    const value = additionalArgs[i + 1];
+    const isInlineJson = value.trimStart().startsWith("{");
+    normalizedAdditionalArgs.push("--config");
+    normalizedAdditionalArgs.push(
+      !isInlineJson && !path.isAbsolute(value) ? path.join(rootDir, value) : value,
+    );
+    i++;
+    continue;
+  }
+  normalizedAdditionalArgs.push(arg);
+}
+
+const tauriJs = path.join(rootDir, "node_modules", "@tauri-apps", "cli", "tauri.js");
+const result = spawnSync(
+  process.execPath,
+  [tauriJs, "build", "--config", appConfig.tauriConfig, ...normalizedAdditionalArgs],
+  {
+    cwd: path.join(rootDir, appConfig.appDir),
+    stdio: "inherit",
+    env: process.env,
+  },
+);
+
+process.exit(result.status || 0);
diff --git a/scripts/run-dev.mjs b/scripts/run-dev.mjs
new file mode 100644
index 0000000..1c5a995
--- /dev/null
+++ b/scripts/run-dev.mjs
@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+
+/**
+ * Script to run a Tauri app dev server with dynamic port configuration.
+ */
+
+import { spawnSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.join(__dirname, "..");
+
+// Load .env.local if it exists
+const envLocalPath = path.join(rootDir, ".env.local");
+if (fs.existsSync(envLocalPath)) {
+  const envContent = fs.readFileSync(envLocalPath, "utf8");
+  const envVars = envContent
+    .split("\n")
+    .filter((line) => line && !line.startsWith("#"))
+    .reduce((acc, line) => {
+      const [key, value] = line.split("=");
+      if (key && value) {
+        acc[key.trim()] = value.trim();
+      }
+      return acc;
+    }, {});
+
+  Object.assign(process.env, envVars);
+}
+
+const [appName = "client", ...additionalArgs] = process.argv.slice(2);
+const appConfigs = {
+  client: {
+    appDir: "crates-tauri/yaak-app-client",
+    devPortEnv: "YAAK_CLIENT_DEV_PORT",
+    fallbackDevPortEnv: "YAAK_DEV_PORT",
+    defaultPort: "1420",
+    tauriConfig: "tauri.conf.json",
+    tauriDevConfig: "tauri.development.conf.json",
+    tauriWorktreeConfig: "tauri.worktree.conf.json",
+  },
+  proxy: {
+    appDir: "crates-tauri/yaak-app-proxy",
+    devPortEnv: "YAAK_PROXY_DEV_PORT",
+    fallbackDevPortEnv: null,
+    defaultPort: "2420",
+    tauriConfig: "tauri.conf.json",
+    tauriDevConfig: "tauri.development.conf.json",
+    tauriWorktreeConfig: "tauri.worktree.conf.json",
+  },
+};
+
+const appConfig = appConfigs[appName];
+if (appConfig == null) {
+  console.error(`Unknown Tauri app "${appName}"`);
+  process.exit(1);
+}
+
+const port =
+  process.env[appConfig.devPortEnv] ||
+  (appConfig.fallbackDevPortEnv ? process.env[appConfig.fallbackDevPortEnv] : undefined) ||
+  appConfig.defaultPort;
+const config = JSON.stringify({
+  build: { devUrl: `http://localhost:${port}` },
+});
+
+// Normalize extra `--config` path args to absolute paths from repo root so
+// callers can keep passing root-relative config files.
+const normalizedAdditionalArgs = [];
+for (let i = 0; i < additionalArgs.length; i++) {
+  const arg = additionalArgs[i];
+  if (arg === "--") {
+    normalizedAdditionalArgs.push(arg, ...additionalArgs.slice(i + 1));
+    break;
+  }
+  if (arg === "--config" && i + 1 < additionalArgs.length) {
+    const value = additionalArgs[i + 1];
+    const isInlineJson = value.trimStart().startsWith("{");
+    normalizedAdditionalArgs.push("--config");
+    normalizedAdditionalArgs.push(
+      !isInlineJson && !path.isAbsolute(value) ? path.join(rootDir, value) : value,
+    );
+    i++;
+    continue;
+  }
+  normalizedAdditionalArgs.push(arg);
+}
+
+// Tauri only auto-merges platform-specific config names, so the per-worktree config
+// written by the post-checkout hook has to be passed explicitly. It's gitignored, so
+// it's normally absent in the main checkout.
+const worktreeConfigArgs = [];
+if (fs.existsSync(path.join(rootDir, appConfig.appDir, appConfig.tauriWorktreeConfig))) {
+  worktreeConfigArgs.push("--config", appConfig.tauriWorktreeConfig);
+}
+
+const args = [
+  "dev",
+  "--no-watch",
+  "--config",
+  appConfig.tauriConfig,
+  "--config",
+  appConfig.tauriDevConfig,
+  ...worktreeConfigArgs,
+  "--config",
+  config,
+  ...normalizedAdditionalArgs,
+];
+
+// Invoke the tauri CLI JS entry point directly via node to avoid shell escaping issues on Windows
+const tauriJs = path.join(rootDir, "node_modules", "@tauri-apps", "cli", "tauri.js");
+
+const result = spawnSync(process.execPath, [tauriJs, ...args], {
+  cwd: path.join(rootDir, appConfig.appDir),
+  stdio: "inherit",
+  env: process.env,
+});
+
+process.exit(result.status || 0);
diff --git a/scripts/run-web.mjs b/scripts/run-web.mjs
new file mode 100644
index 0000000..ccb9bb3
--- /dev/null
+++ b/scripts/run-web.mjs
@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+
+/**
+ * Run Yaak in a browser: the client built for the web target, and the server
+ * that executes its sends.
+ *
+ * `YAAK_TARGET=web` is what resolves `@yaakapp-internal/platform` to its browser
+ * entry (see apps/yaak-client/vite.config.ts). Setting it in a node script rather
+ * than inline in an npm script keeps this working on Windows.
+ */
+
+import { spawn, spawnSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.join(__dirname, "..");
+
+// The post-checkout hook writes a per-worktree dev port in here, and the client's
+// vite config reads YAAK_CLIENT_DEV_PORT from it. Without this, two worktrees both
+// try to serve on 1420. (run-dev.mjs reads the same file, but with Object.assign,
+// so there an explicit YAAK_CLIENT_DEV_PORT is silently ignored.)
+const envLocalPath = path.join(rootDir, ".env.local");
+if (fs.existsSync(envLocalPath)) {
+  for (const line of fs.readFileSync(envLocalPath, "utf8").split("\n")) {
+    if (!line || line.startsWith("#")) continue;
+    const [key, value] = line.split("=");
+    if (!key || !value) continue;
+    // Defaults, not overrides: a variable set on the command line is the more
+    // deliberate of the two and has to win, or `PORT=x vp run web:dev` silently
+    // lands somewhere else.
+    process.env[key.trim()] ??= value.trim();
+  }
+}
+
+const DIST = "dist/apps/yaak-client";
+
+const [mode] = process.argv.slice(2);
+
+// Invoke the Vite+ CLI JS entry point directly via node, the way run-dev.mjs invokes
+// the Tauri CLI. The `.bin/vp` shim is a POSIX script that npm pairs with `vp.cmd` and
+// `vp.ps1` on Windows, so spawning it without a shell only works on one platform.
+const vp = path.join(rootDir, "node_modules", "vite-plus", "bin", "vp");
+
+const runVite = (args) => [process.execPath, [vp, ...args]];
+
+const env = (extra = {}) => ({ ...process.env, YAAK_TARGET: "web", ...extra });
+
+/** Run a build step to completion. A failure ends the script. */
+function run(command, args, extra = {}) {
+  const result = spawnSync(command, args, { cwd: rootDir, stdio: "inherit", env: env(extra) });
+  if (result.status !== 0) process.exit(result.status ?? 1);
+}
+
+/**
+ * Run a server until it stops, and take it down when this process is stopped.
+ *
+ * Servers are started as a direct child rather than through `cargo run`, and
+ * signals are forwarded to them, because neither happens by itself: `cargo run`
+ * is a wrapper that does not pass a terminating signal on to the binary it
+ * spawned, and a child is not killed by its parent exiting. Either one on its
+ * own leaves a server holding the port after the terminal that started it has
+ * gone, and the next run fails with "address already in use".
+ */
+function serve(command, args, extra = {}) {
+  const child = spawn(command, args, { cwd: rootDir, stdio: "inherit", env: env(extra) });
+
+  const stop = (signal) => child.killed || child.kill(signal);
+  for (const signal of ["SIGINT", "SIGTERM", "SIGHUP"]) process.on(signal, () => stop(signal));
+  process.on("exit", () => stop("SIGTERM"));
+
+  child.on("exit", (code, signal) => process.exit(code ?? (signal ? 1 : 0)));
+  child.on("error", (err) => {
+    console.error(`Failed to start ${command}: ${err.message}`);
+    process.exit(1);
+  });
+}
+
+/** Build the server and hand back the binary, so it can be run without a wrapper. */
+function buildServer() {
+  run("cargo", ["build", "-p", "yaak-web"]);
+  const target = process.env.CARGO_TARGET_DIR ?? path.join(rootDir, "target");
+  return path.join(target, "debug", "yaak-web");
+}
+
+switch (mode) {
+  // The app, with hot reload, on one origin: its own `/v1` is passed through to
+  // the server `web:dev` starts alongside it. Nothing to build first and one
+  // address to open.
+  case "dev":
+    serve(...runVite(["-C", "apps/yaak-client", "dev", "--force"]));
+    break;
+
+  // The send executor behind the dev server, on the port a dev build looks for.
+  case "proxy":
+    serve(buildServer(), [], {
+      // So opening the send server's port in a browser lands on the app instead
+      // of an explanation of why the app is not there.
+      YAAK_WEB_APP_PORT: process.env.YAAK_CLIENT_DEV_PORT ?? process.env.YAAK_DEV_PORT ?? "1420",
+    });
+    break;
+
+  case "build":
+    run(...runVite(["-C", "apps/yaak-client", "build"]));
+    break;
+
+  // One process serving both, the shape the Docker image runs. The build comes
+  // first because serving a stale `dist` silently tests the last change but one.
+  case "serve": {
+    const server = buildServer();
+    run(...runVite(["-C", "apps/yaak-client", "build"]));
+    serve(server, ["--serve", DIST]);
+    break;
+  }
+
+  default:
+    console.error(`Unknown mode ${JSON.stringify(mode)}; expected dev, proxy, build or serve`);
+    process.exit(1);
+}
diff --git a/scripts/run-workspaces-dev.mjs b/scripts/run-workspaces-dev.mjs
new file mode 100644
index 0000000..109b783
--- /dev/null
+++ b/scripts/run-workspaces-dev.mjs
@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+
+/**
+ * Runs `npm run dev` in parallel for the provided workspaces, or all
+ * workspaces with a dev script when none are specified.
+ * Handles cleanup of child processes on exit.
+ */
+
+import { spawn } from "child_process";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.join(__dirname, "..");
+
+// Read root package.json to get workspaces
+const rootPkg = JSON.parse(fs.readFileSync(path.join(rootDir, "package.json"), "utf8"));
+const workspaces = rootPkg.workspaces || [];
+
+const requestedWorkspaces = process.argv.slice(2);
+const workspaceCandidates = requestedWorkspaces.length > 0 ? requestedWorkspaces : workspaces;
+
+// Find all candidate workspaces with a dev script
+const workspacesWithDev = workspaceCandidates.filter((ws) => {
+  const pkgPath = path.join(rootDir, ws, "package.json");
+  if (!fs.existsSync(pkgPath)) return false;
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+  return pkg.scripts?.dev != null;
+});
+
+if (workspacesWithDev.length === 0) {
+  console.log("No workspaces with dev script found");
+  process.exit(0);
+}
+
+console.log(`Starting dev for ${workspacesWithDev.length} workspaces...`);
+
+const children = [];
+
+// Spawn all dev processes
+for (const ws of workspacesWithDev) {
+  const cwd = path.join(rootDir, ws);
+  const child = spawn("npm", ["run", "dev"], {
+    cwd,
+    stdio: "inherit",
+    shell: process.platform === "win32",
+  });
+
+  child.on("error", (err) => {
+    console.error(`Error in ${ws}:`, err.message);
+  });
+
+  children.push({ ws, child });
+}
+
+// Cleanup function to kill all children
+function cleanup() {
+  for (const { ws: _ws, child } of children) {
+    if (child.exitCode === null) {
+      // Process still running
+      if (process.platform === "win32") {
+        spawn("taskkill", ["/pid", child.pid, "/f", "/t"], { shell: true });
+      } else {
+        child.kill("SIGTERM");
+      }
+    }
+  }
+}
+
+// Handle various exit signals
+process.on("SIGINT", () => {
+  cleanup();
+  process.exit(0);
+});
+
+process.on("SIGTERM", () => {
+  cleanup();
+  process.exit(0);
+});
+
+process.on("exit", cleanup);
+
+// Keep the process running
+process.stdin.resume();
diff --git a/scripts/vendor-node.cjs b/scripts/vendor-node.cjs
new file mode 100644
index 0000000..7534a10
--- /dev/null
+++ b/scripts/vendor-node.cjs
@@ -0,0 +1,114 @@
+const path = require("node:path");
+const crypto = require("node:crypto");
+const fs = require("node:fs");
+const Downloader = require("nodejs-file-downloader");
+const { extractArchive } = require("./extract-archive.cjs");
+const { rmSync, cpSync, mkdirSync, existsSync } = require("node:fs");
+const { execSync } = require("node:child_process");
+
+const nodeVersionFile = path.join(__dirname, "..", "packages", "plugin-runtime", ".node-version");
+const NODE_VERSION = `v${fs.readFileSync(nodeVersionFile, "utf8").trim().replace(/^v/, "")}`;
+
+// `${process.platform}_${process.arch}`
+const MAC_ARM = "darwin_arm64";
+const MAC_X64 = "darwin_x64";
+const LNX_ARM = "linux_arm64";
+const LNX_X64 = "linux_x64";
+const WIN_X64 = "win32_x64";
+const WIN_ARM = "win32_arm64";
+
+const URL_MAP = {
+  [MAC_ARM]: `https://nodejs.org/download/release/${NODE_VERSION}/node-${NODE_VERSION}-darwin-arm64.tar.gz`,
+  [MAC_X64]: `https://nodejs.org/download/release/${NODE_VERSION}/node-${NODE_VERSION}-darwin-x64.tar.gz`,
+  [LNX_ARM]: `https://nodejs.org/download/release/${NODE_VERSION}/node-${NODE_VERSION}-linux-arm64.tar.gz`,
+  [LNX_X64]: `https://nodejs.org/download/release/${NODE_VERSION}/node-${NODE_VERSION}-linux-x64.tar.gz`,
+  [WIN_X64]: `https://nodejs.org/download/release/${NODE_VERSION}/node-${NODE_VERSION}-win-x64.zip`,
+  [WIN_ARM]: `https://nodejs.org/download/release/${NODE_VERSION}/node-${NODE_VERSION}-win-arm64.zip`,
+};
+
+const SRC_BIN_MAP = {
+  [MAC_ARM]: `node-${NODE_VERSION}-darwin-arm64/bin/node`,
+  [MAC_X64]: `node-${NODE_VERSION}-darwin-x64/bin/node`,
+  [LNX_ARM]: `node-${NODE_VERSION}-linux-arm64/bin/node`,
+  [LNX_X64]: `node-${NODE_VERSION}-linux-x64/bin/node`,
+  [WIN_X64]: `node-${NODE_VERSION}-win-x64/node.exe`,
+  [WIN_ARM]: `node-${NODE_VERSION}-win-arm64/node.exe`,
+};
+
+const DST_BIN_MAP = {
+  [MAC_ARM]: "yaaknode",
+  [MAC_X64]: "yaaknode",
+  [LNX_ARM]: "yaaknode",
+  [LNX_X64]: "yaaknode",
+  [WIN_X64]: "yaaknode.exe",
+  [WIN_ARM]: "yaaknode.exe",
+};
+
+const SHA256_MAP = {
+  [MAC_ARM]: "b05aa3a66efe680023f930bd5af3fdbbd542794da5644ca2ad711d68cbd4dc35",
+  [MAC_X64]: "096081b6d6fcdd3f5ba0f5f1d44a47e83037ad2e78eada26671c252fe64dd111",
+  [LNX_ARM]: "0dc93ec5c798b0d347f068db6d205d03dea9a71765e6a53922b682b91265d71f",
+  [LNX_X64]: "58a5ff5cc8f2200e458bea22e329d5c1994aa1b111d499ca46ec2411d58239ca",
+  [WIN_X64]: "5355ae6d7c49eddcfde7d34ac3486820600a831bf81dc3bdca5c8db6a9bb0e76",
+  [WIN_ARM]: "ce9ee4e547ebdff355beb48e309b166c24df6be0291c9eaf103ce15f3de9e5b4",
+};
+
+const key = `${process.platform}_${process.env.YAAK_TARGET_ARCH ?? process.arch}`;
+
+const destDir = path.join(__dirname, `..`, "crates-tauri", "yaak-app-client", "vendored", "node");
+const binDest = path.join(destDir, DST_BIN_MAP[key]);
+console.log(`Vendoring NodeJS ${NODE_VERSION} for ${key}`);
+
+if (existsSync(binDest) && tryExecSync(`${binDest} --version`).trim() === NODE_VERSION) {
+  console.log("NodeJS already vendored");
+  return;
+}
+
+rmSync(destDir, { recursive: true, force: true });
+mkdirSync(destDir, { recursive: true });
+
+const url = URL_MAP[key];
+const tmpDir = path.join(__dirname, "tmp-node");
+rmSync(tmpDir, { recursive: true, force: true });
+
+(async function () {
+  // Download GitHub release artifact
+  console.log("Downloading NodeJS at", url);
+  const { filePath } = await new Downloader({
+    url,
+    directory: tmpDir,
+    timeout: 1000 * 60 * 2,
+  }).download();
+
+  // Verify SHA256
+  const expectedHash = SHA256_MAP[key];
+  const fileBuffer = fs.readFileSync(filePath);
+  const actualHash = crypto.createHash("sha256").update(fileBuffer).digest("hex");
+  if (actualHash !== expectedHash) {
+    throw new Error(
+      `SHA256 mismatch for ${path.basename(filePath)}\n  expected: ${expectedHash}\n  actual:   ${actualHash}`,
+    );
+  }
+  console.log("SHA256 verified:", actualHash);
+
+  // Decompress to the same directory
+  await extractArchive(filePath, tmpDir);
+
+  // Copy binary
+  const binSrc = path.join(tmpDir, SRC_BIN_MAP[key]);
+  cpSync(binSrc, binDest);
+  rmSync(tmpDir, { recursive: true, force: true });
+
+  console.log("Downloaded NodeJS to", binDest);
+})().catch((err) => {
+  console.log("Script failed:", err);
+  process.exit(1);
+});
+
+function tryExecSync(cmd) {
+  try {
+    return execSync(cmd, { stdio: "pipe" }).toString("utf-8");
+  } catch {
+    return "";
+  }
+}
diff --git a/scripts/vendor-plugins.cjs b/scripts/vendor-plugins.cjs
new file mode 100644
index 0000000..9a28fd8
--- /dev/null
+++ b/scripts/vendor-plugins.cjs
@@ -0,0 +1,41 @@
+const { readdirSync, cpSync, existsSync, mkdirSync } = require("node:fs");
+const path = require("node:path");
+
+const pluginsDir = path.join(__dirname, "..", "plugins");
+const externalPluginsDir = path.join(__dirname, "..", "plugins-external");
+
+// Get list of external (non-bundled) plugins
+const externalPlugins = new Set();
+if (existsSync(externalPluginsDir)) {
+  for (const name of readdirSync(externalPluginsDir)) {
+    if (!name.startsWith(".")) {
+      externalPlugins.add(name);
+    }
+  }
+}
+
+console.log("Copying Yaak plugins to", pluginsDir);
+
+for (const name of readdirSync(pluginsDir)) {
+  const dir = path.join(pluginsDir, name);
+  if (name.startsWith(".")) continue;
+  if (externalPlugins.has(name)) {
+    console.log(`Skipping ${name} (external plugin)`);
+    continue;
+  }
+  const destDir = path.join(
+    __dirname,
+    "..",
+    "crates-tauri",
+    "yaak-app-client",
+    "vendored",
+    "plugins",
+    name,
+  );
+  mkdirSync(destDir, { recursive: true });
+  console.log(`Copying ${name} to ${destDir}`);
+  cpSync(path.join(dir, "package.json"), path.join(destDir, "package.json"));
+  cpSync(path.join(dir, "build"), path.join(destDir, "build"), {
+    recursive: true,
+  });
+}
diff --git a/scripts/vendor-protoc.cjs b/scripts/vendor-protoc.cjs
new file mode 100644
index 0000000..a07d01a
--- /dev/null
+++ b/scripts/vendor-protoc.cjs
@@ -0,0 +1,114 @@
+const crypto = require("node:crypto");
+const fs = require("node:fs");
+const Downloader = require("nodejs-file-downloader");
+const { extractArchive } = require("./extract-archive.cjs");
+const path = require("node:path");
+const { rmSync, mkdirSync, cpSync, existsSync, statSync, chmodSync } = require("node:fs");
+const { execSync } = require("node:child_process");
+
+const VERSION = "33.1";
+
+// `${process.platform}_${process.arch}`
+const MAC_ARM = "darwin_arm64";
+const MAC_X64 = "darwin_x64";
+const LNX_ARM = "linux_arm64";
+const LNX_X64 = "linux_x64";
+const WIN_X64 = "win32_x64";
+const WIN_ARM = "win32_arm64";
+
+const URL_MAP = {
+  [MAC_ARM]: `https://github.com/protocolbuffers/protobuf/releases/download/v${VERSION}/protoc-${VERSION}-osx-aarch_64.zip`,
+  [MAC_X64]: `https://github.com/protocolbuffers/protobuf/releases/download/v${VERSION}/protoc-${VERSION}-osx-x86_64.zip`,
+  [LNX_ARM]: `https://github.com/protocolbuffers/protobuf/releases/download/v${VERSION}/protoc-${VERSION}-linux-aarch_64.zip`,
+  [LNX_X64]: `https://github.com/protocolbuffers/protobuf/releases/download/v${VERSION}/protoc-${VERSION}-linux-x86_64.zip`,
+  [WIN_X64]: `https://github.com/protocolbuffers/protobuf/releases/download/v${VERSION}/protoc-${VERSION}-win64.zip`,
+  [WIN_ARM]: `https://github.com/protocolbuffers/protobuf/releases/download/v${VERSION}/protoc-${VERSION}-win64.zip`,
+};
+
+const SRC_BIN_MAP = {
+  [MAC_ARM]: "bin/protoc",
+  [MAC_X64]: "bin/protoc",
+  [LNX_ARM]: "bin/protoc",
+  [LNX_X64]: "bin/protoc",
+  [WIN_X64]: "bin/protoc.exe",
+  [WIN_ARM]: "bin/protoc.exe",
+};
+
+const DST_BIN_MAP = {
+  [MAC_ARM]: "yaakprotoc",
+  [MAC_X64]: "yaakprotoc",
+  [LNX_ARM]: "yaakprotoc",
+  [LNX_X64]: "yaakprotoc",
+  [WIN_X64]: "yaakprotoc.exe",
+  [WIN_ARM]: "yaakprotoc.exe",
+};
+
+const SHA256_MAP = {
+  [MAC_ARM]: "db7e66ff7f9080614d0f5505a6b0ac488cf89a15621b6a361672d1332ec2e14e",
+  [MAC_X64]: "e20b5f930e886da85e7402776a4959efb1ed60c57e72794bcade765e67abaa82",
+  [LNX_ARM]: "6018147740548e0e0f764408c87f4cd040e6e1c1203e13aeacaf811892b604f3",
+  [LNX_X64]: "f3340e28a83d1c637d8bafdeed92b9f7db6a384c26bca880a6e5217b40a4328b",
+  [WIN_X64]: "d7a207fb6eec0e4b1b6613be3b7d11905375b6fd1147a071116eb8e9f24ac53b",
+  [WIN_ARM]: "d7a207fb6eec0e4b1b6613be3b7d11905375b6fd1147a071116eb8e9f24ac53b",
+};
+
+const dstDir = path.join(__dirname, `..`, "crates-tauri", "yaak-app-client", "vendored", "protoc");
+const key = `${process.platform}_${process.env.YAAK_TARGET_ARCH ?? process.arch}`;
+console.log(`Vendoring protoc ${VERSION} for ${key}`);
+
+const url = URL_MAP[key];
+const tmpDir = path.join(__dirname, "tmp-protoc");
+const binSrc = path.join(tmpDir, SRC_BIN_MAP[key]);
+const binDst = path.join(dstDir, DST_BIN_MAP[key]);
+
+if (existsSync(binDst) && tryExecSync(`${binDst} --version`).trim().includes(VERSION)) {
+  console.log("Protoc already vendored");
+  return;
+}
+
+rmSync(tmpDir, { recursive: true, force: true });
+rmSync(dstDir, { recursive: true, force: true });
+mkdirSync(dstDir, { recursive: true });
+
+(async function () {
+  // Download GitHub release artifact
+  const { filePath } = await new Downloader({ url, directory: tmpDir }).download();
+
+  // Verify SHA256
+  const expectedHash = SHA256_MAP[key];
+  const fileBuffer = fs.readFileSync(filePath);
+  const actualHash = crypto.createHash("sha256").update(fileBuffer).digest("hex");
+  if (actualHash !== expectedHash) {
+    throw new Error(
+      `SHA256 mismatch for ${path.basename(filePath)}\n  expected: ${expectedHash}\n  actual:   ${actualHash}`,
+    );
+  }
+  console.log("SHA256 verified:", actualHash);
+
+  // Decompress to the same directory
+  await extractArchive(filePath, tmpDir);
+
+  // Copy binary
+  cpSync(binSrc, binDst);
+
+  // Copy other files
+  const includeSrc = path.join(tmpDir, "include");
+  const includeDst = path.join(dstDir, "include");
+  cpSync(includeSrc, includeDst, { recursive: true });
+  rmSync(tmpDir, { recursive: true, force: true });
+
+  // Make binary writable, so we can sign it during release
+  const stat = statSync(binDst);
+  const newMode = stat.mode | 0o200;
+  chmodSync(binDst, newMode);
+
+  console.log("Downloaded protoc to", binDst);
+})().catch((err) => console.log("Script failed:", err));
+
+function tryExecSync(cmd) {
+  try {
+    return execSync(cmd, { stdio: "pipe" }).toString("utf-8");
+  } catch {
+    return "";
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..077d0a8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "useDefineForClassFields": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["node"]
+  },
+  "exclude": ["flatpak", "npm", "crates/yaak-templates/pkg"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..52b943d
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig } from "vite-plus";
+
+export default defineConfig({
+  staged: {
+    "*": "vp check --fix",
+  },
+  // Generated output, reformatted only to be undone by the next regen. Read by every formatter
+  // entry point, including the `staged` task above.
+  fmt: {
+    ignorePatterns: [
+      "**/bindings/**",
+      "**/routeTree.gen.ts",
+      "crates/yaak-templates/pkg/**",
+      "crates/yaak-wasm/pkg/**",
+    ],
+  },
+  lint: {
+    ignorePatterns: [
+      "npm/**",
+      "crates/yaak-templates/pkg/**",
+      "crates/yaak-wasm/pkg/**",
+      "**/bindings/gen_*.ts",
+    ],
+    options: {
+      typeAware: true,
+    },
+    rules: {
+      "typescript/no-explicit-any": "error",
+    },
+  },
+  test: {
+    // Nested git worktrees live under .claude, and their tests are not this checkout's
+    exclude: ["**/node_modules/**", "**/flatpak/**", "**/.claude/**"],
+  },
+});

+ 💫 Yaak ➟ Desktop API Client 💫 +