Merge branch 'main' into fix/envelope-editor-mobile-view

Selecting password auth failed with a generic "Unauthorized" for users
who signed up via OAuth or passkey, with no way to set one.

Detect the missing password and email the existing reset link from the
signing dialog and security settings. Require a 2FA code and rate limit
update-password.

.github/ISSUE_TEMPLATE/deploy-provider-request.yml

@@ -0,0 +1,61 @@
+name: 'One-Click Deploy Provider Request'
+description: Request a new one-click deployment provider (Railway, Render, etc.) to be added to our README
+title: 'One-Click Deploy Provider Request: [Provider Name]'
+labels: ['deploy-provider-request']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for your interest in adding a one-click deploy option for Documenso!
+
+        Each provider we list requires us to create, test, and maintain a deployment template, which is ongoing work on top of everything else. To keep this manageable, we ask that providers (or users) **open an issue instead of a PR** so the community can signal interest.
+
+        **How this works:**
+
+        - 👍 this issue if you'd like to see Documenso deployable on this provider.
+        - If community interest is high enough, we'll consider adding it to the README.
+        - Opening an issue is not a guarantee of inclusion. PRs adding badges without a prior issue and demonstrated interest will be closed.
+  - type: input
+    attributes:
+      label: Provider Name
+      placeholder: e.g. Railway
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Provider Website
+      placeholder: e.g. https://railway.com
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Deploy/Template URL
+      description: A link to an existing deployment template or deploy button URL, if one exists.
+  - type: dropdown
+    attributes:
+      label: Who creates and maintains the deployment template?
+      options:
+        - The provider
+        - Me / the community
+        - Nobody yet
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Testing & Maintenance
+      description: Has the template been tested against the current Documenso release? How are updates handled when Documenso ships breaking changes (env vars, migrations, Docker changes)?
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Why this provider?
+      description: Tell us why Documenso users would benefit — existing user base, region coverage, free tier, etc.
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: Please check the boxes that apply to this request.
+      options:
+        - label: I have searched existing issues to make sure this provider has not already been requested.
+        - label: I understand that inclusion depends on community interest and is not guaranteed.
+        - label: I understand that PRs adding deploy badges without a prior issue will be closed.

.github/actions/node-install/action.yml

@@ -2,7 +2,7 @@ name: 'Setup node'
 inputs:
   node_version:
     required: false
-    default: v22.x
+    default: v24.x
 
 runs:
   using: 'composite'

README.md

@@ -107,7 +107,7 @@ Contact us if you are interested in our Enterprise plan for large organizations
 
 To run Documenso locally, you will need
 
-- Node.js (v22 or above)
+- Node.js (v24 or above)
 - Postgres SQL Database
 - Docker (optional)
 
