Unreachable mail servers: send retries in Scheduled, real action retries, account health

Sending: a send the server could not take (unreachable, timeout, 4xx) is no
longer failed at once. It waits in Scheduled ("retrying") and is tried again
after 1, 2, 5, 10, 30 min, then hourly, for 24 hours — on the server, so it
works with the browser closed. A permanent refusal (5xx, wrong password) is
"failed" at once, with the server's reason. GET /outbox lists both;
POST /outbox/{id}/retry (Retry now) and /cancel (Edit, Delete) act on them,
and they are left out of Drafts. Mail delivered but not filed in Sent now
counts as sent, and a conditional claim keeps two jobs from sending one
message twice. The app says when a send failed and when it finally went.

Actions: arq retries a job only on Retry, never on a plain exception, so the
"retry x5, then revert" for flags and moves never happened. Flag, move,
archive, restore, delete and empty-folder jobs now raise Retry while the
server is unreachable (~24 hours of growing gaps), skip a change a later one
replaced, stop at the first connection failure instead of 20 s per message,
and delete/empty keep the rows until the server has the messages gone.

Account health: 3 failed connections in a row mark an account unreachable
(amber in the sidebar and Settings, cleared on the next success); 3 refused
sign-ins stop its syncing as auth_failed until the password is entered
again, so the provider does not lock the account. Sync loops back off 30 s
doubling to 10 min and log one line per expected failure; a refused
connection fails at once with its reason (the connect task is kept), and a
silently dead IDLE connection is noticed within ~11 min instead of ~29.

Also: the empty reading pane is clipped to its width when dragged very
narrow; tests no longer leave live accounts and outbox rows in the database.

Migration 0021: outbox attempts / next_attempt_at / retry_until, accounts
sync_error / sync_error_since.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/routes/MailLayout.tsx

@@ -28,13 +28,14 @@ import { Clock, NotSavedOffline, OfflineIndicator } from "../components/Offline"
 import { ThreadView } from "../components/thread/ThreadView";
 import { MailboxDisplay } from "../components/mail/MailboxDisplay";
 import { RightPanel, type PanelTab } from "../components/mail/RightPanel";
+import { ScheduledSendPane } from "../components/mail/ScheduledSendPane";
 import { useT } from "../i18n";
 import type { MessageKey } from "../i18n/en";
 import { api, isOfflineError } from "../lib/api";
 import { clearOfflineData, useOffline } from "../lib/offline";
 import { flushLocal, useLocalMessages, wipeLocal } from "../lib/scheduled";
-import { setTimeFormat } from "../lib/timeFormat";
-import type { QuotaOut, SavedSearch, ThreadSummary } from "../lib/types";
+import { formatClock, getDateLocale, setTimeFormat } from "../lib/timeFormat";
+import type { AccountOut, QuotaOut, SavedSearch, ThreadSummary } from "../lib/types";
 import { useReadingPane } from "../lib/readingPane";
 import { useIsMobile } from "../lib/useIsMobile";
 import { useKeyboardShortcuts } from "../lib/useKeyboardShortcuts";
@@ -223,7 +224,14 @@ export function MailLayout() {
   const isScheduled = view === "local:scheduled";
   const localMessages = useLocalMessages();
   const deviceDrafts = localMessages.filter((m) => m.state === "draft");
+  // Plus sends the mail server could not take, retrying on the server (or failed).
+  const outboxQuery = useQuery({ queryKey: ["outbox"], queryFn: api.outbox, retry: false });
+  const serverScheduled = outboxQuery.data ?? [];
   const scheduled = localMessages.filter((m) => m.state !== "draft");
+  const scheduledCount = scheduled.length + serverScheduled.length;
+  // The waiting send open in the reading pane (its own pane, not a composer).
+  const [scheduledPaneId, setScheduledPaneId] = useState<string | null>(null);
+  const scheduledPane = serverScheduled.find((o) => o.outbox_id === scheduledPaneId) ?? null;
   // Which special-use folder the reading pane is showing (drives the toolbar).
   const currentFolder = view.startsWith("folder:") ? view.slice("folder:".length) : "inbox";
   const accountsQuery = useQuery({ queryKey: ["accounts"], queryFn: api.accounts });
@@ -836,7 +844,7 @@ export function MailLayout() {
               ) : null}
             </SidebarItem>
             {/* Scheduled: shown while something waits to be sent (or is open). */}
