HQBase · bermanto · Aug 22, 2026 · Aug 22, 2026 · Aug 22, 2026
diff --git a/app/app.tsx b/app/app.tsx
@@ -12,6 +12,7 @@ import {
   TemporaryPasswordSetupPage
 } from "@/features/auth/password-setup-page";
 import type { CurrentUser } from "@/features/auth/types";
+import { sendingIdentities } from "@/features/compose/compose-state";
 import { DraftsPage } from "@/features/drafts/drafts-page";
 import { useDrafts } from "@/features/drafts/use-drafts";
 import { InboxPage } from "@/features/inbox/inbox-page";
@@ -71,6 +72,10 @@ export function App(): React.ReactElement {
     () => mailboxes.filter((mailbox) => mailbox.accessLevel !== null),
     [mailboxes]
   );
+  const canSend = React.useMemo(
+    () => sendingIdentities(contentMailboxes).length > 0,
+    [contentMailboxes]
+  );
   const canManageUpdates =
     !user?.passwordSetupRequired && (user?.role === "owner" || user?.role === "admin");
   const updateMonitor = useUpdateMonitor(canManageUpdates);
@@ -204,9 +209,7 @@ export function App(): React.ReactElement {
         onOpenUpdates={() => {
           navigate({ kind: "settings", tab: "updates" });
         }}
-        onCompose={() => {
-          setComposeOpen(true);
-        }}
+        {...(canSend ? { onCompose: () => setComposeOpen(true) } : {})}
         onFolderChange={(folder) => {
           navigate(
             folder === "settings"

diff --git a/app/components/layout/app-shell.tsx b/app/components/layout/app-shell.tsx
@@ -25,7 +25,7 @@ type AppShellProps = {
   updateStatus: UpdateStatus | null;
   unread: UnreadCounts;
   draftCount: number;
-  onCompose: () => void;
+  onCompose?: (() => void) | undefined;
   onFolderChange: (folder: FolderId) => void;
   onSettingsTabChange?: ((tab: import("@/lib/routes").SettingsTabId) => void) | undefined;
   onMailboxChange: (mailboxId: string) => void;
@@ -60,7 +60,7 @@ export function AppShell(props: AppShellProps): React.ReactElement {
               sidebarCollapsed={sidebarCollapsed}
               unread={props.unread}
               user={props.user}
-              onCompose={props.onCompose}
+              {...(props.onCompose ? { onCompose: props.onCompose } : {})}
               onFolderChange={props.onFolderChange}
               onSettingsTabChange={props.onSettingsTabChange}
               onSignedOut={props.onSignedOut}
@@ -88,7 +88,7 @@ export function AppShell(props: AppShellProps): React.ReactElement {
             mailboxId={props.mailboxId}
             unread={props.unread}
             user={props.user}
-            onCompose={props.onCompose}
+            {...(props.onCompose ? { onCompose: props.onCompose } : {})}
             onFolderChange={props.onFolderChange}
             onSettingsTabChange={props.onSettingsTabChange}
             onSignedOut={props.onSignedOut}
@@ -157,7 +157,7 @@ function ShellContent({
         unread={unread}
         user={user}
         sidebarCollapsed={sidebarCollapsed}
-        onCompose={onCompose}
+        {...(onCompose ? { onCompose } : {})}
         onFolderChange={onFolderChange}
         onMailboxChange={onMailboxChange}
         onSearchChange={onSearchChange}

diff --git a/app/components/layout/top-bar.tsx b/app/components/layout/top-bar.tsx
@@ -28,7 +28,7 @@ type TopBarProps = {
   mailboxId: string;
   search: string;
   unread: UnreadCounts;
-  onCompose: () => void;
+  onCompose?: (() => void) | undefined;
   onFolderChange: (folder: FolderId) => void;
   onMailboxChange: (mailboxId: string) => void;
   onSearchChange: (search: string) => void;
@@ -81,7 +81,7 @@ export function TopBar({
         mailboxes={mailboxes}
         unread={unread}
         user={user}
-        onCompose={onCompose}
+        {...(onCompose ? { onCompose } : {})}
         onFolderChange={onFolderChange}
         onMailboxChange={onMailboxChange}
         onSettingsTabChange={onSettingsTabChange}

diff --git a/app/features/compose/compose-state.ts b/app/features/compose/compose-state.ts
@@ -81,8 +81,8 @@ export function defaultSendingIdentity(
 ): SendingIdentity | null {
   const mailbox = mailboxes.find((candidate) => candidate.id === defaultFromMailboxId);
   const primaryAddress =
-    mailbox?.addresses.find((address) => address.isPrimary && address.sendEnabled)?.address ??
-    (mailbox?.addresses.length === 0 ? mailbox.address : null);
+    mailbox?.addresses.find((address) => address.isPrimary && address.sendAvailable)?.address ??
+    null;
   return (
     identities.find(
       (identity) =>
@@ -100,11 +100,9 @@ export function sendingIdentities(mailboxes: Mailbox[]): SendingIdentity[] {
         mailbox.isActive && (mailbox.accessLevel === "agent" || mailbox.accessLevel === "manager")
     )
     .flatMap((mailbox) =>
-      mailbox.addresses?.length
-        ? mailbox.addresses
-            .filter((address) => address.sendEnabled)
-            .map((address) => ({ mailboxId: mailbox.id, address: address.address }))
-        : [{ mailboxId: mailbox.id, address: mailbox.address }]
+      mailbox.addresses
+        .filter((address) => address.sendAvailable)
+        .map((address) => ({ mailboxId: mailbox.id, address: address.address }))
     );
 }
 

diff --git a/app/features/domains/connect-domain-dialog.tsx b/app/features/domains/connect-domain-dialog.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { PiPlus } from "react-icons/pi";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogClose,
@@ -12,7 +13,7 @@ import {
   DialogTitle,
   DialogTrigger
 } from "@/components/ui/dialog";
-import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
 import {
   Select,
   SelectContent,
@@ -44,6 +45,7 @@ export function ConnectDomainDialog({
   const [zones, setZones] = React.useState<CloudflareZone[]>([]);
   const [zoneId, setZoneId] = React.useState("");
   const [name, setName] = React.useState("");
+  const [enableSending, setEnableSending] = React.useState(true);
   const [pending, setPending] = React.useState(false);
 
   const loadZones = React.useCallback(async () => {
@@ -82,7 +84,7 @@ export function ConnectDomainDialog({
     event.preventDefault();
     setPending(true);
     try {
-      await provisionDomain({ zoneId, name, enableSending: true });
+      await provisionDomain({ zoneId, name, enableSending });
       reset();
       onConnected();
       toast.success("Domain connected.");
@@ -95,6 +97,7 @@ export function ConnectDomainDialog({
 
   function reset() {
     setName("");
+    setEnableSending(true);
     setZoneId("");
     setZones([]);
   }
@@ -140,6 +143,21 @@ export function ConnectDomainDialog({
                   </SelectContent>
                 </Select>
               </Field>
+              <Field className="grid grid-cols-[auto_1fr] items-start gap-x-2.5 gap-y-1">
+                <Checkbox
+                  checked={enableSending}
+                  id="connect-domain-enable-sending"
+                  onCheckedChange={(checked) => setEnableSending(checked === true)}
+                />
+                <div className="grid gap-1 leading-none">
+                  <FieldLabel htmlFor="connect-domain-enable-sending">
+                    Enable outbound sending
+                  </FieldLabel>
+                  <FieldDescription>
+                    Requires Workers Paid. Clear this option for receive-only mail.
+                  </FieldDescription>
+                </div>
+              </Field>
             </FieldGroup>
             <DialogFooter>
               <DialogClose asChild>

diff --git a/app/features/domains/domain-settings.tsx b/app/features/domains/domain-settings.tsx
@@ -6,7 +6,13 @@ import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 import { CloudflareAuthorizationDialog } from "@/features/settings/cloudflare-authorization-dialog";
 import { SettingsSection } from "@/features/settings/settings-section";
-import { changePortal, listDomains, revokeCloudflareAuthorization, updateDomain } from "./api";
+import {
+  changePortal,
+  listDomains,
+  provisionDomain,
+  revokeCloudflareAuthorization,
+  updateDomain
+} from "./api";
 import { ConnectDomainDialog } from "./connect-domain-dialog";
 import { DomainTable } from "./domain-table";
 import type { MailDomain } from "./types";
@@ -15,7 +21,8 @@ const PENDING_OPERATION_KEY = "hqb_cloudflare_operation_v1";
 
 type PendingCloudflareOperation =
   | { action: "connect" }
-  | { action: "portal"; hostname: string; zoneId: string };
+  | { action: "portal"; hostname: string; zoneId: string }
+  | { action: "sending"; domainId: string; name: string; zoneId: string };
 
 export function DomainSettings({
   portalHostname,
@@ -55,7 +62,7 @@ export function DomainSettings({
       const pending = readPendingOperation();
       if (pending?.action === "connect") {
         setConnectOpen(true);
-      } else if (pending?.action === "portal") {
+      } else if (pending?.action === "portal" || pending?.action === "sending") {
         setAuthorizationOperation(pending);
       } else {
         toast.error("Sign in again, then restart the Cloudflare change.");
@@ -87,6 +94,28 @@ export function DomainSettings({
     }
 
     setChangePending(true);
+    if (pending.action === "sending") {
+      setPendingDomainId(pending.domainId);
+      void provisionDomain({ zoneId: pending.zoneId, name: pending.name, enableSending: true })
+        .then(({ domain }) => {
+          if (domain.sendingStatus !== "ready") {
+            throw new Error("Cloudflare has not reported Email Sending as ready.");
+          }
+          refresh();
+          onChanged();
+          toast.success(`Sending enabled for ${domain.name}.`);
+        })
+        .catch((error: unknown) => {
+          toast.error(error instanceof Error ? error.message : "Cloudflare change failed.");
+        })
+        .finally(() => {
+          sessionStorage.removeItem(PENDING_OPERATION_KEY);
+          setChangePending(false);
+          setPendingDomainId(null);
+        });
+      return;
+    }
+
     void changePortal({ zoneId: pending.zoneId, hostname: pending.hostname })
       .then(() => {
         onChanged();
@@ -99,7 +128,7 @@ export function DomainSettings({
         sessionStorage.removeItem(PENDING_OPERATION_KEY);
         setChangePending(false);
       });
-  }, [onChanged]);
+  }, [onChanged, refresh]);
 
   function portal(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -124,6 +153,19 @@ export function DomainSettings({
     }
   }
 
+  function enableSending(domain: MailDomain) {
+    if (!domain.zoneId) {
+      toast.error("Reconnect this domain to its Cloudflare zone before enabling sending.");
+      return;
+    }
+    setAuthorizationOperation({
+      action: "sending",
+      domainId: domain.id,
+      name: domain.name,
+      zoneId: domain.zoneId
+    });
+  }
+
   return (
     <SettingsSection
       action={
@@ -155,6 +197,7 @@ export function DomainSettings({
       <DomainTable
         domains={domains}
         pendingDomainId={pendingDomainId}
+        onEnableSending={enableSending}
         onToggle={(domain) => void toggleDomain(domain)}
       />
 
@@ -187,8 +230,15 @@ export function DomainSettings({
       </div>
       <CloudflareAuthorizationDialog
         authorizeHref="/api/domains/cloudflare/oauth/start"
-        description="To save this change, HQBase needs temporary access to your Cloudflare account. You’ll return to Domains automatically, and HQBase will update the workspace portal."
-        open={authorizationOperation?.action === "portal"}
+        description={
+          authorizationOperation?.action === "sending"
+            ? "HQBase needs temporary Cloudflare access to enable Email Sending. You will return to Domains automatically."
+            : "To save this change, HQBase needs temporary access to your Cloudflare account. You’ll return to Domains automatically, and HQBase will update the workspace portal."
+        }
+        open={
+          authorizationOperation?.action === "portal" ||
+          authorizationOperation?.action === "sending"
+        }
         onAuthorize={() => {
           if (authorizationOperation) {
             sessionStorage.setItem(PENDING_OPERATION_KEY, JSON.stringify(authorizationOperation));
@@ -215,6 +265,19 @@ function readPendingOperation(): PendingCloudflareOperation | null {
     ) {
       return { action: "portal", hostname: value.hostname, zoneId: value.zoneId };
     }
+    if (
+      value?.action === "sending" &&
+      typeof value.domainId === "string" &&
+      typeof value.name === "string" &&
+      typeof value.zoneId === "string"
+    ) {
+      return {
+        action: "sending",
+        domainId: value.domainId,
+        name: value.name,
+        zoneId: value.zoneId
+      };
+    }
   } catch {
     // Ignore malformed, non-secret browser draft state.
   }

diff --git a/app/features/domains/domain-table.tsx b/app/features/domains/domain-table.tsx
@@ -15,10 +15,12 @@ import type { MailDomain } from "./types";
 export function DomainTable({
   domains,
   pendingDomainId,
+  onEnableSending,
   onToggle
 }: {
   domains: MailDomain[];
   pendingDomainId: string | null;
+  onEnableSending: (domain: MailDomain) => void;
   onToggle: (domain: MailDomain) => void;
 }): React.ReactElement {
   return (
@@ -67,20 +69,34 @@ export function DomainTable({
               </Badge>
             </TableCell>
             <TableCell className="text-right">
-              <Button
-                aria-label={`${domain.isEnabled ? "Disable" : "Enable"} ${domain.name}`}
-                disabled={pendingDomainId === domain.id}
-                size="sm"
-                type="button"
-                variant="outline"
-                onClick={() => onToggle(domain)}
-              >
-                {pendingDomainId === domain.id
-                  ? "Updating…"
-                  : domain.isEnabled
-                    ? "Disable"
-                    : "Enable"}
-              </Button>
+              <div className="flex justify-end gap-2">
+                {domain.isEnabled && domain.sendingStatus !== "ready" && domain.zoneId ? (
+                  <Button
+                    aria-label={`Enable sending for ${domain.name}`}
+                    disabled={pendingDomainId === domain.id}
+                    size="sm"
+                    type="button"
+                    variant="outline"
+                    onClick={() => onEnableSending(domain)}
+                  >
+                    Enable sending
+                  </Button>
+                ) : null}
+                <Button
+                  aria-label={`${domain.isEnabled ? "Disable" : "Enable"} ${domain.name}`}
+                  disabled={pendingDomainId === domain.id}
+                  size="sm"
+                  type="button"
+                  variant="outline"
+                  onClick={() => onToggle(domain)}
+                >
+                  {pendingDomainId === domain.id
+                    ? "Updating…"
+                    : domain.isEnabled
+                      ? "Disable"
+                      : "Enable"}
+                </Button>
+              </div>
             </TableCell>
           </TableRow>
         ))}

diff --git a/app/features/mailboxes/default-from-mailbox-control.tsx b/app/features/mailboxes/default-from-mailbox-control.tsx
@@ -79,7 +79,6 @@ function defaultFromMailboxOptions(mailboxes: Mailbox[]): Mailbox[] {
     (mailbox) =>
       mailbox.isActive &&
       (mailbox.accessLevel === "agent" || mailbox.accessLevel === "manager") &&
-      (mailbox.addresses.length === 0 ||
-        mailbox.addresses.some((address) => address.isPrimary && address.sendEnabled))
+      mailbox.addresses.some((address) => address.isPrimary && address.sendAvailable)
   );
 }
diff --git a/app/features/mailboxes/types.ts b/app/features/mailboxes/types.ts
@@ -9,6 +9,7 @@ export type Mailbox = {
     displayName: string;
     receiveEnabled: boolean;
     sendEnabled: boolean;
+    sendAvailable: boolean;
     isPrimary: boolean;
   }>;
   displayName: string;