@@ -186,21 +186,37 @@ For full instructions, requirements, and configuration details, see the [Self Ho
 
 ### One-Click Deploys
 
-#### Railway
+> [!NOTE]
+> Want to see another provider listed here? Please [open a provider request](https://github.com/documenso/documenso/issues/new?template=deploy-provider-request.yml) instead of a PR so the community can signal interest. PRs adding deploy badges without a prior issue will be closed.
 
-[![Deploy on Railway](https://railway.com/button.svg)](https://railway.com/deploy/DjrRRX?referralCode=EZR3s0&utm_medium=integration&utm_source=template&utm_campaign=generic)
-
-#### Render
-
-[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/documenso/documenso)
-
-#### Koyeb
-
-[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile)
-
-#### Elestio
-
-[![Deploy on Elestio](https://elest.io/images/logos/deploy-to-elestio-btn.png)](https://elest.io/open-source/documenso)
+<table>
+  <tr>
+    <td align="center" width="200">
+      <a href="https://railway.com/deploy/DjrRRX?referralCode=EZR3s0&utm_medium=integration&utm_source=template&utm_campaign=generic">
+        <img src="https://railway.com/button.svg" alt="Deploy on Railway" height="40" />
+      </a>
+    </td>
+    <td align="center" width="200">
+      <a href="https://render.com/deploy?repo=https://github.com/documenso/documenso">
+        <img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" height="40" />
+      </a>
+    </td>
+    <td align="center" width="200">
+      <a href="https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile">
+        <img src="https://www.koyeb.com/static/images/deploy/button.svg" alt="Deploy to Koyeb" height="40" />
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="200">
+      <a href="https://elest.io/open-source/documenso">
+        <img src="https://elest.io/images/logos/deploy-to-elestio-btn.png" alt="Deploy on Elestio" height="40" />
+      </a>
+    </td>
+    <td align="center" width="200"></td>
+    <td align="center" width="200"></td>
+  </tr>
+</table>
 
 ## Security
 

apps/docs/content/docs/developers/api/teams.mdx

@@ -95,7 +95,7 @@ Documents created with a team token belong to that team:
 <Tab value="curl">
 ```bash
 curl -X POST "https://app.documenso.com/api/v2/envelope/create" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx" \
+  -H "Authorization: api_xxxxxxxxxxxxxxxx" \
   -H "Content-Type: multipart/form-data" \
   -F 'payload={
     "type": "DOCUMENT",
@@ -157,11 +157,11 @@ Retrieve all documents belonging to the team:
 ```bash
 # List all team documents
 curl -X GET "https://app.documenso.com/api/v2/envelope" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx"
+  -H "Authorization: api_xxxxxxxxxxxxxxxx"
 
 # Filter by status
 curl -X GET "https://app.documenso.com/api/v2/envelope?status=PENDING" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx"
+  -H "Authorization: api_xxxxxxxxxxxxxxxx"
 ````
 
 </Tab>
@@ -191,7 +191,7 @@ Templates created with a team token are shared across the team.
 <Tab value="curl">
 ```bash
 curl -X POST "https://app.documenso.com/api/v2/template/create" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx" \
+  -H "Authorization: api_xxxxxxxxxxxxxxxx" \
   -H "Content-Type: multipart/form-data" \
   -F 'payload={
     "title": "NDA Template",
@@ -269,7 +269,7 @@ console.log('Created team template:', template.id);
 <Tab value="curl">
 ```bash
 curl -X GET "https://app.documenso.com/api/v2/template" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx"
+  -H "Authorization: api_xxxxxxxxxxxxxxxx"
 ````
 
 </Tab>

apps/docs/content/docs/developers/examples/common-workflows.mdx

@@ -51,6 +51,7 @@ async function createAndSendDocument(
   pdfBuffer: Buffer,
   filename: string,
   title: string,
+  externalId: string,
   recipients: Recipient[],
 ): Promise<CreateAndSendResult> {
   const recipientPayload = recipients.map((recipient, index) => ({
@@ -89,6 +90,7 @@ async function createAndSendDocument(
     JSON.stringify({
       type: 'DOCUMENT',
       title,
+      externalId,
       recipients: recipientPayload,
       meta: {
         subject: `Please sign: ${title}`,
@@ -145,6 +147,7 @@ const result = await createAndSendDocument(
   pdfBuffer,
   'contract.pdf',
   'Service Agreement',
+  'nda-contract-ndac214',
   [
     { email: 'client@example.com', name: 'John Smith', role: 'SIGNER' },
     { email: 'manager@company.com', name: 'Jane Doe', role: 'SIGNER' },
@@ -172,6 +175,7 @@ ENVELOPE_RESPONSE=$(curl -s -X POST "${BASE_URL}/envelope/create" \
   -F 'payload={
     "type": "DOCUMENT",
     "title": "Service Agreement",
+    "externalId": "nda-contract-ndac214",
     "recipients": [
       {
         "email": "client@example.com",
@@ -241,6 +245,8 @@ echo $DISTRIBUTE_RESPONSE | jq '.recipients[] | {email, signingUrl}'
 </Tab>
 </Tabs>
 
+`externalId` is your application's own reference for this document, such as an invoice number or a database key. Documenso stores it on the envelope and repeats it in every webhook as `payload.externalId`, so your handler can match the event to your record without keeping a lookup table of Documenso IDs. To react when everyone has signed, see [Workflow 4](#workflow-4-wait-for-completion-with-webhooks). To fetch the finished PDF, see [Workflow 5](#workflow-5-download-signed-documents).
+
 ---
 
 ## Workflow 2: Create Document from Template with Custom Data

apps/docs/content/docs/self-hosting/deployment/docker.mdx

@@ -102,7 +102,7 @@ See [Email Configuration](/docs/self-hosting/configuration/email) for other tran
 | Variable                                    | Description                                                    | Default                   |
 | ------------------------------------------- | -------------------------------------------------------------- | ------------------------- |
 | `PORT`                                      | Port the application listens on                                | `3000`                    |
-| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`      | Path to signing certificate inside container                   | `/opt/documenso/cert.p12` |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`      | Path to signing certificate inside container — set to the volume-mount path (e.g. `/opt/documenso/cert.p12`). Only Docker Compose defaults this; plain `docker run` must set it explicitly | -                         |
 | `NEXT_PRIVATE_SIGNING_PASSPHRASE`           | Passphrase for the signing certificate                         | -                         |
 | `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`  | Base64-encoded `.p12` certificate (alternative to file path)   | -                         |
 | `NEXT_PUBLIC_UPLOAD_TRANSPORT`              | Document storage: `database` or `s3`                           | `database`                |
@@ -136,6 +136,7 @@ docker run -d \
   -e NEXT_PUBLIC_WEBAPP_URL="https://sign.example.com" \
   -e NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000" \
   -e NEXT_PRIVATE_DATABASE_URL="postgresql://user:password@db-host:5432/documenso" \
+  -e NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH="/opt/documenso/cert.p12" \
   -e NEXT_PRIVATE_SIGNING_PASSPHRASE="your-certificate-password" \
   -e NEXT_PRIVATE_SMTP_TRANSPORT="smtp-auth" \
   -e NEXT_PRIVATE_SMTP_HOST="smtp.example.com" \
@@ -154,6 +155,12 @@ A signing certificate is required for document signing. You have two options for
 - **Volume mount** — mount a `.p12` file from the host into the container at `/opt/documenso/cert.p12` (shown above). This is the simplest approach for small to moderate deployments.
 - **Base64-encoded contents** — set `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS` with the base64-encoded certificate string. Use this when file mounting is not available (e.g., Railway, Vercel).
 
+<Callout type="warn">
+  Plain `docker run` deployments must set `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH` explicitly. This
+  prevents production deployments from accidentally using the insecure example certificate.
+  Docker Compose sets the file path for you.
+</Callout>
+
 For production deployments that require Adobe Approved Trust List recognition, consider using a [Google Cloud HSM](/docs/self-hosting/configuration/signing-certificate/google-cloud-hsm) or another external HSM.
 
 <Callout type="warn">
@@ -178,6 +185,7 @@ NEXT_PUBLIC_WEBAPP_URL=https://sign.example.com
 NEXT_PRIVATE_INTERNAL_WEBAPP_URL=http://localhost:3000
 NEXT_PRIVATE_DATABASE_URL=postgresql://user:password@db-host:5432/documenso
 NEXT_PRIVATE_DIRECT_DATABASE_URL=postgresql://user:password@db-host:5432/documenso
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=/opt/documenso/cert.p12
 NEXT_PRIVATE_SIGNING_PASSPHRASE=your-certificate-password
 NEXT_PRIVATE_SMTP_TRANSPORT=smtp-auth
 NEXT_PRIVATE_SMTP_HOST=smtp.example.com
@@ -203,6 +211,12 @@ docker run -d \
 
 Documenso provides health check endpoints for monitoring:
 
+<Callout type="info">
+  If a certificate is mounted but signing fails, ensure `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`
+  explicitly points to its path inside the container. Production does not use the development
+  example certificate as a fallback.
+</Callout>
+
 | Endpoint                  | Purpose                                                        |
 | ------------------------- | -------------------------------------------------------------- |
 | `/api/health`             | Checks database connectivity and certificate status            |

apps/docs/content/docs/self-hosting/deployment/manual.mdx

@@ -14,8 +14,8 @@ import { Step, Steps } from 'fumadocs-ui/components/steps';
 
 ## Prerequisites
 
-- Node.js 22 or later
-- npm 11 or later
+- Node.js 24 or later
+- npm 11.17 or later
 - PostgreSQL 14 or later
 - A Linux server (for systemd service setup)
 

apps/docs/content/docs/self-hosting/getting-started/requirements.mdx

@@ -141,8 +141,8 @@ If building from source (not using Docker images):
 
 | Requirement | Version |
 | ----------- | ------- |
-| Node.js     | 22+     |
-| npm         | 11+     |
+| Node.js     | 24+     |
+| npm         | 11.17+  |
 
 ---
 
@@ -169,7 +169,7 @@ Documenso runs on:
 | MySQL/MariaDB  | PostgreSQL-specific features required |
 | SQLite         | Not suitable for production workloads |
 | MongoDB        | Relational database required          |
-| Node.js < 22   | Modern JavaScript features required   |
+| Node.js < 24   | Modern JavaScript features required   |
 
 ---
 

apps/docs/content/docs/users/organisations/preferences/document.mdx

@@ -34,7 +34,7 @@ To access the preferences, navigate to either the organisation or teams settings
 | **Default Recipients**               | Recipients that are automatically added to new documents. Can be overridden per document.                                       |
 | **Default Envelope Expiration**      | How long recipients have to sign before the signing link expires. See [recipient expiration](/docs/users/documents/advanced/recipient-expiration). |
 | **Default Signing Reminders**        | When and how often to email recipients who have not yet signed. See [signing reminders](/docs/users/documents/advanced/signing-reminders). |
-| **Delegate Document Ownership**      | Allow team API tokens to delegate document ownership to another team member.                                                    |
+| **Delegate Document Ownership**      | By default, documents created with a team API token are owned by the user who created the token. Enable this setting to let supported API requests assign ownership to another team member.                                                    |
 | **AI Features**                      | Enable AI-powered features such as automatic recipient detection. Only shown if AI features are configured on the instance.     |
 
 Document visibility, language, and signature settings can be overridden per document.

apps/docs/package.json

@@ -15,7 +15,7 @@
     "fumadocs-ui": "16.14.3",
     "lucide-react": "^0.563.0",
     "mermaid": "^11.12.2",
-    "next": "16.3.0",
+    "next": "^16.3.3",
     "next-plausible": "^3.12.5",
     "next-themes": "^0.4.6",
     "react": "^19.2.4",

apps/openpage-api/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.7.2",
-    "next": "16.3.0"
+    "next": "^16.3.3"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/remix/Dockerfile.bun

@@ -1,25 +0,0 @@
-FROM oven/bun:1 AS dependencies-env
-COPY . /app
-
-FROM dependencies-env AS development-dependencies-env
-COPY ./package.json bun.lockb /app/
-WORKDIR /app
-RUN bun i --frozen-lockfile
-
-FROM dependencies-env AS production-dependencies-env
-COPY ./package.json bun.lockb /app/
-WORKDIR /app
-RUN bun i --production
-
-FROM dependencies-env AS build-env
-COPY ./package.json bun.lockb /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN bun run build
-
-FROM dependencies-env
-COPY ./package.json bun.lockb /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["bun", "run", "start"]

apps/remix/Dockerfile.pnpm

@@ -1,26 +0,0 @@
-FROM node:20-alpine AS dependencies-env
-RUN npm i -g pnpm
-COPY . /app
-
-FROM dependencies-env AS development-dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-WORKDIR /app
-RUN pnpm i --frozen-lockfile
-
-FROM dependencies-env AS production-dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-WORKDIR /app
-RUN pnpm i --prod --frozen-lockfile
-
-FROM dependencies-env AS build-env
-COPY ./package.json pnpm-lock.yaml /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN pnpm build
-
-FROM dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["pnpm", "start"]

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -71,6 +72,7 @@ export const EnvelopeDistributeDialog = ({
   const { toast } = useToast();
   const { t, i18n } = useLingui();
   const navigate = useNavigate();
+  const analytics = useAnalytics();
 
   const [isOpen, setIsOpen] = useState(false);
   const [isSyncing, setIsSyncing] = useState(false);
@@ -200,6 +202,12 @@ export const EnvelopeDistributeDialog = ({
     } catch (err) {
       const error = AppError.parseError(err);
 
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'distribute_document',
+        envelopeId: envelope.id,
+      });
+
       const errorMessage = getDistributeErrorMessage(error.code);
 
       toast({

apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { AppError } from '@documenso/lib/errors/app-error';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
@@ -51,6 +52,7 @@ export const EnvelopeRedistributeDialog = ({ envelope, envelopeType, trigger }:
 
   const { toast } = useToast();
   const { t, i18n } = useLingui();
+  const analytics = useAnalytics();
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -95,6 +97,13 @@ export const EnvelopeRedistributeDialog = ({ envelope, envelopeType, trigger }:
       setIsOpen(false);
     } catch (err) {
       const error = AppError.parseError(err);
+
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'redistribute_document',
+        envelopeId: envelope.id,
+      });
+
       const errorMessage = getDistributeErrorMessage(error.code);
 
       toast({

apps/remix/app/components/dialogs/envelopes-bulk-download-dialog.tsx

@@ -290,10 +290,11 @@ export const EnvelopesBulkDownloadDialog = ({
         {isOverDownloadLimit && (
           <Alert variant="warning">
             <AlertDescription>
-              <Trans>
-                You can download up to {MAX_BULK_DOWNLOAD_ENVELOPES} documents at a time. Deselect some documents to
-                continue.
-              </Trans>
+              <Plural
+                value={MAX_BULK_DOWNLOAD_ENVELOPES}
+                one="You can download up to # document at a time. Deselect some documents to continue."
+                other="You can download up to # documents at a time. Deselect some documents to continue."
+              />
             </AlertDescription>
           </Alert>
         )}

apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx

@@ -1,4 +1,7 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TBulkSendCsvError } from '@documenso/lib/server-only/template/validate-bulk-send-csv';
 import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
@@ -15,9 +18,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
+import { Plural, Trans } from '@lingui/react/macro';
 import { File as FileIcon, Upload, X } from 'lucide-react';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { useCurrentTeam } from '~/providers/team';
@@ -29,6 +34,8 @@ const ZBulkSendFormSchema = z.object({
 
 type TBulkSendFormSchema = z.infer<typeof ZBulkSendFormSchema>;
 
+type TBulkSendValidationError = TBulkSendCsvError | { type: 'UPLOAD_ERROR'; code: string };
+
 export type TemplateBulkSendDialogProps = {
   templateId: number;
   recipients: Array<{ email: string; name?: string | null }>;
@@ -42,6 +49,9 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
 
   const team = useCurrentTeam();
 
+  const [open, setOpen] = useState(false);
+  const [validationError, setValidationError] = useState<TBulkSendValidationError | null>(null);
+
   const form = useForm<TBulkSendFormSchema>({
     resolver: zodResolver(ZBulkSendFormSchema),
     defaultValues: {
@@ -51,6 +61,20 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
 
   const { mutateAsync: uploadBulkSend } = trpc.template.uploadBulkSend.useMutation();
 
+  const onOpenChange = (value: boolean) => {
+    if (form.formState.isSubmitting) {
+      return;
+    }
+
+    setOpen(value);
+
+    if (!value) {
+      setValidationError(null);
+
+      form.reset();
+    }
+  };
+
   const onDownloadTemplate = () => {
     const headers = recipients.flatMap((_, index) => [`recipient_${index + 1}_email`, `recipient_${index + 1}_name`]);
 
@@ -71,36 +95,44 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
   };
 
   const onSubmit = async (values: TBulkSendFormSchema) => {
+    setValidationError(null);
+
     try {
       const csv = await values.file.text();
 
-      await uploadBulkSend({
+      const result = await uploadBulkSend({
         templateId,
         teamId: team?.id,
         csv: csv,
         sendImmediately: values.sendImmediately,
       });
 
+      if (!result.success) {
+        setValidationError(result.error);
+
+        return;
+      }
+
       toast({
         title: _(msg`Success`),
         description: _(msg`Your bulk send has been initiated. You will receive an email notification upon completion.`),
       });
 
+      setOpen(false);
       form.reset();
+
       onSuccess?.();
     } catch (err) {
       console.error(err);
 
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`Failed to upload CSV. Please check the file format and try again.`),
-        variant: 'destructive',
-      });
+      const error = AppError.parseError(err);
+
+      setValidationError({ type: 'UPLOAD_ERROR', code: error.code });
     }
   };
 
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="outline" className="shrink-0" size="sm">
@@ -174,7 +206,10 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
                             className="hidden"
                             onChange={(e) => {
                               const file = e.target.files?.[0];
+
                               if (file) {
+                                setValidationError(null);
+
                                 onChange(file);
                               }
                             }}
@@ -195,7 +230,11 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
                           type="button"
                           variant="link"
                           className="p-0 text-destructive text-xs hover:text-destructive"
-                          onClick={() => onChange(null)}
+                          onClick={() => {
+                            setValidationError(null);
+
+                            form.resetField('file');
+                          }}
                           disabled={form.formState.isSubmitting}
                         >
                           <X className="h-4 w-4" />
@@ -218,6 +257,72 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
               )}
             />
 
+            {validationError !== null && (
+              <Alert variant="destructive">
+                <AlertDescription className="max-h-32 overflow-y-auto">
+                  {match(validationError)
+                    .with({ type: 'PARSE_ERROR' }, () => (
+                      <Trans>The CSV could not be parsed. Please check the file format and try again.</Trans>
+                    ))
+                    .with({ type: 'EMPTY' }, () => (
+                      <Trans>
+                        The CSV does not contain any rows. Please add at least one row of recipient details.
+                      </Trans>
+                    ))
+                    .with({ type: 'ROW_LIMIT_EXCEEDED' }, ({ rowCount, maxRows }) => (
+                      <Trans>
+                        <Plural value={rowCount} one="The CSV contains # row." other="The CSV contains # rows." />{' '}
+                        <Plural
+                          value={maxRows}
+                          one="A maximum of # row is allowed per upload."
+                          other="A maximum of # rows is allowed per upload."
+                        />
+                      </Trans>
+                    ))
+                    .with({ type: 'MISSING_COLUMNS' }, ({ missingColumns }) => (
+                      <>
+                        <Trans>
+                          The CSV is missing the following required columns. Please download the template CSV for the
+                          correct format.
+                        </Trans>
+
+                        <ul className="mt-1 list-inside list-disc">
+                          {missingColumns.map((column) => (
+                            <li key={column} className="font-mono">
+                              {column}
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    ))
+                    .with({ type: 'INVALID_RECIPIENTS' }, ({ rowErrors }) => (
+                      <>
+                        <Trans>The CSV contains invalid recipient emails. Please fix the following rows:</Trans>
+
+                        <ul className="mt-1 list-inside list-disc">
+                          {rowErrors.map((rowError, index) => (
+                            <li key={index}>
+                              <Trans>
+                                Row {rowError.row}: <span className="font-mono">{rowError.column}</span> must be a valid
+                                email or empty
+                              </Trans>
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    ))
+                    .with({ type: 'UPLOAD_ERROR' }, ({ code }) =>
+                      code === AppErrorCode.LIMIT_EXCEEDED ? (
+                        <Trans>The CSV exceeds the maximum file size.</Trans>
+                      ) : (
+                        <Trans>Failed to upload CSV. Please check the file format and try again.</Trans>
+                      ),
+                    )
+                    .exhaustive()}
+                </AlertDescription>
+              </Alert>
+            )}
+
             <FormField
               control={form.control}
               name="sendImmediately"
@@ -240,7 +345,12 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
             />
 
             <DialogFooter className="mt-4">
-              <Button variant="secondary" onClick={() => form.reset()} type="button">
+              <Button
+                variant="secondary"
+                onClick={() => onOpenChange(false)}
+                disabled={form.formState.isSubmitting}
+                type="button"
+              >
                 <Trans>Cancel</Trans>
               </Button>
 

apps/remix/app/components/embed/authoring/configure-document-recipients.tsx

@@ -18,6 +18,8 @@ import { useCallback, useRef } from 'react';
 import type { Control } from 'react-hook-form';
 import { useFieldArray, useFormContext, useFormState } from 'react-hook-form';
 
+import { useCspNonce } from '~/utils/nonce';
+
 import { useConfigureDocument } from './configure-document-context';
 import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
 
@@ -32,6 +34,7 @@ export interface ConfigureDocumentRecipientsProps {
 export const ConfigureDocumentRecipients = ({ control, isSubmitting }: ConfigureDocumentRecipientsProps) => {
   const { _ } = useLingui();
   const { isTemplate } = useConfigureDocument();
+  const cspNonce = useCspNonce();
 
   const $sensorApi = useRef<SensorAPI | null>(null);
 
@@ -212,6 +215,7 @@ export const ConfigureDocumentRecipients = ({ control, isSubmitting }: Configure
       />
 
       <DragDropContext
+        nonce={cspNonce}
         onDragEnd={onDragEnd}
         sensors={[
           (api: SensorAPI) => {

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
@@ -77,6 +78,7 @@ export const EmbedDirectTemplateClientPage = ({
 }: EmbedDirectTemplateClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const [searchParams] = useSearchParams();
 
@@ -264,6 +266,13 @@ export const EmbedDirectTemplateClientPage = ({
       const error = AppError.parseError(err);
       const errorMessage = getDirectTemplateErrorMessage(error.code);
 
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'direct_template',
+        recipientId: recipient.id,
+        envelopeId,
+      });
+
       toast({
         title: _(errorMessage.title),
         description: _(errorMessage.description),
@@ -308,6 +317,14 @@ export const EmbedDirectTemplateClientPage = ({
       }
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'embed_init',
+        recipientId: recipient.id,
+        envelopeId,
+      });
+
       setHasFinishedInit(true);
     }
 

apps/remix/app/components/embed/embed-document-signing-page-v1.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
@@ -75,6 +76,7 @@ export const EmbedSignDocumentV1ClientPage = ({
 }: EmbedSignDocumentV1ClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const { fullName, email, signature, setFullName, setEmail, setSignature } = useRequiredDocumentSigningContext();
 
@@ -154,6 +156,14 @@ export const EmbedSignDocumentV1ClientPage = ({
 
       setHasCompletedDocument(true);
     } catch (err) {
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'complete_document',
+        recipientId: recipient.id,
+        documentId,
+        envelopeId,
+      });
+
       if (window.parent) {
         window.parent.postMessage(
           {
@@ -236,6 +246,15 @@ export const EmbedSignDocumentV1ClientPage = ({
       }
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'embed_init',
+        recipientId: recipient.id,
+        documentId,
+        envelopeId,
+      });
+
       setHasFinishedInit(true);
     }
 

apps/remix/app/components/embed/embed-document-signing-page-v2.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { ZSignDocumentEmbedDataSchema } from '@documenso/lib/types/embed-document-sign-schema';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
@@ -25,6 +26,7 @@ export const EmbedSignDocumentV2ClientPage = ({
   allowWhitelabelling = false,
 }: EmbedSignDocumentV2ClientPageProps) => {
   const { _ } = useLingui();
+  const analytics = useAnalytics();
 
   const { envelope, recipient, envelopeData, setFullName, setEmail, fullName, email } =
     useRequiredEnvelopeSigningContext();
@@ -170,6 +172,14 @@ export const EmbedSignDocumentV2ClientPage = ({
       }
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'embed_init',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      });
+
       setHasFinishedInit(true);
     }
 

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
@@ -57,6 +58,7 @@ export const MultiSignDocumentSigningView = ({
 }: MultiSignDocumentSigningViewProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const { fullName, email, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
 
@@ -101,6 +103,13 @@ export const MultiSignDocumentSigningView = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'sign_field',
+        recipientId,
+        documentId: document?.id,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while signing the document.`),
@@ -120,6 +129,13 @@ export const MultiSignDocumentSigningView = ({
       }
 
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'remove_field',
+        recipientId,
+        documentId: document?.id,
+      });
     }
   };
 
@@ -140,6 +156,13 @@ export const MultiSignDocumentSigningView = ({
         recipientId,
       });
     } catch (err) {
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'complete_document',
+        recipientId,
+        documentId: document?.id,
+      });
+
       onDocumentError?.();
 
       const error = AppError.parseError(err);

apps/remix/app/components/forms/2fa/two-factor-code-dialog.tsx

@@ -0,0 +1,158 @@
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { Trans } from '@lingui/react/macro';
+import type React from 'react';
+import { useState } from 'react';
+import { type FieldValues, type Path, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+
+/**
+ * Schema for forms that accept a two factor code. Compose with `.extend()` or `.merge()`.
+ */
+export const ZTwoFactorCodeFieldSchema = z.object({
+  totpCode: z.string().trim().optional(),
+  backupCode: z.string().trim().optional(),
+});
+
+export type TTwoFactorCodeFieldSchema = z.infer<typeof ZTwoFactorCodeFieldSchema>;
+
+export const hasTwoFactorCode = (data: TTwoFactorCodeFieldSchema) => !!data.totpCode || !!data.backupCode;
+
+type TwoFactorMethod = 'totp' | 'backup';
+
+export type TwoFactorCodeDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  isSubmitting?: boolean;
+  submitLabel: React.ReactNode;
+
+  /**
+   * Called when the user submits the code. Typically the parent form's submit handler.
+   */
+  onSubmit: () => void;
+};
+
+/**
+ * Collects a TOTP or backup code on top of an existing form, mirroring the
+ * sign in and disable 2FA dialogs.
+ *
+ * Must be rendered inside a `<Form>` whose values include `totpCode` and `backupCode`.
+ */
+export const TwoFactorCodeDialog = <T extends FieldValues & TTwoFactorCodeFieldSchema>({
+  open,
+  onOpenChange,
+  isSubmitting,
+  submitLabel,
+  onSubmit,
+}: TwoFactorCodeDialogProps) => {
+  const form = useFormContext<T>();
+
+  const [method, setMethod] = useState<TwoFactorMethod>('totp');
+
+  const totpCodeName = 'totpCode' as Path<T>;
+  const backupCodeName = 'backupCode' as Path<T>;
+
+  const onToggleMethod = () => {
+    form.resetField(totpCodeName);
+    form.resetField(backupCodeName);
+
+    setMethod((current) => (current === 'totp' ? 'backup' : 'totp'));
+  };
+
+  const handleOpenChange = (value: boolean) => {
+    if (isSubmitting) {
+      return;
+    }
+
+    if (!value) {
+      form.resetField(totpCodeName);
+      form.resetField(backupCodeName);
+      setMethod('totp');
+    }
+
+    onOpenChange(value);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Two-Factor Authentication</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            {method === 'totp' ? (
+              <Trans>Enter the code from your authenticator app to continue.</Trans>
+            ) : (
+              <Trans>Enter one of your backup codes to continue.</Trans>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <fieldset disabled={isSubmitting}>
+          {method === 'totp' && (
+            <FormField
+              control={form.control}
+              name={totpCodeName}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <PinInput {...field} value={field.value ?? ''} maxLength={6} autoFocus>
+                      {Array(6)
+                        .fill(null)
+                        .map((_, i) => (
+                          <PinInputGroup key={i}>
+                            <PinInputSlot index={i} />
+                          </PinInputGroup>
+                        ))}
+                    </PinInput>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {method === 'backup' && (
+            <FormField
+              control={form.control}
+              name={backupCodeName}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Backup Code</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="text" autoComplete="off" autoFocus {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          <DialogFooter className="mt-4">
+            <Button type="button" variant="secondary" onClick={onToggleMethod}>
+              {method === 'totp' ? <Trans>Use Backup Code</Trans> : <Trans>Use Authenticator</Trans>}
+            </Button>
+
+            <Button type="button" loading={isSubmitting} onClick={onSubmit}>
+              {submitLabel}
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/forms/password-setup-request-button.tsx

@@ -0,0 +1,53 @@
+import { usePasswordSetupRequest } from '@documenso/lib/client-only/hooks/use-password-setup-request';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { CheckIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+/**
+ * Compact "send me a setup link" button that reports via toast, for settings
+ * cards where the surrounding layout provides the explanation.
+ */
+export const PasswordSetupRequestButton = () => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { user } = useSession();
+
+  const { requestSetupLink, isPending, isSuccess } = usePasswordSetupRequest({
+    onSuccess: () => {
+      toast({
+        title: _(msg`Check your email`),
+        description: _(msg`We've sent a link to ${user.email}. Follow it to set your password.`),
+        duration: 5000,
+      });
+    },
+    onError: (errorCode) => {
+      toast({
+        title: _(msg`An error occurred`),
+        description: match(errorCode)
+          .with('SIGNIN_DISABLED', () => _(msg`Password sign in is disabled for this instance.`))
+          .otherwise(() => _(msg`We were unable to send the email. Please try again later.`)),
+        variant: 'destructive',
+      });
+    },
+  });
+
+  if (isSuccess) {
+    return (
+      <Button variant="outline" className="flex-shrink-0 bg-background" disabled>
+        <CheckIcon className="mr-2 h-4 w-4" />
+        <Trans>Link sent</Trans>
+      </Button>
+    );
+  }
+
+  return (
+    <Button variant="outline" className="flex-shrink-0 bg-background" loading={isPending} onClick={requestSetupLink}>
+      <Trans>Send setup link</Trans>
+    </Button>
+  );
+};

apps/remix/app/components/forms/password-setup-request.tsx

@@ -0,0 +1,61 @@
+import { usePasswordSetupRequest } from '@documenso/lib/client-only/hooks/use-password-setup-request';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { match } from 'ts-pattern';
+
+export type PasswordSetupRequestProps = {
+  className?: string;
+};
+
+/**
+ * Inline "send me a setup link" control with its own sent/error states, for
+ * contexts like dialogs where a toast would be missed.
+ */
+export const PasswordSetupRequest = ({ className }: PasswordSetupRequestProps) => {
+  const { _ } = useLingui();
+  const { user } = useSession();
+
+  const { requestSetupLink, isPending, isSuccess, errorCode } = usePasswordSetupRequest();
+
+  if (isSuccess) {
+    return (
+      <Alert className={className} variant="neutral">
+        <AlertTitle>
+          <Trans>Check your email</Trans>
+        </AlertTitle>
+        <AlertDescription>
+          <Trans>
+            We've sent a link to {user.email}. Follow it to set your password, then sign in again to continue.
+          </Trans>
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {errorCode && (
+        <Alert className="mb-4" variant="destructive">
+          <AlertTitle>
+            <Trans>An error occurred</Trans>
+          </AlertTitle>
+          <AlertDescription>
+            {match(errorCode)
+              .with('SIGNIN_DISABLED', () =>
+                _(msg`Password sign in is disabled for this instance. Please contact support.`),
+              )
+              .otherwise(() => _(msg`We were unable to send the email. Please try again or contact support.`))}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <Button type="button" loading={isPending} onClick={requestSetupLink}>
+        <Trans>Send setup link</Trans>
+      </Button>
+    </div>
+  );
+};

apps/remix/app/components/forms/password.tsx

@@ -1,6 +1,6 @@
 import { authClient } from '@documenso/auth/client';
 import type { SessionUser } from '@documenso/auth/server/lib/session/session';
-import { AppError } from '@documenso/lib/errors/app-error';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { ZCurrentPasswordSchema, ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -11,20 +11,21 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
-import { z } from 'zod';
+import type { z } from 'zod';
 
-export const ZPasswordFormSchema = z
-  .object({
-    currentPassword: ZCurrentPasswordSchema,
-    password: ZPasswordSchema,
-    repeatedPassword: ZPasswordSchema,
-  })
-  .refine((data) => data.password === data.repeatedPassword, {
-    message: 'Passwords do not match',
-    path: ['repeatedPassword'],
-  });
+import { hasTwoFactorCode, TwoFactorCodeDialog, ZTwoFactorCodeFieldSchema } from './2fa/two-factor-code-dialog';
+
+export const ZPasswordFormSchema = ZTwoFactorCodeFieldSchema.extend({
+  currentPassword: ZCurrentPasswordSchema,
+  password: ZPasswordSchema,
+  repeatedPassword: ZPasswordSchema,
+}).refine((data) => data.password === data.repeatedPassword, {
+  message: 'Passwords do not match',
+  path: ['repeatedPassword'],
+});
 
 export type TPasswordFormSchema = z.infer<typeof ZPasswordFormSchema>;
 
@@ -33,29 +34,51 @@ export type PasswordFormProps = {
   user: SessionUser;
 };
 
-export const PasswordForm = ({ className }: PasswordFormProps) => {
+export const PasswordForm = ({ className, user }: PasswordFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
+  const [isTwoFactorDialogOpen, setIsTwoFactorDialogOpen] = useState(false);
+
   const form = useForm<TPasswordFormSchema>({
     values: {
       currentPassword: '',
       password: '',
       repeatedPassword: '',
+      totpCode: '',
+      backupCode: '',
     },
     resolver: zodResolver(ZPasswordFormSchema),
   });
 
   const isSubmitting = form.formState.isSubmitting;
 
-  const onFormSubmit = async ({ currentPassword, password }: TPasswordFormSchema) => {
+  const onFormSubmit = async (values: TPasswordFormSchema) => {
+    const { currentPassword, password, totpCode, backupCode } = values;
+
+    // Collect the 2FA code in a dialog once the password fields are valid.
+    if (user.twoFactorEnabled && !hasTwoFactorCode(values)) {
+      if (isTwoFactorDialogOpen) {
+        const message = _(msg`A code is required`);
+
+        form.setError('totpCode', { message });
+        form.setError('backupCode', { message });
+      }
+
+      setIsTwoFactorDialogOpen(true);
+      return;
+    }
+
     try {
       await authClient.emailPassword.updatePassword({
         currentPassword,
         password,
+        totpCode: totpCode || undefined,
+        backupCode: backupCode || undefined,
       });
 
       form.reset();
+      setIsTwoFactorDialogOpen(false);
 
       toast({
         title: _(msg`Password updated`),
@@ -66,9 +89,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
       const error = AppError.parseError(err);
 
       const errorMessage = match(error.code)
-        .with('NO_PASSWORD', () => msg`User has no password.`)
-        .with('INCORRECT_PASSWORD', () => msg`Current password is incorrect.`)
-        .with('SAME_PASSWORD', () => msg`Your new password cannot be the same as your old password.`)
+        .with(AppErrorCode.NO_PASSWORD, () => msg`User has no password.`)
+        .with(AppErrorCode.INCORRECT_PASSWORD, () => msg`Current password is incorrect.`)
+        .with(AppErrorCode.SAME_PASSWORD, () => msg`Your new password cannot be the same as your old password.`)
+        .with(
+          AppErrorCode.INCORRECT_TWO_FACTOR_CODE,
+          AppErrorCode.TWO_FACTOR_MISSING_CREDENTIALS,
+          () => msg`The two factor code you provided is invalid. Please try again.`,
+        )
         .otherwise(
           () => msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
         );
@@ -83,7 +111,12 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
 
   return (
     <Form {...form}>
-      <form className={cn('flex w-full flex-col gap-y-4', className)} onSubmit={form.handleSubmit(onFormSubmit)}>
+      {/* method="post" so a pre-hydration native submit can't leak passwords into the URL. */}
+      <form
+        method="post"
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
         <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
           <FormField
             control={form.control}
@@ -140,6 +173,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           </Button>
         </div>
       </form>
+
+      <TwoFactorCodeDialog<TPasswordFormSchema>
+        open={isTwoFactorDialogOpen}
+        onOpenChange={setIsTwoFactorDialogOpen}
+        isSubmitting={isSubmitting}
+        submitLabel={<Trans>Update password</Trans>}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      />
     </Form>
   );
 };

apps/remix/app/components/general/app-command-menu.tsx

@@ -17,7 +17,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
+import { Plural, Trans } from '@lingui/react/macro';
 import { keepPreviousData } from '@tanstack/react-query';
 import { defaultFilter as commandScore } from 'cmdk';
 import {
@@ -596,9 +596,21 @@ export const AppCommandMenu = ({ open, onOpenChange }: AppCommandMenuProps) => {
 
             <span className="ml-auto text-muted-foreground text-xs">
               {hasValidSearch ? (
-                <Trans>{formatChipCount(totalVisibleCount, isVisibleCountCapped)} results</Trans>
+                isVisibleCountCapped ? (
+                  <Trans>{formatChipCount(totalVisibleCount, isVisibleCountCapped)} results</Trans>
+                ) : (
+                  <Plural
+                    value={totalVisibleCount}
+                    one="# result"
+                    other="# results"
+                  />
+                )
               ) : (
-                <Trans>{totalVisibleCount} items</Trans>
+                <Plural
+                  value={totalVisibleCount}
+                  one="# item"
+                  other="# items"
+                />
               )}
             </span>
           </div>

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { AppError } from '@documenso/lib/errors/app-error';
 import type { TTemplate } from '@documenso/lib/types/template';
@@ -41,6 +42,7 @@ export const DirectTemplatePageView = ({
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const { email, fullName, setEmail } = useRequiredDocumentSigningContext();
   const { recipient, setRecipient } = useRequiredDocumentSigningAuthContext();
@@ -124,6 +126,13 @@ export const DirectTemplatePageView = ({
       const error = AppError.parseError(err);
       const errorMessage = getDirectTemplateErrorMessage(error.code);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'direct_template',
+        recipientId: directTemplateRecipient.id,
+        envelopeId: template.envelopeId,
+      });
+
       toast({
         title: _(errorMessage.title),
         description: _(errorMessage.description),

apps/remix/app/components/general/document-signing/document-signing-auth-password.tsx

@@ -1,5 +1,7 @@
 import { AppError } from '@documenso/lib/errors/app-error';
 import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { UserAuthMethod } from '@documenso/lib/types/user-auth-method';
+import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { DialogFooter } from '@documenso/ui/primitives/dialog';
@@ -7,11 +9,13 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import { Input } from '@documenso/ui/primitives/input';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
+import { Loader2Icon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningAuthSetPassword } from './document-signing-auth-set-password';
 
 export type DocumentSigningAuthPasswordProps = {
   open: boolean;
@@ -35,8 +39,12 @@ export const DocumentSigningAuthPassword = ({
 }: DocumentSigningAuthPasswordProps) => {
   const { t } = useLingui();
 
-  const { recipient, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
-    useRequiredDocumentSigningAuthContext();
+  const { user, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } = useRequiredDocumentSigningAuthContext();
+
+  // Fetched on demand since this is only needed once the user opts for password auth.
+  const { data: authMethodsData, isPending: isAuthMethodsPending } = trpc.auth.getAuthMethods.useQuery(undefined, {
+    enabled: !!user,
+  });
 
   const form = useForm<TPasswordAuthFormSchema>({
     resolver: zodResolver(ZPasswordAuthFormSchema),
@@ -47,6 +55,10 @@ export const DocumentSigningAuthPassword = ({
 
   const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
 
+  // If the query fails we fall through to the regular password form rather than blocking.
+  const isPasswordSetupRequired =
+    !!user && !!authMethodsData && !authMethodsData.authMethods.includes(UserAuthMethod.PASSWORD);
+
   const onFormSubmit = async ({ password }: TPasswordAuthFormSchema) => {
     try {
       setIsCurrentlyAuthenticating(true);
@@ -64,8 +76,6 @@ export const DocumentSigningAuthPassword = ({
 
       const error = AppError.parseError(err);
       setFormErrorCode(error.code);
-
-      // Todo: Alert.
     }
   };
 
@@ -79,9 +89,22 @@ export const DocumentSigningAuthPassword = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
+  if (user && isAuthMethodsPending) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (isPasswordSetupRequired) {
+    return <DocumentSigningAuthSetPassword onOpenChange={onOpenChange} />;
+  }
+
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      {/* method="post" so a pre-hydration native submit can't leak the password into the URL. */}
+      <form method="post" onSubmit={form.handleSubmit(onFormSubmit)}>
         <fieldset disabled={isCurrentlyAuthenticating}>
           <div className="space-y-4">
             {formErrorCode && (

apps/remix/app/components/general/document-signing/document-signing-auth-set-password.tsx

@@ -0,0 +1,63 @@
+import { isSigninEnabledForProvider } from '@documenso/lib/constants/auth';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+
+import { PasswordSetupRequest } from '~/components/forms/password-setup-request';
+
+export type DocumentSigningAuthSetPasswordProps = {
+  onOpenChange: (value: boolean) => void;
+};
+
+/**
+ * Shown in place of the password reauth form when the signed in user has no
+ * password (e.g. they signed up via OAuth or a passkey).
+ *
+ * Password based action auth is meant to prove more than possession of a session,
+ * so rather than letting the session set a password inline we send the user the
+ * verified reset link and ask them to come back.
+ */
+export const DocumentSigningAuthSetPassword = ({ onOpenChange }: DocumentSigningAuthSetPasswordProps) => {
+  const isEmailPasswordSigninEnabled = isSigninEnabledForProvider('email');
+
+  return (
+    <div className="space-y-4">
+      {isEmailPasswordSigninEnabled ? (
+        <>
+          <Alert variant="neutral">
+            <AlertTitle>
+              <Trans>No password set</Trans>
+            </AlertTitle>
+            <AlertDescription>
+              <Trans>
+                Signing this field requires a password, but your account does not have one. We can email you a link to
+                set one. Once done, sign in again and return to this document to continue.
+              </Trans>
+            </AlertDescription>
+          </Alert>
+
+          <PasswordSetupRequest />
+        </>
+      ) : (
+        <Alert variant="warning">
+          <AlertTitle>
+            <Trans>Password authentication unavailable</Trans>
+          </AlertTitle>
+          <AlertDescription>
+            <Trans>
+              Your account does not have a password and password sign in is disabled for this instance. Please contact
+              the document sender to use a different authentication method.
+            </Trans>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <DialogFooter>
+        <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+          <Trans>Close</Trans>
+        </Button>
+      </DialogFooter>
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -39,6 +40,7 @@ export const DocumentSigningCheckboxField = ({
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -126,6 +128,13 @@ export const DocumentSigningCheckboxField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -157,6 +166,13 @@ export const DocumentSigningCheckboxField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),
@@ -216,6 +232,13 @@ export const DocumentSigningCheckboxField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while updating the signature.`),

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { type TRecipientAccessAuth, ZDocumentAccessAuthSchema } from '@documenso/lib/types/document-auth';
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
@@ -88,6 +89,7 @@ export const DocumentSigningCompleteDialog = ({
   position,
   disableNameInput = false,
 }: DocumentSigningCompleteDialogProps) => {
+  const analytics = useAnalytics();
   const { t, i18n } = useLingui();
   const { toast } = useToast();
 
@@ -179,6 +181,11 @@ export const DocumentSigningCompleteDialog = ({
         return;
       }
 
+      analytics.captureException(error, {
+        source: 'signing',
+        location: 'complete_document',
+      });
+
       // This dialog owns the completion error toast for every signing surface
       // so the user gets a specific, actionable message. Callers should run
       // their own side effects (e.g. embeds posting document-error) and

apps/remix/app/components/general/document-signing/document-signing-date-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { convertToLocalSystemFormat, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -39,6 +40,7 @@ export const DocumentSigningDateField = ({
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -85,6 +87,13 @@ export const DocumentSigningDateField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -113,6 +122,13 @@ export const DocumentSigningDateField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -35,6 +36,7 @@ export const DocumentSigningDropdownField = ({
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -86,6 +88,13 @@ export const DocumentSigningDropdownField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -120,6 +129,13 @@ export const DocumentSigningDropdownField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-email-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -33,6 +34,7 @@ export const DocumentSigningEmailField = ({ field, onSignField, onUnsignField }:
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { email: providedEmail } = useRequiredDocumentSigningContext();
 
@@ -78,6 +80,13 @@ export const DocumentSigningEmailField = ({ field, onSignField, onUnsignField }:
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -106,6 +115,13 @@ export const DocumentSigningEmailField = ({ field, onSignField, onUnsignField }:
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -38,6 +39,7 @@ export const DocumentSigningInitialsField = ({
   const { toast } = useToast();
   const { _ } = useLingui();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { fullName } = useRequiredDocumentSigningContext();
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
@@ -84,6 +86,13 @@ export const DocumentSigningInitialsField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -112,6 +121,13 @@ export const DocumentSigningInitialsField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-name-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -39,6 +40,7 @@ export const DocumentSigningNameField = ({ field, onSignField, onUnsignField }:
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { fullName: providedFullName, setFullName: setProvidedFullName } = useRequiredDocumentSigningContext();
 
@@ -116,6 +118,13 @@ export const DocumentSigningNameField = ({ field, onSignField, onUnsignField }:
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -144,6 +153,13 @@ export const DocumentSigningNameField = ({ field, onSignField, onUnsignField }:
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-number-field.tsx

@@ -1,4 +1,5 @@
 import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -47,6 +48,7 @@ export const DocumentSigningNumberField = ({ field, onSignField, onUnsignField }
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -142,6 +144,13 @@ export const DocumentSigningNumberField = ({ field, onSignField, onUnsignField }
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -193,6 +202,13 @@ export const DocumentSigningNumberField = ({ field, onSignField, onUnsignField }
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx

@@ -1,4 +1,3 @@
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
@@ -83,8 +82,6 @@ export const DocumentSigningPageViewV1 = ({
     ? authUser.twoFactorEnabled && authUser.email === recipient.email
     : false;
 
-  const analytics = useAnalytics();
-
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -118,12 +115,6 @@ export const DocumentSigningPageViewV1 = ({
 
     await completeDocumentWithToken(payload);
 
-    analytics.capture('App: Recipient has completed signing', {
-      signerId: recipient.id,
-      documentId: document.id,
-      timestamp: new Date().toISOString(),
-    });
-
     if (documentMeta?.redirectUrl) {
       window.location.href = documentMeta.redirectUrl;
     } else {

apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -31,6 +32,7 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, targetSigner, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -91,6 +93,13 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -120,6 +129,13 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the selection.`),

apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -41,6 +42,7 @@ export function DocumentSigningRejectDialog({
 }: DocumentSigningRejectDialogProps) {
   const { t } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
   const [searchParams] = useSearchParams();
 
   const [isOpen, setIsOpen] = useState(false);
@@ -76,6 +78,12 @@ export function DocumentSigningRejectDialog({
         window.location.href = `/sign/${token}/rejected`;
       }
     } catch (err) {
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'reject_document',
+        documentId,
+      });
+
       toast({
         title: t`Error`,
         description: t`An error occurred while rejecting the document. Please try again.`,

apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -47,6 +48,7 @@ export const DocumentSigningSignatureField = ({
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient } = useDocumentSigningRecipientContext();
 
@@ -157,6 +159,13 @@ export const DocumentSigningSignatureField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while signing the document.`),
@@ -183,6 +192,13 @@ export const DocumentSigningSignatureField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the signature.`),

apps/remix/app/components/general/document-signing/document-signing-text-field.tsx

@@ -1,4 +1,5 @@
 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -50,6 +51,7 @@ export const DocumentSigningTextField = ({ field, onSignField, onUnsignField }:
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -170,6 +172,13 @@ export const DocumentSigningTextField = ({ field, onSignField, onUnsignField }:
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -200,6 +209,13 @@ export const DocumentSigningTextField = ({ field, onSignField, onUnsignField }:
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document/document-attachments-popover.tsx

@@ -21,6 +21,7 @@ export type DocumentAttachmentsPopoverProps = {
   envelopeId: string;
   buttonClassName?: string;
   buttonSize?: 'sm' | 'default';
+  collapseLabelOnMobile?: boolean;
 };
 
 const ZAttachmentFormSchema = z.object({
@@ -35,6 +36,7 @@ export const DocumentAttachmentsPopover = ({
   envelopeId,
   buttonClassName,
   buttonSize,
+  collapseLabelOnMobile = false,
 }: DocumentAttachmentsPopoverProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
@@ -129,7 +131,7 @@ export const DocumentAttachmentsPopover = ({
         <Button variant="outline" className={cn('gap-2', buttonClassName)} size={buttonSize}>
           <Paperclip className="h-4 w-4" />
 
-          <span>
+          <span className={cn(collapseLabelOnMobile && 'sr-only sm:not-sr-only')}>
             <Trans>Attachments</Trans>
             {attachments && attachments.data.length > 0 && <span className="ml-1">({attachments.data.length})</span>}
           </span>

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -28,6 +28,7 @@ import { useNavigate, useSearchParams } from 'react-router';
 import { z } from 'zod';
 import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 import { useCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
 import { getDistributeErrorMessage } from '~/utils/toast-error-messages';
 
 export type DocumentEditFormProps = {
@@ -42,6 +43,7 @@ const EditDocumentSteps: EditDocumentStep[] = ['settings', 'signers', 'fields',
 export const DocumentEditForm = ({ className, initialDocument, documentRootPath }: DocumentEditFormProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
+  const cspNonce = useCspNonce();
 
   const navigate = useNavigate();
 
@@ -473,6 +475,7 @@ export const DocumentEditForm = ({ className, initialDocument, documentRootPath
               onSubmit={onAddSignersFormSubmit}
               onAutoSave={onAddSignersFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
+              nonce={cspNonce}
             />
 
             <AddFieldsFormPartial

apps/remix/app/components/general/document/document-upload-button-legacy.tsx

@@ -1,5 +1,4 @@
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -38,7 +37,6 @@ export const DocumentUploadButtonLegacy = ({ className, type }: DocumentUploadBu
   const team = useCurrentTeam();
 
   const navigate = useNavigate();
-  const analytics = useAnalytics();
   const organisation = useCurrentOrganisation();
 
   const userTimezone =
@@ -103,12 +101,6 @@ export const DocumentUploadButtonLegacy = ({ className, type }: DocumentUploadBu
           description: _(msg`Your document has been uploaded successfully.`),
           duration: 5000,
         });
-
-        analytics.capture('App: Document Uploaded', {
-          userId: user.id,
-          documentId: id,
-          timestamp: new Date().toISOString(),
-        });
       }
 
       // Handle legacy template creation.

apps/remix/app/components/general/document/embedded-editor-attachment-popover.tsx

@@ -19,6 +19,7 @@ import { z } from 'zod';
 export type EmbeddedEditorAttachmentPopoverProps = {
   buttonClassName?: string;
   buttonSize?: 'sm' | 'default';
+  collapseLabelOnMobile?: boolean;
 };
 
 const ZAttachmentFormSchema = z.object({
@@ -32,6 +33,7 @@ type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
 export const EmbeddedEditorAttachmentPopover = ({
   buttonClassName,
   buttonSize,
+  collapseLabelOnMobile = false,
 }: EmbeddedEditorAttachmentPopoverProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
@@ -90,7 +92,7 @@ export const EmbeddedEditorAttachmentPopover = ({
         <Button variant="outline" className={cn('gap-2', buttonClassName)} size={buttonSize}>
           <Paperclip className="h-4 w-4" />
 
-          <span>
+          <span className={cn(collapseLabelOnMobile && 'sr-only sm:not-sr-only')}>
             <Trans>Attachments</Trans>
             {attachments.length > 0 && <span className="ml-1">({attachments.length})</span>}
           </span>

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx

@@ -24,6 +24,7 @@ import {
   UserIcon,
 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 const MIN_HEIGHT_PX = 12;
 const MIN_WIDTH_PX = 36;
@@ -88,11 +89,13 @@ export const fieldButtonList = [
 type EnvelopeEditorFieldDragDropProps = {
   selectedRecipientId: number | null;
   selectedEnvelopeItemId: string | null;
+  onFieldSelect?: (fieldType: FieldType) => void;
 };
 
 export const EnvelopeEditorFieldDragDrop = ({
   selectedRecipientId,
   selectedEnvelopeItemId,
+  onFieldSelect,
 }: EnvelopeEditorFieldDragDropProps) => {
   const { envelope, editorFields, isTemplate, getRecipientColorKey } = useCurrentEnvelopeEditor();
 
@@ -245,7 +248,10 @@ export const EnvelopeEditorFieldDragDrop = ({
             disabled={isFieldsDisabled}
             key={field.type}
             type="button"
-            onClick={() => setSelectedField(field.type)}
+            onClick={() => {
+              setSelectedField(field.type);
+              onFieldSelect?.(field.type);
+            }}
             onMouseDown={() => setSelectedField(field.type)}
             data-selected={selectedField === field.type ? true : undefined}
             className={cn(
@@ -267,27 +273,35 @@ export const EnvelopeEditorFieldDragDrop = ({
         ))}
       </div>
 
-      {selectedField && (
-        <div
-          className={cn(
-            'pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white font-noto text-muted-foreground ring-2 transition duration-200 [container-type:size] dark:text-muted',
-            selectedRecipientStyles.base,
-            selectedField === FieldType.SIGNATURE && 'font-signature',
-            {
-              '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
-              'dark:text-black/60': isFieldWithinBounds,
-            },
-          )}
-          style={{
-            top: coords.y,
-            left: coords.x,
-            height: fieldBounds.current.height,
-            width: fieldBounds.current.width,
-          }}
-        >
-          <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{t(FRIENDLY_FIELD_TYPE[selectedField])}</span>
-        </div>
-      )}
+      {/*
+       * Portalled to the body because the fields panel ancestor carries a CSS
+       * transform (the slide-in overlay below `md`), which would otherwise
+       * become the containing block for this fixed-position preview and pin
+       * it inside the panel instead of the viewport.
+       */}
+      {selectedField &&
+        createPortal(
+          <div
+            className={cn(
+              'pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white font-noto text-muted-foreground ring-2 transition duration-200 [container-type:size] dark:text-muted',
+              selectedRecipientStyles.base,
+              selectedField === FieldType.SIGNATURE && 'font-signature',
+              {
+                '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
+                'dark:text-black/60': isFieldWithinBounds,
+              },
+            )}
+            style={{
+              top: coords.y,
+              left: coords.x,
+              height: fieldBounds.current.height,
+              width: fieldBounds.current.width,
+            }}
+          >
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{t(FRIENDLY_FIELD_TYPE[selectedField])}</span>
+          </div>,
+          document.body,
+        )}
     </>
   );
 };

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
@@ -37,8 +38,12 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 import { EnvelopeRecipientSelectorCommand } from './envelope-recipient-selector';
 
+/** How far past a resize handle you can still grab it, in screen pixels. */
+const TRANSFORMER_ANCHOR_HIT_STROKE_PX = 24;
+
 export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageRenderData }) => {
   const { t, i18n } = useLingui();
+  const analytics = useAnalytics();
   const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
   const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
 
@@ -276,6 +281,13 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
       unsafeRenderFieldOnLayer(field);
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'envelope_page_render',
+        envelopeId: envelope.id,
+      });
+
       setRenderError(true);
     }
   };
@@ -350,6 +362,9 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
       shouldOverdrawWholeArea: true,
       ignoreStroke: true,
       flipEnabled: false,
+      anchorStyleFunc: (anchor) => {
+        anchor.hitStrokeWidth(TRANSFORMER_ANCHOR_HIT_STROKE_PX / scale);
+      },
       boundBoxFunc: (oldBox, newBox) => {
         // Enforce minimum size
         if (newBox.width < 30 || newBox.height < 20) {

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -30,7 +30,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
-import { AlertTriangleIcon, FileTextIcon, PencilIcon, SparklesIcon } from 'lucide-react';
+import { AlertTriangleIcon, FileTextIcon, MousePointerClickIcon, PencilIcon, SparklesIcon, XIcon } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRevalidator, useSearchParams } from 'react-router';
 import { isDeepEqual } from 'remeda';
@@ -89,6 +89,8 @@ export const EnvelopeEditorFieldsPage = () => {
   const [isAiEnableDialogOpen, setIsAiEnableDialogOpen] = useState(false);
   const { revalidate } = useRevalidator();
 
+  const [isMobileFieldsPanelOpen, setIsMobileFieldsPanelOpen] = useState(false);
+
   const envelopeItemPermissions = useMemo(
     () => getEnvelopeItemPermissions(envelope, envelope.recipients),
     [envelope, envelope.recipients],
@@ -187,6 +189,8 @@ export const EnvelopeEditorFieldsPage = () => {
   }, []);
 
   const onDetectClick = () => {
+    setIsMobileFieldsPanelOpen(false);
+
     if (!team.preferences.aiFeaturesEnabled) {
       setIsAiEnableDialogOpen(true);
       return;
@@ -308,212 +312,259 @@ export const EnvelopeEditorFieldsPage = () => {
 
       {/* Right Section - Form Fields Panel */}
       {currentEnvelopeItem && envelope.recipients.length > 0 && (
-        <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-border border-l bg-background py-4">
-          {/* Recipient selector section. */}
-          <section className="px-4">
-            <h3 className="mb-2 font-semibold text-foreground text-sm">
-              <Trans>Selected Recipient</Trans>
-            </h3>
+        <>
+          {/* Floating trigger for the fields panel, visible below the `md` breakpoint. Offset to clear the step bar. */}
+          <Button
+            type="button"
+            className="fixed right-4 bottom-[4.5rem] z-30 shadow-lg md:hidden"
+            onClick={() => setIsMobileFieldsPanelOpen(true)}
+          >
+            <MousePointerClickIcon className="mr-2 h-4 w-4" />
+            <Trans>Fields</Trans>
+          </Button>
 
-            <EnvelopeRecipientSelector
-              selectedRecipient={editorFields.selectedRecipient}
-              onSelectedRecipientChange={(recipient) => editorFields.setSelectedRecipient(recipient.id)}
-              recipients={envelope.recipients}
-              fields={envelope.fields}
-              className="w-full"
-              align="end"
+          {isMobileFieldsPanelOpen && (
+            <div
+              role="presentation"
+              className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm md:hidden"
+              onClick={() => setIsMobileFieldsPanelOpen(false)}
             />
+          )}
 
-            {editorFields.selectedRecipient &&
-              !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (
-                <Alert className="mt-4" variant="warning">
-                  <AlertDescription>
-                    <Trans>
-                      This recipient can no longer be modified as they have signed a field, or completed the document.
-                    </Trans>
-                  </AlertDescription>
-                </Alert>
-              )}
-          </section>
-
-          <Separator className="my-4" />
-
-          {/* Add fields section. */}
-          <section className="px-4">
-            <h3 className="mb-2 font-semibold text-foreground text-sm">
-              <Trans>Add Fields</Trans>
-            </h3>
-
-            <EnvelopeEditorFieldDragDrop
-              selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
-              selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
-            />
-
-            {editorConfig.fields?.allowAIDetection && (
-              <>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="mt-4 w-full"
-                  onClick={onDetectClick}
-                  disabled={envelope.status !== DocumentStatus.DRAFT}
-                  title={
-                    envelope.status !== DocumentStatus.DRAFT
-                      ? _(msg`You can only detect fields in draft envelopes`)
-                      : undefined
-                  }
-                >
-                  <SparklesIcon className="mr-2 -ml-1 h-4 w-4" />
-                  <Trans>Detect with AI</Trans>
-                </Button>
-
-                <AiFieldDetectionDialog
-                  open={isAiFieldDialogOpen}
-                  onOpenChange={setIsAiFieldDialogOpen}
-                  onComplete={onFieldDetectionComplete}
-                  envelopeId={envelope.id}
-                  teamId={envelope.teamId}
-                />
-
-                <AiFeaturesEnableDialog
-                  open={isAiEnableDialogOpen}
-                  onOpenChange={setIsAiEnableDialogOpen}
-                  onEnabled={onAiFeaturesEnabled}
-                />
-              </>
+          {/*
+           * Always mounted and toggled with CSS rather than a Sheet/Drawer: the field
+           * palette registers window-level mouse listeners that must survive the panel
+           * closing mid click-to-place, and unmounting would also double-mount the field
+           * settings forms and AI dialogs. `invisible` keeps the closed overlay out of
+           * the tab order and accessibility tree.
+           */}
+          <div
+            className={cn(
+              'fixed inset-y-0 right-0 z-50 w-80 max-w-[85vw] overflow-y-auto border-border border-l bg-background py-4 transition-[transform,visibility] duration-200',
+              isMobileFieldsPanelOpen ? 'translate-x-0 shadow-xl' : 'invisible translate-x-full',
+              'md:visible md:sticky md:top-0 md:z-auto md:h-full md:w-80 md:max-w-none md:flex-shrink-0 md:transform-none md:shadow-none md:transition-none',
             )}
-          </section>
+          >
+            <div className="mb-4 flex items-center justify-between px-4 md:hidden">
+              <h3 className="font-semibold text-foreground text-sm">
+                <Trans>Fields</Trans>
+              </h3>
 
-          {/* Field details section. */}
-          <AnimateGenericFadeInOut key={editorFields.selectedField?.formId}>
-            {selectedField && (
-              <section>
-                <Separator className="my-4" />
+              <Button variant="ghost" size="sm" onClick={() => setIsMobileFieldsPanelOpen(false)}>
+                <XIcon className="h-4 w-4" />
+                <span className="sr-only">
+                  <Trans>Close</Trans>
+                </span>
+              </Button>
+            </div>
 
-                {searchParams.get('devmode') && (
-                  <>
-                    <div className="px-4">
-                      <h3 className="mb-3 font-semibold text-foreground text-sm">
-                        <Trans>Developer Mode</Trans>
-                      </h3>
+            {/* Recipient selector section. */}
+            <section className="px-4">
+              <h3 className="mb-2 font-semibold text-foreground text-sm">
+                <Trans>Selected Recipient</Trans>
+              </h3>
 
-                      <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-foreground text-sm">
-                        {selectedField.id && (
+              <EnvelopeRecipientSelector
+                selectedRecipient={editorFields.selectedRecipient}
+                onSelectedRecipientChange={(recipient) => editorFields.setSelectedRecipient(recipient.id)}
+                recipients={envelope.recipients}
+                fields={envelope.fields}
+                className="w-full"
+                align="end"
+              />
+
+              {editorFields.selectedRecipient &&
+                !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (
+                  <Alert className="mt-4" variant="warning">
+                    <AlertDescription>
+                      <Trans>
+                        This recipient can no longer be modified as they have signed a field, or completed the document.
+                      </Trans>
+                    </AlertDescription>
+                  </Alert>
+                )}
+            </section>
+
+            <Separator className="my-4" />
+
+            {/* Add fields section. */}
+            <section className="px-4">
+              <h3 className="mb-2 font-semibold text-foreground text-sm">
+                <Trans>Add Fields</Trans>
+              </h3>
+
+              <EnvelopeEditorFieldDragDrop
+                selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
+                selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
+                onFieldSelect={() => setIsMobileFieldsPanelOpen(false)}
+              />
+
+              {editorConfig.fields?.allowAIDetection && (
+                <>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="mt-4 w-full"
+                    onClick={onDetectClick}
+                    disabled={envelope.status !== DocumentStatus.DRAFT}
+                    title={
+                      envelope.status !== DocumentStatus.DRAFT
+                        ? _(msg`You can only detect fields in draft envelopes`)
+                        : undefined
+                    }
+                  >
+                    <SparklesIcon className="mr-2 -ml-1 h-4 w-4" />
+                    <Trans>Detect with AI</Trans>
+                  </Button>
+
+                  <AiFieldDetectionDialog
+                    open={isAiFieldDialogOpen}
+                    onOpenChange={setIsAiFieldDialogOpen}
+                    onComplete={onFieldDetectionComplete}
+                    envelopeId={envelope.id}
+                    teamId={envelope.teamId}
+                  />
+
+                  <AiFeaturesEnableDialog
+                    open={isAiEnableDialogOpen}
+                    onOpenChange={setIsAiEnableDialogOpen}
+                    onEnabled={onAiFeaturesEnabled}
+                  />
+                </>
+              )}
+            </section>
+
+            {/* Field details section. */}
+            <AnimateGenericFadeInOut key={editorFields.selectedField?.formId}>
+              {selectedField && (
+                <section>
+                  <Separator className="my-4" />
+
+                  {searchParams.get('devmode') && (
+                    <>
+                      <div className="px-4">
+                        <h3 className="mb-3 font-semibold text-foreground text-sm">
+                          <Trans>Developer Mode</Trans>
+                        </h3>
+
+                        <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-foreground text-sm">
+                          {selectedField.id && (
+                            <p>
+                              <span className="min-w-12 text-muted-foreground">
+                                <Trans>Field ID:</Trans>
+                              </span>{' '}
+                              {selectedField.id}
+                            </p>
+                          )}
                           <p>
                             <span className="min-w-12 text-muted-foreground">
-                              <Trans>Field ID:</Trans>
+                              <Trans>Recipient ID:</Trans>
                             </span>{' '}
-                            {selectedField.id}
+                            {selectedField.recipientId}
                           </p>
-                        )}
-                        <p>
-                          <span className="min-w-12 text-muted-foreground">
-                            <Trans>Recipient ID:</Trans>
-                          </span>{' '}
-                          {selectedField.recipientId}
-                        </p>
-                        <p>
-                          <span className="min-w-12 text-muted-foreground">
-                            <Trans>Pos X:</Trans>
-                          </span>{' '}
-                          {selectedField.positionX.toFixed(2)}
-                        </p>
-                        <p>
-                          <span className="min-w-12 text-muted-foreground">
-                            <Trans>Pos Y:</Trans>
-                          </span>{' '}
-                          {selectedField.positionY.toFixed(2)}
-                        </p>
-                        <p>
-                          <span className="min-w-12 text-muted-foreground">
-                            <Trans>Width:</Trans>
-                          </span>{' '}
-                          {selectedField.width.toFixed(2)}
-                        </p>
-                        <p>
-                          <span className="min-w-12 text-muted-foreground">
-                            <Trans>Height:</Trans>
-                          </span>{' '}
-                          {selectedField.height.toFixed(2)}
-                        </p>
+                          <p>
+                            <span className="min-w-12 text-muted-foreground">
+                              <Trans>Pos X:</Trans>
+                            </span>{' '}
+                            {selectedField.positionX.toFixed(2)}
+                          </p>
+                          <p>
+                            <span className="min-w-12 text-muted-foreground">
+                              <Trans>Pos Y:</Trans>
+                            </span>{' '}
+                            {selectedField.positionY.toFixed(2)}
+                          </p>
+                          <p>
+                            <span className="min-w-12 text-muted-foreground">
+                              <Trans>Width:</Trans>
+                            </span>{' '}
+                            {selectedField.width.toFixed(2)}
+                          </p>
+                          <p>
+                            <span className="min-w-12 text-muted-foreground">
+                              <Trans>Height:</Trans>
+                            </span>{' '}
+                            {selectedField.height.toFixed(2)}
+                          </p>
+                        </div>
                       </div>
-                    </div>
 
-                    <Separator className="my-4" />
-                  </>
-                )}
+                      <Separator className="my-4" />
+                    </>
+                  )}
 
-                <div className="px-4 [&_label]:text-foreground/70 [&_label]:text-xs">
-                  <h3 className="font-semibold text-sm">{_(FieldSettingsTypeTranslations[selectedField.type])}</h3>
+                  <div className="px-4 [&_label]:text-foreground/70 [&_label]:text-xs">
+                    <h3 className="font-semibold text-sm">{_(FieldSettingsTypeTranslations[selectedField.type])}</h3>
 
-                  {match(selectedField.type)
-                    .with(FieldType.SIGNATURE, () => (
-                      <EditorFieldSignatureForm
-                        value={selectedField?.fieldMeta as TSignatureFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .with(FieldType.CHECKBOX, () => (
-                      <EditorFieldCheckboxForm
-                        value={selectedField?.fieldMeta as TCheckboxFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .with(FieldType.DATE, () => (
-                      <EditorFieldDateForm
-                        value={selectedField?.fieldMeta as TDateFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .with(FieldType.DROPDOWN, () => (
-                      <EditorFieldDropdownForm
-                        value={selectedField?.fieldMeta as TDropdownFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .with(FieldType.EMAIL, () => (
-                      <EditorFieldEmailForm
-                        value={selectedField?.fieldMeta as TEmailFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .with(FieldType.INITIALS, () => (
-                      <EditorFieldInitialsForm
-                        value={selectedField?.fieldMeta as TInitialsFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .with(FieldType.NAME, () => (
-                      <EditorFieldNameForm
-                        value={selectedField?.fieldMeta as TNameFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .with(FieldType.NUMBER, () => (
-                      <EditorFieldNumberForm
-                        value={selectedField?.fieldMeta as TNumberFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .with(FieldType.RADIO, () => (
-                      <EditorFieldRadioForm
-                        value={selectedField?.fieldMeta as TRadioFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .with(FieldType.TEXT, () => (
-                      <EditorFieldTextForm
-                        value={selectedField?.fieldMeta as TTextFieldMeta | undefined}
-                        onValueChange={(value) => updateSelectedFieldMeta(value)}
-                      />
-                    ))
-                    .otherwise(() => null)}
-                </div>
-              </section>
-            )}
-          </AnimateGenericFadeInOut>
-        </div>
+                    {match(selectedField.type)
+                      .with(FieldType.SIGNATURE, () => (
+                        <EditorFieldSignatureForm
+                          value={selectedField?.fieldMeta as TSignatureFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .with(FieldType.CHECKBOX, () => (
+                        <EditorFieldCheckboxForm
+                          value={selectedField?.fieldMeta as TCheckboxFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .with(FieldType.DATE, () => (
+                        <EditorFieldDateForm
+                          value={selectedField?.fieldMeta as TDateFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .with(FieldType.DROPDOWN, () => (
+                        <EditorFieldDropdownForm
+                          value={selectedField?.fieldMeta as TDropdownFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .with(FieldType.EMAIL, () => (
+                        <EditorFieldEmailForm
+                          value={selectedField?.fieldMeta as TEmailFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .with(FieldType.INITIALS, () => (
+                        <EditorFieldInitialsForm
+                          value={selectedField?.fieldMeta as TInitialsFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .with(FieldType.NAME, () => (
+                        <EditorFieldNameForm
+                          value={selectedField?.fieldMeta as TNameFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .with(FieldType.NUMBER, () => (
+                        <EditorFieldNumberForm
+                          value={selectedField?.fieldMeta as TNumberFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .with(FieldType.RADIO, () => (
+                        <EditorFieldRadioForm
+                          value={selectedField?.fieldMeta as TRadioFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .with(FieldType.TEXT, () => (
+                        <EditorFieldTextForm
+                          value={selectedField?.fieldMeta as TTextFieldMeta | undefined}
+                          onValueChange={(value) => updateSelectedFieldMeta(value)}
+                        />
+                      ))
+                      .otherwise(() => null)}
+                  </div>
+                </section>
+              )}
+            </AnimateGenericFadeInOut>
+          </div>
+        </>
       )}
     </div>
   );

apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx

@@ -70,17 +70,17 @@ export default function EnvelopeEditorHeader() {
   return (
     <nav className="w-full border-border border-b bg-background px-4 py-3 md:px-6">
       <div className="flex items-center justify-between gap-4">
-        <div className="flex min-w-0 flex-1 items-center space-x-4">
+        <div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-4">
           {editorConfig.embedded?.customBrandingLogo ? (
-            <img src={`/api/branding/logo/team/${envelope.teamId}`} alt="Logo" className="h-6 w-auto" />
+            <img src={`/api/branding/logo/team/${envelope.teamId}`} alt="Logo" className="hidden h-6 w-auto sm:block" />
           ) : (
-            <Link to="/">
+            <Link to="/" className="hidden sm:block">
               <BrandingLogo className="h-6 w-auto" />
             </Link>
           )}
-          <Separator orientation="vertical" className="h-6 shrink-0" />
+          <Separator orientation="vertical" className="hidden h-6 shrink-0 sm:block" />
 
-          <div className="flex min-w-0 items-center space-x-2">
+          <div className="flex min-w-0 items-center gap-2">
             <EnvelopeItemTitleInput
               dataTestId="envelope-title-input"
               disabled={!envelopeItemPermissions.canTitleBeChanged || !allowConfigureEnvelopeTitle}
@@ -98,19 +98,19 @@ export default function EnvelopeEditorHeader() {
             {envelope.type === EnvelopeType.TEMPLATE && (
               <>
                 {envelope.templateType === TemplateType.PRIVATE && (
-                  <Badge variant="secondary" className="shrink-0">
+                  <Badge variant="secondary" className="hidden shrink-0 sm:inline-flex">
                     <LockIcon className="mr-2 h-4 w-4 text-blue-600 dark:text-blue-300" />
                     <Trans>Private Template</Trans>
                   </Badge>
                 )}
                 {envelope.templateType === TemplateType.ORGANISATION && (
-                  <Badge variant="orange" className="shrink-0">
+                  <Badge variant="orange" className="hidden shrink-0 sm:inline-flex">
                     <Building2Icon className="mr-2 size-4" />
                     <Trans>Organisation Template</Trans>
                   </Badge>
                 )}
                 {envelope.templateType === TemplateType.PUBLIC && (
-                  <Badge variant="default" className="shrink-0">
+                  <Badge variant="default" className="hidden shrink-0 sm:inline-flex">
                     <Globe2Icon className="mr-2 h-4 w-4 text-green-500 dark:text-green-300" />
                     <Trans>Public Template</Trans>
                   </Badge>
@@ -118,7 +118,7 @@ export default function EnvelopeEditorHeader() {
 
                 {envelope.directLink?.token && (
                   <TemplateDirectLinkBadge
-                    className="shrink-0 py-1"
+                    className="hidden shrink-0 py-1 sm:flex"
                     token={envelope.directLink.token}
                     enabled={envelope.directLink.enabled}
                   />
@@ -180,9 +180,9 @@ export default function EnvelopeEditorHeader() {
         <div className="flex shrink-0 items-center space-x-2">
           {allowAttachments &&
             (isEmbedded ? (
-              <EmbeddedEditorAttachmentPopover buttonSize="sm" />
+              <EmbeddedEditorAttachmentPopover buttonSize="sm" collapseLabelOnMobile />
             ) : (
-              <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" />
+              <DocumentAttachmentsPopover envelopeId={envelope.id} buttonSize="sm" collapseLabelOnMobile />
             ))}
 
           {editorConfig.settings && (
@@ -202,8 +202,10 @@ export default function EnvelopeEditorHeader() {
                   documentRootPath={relativePath.documentRootPath}
                   trigger={
                     <Button size="sm">
-                      <SendIcon className="mr-2 h-4 w-4" />
-                      <Trans>Send Document</Trans>
+                      <SendIcon className="h-4 w-4 sm:mr-2" />
+                      <span className="sr-only sm:not-sr-only">
+                        <Trans>Send Document</Trans>
+                      </span>
                     </Button>
                   }
                 />
@@ -212,8 +214,10 @@ export default function EnvelopeEditorHeader() {
                   envelope={envelope}
                   trigger={
                     <Button size="sm">
-                      <SendIcon className="mr-2 h-4 w-4" />
-                      <Trans>Resend Document</Trans>
+                      <SendIcon className="h-4 w-4 sm:mr-2" />
+                      <span className="sr-only sm:not-sr-only">
+                        <Trans>Resend Document</Trans>
+                      </span>
                     </Button>
                   }
                 />

apps/remix/app/components/general/envelope-editor/envelope-editor-mobile-notice.tsx

@@ -0,0 +1,66 @@
+import { Button } from '@documenso/ui/primitives/button';
+import { Trans } from '@lingui/react/macro';
+import { MonitorIcon, XIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+const DISMISSED_STORAGE_KEY = 'envelopeEditorMobileNoticeDismissed';
+
+// Storage access can throw when the browser blocks it (privacy settings, some
+// embedded contexts). A cosmetic notice must never take the editor down, so
+// failures are treated as "not dismissed" and the dismissal is not persisted.
+const readIsDismissed = () => {
+  try {
+    return localStorage.getItem(DISMISSED_STORAGE_KEY) === 'true';
+  } catch {
+    return false;
+  }
+};
+
+const persistDismissed = () => {
+  try {
+    localStorage.setItem(DISMISSED_STORAGE_KEY, 'true');
+  } catch {
+    return;
+  }
+};
+
+/**
+ * Suggests using a larger screen for the editor. Only shown below the `md`
+ * breakpoint, and stays hidden once dismissed.
+ */
+export const EnvelopeEditorMobileNotice = () => {
+  // Hidden until mounted so the server and first client render agree, and so a
+  // previously dismissed notice never flashes.
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(!readIsDismissed());
+  }, []);
+
+  const onDismiss = () => {
+    setIsVisible(false);
+
+    persistDismissed();
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className="flex shrink-0 items-center gap-3 border-border border-b bg-muted/50 px-4 py-2 text-muted-foreground text-sm md:hidden">
+      <MonitorIcon className="h-4 w-4 shrink-0" aria-hidden />
+
+      <p className="flex-1">
+        <Trans>For the best experience, use the editor on a desktop.</Trans>
+      </p>
+
+      <Button variant="ghost" size="sm" className="-mr-2 h-8 w-8 shrink-0 p-0" onClick={onDismiss}>
+        <XIcon className="h-4 w-4" />
+        <span className="sr-only">
+          <Trans>Close</Trans>
+        </span>
+      </Button>
+    </div>
+  );
+};

apps/remix/app/components/general/envelope-editor/envelope-editor-quick-actions.tsx

@@ -0,0 +1,208 @@
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
+import { Button } from '@documenso/ui/primitives/button';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
+import {
+  CopyPlusIcon,
+  DownloadCloudIcon,
+  FileOutputIcon,
+  LinkIcon,
+  type LucideIcon,
+  SendIcon,
+  SettingsIcon,
+  Trash2Icon,
+} from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+import { useNavigate } from 'react-router';
+
+import { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
+import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribute-dialog';
+import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
+import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
+import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
+import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
+import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
+
+import { EnvelopeEditorSettingsDialog } from './envelope-editor-settings-dialog';
+
+const useEnvelopeEditorQuickActionVisibility = () => {
+  const { envelope, editorConfig, isDocument, isTemplate } = useCurrentEnvelopeEditor();
+
+  const { actions } = editorConfig;
+
+  return {
+    settings: Boolean(editorConfig.settings),
+    distribute: isDocument && actions.allowDistributing,
+    directLink: isTemplate && actions.allowDirectLink,
+    duplicate: actions.allowDuplication,
+    saveAsTemplate: isDocument && actions.allowSaveAsTemplate,
+    download: actions.allowDownloadPDF,
+    // Check envelope ID since it can be in embedded create mode.
+    delete: actions.allowDeletion && Boolean(envelope.id),
+  };
+};
+
+export const useHasEnvelopeEditorQuickActions = () =>
+  Object.values(useEnvelopeEditorQuickActionVisibility()).some(Boolean);
+
+type QuickActionButtonProps = ComponentProps<typeof Button> & {
+  icon: LucideIcon;
+  label: ReactNode;
+  showLabel: boolean;
+};
+
+// Used as a Radix `asChild` trigger, so the injected props must reach the button.
+const QuickActionButton = ({ icon: Icon, label, showLabel, ...props }: QuickActionButtonProps) => (
+  <Button variant="ghost" size="sm" className="w-full justify-start" {...props}>
+    <Icon className="h-4 w-4" />
+
+    {showLabel && <span className="ml-2">{label}</span>}
+  </Button>
+);
+
+export type EnvelopeEditorQuickActionsProps = {
+  showLabels: boolean;
+};
+
+export const EnvelopeEditorQuickActions = ({ showLabels }: EnvelopeEditorQuickActionsProps) => {
+  const { t } = useLingui();
+
+  const navigate = useNavigate();
+
+  const { envelope, isDocument, relativePath, syncEnvelope } = useCurrentEnvelopeEditor();
+
+  const visibility = useEnvelopeEditorQuickActionVisibility();
+
+  return (
+    <div className="space-y-3 [&_.lucide]:text-muted-foreground">
+      {visibility.settings && (
+        <EnvelopeEditorSettingsDialog
+          trigger={
+            <QuickActionButton
+              icon={SettingsIcon}
+              title={t`Settings`}
+              showLabel={showLabels}
+              label={isDocument ? <Trans>Document Settings</Trans> : <Trans>Template Settings</Trans>}
+            />
+          }
+        />
+      )}
+
+      {visibility.distribute && (
+        <>
+          <EnvelopeDistributeDialog
+            documentRootPath={relativePath.documentRootPath}
+            trigger={
+              <QuickActionButton
+                icon={SendIcon}
+                title={t`Send Envelope`}
+                showLabel={showLabels}
+                label={<Trans>Send Document</Trans>}
+              />
+            }
+          />
+
+          <EnvelopeRedistributeDialog
+            envelope={envelope}
+            trigger={
+              <QuickActionButton
+                icon={SendIcon}
+                title={t`Resend Envelope`}
+                showLabel={showLabels}
+                label={<Trans>Resend Document</Trans>}
+              />
+            }
+          />
+        </>
+      )}
+
+      {visibility.directLink && (
+        <TemplateDirectLinkDialog
+          templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
+          directLink={envelope.directLink}
+          recipients={envelope.recipients}
+          onCreateSuccess={async () => await syncEnvelope()}
+          onDeleteSuccess={async () => await syncEnvelope()}
+          trigger={
+            <QuickActionButton
+              icon={LinkIcon}
+              title={t`Direct Link`}
+              showLabel={showLabels}
+              label={<Trans>Direct Link</Trans>}
+            />
+          }
+        />
+      )}
+
+      {visibility.duplicate && (
+        <EnvelopeDuplicateDialog
+          envelopeId={envelope.id}
+          envelopeType={envelope.type}
+          trigger={
+            <QuickActionButton
+              icon={CopyPlusIcon}
+              title={t`Duplicate Envelope`}
+              showLabel={showLabels}
+              label={isDocument ? <Trans>Duplicate Document</Trans> : <Trans>Duplicate Template</Trans>}
+            />
+          }
+        />
+      )}
+
+      {visibility.saveAsTemplate && (
+        <EnvelopeSaveAsTemplateDialog
+          envelopeId={envelope.id}
+          trigger={
+            <QuickActionButton
+              icon={FileOutputIcon}
+              title={t`Save as Template`}
+              showLabel={showLabels}
+              label={<Trans>Save as Template</Trans>}
+            />
+          }
+        />
+      )}
+
+      {visibility.download && (
+        <EnvelopeDownloadDialog
+          envelopeId={envelope.id}
+          envelopeStatus={envelope.status}
+          isLegacy={envelope.internalVersion === 1}
+          envelopeItems={envelope.envelopeItems}
+          trigger={
+            <QuickActionButton
+              icon={DownloadCloudIcon}
+              title={t`Download PDF`}
+              showLabel={showLabels}
+              label={<Trans>Download PDF</Trans>}
+            />
+          }
+        />
+      )}
+
+      {visibility.delete && (
+        <EnvelopeDeleteDialog
+          id={envelope.id}
+          type={envelope.type}
+          status={envelope.status}
+          title={envelope.title}
+          canManageDocument={true}
+          trigger={
+            <QuickActionButton
+              icon={Trash2Icon}
+              title={t`Delete Envelope`}
+              showLabel={showLabels}
+              label={isDocument ? <Trans>Delete Document</Trans> : <Trans>Delete Template</Trans>}
+            />
+          }
+          onDelete={async () => {
+            await navigate(
+              envelope.type === EnvelopeType.DOCUMENT ? relativePath.documentRootPath : relativePath.templateRootPath,
+            );
+          }}
+        />
+      )}
+    </div>
+  );
+};

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -45,6 +45,7 @@ import { isDeepEqual } from 'remeda';
 import { AiFeaturesEnableDialog } from '~/components/dialogs/ai-features-enable-dialog';
 import { AiRecipientDetectionDialog } from '~/components/dialogs/ai-recipient-detection-dialog';
 import { useCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
 
 export const EnvelopeEditorRecipientForm = () => {
   const { envelope, setRecipientsDebounced, updateEnvelope, editorRecipients, isEmbedded, editorConfig } =
@@ -52,6 +53,7 @@ export const EnvelopeEditorRecipientForm = () => {
 
   const organisation = useCurrentOrganisation();
   const team = useCurrentTeam();
+  const cspNonce = useCspNonce();
 
   const { t } = useLingui();
   const { toast } = useToast();
@@ -590,9 +592,15 @@ export const EnvelopeEditorRecipientForm = () => {
   const recipientCountLimit = organisation.organisationClaim.recipientCount;
   const isOverRecipientLimit = recipientCountLimit > 0 && signers.length > recipientCountLimit;
 
+  const aiDetectionLabel = team.preferences.aiFeaturesEnabled ? (
+    <Trans>Detect recipients with AI</Trans>
+  ) : (
+    <Trans>Enable AI detection</Trans>
+  );
+
   return (
     <Card backdropBlur={false} className="border">
-      <CardHeader className="flex flex-row justify-between">
+      <CardHeader className="flex flex-col justify-between gap-4 space-y-0 p-4 sm:flex-row sm:p-6">
         <div>
           <CardTitle>
             <Trans>Recipients</Trans>
@@ -602,7 +610,7 @@ export const EnvelopeEditorRecipientForm = () => {
           </CardDescription>
         </div>
 
-        <div className="flex flex-row items-center space-x-2">
+        <div className="flex flex-row flex-wrap items-center gap-2">
           {editorConfig.recipients?.allowAIDetection && (
             <Tooltip>
               <TooltipTrigger asChild>
@@ -610,27 +618,23 @@ export const EnvelopeEditorRecipientForm = () => {
                   variant="outline"
                   type="button"
                   size="sm"
+                  className="order-last w-full sm:order-none sm:w-auto"
                   disabled={isSubmitting}
                   onClick={onDetectRecipientsClick}
                 >
                   <SparklesIcon className="h-4 w-4" />
+                  <span className="ml-2 sm:hidden">{aiDetectionLabel}</span>
                 </Button>
               </TooltipTrigger>
 
-              <TooltipContent>
-                {team.preferences.aiFeaturesEnabled ? (
-                  <Trans>Detect recipients with AI</Trans>
-                ) : (
-                  <Trans>Enable AI detection</Trans>
-                )}
-              </TooltipContent>
+              <TooltipContent>{aiDetectionLabel}</TooltipContent>
             </Tooltip>
           )}
 
           {(!isEmbedded || hasCurrentEditorInfo) && (
             <Button
               variant="outline"
-              className="flex flex-row items-center"
+              className="flex flex-1 flex-row items-center sm:flex-none"
               size="sm"
               disabled={isSubmitting || isUserAlreadyARecipient}
               onClick={() => onAddSelfSigner()}
@@ -653,7 +657,7 @@ export const EnvelopeEditorRecipientForm = () => {
         </div>
       </CardHeader>
 
-      <CardContent>
+      <CardContent className="p-4 pt-0 sm:p-6 sm:pt-0">
         {isOverRecipientLimit && (
           <Alert variant="destructive" className="mb-4">
             <AlertDescription>
@@ -795,6 +799,7 @@ export const EnvelopeEditorRecipientForm = () => {
           </div>
 
           <DragDropContext
+            nonce={cspNonce}
             onDragEnd={onDragEnd}
             sensors={[
               (api: SensorAPI) => {
@@ -837,14 +842,17 @@ export const EnvelopeEditorRecipientForm = () => {
                               data-native-id={signer.id}
                               disabled={isSubmitting || !canRecipientBeModified(signer.id)}
                               className={cn('pb-2', {
-                                'border-b pb-4': showAdvancedSettings && index !== signers.length - 1,
+                                // Recipients that span several lines (stacked below `sm`, or with advanced
+                                // settings shown) are separated by a divider.
+                                'border-b pb-4': index !== signers.length - 1,
+                                'sm:border-b-0 sm:pb-2': !showAdvancedSettings && index !== signers.length - 1,
                                 'pt-2': showAdvancedSettings && index === 0,
-                                'pr-3': isSigningOrderSequential,
+                                'sm:pr-3': isSigningOrderSequential,
                               })}
                             >
-                              <div className="flex flex-row items-center gap-x-2">
+                              <div className="flex flex-row flex-wrap items-center gap-2 sm:flex-nowrap">
                                 {isSigningOrderSequential && isCcRecipient(signer) && (
-                                  <div className="mt-auto h-10 w-[4.25rem] flex-shrink-0" />
+                                  <div className="mt-auto hidden h-10 w-[4.25rem] flex-shrink-0 sm:block" />
                                 )}
 
                                 {isSigningOrderSequential && !isCcRecipient(signer) && (
@@ -853,11 +861,14 @@ export const EnvelopeEditorRecipientForm = () => {
                                     name={`signers.${index}.signingOrder`}
                                     render={({ field }) => (
                                       <FormItem
-                                        className={cn('mt-auto flex items-center gap-x-1 space-y-0', {
-                                          'mb-6':
-                                            form.formState.errors.signers?.[index] &&
-                                            !form.formState.errors.signers[index]?.signingOrder,
-                                        })}
+                                        className={cn(
+                                          'order-1 mt-auto flex items-center gap-x-1 space-y-0 sm:order-none',
+                                          {
+                                            'sm:mb-6':
+                                              form.formState.errors.signers?.[index] &&
+                                              !form.formState.errors.signers[index]?.signingOrder,
+                                          },
+                                        )}
                                       >
                                         <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
                                         <FormControl>
@@ -889,19 +900,23 @@ export const EnvelopeEditorRecipientForm = () => {
                                   />
                                 )}
 
+                                <span className="order-1 min-w-0 flex-1 truncate font-medium text-sm sm:hidden">
+                                  <Trans>Recipient {index + 1}</Trans>
+                                </span>
+
                                 <FormField
                                   control={form.control}
                                   name={`signers.${index}.email`}
                                   render={({ field }) => (
                                     <FormItem
-                                      className={cn('relative w-full', {
-                                        'mb-6':
+                                      className={cn('relative order-2 w-full sm:order-none', {
+                                        'sm:mb-6':
                                           form.formState.errors.signers?.[index] &&
                                           !form.formState.errors.signers[index]?.email,
                                       })}
                                     >
-                                      {!showAdvancedSettings && index === 0 && (
-                                        <FormLabel>
+                                      {!showAdvancedSettings && (
+                                        <FormLabel className={cn(index !== 0 && 'sm:sr-only')}>
                                           <Trans>Email</Trans>
                                         </FormLabel>
                                       )}
@@ -941,14 +956,14 @@ export const EnvelopeEditorRecipientForm = () => {
                                   name={`signers.${index}.name`}
                                   render={({ field }) => (
                                     <FormItem
-                                      className={cn('w-full', {
-                                        'mb-6':
+                                      className={cn('order-3 w-full sm:order-none', {
+                                        'sm:mb-6':
                                           form.formState.errors.signers?.[index] &&
                                           !form.formState.errors.signers[index]?.name,
                                       })}
                                     >
-                                      {!showAdvancedSettings && index === 0 && (
-                                        <FormLabel>
+                                      {!showAdvancedSettings && (
+                                        <FormLabel className={cn(index !== 0 && 'sm:sr-only')}>
                                           <Trans>Name</Trans>
                                         </FormLabel>
                                       )}
@@ -987,8 +1002,8 @@ export const EnvelopeEditorRecipientForm = () => {
                                   name={`signers.${index}.role`}
                                   render={({ field }) => (
                                     <FormItem
-                                      className={cn('mt-auto w-fit', {
-                                        'mb-6':
+                                      className={cn('order-1 mt-auto w-fit sm:order-none', {
+                                        'sm:mb-6':
                                           form.formState.errors.signers?.[index] &&
                                           !form.formState.errors.signers[index]?.role,
                                       })}
@@ -1018,8 +1033,8 @@ export const EnvelopeEditorRecipientForm = () => {
 
                                 <Button
                                   variant="ghost"
-                                  className={cn('mt-auto px-2', {
-                                    'mb-6': form.formState.errors.signers?.[index],
+                                  className={cn('order-1 mt-auto px-2 sm:order-none', {
+                                    'sm:mb-6': form.formState.errors.signers?.[index],
                                   })}
                                   data-testid="remove-signer-button"
                                   disabled={

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-tabs.tsx

@@ -0,0 +1,110 @@
+import type { TEnvelopeEditorSettings } from '@documenso/lib/types/envelope-editor';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { BellRingIcon, type LucideIcon, MailIcon, SettingsIcon, ShieldIcon } from 'lucide-react';
+
+type EnvelopeEditorSettingsConfig = NonNullable<TEnvelopeEditorSettings['settings']>;
+
+export type EnvelopeEditorSettingsTabId = 'general' | 'reminders' | 'notifications' | 'security';
+
+export type EnvelopeEditorSettingsTab = {
+  id: EnvelopeEditorSettingsTabId;
+  title: MessageDescriptor;
+  description: MessageDescriptor;
+  icon: LucideIcon;
+  isEnabled: (settings: EnvelopeEditorSettingsConfig) => boolean;
+};
+
+export const ENVELOPE_EDITOR_SETTINGS_TABS: EnvelopeEditorSettingsTab[] = [
+  {
+    id: 'general',
+    title: msg`General`,
+    description: msg`Configure document settings and options before sending.`,
+    icon: SettingsIcon,
+    isEnabled: () => true,
+  },
+  {
+    id: 'reminders',
+    title: msg`Reminders`,
+    description: msg`Configure signing reminder settings for the document.`,
+    icon: BellRingIcon,
+    isEnabled: (settings) => settings.allowConfigureReminders,
+  },
+  {
+    id: 'notifications',
+    title: msg`Notifications`,
+    description: msg`Configure notification settings for the document.`,
+    icon: MailIcon,
+    isEnabled: (settings) => settings.allowConfigureDistribution,
+  },
+  {
+    id: 'security',
+    title: msg`Security`,
+    description: msg`Configure security settings for the document.`,
+    icon: ShieldIcon,
+    isEnabled: () => true,
+  },
+];
+
+export type EnvelopeEditorSettingsTabsProps = {
+  settings: EnvelopeEditorSettingsConfig;
+  activeTab: EnvelopeEditorSettingsTabId;
+  onActiveTabChange: (tab: EnvelopeEditorSettingsTabId) => void;
+};
+
+export const EnvelopeEditorSettingsTabs = ({
+  settings,
+  activeTab,
+  onActiveTabChange,
+}: EnvelopeEditorSettingsTabsProps) => {
+  const { t } = useLingui();
+
+  const visibleTabs = ENVELOPE_EDITOR_SETTINGS_TABS.filter((tab) => tab.isEnabled(settings));
+
+  return (
+    <>
+      <nav className="scrollbar-hidden flex overflow-x-auto px-4 md:hidden">
+        {visibleTabs.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            aria-current={activeTab === tab.id ? 'true' : undefined}
+            onClick={(event) => {
+              onActiveTabChange(tab.id);
+
+              event.currentTarget.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+            }}
+            className={cn(
+              'shrink-0 whitespace-nowrap border-b-2 px-3 py-2.5 font-medium text-sm transition-colors',
+              activeTab === tab.id
+                ? 'border-primary text-foreground'
+                : 'border-transparent text-muted-foreground hover:text-foreground',
+            )}
+          >
+            {t(tab.title)}
+          </button>
+        ))}
+      </nav>
+
+      <nav className="mb-8 hidden w-full flex-col items-start gap-y-2 px-4 md:flex">
+        {visibleTabs.map((tab) => (
+          <Button
+            key={tab.id}
+            variant="ghost"
+            aria-current={activeTab === tab.id ? 'true' : undefined}
+            className={cn('w-full justify-start', {
+              'bg-secondary': activeTab === tab.id,
+            })}
+            onClick={() => onActiveTabChange(tab.id)}
+          >
+            <tab.icon className="mr-2 h-5 w-5" />
+            {t(tab.title)}
+          </Button>
+        ))}
+      </nav>
+    </>
+  );
+};

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -1,4 +1,5 @@
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useEnvelopeAutosave } from '@documenso/lib/client-only/hooks/use-envelope-autosave';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
@@ -25,6 +26,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
 
 import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog';
+import { useCspNonce } from '~/utils/nonce';
 
 import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeEditorRecipientForm } from './envelope-editor-recipient-form';
@@ -41,10 +43,12 @@ type LocalFile = {
 
 export const EnvelopeEditorUploadPage = () => {
   const organisation = useCurrentOrganisation();
+  const cspNonce = useCspNonce();
 
   const { t, i18n } = useLingui();
   const { maximumEnvelopeItemCount, remaining } = useLimits();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const {
     envelope,
@@ -213,6 +217,12 @@ export const EnvelopeEditorUploadPage = () => {
     const { data } = await createPromise.catch((error) => {
       console.error(error);
 
+      analytics.captureException(error, {
+        source: isEmbedded ? 'embed' : 'editor',
+        location: 'create_envelope_items',
+        envelopeId: envelope.id,
+      });
+
       // Set error state on files in batch upload.
       setLocalFiles((prev) =>
         prev.map((uploadingFile) =>
@@ -290,6 +300,12 @@ export const EnvelopeEditorUploadPage = () => {
     } catch (error) {
       console.error(error);
 
+      analytics.captureException(error, {
+        source: isEmbedded ? 'embed' : 'editor',
+        location: 'replace_pdf',
+        envelopeId: envelope.id,
+      });
+
       toast({
         title: t`Replace failed`,
         description: t`Something went wrong while replacing the PDF`,
@@ -448,13 +464,13 @@ export const EnvelopeEditorUploadPage = () => {
   };
 
   return (
-    <div className="mx-auto max-w-4xl space-y-6 p-8">
+    <div className="mx-auto max-w-4xl space-y-6 p-4 md:p-8">
       <input {...getReplaceInputProps()} />
 
       <EnvelopeEditorInvalidDirectTemplateAlert className="max-w-none" />
 
       <Card backdropBlur={false} className="border">
-        <CardHeader className="pb-3">
+        <CardHeader className="p-4 pb-3 sm:p-6 sm:pb-3">
           <CardTitle>
             <Trans>Documents</Trans>
           </CardTitle>
@@ -463,13 +479,13 @@ export const EnvelopeEditorUploadPage = () => {
           </CardDescription>
         </CardHeader>
 
-        <CardContent>
+        <CardContent className="p-4 pt-0 sm:p-6 sm:pt-0">
           {uploadConfig?.allowUpload && (
             <DocumentDropzone
               data-testid="envelope-item-dropzone"
               onDrop={onFileDrop}
               allowMultiple
-              className="pt-6 pb-4"
+              className="sm:pt-6 sm:pb-4"
               disabled={dropzoneDisabledMessage !== null}
               disabledMessage={dropzoneDisabledMessage || undefined}
               disabledHeading={msg`Upload disabled`}
@@ -480,7 +496,7 @@ export const EnvelopeEditorUploadPage = () => {
 
           {/* Uploaded Files List */}
           <div className="mt-4">
-            <DragDropContext onDragEnd={onDragEnd}>
+            <DragDropContext nonce={cspNonce} onDragEnd={onDragEnd}>
               <Droppable droppableId="files">
                 {(provided) => (
                   <div
@@ -633,7 +649,7 @@ export const EnvelopeEditorUploadPage = () => {
       <EnvelopeEditorRecipientForm />
 
       {editorConfig.general.allowAddFieldsStep && (
-        <div className="flex justify-end">
+        <div className="hidden justify-end md:flex">
           <Button type="button" onClick={() => void navigateToStep('addFields')}>
             <Trans>Add Fields</Trans>
           </Button>

apps/remix/app/components/general/envelope-editor/envelope-editor.tsx

@@ -1,50 +1,38 @@
 import type { EnvelopeEditorStep } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@documenso/ui/primitives/sheet';
 import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { EnvelopeType } from '@prisma/client';
 import { motion } from 'framer-motion';
 import {
   ArrowLeftIcon,
-  CopyPlusIcon,
-  DownloadCloudIcon,
   EyeIcon,
-  FileOutputIcon,
-  LinkIcon,
   type LucideIcon,
+  MoreHorizontalIcon,
   MousePointerIcon,
-  SendIcon,
-  SettingsIcon,
-  Trash2Icon,
   UploadIcon,
 } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Link, useNavigate, useSearchParams } from 'react-router';
+import { Link, useSearchParams } from 'react-router';
 import { match } from 'ts-pattern';
 
-import { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
-import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribute-dialog';
-import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
-import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
-import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
-import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
-import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
-import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
-
 import { EnvelopeEditorFieldsPage } from './envelope-editor-fields-page';
 import EnvelopeEditorHeader from './envelope-editor-header';
+import { EnvelopeEditorMobileNotice } from './envelope-editor-mobile-notice';
 import { EnvelopeEditorPreviewPage } from './envelope-editor-preview-page';
+import { EnvelopeEditorQuickActions, useHasEnvelopeEditorQuickActions } from './envelope-editor-quick-actions';
 import { EnvelopeEditorUploadPage } from './envelope-editor-upload-page';
 
 type EnvelopeEditorStepData = {
   id: string;
   title: MessageDescriptor;
+  /** Short label used where space is limited, such as the mobile step bar. */
+  shortTitle: MessageDescriptor;
   icon: LucideIcon;
   description: MessageDescriptor;
 };
@@ -52,6 +40,7 @@ type EnvelopeEditorStepData = {
 const UPLOAD_STEP = {
   id: 'upload',
   title: msg`Document & Recipients`,
+  shortTitle: msg`Documents`,
   icon: UploadIcon,
   description: msg`Upload documents and add recipients`,
 };
@@ -59,6 +48,7 @@ const UPLOAD_STEP = {
 const ADD_FIELDS_STEP = {
   id: 'addFields',
   title: msg`Add Fields`,
+  shortTitle: msg`Fields`,
   icon: MousePointerIcon,
   description: msg`Place and configure form fields in the document`,
 };
@@ -66,6 +56,7 @@ const ADD_FIELDS_STEP = {
 const PREVIEW_STEP = {
   id: 'preview',
   title: msg`Preview`,
+  shortTitle: msg`Preview`,
   icon: EyeIcon,
   description: msg`Preview the document before sending`,
 };
@@ -73,32 +64,20 @@ const PREVIEW_STEP = {
 export const EnvelopeEditor = () => {
   const { t } = useLingui();
 
-  const navigate = useNavigate();
+  const { editorConfig, isDocument, relativePath, navigateToStep, flushAutosave, resetForms } =
+    useCurrentEnvelopeEditor();
 
-  const {
-    envelope,
-    editorConfig,
-    isDocument,
-    isTemplate,
-    relativePath,
-    navigateToStep,
-    syncEnvelope,
-    flushAutosave,
-    resetForms,
-  } = useCurrentEnvelopeEditor();
+  const [searchParams] = useSearchParams();
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  // The mobile "More" sheet holds the quick actions and the return link, so it
+  // is only offered when at least one of them applies.
+  const hasQuickActions = useHasEnvelopeEditorQuickActions();
+  const hasMobileMenu = hasQuickActions || !editorConfig.embedded;
 
   const {
     general: { minimizeLeftSidebar, allowUploadAndRecipientStep, allowAddFieldsStep, allowPreviewStep },
-    actions: {
-      allowDistributing,
-      allowDirectLink,
-      allowDuplication,
-      allowSaveAsTemplate,
-      allowDownloadPDF,
-      allowDeletion,
-    },
   } = editorConfig;
 
   const envelopeEditorSteps = useMemo(() => {
@@ -175,16 +154,21 @@ export const EnvelopeEditor = () => {
   const currentStepData = envelopeEditorSteps.find((step) => step.id === searchParamsStep) || envelopeEditorSteps[0];
 
   return (
-    <div className="h-screen w-screen bg-envelope-editor-background">
+    <div className="flex h-[100dvh] w-full flex-col bg-envelope-editor-background">
       <EnvelopeEditorHeader />
 
+      {!editorConfig.embedded && <EnvelopeEditorMobileNotice />}
+
       {/* Main Content Area */}
-      <div className="flex h-[calc(100vh-4rem)] w-screen">
-        {/* Left Section - Step Navigation */}
+      <div className="flex min-h-0 w-full flex-1">
+        {/* Left Section - Step Navigation. Hidden below `md`, where the bottom bar takes over. */}
         <div
-          className={cn('flex w-80 flex-shrink-0 flex-col overflow-y-auto border-border border-r bg-background py-4', {
-            'w-14': minimizeLeftSidebar,
-          })}
+          className={cn(
+            'hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-border border-r bg-background py-4 md:flex',
+            {
+              'w-14': minimizeLeftSidebar,
+            },
+          )}
         >
           {/* Left section step selector. */}
           {minimizeLeftSidebar ? (
@@ -318,7 +302,7 @@ export const EnvelopeEditor = () => {
 
           {/* Quick Actions. */}
           <div
-            className={cn('space-y-3 px-4 [&_.lucide]:text-muted-foreground', {
+            className={cn('space-y-3 px-4', {
               'px-2': minimizeLeftSidebar,
             })}
           >
@@ -328,166 +312,7 @@ export const EnvelopeEditor = () => {
               </h4>
             )}
 
-            {editorConfig.settings && (
-              <EnvelopeEditorSettingsDialog
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Settings`)}>
-                    <SettingsIcon className="h-4 w-4" />
-
-                    {!minimizeLeftSidebar && (
-                      <span className="ml-2">
-                        {isDocument ? <Trans>Document Settings</Trans> : <Trans>Template Settings</Trans>}
-                      </span>
-                    )}
-                  </Button>
-                }
-              />
-            )}
-
-            {isDocument && allowDistributing && (
-              <>
-                <EnvelopeDistributeDialog
-                  documentRootPath={relativePath.documentRootPath}
-                  trigger={
-                    <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Send Envelope`)}>
-                      <SendIcon className="h-4 w-4" />
-
-                      {!minimizeLeftSidebar && (
-                        <span className="ml-2">
-                          <Trans>Send Document</Trans>
-                        </span>
-                      )}
-                    </Button>
-                  }
-                />
-
-                <EnvelopeRedistributeDialog
-                  envelope={envelope}
-                  trigger={
-                    <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Resend Envelope`)}>
-                      <SendIcon className="h-4 w-4" />
-
-                      {!minimizeLeftSidebar && (
-                        <span className="ml-2">
-                          <Trans>Resend Document</Trans>
-                        </span>
-                      )}
-                    </Button>
-                  }
-                />
-              </>
-            )}
-
-            {isTemplate && allowDirectLink && (
-              <TemplateDirectLinkDialog
-                templateId={mapSecondaryIdToTemplateId(envelope.secondaryId)}
-                directLink={envelope.directLink}
-                recipients={envelope.recipients}
-                onCreateSuccess={async () => await syncEnvelope()}
-                onDeleteSuccess={async () => await syncEnvelope()}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Direct Link`)}>
-                    <LinkIcon className="h-4 w-4" />
-
-                    {!minimizeLeftSidebar && (
-                      <span className="ml-2">
-                        <Trans>Direct Link</Trans>
-                      </span>
-                    )}
-                  </Button>
-                }
-              />
-            )}
-
-            {allowDuplication && (
-              <EnvelopeDuplicateDialog
-                envelopeId={envelope.id}
-                envelopeType={envelope.type}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Duplicate Envelope`)}>
-                    <CopyPlusIcon className="h-4 w-4" />
-
-                    {!minimizeLeftSidebar && (
-                      <span className="ml-2">
-                        {isDocument ? <Trans>Duplicate Document</Trans> : <Trans>Duplicate Template</Trans>}
-                      </span>
-                    )}
-                  </Button>
-                }
-              />
-            )}
-
-            {allowSaveAsTemplate && isDocument && (
-              <EnvelopeSaveAsTemplateDialog
-                envelopeId={envelope.id}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Save as Template`)}>
-                    <FileOutputIcon className="h-4 w-4" />
-
-                    {!minimizeLeftSidebar && (
-                      <span className="ml-2">
-                        <Trans>Save as Template</Trans>
-                      </span>
-                    )}
-                  </Button>
-                }
-              />
-            )}
-
-            {allowDownloadPDF && (
-              <EnvelopeDownloadDialog
-                envelopeId={envelope.id}
-                envelopeStatus={envelope.status}
-                isLegacy={envelope.internalVersion === 1}
-                envelopeItems={envelope.envelopeItems}
-                trigger={
-                  <Button variant="ghost" size="sm" className="w-full justify-start" title={t(msg`Download PDF`)}>
-                    <DownloadCloudIcon className="h-4 w-4" />
-
-                    {!minimizeLeftSidebar && (
-                      <span className="ml-2">
-                        <Trans>Download PDF</Trans>
-                      </span>
-                    )}
-                  </Button>
-                }
-              />
-            )}
-
-            {/* Check envelope ID since it can be in embedded create mode. */}
-            {allowDeletion && envelope.id && (
-              <EnvelopeDeleteDialog
-                id={envelope.id}
-                type={envelope.type}
-                status={envelope.status}
-                title={envelope.title}
-                canManageDocument={true}
-                trigger={
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="w-full justify-start"
-                    title={t(msg`Delete Envelope`)}
-                  >
-                    <Trash2Icon className="h-4 w-4" />
-
-                    {!minimizeLeftSidebar && (
-                      <span className="ml-2">
-                        {isDocument ? <Trans>Delete Document</Trans> : <Trans>Delete Template</Trans>}
-                      </span>
-                    )}
-                  </Button>
-                }
-                onDelete={async () => {
-                  await navigate(
-                    envelope.type === EnvelopeType.DOCUMENT
-                      ? relativePath.documentRootPath
-                      : relativePath.templateRootPath,
-                  );
-                }}
-              />
-            )}
+            <EnvelopeEditorQuickActions showLabels={!minimizeLeftSidebar} />
           </div>
 
           {/* Footer of left sidebar. */}
@@ -518,21 +343,89 @@ export const EnvelopeEditor = () => {
           )}
         </div>
 
-        {/* Main Content - Changes based on current step */}
-        <div className="flex-1 overflow-y-auto">
-          {match({
-            pageToRender,
-            allowUploadAndRecipientStep,
-            allowAddFieldsStep,
-            allowPreviewStep,
-          })
-            .with({ pageToRender: 'loading' }, () => <SpinnerBox className="py-32" />)
-            .with({ pageToRender: 'upload', allowUploadAndRecipientStep: true }, () => <EnvelopeEditorUploadPage />)
-            .with({ pageToRender: 'addFields', allowAddFieldsStep: true }, () => <EnvelopeEditorFieldsPage />)
-            .with({ pageToRender: 'preview', allowPreviewStep: true }, () => <EnvelopeEditorPreviewPage />)
-            .otherwise(() => null)}
+        <div className="flex min-w-0 flex-1 flex-col">
+          {/* Main Content - Changes based on current step */}
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {match({
+              pageToRender,
+              allowUploadAndRecipientStep,
+              allowAddFieldsStep,
+              allowPreviewStep,
+            })
+              .with({ pageToRender: 'loading' }, () => <SpinnerBox className="py-32" />)
+              .with({ pageToRender: 'upload', allowUploadAndRecipientStep: true }, () => <EnvelopeEditorUploadPage />)
+              .with({ pageToRender: 'addFields', allowAddFieldsStep: true }, () => <EnvelopeEditorFieldsPage />)
+              .with({ pageToRender: 'preview', allowPreviewStep: true }, () => <EnvelopeEditorPreviewPage />)
+              .otherwise(() => null)}
+          </div>
+
+          {/* Mobile step bar. Replaces the sidebar below `md`. */}
+          <nav
+            className="flex h-14 shrink-0 items-stretch border-border border-t bg-background md:hidden"
+            aria-label={t`Editor steps`}
+          >
+            {envelopeEditorSteps.map((step) => {
+              const Icon = step.icon;
+              const isActive = searchParamsStep === step.id;
+
+              return (
+                <button
+                  key={step.id}
+                  data-testid={`envelope-editor-mobile-step-${step.id}`}
+                  type="button"
+                  aria-current={isActive ? 'step' : undefined}
+                  className={cn(
+                    'flex flex-1 flex-col items-center justify-center gap-1 font-medium text-[11px] transition-colors',
+                    isActive ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground hover:text-foreground',
+                  )}
+                  onClick={() => void navigateToStep(step.id as EnvelopeEditorStep)}
+                >
+                  <Icon className="h-5 w-5" />
+                  {t(step.shortTitle)}
+                </button>
+              );
+            })}
+
+            {hasMobileMenu && (
+              <button
+                type="button"
+                className="flex flex-1 flex-col items-center justify-center gap-1 font-medium text-[11px] text-muted-foreground transition-colors hover:text-foreground"
+                onClick={() => setIsMobileMenuOpen(true)}
+              >
+                <MoreHorizontalIcon className="h-5 w-5" />
+                <Trans>More</Trans>
+              </button>
+            )}
+          </nav>
         </div>
       </div>
+
+      {/* Mobile quick actions, opened from the "More" item in the step bar. */}
+      {hasMobileMenu && (
+        <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+          <SheetContent className="flex w-full max-w-[350px] flex-col overflow-y-auto">
+            <SheetHeader className="text-left">
+              <SheetTitle>
+                <Trans>Quick Actions</Trans>
+              </SheetTitle>
+            </SheetHeader>
+
+            <EnvelopeEditorQuickActions showLabels />
+
+            {!editorConfig.embedded && (
+              <Button variant="ghost" className="mt-auto w-full justify-start" asChild>
+                <Link to={relativePath.basePath}>
+                  <ArrowLeftIcon className="h-4 w-4 flex-shrink-0" />
+
+                  <span className="ml-2">
+                    {isDocument ? <Trans>Return to documents</Trans> : <Trans>Return to templates</Trans>}
+                  </span>
+                </Link>
+              </Button>
+            )}
+          </SheetContent>
+        </Sheet>
+      )}
     </div>
   );
 };

apps/remix/app/components/general/envelope-editor/envelope-generic-page-renderer.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import {
   type PageRenderData,
@@ -18,6 +19,7 @@ type GenericLocalField = TEnvelope['fields'][number] & {
 
 export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRenderData }) => {
   const { i18n } = useLingui();
+  const analytics = useAnalytics();
 
   const {
     envelopeStatus,
@@ -114,6 +116,13 @@ export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRender
       unsafeRenderFieldOnLayer(field);
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'envelope_page_render',
+        envelopeId: currentEnvelopeItem?.envelopeId,
+      });
+
       setRenderError(true);
     }
   };

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import {
   type PageRenderData,
@@ -53,6 +54,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const {
     envelopeData,
@@ -426,6 +428,14 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
       unsafeRenderFieldOnLayer(unparsedField, fieldCanvasStyleCache);
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'page_render',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      });
+
       setRenderError(true);
     }
   };
@@ -507,6 +517,14 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: payload.type,
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      });
+
       toast({
         title: t`Error`,
         description: t`An error occurred while signing the field.`,

apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx

@@ -118,12 +118,6 @@ export const EnvelopeSignerCompleteDialog = () => {
           title: t`Document already signed`,
           description: t`This document was already signed and no further action was taken.`,
         });
-      } else {
-        analytics.capture('App: Recipient has completed signing', {
-          signerId: recipient.id,
-          documentId: envelope.id,
-          timestamp: new Date().toISOString(),
-        });
       }
 
       if (onDocumentCompleted) {
@@ -148,6 +142,13 @@ export const EnvelopeSignerCompleteDialog = () => {
       const error = AppError.parseError(err);
 
       if (error.code !== AppErrorCode.TWO_FACTOR_AUTH_FAILED) {
+        analytics.captureException(err, {
+          source: 'signing',
+          location: 'complete_document',
+          recipientId: recipient.id,
+          envelopeId: envelope.id,
+        });
+
         onDocumentError?.();
       }
 
@@ -221,6 +222,13 @@ export const EnvelopeSignerCompleteDialog = () => {
     } catch (err) {
       console.log('err', err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'complete_document_next_signer',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      });
+
       onDocumentError?.();
 
       // Rethrow so DocumentSigningCompleteDialog can toast a specific

apps/remix/app/components/general/envelope/envelope-drop-zone-wrapper.tsx

@@ -93,14 +93,6 @@ export const EnvelopeDropZoneWrapper = ({ children, type, className }: EnvelopeD
         duration: 5000,
       });
 
-      if (type === EnvelopeType.DOCUMENT) {
-        analytics.capture('App: Document Uploaded', {
-          userId: user.id,
-          documentId: id,
-          timestamp: new Date().toISOString(),
-        });
-      }
-
       const pathPrefix = type === EnvelopeType.DOCUMENT ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
 
       const aiQueryParam = team.preferences.aiFeaturesEnabled ? '?ai=true' : '';
@@ -109,6 +101,11 @@ export const EnvelopeDropZoneWrapper = ({ children, type, className }: EnvelopeD
     } catch (err) {
       const error = AppError.parseError(err);
 
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'upload_document',
+      });
+
       const errorMessage = getUploadErrorMessage(error.code);
 
       toast({

apps/remix/app/components/general/envelope/envelope-upload-button.tsx

@@ -1,4 +1,5 @@
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -34,6 +35,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
   const { t, i18n } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
+  const analytics = useAnalytics();
 
   const team = useCurrentTeam();
 
@@ -112,6 +114,11 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'upload_document',
+      });
+
       const errorMessage = getUploadErrorMessage(error.code);
 
       toast({

apps/remix/app/components/general/pdf-viewer/pdf-viewer.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import type { ImageLoadingState, PageRenderData } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { PDF_VIEWER_PAGE_CLASSNAME } from '@documenso/lib/constants/pdf-viewer';
 import { cn } from '@documenso/ui/lib/utils';
@@ -68,6 +69,7 @@ export default function PDFViewer({
 }: PDFViewerProps) {
   const { t } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const $el = useRef<HTMLDivElement>(null);
 
@@ -150,6 +152,11 @@ export default function PDFViewer({
         console.error(err);
         setLoadingState('error');
 
+        analytics.captureException(err, {
+          source: 'pdf_viewer',
+          location: 'pdf_load',
+        });
+
         toast({
           title: t`Error`,
           description: t`An error occurred while loading the document.`,
@@ -366,6 +373,8 @@ const PdfViewerPage = ({
  * Manages rendering a page from a pdf.
  */
 const usePdfPageImage = ({ pageNumber, pdf, scale, scaledWidth, scaledHeight }: PdfViewerPageProps) => {
+  const analytics = useAnalytics();
+
   const [imageLoadingState, setImageLoadingState] = useState<ImageLoadingState>('loading');
 
   const [imageUrl, setImageUrl] = useState('');
@@ -457,6 +466,12 @@ const usePdfPageImage = ({ pageNumber, pdf, scale, scaledWidth, scaledHeight }:
 
         if (!isCancelled) {
           console.error(err);
+
+          analytics.captureException(err, {
+            source: 'pdf_viewer',
+            location: 'pdf_page_render',
+          });
+
           setImageLoadingState('error');
         }
       } finally {

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -25,6 +25,7 @@ import { z } from 'zod';
 
 import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 import { useCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
 
 export type TemplateEditFormProps = {
   className?: string;
@@ -38,6 +39,7 @@ const EditTemplateSteps: EditTemplateStep[] = ['settings', 'signers', 'fields'];
 export const TemplateEditForm = ({ initialTemplate, className, templateRootPath }: TemplateEditFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const cspNonce = useCspNonce();
 
   const navigate = useNavigate();
   const team = useCurrentTeam();
@@ -339,6 +341,7 @@ export const TemplateEditForm = ({ initialTemplate, className, templateRootPath
               onSubmit={onAddTemplatePlaceholderFormSubmit}
               onAutoSave={onAddTemplatePlaceholderFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
+              nonce={cspNonce}
             />
 
             <AddTemplateFieldsFormPartial

apps/remix/app/components/general/use-admin-search-categories.ts

@@ -39,13 +39,14 @@ const ADMIN_GROUP_ICONS: Record<TAdminSearchResultType, LucideIcon> = {
 
 /**
  * Admin list pages which support prefilling their search from the URL, used
- * for the "View all results" links on capped groups. Teams, recipients and
+ * for the "View all results" links on capped groups. Teams and
  * subscriptions have no admin list pages.
  */
 const ADMIN_GROUP_LIST_PATHS: Partial<Record<TAdminSearchResultType, (_query: string) => string>> = {
   document: (query) => `/admin/documents?term=${encodeURIComponent(query)}`,
   user: (query) => `/admin/users?search=${encodeURIComponent(query)}`,
   organisation: (query) => `/admin/organisations?query=${encodeURIComponent(query)}`,
+  recipient: (query) => `/admin/documents?term=${encodeURIComponent(`recipient:${query}`)}`,
 };
 
 export type UseAdminSearchCategoriesOptions = {

apps/remix/app/entry.client.tsx

@@ -18,6 +18,23 @@ import './utils/polyfills/promise-with-resolvers';
  * the page early, leaving dead event handlers (broken dropdowns, native form
  * submits).
  */
+/**
+ * Signing and direct template URLs contain recipient tokens which must never
+ * be sent to PostHog. Recipient context is attached explicitly via
+ * `recipientId` where needed instead.
+ */
+const redactTokensFromUrl = (value: string) => {
+  return value.replace(/(\/(?:sign|d|direct)\/)([^/?#]+)/g, '$1:token');
+};
+
+const URL_EVENT_PROPERTIES = [
+  '$current_url',
+  '$pathname',
+  '$referrer',
+  '$initial_referrer',
+  '$prev_pageview_pathname',
+] as const;
+
 function initPosthog() {
   const postHogConfig = extractPostHogConfig();
 
@@ -25,7 +42,34 @@ function initPosthog() {
     void import('posthog-js').then(({ default: posthog }) => {
       posthog.init(postHogConfig.key, {
         api_host: postHogConfig.host,
+        // Only create person profiles for identified (authenticated) users,
+        // anonymous recipients on signing pages stay anonymous.
+        person_profiles: 'identified_only',
+        // Explicit events only, autocapture on signing pages blows up usage
+        // without providing actionable data.
+        autocapture: false,
+        capture_pageview: true,
+        capture_pageleave: false,
         capture_exceptions: true,
+        before_send: (event) => {
+          if (!event) {
+            return null;
+          }
+
+          for (const property of URL_EVENT_PROPERTIES) {
+            const value = event.properties?.[property];
+
+            if (typeof value === 'string') {
+              event.properties[property] = redactTokensFromUrl(value);
+            }
+          }
+
+          if (event.$set_once && typeof event.$set_once['$initial_current_url'] === 'string') {
+            event.$set_once['$initial_current_url'] = redactTokensFromUrl(event.$set_once['$initial_current_url']);
+          }
+
+          return event;
+        },
       });
     });
   }

apps/remix/app/entry.server.tsx

@@ -7,10 +7,11 @@ import { createReadableStreamFromReadable } from '@react-router/node';
 import { isbot } from 'isbot';
 import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 import { renderToPipeableStream } from 'react-dom/server';
-import type { AppLoadContext, EntryContext } from 'react-router';
+import type { EntryContext, RouterContextProvider } from 'react-router';
 import { ServerRouter } from 'react-router';
 
 import { langCookie } from './storage/lang-cookie.server';
+import { nonceContext } from './utils/nonce';
 
 export const streamTimeout = 5_000;
 
@@ -19,7 +20,7 @@ export default async function handleRequest(
   responseStatusCode: number,
   responseHeaders: Headers,
   routerContext: EntryContext,
-  loadContext: AppLoadContext,
+  loadContext: RouterContextProvider,
 ) {
   let language = await langCookie.parse(request.headers.get('cookie') ?? '');
 
@@ -33,7 +34,7 @@ export default async function handleRequest(
   // scripts it injects (route manifest, hydration data, module preloads).
   // The same nonce is also exposed to the React tree via the root loader so
   // our own inline scripts/styles can carry it.
-  const nonce = loadContext.nonce || undefined;
+  const nonce = loadContext.get(nonceContext) || undefined;
 
   return new Promise((resolve, reject) => {
     let shellRendered = false;

apps/remix/app/middleware/admin.ts

@@ -0,0 +1,13 @@
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { isAdmin } from '@documenso/lib/utils/is-admin';
+import { type MiddlewareFunction, redirect } from 'react-router';
+
+export const adminMiddleware: MiddlewareFunction = async ({ request }, next) => {
+  const { user } = await getOptionalSession(request);
+
+  if (!user || !isAdmin(user)) {
+    throw redirect('/');
+  }
+
+  return next();
+};

apps/remix/app/middleware/nonce.ts

@@ -0,0 +1,8 @@
+import type { MiddlewareFunction } from 'react-router';
+
+import { getRequestNonce } from '../../server/load-context';
+import { nonceContext } from '../utils/nonce';
+
+export const nonceMiddleware: MiddlewareFunction = ({ context }) => {
+  context.set(nonceContext, getRequestNonce());
+};

apps/remix/app/root.tsx

@@ -1,4 +1,5 @@
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { SessionProvider } from '@documenso/lib/client-only/providers/session';
 import { getBasePath } from '@documenso/lib/constants/app';
 import { APP_I18N_OPTIONS, type SupportedLanguageCodes } from '@documenso/lib/constants/i18n';
@@ -9,6 +10,7 @@ import { getOrganisationSession } from '@documenso/trpc/server/organisation-rout
 import { Toaster } from '@documenso/ui/primitives/toaster';
 import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 import { NuqsAdapter } from 'nuqs/adapters/react-router/v7';
+import { useEffect } from 'react';
 import {
   data,
   isRouteErrorResponse,
@@ -21,13 +23,16 @@ import {
   useMatches,
 } from 'react-router';
 import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from 'remix-themes';
+import { nonceMiddleware } from '~/middleware/nonce';
 import type { Route } from './+types/root';
 import stylesheet from './app.css?url';
 import { GenericErrorLayout } from './components/general/generic-error-layout';
 import { langCookie } from './storage/lang-cookie.server';
 import { themeSessionResolver } from './storage/theme-session.server';
 import { appMetaTags } from './utils/meta';
-import { nonce } from './utils/nonce';
+import { nonce, nonceContext } from './utils/nonce';
+
+export const middleware = [nonceMiddleware];
 
 export const links: Route.LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }];
 
@@ -72,7 +77,7 @@ export async function loader({ context, request }: Route.LoaderArgs) {
       // Surface the per-request CSP nonce produced by `securityHeadersMiddleware` so all
       // SSR-rendered <script>/<style> elements in this layout (and child
       // routes that need it) can carry the matching nonce attribute.
-      nonce: context.nonce,
+      nonce: context.get(nonceContext),
       session: session.isAuthenticated
         ? {
             user: session.user,
@@ -200,11 +205,19 @@ export default function App() {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
   if (errorCode !== 404) {
     console.error('[RootErrorBoundary]', error);
   }
 
+  useEffect(() => {
+    if (errorCode !== 404) {
+      analytics.captureException(error, { source: 'app', location: 'root_boundary' });
+    }
+  }, [error]);
+
   return <GenericErrorLayout errorCode={errorCode} />;
 }

apps/remix/app/routes/_authenticated+/admin+/_layout.tsx

@@ -1,4 +1,4 @@
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import { isAdmin } from '@documenso/lib/utils/is-admin';
 import { cn } from '@documenso/ui/lib/utils';
@@ -20,16 +20,18 @@ import {
 import { Link, Outlet, redirect, useLocation } from 'react-router';
 
 import { AdminLicenseStatusBanner } from '~/components/general/admin-license-status-banner';
+import { adminMiddleware } from '~/middleware/admin';
 import { appMetaTags } from '~/utils/meta';
-
 import type { Route } from './+types/_layout';
 
 export function meta() {
   return appMetaTags(msg`Admin`);
 }
 
+export const middleware = [adminMiddleware];
+
 export async function loader({ request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
+  const { user } = await getOptionalSession(request);
 
   const license = await LicenseClient.getInstance()?.getCachedLicense();
 

apps/remix/app/routes/_authenticated+/admin+/claims.tsx

@@ -1,9 +1,7 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { ClaimCreateDialog } from '~/components/dialogs/claim-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -24,32 +22,10 @@ export default function Claims({ loaderData }: Route.ComponentProps) {
 
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -59,8 +35,8 @@ export default function Claims({ loaderData }: Route.ComponentProps) {
 
       <div className="mt-4">
         <Input
-          defaultValue={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+          onChange={(e) => void setSearchQuery(e.target.value || null)}
           placeholder={t`Search by claim ID or name`}
           className="mb-4"
         />

apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx

@@ -12,7 +12,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router';
 
 import { DocumentStatus } from '~/components/general/document/document-status';
@@ -30,6 +30,12 @@ export default function AdminDocumentsPage() {
   const page = searchParams?.get?.('page') ? Number(searchParams.get('page')) : undefined;
   const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;
 
+  const urlTerm = searchParams?.get?.('term') ?? '';
+
+  useEffect(() => {
+    setTerm(urlTerm);
+  }, [urlTerm]);
+
   const { data: findDocumentsData, isPending: isFindDocumentsLoading } = trpc.admin.document.find.useQuery(
     {
       query: debouncedTerm,
@@ -131,7 +137,7 @@ export default function AdminDocumentsPage() {
         <div>
           <Input
             type="search"
-            placeholder={_(msg`Search by document title, team:123 or user:123`)}
+            placeholder={_(msg`Search by document title, recipient:123, team:123 or user:123`)}
             value={term}
             onChange={(e) => setTerm(e.target.value)}
           />

apps/remix/app/routes/_authenticated+/admin+/email-transports._index.tsx

@@ -1,8 +1,6 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { EmailTransportCreateDialog } from '~/components/dialogs/email-transport-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -11,32 +9,10 @@ import { AdminEmailTransportsTable } from '~/components/tables/admin-email-trans
 export default function AdminEmailTransportsPage() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -46,8 +22,8 @@ export default function AdminEmailTransportsPage() {
 
       <div className="mt-4">
         <Input
-          defaultValue={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+          onChange={(e) => void setSearchQuery(e.target.value || null)}
           placeholder={t`Search by name or from address`}
           className="mb-4"
         />

apps/remix/app/routes/_authenticated+/admin+/organisation-stats._index.tsx

@@ -1,4 +1,3 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { currentMonthlyPeriod } from '@documenso/lib/universal/monthly-period';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
@@ -6,8 +5,9 @@ import { Input } from '@documenso/ui/primitives/input';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { useEffect, useMemo, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsInteger, parseAsString, useQueryStates } from 'nuqs';
+import { useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router';
 
 import { SettingsHeader } from '~/components/general/settings-header';
 import {
@@ -52,14 +52,17 @@ export default function OrganisationStats() {
   const { t } = useLingui();
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
 
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+  const [{ query: searchQuery }, setSearchFilters] = useQueryStates(
+    {
+      query: parseAsString.withDefault(''),
+      page: parseAsInteger,
+    },
+    { shallow: false, limitUrlUpdates: debounce(500) },
+  );
 
   const [displayMode, setDisplayMode] = useState<OrganisationStatsDisplayMode>('usage');
 
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
   const periodOptions = useMemo(() => generatePeriodOptions(), []);
 
   const selectedPeriod = searchParams?.get('period') ?? currentMonthlyPeriod();
@@ -71,29 +74,12 @@ export default function OrganisationStats() {
 
   const claimOptions = claimsData?.data ?? [];
 
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    if ((searchParams?.get('query') || '') !== debouncedSearchQuery) {
-      params.delete('page');
-    }
-
-    // If nothing to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const onSearchQueryChange = (value: string) => {
+    void setSearchFilters({
+      query: value || null,
+      page: null,
+    });
+  };
 
   const onPeriodChange = (value: string) => {
     const params = new URLSearchParams(searchParams?.toString());
@@ -128,8 +114,8 @@ export default function OrganisationStats() {
 
       <div className="mt-4 flex flex-col gap-4 sm:flex-row">
         <Input
-          defaultValue={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+          onChange={(e) => onSearchQueryChange(e.target.value)}
           placeholder={t`Search by organisation name, URL or ID`}
           className="flex-1"
         />

apps/remix/app/routes/_authenticated+/admin+/organisations._index.tsx

@@ -1,8 +1,6 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { SettingsHeader } from '~/components/general/settings-header';
 import { AdminOrganisationsTable } from '~/components/tables/admin-organisations-table';
@@ -10,32 +8,10 @@ import { AdminOrganisationsTable } from '~/components/tables/admin-organisations
 export default function Organisations() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -43,8 +19,8 @@ export default function Organisations() {
 
       <div className="mt-4">
         <Input
-          defaultValue={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+          onChange={(e) => void setSearchQuery(e.target.value || null)}
           placeholder={t`Search by organisation ID, name, customer ID or owner email`}
           className="mb-4"
         />

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.members.tsx

@@ -1,10 +1,9 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 import { Link, useLocation, useSearchParams } from 'react-router';
 
 import { OrganisationMemberInviteDialog } from '~/components/dialogs/organisation-member-invite-dialog';
@@ -15,35 +14,16 @@ import { OrganisationMembersDataTable } from '~/components/tables/organisation-m
 export default function TeamsSettingsMembersPage() {
   const { _ } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const { pathname } = useLocation();
 
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   const currentTab = searchParams?.get('tab') === 'invites' ? 'invites' : 'members';
 
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
-
   return (
     <div>
       <SettingsHeader
@@ -57,8 +37,8 @@ export default function TeamsSettingsMembersPage() {
       <div>
         <div className="my-4 flex flex-row items-center justify-between space-x-4">
           <Input
-            defaultValue={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            value={searchQuery}
+            onChange={(e) => void setSearchQuery(e.target.value || null)}
             placeholder={_(msg`Search`)}
           />
 

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.teams.tsx

@@ -1,8 +1,6 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { TeamCreateDialog } from '~/components/dialogs/team-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -11,27 +9,10 @@ import { OrganisationTeamsTable } from '~/components/tables/organisation-teams-t
 export default function OrganisationSettingsTeamsPage() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -40,8 +21,8 @@ export default function OrganisationSettingsTeamsPage() {
       </SettingsHeader>
 
       <Input
-        defaultValue={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
+        value={searchQuery}
+        onChange={(e) => void setSearchQuery(e.target.value || null)}
         placeholder={t`Search`}
         className="mb-4"
       />

apps/remix/app/routes/_authenticated+/settings+/security._index.tsx

@@ -1,6 +1,8 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { prisma } from '@documenso/prisma';
+import { isSigninEnabledForProvider } from '@documenso/lib/constants/auth';
+import { getUserAuthMethods } from '@documenso/lib/server-only/user/get-user-auth-methods';
+import { UserAuthMethod } from '@documenso/lib/types/user-auth-method';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
@@ -12,6 +14,7 @@ import { DisableAuthenticatorAppDialog } from '~/components/forms/2fa/disable-au
 import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
 import { ViewRecoveryCodesDialog } from '~/components/forms/2fa/view-recovery-codes-dialog';
 import { PasswordForm } from '~/components/forms/password';
+import { PasswordSetupRequestButton } from '~/components/forms/password-setup-request-button';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { appMetaTags } from '~/utils/meta';
 
@@ -24,33 +27,10 @@ export function meta() {
 export async function loader({ request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
 
-  // Todo: Use providers instead after RR7 migration.
-  // const accounts = await prisma.account.findMany({
-  //   where: {
-  //     userId: user.id,
-  //   },
-  //   select: {
-  //     provider: true,
-  //   },
-  // });
-
-  // const providers = accounts.map((account) => account.provider);
-  // let hasEmailPasswordAccount = providers.includes('DOCUMENSO');
-
-  const hasEmailPasswordAccount: boolean = await prisma.user
-    .count({
-      where: {
-        id: user.id,
-        password: {
-          not: null,
-        },
-      },
-    })
-    .then((value) => value > 0);
+  const authMethods = await getUserAuthMethods({ userId: user.id });
 
   return {
-    // providers,
-    hasEmailPasswordAccount,
+    hasEmailPasswordAccount: authMethods.includes(UserAuthMethod.PASSWORD),
   };
 }
 
@@ -60,14 +40,36 @@ export default function SettingsSecurity({ loaderData }: Route.ComponentProps) {
   const { _ } = useLingui();
   const { user } = useSession();
 
+  const isEmailPasswordSigninEnabled = isSigninEnabledForProvider('email');
+
   return (
     <div>
       <SettingsHeader
         title={_(msg`Security`)}
         subtitle={_(msg`Here you can manage your password and security settings.`)}
       />
+
       {hasEmailPasswordAccount && <PasswordForm user={user} />}
 
+      {!hasEmailPasswordAccount && isEmailPasswordSigninEnabled && (
+        <Alert className="flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
+          <div className="mb-4 sm:mb-0">
+            <AlertTitle>
+              <Trans>Set a password</Trans>
+            </AlertTitle>
+
+            <AlertDescription className="mr-4">
+              <Trans>
+                Your account has no password. Add one to sign in with your email and to sign documents that require it.
+                We'll email you a link.
+              </Trans>
+            </AlertDescription>
+          </div>
+
+          <PasswordSetupRequestButton />
+        </Alert>
+      )}
+
       <Alert className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
         <div className="mb-4 sm:mb-0">
           <AlertTitle>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._layout.tsx

@@ -1,4 +1,5 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getEnvelopeById } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
@@ -7,6 +8,7 @@ import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { ChevronLeftIcon } from 'lucide-react';
+import { useEffect } from 'react';
 import type { ShouldRevalidateFunctionArgs } from 'react-router';
 import { isRouteErrorResponse, Link, Outlet, redirect } from 'react-router';
 
@@ -66,8 +68,18 @@ export default function DocumentsLayout() {
 }
 
 export function ErrorBoundary({ error, params }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
+  useEffect(() => {
+    analytics.captureException(error, {
+      source: 'editor',
+      location: 'editor_layout_boundary',
+      envelopeId: params.id,
+    });
+  }, [error]);
+
   const errorCodeMap = {
     404: {
       subHeading: msg`404 Document not found`,

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.groups.tsx

@@ -1,11 +1,9 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
 import { OrganisationGroupType, OrganisationMemberRole } from '@prisma/client';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { TeamGroupCreateDialog } from '~/components/dialogs/team-group-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -16,34 +14,12 @@ import { useCurrentTeam } from '~/providers/team';
 export default function TeamsSettingsGroupsPage() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const { pathname } = useLocation();
   const team = useCurrentTeam();
 
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   const everyoneGroupQuery = trpc.team.group.find.useQuery({
     teamId: team.id,
@@ -61,8 +37,8 @@ export default function TeamsSettingsGroupsPage() {
       </SettingsHeader>
 
       <Input
-        defaultValue={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
+        value={searchQuery}
+        onChange={(e) => void setSearchQuery(e.target.value || null)}
         placeholder={t`Search`}
         className="mb-4"
       />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.members.tsx

@@ -1,8 +1,6 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { TeamMemberCreateDialog } from '~/components/dialogs/team-member-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -11,32 +9,10 @@ import { TeamMembersTable } from '~/components/tables/team-members-table';
 export default function TeamsSettingsMembersPage() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -45,8 +21,8 @@ export default function TeamsSettingsMembersPage() {
       </SettingsHeader>
 
       <Input
-        defaultValue={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
+        value={searchQuery}
+        onChange={(e) => void setSearchQuery(e.target.value || null)}
         placeholder={t`Search`}
         className="mb-4"
       />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.tokens.tsx

@@ -68,6 +68,20 @@ export default function ApiTokensPage() {
           return i18n.date(row.original.expires);
         },
       },
+      {
+        header: t`Last Used`,
+        cell: ({ row }) => {
+          if (!row.original.lastUsedAt) {
+            return (
+              <span className="text-muted-foreground">
+                <Trans>Never</Trans>
+              </span>
+            );
+          }
+
+          return <span className="text-foreground">{i18n.date(row.original.lastUsedAt)}</span>;
+        },
+      },
       {
         header: t`Actions`,
         cell: ({ row }) => (
@@ -146,6 +160,9 @@ export default function ApiTokensPage() {
                 <TableCell>
                   <Skeleton className="h-4 w-16 rounded-full" />
                 </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                </TableCell>
                 <TableCell>
                   <Skeleton className="h-4 w-12 rounded-full" />
                 </TableCell>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx

@@ -1,4 +1,3 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
@@ -20,7 +19,8 @@ import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { WebhookCallStatus, WebhookTriggerEvents } from '@prisma/client';
 import { CheckCircle2Icon, ChevronRightIcon, PencilIcon, TerminalIcon, XCircleIcon } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
+import { useMemo } from 'react';
 import { Link, useLocation, useNavigate, useSearchParams } from 'react-router';
 import { z } from 'zod';
 
@@ -51,13 +51,14 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
   const { toast } = useToast();
 
   const { pathname } = useLocation();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
   const team = useCurrentTeam();
 
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   const parsedSearchParams = WebhookSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
@@ -81,26 +82,6 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
     query: parsedSearchParams.query,
   });
 
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
-
   const onPaginationChange = (page: number, perPage: number) => {
     updateSearchParams({
       page,
@@ -252,8 +233,8 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
       <div className="mt-4">
         <div className="mb-4 flex flex-row items-center justify-between gap-x-4">
           <Input
-            defaultValue={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            value={searchQuery}
+            onChange={(e) => void setSearchQuery(e.target.value || null)}
             placeholder={t`Search by ID`}
           />
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._layout.tsx

@@ -1,4 +1,5 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getEnvelopeById } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
@@ -8,6 +9,7 @@ import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { ChevronLeftIcon } from 'lucide-react';
+import { useEffect } from 'react';
 import { isRouteErrorResponse, Link, Outlet, redirect, type ShouldRevalidateFunctionArgs } from 'react-router';
 
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
@@ -84,8 +86,18 @@ export default function TemplatesLayout() {
 }
 
 export function ErrorBoundary({ error, params }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
+  useEffect(() => {
+    analytics.captureException(error, {
+      source: 'editor',
+      location: 'editor_layout_boundary',
+      envelopeId: params.id,
+    });
+  }, [error]);
+
   const errorCodeMap = {
     404: {
       subHeading: msg`404 Template not found`,

apps/remix/app/routes/_recipient+/_layout.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -5,6 +6,7 @@ import { i18n } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { ChevronLeft } from 'lucide-react';
+import { useEffect } from 'react';
 import { isRouteErrorResponse, Link, Outlet } from 'react-router';
 import { Header as AuthenticatedHeader } from '~/components/general/app-header';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
@@ -48,8 +50,14 @@ export default function RecipientLayout({ matches }: Route.ComponentProps) {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
+  useEffect(() => {
+    analytics.captureException(error, { source: 'signing', location: 'recipient_layout_boundary' });
+  }, [error]);
+
   return (
     <GenericErrorLayout
       errorCode={errorCode}

apps/remix/app/routes/api+/certificate-status.ts

@@ -1,8 +1,8 @@
 import { getCertificateStatus } from '@documenso/lib/server-only/cert/cert-status';
 
-export const loader = () => {
+export const loader = async () => {
   try {
-    const certStatus = getCertificateStatus();
+    const certStatus = await getCertificateStatus();
 
     return Response.json({
       isAvailable: certStatus.isAvailable,

apps/remix/app/routes/api+/health.ts

@@ -22,7 +22,7 @@ export const loader = async () => {
   }
 
   try {
-    const certStatus = getCertificateStatus();
+    const certStatus = await getCertificateStatus();
 
     if (certStatus.isAvailable) {
       checks.certificate = { status: 'ok' };

apps/remix/app/routes/embed+/_v0+/_layout.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import {
   IS_GOOGLE_SSO_ENABLED,
   IS_MICROSOFT_SSO_ENABLED,
@@ -5,6 +6,7 @@ import {
   OIDC_PROVIDER_LABEL,
 } from '@documenso/lib/constants/auth';
 import { Trans } from '@lingui/react/macro';
+import { useEffect } from 'react';
 import { isRouteErrorResponse, Outlet, useRouteError } from 'react-router';
 
 import { EmbedAuthenticationRequired } from '~/components/embed/embed-authentication-required';
@@ -47,10 +49,30 @@ export default function Layout() {
 export function ErrorBoundary({ loaderData }: Route.ErrorBoundaryProps) {
   const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } = loaderData || {};
 
+  const analytics = useAnalytics();
   const error = useRouteError();
 
   console.log({ routeError: error });
 
+  useEffect(() => {
+    const isExpectedEmbedResponse =
+      isRouteErrorResponse(error) &&
+      [
+        'embed-authentication-required',
+        'embed-paywall',
+        'embed-waiting-for-turn',
+        'embed-recipient-expired',
+        'embed-document-rejected',
+        'embed-document-completed',
+      ].includes(error.data?.type);
+
+    if (isExpectedEmbedResponse) {
+      return;
+    }
+
+    analytics.captureException(error, { source: 'embed', location: 'embed_layout_boundary' });
+  }, [error]);
+
   if (isRouteErrorResponse(error)) {
     if (error.status === 401 && error.data.type === 'embed-authentication-required') {
       return (

apps/remix/app/routes/embed+/_v0+/direct.$token.tsx

@@ -2,11 +2,13 @@ import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session
 import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { getEnvelopeForDirectTemplateSigning } from '@documenso/lib/server-only/envelope/get-envelope-for-direct-template-signing';
 import { getEnvelopeRequiredAccessData } from '@documenso/lib/server-only/envelope/get-envelope-required-access-data';
 import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { fireAndForget } from '@documenso/lib/universal/fire-and-forget';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { prisma } from '@documenso/prisma';
 import { data } from 'react-router';
@@ -93,6 +95,30 @@ async function handleV1Loader({ params, request }: Route.LoaderArgs) {
 
   const fields = template.fields.filter((field) => field.recipientId === directTemplateRecipientId);
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: template.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: template.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v0',
+        recipientId: recipient.id,
+        envelopeId: template.envelopeId,
+      },
+    });
+  });
+
   return {
     token,
     user,
@@ -194,6 +220,30 @@ async function handleV2Loader({ params, request }: Route.LoaderArgs) {
     );
   }
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: envelope.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: envelope.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v0',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      },
+    });
+  });
+
   return {
     token,
     user,

apps/remix/app/routes/embed+/_v0+/sign.$token.tsx

@@ -2,6 +2,7 @@ import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session
 import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getEnvelopeForRecipientSigning } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
@@ -13,6 +14,7 @@ import { getIsRecipientsTurnToSign } from '@documenso/lib/server-only/recipient/
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { fireAndForget } from '@documenso/lib/universal/fire-and-forget';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { isRecipientExpired } from '@documenso/lib/utils/recipients';
@@ -139,6 +141,30 @@ async function handleV1Loader({ params, request }: Route.LoaderArgs) {
         })
       : [];
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: document.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: document.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v0',
+        recipientId: recipient.id,
+        envelopeId: document.envelopeId,
+      },
+    });
+  });
+
   return {
     token,
     user,
@@ -272,6 +298,30 @@ async function handleV2Loader({ params, request }: Route.LoaderArgs) {
     recipientAccessAuth: derivedRecipientAccessAuth,
   }).catch(() => null);
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: envelope.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: envelope.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v0',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      },
+    });
+  });
+
   return {
     token,
     user,

apps/remix/app/routes/embed+/v1+/authoring+/_layout.tsx

@@ -1,8 +1,11 @@
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
 import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 import { ZBaseEmbedAuthoringSchema } from '@documenso/lib/types/embed-authoring-base-schema';
+import { fireAndForget } from '@documenso/lib/universal/fire-and-forget';
 import { dynamicActivate } from '@documenso/lib/utils/i18n';
+import { prisma } from '@documenso/prisma';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { Spinner } from '@documenso/ui/primitives/spinner';
 import { Trans } from '@lingui/react/macro';
@@ -35,6 +38,40 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
     });
 
     allowEmbedAuthoringWhiteLabel = organisationClaim.flags.embedAuthoringWhiteLabel ?? false;
+
+    // Derive the kind of authoring session from the child route path, e.g.
+    // /embed/v1/authoring/document/create -> resource 'document', mode 'create'.
+    // Completed and error pages are not new sessions and are skipped.
+    const [resource, mode] = url.pathname.split('/').filter(Boolean).slice(3);
+
+    const isAuthoringSession =
+      (resource === 'document' || resource === 'template') && (mode === 'create' || mode === 'edit');
+
+    if (isAuthoringSession) {
+      fireAndForget(async () => {
+        const team = await prisma.team.findFirst({
+          where: {
+            id: result.teamId,
+          },
+          select: {
+            organisationId: true,
+          },
+        });
+
+        captureServerEvent({
+          event: 'App: Embed Session Started',
+          userId: result.userId,
+          organisationId: team?.organisationId,
+          teamId: result.teamId,
+          properties: {
+            type: 'authoring',
+            version: 'v1',
+            resource,
+            mode,
+          },
+        });
+      });
+    }
   }
 
   return {

apps/remix/app/routes/embed+/v1+/multisign+/_index.tsx

@@ -1,8 +1,11 @@
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { ZSignDocumentEmbedDataSchema } from '@documenso/lib/types/embed-document-sign-schema';
+import { fireAndForget } from '@documenso/lib/universal/fire-and-forget';
+import { prisma } from '@documenso/prisma';
 import { Trans } from '@lingui/react/macro';
 import { SigningStatus } from '@prisma/client';
 import { useEffect, useLayoutEffect, useState } from 'react';
@@ -42,6 +45,15 @@ export async function loader({ request }: Route.LoaderArgs) {
   const firstDocument = envelopes[0]?.document;
 
   if (!firstDocument) {
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      properties: {
+        type: 'signing',
+        version: 'v1',
+      },
+    });
+
     return superLoaderJson({
       envelopes,
       user,
@@ -55,6 +67,29 @@ export async function loader({ request }: Route.LoaderArgs) {
   const allowWhitelabelling = organisationClaim.flags.embedSigningWhiteLabel;
   const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: firstDocument.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: firstDocument.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v1',
+        envelopeId: firstDocument.envelopeId,
+      },
+    });
+  });
+
   return superLoaderJson({
     envelopes,
     user,

apps/remix/app/routes/embed+/v2+/authoring+/_layout.tsx

@@ -1,5 +1,6 @@
 import { PAID_PLAN_LIMITS } from '@documenso/ee/server-only/limits/constants';
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
@@ -12,7 +13,7 @@ import type { OrganisationSession } from '@documenso/trpc/server/organisation-ro
 import { Spinner } from '@documenso/ui/primitives/spinner';
 import { Trans } from '@lingui/react/macro';
 import { OrganisationMemberRole, OrganisationType, TeamMemberRole } from '@prisma/client';
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { isRouteErrorResponse, Outlet, useLoaderData } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -166,8 +167,17 @@ export default function AuthoringLayout() {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
+  useEffect(() => {
+    analytics.captureException(error, {
+      source: 'embed',
+      location: 'embed_authoring_boundary',
+    });
+  }, [error]);
+
   return (
     <div>
       {match(errorCode)

apps/remix/app/routes/embed+/v2+/authoring+/envelope.create._index.tsx

@@ -1,5 +1,6 @@
 import { EnvelopeEditorProvider } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import type { SupportedLanguageCodes } from '@documenso/lib/constants/i18n';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
 import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settings';
 import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';
@@ -10,6 +11,7 @@ import {
   ZEmbedCreateEnvelopeAuthoringSchema,
 } from '@documenso/lib/types/envelope-editor';
 import type { TEnvelopeFieldAndMeta } from '@documenso/lib/types/field-meta';
+import { fireAndForget } from '@documenso/lib/universal/fire-and-forget';
 import { extractDerivedDocumentMeta } from '@documenso/lib/utils/document';
 import { buildEmbeddedEditorOptions, buildEmbeddedFeatures } from '@documenso/lib/utils/embed-config';
 import { prisma } from '@documenso/prisma';
@@ -76,6 +78,30 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
     },
   });
 
+  fireAndForget(async () => {
+    const team = result.teamId
+      ? await prisma.team.findFirst({
+          where: {
+            id: result.teamId,
+          },
+          select: {
+            organisationId: true,
+          },
+        })
+      : null;
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: result.userId,
+      organisationId: team?.organisationId,
+      teamId: result.teamId ?? undefined,
+      properties: {
+        type: 'authoring',
+        version: 'v2',
+      },
+    });
+  });
+
   return superLoaderJson({
     token,
     tokenUserId: result.userId,

apps/remix/app/routes/embed+/v2+/authoring+/envelope.edit.$id.tsx

@@ -1,5 +1,6 @@
 import { EnvelopeEditorProvider } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import type { SupportedLanguageCodes } from '@documenso/lib/constants/i18n';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
 import { getEditorEnvelopeById } from '@documenso/lib/server-only/envelope/get-editor-envelope-by-id';
 import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settings';
@@ -94,6 +95,18 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
     brandingLogo = settings.brandingLogo;
   }
 
+  captureServerEvent({
+    event: 'App: Embed Session Started',
+    userId: result.userId,
+    organisationId: envelope.team.organisationId,
+    teamId: result.teamId ?? undefined,
+    properties: {
+      type: 'authoring',
+      version: 'v2',
+      envelopeId: envelope.id,
+    },
+  });
+
   return superLoaderJson({
     token,
     envelope,

apps/remix/app/utils/nonce.ts

@@ -1,4 +1,10 @@
-import { useRouteLoaderData } from 'react-router';
+import { createContext, useRouteLoaderData } from 'react-router';
+
+/**
+ * Per-request CSP nonce. Set by the root route middleware, read with
+ * `context.get(nonceContext)` in loaders/actions and `entry.server`.
+ */
+export const nonceContext = createContext<string>('');
 
 /**
  * Returns the supplied CSP nonce only when rendering on the server.

apps/remix/package.json

@@ -106,5 +106,5 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "2.17.0"
+  "version": "2.18.0"
 }

apps/remix/react-router.config.ts

@@ -8,4 +8,7 @@ export default {
   // kept without a trailing slash so they match exactly, and so the bare
   // sub-path URL (e.g. "/ESign") still matches the basename at runtime.
   basename: process.env.NEXT_PUBLIC_BASE_PATH ? process.env.NEXT_PUBLIC_BASE_PATH.replace(/\/$/, '') : '/',
+  future: {
+    v8_middleware: true,
+  },
 } satisfies Config;