-            {f.view === "folder:drafts" && (scheduled.length > 0 || isScheduled) && (
+            {f.view === "folder:drafts" && (scheduledCount > 0 || isScheduled) && (
               <SidebarItem
                 active={isScheduled}
                 collapsed={collapsed}
@@ -847,8 +855,8 @@ export function MailLayout() {
                   <Clock size={18} />
                 </span>
                 {!collapsed && <span className="flex-1 truncate">{t("nav.scheduled")}</span>}
-                {!collapsed && scheduled.length > 0 && (
-                  <span className="ml-auto shrink-0 tabular-nums text-[13px] text-app-muted">{scheduled.length}</span>
+                {!collapsed && scheduledCount > 0 && (
+                  <span className="ml-auto shrink-0 tabular-nums text-[13px] text-app-muted">{scheduledCount}</span>
                 )}
               </SidebarItem>
             )}
@@ -876,7 +884,8 @@ export function MailLayout() {
                     total={a.backfill_total}
                     done={a.backfill_done}
                   />
-                  <span className="truncate">{a.email}</span>
+                  <span className="flex-1 truncate">{a.email}</span>
+                  <AccountProblem account={a} />
                 </SidebarItem>
               ))}
               {savedSearches.length > 0 && (
@@ -1188,8 +1197,17 @@ export function MailLayout() {
           {isScheduled ? (
             <ScheduledList
               messages={scheduled}
-              selectedId={paneDraft?.localId}
-              onOpen={(msg) => openDraftInPane(localToInit(msg))}
+              serverItems={serverScheduled}
+              selectedId={paneDraft?.localId ?? scheduledPane?.outbox_id}
+              onOpen={(msg) => {
+                setScheduledPaneId(null);
+                openDraftInPane(localToInit(msg));
+              }}
+              onOpenServer={(item) => {
+                setPaneDraft(null);
+                setScheduledPaneId(item.outbox_id);
+                if (threadId) navigate("/mail");
+              }}
             />
           ) : isDrafts && !term.trim() ? (
             <DraftsList
@@ -1299,7 +1317,16 @@ export function MailLayout() {
         ref={paneRef}
         className={`relative min-h-0 min-w-0 flex-1 bg-app-surface ${single && !paneShown ? "hidden" : ""}`}
       >
-        {paneDraft ? (
+        {scheduledPane && isScheduled && !paneDraft ? (
+          <ScheduledSendPane
+            item={scheduledPane}
+            onClose={() => setScheduledPaneId(null)}
+            onEdit={(draft) => {
+              setScheduledPaneId(null);
+              openDraftInPane(draftToInit(draft));
+            }}
+          />
+        ) : paneDraft ? (
           // Keyed by draft: picking a different one must build a fresh editor,
           // because RichTextEditor seeds its body exactly once.
           <Composer
@@ -1441,7 +1468,9 @@ export function MailLayout() {
             </div>
           </div>
         ) : (
-          <div className="flex h-full flex-col items-center justify-center gap-6 text-app-faint">
+          // Clipped to the pane: dragged very narrow, the picture and the line
+          // are cut at its edges instead of spilling over the list beside it.
+          <div className="flex h-full flex-col items-center justify-center gap-6 overflow-hidden text-app-faint">
             {!rightOpen && !panelToggleInList && (
               <button
                 className="absolute right-3 top-3 rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg"
@@ -1457,7 +1486,9 @@ export function MailLayout() {
             )}
             {/* Under the list the pane is short: a smaller picture and line. */}
             <EmptyIllustration className={bottom ? "w-32 max-w-[40%]" : "w-56 max-w-[55%]"} />
-            <span className={bottom ? "text-xl" : "text-3xl"}>{t("mail.selectConversation")}</span>
+            <span className={`px-3 text-center ${bottom ? "text-xl" : "text-3xl"}`}>
+              {t("mail.selectConversation")}
+            </span>
           </div>
         )}
       </main>
@@ -1506,6 +1537,36 @@ export function MailLayout() {
 // Account bullet in the sidebar. While the account is backfilling it becomes a
 // spinning ring that fills with the account colour to show import progress
 // (SPEC §12 M2); once live it's the plain colour-filled dot.
+// An account's mail server not answering, or refusing the password: a small
+// warning after its name, explained on hover.
+function AccountProblem({ account }: { account: AccountOut }) {
+  const t = useT();
+  const authFailed = account.state === "auth_failed";
+  if (!authFailed && account.sync_error !== "unreachable") return null;
+  const title = authFailed
+    ? t("account.authFailed")
+    : t("account.unreachable", { when: sinceLabel(account.sync_error_since) });
+  return (
+    <span
+      title={title}
+      aria-label={title}
+      className={`ml-auto shrink-0 ${authFailed ? "text-red-500" : "text-amber-500"}`}
+    >
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+        <path d="M12 3.5L2.5 20h19L12 3.5z" />
+        <path d="M12 10v4.5M12 17.5v.01" />
+      </svg>
+    </span>
+  );
+}
+
+function sinceLabel(iso: string | null | undefined): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (d.toDateString() === new Date().toDateString()) return formatClock(d);
+  return `${d.toLocaleDateString(getDateLocale(), { day: "numeric", month: "short" })}, ${formatClock(d)}`;
+}
+
 function AccountDot({
   color,
   syncing,